@embeddable.com/remarkable-ui 0.1.15 → 0.1.16

package/dist/BarChartDefaultHorizontalPro.js

@@ -1,7 +1,7 @@
 import { i as L, r as w, m as M, j as n, d as V, a as y, b as z, t as P, c as k, s as v, e as H, f as R, g as j, x as I, y as S, h as T, k as F, l as W, n as Y, V as E, o as G } from "./component.constants-Bn9l4N1t.js";
 import { useTheme as O, defineComponent as _ } from "@embeddable.com/react";
 import { C as q } from "./ChartCard-Cb0QE9kP.js";
-import { u as J, g as K, a as N, B as Q } from "./charts.fillGaps.hooks-BFmuMVNT.js";
+import { u as J, g as K, a as N, B as Q } from "./charts.fillGaps.hooks-C5Gy3QoW.js";
 const U = (a) => {
   var o, i;
   const e = O();

package/dist/BarChartDefaultPro.js

@@ -1,7 +1,7 @@
 import { i as L, r as y, m as w, j as n, d as M, a as V, b as P, t as v, c as k, s as R, e as j, f as I, g as S, x as T, y as F, p as W, q as X, u as q, v as z, V as E, o as G } from "./component.constants-Bn9l4N1t.js";
 import { useTheme as O, defineComponent as _ } from "@embeddable.com/react";
 import { C as H } from "./ChartCard-Cb0QE9kP.js";
-import { u as J, g as K, a as N, B as Q } from "./charts.fillGaps.hooks-BFmuMVNT.js";
+import { u as J, g as K, a as N, B as Q } from "./charts.fillGaps.hooks-C5Gy3QoW.js";
 const U = (a) => {
   var i, o;
   const s = O();

package/dist/BarChartGroupedHorizontalPro.js

@@ -1,7 +1,7 @@
 import { i as f, r as w, m as k, j as l, d as z, w as G, b as P, z as M, t as H, c as R, s as j, e as v, f as S, g as T, x as F, y as Y, h as W, k as E, l as I, V as u, o as O } from "./component.constants-Bn9l4N1t.js";
 import { useTheme as _, defineComponent as q } from "@embeddable.com/react";
 import { C as J } from "./ChartCard-Cb0QE9kP.js";
-import { u as K, b as N, a as Q, B as U } from "./charts.fillGaps.hooks-BFmuMVNT.js";
+import { u as K, b as N, a as Q, B as U } from "./charts.fillGaps.hooks-C5Gy3QoW.js";
 const X = (a) => {
   var t, n;
   const e = _();

package/dist/BarChartGroupedPro.js

@@ -1,7 +1,7 @@
 import { i as L, r as w, m as G, j as l, d as k, w as P, b as M, z as R, t as j, c as v, s as S, e as T, f as F, g as X, x as z, y as W, p as q, q as E, u as I, V as u, o as O } from "./component.constants-Bn9l4N1t.js";
 import { useTheme as _, defineComponent as H } from "@embeddable.com/react";
 import { C as J } from "./ChartCard-Cb0QE9kP.js";
-import { u as K, b as N, a as Q, B as U } from "./charts.fillGaps.hooks-BFmuMVNT.js";
+import { u as K, b as N, a as Q, B as U } from "./charts.fillGaps.hooks-C5Gy3QoW.js";
 const Y = (e) => {
   var t, n;
   const a = _();

package/dist/BarChartStackedHorizontalPro.js

@@ -1,7 +1,7 @@
 import { i as L, r as w, m as f, j as l, d as S, w as z, b as P, z as M, t as H, c as R, s as T, e as j, f as v, g as F, x as G, y as Y, h as W, k as E, l as I, A as O, V as m, o as _ } from "./component.constants-Bn9l4N1t.js";
 import { useTheme as q, defineComponent as J } from "@embeddable.com/react";
 import { C as K } from "./ChartCard-Cb0QE9kP.js";
-import { u as N, b as Q, a as U, B as X } from "./charts.fillGaps.hooks-BFmuMVNT.js";
+import { u as N, b as Q, a as U, B as X } from "./charts.fillGaps.hooks-C5Gy3QoW.js";
 const Z = (a) => {
   var i, n;
   const e = q();

package/dist/BarChartStackedPro.js

@@ -1,7 +1,7 @@
 import { i as L, r as f, m as w, j as l, d as S, w as P, b as M, z as R, t as T, c as j, s as v, e as F, f as G, g as X, x as z, y as W, p as q, q as E, u as I, A as O, V as m, o as _ } from "./component.constants-Bn9l4N1t.js";
 import { useTheme as H, defineComponent as J } from "@embeddable.com/react";
 import { C as K } from "./ChartCard-Cb0QE9kP.js";
-import { u as N, b as Q, a as U, B as Y } from "./charts.fillGaps.hooks-BFmuMVNT.js";
+import { u as N, b as Q, a as U, B as Y } from "./charts.fillGaps.hooks-C5Gy3QoW.js";
 const Z = (a) => {
   var o, n;
   const e = H();

package/dist/ComparisonPeriod.type.emb-BHz2X91i.js

@@ -0,0 +1,14 @@
+import { $ as i, a0 as o } from "./component.constants-Bn9l4N1t.js";
+const e = i("comparisonPeriod", {
+  label: "Comparison Period",
+  optionLabel: (r) => r
+});
+o(e, "Previous period");
+o(e, "Previous week");
+o(e, "Previous month");
+o(e, "Previous quarter");
+o(e, "Previous year");
+export {
+  e as C
+};
+//# sourceMappingURL=ComparisonPeriod.type.emb-BHz2X91i.js.map

package/dist/ComparisonPeriod.type.emb-BHz2X91i.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComparisonPeriod.type.emb-BHz2X91i.js","sources":["../src/remarkable-pro/components/types/ComparisonPeriod.type.emb.ts"],"sourcesContent":["import { defineOption, defineType } from '@embeddable.com/core';\n\nconst ComparisonPeriodType = defineType('comparisonPeriod', {\n  label: 'Comparison Period',\n  optionLabel: (value: string) => value,\n});\n\ndefineOption(ComparisonPeriodType, 'Previous period');\ndefineOption(ComparisonPeriodType, 'Previous week');\ndefineOption(ComparisonPeriodType, 'Previous month');\ndefineOption(ComparisonPeriodType, 'Previous quarter');\ndefineOption(ComparisonPeriodType, 'Previous year');\n\nexport default ComparisonPeriodType;\n"],"names":["ComparisonPeriodType","defineType","value","defineOption"],"mappings":";AAEA,MAAMA,IAAuBC,EAAW,oBAAoB;AAAA,EAC1D,OAAO;AAAA,EACP,aAAa,CAACC,MAAkBA;AAClC,CAAC;AAEDC,EAAaH,GAAsB,iBAAiB;AACpDG,EAAaH,GAAsB,eAAe;AAClDG,EAAaH,GAAsB,gBAAgB;AACnDG,EAAaH,GAAsB,kBAAkB;AACrDG,EAAaH,GAAsB,eAAe;"}

package/dist/ComparisonPeriodSelectFieldPro.js

@@ -4,7 +4,7 @@ import { useMemo as M, useEffect as k } from "react";
 import { S as D } from "./SingleSelectField-BJnoOYrw.js";
 import { g as T, u as j, a as x } from "./editors.timeRange.utils-CteuBPel.js";
 import { E as L } from "./EditorCard-DWz8Bm-e.js";
-import { C as s } from "./ComparisonPeriod.type.emb-61HEPz26.js";
+import { C as s } from "./ComparisonPeriod.type.emb-BHz2X91i.js";
 /**
  * @license @tabler/icons-react v3.34.1 - MIT
  *

package/dist/DonutChartPro.js

@@ -1,6 +1,6 @@
 import { d as a, w as s, z as t, t as o, c as n, s as r, Y as i, e as m, f as l, V as d, o as u } from "./component.constants-Bn9l4N1t.js";
 import { defineComponent as c } from "@embeddable.com/react";
-import { D as p } from "./index-DEzAFKmN.js";
+import { D as p } from "./index-BOzeG3mG.js";
 const C = {
   name: "DonutChartPro",
   label: "Donut Chart",

package/dist/DonutLabelChartPro.js

@@ -1,4 +1,4 @@
-import { D as n } from "./index-BhW48cz5.js";
+import { D as n } from "./index-CjS39lkd.js";
 import { d as s, w as a, z as r, t as o, c as l, s as i, Y as m, e as d, f as u, V as b, o as t } from "./component.constants-Bn9l4N1t.js";
 import { defineComponent as c } from "@embeddable.com/react";
 const p = {

package/dist/KpiChart-B2OqbXRg.js

@@ -0,0 +1,79 @@
+import { Z as j, j as n, a1 as x, a6 as d } from "./component.constants-Bn9l4N1t.js";
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const v = [["path", { d: "M3 7l6 6l4 -4l8 8", key: "svg-0" }], ["path", { d: "M21 10l0 7l-7 0", key: "svg-1" }]], y = j("outline", "trending-down", "TrendingDown", v);
+/**
+ * @license @tabler/icons-react v3.34.1 - 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 17l6 -6l4 4l8 -8", key: "svg-0" }], ["path", { d: "M14 7l7 0l0 7", key: "svg-1" }]], f = j("outline", "trending-up", "TrendingUp", m), N = "_kpiChartContainer_joxtc_1", T = "_kpiComparisonContainer_joxtc_26", $ = "_kpiChangeHidden_joxtc_47", k = {
+  kpiChartContainer: N,
+  kpiComparisonContainer: T,
+  kpiChangeHidden: $
+}, B = "_kpiChartChangeContainer_13m4l_1", H = "_kpiChangeBadge_13m4l_13", M = "_positive_13m4l_36", w = "_negative_13m4l_41", o = {
+  kpiChartChangeContainer: B,
+  kpiChangeBadge: H,
+  positive: M,
+  negative: w
+}, I = (i, e) => i ? e ? o.negative : o.positive : e ? o.positive : o.negative, K = ({
+  value: i,
+  comparisonValue: e = 0,
+  showChangeAsPercentage: r,
+  invertChangeColors: C = !1,
+  comparisonLabel: c,
+  valueFormatter: p,
+  percentageDecimalPlaces: g = 1,
+  className: h
+}) => {
+  const s = i - e, t = s > 0;
+  let a;
+  r ? a = `${(e === 0 ? 0 : s / e * 100).toFixed(g)}%` : a = p ? p(s) : s.toString();
+  const l = `${t ? "+" : ""}${a}`, _ = t ? f : y;
+  return /* @__PURE__ */ n.jsxs("div", { className: x(h, o.kpiChartChangeContainer), children: [
+    /* @__PURE__ */ n.jsxs("div", { className: x(o.kpiChangeBadge, I(t, C)), children: [
+      /* @__PURE__ */ n.jsx(_, {}),
+      /* @__PURE__ */ n.jsx(d, { children: l })
+    ] }),
+    c && /* @__PURE__ */ n.jsx(d, { children: c })
+  ] });
+}, R = ({
+  value: i,
+  changeFontSize: e,
+  comparisonValue: r,
+  comparisonLabel: C,
+  invertChangeColors: c,
+  showChangeAsPercentage: p,
+  percentageDecimalPlaces: g = 1,
+  equalComparisonLabel: h = "No change",
+  valueFontSize: s,
+  valueFormatter: t
+}) => {
+  const a = r !== void 0, l = a && r === i, _ = t ? t(i) : i;
+  return /* @__PURE__ */ n.jsxs("div", { className: k.kpiChartContainer, children: [
+    /* @__PURE__ */ n.jsx(d, { style: { fontSize: s }, children: _ }),
+    /* @__PURE__ */ n.jsx("div", { className: k.kpiComparisonContainer, style: { fontSize: e }, children: l ? /* @__PURE__ */ n.jsx(d, { children: h }) : /* @__PURE__ */ n.jsx(
+      K,
+      {
+        changeFontSize: e,
+        className: x(!a && k.kpiChangeHidden),
+        comparisonLabel: C,
+        comparisonValue: r,
+        invertChangeColors: c,
+        percentageDecimalPlaces: g,
+        showChangeAsPercentage: p,
+        value: i,
+        valueFormatter: t
+      }
+    ) })
+  ] });
+};
+export {
+  R as K
+};
+//# sourceMappingURL=KpiChart-B2OqbXRg.js.map

package/dist/KpiChart-B2OqbXRg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiChart-B2OqbXRg.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/charts/kpis/components/KpiChartChange.tsx","../src/remarkable-ui/charts/kpis/KpiChart.tsx"],"sourcesContent":["/**\n * @license @tabler/icons-react v3.34.1 - 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.34.1 - 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 { Typography } from '../../../shared/Typography/Typography';\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  className,\n}) => {\n  const difference = value - comparisonValue;\n  const isPositive = difference > 0;\n\n  let differenceLabel: string;\n\n  if (showChangeAsPercentage) {\n    const percentage = comparisonValue === 0 ? 0 : (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      <div className={clsx(styles.kpiChangeBadge, getChangeClass(isPositive, invertChangeColors))}>\n        <Icon />\n        <Typography>{displayValue}</Typography>\n      </div>\n      {comparisonLabel && <Typography>{comparisonLabel}</Typography>}\n    </div>\n  );\n};\n","import { FC } from 'react';\nimport { Typography } from '../../shared/Typography/Typography';\nimport styles from './KpiChart.module.css';\nimport { KpiChartChange } from './components/KpiChartChange';\nimport { KpiChartProps } from './KpiChart.types';\nimport clsx from 'clsx';\n\nexport const KpiChart: FC<KpiChartProps> = ({\n  value,\n  changeFontSize,\n  comparisonValue,\n  comparisonLabel,\n  invertChangeColors,\n  showChangeAsPercentage,\n  percentageDecimalPlaces = 1,\n  equalComparisonLabel = 'No change',\n  valueFontSize,\n  valueFormatter,\n}) => {\n  const hasComparisonValue = comparisonValue !== undefined;\n  const equalComparison = hasComparisonValue && comparisonValue === value;\n\n  const displayValue = valueFormatter ? valueFormatter(value) : value;\n\n  return (\n    <div className={styles.kpiChartContainer}>\n      <Typography style={{ fontSize: valueFontSize }}>{displayValue}</Typography>\n      <div className={styles.kpiComparisonContainer} style={{ fontSize: changeFontSize }}>\n        {equalComparison ? (\n          <Typography>{equalComparisonLabel}</Typography>\n        ) : (\n          <KpiChartChange\n            changeFontSize={changeFontSize}\n            className={clsx(!hasComparisonValue && styles.kpiChangeHidden)}\n            comparisonLabel={comparisonLabel}\n            comparisonValue={comparisonValue}\n            invertChangeColors={invertChangeColors}\n            percentageDecimalPlaces={percentageDecimalPlaces}\n            showChangeAsPercentage={showChangeAsPercentage}\n            value={value}\n            valueFormatter={valueFormatter}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["__iconNode","IconTrendingDown","createReactComponent","IconTrendingUp","getChangeClass","isPositive","invertChangeColors","styles","KpiChartChange","value","comparisonValue","showChangeAsPercentage","comparisonLabel","valueFormatter","percentageDecimalPlaces","className","difference","differenceLabel","displayValue","Icon","clsx","jsxs","jsx","Typography","KpiChart","changeFontSize","equalComparisonLabel","valueFontSize","hasComparisonValue","equalComparison"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/KpiChartNumberComparisonPro.js

@@ -1,11 +1,11 @@
-import { useTheme as K, defineComponent as x } from "@embeddable.com/react";
-import { S as V, i as j, r as w, j as f, d as A, w as L, T as O, U as q, t as E, c as I, W as v, X as P, o as h } from "./component.constants-Bn9l4N1t.js";
-import { C as M } from "./ChartCard-Cb0QE9kP.js";
-import { useEffect as Y } from "react";
-import { K as B } from "./KpiChart-CzUK0Dgw.js";
-import { g as J } from "./formatter.utils-Ba_5cIcm.js";
-import { C as U } from "./ComparisonPeriod.type.emb-61HEPz26.js";
-const W = (e, a, o) => {
+import { useTheme as V, defineComponent as x } from "@embeddable.com/react";
+import { S as j, i as w, r as A, j as v, d as L, w as O, T as q, U as E, t as I, c as M, W as P, X as p, o as h } from "./component.constants-Bn9l4N1t.js";
+import { C as Y } from "./ChartCard-Cb0QE9kP.js";
+import { useEffect as B } from "react";
+import { K as J } from "./KpiChart-B2OqbXRg.js";
+import { g as U } from "./formatter.utils-Ba_5cIcm.js";
+import { C as W } from "./ComparisonPeriod.type.emb-BHz2X91i.js";
+const X = (e, a, o) => {
   var t;
   if (!e || !a)
     return;
@@ -13,70 +13,72 @@ const W = (e, a, o) => {
     (s) => s.value === a
   );
   return n == null ? void 0 : n.getRange(r);
-}, X = (e, a) => {
+}, _ = (e, a) => {
   const o = a.defaults.comparisonPeriodsOptions.find(
     (r) => r.value === e
   );
-  return o ? V(o.label) : "";
-}, _ = (e) => {
-  var d, g, u, C;
-  const a = K();
-  j(a);
-  const { title: o, description: r } = w(e), {
+  return o ? j(o.label) : "";
+}, $ = (e) => {
+  var d, u, C, f;
+  const a = V();
+  w(a);
+  const { title: o, description: r } = A(e), {
     changeFontSize: n,
     comparisonPeriod: t,
     comparisonDateRange: s,
     displayChangeAsPercentage: b,
-    fontSize: R,
+    fontSize: D,
     measure: i,
-    primaryDateRange: p,
-    results: m,
-    resultsComparison: l,
-    reversePositiveNegativeColors: y,
+    primaryDateRange: g,
+    results: l,
+    resultsComparison: m,
+    reversePositiveNegativeColors: R,
+    percentageDecimalPlaces: y,
     setComparisonDateRange: S
   } = e;
-  Y(() => {
-    const c = W(
-      p,
+  B(() => {
+    const c = X(
+      g,
       t,
       a
     );
     S(c);
-  }, [t, JSON.stringify(p), a]);
-  const D = (g = (d = m.data) == null ? void 0 : d[0]) == null ? void 0 : g[i.name], N = s ? (C = (u = l == null ? void 0 : l.data) == null ? void 0 : u[0]) == null ? void 0 : C[i.name] : void 0, T = J(a), F = (c) => T.data(i, c), z = `vs ${X(t, a).toLowerCase()}`;
-  return /* @__PURE__ */ f.jsx(
-    M,
+  }, [t, JSON.stringify(g), a]);
+  const N = (u = (d = l.data) == null ? void 0 : d[0]) == null ? void 0 : u[i.name], T = s ? (f = (C = m == null ? void 0 : m.data) == null ? void 0 : C[0]) == null ? void 0 : f[i.name] : void 0, F = U(a), z = (c) => F.data(i, c), K = `vs ${_(t, a).toLowerCase()}`;
+  return /* @__PURE__ */ v.jsx(
+    Y,
     {
-      data: m,
+      data: l,
       dimensionsAndMeasures: [i],
-      errorMessage: m.error,
+      errorMessage: l.error,
       subtitle: r,
       title: o,
-      children: /* @__PURE__ */ f.jsx(
-        B,
+      children: /* @__PURE__ */ v.jsx(
+        J,
         {
-          value: D,
-          comparisonValue: N,
-          valueFormatter: F,
-          valueFontSize: R,
+          value: N,
+          comparisonValue: T,
+          valueFormatter: z,
+          valueFontSize: D,
           changeFontSize: n,
-          invertChangeColors: y,
+          invertChangeColors: R,
           showChangeAsPercentage: b,
-          comparisonLabel: z
+          comparisonLabel: K,
+          percentageDecimalPlaces: y
         }
       )
     }
   );
-}, $ = {
+}, k = {
   name: "KpiChartNumberComparisonPro",
   label: "Kpi Chart - Number Comparison",
   category: "Kpi Charts",
   inputs: [
-    A,
     L,
-    { ...O, name: "timeProperty", label: "Time Property" },
+    O,
+    { ...q, name: "timeProperty", label: "Time Property" },
     {
-      ...q,
+      ...E,
       name: "primaryDateRange",
       label: "Primary Date Range",
       description: "You can also connect this to a date range selector using its variable",
@@ -84,35 +86,41 @@ const W = (e, a, o) => {
     },
     {
       name: "comparisonPeriod",
-      type: U,
+      type: W,
       label: "Comparison Period",
       description: "You can also connect this to a comparison period selector using its variable",
       category: "Component Data"
     },
-    E,
     I,
+    M,
     {
-      ...v,
+      ...P,
       name: "displayChangeAsPercentage",
       label: "Display Change as %",
       defaultValue: !1
     },
     {
-      ...v,
+      ...p,
+      name: "percentageDecimalPlaces",
+      label: "Percentage Decimal Places",
+      defaultValue: 1
+    },
+    {
+      ...P,
       name: "reversePositiveNegativeColors",
       label: "Reverse Positive/Negative Colors",
       defaultValue: !1
     },
-    { ...P, name: "fontSize", label: "Font Size", defaultValue: 44, required: !0 },
+    { ...p, name: "fontSize", label: "Font Size", defaultValue: 44, required: !0 },
     {
-      ...P,
+      ...p,
       name: "changeFontSize",
       label: "Change Font Size",
       defaultValue: 16,
       required: !0
     }
   ]
-}, oe = x(_, $, {
+}, re = x($, k, {
   /* @ts-expect-error - to be fixed in @embeddable.com/react */
   props: (e, [a, o]) => ({
     ...e,
@@ -145,7 +153,7 @@ const W = (e, a, o) => {
   })
 });
 export {
-  oe as default,
-  $ as meta
+  re as default,
+  k as meta
 };
 //# sourceMappingURL=KpiChartNumberComparisonPro.js.map

package/dist/KpiChartNumberComparisonPro.js.map

@@ -1 +1 @@
-{"version":3,"file":"KpiChartNumberComparisonPro.js","sources":["../src/remarkable-pro/components/utils/timeRange.utils.ts","../src/remarkable-pro/components/charts/kpis/KpiChartNumberComparisonPro/index.tsx","../src/remarkable-pro/components/charts/kpis/KpiChartNumberComparisonPro/KpiChartNumberComparisonPro.emb.ts"],"sourcesContent":["import { TimeRange } from '@embeddable.com/core';\nimport { Theme } from '../../theme/theme.types';\nimport { resolveI18nString } from '../component.utils';\n\nexport const getComparisonPeriodDateRange = (\n  primaryDateRange: TimeRange,\n  comparisonPeriod: string | undefined,\n  theme: Theme,\n): TimeRange => {\n  if (!primaryDateRange || !comparisonPeriod) {\n    return undefined;\n  }\n\n  const primaryDateRangeRange = primaryDateRange?.relativeTimeString\n    ? theme.defaults.dateRangesOptions\n        .find((option) => option.value === primaryDateRange?.relativeTimeString)\n        ?.getRange()\n    : primaryDateRange;\n\n  const comparisonPeriodOption = theme.defaults.comparisonPeriodsOptions.find(\n    (option) => option.value === comparisonPeriod,\n  );\n\n  return comparisonPeriodOption?.getRange(primaryDateRangeRange);\n};\n\nexport const getComparisonPeriodLabel = (\n  comparisonPeriod: string | undefined,\n  theme: Theme,\n): string => {\n  const option = theme.defaults.comparisonPeriodsOptions.find(\n    (option) => option.value === comparisonPeriod,\n  );\n  return option ? resolveI18nString(option.label) : '';\n};\n","import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { DataResponse, Measure, TimeRange } from '@embeddable.com/core';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { resolveI18nProps } from '../../../component.utils';\nimport { ChartCard } from '../../shared/ChartCard/ChartCard';\nimport { KpiChart } from '../../../../../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  description: string;\n  displayChangeAsPercentage?: boolean;\n  fontSize: number;\n  measure: Measure;\n  primaryDateRange: TimeRange;\n  results: DataResponse;\n  resultsComparison: DataResponse | undefined;\n  reversePositiveNegativeColors?: boolean;\n  title: string;\n  comparisonDateRange: TimeRange;\n  setComparisonDateRange: (dateRange: TimeRange) => void;\n};\n\nconst KpiChartNumberComparisonPro = (props: KpiChartNumberComparisonProProp) => {\n  const theme: Theme = useTheme() as Theme;\n  i18nSetup(theme);\n\n  const { title, description } = resolveI18nProps(props);\n  const {\n    changeFontSize,\n    comparisonPeriod,\n    comparisonDateRange,\n    displayChangeAsPercentage,\n    fontSize,\n    measure,\n    primaryDateRange,\n    results,\n    resultsComparison,\n    reversePositiveNegativeColors,\n    setComparisonDateRange,\n  } = props;\n\n  useEffect(() => {\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  return (\n    <ChartCard\n      data={results}\n      dimensionsAndMeasures={[measure]}\n      errorMessage={results.error}\n      subtitle={description}\n      title={title}\n    >\n      <KpiChart\n        value={value}\n        comparisonValue={comparisonValue}\n        valueFormatter={valueFormatter}\n        valueFontSize={fontSize}\n        changeFontSize={changeFontSize}\n        invertChangeColors={reversePositiveNegativeColors}\n        showChangeAsPercentage={displayChangeAsPercentage}\n        comparisonLabel={comparisonLabel}\n      />\n    </ChartCard>\n  );\n};\n\nexport default KpiChartNumberComparisonPro;\n","import { defineComponent, EmbeddedComponentMeta, Inputs } from '@embeddable.com/react';\nimport {\n  dataset,\n  description,\n  dimensionTime,\n  genericBoolean,\n  genericNumber,\n  genericTimeRange,\n  measure,\n  title,\n} from '../../../component.constants';\nimport KpiChartNumberComparisonPro from './index';\nimport { loadData, TimeRange } from '@embeddable.com/core';\nimport ComparisonPeriodType from '../../../types/ComparisonPeriod.type.emb';\n\nexport const meta = {\n  name: 'KpiChartNumberComparisonPro',\n  label: 'Kpi Chart - Number Comparison',\n  category: 'Kpi Charts',\n  inputs: [\n    dataset,\n    measure,\n    { ...dimensionTime, name: 'timeProperty', label: 'Time Property' },\n    {\n      ...genericTimeRange,\n      name: 'primaryDateRange',\n      label: 'Primary Date Range',\n      description: 'You can also connect this to a date range selector using its variable',\n      category: 'Component Data',\n    },\n    {\n      name: 'comparisonPeriod',\n      type: ComparisonPeriodType,\n      label: 'Comparison Period',\n      description: 'You can also connect this to a comparison period selector using its variable',\n      category: 'Component Data',\n    },\n    title,\n    description,\n    {\n      ...genericBoolean,\n      name: 'displayChangeAsPercentage',\n      label: 'Display Change as %',\n      defaultValue: false,\n    },\n    {\n      ...genericBoolean,\n      name: 'reversePositiveNegativeColors',\n      label: 'Reverse Positive/Negative Colors',\n      defaultValue: false,\n    },\n    { ...genericNumber, name: 'fontSize', label: 'Font Size', defaultValue: 44, required: true },\n    {\n      ...genericNumber,\n      name: 'changeFontSize',\n      label: 'Change Font Size',\n      defaultValue: 16,\n      required: true,\n    },\n  ],\n} as const satisfies EmbeddedComponentMeta;\n\ntype KpiChartNumberComparisonProState = {\n  comparisonDateRange: TimeRange;\n};\n\nexport default defineComponent(KpiChartNumberComparisonPro, meta, {\n  /* @ts-expect-error - to be fixed in @embeddable.com/react */\n  props: (\n    inputs: Inputs<typeof meta>,\n    [state, setState]: [\n      KpiChartNumberComparisonProState,\n      (state: KpiChartNumberComparisonProState) => void,\n    ],\n  ) => {\n    return {\n      ...inputs,\n      comparisonDateRange: state?.comparisonDateRange,\n      setComparisonDateRange: (comparisonDateRange: TimeRange) => setState({ comparisonDateRange }),\n      results: loadData({\n        from: inputs.dataset,\n        select: [inputs.measure],\n        limit: 1,\n        filters:\n          inputs.primaryDateRange && inputs.timeProperty\n            ? [\n                {\n                  property: inputs.timeProperty,\n                  operator: 'inDateRange',\n                  value: inputs.primaryDateRange,\n                },\n              ]\n            : undefined,\n      }),\n      resultsComparison:\n        inputs.primaryDateRange && inputs.timeProperty && state?.comparisonDateRange\n          ? loadData({\n              from: inputs.dataset,\n              select: [inputs.measure],\n              limit: 1,\n              filters: [\n                {\n                  property: inputs.timeProperty,\n                  operator: 'inDateRange',\n                  value: state.comparisonDateRange,\n                },\n              ],\n            })\n          : undefined,\n    };\n  },\n});\n"],"names":["getComparisonPeriodDateRange","primaryDateRange","comparisonPeriod","theme","primaryDateRangeRange","_a","option","comparisonPeriodOption","getComparisonPeriodLabel","resolveI18nString","KpiChartNumberComparisonPro","props","useTheme","i18nSetup","title","description","resolveI18nProps","changeFontSize","comparisonDateRange","displayChangeAsPercentage","fontSize","measure","results","resultsComparison","reversePositiveNegativeColors","setComparisonDateRange","useEffect","newComparisonDateRange","value","_b","comparisonValue","_d","_c","themeFormatter","getThemeFormatter","valueFormatter","valueToFormat","comparisonLabel","jsx","ChartCard","KpiChart","meta","dataset","dimensionTime","genericTimeRange","ComparisonPeriodType","genericBoolean","genericNumber","KpiChartNumberComparisonPro_emb","defineComponent","inputs","state","setState","loadData"],"mappings":"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"}
+{"version":3,"file":"KpiChartNumberComparisonPro.js","sources":["../src/remarkable-pro/components/utils/timeRange.utils.ts","../src/remarkable-pro/components/charts/kpis/KpiChartNumberComparisonPro/index.tsx","../src/remarkable-pro/components/charts/kpis/KpiChartNumberComparisonPro/KpiChartNumberComparisonPro.emb.ts"],"sourcesContent":["import { TimeRange } from '@embeddable.com/core';\nimport { Theme } from '../../theme/theme.types';\nimport { resolveI18nString } from '../component.utils';\n\nexport const getComparisonPeriodDateRange = (\n  primaryDateRange: TimeRange,\n  comparisonPeriod: string | undefined,\n  theme: Theme,\n): TimeRange => {\n  if (!primaryDateRange || !comparisonPeriod) {\n    return undefined;\n  }\n\n  const primaryDateRangeRange = primaryDateRange?.relativeTimeString\n    ? theme.defaults.dateRangesOptions\n        .find((option) => option.value === primaryDateRange?.relativeTimeString)\n        ?.getRange()\n    : primaryDateRange;\n\n  const comparisonPeriodOption = theme.defaults.comparisonPeriodsOptions.find(\n    (option) => option.value === comparisonPeriod,\n  );\n\n  return comparisonPeriodOption?.getRange(primaryDateRangeRange);\n};\n\nexport const getComparisonPeriodLabel = (\n  comparisonPeriod: string | undefined,\n  theme: Theme,\n): string => {\n  const option = theme.defaults.comparisonPeriodsOptions.find(\n    (option) => option.value === comparisonPeriod,\n  );\n  return option ? resolveI18nString(option.label) : '';\n};\n","import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { DataResponse, Measure, TimeRange } from '@embeddable.com/core';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { resolveI18nProps } from '../../../component.utils';\nimport { ChartCard } from '../../shared/ChartCard/ChartCard';\nimport { KpiChart } from '../../../../../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  description: string;\n  displayChangeAsPercentage?: boolean;\n  fontSize: number;\n  measure: Measure;\n  primaryDateRange: TimeRange;\n  results: DataResponse;\n  resultsComparison: DataResponse | undefined;\n  reversePositiveNegativeColors?: boolean;\n  title: string;\n  percentageDecimalPlaces: number;\n  comparisonDateRange: TimeRange;\n  setComparisonDateRange: (dateRange: TimeRange) => void;\n};\n\nconst KpiChartNumberComparisonPro = (props: KpiChartNumberComparisonProProp) => {\n  const theme: Theme = useTheme() as Theme;\n  i18nSetup(theme);\n\n  const { title, description } = resolveI18nProps(props);\n  const {\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    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  return (\n    <ChartCard\n      data={results}\n      dimensionsAndMeasures={[measure]}\n      errorMessage={results.error}\n      subtitle={description}\n      title={title}\n    >\n      <KpiChart\n        value={value}\n        comparisonValue={comparisonValue}\n        valueFormatter={valueFormatter}\n        valueFontSize={fontSize}\n        changeFontSize={changeFontSize}\n        invertChangeColors={reversePositiveNegativeColors}\n        showChangeAsPercentage={displayChangeAsPercentage}\n        comparisonLabel={comparisonLabel}\n        percentageDecimalPlaces={percentageDecimalPlaces}\n      />\n    </ChartCard>\n  );\n};\n\nexport default KpiChartNumberComparisonPro;\n","import { defineComponent, EmbeddedComponentMeta, Inputs } from '@embeddable.com/react';\nimport {\n  dataset,\n  description,\n  dimensionTime,\n  genericBoolean,\n  genericNumber,\n  genericTimeRange,\n  measure,\n  title,\n} from '../../../component.constants';\nimport KpiChartNumberComparisonPro from './index';\nimport { loadData, TimeRange } from '@embeddable.com/core';\nimport ComparisonPeriodType from '../../../types/ComparisonPeriod.type.emb';\n\nexport const meta = {\n  name: 'KpiChartNumberComparisonPro',\n  label: 'Kpi Chart - Number Comparison',\n  category: 'Kpi Charts',\n  inputs: [\n    dataset,\n    measure,\n    { ...dimensionTime, name: 'timeProperty', label: 'Time Property' },\n    {\n      ...genericTimeRange,\n      name: 'primaryDateRange',\n      label: 'Primary Date Range',\n      description: 'You can also connect this to a date range selector using its variable',\n      category: 'Component Data',\n    },\n    {\n      name: 'comparisonPeriod',\n      type: ComparisonPeriodType,\n      label: 'Comparison Period',\n      description: 'You can also connect this to a comparison period selector using its variable',\n      category: 'Component Data',\n    },\n    title,\n    description,\n    {\n      ...genericBoolean,\n      name: 'displayChangeAsPercentage',\n      label: 'Display Change as %',\n      defaultValue: false,\n    },\n    {\n      ...genericNumber,\n      name: 'percentageDecimalPlaces',\n      label: 'Percentage Decimal Places',\n      defaultValue: 1,\n    },\n    {\n      ...genericBoolean,\n      name: 'reversePositiveNegativeColors',\n      label: 'Reverse Positive/Negative Colors',\n      defaultValue: false,\n    },\n    { ...genericNumber, name: 'fontSize', label: 'Font Size', defaultValue: 44, required: true },\n    {\n      ...genericNumber,\n      name: 'changeFontSize',\n      label: 'Change Font Size',\n      defaultValue: 16,\n      required: true,\n    },\n  ],\n} as const satisfies EmbeddedComponentMeta;\n\ntype KpiChartNumberComparisonProState = {\n  comparisonDateRange: TimeRange;\n};\n\nexport default defineComponent(KpiChartNumberComparisonPro, meta, {\n  /* @ts-expect-error - to be fixed in @embeddable.com/react */\n  props: (\n    inputs: Inputs<typeof meta>,\n    [state, setState]: [\n      KpiChartNumberComparisonProState,\n      (state: KpiChartNumberComparisonProState) => void,\n    ],\n  ) => {\n    return {\n      ...inputs,\n      comparisonDateRange: state?.comparisonDateRange,\n      setComparisonDateRange: (comparisonDateRange: TimeRange) => setState({ comparisonDateRange }),\n      results: loadData({\n        from: inputs.dataset,\n        select: [inputs.measure],\n        limit: 1,\n        filters:\n          inputs.primaryDateRange && inputs.timeProperty\n            ? [\n                {\n                  property: inputs.timeProperty,\n                  operator: 'inDateRange',\n                  value: inputs.primaryDateRange,\n                },\n              ]\n            : undefined,\n      }),\n      resultsComparison:\n        inputs.primaryDateRange && inputs.timeProperty && state?.comparisonDateRange\n          ? loadData({\n              from: inputs.dataset,\n              select: [inputs.measure],\n              limit: 1,\n              filters: [\n                {\n                  property: inputs.timeProperty,\n                  operator: 'inDateRange',\n                  value: state.comparisonDateRange,\n                },\n              ],\n            })\n          : undefined,\n    };\n  },\n});\n"],"names":["getComparisonPeriodDateRange","primaryDateRange","comparisonPeriod","theme","primaryDateRangeRange","_a","option","comparisonPeriodOption","getComparisonPeriodLabel","resolveI18nString","KpiChartNumberComparisonPro","props","useTheme","i18nSetup","title","description","resolveI18nProps","changeFontSize","comparisonDateRange","displayChangeAsPercentage","fontSize","measure","results","resultsComparison","reversePositiveNegativeColors","percentageDecimalPlaces","setComparisonDateRange","useEffect","newComparisonDateRange","value","_b","comparisonValue","_d","_c","themeFormatter","getThemeFormatter","valueFormatter","valueToFormat","comparisonLabel","jsx","ChartCard","KpiChart","meta","dataset","dimensionTime","genericTimeRange","ComparisonPeriodType","genericBoolean","genericNumber","KpiChartNumberComparisonPro_emb","defineComponent","inputs","state","setState","loadData"],"mappings":"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"}

package/dist/KpiChartNumberPro.js

@@ -2,7 +2,7 @@ import { useTheme as h, defineComponent as f } from "@embeddable.com/react";
 import { i as C, r as b, j as m, d as K, w as g, t as x, c as F, X as N, o as S } from "./component.constants-Bn9l4N1t.js";
 import { C as j } from "./ChartCard-Cb0QE9kP.js";
 import "react";
-import { K as v } from "./KpiChart-CzUK0Dgw.js";
+import { K as v } from "./KpiChart-B2OqbXRg.js";
 import { g as z } from "./formatter.utils-Ba_5cIcm.js";
 const P = (e) => {
   var s, o;

package/dist/PieChartPro.js

@@ -1,6 +1,6 @@
 import { d as a, w as s, z as t, t as o, c as n, s as i, Y as r, e as m, f as l, V as d, o as c } from "./component.constants-Bn9l4N1t.js";
 import { defineComponent as p } from "@embeddable.com/react";
-import { P as u } from "./index-Dwb4Z6Hd.js";
+import { P as u } from "./index-Chlmh1dF.js";
 const C = {
   name: "PieChartPro",
   label: "Pie Chart",