@embeddable.com/remarkable-ui 0.1.31 → 0.1.32

package/dist/KpiChartNumberComparisonPro.js

@@ -1,5 +1,5 @@
 import { useTheme as j, defineComponent as w } from "@embeddable.com/react";
-import { i as A, r as Y, U as l, j as f, d as q, w as B, W as E, X as M, t as I, c as J, Y as y, Z as c, o as b } from "./component.constants-B1QqUi2G.js";
+import { i as A, r as Y, U as l, j as y, d as q, w as B, W as E, X as M, t as I, c as J, Y as b, Z as c, o as v } from "./component.constants-B1QqUi2G.js";
 import { C as O } from "./ChartCard-CACbKXZ7.js";
 import { useEffect as U } from "react";
 import { K as W } from "./KpiChart-C-SmtMQp.js";
@@ -7,22 +7,22 @@ import { g as X } from "./formatter.utils-B3HZzPUm.js";
 import { g as Z, a as $ } from "./timeRange.utils-C0iy3N-l.js";
 import { C as k } from "./ComparisonPeriod.type.emb-Q_A2MmQY.js";
 const G = (e) => {
-  var g, d, C, P, h, u;
+  var d, C, P, h, u, f;
   const a = j();
   A(a);
   const { title: i, description: n } = Y(e), {
-    changeFontSize: v,
+    changeFontSize: D,
     comparisonPeriod: s,
-    comparisonDateRange: D,
-    displayChangeAsPercentage: R,
-    fontSize: N,
+    comparisonDateRange: R,
+    displayChangeAsPercentage: N,
+    fontSize: S,
     measure: t,
     primaryDateRange: p,
-    results: o,
-    resultsComparison: r,
-    reversePositiveNegativeColors: S,
-    percentageDecimalPlaces: F,
-    setComparisonDateRange: z
+    results: r,
+    resultsComparison: o,
+    reversePositiveNegativeColors: F,
+    percentageDecimalPlaces: z,
+    setComparisonDateRange: K
   } = e;
   U(() => {
     const m = Z(
@@ -30,19 +30,19 @@ const G = (e) => {
       s,
       a
     );
-    z(m);
+    K(m);
   }, [s, JSON.stringify(p), a]);
-  const K = (d = (g = o.data) == null ? void 0 : g[0]) == null ? void 0 : d[t.name], T = D ? (P = (C = r == null ? void 0 : r.data) == null ? void 0 : C[0]) == null ? void 0 : P[t.name] : void 0, L = X(a), V = (m) => L.data(t, m), x = `vs ${$(s, a).toLowerCase()}`, _ = {
-    isLoading: !!(o.isLoading || r != null && r.isLoading),
-    data: !(o != null && o.data) && !(r != null && r.data) ? void 0 : [
-      ...(h = o.data) != null && h.length ? [{ label: l.t("charts.primaryPeriod"), ...o.data[0] }] : [],
-      ...(u = r == null ? void 0 : r.data) != null && u.length ? [{ label: l.t("charts.comparisonPeriod"), ...r.data[0] }] : []
+  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, V = X(a), x = (m) => V.data(t, m), _ = `vs ${$(s, a).toLowerCase()}`, g = {
+    isLoading: !!(r.isLoading || o != null && o.isLoading),
+    data: !(r != null && r.data) && !(o != null && o.data) ? void 0 : [
+      ...(u = r.data) != null && u.length ? [{ label: l.t("charts.primaryPeriod"), ...r.data[0] }] : [],
+      ...(f = o == null ? void 0 : o.data) != null && f.length ? [{ label: l.t("charts.comparisonPeriod"), ...o.data[0] }] : []
     ]
   };
-  return /* @__PURE__ */ f.jsx(
+  return /* @__PURE__ */ y.jsx(
     O,
     {
-      data: _,
+      data: g,
       dimensionsAndMeasures: [
         // Add a label dimension to distinguish primary and comparison periods in exports
         {
@@ -53,21 +53,21 @@ const G = (e) => {
         },
         t
       ],
-      errorMessage: o.error,
+      errorMessage: r.error,
       subtitle: n,
       title: i,
-      children: /* @__PURE__ */ f.jsx(
+      children: /* @__PURE__ */ y.jsx(
         W,
         {
-          value: K,
-          comparisonValue: T,
-          valueFormatter: V,
-          valueFontSize: N,
-          changeFontSize: v,
-          invertChangeColors: S,
-          showChangeAsPercentage: R,
-          comparisonLabel: x,
-          percentageDecimalPlaces: F
+          value: L,
+          comparisonValue: g.isLoading ? void 0 : T,
+          valueFormatter: x,
+          valueFontSize: S,
+          changeFontSize: D,
+          invertChangeColors: F,
+          showChangeAsPercentage: N,
+          comparisonLabel: _,
+          percentageDecimalPlaces: z
         }
       )
     }
@@ -97,7 +97,7 @@ const G = (e) => {
     I,
     J,
     {
-      ...y,
+      ...b,
       name: "displayChangeAsPercentage",
       label: "Display Change as %",
       defaultValue: !1
@@ -109,7 +109,7 @@ const G = (e) => {
       defaultValue: 1
     },
     {
-      ...y,
+      ...b,
       name: "reversePositiveNegativeColors",
       label: "Reverse Positive/Negative Colors",
       defaultValue: !1
@@ -129,7 +129,7 @@ const G = (e) => {
     ...e,
     comparisonDateRange: a == null ? void 0 : a.comparisonDateRange,
     setComparisonDateRange: (n) => i({ comparisonDateRange: n }),
-    results: b({
+    results: v({
       from: e.dataset,
       select: [e.measure],
       limit: 1,
@@ -141,7 +141,7 @@ const G = (e) => {
         }
       ] : void 0
     }),
-    resultsComparison: e.primaryDateRange && e.timeProperty && (a != null && a.comparisonDateRange) ? b({
+    resultsComparison: e.primaryDateRange && e.timeProperty && (a != null && a.comparisonDateRange) ? v({
       from: e.dataset,
       select: [e.measure],
       limit: 1,

package/dist/KpiChartNumberComparisonPro.js.map

@@ -1 +1 @@
-{"version":3,"file":"KpiChartNumberComparisonPro.js","sources":["../src/remarkable-pro/components/charts/kpis/KpiChartNumberComparisonPro/index.tsx","../src/remarkable-pro/components/charts/kpis/KpiChartNumberComparisonPro/KpiChartNumberComparisonPro.emb.ts"],"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 } 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  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      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":["KpiChartNumberComparisonPro","props","theme","useTheme","i18nSetup","title","description","resolveI18nProps","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","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/charts/kpis/KpiChartNumberComparisonPro/index.tsx","../src/remarkable-pro/components/charts/kpis/KpiChartNumberComparisonPro/KpiChartNumberComparisonPro.emb.ts"],"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 } 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  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      subtitle={description}\n      title={title}\n    >\n      <KpiChart\n        value={value}\n        comparisonValue={resultsCombined.isLoading ? undefined : 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":["KpiChartNumberComparisonPro","props","theme","useTheme","i18nSetup","title","description","resolveI18nProps","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","meta","dataset","dimensionTime","genericTimeRange","ComparisonPeriodType","genericBoolean","genericNumber","KpiChartNumberComparisonPro_emb","defineComponent","inputs","state","setState","loadData"],"mappings":"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"}

package/dist/embeddable-components.json

@@ -1,23 +1,23 @@
 {
   "components": [
-    "ComparisonPeriodSelectFieldPro",
     "DateRangeSelectFieldPro",
+    "ComparisonPeriodSelectFieldPro",
     "MultiSelectFieldPro",
-    "BarChartGroupedPro",
-    "LineChartDefaultPro",
+    "BarChartDefaultHorizontalPro",
     "SingleSelectFieldPro",
-    "LineChartComparisonDefaultPro",
+    "BarChartDefaultPro",
     "KpiChartNumberPro",
-    "BarChartDefaultHorizontalPro",
     "BarChartStackedHorizontalPro",
-    "KpiChartNumberComparisonPro",
-    "BarChartDefaultPro",
+    "BarChartStackedPro",
     "LineChartGroupedPro",
+    "KpiChartNumberComparisonPro",
+    "BarChartGroupedHorizontalPro",
+    "LineChartComparisonDefaultPro",
+    "BarChartGroupedPro",
+    "LineChartDefaultPro",
     "DonutChartPro",
     "PieChartPro",
-    "BarChartStackedPro",
-    "DonutLabelChartPro",
-    "BarChartGroupedHorizontalPro"
+    "DonutLabelChartPro"
   ],
   "editors": [],
   "plugin": "react"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@embeddable.com/remarkable-ui",
   "author": "embeddable (https://embeddable.com)",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",