@embeddable.com/remarkable-ui 1.0.4 → 1.0.6

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={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' },\n    {\n      ...genericNumber,\n      name: 'changeFontSize',\n      label: 'Change Font Size',\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        trendFontSize={changeFontSize}\n        invertChangeColors={reversePositiveNegativeColors}\n        showChangeAsPercentage={displayChangeAsPercentage}\n        comparisonLabel={comparisonLabel}\n        percentageDecimalPlaces={percentageDecimalPlaces}\n        noPreviousDataLabel={i18n.t('charts.kpiChart.noPreviousData')}\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' },\n    {\n      ...genericNumber,\n      name: 'changeFontSize',\n      label: 'Trend Font Size',\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/KpiChartNumberPro.js

@@ -1,14 +1,15 @@
 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, J as N, o as S } from "./component.constants-BfTb5vNm.js";
-import { C as j } from "./ChartCard-DE8akLvk.js";
+import { i as b, r as C, d as K, q as g, t as x, b as F, D as N } from "./component.constants-VpbbPSIL.js";
+import { j as m, l as S } from "./TablePaginated-pVrIngVd.js";
+import { C as j } from "./ChartCard-FOSghcoD.js";
 import "react";
-import { K as v } from "./KpiChart-B9tgnF4B.js";
-import { g as z } from "./formatter.utils-Dza9buQ8.js";
+import { K as v } from "./KpiChart-lEsVao_M.js";
+import { g as z } from "./formatter.utils-BLz3TSY0.js";
 const P = (e) => {
   var s, o;
   const a = h();
-  C(a);
-  const { title: i, description: n, results: t, measure: r, fontSize: p } = b(e), u = (o = (s = t.data) == null ? void 0 : s[0]) == null ? void 0 : o[r.name], l = z(a), c = (d) => l.data(r, d);
+  b(a);
+  const { title: i, description: n, results: t, measure: r, fontSize: p } = C(e), u = (o = (s = t.data) == null ? void 0 : s[0]) == null ? void 0 : o[r.name], l = z(a), d = (c) => l.data(r, c);
   return /* @__PURE__ */ m.jsx(
     j,
     {
@@ -17,10 +18,10 @@ const P = (e) => {
       errorMessage: t.error,
       subtitle: n,
       title: i,
-      children: /* @__PURE__ */ m.jsx(v, { value: u, valueFormatter: c, valueFontSize: p })
+      children: /* @__PURE__ */ m.jsx(v, { value: u, valueFormatter: d, valueFontSize: p })
     }
   );
-}, M = {
+}, D = {
   name: "KpiChartNumberPro",
   label: "Kpi Chart - Number",
   category: "Kpi Charts",
@@ -31,7 +32,7 @@ const P = (e) => {
     F,
     { ...N, name: "fontSize", label: "Font Size" }
   ]
-}, I = f(P, M, {
+}, R = f(P, D, {
   props: (e) => ({
     ...e,
     results: S({
@@ -41,7 +42,7 @@ const P = (e) => {
   })
 });
 export {
-  I as default,
-  M as meta
+  R as default,
+  D as meta
 };
 //# sourceMappingURL=KpiChartNumberPro.js.map

package/dist/KpiChartNumberPro.js.map

@@ -1 +1 @@
-{"version":3,"file":"KpiChartNumberPro.js","sources":["../src/remarkable-pro/components/charts/kpis/KpiChartNumberPro/index.tsx","../src/remarkable-pro/components/charts/kpis/KpiChartNumberPro/KpiChartNumberPro.emb.ts"],"sourcesContent":["import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { DataResponse, Measure } 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';\n\ntype KpiChartNumberProProp = {\n  title: string;\n  description: string;\n  results: DataResponse;\n  measure: Measure;\n  fontSize: number;\n};\n\nconst KpiChartNumberPro = (props: KpiChartNumberProProp) => {\n  const theme: Theme = useTheme() as Theme;\n  i18nSetup(theme);\n\n  const { title, description, results, measure, fontSize } = resolveI18nProps(props);\n\n  const value = results.data?.[0]?.[measure.name];\n\n  const themeFormatter = getThemeFormatter(theme);\n  const valueFormatter = (valueToFormat: number) => themeFormatter.data(measure, valueToFormat);\n\n  return (\n    <ChartCard\n      data={results}\n      dimensionsAndMeasures={[measure]}\n      errorMessage={results.error}\n      subtitle={description}\n      title={title}\n    >\n      <KpiChart value={value} valueFormatter={valueFormatter} valueFontSize={fontSize} />\n    </ChartCard>\n  );\n};\n\nexport default KpiChartNumberPro;\n","import { defineComponent, EmbeddedComponentMeta, Inputs } from '@embeddable.com/react';\nimport { dataset, description, genericNumber, measure, title } from '../../../component.constants';\nimport KpiChartNumberPro from './index';\nimport { loadData } from '@embeddable.com/core';\n\nexport const meta = {\n  name: 'KpiChartNumberPro',\n  label: 'Kpi Chart - Number',\n  category: 'Kpi Charts',\n  inputs: [\n    dataset,\n    measure,\n    title,\n    description,\n    { ...genericNumber, name: 'fontSize', label: 'Font Size' },\n  ],\n} as const satisfies EmbeddedComponentMeta;\n\nexport default defineComponent(KpiChartNumberPro, meta, {\n  props: (inputs: Inputs<typeof meta>) => {\n    return {\n      ...inputs,\n      results: loadData({\n        from: inputs.dataset,\n        select: [inputs.measure],\n      }),\n    };\n  },\n});\n"],"names":["KpiChartNumberPro","props","theme","useTheme","i18nSetup","title","description","results","measure","fontSize","resolveI18nProps","value","_b","_a","themeFormatter","getThemeFormatter","valueFormatter","valueToFormat","jsx","ChartCard","KpiChart","meta","dataset","genericNumber","KpiChartNumberPro_emb","defineComponent","inputs","loadData"],"mappings":";;;;;;AAiBA,MAAMA,IAAoB,CAACC,MAAiC;;AAC1D,QAAMC,IAAeC,EAAA;AACrB,EAAAC,EAAUF,CAAK;AAEf,QAAM,EAAE,OAAAG,GAAO,aAAAC,GAAa,SAAAC,GAAS,SAAAC,GAAS,UAAAC,EAAA,IAAaC,EAAiBT,CAAK,GAE3EU,KAAQC,KAAAC,IAAAN,EAAQ,SAAR,gBAAAM,EAAe,OAAf,gBAAAD,EAAoBJ,EAAQ,OAEpCM,IAAiBC,EAAkBb,CAAK,GACxCc,IAAiB,CAACC,MAA0BH,EAAe,KAAKN,GAASS,CAAa;AAE5F,SACEC,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMZ;AAAA,MACN,uBAAuB,CAACC,CAAO;AAAA,MAC/B,cAAcD,EAAQ;AAAA,MACtB,UAAUD;AAAA,MACV,OAAAD;AAAA,MAEA,UAAAa,gBAAAA,EAAAA,IAACE,GAAA,EAAS,OAAAT,GAAc,gBAAAK,GAAgC,eAAeP,EAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAGvF,GClCaY,IAAO;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,QAAQ;AAAA,IACNC;AAAA,IACAd;AAAA,IACAH;AAAA,IACAC;AAAA,IACA,EAAE,GAAGiB,GAAe,MAAM,YAAY,OAAO,YAAA;AAAA,EAAY;AAE7D,GAEAC,IAAeC,EAAgBzB,GAAmBqB,GAAM;AAAA,EACtD,OAAO,CAACK,OACC;AAAA,IACL,GAAGA;AAAA,IACH,SAASC,EAAS;AAAA,MAChB,MAAMD,EAAO;AAAA,MACb,QAAQ,CAACA,EAAO,OAAO;AAAA,IAAA,CACxB;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"KpiChartNumberPro.js","sources":["../src/remarkable-pro/components/charts/kpis/KpiChartNumberPro/index.tsx","../src/remarkable-pro/components/charts/kpis/KpiChartNumberPro/KpiChartNumberPro.emb.ts"],"sourcesContent":["import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { DataResponse, Measure } 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';\n\ntype KpiChartNumberProProp = {\n  title: string;\n  description: string;\n  results: DataResponse;\n  measure: Measure;\n  fontSize: number;\n};\n\nconst KpiChartNumberPro = (props: KpiChartNumberProProp) => {\n  const theme: Theme = useTheme() as Theme;\n  i18nSetup(theme);\n\n  const { title, description, results, measure, fontSize } = resolveI18nProps(props);\n\n  const value = results.data?.[0]?.[measure.name];\n\n  const themeFormatter = getThemeFormatter(theme);\n  const valueFormatter = (valueToFormat: number) => themeFormatter.data(measure, valueToFormat);\n\n  return (\n    <ChartCard\n      data={results}\n      dimensionsAndMeasures={[measure]}\n      errorMessage={results.error}\n      subtitle={description}\n      title={title}\n    >\n      <KpiChart value={value} valueFormatter={valueFormatter} valueFontSize={fontSize} />\n    </ChartCard>\n  );\n};\n\nexport default KpiChartNumberPro;\n","import { defineComponent, EmbeddedComponentMeta, Inputs } from '@embeddable.com/react';\nimport { dataset, description, genericNumber, measure, title } from '../../../component.constants';\nimport KpiChartNumberPro from './index';\nimport { loadData } from '@embeddable.com/core';\n\nexport const meta = {\n  name: 'KpiChartNumberPro',\n  label: 'Kpi Chart - Number',\n  category: 'Kpi Charts',\n  inputs: [\n    dataset,\n    measure,\n    title,\n    description,\n    { ...genericNumber, name: 'fontSize', label: 'Font Size' },\n  ],\n} as const satisfies EmbeddedComponentMeta;\n\nexport default defineComponent(KpiChartNumberPro, meta, {\n  props: (inputs: Inputs<typeof meta>) => {\n    return {\n      ...inputs,\n      results: loadData({\n        from: inputs.dataset,\n        select: [inputs.measure],\n      }),\n    };\n  },\n});\n"],"names":["KpiChartNumberPro","props","theme","useTheme","i18nSetup","title","description","results","measure","fontSize","resolveI18nProps","value","_b","_a","themeFormatter","getThemeFormatter","valueFormatter","valueToFormat","jsx","ChartCard","KpiChart","meta","dataset","genericNumber","KpiChartNumberPro_emb","defineComponent","inputs","loadData"],"mappings":";;;;;;;AAiBA,MAAMA,IAAoB,CAACC,MAAiC;;AAC1D,QAAMC,IAAeC,EAAA;AACrB,EAAAC,EAAUF,CAAK;AAEf,QAAM,EAAE,OAAAG,GAAO,aAAAC,GAAa,SAAAC,GAAS,SAAAC,GAAS,UAAAC,EAAA,IAAaC,EAAiBT,CAAK,GAE3EU,KAAQC,KAAAC,IAAAN,EAAQ,SAAR,gBAAAM,EAAe,OAAf,gBAAAD,EAAoBJ,EAAQ,OAEpCM,IAAiBC,EAAkBb,CAAK,GACxCc,IAAiB,CAACC,MAA0BH,EAAe,KAAKN,GAASS,CAAa;AAE5F,SACEC,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMZ;AAAA,MACN,uBAAuB,CAACC,CAAO;AAAA,MAC/B,cAAcD,EAAQ;AAAA,MACtB,UAAUD;AAAA,MACV,OAAAD;AAAA,MAEA,UAAAa,gBAAAA,EAAAA,IAACE,GAAA,EAAS,OAAAT,GAAc,gBAAAK,GAAgC,eAAeP,EAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAGvF,GClCaY,IAAO;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,QAAQ;AAAA,IACNC;AAAA,IACAd;AAAA,IACAH;AAAA,IACAC;AAAA,IACA,EAAE,GAAGiB,GAAe,MAAM,YAAY,OAAO,YAAA;AAAA,EAAY;AAE7D,GAEAC,IAAeC,EAAgBzB,GAAmBqB,GAAM;AAAA,EACtD,OAAO,CAACK,OACC;AAAA,IACL,GAAGA;AAAA,IACH,SAASC,EAAS;AAAA,MAChB,MAAMD,EAAO;AAAA,MACb,QAAQ,CAACA,EAAO,OAAO;AAAA,IAAA,CACxB;AAAA,EAAA;AAGP,CAAC;"}

package/dist/LineChartComparisonDefaultPro.js

@@ -1,42 +1,44 @@
 import { useTheme as Y, defineComponent as _ } from "@embeddable.com/react";
-import { m as G, E, K as M, F as K, L as w, M as I, i as q, r as z, j as V, N as U, d as H, a as B, I as A, O as S, z as J, H as Q, G as W, t as Z, c as ee, s as ae, e as se, f as ne, g as te, x as ie, y as oe, p as re, q as le, u as me, A as de, V as ce, o as F } from "./component.constants-BfTb5vNm.js";
-import { C as pe } from "./ChartCard-DE8akLvk.js";
+import { z as G, i as z, r as E, d as K, m as M, C as A, u as U, B as q, A as J, t as H, b as Q, s as W, c as Z, e as ee, f as ae, x as se, y as te, l as ne, n as oe, o as ie, v as re } from "./component.constants-VpbbPSIL.js";
+import { m as le, a as me, g as S, b as w, d as I, j as B, L as de, V as ce, l as V } from "./TablePaginated-pVrIngVd.js";
+import { C as pe } from "./ChartCard-FOSghcoD.js";
 import { useEffect as ue } from "react";
-import { g as ge } from "./timeRange.utils-Yy_Z93Kv.js";
-import { g as O } from "./formatter.utils-Dza9buQ8.js";
+import { g as ge } from "./timeRange.utils-AEhW9Gu4.js";
+import { g as O } from "./formatter.utils-BLz3TSY0.js";
 import { g as xe, a as be } from "./object.utils-D_Zzon-H.js";
 import { i as he, s as Ce } from "./color.utils-CVyp-fGP.js";
 import { g as fe } from "./lines.utils-CFEUUo4k.js";
-import { u as N } from "./charts.fillGaps.hooks-5WclK2CD.js";
-import { C as De } from "./ComparisonPeriod.type.emb-Dlysd_iF.js";
-const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
+import { u as F } from "./charts.fillGaps.hooks-5WclK2CD.js";
+import { C as ye } from "./ComparisonPeriod.type.emb-CQ63PFtq.js";
+import { C as N } from "./Color.type.emb-CTiA_AzI.js";
+const L = "mainAxis", v = "comparisonAxis", $ = (a, n) => {
   var P, k, b, u;
-  const { data: n, measure: i, dimension: s, index: c, isPreviousPeriod: r, hasMinMaxYAxisRange: h, labels: e } = a, p = n == null ? void 0 : n.map((C) => C[s.name]), l = !!((P = i.inputs) != null && P.connectGaps), g = e ? e.map((C) => {
-    const y = n == null ? void 0 : n.find((T) => T[s.name] === C);
-    return (y == null ? void 0 : y[i.name]) ?? (l ? 0 : null);
-  }) : n == null ? void 0 : n.map((C) => C[i.name] ?? (l ? 0 : null)), x = O(t), f = xe(t), o = !!((k = i.inputs) != null && k[r ? "previousLineDashed" : "lineDashed"]), m = (b = i.inputs) == null ? void 0 : b[r ? "previousLineColor" : "lineColor"], d = he(m) ? m : be(
+  const { data: t, measure: o, dimension: s, index: c, isPreviousPeriod: r, hasMinMaxYAxisRange: h, labels: e } = a, p = t == null ? void 0 : t.map((C) => C[s.name]), l = !!((P = o.inputs) != null && P.connectGaps), g = e ? e.map((C) => {
+    const D = t == null ? void 0 : t.find((T) => T[s.name] === C);
+    return (D == null ? void 0 : D[o.name]) ?? (l ? 0 : null);
+  }) : t == null ? void 0 : t.map((C) => C[o.name] ?? (l ? 0 : null)), x = O(n), f = xe(n), i = !!((k = o.inputs) != null && k[r ? "previousLineDashed" : "lineDashed"]), m = (b = o.inputs) == null ? void 0 : b[r ? "previousLineColor" : "lineColor"], d = he(m) ? m : be(
     `${f}.charts.backgroundColors`,
-    i.name,
-    t.charts.backgroundColors ?? E,
+    o.name,
+    n.charts.backgroundColors ?? me,
     c
-  ), D = x.dimensionOrMeasureTitle(i);
+  ), y = x.dimensionOrMeasureTitle(o);
   return {
     xAxisID: r ? v : L,
     labels: p,
-    rawLabel: D,
-    label: (r ? `${K.t("common.compared")} ` : "") + D,
+    rawLabel: y,
+    label: (r ? `${G.t("common.compared")} ` : "") + y,
     data: g,
     backgroundColor: Ce(d, 0.5),
     pointBackgroundColor: d,
-    borderDash: o ? [
-      M("--em-linechart-line-dash", "0.25rem"),
-      M("--em-linechart-line-gap", "0.25rem")
+    borderDash: i ? [
+      S("--em-linechart-line-dash", "0.25rem"),
+      S("--em-linechart-line-gap", "0.25rem")
     ] : void 0,
     borderColor: d,
-    fill: (u = i.inputs) == null ? void 0 : u.fillUnderLine,
+    fill: (u = o.inputs) == null ? void 0 : u.fillUnderLine,
     clip: h
   };
-}, ye = (a, t) => {
+}, De = (a, n) => {
   if (!a.data)
     return {
       labels: [],
@@ -45,27 +47,27 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
         { xAxisID: v, data: [] }
       ]
     };
-  const { data: n, dataComparison: i, dimension: s, measures: c, hasMinMaxYAxisRange: r } = a, e = s.nativeType === "time" ? void 0 : i ? Array.from(
+  const { data: t, dataComparison: o, dimension: s, measures: c, hasMinMaxYAxisRange: r } = a, e = s.nativeType === "time" ? void 0 : o ? Array.from(
     /* @__PURE__ */ new Set([
-      ...n.map((g) => g[s.name]),
-      ...(i == null ? void 0 : i.map((g) => g[s.name])) ?? []
+      ...t.map((g) => g[s.name]),
+      ...(o == null ? void 0 : o.map((g) => g[s.name])) ?? []
     ])
   ) : void 0, p = c.map(
     (g, x) => $(
       {
-        data: n,
+        data: t,
         measure: g,
         dimension: s,
         labels: e,
         hasMinMaxYAxisRange: r,
         index: x
       },
-      t
+      n
     )
   ), l = c.map(
     (g, x) => $(
       {
-        data: i,
+        data: o,
         measure: g,
         dimension: s,
         labels: e,
@@ -73,15 +75,15 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
         index: x,
         isPreviousPeriod: !0
       },
-      t
+      n
     )
   );
   return {
-    labels: e ?? n.map((g) => g[s.name]),
+    labels: e ?? t.map((g) => g[s.name]),
     datasets: [...p, ...l]
   };
-}, Ae = (a, t) => {
-  const { dimension: n, data: i, measures: s, xAxisLabel: c } = a, r = O(t);
+}, Ae = (a, n) => {
+  const { dimension: t, data: o, measures: s, xAxisLabel: c } = a, r = O(n);
   return {
     plugins: {
       legend: {
@@ -105,7 +107,7 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
       },
       tooltip: {
         callbacks: {
-          title: (e) => e[0] ? r.data(n, e[0].label) : "",
+          title: (e) => e[0] ? r.data(t, e[0].label) : "",
           label: (e) => {
             const p = s[e.datasetIndex % s.length], l = e.raw;
             return `${e.dataset.label}: ${r.data(p, l)}`;
@@ -119,16 +121,16 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
       },
       [L]: {
         title: {
-          ...I,
+          ...I(),
           text: c,
           display: !!c
         },
         grid: { display: !1 },
         ticks: {
-          ...w,
+          ...w(),
           callback(e) {
             var p;
-            return r.data(n, (p = i.labels) == null ? void 0 : p[e]);
+            return r.data(t, (p = o.labels) == null ? void 0 : p[e]);
           }
         }
       },
@@ -142,16 +144,16 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
       }
     }
   };
-}, Le = (a, t) => {
+}, Le = (a, n) => {
   var x, f;
-  const { dimension: n, data: i, measures: s, xAxisLabel: c, showComparisonAxis: r, showDataComparison: h } = a, e = O(t), p = ((x = i.datasets.find((o) => o.xAxisID === L)) == null ? void 0 : x.labels) ?? [], l = ((f = i.datasets.find((o) => o.xAxisID === v)) == null ? void 0 : f.labels) ?? [];
+  const { dimension: t, data: o, measures: s, xAxisLabel: c, showComparisonAxis: r, showDataComparison: h } = a, e = O(n), p = ((x = o.datasets.find((i) => i.xAxisID === L)) == null ? void 0 : x.labels) ?? [], l = ((f = o.datasets.find((i) => i.xAxisID === v)) == null ? void 0 : f.labels) ?? [];
   return {
     plugins: {
       legend: {
         labels: {
-          filter: (o, m) => {
-            if (!o) return !1;
-            const d = m.datasets[o.datasetIndex];
+          filter: (i, m) => {
+            if (!i) return !1;
+            const d = m.datasets[i.datasetIndex];
             return Array.isArray(d.data) && d.data.length > 0;
           }
         }
@@ -159,27 +161,27 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
       datalabels: {
         labels: {
           value: {
-            formatter: (o, m) => {
+            formatter: (i, m) => {
               const d = s[m.datasetIndex % s.length];
-              return e.data(d, o);
+              return e.data(d, i);
             }
           }
         }
       },
       tooltip: {
         callbacks: {
-          title: (o) => {
-            const m = o[0];
+          title: (i) => {
+            const m = i[0];
             if (!h && m)
-              return e.data(n, m.label);
+              return e.data(t, m.label);
             const d = m == null ? void 0 : m.dataIndex;
             if (d === void 0) return "";
-            const D = p[d] && e.data(n, p[d]), R = l[d] && e.data(n, l[d]);
-            return `${D ?? "-"} vs ${R ?? "-"}`;
+            const y = p[d] && e.data(t, p[d]), R = l[d] && e.data(t, l[d]);
+            return `${y ?? "-"} vs ${R ?? "-"}`;
           },
-          label: (o) => {
-            const m = s[o.datasetIndex % s.length], d = o.raw;
-            return `${o.dataset.label}: ${e.data(m, d)}`;
+          label: (i) => {
+            const m = s[i.datasetIndex % s.length], d = i.raw;
+            return `${i.dataset.label}: ${e.data(m, d)}`;
           }
         }
       }
@@ -188,53 +190,53 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
       x: { display: !1 },
       [L]: {
         title: {
-          ...I,
+          ...I(),
           text: c,
           display: !!((!r || l.length === 0) && c)
         },
         grid: { display: !1 },
         ticks: {
-          ...w,
-          callback: (o) => e.data(n, p[Number(o)])
+          ...w(),
+          callback: (i) => e.data(t, p[Number(i)])
         }
       },
       [v]: {
         title: {
-          ...I,
+          ...I(),
           text: c,
           display: !!c
         },
         grid: { display: !1 },
         display: r && l.length > 0,
         ticks: {
-          ...w,
-          callback: (o) => {
+          ...w(),
+          callback: (i) => {
             if (l.length === 0)
               return "";
-            const m = l[Number(o)];
-            return m ? e.data(n, m) : "";
+            const m = l[Number(i)];
+            return m ? e.data(t, m) : "";
           }
         }
       },
       y: {
         ticks: {
-          callback: (o) => e.data(s[0], o)
+          callback: (i) => e.data(s[0], i)
         }
       }
     }
   };
-}, ve = (a, t) => {
+}, ve = (a, n) => {
   var c, r;
-  const { onLineClicked: n, dimension: i } = a, s = i.nativeType === "time" ? Le : Ae;
-  return G(
-    fe({ onLineClicked: n }),
-    s(a, t),
-    ((r = (c = t.charts) == null ? void 0 : c.lineChartComparisonDefaultPro) == null ? void 0 : r.options) || {}
+  const { onLineClicked: t, dimension: o } = a, s = o.nativeType === "time" ? Le : Ae;
+  return le(
+    fe({ onLineClicked: t }),
+    s(a, n),
+    ((r = (c = n.charts) == null ? void 0 : c.lineChartComparisonDefaultPro) == null ? void 0 : r.options) || {}
   );
 }, Re = (a) => {
-  const t = Y();
-  q(t);
-  const { title: n, description: i, xAxisLabel: s, yAxisLabel: c } = z(a), {
+  const n = Y();
+  z(n);
+  const { title: t, description: o, xAxisLabel: s, yAxisLabel: c } = E(a), {
     comparisonPeriod: r,
     measures: h,
     xAxis: e,
@@ -243,10 +245,10 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
     showLogarithmicScale: g,
     showTooltips: x,
     showValueLabels: f,
-    yAxisRangeMax: o,
+    yAxisRangeMax: i,
     yAxisRangeMin: m,
     primaryDateRange: d,
-    comparisonDateRange: D,
+    comparisonDateRange: y,
     showComparisonAxis: R,
     setComparisonDateRange: P,
     onLineClicked: k
@@ -255,26 +257,26 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
     const X = ge(
       d,
       r,
-      t
+      n
     );
     P(X);
-  }, [r, JSON.stringify(d), t]);
-  const b = N({ results: a.results, dimension: e }), u = N({
+  }, [r, JSON.stringify(d), n]);
+  const b = F({ results: a.results, dimension: e }), u = F({
     results: a.resultsComparison,
     dimension: e,
-    externalDateBounds: D
-  }), C = !!(d && r), y = ye(
+    externalDateBounds: y
+  }), C = !!(d && r), D = De(
     {
       data: b.data,
       dataComparison: C ? (u == null ? void 0 : u.data) ?? [] : void 0,
       dimension: e,
       measures: h,
-      hasMinMaxYAxisRange: m != null || o != null
+      hasMinMaxYAxisRange: m != null || i != null
     },
-    t
+    n
   ), T = ve(
     {
-      data: y,
+      data: D,
       dimension: e,
       measures: h,
       xAxisLabel: s,
@@ -282,23 +284,23 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
       showDataComparison: C,
       onLineClicked: k
     },
-    t
+    n
   ), j = {
     isLoading: !!(b.isLoading || u != null && u.isLoading),
     data: !(b != null && b.data) && !(u != null && u.data) ? void 0 : [...b.data ?? [], ...(u == null ? void 0 : u.data) ?? []]
   };
-  return /* @__PURE__ */ V.jsx(
+  return /* @__PURE__ */ B.jsx(
     pe,
     {
       data: j,
       dimensionsAndMeasures: [...h, e],
       errorMessage: b.error || (u == null ? void 0 : u.error),
-      subtitle: i,
-      title: n,
-      children: /* @__PURE__ */ V.jsx(
-        U,
+      subtitle: o,
+      title: t,
+      children: /* @__PURE__ */ B.jsx(
+        de,
         {
-          data: y,
+          data: D,
           reverseXAxis: p,
           showLegend: l,
           showLogarithmicScale: g,
@@ -306,7 +308,7 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
           showValueLabels: f,
           xAxisLabel: s,
           yAxisLabel: c,
-          yAxisRangeMax: o,
+          yAxisRangeMax: i,
           yAxisRangeMin: m,
           options: T
         }
@@ -318,18 +320,24 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
   label: "Line Chart Comparison - Default",
   category: "Line Charts",
   inputs: [
-    H,
+    K,
     {
-      ...B,
+      ...M,
       inputs: [
-        ...B.inputs,
+        ...M.inputs,
         { ...A, name: "fillUnderLine", label: "Fill under line" },
         {
-          ...S,
+          type: N,
+          category: "Component Settings",
           name: "lineColor",
           label: "Line color"
         },
-        { ...S, name: "previousLineColor", label: "Previous line color" },
+        {
+          type: N,
+          category: "Component Settings",
+          name: "previousLineColor",
+          label: "Previous line color"
+        },
         {
           ...A,
           name: "lineDashed",
@@ -345,9 +353,9 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
         { ...A, name: "connectGaps", label: "Connect gaps", defaultValue: !0 }
       ]
     },
-    { ...J, label: "X-axis", name: "xAxis" },
+    { ...U, label: "X-axis", name: "xAxis" },
     {
-      ...Q,
+      ...q,
       name: "primaryDateRange",
       label: "Primary Date Range",
       description: "You can also connect this to a date range selector using its variable",
@@ -355,36 +363,36 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
     },
     {
       name: "comparisonPeriod",
-      type: De,
+      type: ye,
       label: "Comparison Period",
       description: "You can also connect this to a comparison period selector using its variable",
       category: "Component Data"
     },
     {
-      ...W,
+      ...J,
       name: "timePropertyForNonTimeDimensions",
       label: "Time property for non time dimensions",
       description: "Choose the time property used for filtering comparison ranges. This will be ignored if your x-axis is already time-based.",
       required: !1
     },
+    H,
+    Q,
+    W,
     Z,
     ee,
     ae,
     se,
-    ne,
     te,
-    ie,
+    ne,
     oe,
-    re,
-    le,
-    me,
+    ie,
     {
       ...A,
       name: "showComparisonAxis",
       label: "Display a comparison X-axis",
       defaultValue: !0
     },
-    de
+    re
   ],
   events: [
     {
@@ -399,10 +407,10 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
       ]
     }
   ]
-}, $e = _(Re, Pe, {
+}, Xe = _(Re, Pe, {
   /* @ts-expect-error - to be fixed in @embeddable.com/react */
-  props: (a, [t, n]) => {
-    const i = [
+  props: (a, [n, t]) => {
+    const o = [
       {
         property: a.xAxis,
         direction: "asc"
@@ -410,13 +418,13 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
     ], s = a.xAxis.nativeType === "time" ? a.xAxis : a.timePropertyForNonTimeDimensions;
     return {
       ...a,
-      comparisonDateRange: t == null ? void 0 : t.comparisonDateRange,
-      setComparisonDateRange: (c) => n({ comparisonDateRange: c }),
-      results: F({
+      comparisonDateRange: n == null ? void 0 : n.comparisonDateRange,
+      setComparisonDateRange: (c) => t({ comparisonDateRange: c }),
+      results: V({
         limit: a.maxResults,
         from: a.dataset,
         select: [...a.measures, a.xAxis],
-        orderBy: i,
+        orderBy: o,
         filters: a.primaryDateRange && s ? [
           {
             property: s,
@@ -425,16 +433,16 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
           }
         ] : void 0
       }),
-      resultsComparison: a.primaryDateRange && s && (t != null && t.comparisonDateRange) ? F({
+      resultsComparison: a.primaryDateRange && s && (n != null && n.comparisonDateRange) ? V({
         limit: a.maxResults,
         from: a.dataset,
         select: [...a.measures, a.xAxis],
-        orderBy: i,
+        orderBy: o,
         filters: [
           {
             property: s,
             operator: "inDateRange",
-            value: t.comparisonDateRange
+            value: n.comparisonDateRange
           }
         ]
       }) : void 0
@@ -447,7 +455,7 @@ const L = "mainAxis", v = "comparisonAxis", $ = (a, t) => {
   }
 });
 export {
-  $e as default,
+  Xe as default,
   Pe as meta
 };
 //# sourceMappingURL=LineChartComparisonDefaultPro.js.map