@embeddable.com/remarkable-pro 0.1.2 → 0.1.3

package/dist/index-BqknHuCo.js

@@ -0,0 +1,88 @@
+import { j as f, K as T } from "./Color.type.emb-Chs0ckWV.js";
+import { useTheme as w } from "@embeddable.com/react";
+import { a as A, r as N, i as o } from "./component.inputs.constants-DMsQ1KIy.js";
+import { C as O } from "./ChartCard-OT66j3V3.js";
+import { g as k } from "./formatter.utils-wIg0a9Bk.js";
+import { useEffect as q } from "react";
+import { g as E, a as V } from "./timeRange.utils-CzFonlg0.js";
+const B = (s) => {
+  var l, g, p, h, u, v;
+  const t = w();
+  A(t);
+  const { title: C, description: P, tooltip: b } = N(s), {
+    hideMenu: L,
+    changeFontSize: y,
+    comparisonPeriod: i,
+    comparisonDateRange: D,
+    displayChangeAsPercentage: S,
+    fontSize: _,
+    measure: r,
+    primaryDateRange: m,
+    results: a,
+    resultsComparison: e,
+    reversePositiveNegativeColors: j,
+    percentageDecimalPlaces: x,
+    setComparisonDateRange: d
+  } = s;
+  q(() => {
+    if (!d) return;
+    const n = E(
+      m,
+      i,
+      t
+    );
+    d(n);
+  }, [i, JSON.stringify(m), t]);
+  const F = (g = (l = a.data) == null ? void 0 : l[0]) == null ? void 0 : g[r.name], R = D ? (h = (p = e == null ? void 0 : e.data) == null ? void 0 : p[0]) == null ? void 0 : h[r.name] : void 0, z = k(t), K = (n) => z.data(r, n), M = `vs ${V(i, t).toLowerCase()}`, c = {
+    isLoading: !!(a.isLoading || e != null && e.isLoading),
+    data: !(a != null && a.data) && !(e != null && e.data) ? void 0 : [
+      ...(u = a.data) != null && u.length ? [{ label: o.t("charts.primaryPeriod"), ...a.data[0] }] : [],
+      ...(v = e == null ? void 0 : e.data) != null && v.length ? [{ label: o.t("charts.comparisonPeriod"), ...e.data[0] }] : []
+    ]
+  };
+  return /* @__PURE__ */ f.jsx(
+    O,
+    {
+      data: c,
+      dimensionsAndMeasures: [
+        // Add a label dimension to distinguish primary and comparison periods in exports
+        {
+          name: "label",
+          title: o.t("charts.label"),
+          nativeType: "string",
+          __type__: "dimension"
+        },
+        r
+      ],
+      errorMessage: a.error,
+      description: P,
+      title: C,
+      tooltip: b,
+      hideMenu: L,
+      children: /* @__PURE__ */ f.jsx(
+        T,
+        {
+          value: F,
+          comparisonValue: c.isLoading ? void 0 : R,
+          valueFormatter: K,
+          valueFontSize: _,
+          trendFontSize: y,
+          invertChangeColors: j,
+          showChangeAsPercentage: S,
+          comparisonLabel: M,
+          percentageDecimalPlaces: x,
+          noPreviousDataLabel: o.t("charts.kpiChart.noPreviousData"),
+          equalComparisonLabel: o.t("charts.kpiChart.equalComparison")
+        }
+      )
+    }
+  );
+}, W = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: B
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  B as K,
+  W as i
+};
+//# sourceMappingURL=index-BqknHuCo.js.map

package/dist/index-BqknHuCo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-BqknHuCo.js","sources":["../src/components/charts/kpis/KpiChartNumberComparisonPro/index.tsx"],"sourcesContent":["import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { DataResponse, Measure, TimeRange } from '@embeddable.com/core';\nimport { i18n, i18nSetup } from '../../../../theme/i18n/i18n';\nimport { resolveI18nProps } from '../../../component.utils';\nimport { ChartCard, ChartCardHeaderProps } from '../../shared/ChartCard/ChartCard';\nimport { KpiChart } from '@embeddable.com/remarkable-ui';\nimport { getThemeFormatter } from '../../../../theme/formatter/formatter.utils';\nimport { useEffect } from 'react';\nimport {\n  getComparisonPeriodDateRange,\n  getComparisonPeriodLabel,\n} from '../../../utils/timeRange.utils';\n\ntype KpiChartNumberComparisonProProp = {\n  changeFontSize?: number;\n  comparisonPeriod?: string;\n\n  displayChangeAsPercentage?: boolean;\n  fontSize?: number;\n  measure: Measure;\n  primaryDateRange: TimeRange;\n  results: DataResponse;\n  resultsComparison: DataResponse | undefined;\n  reversePositiveNegativeColors?: boolean;\n\n  percentageDecimalPlaces?: number;\n  comparisonDateRange: TimeRange;\n  setComparisonDateRange?: (dateRange: TimeRange) => void;\n} & ChartCardHeaderProps;\n\nconst KpiChartNumberComparisonPro = (props: KpiChartNumberComparisonProProp) => {\n  const theme: Theme = useTheme() as Theme;\n  i18nSetup(theme);\n\n  const { title, description, tooltip } = resolveI18nProps(props);\n  const {\n    hideMenu,\n    changeFontSize,\n    comparisonPeriod,\n    comparisonDateRange,\n    displayChangeAsPercentage,\n    fontSize,\n    measure,\n    primaryDateRange,\n    results,\n    resultsComparison,\n    reversePositiveNegativeColors,\n    percentageDecimalPlaces,\n    setComparisonDateRange,\n  } = props;\n\n  useEffect(() => {\n    if (!setComparisonDateRange) return;\n\n    const newComparisonDateRange = getComparisonPeriodDateRange(\n      primaryDateRange,\n      comparisonPeriod,\n      theme,\n    );\n    setComparisonDateRange(newComparisonDateRange);\n  }, [comparisonPeriod, JSON.stringify(primaryDateRange), theme]);\n\n  const value: number = results.data?.[0]?.[measure.name];\n  const comparisonValue = comparisonDateRange\n    ? resultsComparison?.data?.[0]?.[measure.name]\n    : undefined;\n\n  const themeFormatter = getThemeFormatter(theme);\n  const valueFormatter = (valueToFormat: number) => themeFormatter.data(measure, valueToFormat);\n  const comparisonLabel = `vs ${getComparisonPeriodLabel(comparisonPeriod, theme).toLowerCase()}`;\n\n  const resultsCombined: DataResponse = {\n    isLoading: Boolean(results.isLoading || resultsComparison?.isLoading),\n    data:\n      !results?.data && !resultsComparison?.data\n        ? undefined\n        : [\n            ...(results.data?.length\n              ? [{ label: i18n.t('charts.primaryPeriod'), ...results.data[0] }]\n              : []),\n            ...(resultsComparison?.data?.length\n              ? [{ label: i18n.t('charts.comparisonPeriod'), ...resultsComparison.data[0] }]\n              : []),\n          ],\n  };\n\n  return (\n    <ChartCard\n      data={resultsCombined}\n      dimensionsAndMeasures={[\n        // Add a label dimension to distinguish primary and comparison periods in exports\n        {\n          name: 'label',\n          title: i18n.t('charts.label'),\n          nativeType: 'string',\n          __type__: 'dimension',\n        },\n        measure,\n      ]}\n      errorMessage={results.error}\n      description={description}\n      title={title}\n      tooltip={tooltip}\n      hideMenu={hideMenu}\n    >\n      <KpiChart\n        value={value}\n        comparisonValue={resultsCombined.isLoading ? undefined : comparisonValue}\n        valueFormatter={valueFormatter}\n        valueFontSize={fontSize}\n        trendFontSize={changeFontSize}\n        invertChangeColors={reversePositiveNegativeColors}\n        showChangeAsPercentage={displayChangeAsPercentage}\n        comparisonLabel={comparisonLabel}\n        percentageDecimalPlaces={percentageDecimalPlaces}\n        noPreviousDataLabel={i18n.t('charts.kpiChart.noPreviousData')}\n        equalComparisonLabel={i18n.t('charts.kpiChart.equalComparison')}\n      />\n    </ChartCard>\n  );\n};\n\nexport default KpiChartNumberComparisonPro;\n"],"names":["KpiChartNumberComparisonPro","props","theme","useTheme","i18nSetup","title","description","tooltip","resolveI18nProps","hideMenu","changeFontSize","comparisonPeriod","comparisonDateRange","displayChangeAsPercentage","fontSize","measure","primaryDateRange","results","resultsComparison","reversePositiveNegativeColors","percentageDecimalPlaces","setComparisonDateRange","useEffect","newComparisonDateRange","getComparisonPeriodDateRange","value","_b","_a","comparisonValue","_d","_c","themeFormatter","getThemeFormatter","valueFormatter","valueToFormat","comparisonLabel","getComparisonPeriodLabel","resultsCombined","_e","i18n","_f","jsx","ChartCard","KpiChart"],"mappings":";;;;;;;AA+BA,MAAMA,IAA8B,CAACC,MAA2C;;AAC9E,QAAMC,IAAeC,EAAA;AACrB,EAAAC,EAAUF,CAAK;AAEf,QAAM,EAAE,OAAAG,GAAO,aAAAC,GAAa,SAAAC,EAAA,IAAYC,EAAiBP,CAAK,GACxD;AAAA,IACJ,UAAAQ;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,2BAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,+BAAAC;AAAA,IACA,yBAAAC;AAAA,IACA,wBAAAC;AAAA,EAAA,IACEpB;AAEJ,EAAAqB,EAAU,MAAM;AACd,QAAI,CAACD,EAAwB;AAE7B,UAAME,IAAyBC;AAAA,MAC7BR;AAAA,MACAL;AAAA,MACAT;AAAA,IAAA;AAEF,IAAAmB,EAAuBE,CAAsB;AAAA,EAC/C,GAAG,CAACZ,GAAkB,KAAK,UAAUK,CAAgB,GAAGd,CAAK,CAAC;AAE9D,QAAMuB,KAAgBC,KAAAC,IAAAV,EAAQ,SAAR,gBAAAU,EAAe,OAAf,gBAAAD,EAAoBX,EAAQ,OAC5Ca,IAAkBhB,KACpBiB,KAAAC,IAAAZ,KAAA,gBAAAA,EAAmB,SAAnB,gBAAAY,EAA0B,OAA1B,gBAAAD,EAA+Bd,EAAQ,QACvC,QAEEgB,IAAiBC,EAAkB9B,CAAK,GACxC+B,IAAiB,CAACC,MAA0BH,EAAe,KAAKhB,GAASmB,CAAa,GACtFC,IAAkB,MAAMC,EAAyBzB,GAAkBT,CAAK,EAAE,aAAa,IAEvFmC,IAAgC;AAAA,IACpC,WAAW,GAAQpB,EAAQ,aAAaC,KAAA,QAAAA,EAAmB;AAAA,IAC3D,MACE,EAACD,KAAA,QAAAA,EAAS,SAAQ,EAACC,KAAA,QAAAA,EAAmB,QAClC,SACA;AAAA,MACE,IAAIoB,IAAArB,EAAQ,SAAR,QAAAqB,EAAc,SACd,CAAC,EAAE,OAAOC,EAAK,EAAE,sBAAsB,GAAG,GAAGtB,EAAQ,KAAK,CAAC,EAAA,CAAG,IAC9D,CAAA;AAAA,MACJ,IAAIuB,IAAAtB,KAAA,gBAAAA,EAAmB,SAAnB,QAAAsB,EAAyB,SACzB,CAAC,EAAE,OAAOD,EAAK,EAAE,yBAAyB,GAAG,GAAGrB,EAAkB,KAAK,CAAC,EAAA,CAAG,IAC3E,CAAA;AAAA,IAAC;AAAA,EACP;AAGR,SACEuB,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAML;AAAA,MACN,uBAAuB;AAAA;AAAA,QAErB;AAAA,UACE,MAAM;AAAA,UACN,OAAOE,EAAK,EAAE,cAAc;AAAA,UAC5B,YAAY;AAAA,UACZ,UAAU;AAAA,QAAA;AAAA,QAEZxB;AAAA,MAAA;AAAA,MAEF,cAAcE,EAAQ;AAAA,MACtB,aAAAX;AAAA,MACA,OAAAD;AAAA,MACA,SAAAE;AAAA,MACA,UAAAE;AAAA,MAEA,UAAAgC,gBAAAA,EAAAA;AAAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAAlB;AAAA,UACA,iBAAiBY,EAAgB,YAAY,SAAYT;AAAA,UACzD,gBAAAK;AAAA,UACA,eAAenB;AAAA,UACf,eAAeJ;AAAA,UACf,oBAAoBS;AAAA,UACpB,wBAAwBN;AAAA,UACxB,iBAAAsB;AAAA,UACA,yBAAAf;AAAA,UACA,qBAAqBmB,EAAK,EAAE,gCAAgC;AAAA,UAC5D,sBAAsBA,EAAK,EAAE,iCAAiC;AAAA,QAAA;AAAA,MAAA;AAAA,IAChE;AAAA,EAAA;AAGN;;;;"}

package/dist/index-CdwBu2mT.js

@@ -0,0 +1,83 @@
+import { m as L, j as o, B as T } from "./Color.type.emb-Chs0ckWV.js";
+import { useTheme as w } from "@embeddable.com/react";
+import { a as _, r as v } from "./component.inputs.constants-DMsQ1KIy.js";
+import { C as D } from "./ChartCard-OT66j3V3.js";
+import { g as G, a as I } from "./bars.utils-DzcvCtRj.js";
+import { u as O } from "./charts.fillGaps.hooks-C7KsWcZb.js";
+import { C as R } from "./ChartGranularitySelectField-awLCjaEw.js";
+const z = (r) => {
+  var u, c;
+  const e = w();
+  _(e);
+  const {
+    measures: s,
+    yAxisRangeMin: h,
+    xAxisMaxItems: d,
+    yAxisRangeMax: p,
+    showLegend: x,
+    showTooltips: g,
+    showLogarithmicScale: f,
+    showValueLabels: C,
+    reverseXAxis: M,
+    hideMenu: y,
+    dimension: a,
+    setGranularity: b,
+    onBarClicked: j
+  } = r, { tooltip: i, description: n, title: l, xAxisLabel: A, yAxisLabel: B } = v(r), t = O({
+    results: r.results,
+    dimension: a
+  }), m = G(
+    { data: t.data, dimension: a, measures: s, maxItems: d },
+    e
+  ), P = L(
+    I({ measures: s, horizontal: !1, onBarClicked: j, data: m, dimension: a }, e),
+    // Format Y axis based on first measure
+    ((c = (u = e.charts) == null ? void 0 : u.barChartDefaultPro) == null ? void 0 : c.options) || {}
+  ), S = !l && !n && !i;
+  return /* @__PURE__ */ o.jsxs(
+    D,
+    {
+      data: t,
+      dimensionsAndMeasures: [a, ...s],
+      errorMessage: t.error,
+      description: n,
+      title: l,
+      tooltip: i,
+      hideMenu: y,
+      children: [
+        /* @__PURE__ */ o.jsx(
+          R,
+          {
+            hasMarginTop: S,
+            dimension: a,
+            onChange: b
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          T,
+          {
+            data: m,
+            showLegend: x,
+            showTooltips: g,
+            showValueLabels: C,
+            showLogarithmicScale: f,
+            xAxisLabel: A,
+            yAxisLabel: B,
+            reverseXAxis: M,
+            yAxisRangeMin: h,
+            yAxisRangeMax: p,
+            options: P
+          }
+        )
+      ]
+    }
+  );
+}, J = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: z
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  z as B,
+  J as i
+};
+//# sourceMappingURL=index-CdwBu2mT.js.map

package/dist/index-CdwBu2mT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-CdwBu2mT.js","sources":["../src/components/charts/bars/BarChartDefaultPro/index.tsx"],"sourcesContent":["import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { ChartCard, ChartCardHeaderProps } from '../../shared/ChartCard/ChartCard';\nimport { resolveI18nProps } from '../../../component.utils';\nimport { BarChart } from '@embeddable.com/remarkable-ui';\nimport { getBarChartProData, getBarChartProOptions } from '../bars.utils';\nimport { mergician } from 'mergician';\nimport { DataResponse, Dimension, Granularity, Measure } from '@embeddable.com/core';\nimport { useFillGaps } from '../../charts.fillGaps.hooks';\nimport { ChartGranularitySelectField } from '../../shared/ChartGranularitySelectField/ChartGranularitySelectField';\n\ntype BarChartDefaultProProps = {\n  dimension: Dimension;\n  measures: Measure[];\n  results: DataResponse;\n  xAxisLabel?: string;\n  xAxisMaxItems?: number;\n  yAxisLabel?: string;\n  yAxisRangeMin?: number;\n  yAxisRangeMax?: number;\n  showLegend?: boolean;\n  showLogarithmicScale?: boolean;\n  showTooltips?: boolean;\n  showValueLabels?: boolean;\n  reverseXAxis?: boolean;\n  setGranularity: (granularity: Granularity) => void;\n  onBarClicked?: (args: { axisDimensionValue: string | null }) => void;\n} & ChartCardHeaderProps;\n\nconst BarChartDefaultPro = (props: BarChartDefaultProProps) => {\n  const theme = useTheme() as Theme;\n  i18nSetup(theme);\n\n  const {\n    measures,\n    yAxisRangeMin,\n    xAxisMaxItems,\n    yAxisRangeMax,\n    showLegend,\n    showTooltips,\n    showLogarithmicScale,\n    showValueLabels,\n    reverseXAxis,\n    hideMenu,\n    dimension,\n    setGranularity,\n    onBarClicked,\n  } = props;\n\n  const { tooltip, description, title, xAxisLabel, yAxisLabel } = resolveI18nProps(props);\n\n  const results = useFillGaps({\n    results: props.results,\n    dimension,\n  });\n\n  const data = getBarChartProData(\n    { data: results.data, dimension, measures, maxItems: xAxisMaxItems },\n    theme,\n  );\n\n  const options = mergician(\n    getBarChartProOptions({ measures, horizontal: false, onBarClicked, data, dimension }, theme), // Format Y axis based on first measure\n    theme.charts?.barChartDefaultPro?.options || {},\n  );\n\n  const granularitySelectorHasMarginTop = !title && !description && !tooltip;\n\n  return (\n    <ChartCard\n      data={results}\n      dimensionsAndMeasures={[dimension, ...measures]}\n      errorMessage={results.error}\n      description={description}\n      title={title}\n      tooltip={tooltip}\n      hideMenu={hideMenu}\n    >\n      <ChartGranularitySelectField\n        hasMarginTop={granularitySelectorHasMarginTop}\n        dimension={dimension}\n        onChange={setGranularity}\n      />\n      <BarChart\n        data={data}\n        showLegend={showLegend}\n        showTooltips={showTooltips}\n        showValueLabels={showValueLabels}\n        showLogarithmicScale={showLogarithmicScale}\n        xAxisLabel={xAxisLabel}\n        yAxisLabel={yAxisLabel}\n        reverseXAxis={reverseXAxis}\n        yAxisRangeMin={yAxisRangeMin}\n        yAxisRangeMax={yAxisRangeMax}\n        options={options}\n      />\n    </ChartCard>\n  );\n};\n\nexport default BarChartDefaultPro;\n"],"names":["BarChartDefaultPro","props","theme","useTheme","i18nSetup","measures","yAxisRangeMin","xAxisMaxItems","yAxisRangeMax","showLegend","showTooltips","showLogarithmicScale","showValueLabels","reverseXAxis","hideMenu","dimension","setGranularity","onBarClicked","tooltip","description","title","xAxisLabel","yAxisLabel","resolveI18nProps","results","useFillGaps","data","getBarChartProData","options","mergician","getBarChartProOptions","_b","_a","granularitySelectorHasMarginTop","jsxs","ChartCard","jsx","ChartGranularitySelectField","BarChart"],"mappings":";;;;;;;AA8BA,MAAMA,IAAqB,CAACC,MAAmC;;AAC7D,QAAMC,IAAQC,EAAA;AACd,EAAAC,EAAUF,CAAK;AAEf,QAAM;AAAA,IACJ,UAAAG;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,EAAA,IACEhB,GAEE,EAAE,SAAAiB,GAAS,aAAAC,GAAa,OAAAC,GAAO,YAAAC,GAAY,YAAAC,EAAA,IAAeC,EAAiBtB,CAAK,GAEhFuB,IAAUC,EAAY;AAAA,IAC1B,SAASxB,EAAM;AAAA,IACf,WAAAc;AAAA,EAAA,CACD,GAEKW,IAAOC;AAAA,IACX,EAAE,MAAMH,EAAQ,MAAM,WAAAT,GAAW,UAAAV,GAAU,UAAUE,EAAA;AAAA,IACrDL;AAAA,EAAA,GAGI0B,IAAUC;AAAA,IACdC,EAAsB,EAAE,UAAAzB,GAAU,YAAY,IAAO,cAAAY,GAAc,MAAAS,GAAM,WAAAX,EAAA,GAAab,CAAK;AAAA;AAAA,MAC3F6B,KAAAC,IAAA9B,EAAM,WAAN,gBAAA8B,EAAc,uBAAd,gBAAAD,EAAkC,YAAW,CAAA;AAAA,EAAC,GAG1CE,IAAkC,CAACb,KAAS,CAACD,KAAe,CAACD;AAEnE,SACEgB,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMX;AAAA,MACN,uBAAuB,CAACT,GAAW,GAAGV,CAAQ;AAAA,MAC9C,cAAcmB,EAAQ;AAAA,MACtB,aAAAL;AAAA,MACA,OAAAC;AAAA,MACA,SAAAF;AAAA,MACA,UAAAJ;AAAA,MAEA,UAAA;AAAA,QAAAsB,gBAAAA,EAAAA;AAAAA,UAACC;AAAA,UAAA;AAAA,YACC,cAAcJ;AAAA,YACd,WAAAlB;AAAA,YACA,UAAUC;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZoB,gBAAAA,EAAAA;AAAAA,UAACE;AAAA,UAAA;AAAA,YACC,MAAAZ;AAAA,YACA,YAAAjB;AAAA,YACA,cAAAC;AAAA,YACA,iBAAAE;AAAA,YACA,sBAAAD;AAAA,YACA,YAAAU;AAAA,YACA,YAAAC;AAAA,YACA,cAAAT;AAAA,YACA,eAAAP;AAAA,YACA,eAAAE;AAAA,YACA,SAAAoB;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;;;;"}

package/dist/index-CjU578lr.js

@@ -0,0 +1,98 @@
+import { j as u, H as R } from "./Color.type.emb-Chs0ckWV.js";
+import { useTheme as _ } from "@embeddable.com/react";
+import { a as P, r as k } from "./component.inputs.constants-DMsQ1KIy.js";
+import { C as B } from "./ChartCard-OT66j3V3.js";
+import { g as c } from "./formatter.utils-wIg0a9Bk.js";
+import { u as d } from "./charts.fillGaps.hooks-C7KsWcZb.js";
+import { u as W } from "./tables.hooks-BQdyUxau.js";
+const f = (e, s) => {
+  const t = c(s);
+  return {
+    key: e.measure.name,
+    label: t.dimensionOrMeasureTitle(e.measure),
+    format: (o) => t.data(e.measure, o)
+  };
+}, a = (e, s) => {
+  const t = c(s);
+  return {
+    key: e.dimension.name,
+    label: t.dimensionOrMeasureTitle(e.dimension),
+    format: (o) => t.data(e.dimension, o)
+  };
+}, z = (e) => {
+  var l;
+  const s = _();
+  P(s);
+  const { title: t, description: o, tooltip: h } = k(e), {
+    hideMenu: C,
+    measure: i,
+    rowDimension: n,
+    columnDimension: r,
+    maxColor: M,
+    midColor: D,
+    minColor: w,
+    displayNullAs: x,
+    columnWidth: T,
+    firstColumnWidth: g,
+    showValues: y,
+    minThreshold: b,
+    maxThreshold: j
+  } = e, p = Array.from(
+    new Set((e.results.data ?? []).filter(Boolean).map((m) => m[r.name]))
+  ), F = Array.from(
+    new Set((e.results.data ?? []).filter(Boolean).map((m) => m[n.name]))
+  ), H = d({
+    results: e.results,
+    dimension: r
+  }), O = d({
+    results: H,
+    dimension: n
+  }), S = W({
+    results: O,
+    columnOrder: p,
+    rowOrder: F,
+    columnDimension: r,
+    rowDimension: n,
+    measures: [i]
+  }), v = f({ measure: i }, s), A = a({ dimension: n }, s), G = a({ dimension: r }, s);
+  return /* @__PURE__ */ u.jsx(
+    B,
+    {
+      title: t,
+      description: o,
+      tooltip: h,
+      data: e.results,
+      dimensionsAndMeasures: [n, r, i],
+      errorMessage: (l = e.results) == null ? void 0 : l.error,
+      hideMenu: C,
+      children: /* @__PURE__ */ u.jsx(
+        R,
+        {
+          data: S,
+          measure: v,
+          rowDimension: A,
+          columnDimension: G,
+          maxColor: M,
+          midColor: D,
+          minColor: w,
+          showValues: y,
+          minThreshold: b,
+          maxThreshold: j,
+          columnWidth: T,
+          firstColumnWidth: g,
+          displayNullAs: x
+        }
+      )
+    }
+  );
+}, L = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: z,
+  getHeatDimension: a,
+  getHeatMeasure: f
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  z as H,
+  L as i
+};
+//# sourceMappingURL=index-CjU578lr.js.map

package/dist/index-CjU578lr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-CjU578lr.js","sources":["../src/components/charts/tables/HeatMapPro/index.tsx"],"sourcesContent":["import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { ChartCard, ChartCardHeaderProps } from '../../shared/ChartCard/ChartCard';\nimport { resolveI18nProps } from '../../../component.utils';\nimport { DataResponse, Dimension, Measure } from '@embeddable.com/core';\nimport { HeatMap, HeatMapPropsDimension, HeatMapPropsMeasure } from '@embeddable.com/remarkable-ui';\nimport { getThemeFormatter } from '../../../../theme/formatter/formatter.utils';\nimport { useFillGaps } from '../../charts.fillGaps.hooks';\nimport { useGetTableSortedResults } from '../tables.hooks';\n\ntype HeatMapProProps = {\n  columnDimension: Dimension;\n  columnWidth?: number;\n\n  displayNullAs?: string;\n  firstColumnWidth?: number;\n  maxColor?: string;\n  maxThreshold?: string;\n  measure: Measure;\n  midColor?: string;\n  minColor?: string;\n  minThreshold?: string;\n  results: DataResponse;\n  rowDimension: Dimension;\n  showValues?: boolean;\n} & ChartCardHeaderProps;\n\nexport const getHeatMeasure = (\n  props: { measure: Measure },\n  theme: Theme,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): HeatMapPropsMeasure<any> => {\n  const themeFormatter = getThemeFormatter(theme);\n\n  return {\n    key: props.measure.name,\n    label: themeFormatter.dimensionOrMeasureTitle(props.measure),\n    format: (value) => {\n      return themeFormatter.data(props.measure, value);\n    },\n  };\n};\n\nexport const getHeatDimension = (\n  props: { dimension: Dimension },\n  theme: Theme,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): HeatMapPropsDimension<any> => {\n  const themeFormatter = getThemeFormatter(theme);\n\n  return {\n    key: props.dimension.name,\n    label: themeFormatter.dimensionOrMeasureTitle(props.dimension),\n    format: (value: string) => themeFormatter.data(props.dimension, value),\n  };\n};\n\nconst HeatMapPro = (props: HeatMapProProps) => {\n  const theme = useTheme() as Theme;\n  i18nSetup(theme);\n\n  const { title, description, tooltip } = resolveI18nProps(props);\n  const {\n    hideMenu,\n    measure,\n    rowDimension,\n    columnDimension,\n    maxColor,\n    midColor,\n    minColor,\n    displayNullAs,\n    columnWidth,\n    firstColumnWidth,\n    showValues,\n    minThreshold,\n    maxThreshold,\n  } = props;\n\n  const columnOrder = Array.from(\n    new Set((props.results.data ?? []).filter(Boolean).map((d) => d[columnDimension.name])),\n  );\n\n  const rowOrder = Array.from(\n    new Set((props.results.data ?? []).filter(Boolean).map((d) => d[rowDimension.name])),\n  );\n\n  // Fill gaps for the column dimension\n  const resultsColumnDimensionFillGaps = useFillGaps({\n    results: props.results,\n    dimension: columnDimension,\n  });\n\n  // Fill gaps for the row dimension\n  const resultsRowColumnDimensionFillGaps = useFillGaps({\n    results: resultsColumnDimensionFillGaps,\n    dimension: rowDimension,\n  });\n\n  const results = useGetTableSortedResults({\n    results: resultsRowColumnDimensionFillGaps,\n    columnOrder,\n    rowOrder,\n    columnDimension,\n    rowDimension,\n    measures: [measure],\n  });\n\n  const pivotMeasures = getHeatMeasure({ measure }, theme);\n  const pivotRowDimension = getHeatDimension({ dimension: rowDimension }, theme);\n  const pivotColumnDimension = getHeatDimension({ dimension: columnDimension }, theme);\n\n  return (\n    <ChartCard\n      title={title}\n      description={description}\n      tooltip={tooltip}\n      data={props.results}\n      dimensionsAndMeasures={[rowDimension, columnDimension, measure]}\n      errorMessage={props.results?.error}\n      hideMenu={hideMenu}\n    >\n      <HeatMap\n        data={results}\n        measure={pivotMeasures}\n        rowDimension={pivotRowDimension}\n        columnDimension={pivotColumnDimension}\n        maxColor={maxColor}\n        midColor={midColor}\n        minColor={minColor}\n        showValues={showValues}\n        minThreshold={minThreshold}\n        maxThreshold={maxThreshold}\n        columnWidth={columnWidth}\n        firstColumnWidth={firstColumnWidth}\n        displayNullAs={displayNullAs}\n      />\n    </ChartCard>\n  );\n};\n\nexport default HeatMapPro;\n"],"names":["getHeatMeasure","props","theme","themeFormatter","getThemeFormatter","value","getHeatDimension","HeatMapPro","useTheme","i18nSetup","title","description","tooltip","resolveI18nProps","hideMenu","measure","rowDimension","columnDimension","maxColor","midColor","minColor","displayNullAs","columnWidth","firstColumnWidth","showValues","minThreshold","maxThreshold","columnOrder","d","rowOrder","resultsColumnDimensionFillGaps","useFillGaps","resultsRowColumnDimensionFillGaps","results","useGetTableSortedResults","pivotMeasures","pivotRowDimension","pivotColumnDimension","jsx","ChartCard","_a","HeatMap"],"mappings":"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"}

package/dist/index-CoDJGGqe.js

@@ -0,0 +1,346 @@
+import { m as X, d as Y, e as R, n as T, o as w, j as I, L as z } from "./Color.type.emb-Chs0ckWV.js";
+import { useTheme as E } from "@embeddable.com/react";
+import { i as V, a as H, r as J } from "./component.inputs.constants-DMsQ1KIy.js";
+import { C as U } from "./ChartCard-OT66j3V3.js";
+import { useEffect as q } from "react";
+import { g as K } from "./timeRange.utils-CzFonlg0.js";
+import { g as P } from "./formatter.utils-wIg0a9Bk.js";
+import { a as Q } from "./styles.utils-u6uj51UE.js";
+import { i as W, s as Z } from "./color.utils-BSg_DFOh.js";
+import { g as aa } from "./lines.utils-COGf_F0b.js";
+import { u as j } from "./charts.fillGaps.hooks-C7KsWcZb.js";
+import { C as ea } from "./ChartGranularitySelectField-awLCjaEw.js";
+const y = "mainAxis", v = "comparisonAxis", _ = (u, c) => {
+  var M, k, O, L;
+  const { data: e, measure: t, dimension: s, index: m, isPreviousPeriod: i, hasMinMaxYAxisRange: b, labels: a } = u, r = e == null ? void 0 : e.map((A) => A[s.name]), n = !!((M = t.inputs) != null && M.connectGaps), g = a ? a.map((A) => {
+    const h = e == null ? void 0 : e.find((p) => p[s.name] === A);
+    return (h == null ? void 0 : h[t.name]) ?? (n ? 0 : null);
+  }) : e == null ? void 0 : e.map((A) => A[t.name] ?? (n ? 0 : null)), x = P(c), D = !!((k = t.inputs) != null && k[i ? "previousLineDashed" : "lineDashed"]), o = Y(), l = (O = t.inputs) == null ? void 0 : O[i ? "previousLineColor" : "lineColor"], d = W(l) ? l : Q({
+    dimensionOrMeasure: t,
+    theme: c,
+    color: "background",
+    value: t.name,
+    chartColors: o,
+    index: m
+  }), f = x.dimensionOrMeasureTitle(t);
+  return {
+    xAxisID: i ? v : y,
+    labels: r,
+    rawLabel: f,
+    label: (i ? `${V.t("common.compared")} ` : "") + f,
+    data: g,
+    backgroundColor: Z(d, 0.5),
+    pointBackgroundColor: d,
+    borderDash: D ? [
+      R("--em-linechart-line-dash", "0.25rem"),
+      R("--em-linechart-line-gap", "0.25rem")
+    ] : void 0,
+    borderColor: d,
+    fill: (L = t.inputs) == null ? void 0 : L.fillUnderLine,
+    clip: b
+  };
+}, ta = (u, c) => {
+  if (!u.data)
+    return {
+      labels: [],
+      datasets: [
+        { xAxisID: y, data: [] },
+        { xAxisID: v, data: [] }
+      ]
+    };
+  const { data: e, dataComparison: t, dimension: s, measures: m, hasMinMaxYAxisRange: i } = u, a = s.nativeType === "time" ? void 0 : t ? Array.from(
+    /* @__PURE__ */ new Set([
+      ...e.map((g) => g[s.name]),
+      ...(t == null ? void 0 : t.map((g) => g[s.name])) ?? []
+    ])
+  ) : void 0, r = m.map(
+    (g, x) => _(
+      {
+        data: e,
+        measure: g,
+        dimension: s,
+        labels: a,
+        hasMinMaxYAxisRange: i,
+        index: x
+      },
+      c
+    )
+  ), n = m.map(
+    (g, x) => _(
+      {
+        data: t,
+        measure: g,
+        dimension: s,
+        labels: a,
+        hasMinMaxYAxisRange: i,
+        index: x,
+        isPreviousPeriod: !0
+      },
+      c
+    )
+  );
+  return {
+    labels: a ?? e.map((g) => g[s.name]),
+    datasets: [...r, ...n]
+  };
+}, sa = (u, c) => {
+  const { dimension: e, data: t, measures: s, xAxisLabel: m } = u, i = P(c);
+  return {
+    plugins: {
+      legend: {
+        labels: {
+          filter: (a, r) => {
+            if (!a) return !1;
+            const n = r.datasets[a.datasetIndex];
+            return Array.isArray(n.data) && n.data.length > 0;
+          }
+        }
+      },
+      datalabels: {
+        labels: {
+          value: {
+            formatter: (a, r) => {
+              const n = s[r.datasetIndex % s.length];
+              return i.data(n, a);
+            }
+          }
+        }
+      },
+      tooltip: {
+        callbacks: {
+          title: (a) => a[0] ? i.data(e, a[0].label) : "",
+          label: (a) => {
+            const r = s[a.datasetIndex % s.length], n = a.raw;
+            return `${a.dataset.label}: ${i.data(r, n)}`;
+          }
+        }
+      }
+    },
+    scales: {
+      x: {
+        display: !1
+      },
+      [y]: {
+        title: {
+          ...w(),
+          text: m,
+          display: !!m
+        },
+        grid: { display: !1 },
+        ticks: {
+          ...T(),
+          callback(a) {
+            var r;
+            return i.data(e, (r = t.labels) == null ? void 0 : r[a]);
+          }
+        }
+      },
+      [v]: {
+        display: !1
+      },
+      y: {
+        ticks: {
+          callback: (a) => i.data(s[0], a)
+        }
+      }
+    }
+  };
+}, na = (u, c) => {
+  var x, D;
+  const { dimension: e, data: t, measures: s, xAxisLabel: m, showComparisonAxis: i, showDataComparison: b } = u, a = P(c), r = ((x = t.datasets.find((o) => o.xAxisID === y)) == null ? void 0 : x.labels) ?? [], n = ((D = t.datasets.find((o) => o.xAxisID === v)) == null ? void 0 : D.labels) ?? [];
+  return {
+    plugins: {
+      legend: {
+        labels: {
+          filter: (o, l) => {
+            if (!o) return !1;
+            const d = l.datasets[o.datasetIndex];
+            return Array.isArray(d.data) && d.data.length > 0;
+          }
+        }
+      },
+      datalabels: {
+        labels: {
+          value: {
+            formatter: (o, l) => {
+              const d = s[l.datasetIndex % s.length];
+              return a.data(d, o);
+            }
+          }
+        }
+      },
+      tooltip: {
+        callbacks: {
+          title: (o) => {
+            const l = o[0];
+            if (!b && l)
+              return a.data(e, l.label);
+            const d = l == null ? void 0 : l.dataIndex;
+            if (d === void 0) return "";
+            const f = r[d] && a.data(e, r[d]), C = n[d] && a.data(e, n[d]);
+            return `${f ?? "-"} vs ${C ?? "-"}`;
+          },
+          label: (o) => {
+            const l = s[o.datasetIndex % s.length], d = o.raw;
+            return `${o.dataset.label}: ${a.data(l, d)}`;
+          }
+        }
+      }
+    },
+    scales: {
+      x: { display: !1 },
+      [y]: {
+        title: {
+          ...w(),
+          text: m,
+          display: !!((!i || n.length === 0) && m)
+        },
+        grid: { display: !1 },
+        ticks: {
+          ...T(),
+          callback: (o) => a.data(e, r[Number(o)])
+        }
+      },
+      [v]: {
+        title: {
+          ...w(),
+          text: m,
+          display: !!m
+        },
+        grid: { display: !1 },
+        display: i && n.length > 0,
+        ticks: {
+          ...T(),
+          callback: (o) => {
+            if (n.length === 0)
+              return "";
+            const l = n[Number(o)];
+            return l ? a.data(e, l) : "";
+          }
+        }
+      },
+      y: {
+        ticks: {
+          callback: (o) => a.data(s[0], o)
+        }
+      }
+    }
+  };
+}, oa = (u, c) => {
+  var m, i;
+  const { onLineClicked: e, dimension: t } = u, s = t.nativeType === "time" ? na : sa;
+  return X(
+    aa({ onLineClicked: e }),
+    s(u, c),
+    ((i = (m = c.charts) == null ? void 0 : m.lineChartComparisonDefaultPro) == null ? void 0 : i.options) || {}
+  );
+}, ia = (u) => {
+  const c = E();
+  H(c);
+  const { title: e, description: t, tooltip: s, xAxisLabel: m, yAxisLabel: i } = J(u), {
+    hideMenu: b,
+    comparisonPeriod: a,
+    measures: r,
+    xAxis: n,
+    reverseXAxis: g,
+    showLegend: x,
+    showLogarithmicScale: D,
+    showTooltips: o,
+    showValueLabels: l,
+    yAxisRangeMax: d,
+    yAxisRangeMin: f,
+    primaryDateRange: C,
+    comparisonDateRange: M,
+    showComparisonAxis: k,
+    setGranularity: O,
+    setComparisonDateRange: L,
+    onLineClicked: A
+  } = u;
+  q(() => {
+    const G = K(
+      C,
+      a,
+      c
+    );
+    L == null || L(G);
+  }, [a, JSON.stringify(C), c]);
+  const h = j({
+    results: u.results,
+    dimension: n,
+    externalDateBounds: C
+  }), p = j({
+    results: u.resultsComparison,
+    dimension: n,
+    externalDateBounds: M
+  }), S = !!(C && a), B = ta(
+    {
+      data: h.data,
+      dataComparison: S ? (p == null ? void 0 : p.data) ?? [] : void 0,
+      dimension: n,
+      measures: r,
+      hasMinMaxYAxisRange: f != null || d != null
+    },
+    c
+  ), F = oa(
+    {
+      data: B,
+      dimension: n,
+      measures: r,
+      xAxisLabel: m,
+      showComparisonAxis: k,
+      showDataComparison: S,
+      onLineClicked: A
+    },
+    c
+  ), N = {
+    isLoading: !!(h.isLoading || p != null && p.isLoading),
+    data: !(h != null && h.data) && !(p != null && p.data) ? void 0 : [...h.data ?? [], ...(p == null ? void 0 : p.data) ?? []]
+  }, $ = !e && !t && !s;
+  return /* @__PURE__ */ I.jsxs(
+    U,
+    {
+      data: N,
+      dimensionsAndMeasures: [...r, n],
+      errorMessage: h.error || (p == null ? void 0 : p.error),
+      description: t,
+      title: e,
+      hideMenu: b,
+      children: [
+        /* @__PURE__ */ I.jsx(
+          ea,
+          {
+            hasMarginTop: $,
+            dimension: n,
+            onChange: O
+          }
+        ),
+        /* @__PURE__ */ I.jsx(
+          z,
+          {
+            data: B,
+            reverseXAxis: g,
+            showLegend: x,
+            showLogarithmicScale: D,
+            showTooltips: o,
+            showValueLabels: l,
+            xAxisLabel: m,
+            yAxisLabel: i,
+            yAxisRangeMax: d,
+            yAxisRangeMin: f,
+            options: F
+          }
+        )
+      ]
+    }
+  );
+}, Ca = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: ia
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  ia as L,
+  oa as a,
+  ta as g,
+  Ca as i
+};
+//# sourceMappingURL=index-CoDJGGqe.js.map