@embeddable.com/remarkable-ui 1.0.5 → 1.0.6

package/dist/HeatMapPro.js

@@ -1,82 +1,84 @@
-import { i as v, r as F, j as u, d as S, w as A, b as d, t as j, c as N, R as i, S as l, I as P, J as c, A as q, o as E } from "./component.constants-B5vygi6l.js";
-import { useTheme as k, defineComponent as B } from "@embeddable.com/react";
-import { C as G } from "./ChartCard-BzLW_64B.js";
+import { j as u, l as W } from "./TablePaginated-pVrIngVd.js";
+import { useTheme as F, defineComponent as R } from "@embeddable.com/react";
+import { i as j, r as q, d as A, q as N, a as d, t as P, b as E, G as s, C as G, D as c, v as k } from "./component.constants-VpbbPSIL.js";
+import { C as B } from "./ChartCard-FOSghcoD.js";
 import "react";
-import { H as I } from "./HeatMap-HTlj76CN.js";
-import { g as C } from "./formatter.utils-N2gk49ys.js";
+import { H as O } from "./HeatMap-DwXoxYyu.js";
+import { g } from "./formatter.utils-BLz3TSY0.js";
 import { u as h } from "./charts.fillGaps.hooks-5WclK2CD.js";
-const O = (e, a) => {
-  const n = C(a);
+import { C as m } from "./Color.type.emb-CTiA_AzI.js";
+const I = (e, a) => {
+  const t = g(a);
   return {
     key: e.measure.name,
-    label: n.dimensionOrMeasureTitle(e.measure),
-    format: (o) => n.data(e.measure, o)
+    label: t.dimensionOrMeasureTitle(e.measure),
+    format: (o) => t.data(e.measure, o)
   };
 }, p = (e, a) => {
-  const n = C(a);
+  const t = g(a);
   return {
     key: e.dimension.name,
-    label: n.dimensionOrMeasureTitle(e.dimension),
-    format: (o) => n.data(e.dimension, o)
+    label: t.dimensionOrMeasureTitle(e.dimension),
+    format: (o) => t.data(e.dimension, o)
   };
-}, J = (e) => {
-  const a = k();
-  v(a);
-  const { description: n, title: o } = F(e), {
-    measure: m,
+}, _ = (e) => {
+  const a = F();
+  j(a);
+  const { description: t, title: o } = q(e), {
+    measure: l,
     rowDimension: r,
-    columnDimension: s,
-    maxColor: b,
-    midColor: g,
+    columnDimension: i,
+    maxColor: C,
+    midColor: b,
     minColor: f,
     displayNullAs: D,
     columnWidth: M,
-    firstColumnWidth: w,
-    showValues: x,
-    minThreshold: T,
-    maxThreshold: H
-  } = e, y = h({
+    firstColumnWidth: x,
+    showValues: w,
+    minThreshold: y,
+    maxThreshold: T
+  } = e, H = h({
     results: e.results,
-    dimension: s
-  }), t = h({
-    results: y,
+    dimension: i
+  }), n = h({
+    results: H,
     dimension: r
-  }), R = O({ measure: m }, a), V = p({ dimension: r }, a), W = p({ dimension: s }, a);
+  }), S = I({ measure: l }, a), v = p({ dimension: r }, a), V = p({ dimension: i }, a);
   return /* @__PURE__ */ u.jsx(
-    G,
+    B,
     {
       title: o,
-      subtitle: n,
+      subtitle: t,
       data: e.results,
-      dimensionsAndMeasures: [r, s, m],
-      errorMessage: t == null ? void 0 : t.error,
+      dimensionsAndMeasures: [r, i, l],
+      errorMessage: n == null ? void 0 : n.error,
       children: /* @__PURE__ */ u.jsx(
-        I,
+        O,
         {
-          data: t.data ?? [],
-          measure: R,
-          rowDimension: V,
-          columnDimension: W,
-          maxColor: b,
-          midColor: g,
+          data: n.data ?? [],
+          measure: S,
+          rowDimension: v,
+          columnDimension: V,
+          maxColor: C,
+          midColor: b,
           minColor: f,
-          showValues: x,
-          minThreshold: T,
-          maxThreshold: H,
+          showValues: w,
+          minThreshold: y,
+          maxThreshold: T,
           columnWidth: M,
-          firstColumnWidth: w,
+          firstColumnWidth: x,
           displayNullAs: D
         }
       )
     }
   );
-}, _ = {
+}, z = {
   name: "HeatMapPro",
   label: "Heat Map",
   category: "Table Charts",
   inputs: [
-    S,
     A,
+    N,
     {
       ...d,
       label: "Row Dimension",
@@ -87,25 +89,46 @@ const O = (e, a) => {
       label: "Column Dimension",
       name: "columnDimension"
     },
-    j,
-    N,
-    { ...i, name: "displayNullAs", label: "Display Null As" },
-    { ...l, name: "maxColor", label: "Max Color", defaultValue: "green", required: !0 },
-    { ...l, name: "midColor", label: "Mid Color", defaultValue: "yellow", required: !0 },
-    { ...l, name: "minColor", label: "Min Color", defaultValue: "red", required: !0 },
+    P,
+    E,
+    { ...s, name: "displayNullAs", label: "Display Null As" },
+    {
+      type: m,
+      name: "maxColor",
+      label: "Max Color",
+      defaultValue: "green",
+      required: !0,
+      category: "Component Settings"
+    },
+    {
+      type: m,
+      name: "midColor",
+      label: "Mid Color",
+      defaultValue: "yellow",
+      required: !0,
+      category: "Component Settings"
+    },
+    {
+      type: m,
+      name: "minColor",
+      label: "Min Color",
+      defaultValue: "red",
+      required: !0,
+      category: "Component Settings"
+    },
     {
-      ...i,
+      ...s,
       name: "minThreshold",
       label: "Max range lower limit",
       description: "Enter a value as either a number (e.g. 20) or a percentage (e.g. 20%)"
     },
     {
-      ...i,
+      ...s,
       name: "maxThreshold",
       label: "Min range upper limit",
       description: "Enter a value as either a number (e.g. 20) or a percentage (e.g. 20%)"
     },
-    { ...P, name: "showValues", label: "Show Values", defaultValue: !0 },
+    { ...G, name: "showValues", label: "Show Values", defaultValue: !0 },
     {
       ...c,
       name: "firstColumnWidth",
@@ -118,12 +141,13 @@ const O = (e, a) => {
       label: "Column Width",
       description: "Set the width in px (e.g. 200)"
     },
-    q
+    k
   ]
-}, Z = B(J, _, {
+}, ee = R(_, z, {
+  /* @ts-expect-error - to be fixed in @embeddable.com/react */
   props: (e) => ({
     ...e,
-    results: E({
+    results: W({
       from: e.dataset,
       select: [e.rowDimension, e.columnDimension, e.measure],
       limit: e.maxResults,
@@ -132,7 +156,7 @@ const O = (e, a) => {
   })
 });
 export {
-  Z as default,
-  _ as meta
+  ee as default,
+  z as meta
 };
 //# sourceMappingURL=HeatMapPro.js.map

package/dist/HeatMapPro.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeatMapPro.js","sources":["../src/remarkable-pro/components/charts/tables/HeatMapPro/index.tsx","../src/remarkable-pro/components/charts/tables/HeatMapPro/HeatMapPro.emb.ts"],"sourcesContent":["import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { ChartCard } from '../../shared/ChartCard/ChartCard';\nimport { resolveI18nProps } from '../../../component.utils';\nimport { DataResponse, Dimension, Measure } from '@embeddable.com/core';\nimport { HeatMap, HeatMapPropsDimension, HeatMapPropsMeasure } from '../../../../../remarkable-ui';\nimport { getThemeFormatter } from '../../../../theme/formatter/formatter.utils';\nimport { useFillGaps } from '../../charts.fillGaps.hooks';\n\ntype HeatMapProProps = {\n  columnDimension: Dimension;\n  columnWidth?: number;\n  description: string;\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  title: string;\n};\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 { description, title } = resolveI18nProps(props);\n  const {\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  // 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 results = useFillGaps({\n    results: resultsColumnDimensionFillGaps,\n    dimension: rowDimension,\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      subtitle={description}\n      data={props.results}\n      dimensionsAndMeasures={[rowDimension, columnDimension, measure]}\n      errorMessage={results?.error}\n    >\n      <HeatMap\n        data={results.data ?? []}\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","import { loadData } from '@embeddable.com/core';\nimport { defineComponent, EmbeddedComponentMeta, Inputs } from '@embeddable.com/react';\nimport HeatMapPro from './index';\nimport {\n  dataset,\n  description,\n  title,\n  maxResults,\n  genericString,\n  dimensionWithDateBounds,\n  genericNumber,\n  measure,\n  inputColor,\n  genericBoolean,\n} from '../../../component.constants';\n\nexport const meta = {\n  name: 'HeatMapPro',\n  label: 'Heat Map',\n  category: 'Table Charts',\n  inputs: [\n    dataset,\n    measure,\n    {\n      ...dimensionWithDateBounds,\n      label: 'Row Dimension',\n      name: 'rowDimension',\n    },\n    {\n      ...dimensionWithDateBounds,\n      label: 'Column Dimension',\n      name: 'columnDimension',\n    },\n    title,\n    description,\n    { ...genericString, name: 'displayNullAs', label: 'Display Null As' },\n    { ...inputColor, name: 'maxColor', label: 'Max Color', defaultValue: 'green', required: true },\n    { ...inputColor, name: 'midColor', label: 'Mid Color', defaultValue: 'yellow', required: true },\n    { ...inputColor, name: 'minColor', label: 'Min Color', defaultValue: 'red', required: true },\n    {\n      ...genericString,\n      name: 'minThreshold',\n      label: 'Max range lower limit',\n      description: 'Enter a value as either a number (e.g. 20) or a percentage (e.g. 20%)',\n    },\n    {\n      ...genericString,\n      name: 'maxThreshold',\n      label: 'Min range upper limit',\n      description: 'Enter a value as either a number (e.g. 20) or a percentage (e.g. 20%)',\n    },\n    { ...genericBoolean, name: 'showValues', label: 'Show Values', defaultValue: true },\n    {\n      ...genericNumber,\n      name: 'firstColumnWidth',\n      label: 'First Column Width',\n      description: 'Set the width in px (e.g. 200)',\n    },\n    {\n      ...genericNumber,\n      name: 'columnWidth',\n      label: 'Column Width',\n      description: 'Set the width in px (e.g. 200)',\n    },\n    maxResults,\n  ],\n} as const satisfies EmbeddedComponentMeta;\n\nexport default defineComponent(HeatMapPro, meta, {\n  props: (inputs: Inputs<typeof meta>) => {\n    return {\n      ...inputs,\n      results: loadData({\n        from: inputs.dataset,\n        select: [inputs.rowDimension, inputs.columnDimension, inputs.measure],\n        limit: inputs.maxResults,\n        countRows: true,\n      }),\n    };\n  },\n});\n"],"names":["getHeatMeasure","props","theme","themeFormatter","getThemeFormatter","value","getHeatDimension","HeatMapPro","useTheme","i18nSetup","description","title","resolveI18nProps","measure","rowDimension","columnDimension","maxColor","midColor","minColor","displayNullAs","columnWidth","firstColumnWidth","showValues","minThreshold","maxThreshold","resultsColumnDimensionFillGaps","useFillGaps","results","pivotMeasures","pivotRowDimension","pivotColumnDimension","jsx","ChartCard","HeatMap","meta","dataset","dimensionWithDateBounds","genericString","inputColor","genericBoolean","genericNumber","maxResults","HeatMapPro_emb","defineComponent","inputs","loadData"],"mappings":"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"}
+{"version":3,"file":"HeatMapPro.js","sources":["../src/remarkable-pro/components/charts/tables/HeatMapPro/index.tsx","../src/remarkable-pro/components/charts/tables/HeatMapPro/HeatMapPro.emb.ts"],"sourcesContent":["import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { ChartCard } from '../../shared/ChartCard/ChartCard';\nimport { resolveI18nProps } from '../../../component.utils';\nimport { DataResponse, Dimension, Measure } from '@embeddable.com/core';\nimport { HeatMap, HeatMapPropsDimension, HeatMapPropsMeasure } from '../../../../../remarkable-ui';\nimport { getThemeFormatter } from '../../../../theme/formatter/formatter.utils';\nimport { useFillGaps } from '../../charts.fillGaps.hooks';\n\ntype HeatMapProProps = {\n  columnDimension: Dimension;\n  columnWidth?: number;\n  description: string;\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  title: string;\n};\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 { description, title } = resolveI18nProps(props);\n  const {\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  // 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 results = useFillGaps({\n    results: resultsColumnDimensionFillGaps,\n    dimension: rowDimension,\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      subtitle={description}\n      data={props.results}\n      dimensionsAndMeasures={[rowDimension, columnDimension, measure]}\n      errorMessage={results?.error}\n    >\n      <HeatMap\n        data={results.data ?? []}\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","import { loadData } from '@embeddable.com/core';\nimport { defineComponent, EmbeddedComponentMeta, Inputs } from '@embeddable.com/react';\nimport HeatMapPro from './index';\nimport {\n  dataset,\n  description,\n  title,\n  maxResults,\n  genericString,\n  dimensionWithDateBounds,\n  genericNumber,\n  measure,\n  genericBoolean,\n} from '../../../component.constants';\nimport ColorType from '../../../../editors/ColorEditor/Color.type.emb';\n\nexport const meta = {\n  name: 'HeatMapPro',\n  label: 'Heat Map',\n  category: 'Table Charts',\n  inputs: [\n    dataset,\n    measure,\n    {\n      ...dimensionWithDateBounds,\n      label: 'Row Dimension',\n      name: 'rowDimension',\n    },\n    {\n      ...dimensionWithDateBounds,\n      label: 'Column Dimension',\n      name: 'columnDimension',\n    },\n    title,\n    description,\n    { ...genericString, name: 'displayNullAs', label: 'Display Null As' },\n\n    {\n      type: ColorType,\n      name: 'maxColor',\n      label: 'Max Color',\n      defaultValue: 'green',\n      required: true,\n      category: 'Component Settings',\n    },\n    {\n      type: ColorType,\n      name: 'midColor',\n      label: 'Mid Color',\n      defaultValue: 'yellow',\n      required: true,\n      category: 'Component Settings',\n    },\n    {\n      type: ColorType,\n      name: 'minColor',\n      label: 'Min Color',\n      defaultValue: 'red',\n      required: true,\n      category: 'Component Settings',\n    },\n\n    {\n      ...genericString,\n      name: 'minThreshold',\n      label: 'Max range lower limit',\n      description: 'Enter a value as either a number (e.g. 20) or a percentage (e.g. 20%)',\n    },\n    {\n      ...genericString,\n      name: 'maxThreshold',\n      label: 'Min range upper limit',\n      description: 'Enter a value as either a number (e.g. 20) or a percentage (e.g. 20%)',\n    },\n    { ...genericBoolean, name: 'showValues', label: 'Show Values', defaultValue: true },\n    {\n      ...genericNumber,\n      name: 'firstColumnWidth',\n      label: 'First Column Width',\n      description: 'Set the width in px (e.g. 200)',\n    },\n    {\n      ...genericNumber,\n      name: 'columnWidth',\n      label: 'Column Width',\n      description: 'Set the width in px (e.g. 200)',\n    },\n    maxResults,\n  ],\n} as const satisfies EmbeddedComponentMeta;\n\nexport default defineComponent(HeatMapPro, meta, {\n  /* @ts-expect-error - to be fixed in @embeddable.com/react */\n  props: (inputs: Inputs<typeof meta>) => {\n    return {\n      ...inputs,\n      results: loadData({\n        from: inputs.dataset,\n        select: [inputs.rowDimension, inputs.columnDimension, inputs.measure],\n        limit: inputs.maxResults,\n        countRows: true,\n      }),\n    };\n  },\n});\n"],"names":["getHeatMeasure","props","theme","themeFormatter","getThemeFormatter","value","getHeatDimension","HeatMapPro","useTheme","i18nSetup","description","title","resolveI18nProps","measure","rowDimension","columnDimension","maxColor","midColor","minColor","displayNullAs","columnWidth","firstColumnWidth","showValues","minThreshold","maxThreshold","resultsColumnDimensionFillGaps","useFillGaps","results","pivotMeasures","pivotRowDimension","pivotColumnDimension","jsx","ChartCard","HeatMap","meta","dataset","dimensionWithDateBounds","genericString","ColorType","genericBoolean","genericNumber","maxResults","HeatMapPro_emb","defineComponent","inputs","loadData"],"mappings":"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"}

package/dist/KpiChart-lEsVao_M.js

@@ -0,0 +1,110 @@
+import { h as N, j as n, k as y } from "./TablePaginated-pVrIngVd.js";
+import { useRef as S, useState as w, useEffect as L } from "react";
+/**
+ * @license @tabler/icons-react v3.35.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const M = [["path", { d: "M3 7l6 6l4 -4l8 8", key: "svg-0" }], ["path", { d: "M21 10l0 7l-7 0", key: "svg-1" }]], R = N("outline", "trending-down", "TrendingDown", M);
+/**
+ * @license @tabler/icons-react v3.35.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const $ = [["path", { d: "M3 17l6 -6l4 4l8 -8", key: "svg-0" }], ["path", { d: "M14 7l7 0l0 7", key: "svg-1" }]], B = N("outline", "trending-up", "TrendingUp", $), T = "_kpiChartContainer_1yh32_1", I = "_kpiChartCenter_1yh32_9", K = "_kpiComparisonContainer_1yh32_27", m = {
+  kpiChartContainer: T,
+  kpiChartCenter: I,
+  kpiComparisonContainer: K
+}, D = "_kpiChartChangeContainer_c9xhz_1", E = "_kpiChangeBadge_c9xhz_10", U = "_positive_c9xhz_33", q = "_negative_c9xhz_38", F = "_kpiComparisonLabel_c9xhz_43", i = {
+  kpiChartChangeContainer: D,
+  kpiChangeBadge: E,
+  positive: U,
+  negative: q,
+  kpiComparisonLabel: F
+}, H = (e, t) => e ? t ? i.negative : i.positive : t ? i.positive : i.negative, O = ({
+  value: e,
+  comparisonValue: t = 0,
+  showChangeAsPercentage: c,
+  invertChangeColors: p = !1,
+  comparisonLabel: h,
+  valueFormatter: C,
+  percentageDecimalPlaces: g = 1,
+  equalComparisonLabel: k,
+  noPreviousDataLabel: _,
+  className: x
+}) => {
+  const o = t === e, s = e - t, a = s > 0;
+  let r;
+  c ? r = `${(s / t * 100).toFixed(g)}%` : r = C ? C(s) : s.toString();
+  const f = `${a ? "+" : ""}${r}`, d = a ? B : R;
+  return /* @__PURE__ */ n.jsx("div", { className: y(x, i.kpiChartChangeContainer), children: c && Number(t) === 0 ? /* @__PURE__ */ n.jsx("span", { className: i.kpiComparisonLabel, children: _ }) : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+    !o && /* @__PURE__ */ n.jsxs(
+      "span",
+      {
+        className: y(
+          i.kpiChangeBadge,
+          H(a, p)
+        ),
+        children: [
+          /* @__PURE__ */ n.jsx(d, {}),
+          /* @__PURE__ */ n.jsx("span", { children: f })
+        ]
+      }
+    ),
+    /* @__PURE__ */ n.jsx("span", { className: i.kpiComparisonLabel, children: o ? k ?? h : h })
+  ] }) });
+}, J = ({
+  value: e,
+  valueFontSize: t,
+  trendFontSize: c,
+  comparisonValue: p,
+  comparisonLabel: h,
+  invertChangeColors: C,
+  showChangeAsPercentage: g,
+  percentageDecimalPlaces: k = 1,
+  equalComparisonLabel: _ = "No change",
+  noPreviousDataLabel: x = "No previous data",
+  valueFormatter: o
+}) => {
+  const s = S(null), [a, r] = w(20);
+  L(() => {
+    const l = s.current, v = () => {
+      const z = l.offsetWidth, u = l.offsetHeight, b = Math.min(z, u) * 0.3;
+      r(b);
+    }, j = new ResizeObserver(v);
+    return j.observe(l), v(), () => j.disconnect();
+  }, []);
+  const f = p !== void 0, d = e === void 0 ? "" : o ? o(e) : e;
+  return /* @__PURE__ */ n.jsx("div", { className: m.kpiChartContainer, ref: s, children: /* @__PURE__ */ n.jsxs("div", { className: m.kpiChartCenter, children: [
+    /* @__PURE__ */ n.jsx(
+      "h2",
+      {
+        title: d.toString(),
+        style: {
+          fontSize: t ?? a
+        },
+        children: d
+      }
+    ),
+    /* @__PURE__ */ n.jsx("div", { className: m.kpiComparisonContainer, style: { fontSize: c }, children: f && /* @__PURE__ */ n.jsx(
+      O,
+      {
+        equalComparisonLabel: _,
+        comparisonLabel: h,
+        comparisonValue: p,
+        invertChangeColors: C,
+        percentageDecimalPlaces: k,
+        showChangeAsPercentage: g,
+        value: e,
+        valueFormatter: o,
+        noPreviousDataLabel: x
+      }
+    ) })
+  ] }) });
+};
+export {
+  J as K
+};
+//# sourceMappingURL=KpiChart-lEsVao_M.js.map

package/dist/KpiChart-lEsVao_M.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiChart-lEsVao_M.js","sources":["../node_modules/@tabler/icons-react/dist/esm/icons/IconTrendingDown.mjs","../node_modules/@tabler/icons-react/dist/esm/icons/IconTrendingUp.mjs","../src/remarkable-ui/components/charts/kpis/components/KpiChartChange.tsx","../src/remarkable-ui/components/charts/kpis/KpiChart.tsx"],"sourcesContent":["/**\n * @license @tabler/icons-react v3.35.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M3 7l6 6l4 -4l8 8\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M21 10l0 7l-7 0\", \"key\": \"svg-1\" }]];\nconst IconTrendingDown = createReactComponent(\"outline\", \"trending-down\", \"TrendingDown\", __iconNode);\n\nexport { __iconNode, IconTrendingDown as default };\n//# sourceMappingURL=IconTrendingDown.mjs.map\n","/**\n * @license @tabler/icons-react v3.35.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M3 17l6 -6l4 4l8 -8\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M14 7l7 0l0 7\", \"key\": \"svg-1\" }]];\nconst IconTrendingUp = createReactComponent(\"outline\", \"trending-up\", \"TrendingUp\", __iconNode);\n\nexport { __iconNode, IconTrendingUp as default };\n//# sourceMappingURL=IconTrendingUp.mjs.map\n","import { FC } from 'react';\nimport styles from './KpiChartChange.module.css';\nimport clsx from 'clsx';\nimport { IconTrendingDown, IconTrendingUp } from '@tabler/icons-react';\nimport { KpiChartProps } from '../KpiChart.types';\n\nconst getChangeClass = (isPositive: boolean, invertChangeColors: boolean) => {\n  if (isPositive) return invertChangeColors ? styles.negative : styles.positive;\n  return invertChangeColors ? styles.positive : styles.negative;\n};\n\ntype KpiChartChangeProps = KpiChartProps & { className?: string };\n\nexport const KpiChartChange: FC<KpiChartChangeProps> = ({\n  value,\n  comparisonValue = 0,\n  showChangeAsPercentage,\n  invertChangeColors = false,\n  comparisonLabel,\n  valueFormatter,\n  percentageDecimalPlaces = 1,\n  equalComparisonLabel,\n  noPreviousDataLabel,\n  className,\n}) => {\n  const equalComparison = comparisonValue === value;\n\n  const difference = value - comparisonValue;\n  const isPositive = difference > 0;\n\n  let differenceLabel: string;\n\n  if (showChangeAsPercentage) {\n    const percentage = (difference / comparisonValue) * 100;\n    differenceLabel = `${percentage.toFixed(percentageDecimalPlaces)}%`;\n  } else {\n    differenceLabel = valueFormatter ? valueFormatter(difference) : difference.toString();\n  }\n\n  const displayValue = `${isPositive ? '+' : ''}${differenceLabel}`;\n\n  const Icon = isPositive ? IconTrendingUp : IconTrendingDown;\n\n  return (\n    <div className={clsx(className, styles.kpiChartChangeContainer)}>\n      {showChangeAsPercentage && Number(comparisonValue) === 0 ? (\n        <span className={styles.kpiComparisonLabel}>{noPreviousDataLabel}</span>\n      ) : (\n        <>\n          {!equalComparison && (\n            <span\n              className={clsx(\n                styles.kpiChangeBadge,\n                getChangeClass(isPositive, invertChangeColors),\n              )}\n            >\n              <Icon />\n              <span>{displayValue}</span>\n            </span>\n          )}\n          <span className={styles.kpiComparisonLabel}>\n            {equalComparison ? (equalComparisonLabel ?? comparisonLabel) : comparisonLabel}\n          </span>\n        </>\n      )}\n    </div>\n  );\n};\n","import { FC, useEffect, useRef, useState } from 'react';\nimport styles from './KpiChart.module.css';\nimport { KpiChartChange } from './components/KpiChartChange';\nimport { KpiChartProps } from './KpiChart.types';\n\nexport const KpiChart: FC<KpiChartProps> = ({\n  value,\n  valueFontSize,\n  trendFontSize,\n  comparisonValue,\n  comparisonLabel,\n  invertChangeColors,\n  showChangeAsPercentage,\n  percentageDecimalPlaces = 1,\n  equalComparisonLabel = 'No change',\n  noPreviousDataLabel = 'No previous data',\n  valueFormatter,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [fontSize, setFontSize] = useState(20);\n\n  useEffect(() => {\n    const container = containerRef.current!;\n\n    const updateFont = () => {\n      const w = container.offsetWidth;\n      const h = container.offsetHeight;\n\n      // proportional to the smaller dimension\n      const newSize = Math.min(w, h) * 0.3; // 40% of the smaller dimension\n      setFontSize(newSize);\n    };\n\n    const observer = new ResizeObserver(updateFont);\n    observer.observe(container);\n\n    updateFont(); // initial run\n\n    return () => observer.disconnect();\n  }, []);\n\n  const hasComparisonValue = comparisonValue !== undefined;\n\n  const displayValue = value === undefined ? '' : valueFormatter ? valueFormatter(value) : value;\n\n  return (\n    <div className={styles.kpiChartContainer} ref={containerRef}>\n      <div className={styles.kpiChartCenter}>\n        <h2\n          title={displayValue.toString()}\n          style={{\n            fontSize: valueFontSize ?? fontSize,\n          }}\n        >\n          {displayValue}\n        </h2>\n        <div className={styles.kpiComparisonContainer} style={{ fontSize: trendFontSize }}>\n          {hasComparisonValue && (\n            <KpiChartChange\n              equalComparisonLabel={equalComparisonLabel}\n              comparisonLabel={comparisonLabel}\n              comparisonValue={comparisonValue}\n              invertChangeColors={invertChangeColors}\n              percentageDecimalPlaces={percentageDecimalPlaces}\n              showChangeAsPercentage={showChangeAsPercentage}\n              value={value}\n              valueFormatter={valueFormatter}\n              noPreviousDataLabel={noPreviousDataLabel}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["__iconNode","IconTrendingDown","createReactComponent","IconTrendingUp","getChangeClass","isPositive","invertChangeColors","styles","KpiChartChange","value","comparisonValue","showChangeAsPercentage","comparisonLabel","valueFormatter","percentageDecimalPlaces","equalComparisonLabel","noPreviousDataLabel","className","equalComparison","difference","differenceLabel","displayValue","Icon","jsx","clsx","jsxs","Fragment","KpiChart","valueFontSize","trendFontSize","containerRef","useRef","fontSize","setFontSize","useState","useEffect","container","updateFont","w","h","newSize","observer","hasComparisonValue"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/KpiChartNumberComparisonPro.js

@@ -1,73 +1,75 @@
-import { useTheme as j, defineComponent as w } from "@embeddable.com/react";
-import { i as A, r as B, F as l, j as v, d as E, w as I, G as J, H as M, t as Y, c as G, I as f, J as c, o as D } from "./component.constants-B5vygi6l.js";
-import { C as H } from "./ChartCard-BzLW_64B.js";
+import { useTheme as _, defineComponent as j } from "@embeddable.com/react";
+import { i as w, r as B, z as i, d as E, q as M, A as Y, B as k, t as q, b as I, C as D, D as c } from "./component.constants-VpbbPSIL.js";
+import { j as y, l as f } from "./TablePaginated-pVrIngVd.js";
+import { C as J } from "./ChartCard-FOSghcoD.js";
 import { useEffect as O } from "react";
-import { K as $ } from "./KpiChart-DWnEF3iA.js";
-import { g as k } from "./formatter.utils-N2gk49ys.js";
-import { g as q, a as Q } from "./timeRange.utils-DuutFoIE.js";
-import { C as U } from "./ComparisonPeriod.type.emb-D0_AP_PM.js";
+import { K as $ } from "./KpiChart-lEsVao_M.js";
+import { g as G } from "./formatter.utils-BLz3TSY0.js";
+import { g as H, a as Q } from "./timeRange.utils-AEhW9Gu4.js";
+import { C as U } from "./ComparisonPeriod.type.emb-CQ63PFtq.js";
 const W = (e) => {
-  var d, C, P, h, y, b;
-  const a = j();
-  A(a);
-  const { title: i, description: n } = B(e), {
+  var d, C, P, h, b, v;
+  const a = _();
+  w(a);
+  const { title: n, description: s } = B(e), {
     changeFontSize: u,
-    comparisonPeriod: s,
+    comparisonPeriod: m,
     comparisonDateRange: R,
-    displayChangeAsPercentage: F,
-    fontSize: N,
+    displayChangeAsPercentage: S,
+    fontSize: z,
     measure: t,
     primaryDateRange: p,
     results: r,
     resultsComparison: o,
-    reversePositiveNegativeColors: S,
-    percentageDecimalPlaces: z,
-    setComparisonDateRange: K
+    reversePositiveNegativeColors: F,
+    percentageDecimalPlaces: N,
+    setComparisonDateRange: L
   } = e;
   O(() => {
-    const m = q(
+    const l = H(
       p,
-      s,
+      m,
       a
     );
-    K(m);
-  }, [s, JSON.stringify(p), a]);
-  const L = (C = (d = r.data) == null ? void 0 : d[0]) == null ? void 0 : C[t.name], T = R ? (h = (P = o == null ? void 0 : o.data) == null ? void 0 : P[0]) == null ? void 0 : h[t.name] : void 0, x = k(a), V = (m) => x.data(t, m), _ = `vs ${Q(s, a).toLowerCase()}`, g = {
+    L(l);
+  }, [m, JSON.stringify(p), a]);
+  const T = (C = (d = r.data) == null ? void 0 : d[0]) == null ? void 0 : C[t.name], K = R ? (h = (P = o == null ? void 0 : o.data) == null ? void 0 : P[0]) == null ? void 0 : h[t.name] : void 0, x = G(a), A = (l) => x.data(t, l), V = `vs ${Q(m, a).toLowerCase()}`, g = {
     isLoading: !!(r.isLoading || o != null && o.isLoading),
     data: !(r != null && r.data) && !(o != null && o.data) ? void 0 : [
-      ...(y = r.data) != null && y.length ? [{ label: l.t("charts.primaryPeriod"), ...r.data[0] }] : [],
-      ...(b = o == null ? void 0 : o.data) != null && b.length ? [{ label: l.t("charts.comparisonPeriod"), ...o.data[0] }] : []
+      ...(b = r.data) != null && b.length ? [{ label: i.t("charts.primaryPeriod"), ...r.data[0] }] : [],
+      ...(v = o == null ? void 0 : o.data) != null && v.length ? [{ label: i.t("charts.comparisonPeriod"), ...o.data[0] }] : []
     ]
   };
-  return /* @__PURE__ */ v.jsx(
-    H,
+  return /* @__PURE__ */ y.jsx(
+    J,
     {
       data: g,
       dimensionsAndMeasures: [
         // Add a label dimension to distinguish primary and comparison periods in exports
         {
           name: "label",
-          title: l.t("charts.label"),
+          title: i.t("charts.label"),
           nativeType: "string",
           __type__: "dimension"
         },
         t
       ],
       errorMessage: r.error,
-      subtitle: n,
-      title: i,
-      children: /* @__PURE__ */ v.jsx(
+      subtitle: s,
+      title: n,
+      children: /* @__PURE__ */ y.jsx(
         $,
         {
-          value: L,
-          comparisonValue: g.isLoading ? void 0 : T,
-          valueFormatter: V,
-          valueFontSize: N,
-          changeFontSize: u,
-          invertChangeColors: S,
-          showChangeAsPercentage: F,
-          comparisonLabel: _,
-          percentageDecimalPlaces: z
+          value: T,
+          comparisonValue: g.isLoading ? void 0 : K,
+          valueFormatter: A,
+          valueFontSize: z,
+          trendFontSize: u,
+          invertChangeColors: F,
+          showChangeAsPercentage: S,
+          comparisonLabel: V,
+          percentageDecimalPlaces: N,
+          noPreviousDataLabel: i.t("charts.kpiChart.noPreviousData")
         }
       )
     }
@@ -78,10 +80,10 @@ const W = (e) => {
   category: "Kpi Charts",
   inputs: [
     E,
-    I,
-    { ...J, name: "timeProperty", label: "Time Property" },
+    M,
+    { ...Y, name: "timeProperty", label: "Time Property" },
     {
-      ...M,
+      ...k,
       name: "primaryDateRange",
       label: "Primary Date Range",
       description: "You can also connect this to a date range selector using its variable",
@@ -94,10 +96,10 @@ const W = (e) => {
       description: "You can also connect this to a comparison period selector using its variable",
       category: "Component Data"
     },
-    Y,
-    G,
+    q,
+    I,
     {
-      ...f,
+      ...D,
       name: "displayChangeAsPercentage",
       label: "Display Change as %",
       defaultValue: !1
@@ -109,7 +111,7 @@ const W = (e) => {
       defaultValue: 1
     },
     {
-      ...f,
+      ...D,
       name: "reversePositiveNegativeColors",
       label: "Reverse Positive/Negative Colors",
       defaultValue: !1
@@ -118,16 +120,16 @@ const W = (e) => {
     {
       ...c,
       name: "changeFontSize",
-      label: "Change Font Size"
+      label: "Trend Font Size"
     }
   ]
-}, se = w(W, X, {
+}, me = j(W, X, {
   /* @ts-expect-error - to be fixed in @embeddable.com/react */
-  props: (e, [a, i]) => ({
+  props: (e, [a, n]) => ({
     ...e,
     comparisonDateRange: a == null ? void 0 : a.comparisonDateRange,
-    setComparisonDateRange: (n) => i({ comparisonDateRange: n }),
-    results: D({
+    setComparisonDateRange: (s) => n({ comparisonDateRange: s }),
+    results: f({
       from: e.dataset,
       select: [e.measure],
       limit: 1,
@@ -139,7 +141,7 @@ const W = (e) => {
         }
       ] : void 0
     }),
-    resultsComparison: e.primaryDateRange && e.timeProperty && (a != null && a.comparisonDateRange) ? D({
+    resultsComparison: e.primaryDateRange && e.timeProperty && (a != null && a.comparisonDateRange) ? f({
       from: e.dataset,
       select: [e.measure],
       limit: 1,
@@ -154,7 +156,7 @@ const W = (e) => {
   })
 });
 export {
-  se as default,
+  me as default,
   X as meta
 };
 //# sourceMappingURL=KpiChartNumberComparisonPro.js.map