@embeddable.com/remarkable-ui 0.1.27 → 0.1.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/BarChartDefaultHorizontalPro.js +1 -1
  2. package/dist/BarChartDefaultPro.js +1 -1
  3. package/dist/BarChartGroupedHorizontalPro.js +1 -1
  4. package/dist/BarChartGroupedPro.js +1 -1
  5. package/dist/BarChartStackedHorizontalPro.js +1 -1
  6. package/dist/BarChartStackedPro.js +1 -1
  7. package/dist/DonutChartPro.js +1 -1
  8. package/dist/DonutLabelChartPro.js +1 -1
  9. package/dist/LineChartComparisonDefaultPro.js +90 -96
  10. package/dist/LineChartComparisonDefaultPro.js.map +1 -1
  11. package/dist/LineChartDefaultPro.js +34 -34
  12. package/dist/LineChartDefaultPro.js.map +1 -1
  13. package/dist/LineChartGroupedPro.js +8 -8
  14. package/dist/LineChartGroupedPro.js.map +1 -1
  15. package/dist/PieChartPro.js +1 -1
  16. package/dist/{bars.utils-hfE2jN8Y.js → bars.utils-DMaJhXB4.js} +2 -2
  17. package/dist/{bars.utils-hfE2jN8Y.js.map → bars.utils-DMaJhXB4.js.map} +1 -1
  18. package/dist/{charts.utils-DEajwB6c.js → charts.utils-CKlua6UT.js} +1350 -1330
  19. package/dist/charts.utils-CKlua6UT.js.map +1 -0
  20. package/dist/embeddable-components.json +9 -9
  21. package/dist/embeddable-theme-2b917.js +20 -0
  22. package/dist/{index-B74kx38r.js → index-CydUf2Tu.js} +2 -2
  23. package/dist/{index-B74kx38r.js.map → index-CydUf2Tu.js.map} +1 -1
  24. package/dist/{index-B96WIMDJ.js → index-E75P_2R2.js} +2 -2
  25. package/dist/{index-B96WIMDJ.js.map → index-E75P_2R2.js.map} +1 -1
  26. package/dist/{index-Cg05t97t.js → index-vk45FCxb.js} +2 -2
  27. package/dist/{index-Cg05t97t.js.map → index-vk45FCxb.js.map} +1 -1
  28. package/dist/index.js +5 -5
  29. package/dist/{pies.utils-DTa2hAZg.js → pies.utils-DotuA_5l.js} +2 -2
  30. package/dist/{pies.utils-DTa2hAZg.js.map → pies.utils-DotuA_5l.js.map} +1 -1
  31. package/dist/remarkable-ui/styles/styles.constants.d.ts +20 -0
  32. package/dist/remarkable-ui/styles/styles.constants.d.ts.map +1 -1
  33. package/dist/remarkable-ui.css +20 -0
  34. package/package.json +1 -1
  35. package/dist/charts.utils-DEajwB6c.js.map +0 -1
@@ -1,23 +1,23 @@
1
1
  {
2
2
  "components": [
3
+ "ComparisonPeriodSelectFieldPro",
3
4
  "DateRangeSelectFieldPro",
4
5
  "MultiSelectFieldPro",
5
- "ComparisonPeriodSelectFieldPro",
6
- "DonutChartPro",
7
- "PieChartPro",
6
+ "BarChartGroupedHorizontalPro",
8
7
  "BarChartDefaultPro",
9
- "DonutLabelChartPro",
8
+ "BarChartDefaultHorizontalPro",
10
9
  "KpiChartNumberPro",
11
- "LineChartDefaultPro",
10
+ "SingleSelectFieldPro",
12
11
  "BarChartGroupedPro",
13
12
  "BarChartStackedHorizontalPro",
14
13
  "BarChartStackedPro",
15
- "BarChartDefaultHorizontalPro",
16
- "LineChartComparisonDefaultPro",
14
+ "DonutLabelChartPro",
15
+ "DonutChartPro",
16
+ "LineChartDefaultPro",
17
17
  "KpiChartNumberComparisonPro",
18
- "BarChartGroupedHorizontalPro",
19
18
  "LineChartGroupedPro",
20
- "SingleSelectFieldPro"
19
+ "PieChartPro",
20
+ "LineChartComparisonDefaultPro"
21
21
  ],
22
22
  "editors": [],
23
23
  "plugin": "react"
@@ -2324,6 +2324,26 @@ const Qi = (e) => {
2324
2324
  "--em-icon-btn-size-width": "var(--em-width-500)",
2325
2325
  "--em-icon-height": "var(--em-height-400)",
2326
2326
  "--em-icon-width": "var(--em-width-400)",
2327
+ "--em-kpi-kpi-font-font-color": "var(--em-foreground-color-default)",
2328
+ "--em-kpi-kpi-font-font-family": "var(--em-font-family-default)",
2329
+ "--em-kpi-kpi-font-font-size": "var(--em-font-size-xxl)",
2330
+ "--em-kpi-kpi-font-font-weight": "var(--em-font-weight-bold)",
2331
+ "--em-kpi-kpi-font-line-height": "var(--em-line-height-xl)",
2332
+ "--em-kpi-trend-background-color-negative": "var(--em-status-negative-background)",
2333
+ "--em-kpi-trend-background-color-positive": "var(--em-status-positive-background)",
2334
+ "--em-kpi-trend-border-radius-default": "var(--em-border-radius-150)",
2335
+ "--em-kpi-trend-font-font-family": "var(--em-font-family-default)",
2336
+ "--em-kpi-trend-font-font-size": "var(--em-font-size-md)",
2337
+ "--em-kpi-trend-font-font-weight": "var(--em-font-weight-medium)",
2338
+ "--em-kpi-trend-font-line-height": "var(--em-line-height-md)",
2339
+ "--em-kpi-trend-icon-color-negative": "var(--em-status-negative-foreground)",
2340
+ "--em-kpi-trend-icon-color-positive": "var(--em-status-positive-foreground)",
2341
+ "--em-kpi-trend-icon-size-height": "var(--em-height-400)",
2342
+ "--em-kpi-trend-icon-size-width": "var(--em-width-400)",
2343
+ "--em-kpi-trend-label-color-negative": "var(--em-status-negative-foreground)",
2344
+ "--em-kpi-trend-label-color-positive": "var(--em-status-positive-foreground)",
2345
+ "--em-kpi-trend-padding-default": "var(--em-padding-100)",
2346
+ "--em-kpi-trend-size-height": "var(--em-height-600)",
2327
2347
  "--em-label-background-color-default": "var(--em-background-color-neutral)",
2328
2348
  "--em-label-border-radius-default": "var(--em-border-radius-500)",
2329
2349
  "--em-label-label-font-color-default": "var(--em-foreground-color-default)",
@@ -1,7 +1,7 @@
1
1
  import { i as x, r as S, m as b, j as m, ak as k } from "./component.constants-XB5gaz8Z.js";
2
2
  import { useTheme as v } from "@embeddable.com/react";
3
3
  import "react";
4
- import { g as _, a as w } from "./pies.utils-DTa2hAZg.js";
4
+ import { g as _, a as w } from "./pies.utils-DotuA_5l.js";
5
5
  import { C as L } from "./ChartCard-Duhwxov3.js";
6
6
  const M = (d) => {
7
7
  var a;
@@ -54,4 +54,4 @@ export {
54
54
  M as P,
55
55
  V as i
56
56
  };
57
- //# sourceMappingURL=index-B74kx38r.js.map
57
+ //# sourceMappingURL=index-CydUf2Tu.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index-B74kx38r.js","sources":["../src/remarkable-pro/components/charts/pies/PieChartPro/index.tsx"],"sourcesContent":["import { useTheme } from '@embeddable.com/react';\nimport { PieChart } from '../../../../../remarkable-ui';\nimport { Theme } from '../../../../theme/theme.types';\nimport { DefaultPieChartOptions, getDefaultPieChartOptions, getPieChartData } from '../pies.utils';\nimport { DefaultPieChartProps } from '../pies.types';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { ChartCard } from '../../shared/ChartCard/ChartCard';\nimport { mergician } from 'mergician';\nimport { resolveI18nProps } from '../../../component.utils';\n\ntype PieChartProProps = DefaultPieChartProps;\n\nconst PieChartPro = (props: PieChartProProps) => {\n const theme = useTheme() as Theme;\n i18nSetup(theme);\n\n const {\n description,\n dimension,\n maxLegendItems,\n measure,\n results,\n showLegend,\n showTooltips,\n showValueLabels,\n title,\n onSegmentClick,\n } = resolveI18nProps(props);\n\n const data = getPieChartData({ data: results.data, dimension, measure, maxLegendItems }, theme);\n\n const options = mergician(\n getDefaultPieChartOptions(\n {\n measure,\n showTooltips,\n showLegend,\n showValueLabels,\n } as DefaultPieChartOptions,\n theme,\n ),\n theme.charts.pieChartPro?.options ?? {},\n );\n\n const handleSegmentClick = (index: number | undefined) => {\n onSegmentClick({\n dimensionValue: index === undefined ? undefined : results.data?.[index]?.[dimension.name],\n });\n };\n\n return (\n <ChartCard\n data={results}\n dimensionsAndMeasures={[dimension, measure]}\n errorMessage={results.error}\n subtitle={description}\n title={title}\n >\n <PieChart data={data} options={options} onSegmentClick={handleSegmentClick} />\n </ChartCard>\n );\n};\n\nexport default PieChartPro;\n"],"names":["PieChartPro","props","theme","useTheme","i18nSetup","description","dimension","maxLegendItems","measure","results","showLegend","showTooltips","showValueLabels","title","onSegmentClick","resolveI18nProps","data","getPieChartData","options","mergician","getDefaultPieChartOptions","_a","handleSegmentClick","index","_b","jsx","ChartCard","PieChart"],"mappings":";;;;;AAYA,MAAMA,IAAc,CAACC,MAA4B;;AAC/C,QAAMC,IAAQC,EAAA;AACd,EAAAC,EAAUF,CAAK;AAEf,QAAM;AAAA,IACJ,aAAAG;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA,IACEC,EAAiBd,CAAK,GAEpBe,IAAOC,EAAgB,EAAE,MAAMR,EAAQ,MAAM,WAAAH,GAAW,SAAAE,GAAS,gBAAAD,EAAA,GAAkBL,CAAK,GAExFgB,IAAUC;AAAA,IACdC;AAAA,MACE;AAAA,QACE,SAAAZ;AAAA,QACA,cAAAG;AAAA,QACA,YAAAD;AAAA,QACA,iBAAAE;AAAA,MAAA;AAAA,MAEFV;AAAA,IAAA;AAAA,MAEFmB,IAAAnB,EAAM,OAAO,gBAAb,gBAAAmB,EAA0B,YAAW,CAAA;AAAA,EAAC,GAGlCC,IAAqB,CAACC,MAA8B;;AACxD,IAAAT,EAAe;AAAA,MACb,gBAAgBS,MAAU,WAAwBC,KAAAH,IAAAZ,EAAQ,SAAR,gBAAAY,EAAeE,OAAf,OAAZ,SAAYC,EAAwBlB,EAAU;AAAA,IAAI,CACzF;AAAA,EACH;AAEA,SACEmB,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMjB;AAAA,MACN,uBAAuB,CAACH,GAAWE,CAAO;AAAA,MAC1C,cAAcC,EAAQ;AAAA,MACtB,UAAUJ;AAAA,MACV,OAAAQ;AAAA,MAEA,UAAAY,gBAAAA,EAAAA,IAACE,GAAA,EAAS,MAAAX,GAAY,SAAAE,GAAkB,gBAAgBI,EAAA,CAAoB;AAAA,IAAA;AAAA,EAAA;AAGlF;;;;"}
1
+ {"version":3,"file":"index-CydUf2Tu.js","sources":["../src/remarkable-pro/components/charts/pies/PieChartPro/index.tsx"],"sourcesContent":["import { useTheme } from '@embeddable.com/react';\nimport { PieChart } from '../../../../../remarkable-ui';\nimport { Theme } from '../../../../theme/theme.types';\nimport { DefaultPieChartOptions, getDefaultPieChartOptions, getPieChartData } from '../pies.utils';\nimport { DefaultPieChartProps } from '../pies.types';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { ChartCard } from '../../shared/ChartCard/ChartCard';\nimport { mergician } from 'mergician';\nimport { resolveI18nProps } from '../../../component.utils';\n\ntype PieChartProProps = DefaultPieChartProps;\n\nconst PieChartPro = (props: PieChartProProps) => {\n const theme = useTheme() as Theme;\n i18nSetup(theme);\n\n const {\n description,\n dimension,\n maxLegendItems,\n measure,\n results,\n showLegend,\n showTooltips,\n showValueLabels,\n title,\n onSegmentClick,\n } = resolveI18nProps(props);\n\n const data = getPieChartData({ data: results.data, dimension, measure, maxLegendItems }, theme);\n\n const options = mergician(\n getDefaultPieChartOptions(\n {\n measure,\n showTooltips,\n showLegend,\n showValueLabels,\n } as DefaultPieChartOptions,\n theme,\n ),\n theme.charts.pieChartPro?.options ?? {},\n );\n\n const handleSegmentClick = (index: number | undefined) => {\n onSegmentClick({\n dimensionValue: index === undefined ? undefined : results.data?.[index]?.[dimension.name],\n });\n };\n\n return (\n <ChartCard\n data={results}\n dimensionsAndMeasures={[dimension, measure]}\n errorMessage={results.error}\n subtitle={description}\n title={title}\n >\n <PieChart data={data} options={options} onSegmentClick={handleSegmentClick} />\n </ChartCard>\n );\n};\n\nexport default PieChartPro;\n"],"names":["PieChartPro","props","theme","useTheme","i18nSetup","description","dimension","maxLegendItems","measure","results","showLegend","showTooltips","showValueLabels","title","onSegmentClick","resolveI18nProps","data","getPieChartData","options","mergician","getDefaultPieChartOptions","_a","handleSegmentClick","index","_b","jsx","ChartCard","PieChart"],"mappings":";;;;;AAYA,MAAMA,IAAc,CAACC,MAA4B;;AAC/C,QAAMC,IAAQC,EAAA;AACd,EAAAC,EAAUF,CAAK;AAEf,QAAM;AAAA,IACJ,aAAAG;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA,IACEC,EAAiBd,CAAK,GAEpBe,IAAOC,EAAgB,EAAE,MAAMR,EAAQ,MAAM,WAAAH,GAAW,SAAAE,GAAS,gBAAAD,EAAA,GAAkBL,CAAK,GAExFgB,IAAUC;AAAA,IACdC;AAAA,MACE;AAAA,QACE,SAAAZ;AAAA,QACA,cAAAG;AAAA,QACA,YAAAD;AAAA,QACA,iBAAAE;AAAA,MAAA;AAAA,MAEFV;AAAA,IAAA;AAAA,MAEFmB,IAAAnB,EAAM,OAAO,gBAAb,gBAAAmB,EAA0B,YAAW,CAAA;AAAA,EAAC,GAGlCC,IAAqB,CAACC,MAA8B;;AACxD,IAAAT,EAAe;AAAA,MACb,gBAAgBS,MAAU,WAAwBC,KAAAH,IAAAZ,EAAQ,SAAR,gBAAAY,EAAeE,OAAf,OAAZ,SAAYC,EAAwBlB,EAAU;AAAA,IAAI,CACzF;AAAA,EACH;AAEA,SACEmB,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMjB;AAAA,MACN,uBAAuB,CAACH,GAAWE,CAAO;AAAA,MAC1C,cAAcC,EAAQ;AAAA,MACtB,UAAUJ;AAAA,MACV,OAAAQ;AAAA,MAEA,UAAAY,gBAAAA,EAAAA,IAACE,GAAA,EAAS,MAAAX,GAAY,SAAAE,GAAkB,gBAAgBI,EAAA,CAAoB;AAAA,IAAA;AAAA,EAAA;AAGlF;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { i as P, r as S, m as b, j as m, aj as D } from "./component.constants-XB5gaz8Z.js";
2
2
  import { useTheme as v } from "@embeddable.com/react";
3
- import { g as _, a as k } from "./pies.utils-DTa2hAZg.js";
3
+ import { g as _, a as k } from "./pies.utils-DotuA_5l.js";
4
4
  import { C as w } from "./ChartCard-Duhwxov3.js";
5
5
  import "react";
6
6
  const L = (d) => {
@@ -54,4 +54,4 @@ export {
54
54
  L as D,
55
55
  V as i
56
56
  };
57
- //# sourceMappingURL=index-B96WIMDJ.js.map
57
+ //# sourceMappingURL=index-E75P_2R2.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index-B96WIMDJ.js","sources":["../src/remarkable-pro/components/charts/pies/DonutChartPro/index.tsx"],"sourcesContent":["import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { DefaultPieChartOptions, getDefaultPieChartOptions, getPieChartData } from '../pies.utils';\nimport { DefaultPieChartProps } from '../pies.types';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { ChartCard } from '../../shared/ChartCard/ChartCard';\nimport { DonutChart } from '../../../../../remarkable-ui';\nimport { mergician } from 'mergician';\nimport { resolveI18nProps } from '../../../component.utils';\n\ntype DonutChartProProps = DefaultPieChartProps;\n\nconst DonutChartPro = (props: DonutChartProProps) => {\n const theme = useTheme() as Theme;\n i18nSetup(theme);\n\n const {\n description,\n dimension,\n maxLegendItems,\n measure,\n results,\n showLegend,\n showTooltips,\n showValueLabels,\n title,\n onSegmentClick,\n } = resolveI18nProps(props);\n\n const data = getPieChartData({ data: results.data, dimension, measure, maxLegendItems }, theme);\n\n const options = mergician(\n getDefaultPieChartOptions(\n {\n measure,\n showTooltips,\n showLegend,\n showValueLabels,\n } as DefaultPieChartOptions,\n theme,\n ),\n theme.charts.donutChartPro?.options ?? {},\n );\n\n const handleSegmentClick = (index: number | undefined) => {\n onSegmentClick({\n dimensionValue: index === undefined ? undefined : results.data?.[index]?.[dimension.name],\n });\n };\n\n return (\n <ChartCard\n data={results}\n dimensionsAndMeasures={[dimension, measure]}\n errorMessage={results.error}\n subtitle={description}\n title={title}\n >\n <DonutChart data={data} options={options} onSegmentClick={handleSegmentClick} />\n </ChartCard>\n );\n};\n\nexport default DonutChartPro;\n"],"names":["DonutChartPro","props","theme","useTheme","i18nSetup","description","dimension","maxLegendItems","measure","results","showLegend","showTooltips","showValueLabels","title","onSegmentClick","resolveI18nProps","data","getPieChartData","options","mergician","getDefaultPieChartOptions","_a","handleSegmentClick","index","_b","jsx","ChartCard","DonutChart"],"mappings":";;;;;AAYA,MAAMA,IAAgB,CAACC,MAA8B;;AACnD,QAAMC,IAAQC,EAAA;AACd,EAAAC,EAAUF,CAAK;AAEf,QAAM;AAAA,IACJ,aAAAG;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA,IACEC,EAAiBd,CAAK,GAEpBe,IAAOC,EAAgB,EAAE,MAAMR,EAAQ,MAAM,WAAAH,GAAW,SAAAE,GAAS,gBAAAD,EAAA,GAAkBL,CAAK,GAExFgB,IAAUC;AAAA,IACdC;AAAA,MACE;AAAA,QACE,SAAAZ;AAAA,QACA,cAAAG;AAAA,QACA,YAAAD;AAAA,QACA,iBAAAE;AAAA,MAAA;AAAA,MAEFV;AAAA,IAAA;AAAA,MAEFmB,IAAAnB,EAAM,OAAO,kBAAb,gBAAAmB,EAA4B,YAAW,CAAA;AAAA,EAAC,GAGpCC,IAAqB,CAACC,MAA8B;;AACxD,IAAAT,EAAe;AAAA,MACb,gBAAgBS,MAAU,WAAwBC,KAAAH,IAAAZ,EAAQ,SAAR,gBAAAY,EAAeE,OAAf,OAAZ,SAAYC,EAAwBlB,EAAU;AAAA,IAAI,CACzF;AAAA,EACH;AAEA,SACEmB,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMjB;AAAA,MACN,uBAAuB,CAACH,GAAWE,CAAO;AAAA,MAC1C,cAAcC,EAAQ;AAAA,MACtB,UAAUJ;AAAA,MACV,OAAAQ;AAAA,MAEA,UAAAY,gBAAAA,EAAAA,IAACE,GAAA,EAAW,MAAAX,GAAY,SAAAE,GAAkB,gBAAgBI,EAAA,CAAoB;AAAA,IAAA;AAAA,EAAA;AAGpF;;;;"}
1
+ {"version":3,"file":"index-E75P_2R2.js","sources":["../src/remarkable-pro/components/charts/pies/DonutChartPro/index.tsx"],"sourcesContent":["import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { DefaultPieChartOptions, getDefaultPieChartOptions, getPieChartData } from '../pies.utils';\nimport { DefaultPieChartProps } from '../pies.types';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { ChartCard } from '../../shared/ChartCard/ChartCard';\nimport { DonutChart } from '../../../../../remarkable-ui';\nimport { mergician } from 'mergician';\nimport { resolveI18nProps } from '../../../component.utils';\n\ntype DonutChartProProps = DefaultPieChartProps;\n\nconst DonutChartPro = (props: DonutChartProProps) => {\n const theme = useTheme() as Theme;\n i18nSetup(theme);\n\n const {\n description,\n dimension,\n maxLegendItems,\n measure,\n results,\n showLegend,\n showTooltips,\n showValueLabels,\n title,\n onSegmentClick,\n } = resolveI18nProps(props);\n\n const data = getPieChartData({ data: results.data, dimension, measure, maxLegendItems }, theme);\n\n const options = mergician(\n getDefaultPieChartOptions(\n {\n measure,\n showTooltips,\n showLegend,\n showValueLabels,\n } as DefaultPieChartOptions,\n theme,\n ),\n theme.charts.donutChartPro?.options ?? {},\n );\n\n const handleSegmentClick = (index: number | undefined) => {\n onSegmentClick({\n dimensionValue: index === undefined ? undefined : results.data?.[index]?.[dimension.name],\n });\n };\n\n return (\n <ChartCard\n data={results}\n dimensionsAndMeasures={[dimension, measure]}\n errorMessage={results.error}\n subtitle={description}\n title={title}\n >\n <DonutChart data={data} options={options} onSegmentClick={handleSegmentClick} />\n </ChartCard>\n );\n};\n\nexport default DonutChartPro;\n"],"names":["DonutChartPro","props","theme","useTheme","i18nSetup","description","dimension","maxLegendItems","measure","results","showLegend","showTooltips","showValueLabels","title","onSegmentClick","resolveI18nProps","data","getPieChartData","options","mergician","getDefaultPieChartOptions","_a","handleSegmentClick","index","_b","jsx","ChartCard","DonutChart"],"mappings":";;;;;AAYA,MAAMA,IAAgB,CAACC,MAA8B;;AACnD,QAAMC,IAAQC,EAAA;AACd,EAAAC,EAAUF,CAAK;AAEf,QAAM;AAAA,IACJ,aAAAG;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA,IACEC,EAAiBd,CAAK,GAEpBe,IAAOC,EAAgB,EAAE,MAAMR,EAAQ,MAAM,WAAAH,GAAW,SAAAE,GAAS,gBAAAD,EAAA,GAAkBL,CAAK,GAExFgB,IAAUC;AAAA,IACdC;AAAA,MACE;AAAA,QACE,SAAAZ;AAAA,QACA,cAAAG;AAAA,QACA,YAAAD;AAAA,QACA,iBAAAE;AAAA,MAAA;AAAA,MAEFV;AAAA,IAAA;AAAA,MAEFmB,IAAAnB,EAAM,OAAO,kBAAb,gBAAAmB,EAA4B,YAAW,CAAA;AAAA,EAAC,GAGpCC,IAAqB,CAACC,MAA8B;;AACxD,IAAAT,EAAe;AAAA,MACb,gBAAgBS,MAAU,WAAwBC,KAAAH,IAAAZ,EAAQ,SAAR,gBAAAY,EAAeE,OAAf,OAAZ,SAAYC,EAAwBlB,EAAU;AAAA,IAAI,CACzF;AAAA,EACH;AAEA,SACEmB,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMjB;AAAA,MACN,uBAAuB,CAACH,GAAWE,CAAO;AAAA,MAC1C,cAAcC,EAAQ;AAAA,MACtB,UAAUJ;AAAA,MACV,OAAAQ;AAAA,MAEA,UAAAY,gBAAAA,EAAAA,IAACE,GAAA,EAAW,MAAAX,GAAY,SAAAE,GAAkB,gBAAgBI,EAAA,CAAoB;AAAA,IAAA;AAAA,EAAA;AAGpF;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { i as M, r as _, m as k, j as c, aj as w } from "./component.constants-XB5gaz8Z.js";
2
2
  import { useTheme as O } from "@embeddable.com/react";
3
- import { g as y, a as F } from "./pies.utils-DTa2hAZg.js";
3
+ import { g as y, a as F } from "./pies.utils-DotuA_5l.js";
4
4
  import { g as V } from "./formatter.utils-BmqMNSUB.js";
5
5
  import { C as z } from "./ChartCard-Duhwxov3.js";
6
6
  import "react";
@@ -70,4 +70,4 @@ export {
70
70
  A as D,
71
71
  H as i
72
72
  };
73
- //# sourceMappingURL=index-Cg05t97t.js.map
73
+ //# sourceMappingURL=index-vk45FCxb.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index-Cg05t97t.js","sources":["../src/remarkable-pro/components/charts/pies/DonutLabelChartPro/index.tsx"],"sourcesContent":["import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { DefaultPieChartOptions, getDefaultPieChartOptions, getPieChartData } from '../pies.utils';\nimport { DefaultPieChartProps } from '../pies.types';\nimport { DataResponse, Measure } from '@embeddable.com/core';\nimport { getThemeFormatter } from '../../../../theme/formatter/formatter.utils';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { ChartCard } from '../../shared/ChartCard/ChartCard';\nimport { DonutChart } from '../../../../../remarkable-ui';\nimport { mergician } from 'mergician';\nimport { resolveI18nProps } from '../../../component.utils';\n\ntype DonutLabelChartProProps = DefaultPieChartProps & {\n innerLabelMeasure: Measure;\n innerLabelText: string;\n resultsInnerLabel: DataResponse;\n};\n\nconst DonutChartPro = (props: DonutLabelChartProProps) => {\n const theme = useTheme() as Theme;\n const themeFormatter = getThemeFormatter(theme);\n i18nSetup(theme);\n\n const {\n description,\n dimension,\n maxLegendItems,\n measure,\n results,\n showLegend,\n showTooltips,\n showValueLabels,\n title,\n innerLabelMeasure,\n resultsInnerLabel,\n innerLabelText,\n onSegmentClick,\n } = resolveI18nProps(props);\n\n const data = getPieChartData({ data: results.data, dimension, measure, maxLegendItems }, theme);\n\n const handleSegmentClick = (index: number | undefined) => {\n onSegmentClick({\n dimensionValue: index === undefined ? undefined : results.data?.[index]?.[dimension.name],\n });\n };\n\n const label = themeFormatter.data(\n innerLabelMeasure,\n resultsInnerLabel?.data?.[0]?.[innerLabelMeasure.name],\n );\n\n const options = mergician(\n getDefaultPieChartOptions(\n {\n measure,\n showTooltips,\n showLegend,\n showValueLabels,\n } as DefaultPieChartOptions,\n theme,\n ),\n theme.charts.donutLabelChartPro?.options ?? {},\n );\n\n return (\n <ChartCard\n data={results}\n dimensionsAndMeasures={[dimension, measure]}\n errorMessage={results.error}\n subtitle={description}\n title={title}\n >\n <DonutChart\n label={label}\n subLabel={innerLabelText}\n data={data}\n options={options}\n onSegmentClick={handleSegmentClick}\n />\n </ChartCard>\n );\n};\n\nexport default DonutChartPro;\n"],"names":["DonutChartPro","props","theme","useTheme","themeFormatter","getThemeFormatter","i18nSetup","description","dimension","maxLegendItems","measure","results","showLegend","showTooltips","showValueLabels","title","innerLabelMeasure","resultsInnerLabel","innerLabelText","onSegmentClick","resolveI18nProps","data","getPieChartData","handleSegmentClick","index","_b","_a","label","options","mergician","getDefaultPieChartOptions","_c","jsx","ChartCard","DonutChart"],"mappings":";;;;;;AAkBA,MAAMA,IAAgB,CAACC,MAAmC;;AACxD,QAAMC,IAAQC,EAAA,GACRC,IAAiBC,EAAkBH,CAAK;AAC9C,EAAAI,EAAUJ,CAAK;AAEf,QAAM;AAAA,IACJ,aAAAK;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA,IACEC,EAAiBnB,CAAK,GAEpBoB,IAAOC,EAAgB,EAAE,MAAMX,EAAQ,MAAM,WAAAH,GAAW,SAAAE,GAAS,gBAAAD,EAAA,GAAkBP,CAAK,GAExFqB,IAAqB,CAACC,MAA8B;;AACxD,IAAAL,EAAe;AAAA,MACb,gBAAgBK,MAAU,WAAwBC,KAAAC,IAAAf,EAAQ,SAAR,gBAAAe,EAAeF,OAAf,OAAZ,SAAYC,EAAwBjB,EAAU;AAAA,IAAI,CACzF;AAAA,EACH,GAEMmB,IAAQvB,EAAe;AAAA,IAC3BY;AAAA,KACAS,KAAAC,IAAAT,KAAA,gBAAAA,EAAmB,SAAnB,gBAAAS,EAA0B,OAA1B,gBAAAD,EAA+BT,EAAkB;AAAA,EAAI,GAGjDY,IAAUC;AAAA,IACdC;AAAA,MACE;AAAA,QACE,SAAApB;AAAA,QACA,cAAAG;AAAA,QACA,YAAAD;AAAA,QACA,iBAAAE;AAAA,MAAA;AAAA,MAEFZ;AAAA,IAAA;AAAA,MAEF6B,IAAA7B,EAAM,OAAO,uBAAb,gBAAA6B,EAAiC,YAAW,CAAA;AAAA,EAAC;AAG/C,SACEC,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMtB;AAAA,MACN,uBAAuB,CAACH,GAAWE,CAAO;AAAA,MAC1C,cAAcC,EAAQ;AAAA,MACtB,UAAUJ;AAAA,MACV,OAAAQ;AAAA,MAEA,UAAAiB,gBAAAA,EAAAA;AAAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAAP;AAAA,UACA,UAAUT;AAAA,UACV,MAAAG;AAAA,UACA,SAAAO;AAAA,UACA,gBAAgBL;AAAA,QAAA;AAAA,MAAA;AAAA,IAClB;AAAA,EAAA;AAGN;;;;"}
1
+ {"version":3,"file":"index-vk45FCxb.js","sources":["../src/remarkable-pro/components/charts/pies/DonutLabelChartPro/index.tsx"],"sourcesContent":["import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { DefaultPieChartOptions, getDefaultPieChartOptions, getPieChartData } from '../pies.utils';\nimport { DefaultPieChartProps } from '../pies.types';\nimport { DataResponse, Measure } from '@embeddable.com/core';\nimport { getThemeFormatter } from '../../../../theme/formatter/formatter.utils';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { ChartCard } from '../../shared/ChartCard/ChartCard';\nimport { DonutChart } from '../../../../../remarkable-ui';\nimport { mergician } from 'mergician';\nimport { resolveI18nProps } from '../../../component.utils';\n\ntype DonutLabelChartProProps = DefaultPieChartProps & {\n innerLabelMeasure: Measure;\n innerLabelText: string;\n resultsInnerLabel: DataResponse;\n};\n\nconst DonutChartPro = (props: DonutLabelChartProProps) => {\n const theme = useTheme() as Theme;\n const themeFormatter = getThemeFormatter(theme);\n i18nSetup(theme);\n\n const {\n description,\n dimension,\n maxLegendItems,\n measure,\n results,\n showLegend,\n showTooltips,\n showValueLabels,\n title,\n innerLabelMeasure,\n resultsInnerLabel,\n innerLabelText,\n onSegmentClick,\n } = resolveI18nProps(props);\n\n const data = getPieChartData({ data: results.data, dimension, measure, maxLegendItems }, theme);\n\n const handleSegmentClick = (index: number | undefined) => {\n onSegmentClick({\n dimensionValue: index === undefined ? undefined : results.data?.[index]?.[dimension.name],\n });\n };\n\n const label = themeFormatter.data(\n innerLabelMeasure,\n resultsInnerLabel?.data?.[0]?.[innerLabelMeasure.name],\n );\n\n const options = mergician(\n getDefaultPieChartOptions(\n {\n measure,\n showTooltips,\n showLegend,\n showValueLabels,\n } as DefaultPieChartOptions,\n theme,\n ),\n theme.charts.donutLabelChartPro?.options ?? {},\n );\n\n return (\n <ChartCard\n data={results}\n dimensionsAndMeasures={[dimension, measure]}\n errorMessage={results.error}\n subtitle={description}\n title={title}\n >\n <DonutChart\n label={label}\n subLabel={innerLabelText}\n data={data}\n options={options}\n onSegmentClick={handleSegmentClick}\n />\n </ChartCard>\n );\n};\n\nexport default DonutChartPro;\n"],"names":["DonutChartPro","props","theme","useTheme","themeFormatter","getThemeFormatter","i18nSetup","description","dimension","maxLegendItems","measure","results","showLegend","showTooltips","showValueLabels","title","innerLabelMeasure","resultsInnerLabel","innerLabelText","onSegmentClick","resolveI18nProps","data","getPieChartData","handleSegmentClick","index","_b","_a","label","options","mergician","getDefaultPieChartOptions","_c","jsx","ChartCard","DonutChart"],"mappings":";;;;;;AAkBA,MAAMA,IAAgB,CAACC,MAAmC;;AACxD,QAAMC,IAAQC,EAAA,GACRC,IAAiBC,EAAkBH,CAAK;AAC9C,EAAAI,EAAUJ,CAAK;AAEf,QAAM;AAAA,IACJ,aAAAK;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA,IACEC,EAAiBnB,CAAK,GAEpBoB,IAAOC,EAAgB,EAAE,MAAMX,EAAQ,MAAM,WAAAH,GAAW,SAAAE,GAAS,gBAAAD,EAAA,GAAkBP,CAAK,GAExFqB,IAAqB,CAACC,MAA8B;;AACxD,IAAAL,EAAe;AAAA,MACb,gBAAgBK,MAAU,WAAwBC,KAAAC,IAAAf,EAAQ,SAAR,gBAAAe,EAAeF,OAAf,OAAZ,SAAYC,EAAwBjB,EAAU;AAAA,IAAI,CACzF;AAAA,EACH,GAEMmB,IAAQvB,EAAe;AAAA,IAC3BY;AAAA,KACAS,KAAAC,IAAAT,KAAA,gBAAAA,EAAmB,SAAnB,gBAAAS,EAA0B,OAA1B,gBAAAD,EAA+BT,EAAkB;AAAA,EAAI,GAGjDY,IAAUC;AAAA,IACdC;AAAA,MACE;AAAA,QACE,SAAApB;AAAA,QACA,cAAAG;AAAA,QACA,YAAAD;AAAA,QACA,iBAAAE;AAAA,MAAA;AAAA,MAEFZ;AAAA,IAAA;AAAA,MAEF6B,IAAA7B,EAAM,OAAO,uBAAb,gBAAA6B,EAAiC,YAAW,CAAA;AAAA,EAAC;AAG/C,SACEC,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMtB;AAAA,MACN,uBAAuB,CAACH,GAAWE,CAAO;AAAA,MAC1C,cAAcC,EAAQ;AAAA,MACtB,UAAUJ;AAAA,MACV,OAAAQ;AAAA,MAEA,UAAAiB,gBAAAA,EAAAA;AAAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAAP;AAAA,UACA,UAAUT;AAAA,UACV,MAAAG;AAAA,UACA,SAAAO;AAAA,UACA,gBAAgBL;AAAA,QAAA;AAAA,MAAA;AAAA,IAClB;AAAA,EAAA;AAGN;;;;"}
package/dist/index.js CHANGED
@@ -9,13 +9,13 @@ import { B as _ } from "./index-CrfsmcHa.js";
9
9
  import { b as Sa, i as Ia } from "./index-CrfsmcHa.js";
10
10
  import { S as Ta } from "./SingleSelectField-J0EWFhqx.js";
11
11
  import { K as ka } from "./KpiChart-DINLNXzY.js";
12
- import { r as La, s as Aa } from "./charts.utils-DEajwB6c.js";
12
+ import { r as La, s as Aa } from "./charts.utils-CKlua6UT.js";
13
13
  import { g as Ba } from "./object.utils-BNKDL7Y9.js";
14
14
  import { g as Fa } from "./formatter.utils-BmqMNSUB.js";
15
- import { a as za, g as Oa } from "./pies.utils-DTa2hAZg.js";
16
- import { i as Ea } from "./index-B74kx38r.js";
17
- import { i as Ka } from "./index-B96WIMDJ.js";
18
- import { i as Xa } from "./index-Cg05t97t.js";
15
+ import { a as za, g as Oa } from "./pies.utils-DotuA_5l.js";
16
+ import { i as Ea } from "./index-CydUf2Tu.js";
17
+ import { i as Ka } from "./index-E75P_2R2.js";
18
+ import { i as Xa } from "./index-vk45FCxb.js";
19
19
  import { i as Ya } from "./index-DK57EImz.js";
20
20
  import { i as Ha } from "./index-jl_48we-.js";
21
21
  import { C as Ja } from "./ComparisonPeriod.type.emb-BsVeAHPK.js";
@@ -1,4 +1,4 @@
1
- import { r as u, g as b } from "./charts.utils-DEajwB6c.js";
1
+ import { r as u, g as b } from "./charts.utils-CKlua6UT.js";
2
2
  import { g } from "./formatter.utils-BmqMNSUB.js";
3
3
  import { g as h, a as i } from "./object.utils-BNKDL7Y9.js";
4
4
  import { T as c, U as f } from "./component.constants-XB5gaz8Z.js";
@@ -72,4 +72,4 @@ export {
72
72
  F as a,
73
73
  y as g
74
74
  };
75
- //# sourceMappingURL=pies.utils-DTa2hAZg.js.map
75
+ //# sourceMappingURL=pies.utils-DotuA_5l.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"pies.utils-DTa2hAZg.js","sources":["../src/remarkable-pro/components/charts/pies/pies.utils.ts"],"sourcesContent":["import { DataResponse, Dimension, Measure } from '@embeddable.com/core';\nimport { ChartData, ChartOptions } from 'chart.js';\nimport { groupTailAsOther } from '../charts.utils';\nimport { Theme } from '../../../theme/theme.types';\nimport { remarkableTheme } from '../../../theme/theme.constants';\nimport { getThemeFormatter } from '../../../theme/formatter/formatter.utils';\nimport { getColor } from '../../../theme/styles/styles.utils';\nimport { chartColors } from '../../../../remarkable-ui';\nimport { i18n } from '../../../theme/i18n/i18n';\nimport { getObjectStableKey } from '../../../utils.ts/object.utils';\n\nexport const getPieChartData = (\n props: {\n data: DataResponse['data'];\n dimension: Dimension;\n measure: Measure;\n maxLegendItems?: number;\n },\n theme: Theme = remarkableTheme,\n): ChartData<'pie'> => {\n const themeFormatter = getThemeFormatter(theme);\n\n if (!props.data)\n return {\n labels: [],\n datasets: [{ data: [] }],\n };\n\n const groupedData = groupTailAsOther(\n props.data,\n props.dimension,\n [props.measure],\n props.maxLegendItems,\n );\n\n const themeKey = getObjectStableKey(theme);\n\n const backgroundColor = groupedData.map((item, i) =>\n getColor(\n `${themeKey}.charts.backgroundColors`,\n `${props.dimension.name}.${item[props.dimension.name]}`,\n theme.charts.backgroundColors ?? chartColors,\n i,\n ),\n );\n\n const borderColor = groupedData.map((item, i) =>\n getColor(\n `${themeKey}.charts.borderColors`,\n `${props.dimension.name}.${item[props.dimension.name]}`,\n theme.charts.borderColors ?? chartColors,\n i,\n ),\n );\n\n return {\n labels: groupedData.map((item) => {\n const value = item[props.dimension.name];\n const formattedValue = themeFormatter.data(props.dimension, value);\n\n // If formatter did not work, try i18n translation\n if (value === formattedValue) {\n return i18n.t(value);\n }\n return formattedValue;\n }),\n datasets: [\n {\n data: groupedData.map((item) => item[props.measure.name]),\n backgroundColor,\n borderColor,\n },\n ],\n };\n};\n\nexport type DefaultPieChartOptions = {\n measure: Measure;\n showTooltips: boolean;\n showLegend: boolean;\n showValueLabels: boolean;\n};\n\nexport const getDefaultPieChartOptions = (\n options: DefaultPieChartOptions,\n theme: Theme = remarkableTheme,\n): Partial<ChartOptions<'pie'>> => {\n const themeFormatter = getThemeFormatter(theme);\n\n return {\n plugins: {\n legend: { display: options.showLegend, position: theme.charts.legendPosition ?? 'bottom' },\n datalabels: {\n display: options.showValueLabels ? 'auto' : false,\n formatter: (value: string | number) => themeFormatter.data(options.measure, value),\n },\n tooltip: {\n enabled: options.showTooltips,\n callbacks: {\n label(context) {\n const raw = context.raw as number;\n const total = context.dataset.data.reduce(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (sum: number, v: any) => sum + parseFloat(v),\n 0,\n );\n const pct = Math.round((raw / total) * 100);\n return `${themeFormatter.data(options.measure, raw)} (${pct}%)`;\n },\n },\n },\n },\n };\n};\n"],"names":["getPieChartData","props","theme","remarkableTheme","themeFormatter","getThemeFormatter","groupedData","groupTailAsOther","themeKey","getObjectStableKey","backgroundColor","item","i","getColor","chartColors","borderColor","value","formattedValue","i18n","getDefaultPieChartOptions","options","context","raw","total","sum","v","pct"],"mappings":";;;;;AAWO,MAAMA,IAAkB,CAC7BC,GAMAC,IAAeC,MACM;AACrB,QAAMC,IAAiBC,EAAkBH,CAAK;AAE9C,MAAI,CAACD,EAAM;AACT,WAAO;AAAA,MACL,QAAQ,CAAA;AAAA,MACR,UAAU,CAAC,EAAE,MAAM,IAAI;AAAA,IAAA;AAG3B,QAAMK,IAAcC;AAAA,IAClBN,EAAM;AAAA,IACNA,EAAM;AAAA,IACN,CAACA,EAAM,OAAO;AAAA,IACdA,EAAM;AAAA,EAAA,GAGFO,IAAWC,EAAmBP,CAAK,GAEnCQ,IAAkBJ,EAAY;AAAA,IAAI,CAACK,GAAMC,MAC7CC;AAAA,MACE,GAAGL,CAAQ;AAAA,MACX,GAAGP,EAAM,UAAU,IAAI,IAAIU,EAAKV,EAAM,UAAU,IAAI,CAAC;AAAA,MACrDC,EAAM,OAAO,oBAAoBY;AAAA,MACjCF;AAAA,IAAA;AAAA,EACF,GAGIG,IAAcT,EAAY;AAAA,IAAI,CAACK,GAAMC,MACzCC;AAAA,MACE,GAAGL,CAAQ;AAAA,MACX,GAAGP,EAAM,UAAU,IAAI,IAAIU,EAAKV,EAAM,UAAU,IAAI,CAAC;AAAA,MACrDC,EAAM,OAAO,gBAAgBY;AAAA,MAC7BF;AAAA,IAAA;AAAA,EACF;AAGF,SAAO;AAAA,IACL,QAAQN,EAAY,IAAI,CAACK,MAAS;AAChC,YAAMK,IAAQL,EAAKV,EAAM,UAAU,IAAI,GACjCgB,IAAiBb,EAAe,KAAKH,EAAM,WAAWe,CAAK;AAGjE,aAAIA,MAAUC,IACLC,EAAK,EAAEF,CAAK,IAEdC;AAAA,IACT,CAAC;AAAA,IACD,UAAU;AAAA,MACR;AAAA,QACE,MAAMX,EAAY,IAAI,CAACK,MAASA,EAAKV,EAAM,QAAQ,IAAI,CAAC;AAAA,QACxD,iBAAAS;AAAA,QACA,aAAAK;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ,GASaI,IAA4B,CACvCC,GACAlB,IAAeC,MACkB;AACjC,QAAMC,IAAiBC,EAAkBH,CAAK;AAE9C,SAAO;AAAA,IACL,SAAS;AAAA,MACP,QAAQ,EAAE,SAASkB,EAAQ,YAAY,UAAUlB,EAAM,OAAO,kBAAkB,SAAA;AAAA,MAChF,YAAY;AAAA,QACV,SAASkB,EAAQ,kBAAkB,SAAS;AAAA,QAC5C,WAAW,CAACJ,MAA2BZ,EAAe,KAAKgB,EAAQ,SAASJ,CAAK;AAAA,MAAA;AAAA,MAEnF,SAAS;AAAA,QACP,SAASI,EAAQ;AAAA,QACjB,WAAW;AAAA,UACT,MAAMC,GAAS;AACb,kBAAMC,IAAMD,EAAQ,KACdE,IAAQF,EAAQ,QAAQ,KAAK;AAAA;AAAA,cAEjC,CAACG,GAAaC,MAAWD,IAAM,WAAWC,CAAC;AAAA,cAC3C;AAAA,YAAA,GAEIC,IAAM,KAAK,MAAOJ,IAAMC,IAAS,GAAG;AAC1C,mBAAO,GAAGnB,EAAe,KAAKgB,EAAQ,SAASE,CAAG,CAAC,KAAKI,CAAG;AAAA,UAC7D;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEJ;"}
1
+ {"version":3,"file":"pies.utils-DotuA_5l.js","sources":["../src/remarkable-pro/components/charts/pies/pies.utils.ts"],"sourcesContent":["import { DataResponse, Dimension, Measure } from '@embeddable.com/core';\nimport { ChartData, ChartOptions } from 'chart.js';\nimport { groupTailAsOther } from '../charts.utils';\nimport { Theme } from '../../../theme/theme.types';\nimport { remarkableTheme } from '../../../theme/theme.constants';\nimport { getThemeFormatter } from '../../../theme/formatter/formatter.utils';\nimport { getColor } from '../../../theme/styles/styles.utils';\nimport { chartColors } from '../../../../remarkable-ui';\nimport { i18n } from '../../../theme/i18n/i18n';\nimport { getObjectStableKey } from '../../../utils.ts/object.utils';\n\nexport const getPieChartData = (\n props: {\n data: DataResponse['data'];\n dimension: Dimension;\n measure: Measure;\n maxLegendItems?: number;\n },\n theme: Theme = remarkableTheme,\n): ChartData<'pie'> => {\n const themeFormatter = getThemeFormatter(theme);\n\n if (!props.data)\n return {\n labels: [],\n datasets: [{ data: [] }],\n };\n\n const groupedData = groupTailAsOther(\n props.data,\n props.dimension,\n [props.measure],\n props.maxLegendItems,\n );\n\n const themeKey = getObjectStableKey(theme);\n\n const backgroundColor = groupedData.map((item, i) =>\n getColor(\n `${themeKey}.charts.backgroundColors`,\n `${props.dimension.name}.${item[props.dimension.name]}`,\n theme.charts.backgroundColors ?? chartColors,\n i,\n ),\n );\n\n const borderColor = groupedData.map((item, i) =>\n getColor(\n `${themeKey}.charts.borderColors`,\n `${props.dimension.name}.${item[props.dimension.name]}`,\n theme.charts.borderColors ?? chartColors,\n i,\n ),\n );\n\n return {\n labels: groupedData.map((item) => {\n const value = item[props.dimension.name];\n const formattedValue = themeFormatter.data(props.dimension, value);\n\n // If formatter did not work, try i18n translation\n if (value === formattedValue) {\n return i18n.t(value);\n }\n return formattedValue;\n }),\n datasets: [\n {\n data: groupedData.map((item) => item[props.measure.name]),\n backgroundColor,\n borderColor,\n },\n ],\n };\n};\n\nexport type DefaultPieChartOptions = {\n measure: Measure;\n showTooltips: boolean;\n showLegend: boolean;\n showValueLabels: boolean;\n};\n\nexport const getDefaultPieChartOptions = (\n options: DefaultPieChartOptions,\n theme: Theme = remarkableTheme,\n): Partial<ChartOptions<'pie'>> => {\n const themeFormatter = getThemeFormatter(theme);\n\n return {\n plugins: {\n legend: { display: options.showLegend, position: theme.charts.legendPosition ?? 'bottom' },\n datalabels: {\n display: options.showValueLabels ? 'auto' : false,\n formatter: (value: string | number) => themeFormatter.data(options.measure, value),\n },\n tooltip: {\n enabled: options.showTooltips,\n callbacks: {\n label(context) {\n const raw = context.raw as number;\n const total = context.dataset.data.reduce(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (sum: number, v: any) => sum + parseFloat(v),\n 0,\n );\n const pct = Math.round((raw / total) * 100);\n return `${themeFormatter.data(options.measure, raw)} (${pct}%)`;\n },\n },\n },\n },\n };\n};\n"],"names":["getPieChartData","props","theme","remarkableTheme","themeFormatter","getThemeFormatter","groupedData","groupTailAsOther","themeKey","getObjectStableKey","backgroundColor","item","i","getColor","chartColors","borderColor","value","formattedValue","i18n","getDefaultPieChartOptions","options","context","raw","total","sum","v","pct"],"mappings":";;;;;AAWO,MAAMA,IAAkB,CAC7BC,GAMAC,IAAeC,MACM;AACrB,QAAMC,IAAiBC,EAAkBH,CAAK;AAE9C,MAAI,CAACD,EAAM;AACT,WAAO;AAAA,MACL,QAAQ,CAAA;AAAA,MACR,UAAU,CAAC,EAAE,MAAM,IAAI;AAAA,IAAA;AAG3B,QAAMK,IAAcC;AAAA,IAClBN,EAAM;AAAA,IACNA,EAAM;AAAA,IACN,CAACA,EAAM,OAAO;AAAA,IACdA,EAAM;AAAA,EAAA,GAGFO,IAAWC,EAAmBP,CAAK,GAEnCQ,IAAkBJ,EAAY;AAAA,IAAI,CAACK,GAAMC,MAC7CC;AAAA,MACE,GAAGL,CAAQ;AAAA,MACX,GAAGP,EAAM,UAAU,IAAI,IAAIU,EAAKV,EAAM,UAAU,IAAI,CAAC;AAAA,MACrDC,EAAM,OAAO,oBAAoBY;AAAA,MACjCF;AAAA,IAAA;AAAA,EACF,GAGIG,IAAcT,EAAY;AAAA,IAAI,CAACK,GAAMC,MACzCC;AAAA,MACE,GAAGL,CAAQ;AAAA,MACX,GAAGP,EAAM,UAAU,IAAI,IAAIU,EAAKV,EAAM,UAAU,IAAI,CAAC;AAAA,MACrDC,EAAM,OAAO,gBAAgBY;AAAA,MAC7BF;AAAA,IAAA;AAAA,EACF;AAGF,SAAO;AAAA,IACL,QAAQN,EAAY,IAAI,CAACK,MAAS;AAChC,YAAMK,IAAQL,EAAKV,EAAM,UAAU,IAAI,GACjCgB,IAAiBb,EAAe,KAAKH,EAAM,WAAWe,CAAK;AAGjE,aAAIA,MAAUC,IACLC,EAAK,EAAEF,CAAK,IAEdC;AAAA,IACT,CAAC;AAAA,IACD,UAAU;AAAA,MACR;AAAA,QACE,MAAMX,EAAY,IAAI,CAACK,MAASA,EAAKV,EAAM,QAAQ,IAAI,CAAC;AAAA,QACxD,iBAAAS;AAAA,QACA,aAAAK;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ,GASaI,IAA4B,CACvCC,GACAlB,IAAeC,MACkB;AACjC,QAAMC,IAAiBC,EAAkBH,CAAK;AAE9C,SAAO;AAAA,IACL,SAAS;AAAA,MACP,QAAQ,EAAE,SAASkB,EAAQ,YAAY,UAAUlB,EAAM,OAAO,kBAAkB,SAAA;AAAA,MAChF,YAAY;AAAA,QACV,SAASkB,EAAQ,kBAAkB,SAAS;AAAA,QAC5C,WAAW,CAACJ,MAA2BZ,EAAe,KAAKgB,EAAQ,SAASJ,CAAK;AAAA,MAAA;AAAA,MAEnF,SAAS;AAAA,QACP,SAASI,EAAQ;AAAA,QACjB,WAAW;AAAA,UACT,MAAMC,GAAS;AACb,kBAAMC,IAAMD,EAAQ,KACdE,IAAQF,EAAQ,QAAQ,KAAK;AAAA;AAAA,cAEjC,CAACG,GAAaC,MAAWD,IAAM,WAAWC,CAAC;AAAA,cAC3C;AAAA,YAAA,GAEIC,IAAM,KAAK,MAAOJ,IAAMC,IAAS,GAAG;AAC1C,mBAAO,GAAGnB,EAAe,KAAKgB,EAAQ,SAASE,CAAG,CAAC,KAAKI,CAAG;AAAA,UAC7D;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEJ;"}
@@ -324,6 +324,26 @@ declare const stylesComponents: {
324
324
  '--em-icon-btn-size-width': string;
325
325
  '--em-icon-height': string;
326
326
  '--em-icon-width': string;
327
+ '--em-kpi-kpi-font-font-color': string;
328
+ '--em-kpi-kpi-font-font-family': string;
329
+ '--em-kpi-kpi-font-font-size': string;
330
+ '--em-kpi-kpi-font-font-weight': string;
331
+ '--em-kpi-kpi-font-line-height': string;
332
+ '--em-kpi-trend-background-color-negative': string;
333
+ '--em-kpi-trend-background-color-positive': string;
334
+ '--em-kpi-trend-border-radius-default': string;
335
+ '--em-kpi-trend-font-font-family': string;
336
+ '--em-kpi-trend-font-font-size': string;
337
+ '--em-kpi-trend-font-font-weight': string;
338
+ '--em-kpi-trend-font-line-height': string;
339
+ '--em-kpi-trend-icon-color-negative': string;
340
+ '--em-kpi-trend-icon-color-positive': string;
341
+ '--em-kpi-trend-icon-size-height': string;
342
+ '--em-kpi-trend-icon-size-width': string;
343
+ '--em-kpi-trend-label-color-negative': string;
344
+ '--em-kpi-trend-label-color-positive': string;
345
+ '--em-kpi-trend-padding-default': string;
346
+ '--em-kpi-trend-size-height': string;
327
347
  '--em-label-background-color-default': string;
328
348
  '--em-label-border-radius-default': string;
329
349
  '--em-label-label-font-color-default': string;
@@ -1 +1 @@
1
- {"version":3,"file":"styles.constants.d.ts","sourceRoot":"","sources":["../../../src/remarkable-ui/styles/styles.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAuBxB,CAAC;AAEF,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiE1B,CAAC;AAEF,QAAA,MAAM,aAAa;;;;;;;;;;;;;CAalB,CAAC;AAEF,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAicrB,CAAC;AAEF,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;CAcrB,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;CAMjB,CAAC;AAEF,KAAK,YAAY,GAAG,MAAM,CAAC,MAAM,OAAO,YAAY,EAAE,MAAM,CAAC,CAAC;AAC9D,KAAK,qBAAqB,GAAG,MAAM,CAAC,MAAM,OAAO,qBAAqB,EAAE,MAAM,CAAC,CAAC;AAChF,KAAK,aAAa,GAAG,MAAM,CAAC,MAAM,OAAO,aAAa,EAAE,MAAM,CAAC,CAAC;AAChE,KAAK,gBAAgB,GAAG,MAAM,CAAC,MAAM,OAAO,gBAAgB,EAAE,MAAM,CAAC,CAAC;AACtE,KAAK,gBAAgB,GAAG,MAAM,CAAC,MAAM,OAAO,gBAAgB,EAAE,MAAM,CAAC,CAAC;AACtE,KAAK,YAAY,GAAG,MAAM,CAAC,MAAM,OAAO,YAAY,EAAE,MAAM,CAAC,CAAC;AAE9D,MAAM,MAAM,MAAM,GAAG,YAAY,GAC/B,qBAAqB,GACrB,aAAa,GACb,gBAAgB,GAChB,gBAAgB,GAChB,YAAY,CAAC;AAEf,eAAO,MAAM,MAAM,EAAE,MAOpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC"}
1
+ {"version":3,"file":"styles.constants.d.ts","sourceRoot":"","sources":["../../../src/remarkable-ui/styles/styles.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAuBxB,CAAC;AAEF,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiE1B,CAAC;AAEF,QAAA,MAAM,aAAa;;;;;;;;;;;;;CAalB,CAAC;AAEF,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqdrB,CAAC;AAEF,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;CAcrB,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;CAMjB,CAAC;AAEF,KAAK,YAAY,GAAG,MAAM,CAAC,MAAM,OAAO,YAAY,EAAE,MAAM,CAAC,CAAC;AAC9D,KAAK,qBAAqB,GAAG,MAAM,CAAC,MAAM,OAAO,qBAAqB,EAAE,MAAM,CAAC,CAAC;AAChF,KAAK,aAAa,GAAG,MAAM,CAAC,MAAM,OAAO,aAAa,EAAE,MAAM,CAAC,CAAC;AAChE,KAAK,gBAAgB,GAAG,MAAM,CAAC,MAAM,OAAO,gBAAgB,EAAE,MAAM,CAAC,CAAC;AACtE,KAAK,gBAAgB,GAAG,MAAM,CAAC,MAAM,OAAO,gBAAgB,EAAE,MAAM,CAAC,CAAC;AACtE,KAAK,YAAY,GAAG,MAAM,CAAC,MAAM,OAAO,YAAY,EAAE,MAAM,CAAC,CAAC;AAE9D,MAAM,MAAM,MAAM,GAAG,YAAY,GAC/B,qBAAqB,GACrB,aAAa,GACb,gBAAgB,GAChB,gBAAgB,GAChB,YAAY,CAAC;AAEf,eAAO,MAAM,MAAM,EAAE,MAOpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC"}
@@ -318,6 +318,26 @@
318
318
  --em-icon-btn-size-width: var(--em-width-500);
319
319
  --em-icon-height: var(--em-height-400);
320
320
  --em-icon-width: var(--em-width-400);
321
+ --em-kpi-kpi-font-font-color: var(--em-foreground-color-default);
322
+ --em-kpi-kpi-font-font-family: var(--em-font-family-default);
323
+ --em-kpi-kpi-font-font-size: var(--em-font-size-xxl);
324
+ --em-kpi-kpi-font-font-weight: var(--em-font-weight-bold);
325
+ --em-kpi-kpi-font-line-height: var(--em-line-height-xl);
326
+ --em-kpi-trend-background-color-negative: var(--em-status-negative-background);
327
+ --em-kpi-trend-background-color-positive: var(--em-status-positive-background);
328
+ --em-kpi-trend-border-radius-default: var(--em-border-radius-150);
329
+ --em-kpi-trend-font-font-family: var(--em-font-family-default);
330
+ --em-kpi-trend-font-font-size: var(--em-font-size-md);
331
+ --em-kpi-trend-font-font-weight: var(--em-font-weight-medium);
332
+ --em-kpi-trend-font-line-height: var(--em-line-height-md);
333
+ --em-kpi-trend-icon-color-negative: var(--em-status-negative-foreground);
334
+ --em-kpi-trend-icon-color-positive: var(--em-status-positive-foreground);
335
+ --em-kpi-trend-icon-size-height: var(--em-height-400);
336
+ --em-kpi-trend-icon-size-width: var(--em-width-400);
337
+ --em-kpi-trend-label-color-negative: var(--em-status-negative-foreground);
338
+ --em-kpi-trend-label-color-positive: var(--em-status-positive-foreground);
339
+ --em-kpi-trend-padding-default: var(--em-padding-100);
340
+ --em-kpi-trend-size-height: var(--em-height-600);
321
341
  --em-label-background-color-default: var(--em-background-color-neutral);
322
342
  --em-label-border-radius-default: var(--em-border-radius-500);
323
343
  --em-label-label-font-color-default: var(--em-foreground-color-default);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@embeddable.com/remarkable-ui",
3
3
  "author": "embeddable (https://embeddable.com)",
4
- "version": "0.1.27",
4
+ "version": "0.1.29",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "types": "dist/index.d.ts",