@embeddable.com/remarkable-pro 0.2.5 → 0.2.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@embeddable.com/remarkable-pro",
   "author": "embeddable (https://embeddable.com)",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/embeddable-hq/remarkable-pro"
@@ -80,7 +80,6 @@
     "@embeddable.com/sdk-core": "4.4.0",
     "@embeddable.com/sdk-react": "4.3.6",
     "@eslint/css": "^0.13.0",
-    "@stencil/core": "^4.43.2",
     "@testing-library/react": "^16.3.2",
     "@types/chroma-js": "^3.1.1",
     "@types/react": "^19.1.9",

package/dist/bars.utils-DG6iNy-i.js

@@ -1,158 +0,0 @@
-import { r as v, g as x, a as D } from "./charts.utils-CJLmr9Q8.js";
-import { g as C, a as F } from "./formatter.utils-ClBgeuH1.js";
-import { g as f } from "./styles.utils-C8CnV0SB.js";
-import { t as O } from "./index-B9eYAQkT.js";
-const A = (s, d) => {
-  const m = C(d), { data: o = [], dimension: c, groupDimension: e, measure: i } = s, n = [...new Set(o.map((r) => r[c.name]).filter((r) => r != null))];
-  n.sort();
-  const a = s.axisOrder ? s.axisOrder.filter((r) => n.includes(r)) : n, t = F(e), l = [...new Set(o.map((r) => r[t]))].filter((r) => r != null), u = O(), g = l.map((r, b) => {
-    const w = f({
-      dimensionOrMeasure: e,
-      theme: d,
-      color: "background",
-      value: `${e.name}.${r}`,
-      index: b,
-      chartColors: u
-    }), P = f({
-      dimensionOrMeasure: e,
-      theme: d,
-      color: "border",
-      value: `${e.name}.${r}`,
-      index: b,
-      chartColors: u
-    });
-    return {
-      label: m.data(e, r),
-      rawLabel: r,
-      backgroundColor: w,
-      borderColor: P,
-      data: a.map(($) => {
-        const h = o.find(
-          (k) => k[t] === r && k[c.name] === $
-        );
-        return h ? Number(h[i.name]) : 0;
-      })
-    };
-  });
-  return {
-    labels: a,
-    datasets: g
-  };
-}, L = (s, d = v) => {
-  if (!s.data)
-    return {
-      labels: [],
-      datasets: [{ data: [] }]
-    };
-  const m = C(d), o = x(s.data, s.dimension, s.measures, s.maxItems), c = O();
-  return {
-    labels: o.map((e) => e[s.dimension.name]),
-    datasets: s.measures.map((e, i) => {
-      const n = f({
-        dimensionOrMeasure: e,
-        theme: d,
-        color: "background",
-        value: e.name,
-        index: i,
-        chartColors: c
-      }), a = f({
-        dimensionOrMeasure: e,
-        theme: d,
-        color: "border",
-        value: e.name,
-        index: i,
-        chartColors: c
-      });
-      return {
-        label: m.dimensionOrMeasureTitle(e),
-        data: o.map((t) => t[e.name] ?? 0),
-        backgroundColor: n,
-        borderColor: a
-      };
-    })
-  };
-}, M = (s, d) => {
-  const { datasets: m } = s.chart.data, o = s.dataIndex, c = m.reduce((e, i) => {
-    const n = i.data[o];
-    return e + (n || 0);
-  }, 0);
-  return d(c);
-}, S = (s, d) => {
-  const { onBarClicked: m, measures: o, dimension: c, horizontal: e, data: i } = s, n = C(d);
-  return {
-    plugins: {
-      legend: { position: d.charts.legendPosition ?? "bottom" },
-      datalabels: {
-        labels: {
-          total: {
-            formatter: (a, t) => M(
-              t,
-              (l) => n.data(o[0], l)
-            )
-          },
-          value: {
-            formatter: (a, t) => {
-              var u;
-              const l = o[t.datasetIndex % o.length];
-              return (u = l.inputs) != null && u.showValueAsPercentage ? D(Number(a), t.dataset.data) : n.data(l, a);
-            }
-          }
-        }
-      },
-      tooltip: {
-        callbacks: {
-          title: (a) => {
-            var l;
-            const t = (l = a[0]) == null ? void 0 : l.label;
-            return n.data(c, t);
-          },
-          label: (a) => {
-            var b;
-            const t = o[a.datasetIndex % o.length], l = a.raw, u = n.data(c, a.dataset.label) || "", g = n.data(t, l);
-            let r = "";
-            return (b = t.inputs) != null && b.showValueAsPercentage && (r = `(${D(l, a.dataset.data)})`), `${u}: ${g} ${r}`;
-          }
-        }
-      }
-    },
-    scales: {
-      x: {
-        ticks: {
-          callback: (a) => {
-            if (e)
-              return n.data(o[0], a);
-            if (!i || !i.labels) return;
-            const t = i.labels[Number(a)];
-            return n.data(c, t);
-          }
-        }
-      },
-      y: {
-        ticks: {
-          callback: (a) => {
-            if (!e)
-              return n.data(o[0], a);
-            if (!i || !i.labels) return;
-            const t = i.labels[Number(a)];
-            return n.data(c, t);
-          }
-        }
-      }
-    },
-    onClick: (a, t, l) => {
-      var b;
-      if (!m) return;
-      const u = t[0], g = u ? l.data.labels[u.index] : null, r = u ? (b = l.data.datasets[u.datasetIndex]) == null ? void 0 : b.rawLabel : null;
-      m({
-        axisDimensionValue: g,
-        groupingDimensionValue: r
-      });
-    }
-  };
-};
-export {
-  S as a,
-  A as b,
-  L as g
-};
-//# sourceMappingURL=bars.utils-DG6iNy-i.js.map

package/dist/bars.utils-DG6iNy-i.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bars.utils-DG6iNy-i.js","sources":["../src/components/charts/bars/bars.utils.ts"],"sourcesContent":["import { DataResponse, Dimension, Measure } from '@embeddable.com/core';\nimport { Theme } from '../../../theme/theme.types';\nimport { remarkableTheme } from '../../../theme/theme.constants';\nimport { ChartData, ChartOptions } from 'chart.js';\nimport { getThemeFormatter } from '../../../theme/formatter/formatter.utils';\nimport { getDatalabelPercentage, groupTailAsOther } from '../charts.utils';\nimport { getDimensionFieldName } from '../../../utils/data.utils';\nimport { getDimensionMeasureColor } from '../../../theme/styles/styles.utils';\nimport { getChartColors } from '@embeddable.com/remarkable-ui';\nimport { Context } from 'chartjs-plugin-datalabels';\n\nexport const getBarStackedChartProData = (\n  props: {\n    data: DataResponse['data'];\n    dimension: Dimension;\n    groupDimension: Dimension;\n    measure: Measure;\n    axisOrder?: string[];\n  },\n  theme: Theme,\n): ChartData<'bar'> => {\n  const themeFormatter = getThemeFormatter(theme);\n  const { data = [], dimension, groupDimension, measure } = props;\n\n  const uniqueAxis = [...new Set(data.map((d) => d[dimension.name]).filter((d) => d != null))];\n  uniqueAxis.sort();\n\n  const axis = props.axisOrder ? props.axisOrder.filter((v) => uniqueAxis.includes(v)) : uniqueAxis;\n  const groupDimensionName = getDimensionFieldName(groupDimension);\n  const groupBy = [...new Set(data.map((d) => d[groupDimensionName]))].filter((d) => d != null);\n\n  const chartColors = getChartColors();\n  const datasets = groupBy.map((groupByItem, index) => {\n    const backgroundColor = getDimensionMeasureColor({\n      dimensionOrMeasure: groupDimension,\n      theme,\n      color: 'background',\n      value: `${groupDimension.name}.${groupByItem}`,\n      index,\n      chartColors,\n    });\n\n    const borderColor = getDimensionMeasureColor({\n      dimensionOrMeasure: groupDimension,\n      theme,\n      color: 'border',\n      value: `${groupDimension.name}.${groupByItem}`,\n      index,\n      chartColors,\n    });\n\n    return {\n      label: themeFormatter.data(groupDimension, groupByItem),\n      rawLabel: groupByItem,\n      backgroundColor,\n      borderColor,\n      data: axis.map((axisItem) => {\n        const record = data.find(\n          (d) => d[groupDimensionName] === groupByItem && d[dimension.name] === axisItem,\n        );\n        return record ? Number(record[measure.name]) : 0;\n      }),\n    };\n  });\n\n  return {\n    labels: axis,\n    datasets,\n  };\n};\n\nexport const getBarChartProData = (\n  props: {\n    data: DataResponse['data'];\n    dimension: Dimension;\n    measures: Measure[];\n    maxItems?: number;\n  },\n  theme: Theme = remarkableTheme,\n): ChartData<'bar'> => {\n  if (!props.data) {\n    return {\n      labels: [],\n      datasets: [{ data: [] }],\n    };\n  }\n\n  const themeFormatter = getThemeFormatter(theme);\n  const groupedData = groupTailAsOther(props.data, props.dimension, props.measures, props.maxItems);\n  const chartColors = getChartColors();\n\n  return {\n    labels: groupedData.map((item) => {\n      return item[props.dimension.name];\n    }),\n    datasets: props.measures.map((measure, index) => {\n      const backgroundColor = getDimensionMeasureColor({\n        dimensionOrMeasure: measure,\n        theme,\n        color: 'background',\n        value: measure.name,\n        index,\n        chartColors,\n      });\n\n      const borderColor = getDimensionMeasureColor({\n        dimensionOrMeasure: measure,\n        theme,\n        color: 'border',\n        value: measure.name,\n        index,\n        chartColors,\n      });\n\n      return {\n        label: themeFormatter.dimensionOrMeasureTitle(measure),\n        data: groupedData.map((item) => item[measure.name] ?? 0),\n        backgroundColor,\n        borderColor,\n      };\n    }),\n  };\n};\n\nconst getBarChartProDatalabelTotalFormatter = (\n  context: Context,\n  formatter: (value: number) => string,\n) => {\n  const { datasets } = context.chart.data;\n  const i = context.dataIndex;\n\n  const total = datasets.reduce((sum, ds) => {\n    const val = ds.data[i] as number;\n    return sum + (val || 0);\n  }, 0);\n\n  return formatter(total);\n};\n\nexport const getBarChartProOptions = (\n  options: {\n    onBarClicked?: (args: {\n      axisDimensionValue: string | null;\n      groupingDimensionValue: string | null;\n    }) => void;\n    measures: Measure[];\n    dimension: Dimension;\n    horizontal: boolean;\n    data: ChartData<'bar'>;\n  },\n  theme: Theme,\n): Partial<ChartOptions<'bar'>> => {\n  const { onBarClicked, measures, dimension, horizontal, data } = options;\n\n  const themeFormatter = getThemeFormatter(theme);\n  return {\n    plugins: {\n      legend: { position: theme.charts.legendPosition ?? 'bottom' },\n      datalabels: {\n        labels: {\n          total: {\n            formatter: (_value: string | number, context: Context) =>\n              getBarChartProDatalabelTotalFormatter(context, (value: number) =>\n                themeFormatter.data(measures[0]!, value),\n              ),\n          },\n          value: {\n            formatter: (value: string | number, context) => {\n              const measure = measures[context.datasetIndex % measures.length]!;\n\n              if (measure.inputs?.showValueAsPercentage) {\n                return getDatalabelPercentage(Number(value), context.dataset.data);\n              }\n              return themeFormatter.data(measure, value);\n            },\n          },\n        },\n      },\n      tooltip: {\n        callbacks: {\n          title: (context) => {\n            const label = context[0]?.label;\n            return themeFormatter.data(dimension, label);\n          },\n\n          label: (context) => {\n            const measure = measures[context.datasetIndex % measures.length]!;\n            const raw = context.raw as number;\n\n            const dimensionLabel = themeFormatter.data(dimension, context.dataset.label) || '';\n            const measureValue = themeFormatter.data(measure, raw);\n\n            let percentage = '';\n            if (measure.inputs?.showValueAsPercentage) {\n              percentage = `(${getDatalabelPercentage(raw, context.dataset.data)})`;\n            }\n            return `${dimensionLabel}: ${measureValue} ${percentage}`;\n          },\n        },\n      },\n    },\n    scales: {\n      x: {\n        ticks: {\n          callback: (value) => {\n            if (horizontal) {\n              return themeFormatter.data(measures[0]!, value);\n            }\n\n            if (!data || !data.labels) return undefined;\n\n            const label = data.labels[Number(value)] as string;\n\n            return themeFormatter.data(dimension, label);\n          },\n        },\n      },\n      y: {\n        ticks: {\n          callback: (value) => {\n            if (!horizontal) {\n              return themeFormatter.data(measures[0]!, value);\n            }\n            if (!data || !data.labels) return undefined;\n            const label = data.labels[Number(value)] as string;\n            return themeFormatter.data(dimension, label);\n          },\n        },\n      },\n    },\n    onClick: (_event, elements, chart) => {\n      if (!onBarClicked) return;\n\n      const element = elements[0];\n      const axisDimensionValue = (element ? chart.data.labels![element.index] : null) as\n        | string\n        | null;\n      const groupingDimensionValue = (\n        element\n          ? (chart.data.datasets[element.datasetIndex] as { rawLabel?: string | null })?.rawLabel\n          : null\n      ) as string | null;\n\n      onBarClicked({\n        axisDimensionValue,\n        groupingDimensionValue,\n      });\n    },\n  };\n};\n"],"names":["getBarStackedChartProData","props","theme","themeFormatter","getThemeFormatter","data","dimension","groupDimension","measure","uniqueAxis","d","axis","v","groupDimensionName","getDimensionFieldName","groupBy","chartColors","getChartColors","datasets","groupByItem","index","backgroundColor","getDimensionMeasureColor","borderColor","axisItem","record","getBarChartProData","remarkableTheme","groupedData","groupTailAsOther","item","getBarChartProDatalabelTotalFormatter","context","formatter","i","total","sum","ds","val","getBarChartProOptions","options","onBarClicked","measures","horizontal","_value","value","_a","getDatalabelPercentage","label","raw","dimensionLabel","measureValue","percentage","_event","elements","chart","element","axisDimensionValue","groupingDimensionValue"],"mappings":"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"}