@embeddable.com/remarkable-ui 0.1.7 → 0.1.10

package/dist/bars.utils-BNWXOTjn.js

@@ -1,329 +0,0 @@
-import { A as o, B as h, C as T, m as u, D as m, E as $, F as z, L as S, G as R, H as j, I as F, J as H, K as M, j as C, M as K, N, O as P, P as y, Q as _ } from "./component.constants-NgQHE7x7.js";
-import { useRef as E } from "react";
-import { g as v, a as b, r as V, b as W } from "./object.utils-fwmkLUFj.js";
-import { g as p } from "./formatter.utils-B-lJU39p.js";
-const w = {
-  ...T,
-  scales: {
-    x: {
-      title: {
-        display: !0,
-        color: h("--em-chart-grid-font-color-default"),
-        font: {
-          size: o("--em-chart-grid-font-title-size"),
-          weight: o("--em-chart-grid-font-title-weight"),
-          // TODO: fix family on dedicated ticket
-          // family: getStyle('--em-chart-grid-font-font-family'),
-          lineHeight: `${o("--em-chart-grid-font-line-height")}px`
-        }
-      },
-      ticks: {
-        font: {
-          size: o("--em-chart-grid-font-subtitle-size"),
-          weight: o("--em-chart-grid-font-label-weight"),
-          // TODO: fix family on dedicated ticket
-          // family: getStyle('--em-chart-grid-font-font-family'),
-          lineHeight: `${o("--em-chart-grid-font-line-height")}px`
-        }
-      },
-      grid: {
-        display: !1,
-        color: h("--em-chart-grid-line-color-light"),
-        lineWidth: o("--em-chart-grid-line-width-default")
-      },
-      border: {
-        display: !1
-      }
-    },
-    y: {
-      title: {
-        display: !0,
-        color: h("--em-chart-grid-font-color-default"),
-        font: {
-          size: o("--em-chart-grid-font-title-size"),
-          weight: o("--em-chart-grid-font-title-weight"),
-          // TODO: fix family on dedicated ticket
-          // family: getStyle('--em-chart-grid-font-font-family'),
-          lineHeight: `${o("--em-chart-grid-font-line-height")}px`
-        }
-      },
-      ticks: {
-        font: {
-          size: o("--em-chart-grid-font-subtitle-size"),
-          weight: o("--em-chart-grid-font-label-weight"),
-          // TODO: fix family on dedicated ticket
-          // family: getStyle('--em-chart-grid-font-font-family'),
-          lineHeight: `${o("--em-chart-grid-font-line-height")}px`
-        }
-      },
-      grid: {
-        display: !1,
-        color: h("--em-chart-grid-line-color-light"),
-        lineWidth: o("--em-chart-grid-line-width-default")
-      },
-      border: {
-        display: !1
-      }
-    }
-  }
-}, G = (a) => {
-  var t;
-  return {
-    ...a,
-    datasets: (t = a.datasets) == null ? void 0 : t.map((r, l) => {
-      const e = m[l % m.length], s = {
-        ...r,
-        backgroundColor: e,
-        borderColor: e
-      };
-      return u(s, r);
-    })
-  };
-}, A = (a, t) => t && a.datasetIndex === a.chart.data.datasets.length - 1 ? "auto" : !1, L = (a, t) => {
-  const { datasets: r } = t.chart.data, l = t.dataIndex, e = r.reduce((s, n) => {
-    const i = n.data[l];
-    return s + (i || 0);
-  }, 0);
-  return e > 0 ? e : "";
-}, J = (a) => u(w, {
-  indexAxis: "x",
-  plugins: {
-    datalabels: {
-      labels: {
-        total: {
-          anchor: (t) => t.dataset.data[t.dataIndex] >= 0 ? "end" : "start",
-          align: (t) => t.dataset.data[t.dataIndex] >= 0 ? "top" : "bottom",
-          display: (t) => A(t, a.showTotalLabels),
-          formatter: L
-        },
-        value: {
-          anchor: (t) => a.stacked ? "center" : t.dataset.data[t.dataIndex] >= 0 ? "end" : "start",
-          align: (t) => a.stacked ? "center" : t.dataset.data[t.dataIndex] >= 0 ? "top" : "bottom"
-        }
-      }
-    }
-  },
-  scales: {
-    y: {
-      stacked: a.stacked,
-      grid: { display: !0 },
-      ticks: {
-        color: h("--em-chart-grid-font-color-muted")
-        // ...(config.stacked === 'percentage' && {
-        //   callback: (value: number | string) => value + '%',
-        // }),
-      },
-      min: a.yAxisRangeMin,
-      // max: config.stacked === 'percentage' ? 100 : config.yAxisRangeMax,
-      max: a.yAxisRangeMax,
-      type: a.showLogarithmicScale ? "logarithmic" : "linear",
-      title: {
-        text: a.yAxisLabel ?? ""
-      }
-    },
-    x: {
-      stacked: a.stacked,
-      ticks: {
-        color: h("--em-chart-grid-font-color-default")
-      },
-      reverse: a.reverseXAxis,
-      title: {
-        text: a.xAxisLabel ?? ""
-      }
-    }
-  }
-}), Q = (a) => u(w, {
-  indexAxis: "y",
-  plugins: {
-    datalabels: {
-      labels: {
-        total: {
-          anchor: (t) => t.dataset.data[t.dataIndex] >= 0 ? "end" : "start",
-          align: (t) => t.dataset.data[t.dataIndex] >= 0 ? "right" : "left",
-          display: (t) => A(t, a.showTotalLabels),
-          formatter: L
-        },
-        value: {
-          anchor: (t) => a.stacked ? "center" : t.dataset.data[t.dataIndex] >= 0 ? "end" : "start",
-          align: (t) => a.stacked ? "center" : t.dataset.data[t.dataIndex] >= 0 ? "right" : "left"
-        }
-      }
-    }
-  },
-  scales: {
-    x: {
-      stacked: a.stacked,
-      grid: { display: !0 },
-      ticks: {
-        color: h("--em-chart-grid-font-color-muted")
-        // ...(config.stacked === 'percentage' && {
-        //   callback: (value: number | string) => value + '%',
-        // }),
-      },
-      min: a.xAxisRangeMin,
-      // max: config.stacked === 'percentage' ? 100 : config.xAxisRangeMax,
-      max: a.xAxisRangeMax,
-      type: a.showLogarithmicScale ? "logarithmic" : "linear",
-      title: {
-        text: a.xAxisLabel ?? ""
-      }
-    },
-    y: {
-      stacked: a.stacked,
-      ticks: {
-        color: h("--em-chart-grid-font-color-default")
-      },
-      reverse: a.reverseYAxis,
-      title: {
-        text: a.yAxisLabel ?? ""
-      }
-    }
-  }
-}), X = (a) => {
-  const {
-    horizontal: t = !1,
-    showLegend: r = !1,
-    showTooltips: l = !0,
-    showValueLabels: e = !1,
-    showTotalLabels: s = !1
-  } = a, i = (t ? Q : J)(a);
-  return u(i, {
-    layout: {
-      padding: {
-        // Hack: dataLabels can get cut off if they are at the edge of the chart
-        top: !t && (e || s) ? 30 : 0,
-        right: t && (e || s) ? 30 : 0
-      }
-    },
-    elements: {
-      bar: {
-        borderRadius: o("--em-chart-style-border-radius-default")
-        // stacked === 'percentage' ? 0 : getStyleNumber('--em-chart-style-border-radius-default'),
-      }
-    },
-    plugins: {
-      legend: { display: r },
-      datalabels: {
-        display: (c) => e && c.dataset.data[c.dataIndex] !== 0 ? "auto" : !1
-      },
-      tooltip: {
-        enabled: l
-      }
-    }
-  });
-};
-$.register(z, S, R, j, F, H, M);
-const tt = ({ data: a, onSegmentClick: t, options: r = {}, ...l }) => {
-  const e = E(null), s = u(X(l), r), n = (i) => {
-    const c = P(i, e);
-    t == null || t(c);
-  };
-  return /* @__PURE__ */ C.jsx("div", { className: K.chartContainer, children: /* @__PURE__ */ C.jsx(
-    N,
-    {
-      ref: e,
-      data: G(a),
-      options: s,
-      onClick: n
-    }
-  ) });
-}, at = (a, t) => {
-  const r = p(t), { data: l = [], dimension: e, groupDimension: s, measure: n } = a, i = [...new Set(l.map((d) => d[e.name]).filter(Boolean))].sort(), c = [...new Set(l.map((d) => d[s.name]))], g = v(t), O = c.map((d, f) => {
-    const B = b(
-      `${g}.charts.backgroundColors`,
-      d,
-      t.charts.backgroundColors ?? m,
-      f
-    ), I = b(
-      `${g}.charts.borderColors`,
-      d,
-      t.charts.borderColors ?? m,
-      f
-    );
-    return {
-      label: r.data(s, d),
-      backgroundColor: B,
-      borderColor: I,
-      data: i.map((D) => {
-        const x = l.find(
-          (k) => k[s.name] === d && k[e.name] === D
-        );
-        return x ? Number(x[n.name]) : 0;
-      })
-    };
-  });
-  return {
-    labels: i.map((d) => r.data(e, d)),
-    datasets: O
-  };
-}, et = (a, t = V) => {
-  const r = p(t);
-  if (!a.data)
-    return {
-      labels: [],
-      datasets: [{ data: [] }]
-    };
-  const l = v(t), e = W(a.data, a.dimension, a.measures, a.maxItems);
-  return {
-    labels: e.map((s) => {
-      const n = s[a.dimension.name], i = r.data(a.dimension, n);
-      return n === i ? _.t(n) : i;
-    }),
-    datasets: a.measures.map((s, n) => {
-      const i = b(
-        `${l}.charts.backgroundColors`,
-        s.name,
-        t.charts.backgroundColors ?? y,
-        n
-      ), c = b(
-        `${l}.charts.borderColors`,
-        s.name,
-        t.charts.borderColors ?? y,
-        n
-      );
-      return {
-        label: r.dimensionOrMeasureTitle(s),
-        data: e.map((g) => g[s.name]),
-        backgroundColor: i,
-        borderColor: c
-      };
-    })
-  };
-}, rt = (a, t, r = !1) => {
-  const l = p(a);
-  return {
-    plugins: {
-      tooltip: {
-        callbacks: {
-          label(e) {
-            const s = e.raw;
-            return `${e.dataset.label || ""}: ${l.data(t, s)}`;
-          }
-        }
-      }
-    },
-    scales: {
-      x: {
-        ticks: {
-          ...r && {
-            callback: (e) => l.data(t, e)
-          }
-        }
-      },
-      y: {
-        ticks: {
-          ...!r && {
-            callback: (e) => l.data(t, e)
-          }
-        }
-      }
-    }
-  };
-};
-export {
-  tt as B,
-  rt as a,
-  et as b,
-  at as g
-};
-//# sourceMappingURL=bars.utils-BNWXOTjn.js.map

package/dist/bars.utils-BNWXOTjn.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bars.utils-BNWXOTjn.js","sources":["../src/remarkable-ui/charts/bars/bars.constants.ts","../src/remarkable-ui/charts/bars/bars.utils.ts","../src/remarkable-ui/charts/bars/BarChart.tsx","../src/remarkable-pro/components/charts/bars/bars.utils.ts"],"sourcesContent":["import { ChartOptions } from 'chart.js';\nimport { getStyle, getStyleNumber } from '../../styles/styles.utils';\nimport { chartjsOptions } from '../chartjs.constants';\n\nexport const defaultBarChartOptions: Partial<ChartOptions<'bar'>> = {\n  ...chartjsOptions,\n  scales: {\n    x: {\n      title: {\n        display: true,\n        color: getStyle('--em-chart-grid-font-color-default'),\n        font: {\n          size: getStyleNumber('--em-chart-grid-font-title-size'),\n          weight: getStyleNumber('--em-chart-grid-font-title-weight'),\n          // TODO: fix family on dedicated ticket\n          // family: getStyle('--em-chart-grid-font-font-family'),\n          lineHeight: `${getStyleNumber('--em-chart-grid-font-line-height')}px`,\n        },\n      },\n      ticks: {\n        font: {\n          size: getStyleNumber('--em-chart-grid-font-subtitle-size'),\n          weight: getStyleNumber('--em-chart-grid-font-label-weight'),\n          // TODO: fix family on dedicated ticket\n          // family: getStyle('--em-chart-grid-font-font-family'),\n          lineHeight: `${getStyleNumber('--em-chart-grid-font-line-height')}px`,\n        },\n      },\n      grid: {\n        display: false,\n        color: getStyle('--em-chart-grid-line-color-light'),\n        lineWidth: getStyleNumber('--em-chart-grid-line-width-default'),\n      },\n      border: {\n        display: false,\n      },\n    },\n    y: {\n      title: {\n        display: true,\n        color: getStyle('--em-chart-grid-font-color-default'),\n        font: {\n          size: getStyleNumber('--em-chart-grid-font-title-size'),\n          weight: getStyleNumber('--em-chart-grid-font-title-weight'),\n          // TODO: fix family on dedicated ticket\n          // family: getStyle('--em-chart-grid-font-font-family'),\n          lineHeight: `${getStyleNumber('--em-chart-grid-font-line-height')}px`,\n        },\n      },\n      ticks: {\n        font: {\n          size: getStyleNumber('--em-chart-grid-font-subtitle-size'),\n          weight: getStyleNumber('--em-chart-grid-font-label-weight'),\n          // TODO: fix family on dedicated ticket\n          // family: getStyle('--em-chart-grid-font-font-family'),\n          lineHeight: `${getStyleNumber('--em-chart-grid-font-line-height')}px`,\n        },\n      },\n      grid: {\n        display: false,\n        color: getStyle('--em-chart-grid-line-color-light'),\n        lineWidth: getStyleNumber('--em-chart-grid-line-width-default'),\n      },\n      border: {\n        display: false,\n      },\n    },\n  },\n};\n","import { ChartData, ChartOptions } from 'chart.js';\nimport { chartContrastColors } from '../charts.constants';\nimport { getStyle, getStyleNumber } from '../../styles/styles.utils';\nimport { mergician } from 'mergician';\nimport { BarChartConfigurationProps, BarChartHorizontalConfigurationProps } from './bars.types';\nimport { defaultBarChartOptions } from './bars.constants';\nimport { Context } from 'chartjs-plugin-datalabels';\n\nexport const getBarChartData = (data: ChartData<'bar'>): ChartData<'bar'> => {\n  return {\n    ...data,\n    datasets: data.datasets?.map((dataset, index) => {\n      const colors = chartContrastColors[index % chartContrastColors.length];\n      const defaultDataset = {\n        ...dataset,\n        backgroundColor: colors,\n        borderColor: colors,\n      };\n\n      return mergician(defaultDataset, dataset) as typeof dataset;\n    }),\n  };\n};\n\nconst getDatalabelTotalDisplay = (context: Context, showTotalLabels: boolean | undefined) =>\n  showTotalLabels && context.datasetIndex === context.chart.data.datasets.length - 1\n    ? 'auto'\n    : false;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst getDatalabelTotalFormatter = (_value: any, context: Context) => {\n  const { datasets } = context.chart.data;\n  const i = context.dataIndex;\n\n  const total = datasets.reduce((sum, ds) => {\n    const val = ds.data[i] as number;\n    return sum + (val || 0);\n  }, 0);\n\n  return total > 0 ? total : '';\n};\n\nconst getBarVerticalChartOptions = (\n  config: BarChartConfigurationProps,\n): Partial<ChartOptions<'bar'>> => {\n  return mergician(defaultBarChartOptions, {\n    indexAxis: 'x',\n    plugins: {\n      datalabels: {\n        labels: {\n          total: {\n            anchor: (context) => {\n              const value = context.dataset.data[context.dataIndex] as number;\n              return value >= 0 ? 'end' : 'start';\n            },\n            align: (context) => {\n              const value = context.dataset.data[context.dataIndex] as number;\n              return value >= 0 ? 'top' : 'bottom';\n            },\n            display: (context) => getDatalabelTotalDisplay(context, config.showTotalLabels),\n            formatter: getDatalabelTotalFormatter,\n          },\n          value: {\n            anchor: (context) => {\n              if (config.stacked) {\n                return 'center';\n              }\n              const value = context.dataset.data[context.dataIndex] as number;\n              return value >= 0 ? 'end' : 'start';\n            },\n            align: (context) => {\n              if (config.stacked) {\n                return 'center';\n              }\n              const value = context.dataset.data[context.dataIndex] as number;\n              return value >= 0 ? 'top' : 'bottom';\n            },\n          },\n        },\n      },\n    },\n    scales: {\n      y: {\n        stacked: config.stacked,\n        grid: { display: true },\n        ticks: {\n          color: getStyle('--em-chart-grid-font-color-muted'),\n          // ...(config.stacked === 'percentage' && {\n          //   callback: (value: number | string) => value + '%',\n          // }),\n        },\n        min: config.yAxisRangeMin,\n        // max: config.stacked === 'percentage' ? 100 : config.yAxisRangeMax,\n        max: config.yAxisRangeMax,\n        type: config.showLogarithmicScale ? 'logarithmic' : 'linear',\n        title: {\n          text: config.yAxisLabel ?? '',\n        },\n      },\n      x: {\n        stacked: config.stacked,\n        ticks: {\n          color: getStyle('--em-chart-grid-font-color-default'),\n        },\n        reverse: config.reverseXAxis,\n        title: {\n          text: config.xAxisLabel ?? '',\n        },\n      },\n    },\n  } as Partial<ChartOptions<'bar'>>);\n};\n\nconst getBarHorizontalChartOptions = (\n  config: BarChartHorizontalConfigurationProps,\n): Partial<ChartOptions<'bar'>> => {\n  return mergician(defaultBarChartOptions, {\n    indexAxis: 'y',\n    plugins: {\n      datalabels: {\n        labels: {\n          total: {\n            anchor: (context) => {\n              const value = context.dataset.data[context.dataIndex] as number;\n              return value >= 0 ? 'end' : 'start';\n            },\n            align: (context) => {\n              const value = context.dataset.data[context.dataIndex] as number;\n              return value >= 0 ? 'right' : 'left';\n            },\n            display: (context) => getDatalabelTotalDisplay(context, config.showTotalLabels),\n            formatter: getDatalabelTotalFormatter,\n          },\n          value: {\n            anchor: (context) => {\n              if (config.stacked) {\n                return 'center';\n              }\n              const value = context.dataset.data[context.dataIndex] as number;\n              return value >= 0 ? 'end' : 'start';\n            },\n            align: (context) => {\n              if (config.stacked) {\n                return 'center';\n              }\n              const value = context.dataset.data[context.dataIndex] as number;\n              return value >= 0 ? 'right' : 'left';\n            },\n          },\n        },\n      },\n    },\n    scales: {\n      x: {\n        stacked: config.stacked,\n        grid: { display: true },\n        ticks: {\n          color: getStyle('--em-chart-grid-font-color-muted'),\n          // ...(config.stacked === 'percentage' && {\n          //   callback: (value: number | string) => value + '%',\n          // }),\n        },\n        min: config.xAxisRangeMin,\n        // max: config.stacked === 'percentage' ? 100 : config.xAxisRangeMax,\n        max: config.xAxisRangeMax,\n        type: config.showLogarithmicScale ? 'logarithmic' : 'linear',\n        title: {\n          text: config.xAxisLabel ?? '',\n        },\n      },\n      y: {\n        stacked: config.stacked,\n        ticks: {\n          color: getStyle('--em-chart-grid-font-color-default'),\n        },\n        reverse: config.reverseYAxis,\n        title: {\n          text: config.yAxisLabel ?? '',\n        },\n      },\n    },\n  } as Partial<ChartOptions<'bar'>>);\n};\n\nexport const getBarChartOptions = (\n  props: BarChartConfigurationProps,\n): Partial<ChartOptions<'bar'>> => {\n  const {\n    horizontal = false,\n    showLegend = false,\n    showTooltips = true,\n    showValueLabels = false,\n    showTotalLabels = false,\n  } = props;\n\n  const getOptions = horizontal ? getBarHorizontalChartOptions : getBarVerticalChartOptions;\n  const options = getOptions(props);\n\n  return mergician(options, {\n    layout: {\n      padding: {\n        // Hack: dataLabels can get cut off if they are at the edge of the chart\n        top: !horizontal && (showValueLabels || showTotalLabels) ? 30 : 0,\n        right: horizontal && (showValueLabels || showTotalLabels) ? 30 : 0,\n      },\n    },\n    elements: {\n      bar: {\n        borderRadius: getStyleNumber('--em-chart-style-border-radius-default'),\n        // stacked === 'percentage' ? 0 : getStyleNumber('--em-chart-style-border-radius-default'),\n      },\n    },\n    plugins: {\n      legend: { display: showLegend },\n      datalabels: {\n        display: (context) => {\n          return showValueLabels && context.dataset.data[context.dataIndex] !== 0 ? 'auto' : false;\n        },\n      },\n      tooltip: {\n        enabled: showTooltips,\n      },\n    },\n  } as Partial<ChartOptions<'bar'>>);\n};\n","import { FC, useRef } from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport {\n  Chart as ChartJS,\n  CategoryScale,\n  LinearScale,\n  BarElement,\n  Title,\n  Tooltip,\n  Legend,\n  LogarithmicScale,\n} from 'chart.js';\nimport { BaseBarChartProps } from './bars.types';\nimport { getSegmentIndexClicked } from '../chartjs.utils';\nimport { getBarChartData, getBarChartOptions } from './bars.utils';\nimport styles from '../charts.module.css';\nimport { mergician } from 'mergician';\n\nChartJS.register(CategoryScale, LinearScale, BarElement, LogarithmicScale, Title, Tooltip, Legend);\n\nexport type BarChartProps = BaseBarChartProps;\n\nexport const BarChart: FC<BarChartProps> = ({ data, onSegmentClick, options = {}, ...props }) => {\n  const chartRef = useRef(null);\n\n  const barChartOptions = mergician(getBarChartOptions(props), options);\n\n  const handleSegmentClick = (event: React.MouseEvent<HTMLCanvasElement>) => {\n    const indexClicked = getSegmentIndexClicked(event, chartRef);\n    onSegmentClick?.(indexClicked);\n  };\n\n  return (\n    <div className={styles.chartContainer}>\n      <Bar\n        ref={chartRef}\n        data={getBarChartData(data)}\n        options={barChartOptions}\n        onClick={handleSegmentClick}\n      />\n    </div>\n  );\n};\n","import { DataResponse, Dimension, Measure } from '@embeddable.com/core';\nimport { Theme } from '../../../theme/theme.types';\nimport { remarkableTheme } from '../../../theme/theme.constants';\nimport { ChartData, ChartOptions } from 'chart.js';\nimport { getThemeFormatter } from '../../../theme/formatter/formatter.utils';\nimport { groupTailAsOther } from '../charts.utils';\nimport { i18n } from '../../../theme/i18n/i18n';\nimport { getColor } from '../../../theme/styles/styles.utils';\nimport { chartColors } from '../../../../remarkable-ui';\nimport { getObjectStableKey } from '../../../utils.ts/object.utils';\nimport { chartContrastColors } from '../../../../remarkable-ui/charts/charts.constants';\n\nexport const getBarStackedChartProData = (\n  props: {\n    data: DataResponse['data'];\n    dimension: Dimension;\n    groupDimension: Dimension;\n    measure: Measure;\n  },\n  theme: Theme,\n): ChartData<'bar'> => {\n  const themeFormatter = getThemeFormatter(theme);\n  const { data = [], dimension, groupDimension, measure } = props;\n\n  const axis = [...new Set(data.map((d) => d[dimension.name]).filter(Boolean))].sort();\n\n  const groupBy = [...new Set(data.map((d) => d[groupDimension.name]))];\n\n  const themeKey = getObjectStableKey(theme);\n\n  const datasets = groupBy.map((groupByItem, index) => {\n    const backgroundColor = getColor(\n      `${themeKey}.charts.backgroundColors`,\n      groupByItem,\n      theme.charts.backgroundColors ?? chartContrastColors,\n      index,\n    );\n\n    const borderColor = getColor(\n      `${themeKey}.charts.borderColors`,\n      groupByItem,\n      theme.charts.borderColors ?? chartContrastColors,\n      index,\n    );\n\n    return {\n      label: themeFormatter.data(groupDimension, groupByItem),\n      backgroundColor,\n      borderColor,\n      data: axis.map((axisItem) => {\n        const record = data.find(\n          (d) => d[groupDimension.name] === groupByItem && d[dimension.name] === axisItem,\n        );\n        return record ? Number(record[measure.name]) : 0;\n      }),\n    };\n  });\n\n  return {\n    labels: axis.map((axisItem) => themeFormatter.data(dimension, axisItem)),\n    datasets,\n  };\n};\nexport const getBarChartProData = (\n  props: {\n    data: DataResponse['data'];\n    dimension: Dimension;\n    measures: Measure[];\n    maxItems?: number;\n  },\n  theme: Theme = remarkableTheme,\n): ChartData<'bar'> => {\n  const themeFormatter = getThemeFormatter(theme);\n\n  if (!props.data) {\n    return {\n      labels: [],\n      datasets: [{ data: [] }],\n    };\n  }\n\n  const themeKey = getObjectStableKey(theme);\n  const groupedData = groupTailAsOther(props.data, props.dimension, props.measures, props.maxItems);\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: props.measures.map((measure, index) => {\n      const backgroundColor = getColor(\n        `${themeKey}.charts.backgroundColors`,\n        measure.name,\n        theme.charts.backgroundColors ?? chartColors,\n        index,\n      );\n\n      const borderColor = getColor(\n        `${themeKey}.charts.borderColors`,\n        measure.name,\n        theme.charts.borderColors ?? chartColors,\n        index,\n      );\n\n      return {\n        label: themeFormatter.dimensionOrMeasureTitle(measure),\n        data: groupedData.map((item) => item[measure.name]),\n        backgroundColor,\n        borderColor,\n      };\n    }),\n  };\n};\n\nexport const getBarChartProOptions = (\n  theme: Theme,\n  measure: Measure,\n  horizontal: boolean = false,\n): Partial<ChartOptions<'bar'>> => {\n  const themeFormatter = getThemeFormatter(theme);\n  return {\n    plugins: {\n      tooltip: {\n        callbacks: {\n          label(context) {\n            const raw = context.raw as number;\n            return `${context.dataset.label || ''}: ${themeFormatter.data(measure, raw)}`;\n          },\n        },\n      },\n    },\n    scales: {\n      x: {\n        ticks: {\n          ...(horizontal && {\n            callback: (value) => themeFormatter.data(measure, value),\n          }),\n        },\n      },\n      y: {\n        ticks: {\n          ...(!horizontal && {\n            callback: (value) => themeFormatter.data(measure, value),\n          }),\n        },\n      },\n    },\n  };\n};\n"],"names":["defaultBarChartOptions","chartjsOptions","getStyle","getStyleNumber","getBarChartData","data","_a","dataset","index","colors","chartContrastColors","defaultDataset","mergician","getDatalabelTotalDisplay","context","showTotalLabels","getDatalabelTotalFormatter","_value","datasets","i","total","sum","ds","val","getBarVerticalChartOptions","config","getBarHorizontalChartOptions","getBarChartOptions","props","horizontal","showLegend","showTooltips","showValueLabels","options","ChartJS","CategoryScale","LinearScale","BarElement","LogarithmicScale","Title","Tooltip","Legend","BarChart","onSegmentClick","chartRef","useRef","barChartOptions","handleSegmentClick","event","indexClicked","getSegmentIndexClicked","jsx","styles","Bar","getBarStackedChartProData","theme","themeFormatter","getThemeFormatter","dimension","groupDimension","measure","axis","groupBy","themeKey","getObjectStableKey","groupByItem","backgroundColor","getColor","borderColor","axisItem","record","d","getBarChartProData","remarkableTheme","groupedData","groupTailAsOther","item","value","formattedValue","i18n","chartColors","getBarChartProOptions","raw"],"mappings":"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"}