@embeddable.com/remarkable-ui 0.0.15 → 0.0.17

package/dist/BarChartPro.js

@@ -1,355 +1,118 @@
-import { g as i, a as n, c as j, m as c, b as g, C as D, d as P, L as T, B as H, e as I, p as F, f as _, h as E, j as m, s as X, i as N, k as W, l as q, n as G, r as Y, o as J, q as K, t as Q, u as U, v as Z, w as ee, x as te, y as ae, z as re, A as se, D as ie, E as oe, F as le, G as ne, H as de, V as ce, I as he } from "./component.constants-gz--XNdD.js";
-import { useTheme as ge, defineComponent as me } from "@embeddable.com/react";
-import { r as ue, g as xe, a as C, C as pe } from "./styles.utils-CCN3caTf.js";
-import { useRef as be } from "react";
-import { g as y } from "./formatter.utils-rh4NsBc4.js";
-const A = {
-  ...j,
-  scales: {
-    x: {
-      title: {
-        display: !0,
-        color: n("--em-chart-grid-font-color-default"),
-        font: {
-          size: i("--em-chart-grid-font-title-size"),
-          weight: i("--em-chart-grid-font-title-weight"),
-          // TODO: fix family on dedicated ticket
-          // family: getStyle('--em-chart-grid-font-font-family'),
-          lineHeight: `${i("--em-chart-grid-font-line-height")}px`
-        }
-      },
-      ticks: {
-        font: {
-          size: i("--em-chart-grid-font-subtitle-size"),
-          weight: i("--em-chart-grid-font-label-weight"),
-          // TODO: fix family on dedicated ticket
-          // family: getStyle('--em-chart-grid-font-font-family'),
-          lineHeight: `${i("--em-chart-grid-font-line-height")}px`
-        }
-      },
-      grid: {
-        display: !1,
-        color: n("--em-chart-grid-line-color-light"),
-        lineWidth: i("--em-chart-grid-line-width-default")
-      },
-      border: {
-        display: !1
-      }
-    },
-    y: {
-      title: {
-        display: !0,
-        color: n("--em-chart-grid-font-color-default"),
-        font: {
-          size: i("--em-chart-grid-font-title-size"),
-          weight: i("--em-chart-grid-font-title-weight"),
-          // TODO: fix family on dedicated ticket
-          // family: getStyle('--em-chart-grid-font-font-family'),
-          lineHeight: `${i("--em-chart-grid-font-line-height")}px`
-        }
-      },
-      ticks: {
-        font: {
-          size: i("--em-chart-grid-font-subtitle-size"),
-          weight: i("--em-chart-grid-font-label-weight"),
-          // TODO: fix family on dedicated ticket
-          // family: getStyle('--em-chart-grid-font-font-family'),
-          lineHeight: `${i("--em-chart-grid-font-line-height")}px`
-        }
-      },
-      grid: {
-        display: !1,
-        color: n("--em-chart-grid-line-color-light"),
-        lineWidth: i("--em-chart-grid-line-width-default")
-      },
-      border: {
-        display: !1
-      }
-    }
-  }
-}, fe = (e) => {
-  var t;
-  return {
-    ...e,
-    datasets: (t = e.datasets) == null ? void 0 : t.map((o, r) => {
-      const a = g[r % g.length], s = {
-        ...o,
-        backgroundColor: a,
-        borderColor: a,
-        borderRadius: i("--em-chart-style-border-radius-default")
-      };
-      return c(s, o);
-    })
-  };
-}, Ce = (e) => c(A, {
-  indexAxis: "x",
-  scales: {
-    y: {
-      grid: { display: !0 },
-      ticks: {
-        color: n("--em-chart-grid-font-color-muted")
-      },
-      min: e.yAxisRangeMin,
-      max: e.yAxisRangeMax,
-      type: e.showLogarithmicScale ? "logarithmic" : "linear",
-      title: {
-        text: e.yAxisLabel ?? ""
-      }
-    },
-    x: {
-      ticks: {
-        color: n("--em-chart-grid-font-color-default")
-      },
-      reverse: e.reverseXAxis,
-      title: {
-        text: e.xAxisLabel ?? ""
-      }
-    }
-  }
-}), ye = (e) => c(A, {
-  indexAxis: "y",
-  scales: {
-    x: {
-      grid: { display: !0 },
-      ticks: {
-        color: n("--em-chart-grid-font-color-muted")
-      },
-      min: e.xAxisRangeMin,
-      max: e.xAxisRangeMax,
-      type: e.showLogarithmicScale ? "logarithmic" : "linear",
-      title: {
-        text: e.xAxisLabel ?? ""
-      }
-    },
-    y: {
-      ticks: {
-        color: n("--em-chart-grid-font-color-default")
-      },
-      reverse: e.reverseYAxis,
-      title: {
-        text: e.yAxisLabel ?? ""
-      }
-    }
-  }
-}), Ae = (e) => {
+import { i as M, r as S, m as V, j as d, d as P, a as R, b as j, t as I, c as D, s as T, e as X, f as E, g as F, x as O, y as _, h as q, k as z, l as G, n as H, V as J, o as K } from "./component.constants-DKWzvCnZ.js";
+import { useTheme as N, defineComponent as Q } from "@embeddable.com/react";
+import { C as U } from "./object.utils-CGQBO06b.js";
+import { g as W, a as Y, B as Z } from "./bars.utils-Dag5gg_Y.js";
+const $ = (e) => {
+  var o, i;
+  const a = N();
+  M(a);
   const {
-    horizontal: t = !1,
-    showLegend: o = !1,
-    showTooltips: r = !0,
-    showValueLabels: a = !1
-  } = e, l = (t ? ye : Ce)(e);
-  return c(l, {
-    layout: {
-      padding: {
-        // Hack: dataLabels can get cut off if they are at the edge of the chart
-        top: !t && a ? 30 : 0,
-        right: t && a ? 30 : 0
-      }
-    },
-    plugins: {
-      legend: { display: o },
-      datalabels: {
-        display: a,
-        anchor: "end",
-        align: "end"
-      },
-      tooltip: {
-        enabled: r
-      }
-    }
-  });
-};
-D.register(P, T, H, I, F, _, E);
-const we = ({ data: e, onSegmentClick: t, options: o = {}, ...r }) => {
-  const a = be(null), s = c(Ae(r), o), l = (h) => {
-    const d = W(h, a);
-    t == null || t(d);
-  };
-  return /* @__PURE__ */ m.jsx("div", { className: X.chartContainer, children: /* @__PURE__ */ m.jsx(
-    N,
-    {
-      ref: a,
-      data: fe(e),
-      options: s,
-      onClick: l
-    }
-  ) });
-}, ke = (e, t = ue) => {
-  const o = y(t);
-  if (!e.data)
-    return {
-      labels: [],
-      datasets: [{ data: [] }]
-    };
-  const r = xe(
-    e.data,
-    e.dimension,
-    e.measures[0],
-    e.xAxisMaxItems
-  );
-  return {
-    labels: r.map((a) => {
-      const s = a[e.dimension.name], l = o.data(e.dimension, s);
-      return s === l ? q.t(s) : l;
-    }),
-    datasets: e.measures.map((a, s) => {
-      const l = C(
-        `${t.id}.charts.backgroundColors`,
-        a.name,
-        t.charts.backgroundColors ?? g,
-        s
-      ), h = C(
-        `${t.id}.charts.borderColors`,
-        a.name,
-        t.charts.borderColors ?? g,
-        s
-      );
-      return {
-        label: a.title,
-        data: r.map((d) => d[a.name]),
-        backgroundColor: l,
-        borderColor: h,
-        datalabels: {
-          color: "black",
-          anchor: "end",
-          align: "top",
-          formatter: (d) => o.data(a, d)
-        }
-      };
-    })
-  };
-}, Le = (e, t) => {
-  const o = y(e);
-  return {
-    plugins: {
-      tooltip: {
-        callbacks: {
-          label(r) {
-            const a = r.raw;
-            return `${r.dataset.label || ""}: ${o.data(t, a)}`;
-          }
-        }
-      }
-    },
-    scales: {
-      y: {
-        ticks: {
-          callback: (r) => o.data(t, r)
-        }
-      }
-    }
-  };
-}, Be = (e) => {
-  var u, x;
-  const t = ge();
-  G(t);
-  const {
-    description: o,
-    dimension: r,
-    xAxisMaxItems: a,
-    measures: s,
-    results: l,
-    showLegend: h,
-    showTooltips: d,
-    showValueLabels: w,
-    showLogarithmicScale: k,
-    xAxisLabel: L,
-    yAxisLabel: B,
-    reverseXAxis: v,
-    yAxisRangeMin: M,
-    yAxisRangeMax: S,
-    title: R,
-    onSegmentClick: z
-  } = Y(e), V = ke(
-    { data: l.data, dimension: r, measures: s, xAxisMaxItems: a },
-    t
-  ), O = c(
-    Le(t, s[0]),
+    description: c,
+    dimension: t,
+    measures: r,
+    results: s,
+    title: h,
+    xAxisLabel: x,
+    xAxisMaxItems: g,
+    yAxisLabel: u,
+    yAxisRangeMin: p,
+    yAxisRangeMax: C,
+    showLegend: b,
+    showLogarithmicScale: A,
+    showTooltips: L,
+    showValueLabels: y,
+    reverseXAxis: B,
+    onSegmentClick: f
+  } = S(e), k = W(
+    { data: s.data, dimension: t, measures: r, maxItems: g },
+    a
+  ), v = V(
+    Y(a, r[0]),
     // Format Y axis based on first measure
-    ((x = (u = t.charts) == null ? void 0 : u.barChartPro) == null ? void 0 : x.options) || {}
-  ), $ = (p) => {
-    var b, f;
-    z({
-      dimensionValue: p === void 0 || (f = (b = l.data) == null ? void 0 : b[p]) == null ? void 0 : f[r.name]
+    ((i = (o = a.charts) == null ? void 0 : o.barChartPro) == null ? void 0 : i.options) || {}
+  ), w = (n) => {
+    var l, m;
+    f({
+      dimensionValue: n === void 0 || (m = (l = s.data) == null ? void 0 : l[n]) == null ? void 0 : m[t.name]
     });
   };
-  return /* @__PURE__ */ m.jsx(
-    pe,
+  return /* @__PURE__ */ d.jsx(
+    U,
     {
-      data: l,
-      dimensionsAndMeasures: [r, ...s],
-      errorMessage: l.error,
-      subtitle: o,
-      title: R,
-      children: /* @__PURE__ */ m.jsx(
-        we,
+      data: s,
+      dimensionsAndMeasures: [t, ...r],
+      errorMessage: s.error,
+      subtitle: c,
+      title: h,
+      children: /* @__PURE__ */ d.jsx(
+        Z,
         {
-          data: V,
-          onSegmentClick: $,
-          showLegend: h,
-          showTooltips: d,
-          showValueLabels: w,
-          showLogarithmicScale: k,
-          xAxisLabel: L,
-          yAxisLabel: B,
-          reverseXAxis: v,
-          yAxisRangeMin: M,
-          yAxisRangeMax: S,
-          options: O
+          data: k,
+          onSegmentClick: w,
+          showLegend: b,
+          showTooltips: L,
+          showValueLabels: y,
+          showLogarithmicScale: A,
+          xAxisLabel: x,
+          yAxisLabel: u,
+          reverseXAxis: B,
+          yAxisRangeMin: p,
+          yAxisRangeMax: C,
+          options: v
         }
       )
     }
   );
-}, ve = {
+}, ee = {
   name: "BarChartPro",
   label: "Bar Chart",
   category: "Bar Charts",
   inputs: [
-    J,
-    K,
-    Q,
-    U,
-    Z,
-    ee,
-    te,
-    ae,
-    re,
-    se,
-    ie,
-    oe,
-    le,
-    ne,
-    de
+    P,
+    R,
+    j,
+    I,
+    D,
+    T,
+    X,
+    E,
+    F,
+    O,
+    _,
+    q,
+    z,
+    G,
+    H
   ],
   events: [
     {
       name: "onSegmentClick",
-      label: "A segment is clicked",
+      label: "A bar is clicked",
       properties: [
         {
           name: "dimensionValue",
-          label: "Clicked Dimension",
+          label: "Clicked Dimension value",
           type: "string"
         }
       ]
     }
   ]
-}, Oe = me(Be, ve, {
+}, oe = Q($, ee, {
   props: (e) => ({
     ...e,
-    results: he({
+    results: K({
       from: e.dataset,
       select: [...e.measures, e.dimension]
     })
   }),
   events: {
     onSegmentClick: (e) => ({
-      dimensionValue: e.dimensionValue || ce.noFilter()
+      dimensionValue: e.dimensionValue || J.noFilter()
     })
   }
 });
 export {
-  Oe as default,
-  ve as meta
+  oe as default,
+  ee as meta
 };
 //# sourceMappingURL=BarChartPro.js.map

package/dist/BarChartPro.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChartPro.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","../src/remarkable-pro/components/charts/bars/BarChartPro/index.tsx","../src/remarkable-pro/components/charts/bars/BarChartPro/BarChartPro.emb.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 { chartColors } 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';\n\nexport const getBarChartData = (data: ChartData<'bar'>): ChartData<'bar'> => {\n  return {\n    ...data,\n    datasets: data.datasets?.map((dataset, index) => {\n      const colors = chartColors[index % chartColors.length];\n      const defaultDataset = {\n        ...dataset,\n        backgroundColor: colors,\n        borderColor: colors,\n        borderRadius: getStyleNumber('--em-chart-style-border-radius-default'),\n      };\n\n      return mergician(defaultDataset, dataset) as typeof dataset;\n    }),\n  };\n};\n\nconst getBarVerticalChartOptions = (\n  config: BarChartConfigurationProps,\n): Partial<ChartOptions<'bar'>> => {\n  return mergician(defaultBarChartOptions, {\n    indexAxis: 'x',\n    scales: {\n      y: {\n        grid: { display: true },\n        ticks: {\n          color: getStyle('--em-chart-grid-font-color-muted'),\n        },\n        min: config.yAxisRangeMin,\n        max: config.yAxisRangeMax,\n        type: config.showLogarithmicScale ? 'logarithmic' : 'linear',\n        title: {\n          text: config.yAxisLabel ?? '',\n        },\n      },\n      x: {\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  });\n};\n\nconst getBarHorizontalChartOptions = (\n  config: BarChartHorizontalConfigurationProps,\n): Partial<ChartOptions<'bar'>> => {\n  return mergician(defaultBarChartOptions, {\n    indexAxis: 'y',\n    scales: {\n      x: {\n        grid: { display: true },\n        ticks: {\n          color: getStyle('--em-chart-grid-font-color-muted'),\n        },\n        min: config.xAxisRangeMin,\n        max: config.xAxisRangeMax,\n        type: config.showLogarithmicScale ? 'logarithmic' : 'linear',\n        title: {\n          text: config.xAxisLabel ?? '',\n        },\n      },\n      y: {\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  });\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  } = 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 ? 30 : 0,\n        right: horizontal && showValueLabels ? 30 : 0,\n      },\n    },\n    plugins: {\n      legend: { display: showLegend },\n      datalabels: {\n        display: showValueLabels,\n        anchor: 'end',\n        align: 'end',\n      },\n      tooltip: {\n        enabled: showTooltips,\n      },\n    },\n  });\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';\n\nexport const getBarChartProData = (\n  props: {\n    data: DataResponse['data'];\n    dimension: Dimension;\n    measures: Measure[];\n    xAxisMaxItems?: 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 groupedData = groupTailAsOther(\n    props.data,\n    props.dimension,\n    props.measures[0]!,\n    props.xAxisMaxItems,\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: props.measures.map((measure, index) => {\n      const backgroundColor = getColor(\n        `${theme.id}.charts.backgroundColors`,\n        measure.name,\n        theme.charts.backgroundColors ?? chartColors,\n        index,\n      );\n\n      const borderColor = getColor(\n        `${theme.id}.charts.borderColors`,\n        measure.name,\n        theme.charts.borderColors ?? chartColors,\n        index,\n      );\n\n      return {\n        label: measure.title,\n        data: groupedData.map((item) => item[measure.name]),\n        backgroundColor,\n        borderColor,\n        datalabels: {\n          color: 'black',\n          anchor: 'end',\n          align: 'top',\n          formatter: (value) => themeFormatter.data(measure, value),\n        },\n      };\n    }),\n  };\n};\n\nexport const getBarChartProOptions = (\n  theme: Theme,\n  measure: Measure,\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      y: {\n        ticks: {\n          callback: (value) => themeFormatter.data(measure, value),\n        },\n      },\n    },\n  };\n};\n","import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { ChartCard } from '../../shared/ChartCard/ChartCard';\nimport { resolveI18nProps } from '../../../component.utils';\nimport { BarChart } from '../../../../../remarkable-ui/charts/bars/BarChart';\nimport { getBarChartProData, getBarChartProOptions } from '../bars.utils';\nimport { mergician } from 'mergician';\nimport { DataResponse, Dimension, Measure } from '@embeddable.com/core';\n\ntype BarChartProProps = {\n  description: string;\n  dimension: Dimension;\n  xAxisMaxItems: number;\n  measures: Measure[];\n  results: DataResponse;\n  showLegend: boolean;\n  showTooltips: boolean;\n  showValueLabels: boolean;\n  showLogarithmicScale: boolean;\n  xAxisLabel: string;\n  yAxisLabel: string;\n  reverseXAxis: boolean;\n  title: string;\n  yAxisRangeMin?: number;\n  yAxisRangeMax?: number;\n  onSegmentClick: (args: { dimensionValue: string | null }) => void;\n};\n\nconst BarChartPro = (props: BarChartProProps) => {\n  const theme = useTheme() as Theme;\n  i18nSetup(theme);\n\n  const {\n    description,\n    dimension,\n    xAxisMaxItems,\n    measures,\n    results,\n    showLegend,\n    showTooltips,\n    showValueLabels,\n    showLogarithmicScale,\n    xAxisLabel,\n    yAxisLabel,\n    reverseXAxis,\n    yAxisRangeMin,\n    yAxisRangeMax,\n    title,\n    onSegmentClick,\n  } = resolveI18nProps(props);\n\n  const data = getBarChartProData(\n    { data: results.data, dimension, measures, xAxisMaxItems },\n    theme,\n  );\n\n  const options = mergician(\n    getBarChartProOptions(theme, measures[0]!), // Format Y axis based on first measure\n    theme.charts?.barChartPro?.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, ...measures]}\n      errorMessage={results.error}\n      subtitle={description}\n      title={title}\n    >\n      <BarChart\n        data={data}\n        onSegmentClick={handleSegmentClick}\n        showLegend={showLegend}\n        showTooltips={showTooltips}\n        showValueLabels={showValueLabels}\n        showLogarithmicScale={showLogarithmicScale}\n        xAxisLabel={xAxisLabel}\n        yAxisLabel={yAxisLabel}\n        reverseXAxis={reverseXAxis}\n        yAxisRangeMin={yAxisRangeMin}\n        yAxisRangeMax={yAxisRangeMax}\n        options={options}\n      />\n    </ChartCard>\n  );\n};\n\nexport default BarChartPro;\n","import { Value, loadData } from '@embeddable.com/core';\nimport { defineComponent, EmbeddedComponentMeta, Inputs } from '@embeddable.com/react';\nimport BarChartPro from './index';\nimport {\n  dataset,\n  description,\n  dimension,\n  showLegend,\n  showTooltips,\n  showValueLabels,\n  title,\n  measures,\n  showLogarithmicScale,\n  xAxisLabel,\n  yAxisLabel,\n  reverseXAxis,\n  yAxisRangeMin,\n  yAxisRangeMax,\n  xAxisMaxItems,\n} from '../../../component.constants';\n\nexport const meta = {\n  name: 'BarChartPro',\n  label: 'Bar Chart',\n  category: 'Bar Charts',\n  inputs: [\n    dataset,\n    measures,\n    dimension,\n    title,\n    description,\n    showLegend,\n    showTooltips,\n    showValueLabels,\n    showLogarithmicScale,\n    xAxisLabel,\n    yAxisLabel,\n    reverseXAxis,\n    yAxisRangeMin,\n    yAxisRangeMax,\n    xAxisMaxItems,\n  ],\n  events: [\n    {\n      name: 'onSegmentClick',\n      label: 'A segment is clicked',\n      properties: [\n        {\n          name: 'dimensionValue',\n          label: 'Clicked Dimension',\n          type: 'string',\n        },\n      ],\n    },\n  ],\n} as const satisfies EmbeddedComponentMeta;\n\nexport default defineComponent(BarChartPro, meta, {\n  props: (inputs: Inputs<typeof meta>) => {\n    return {\n      ...inputs,\n      results: loadData({\n        from: inputs.dataset,\n        select: [...inputs.measures, inputs.dimension],\n      }),\n    };\n  },\n  events: {\n    onSegmentClick: (value) => {\n      return {\n        dimensionValue: value.dimensionValue || Value.noFilter(),\n      };\n    },\n  },\n});\n"],"names":["defaultBarChartOptions","chartjsOptions","getStyle","getStyleNumber","getBarChartData","data","_a","dataset","index","colors","chartColors","defaultDataset","mergician","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","getBarChartProData","theme","remarkableTheme","themeFormatter","getThemeFormatter","groupedData","groupTailAsOther","item","value","formattedValue","i18n","measure","backgroundColor","getColor","borderColor","getBarChartProOptions","context","raw","BarChartPro","useTheme","i18nSetup","description","dimension","xAxisMaxItems","measures","results","showLogarithmicScale","xAxisLabel","yAxisLabel","reverseXAxis","yAxisRangeMin","yAxisRangeMax","title","resolveI18nProps","_b","ChartCard","meta","BarChartPro_emb","defineComponent","inputs","loadData","Value"],"mappings":"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"}
+{"version":3,"file":"BarChartPro.js","sources":["../src/remarkable-pro/components/charts/bars/BarChartPro/index.tsx","../src/remarkable-pro/components/charts/bars/BarChartPro/BarChartPro.emb.ts"],"sourcesContent":["import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { ChartCard } from '../../shared/ChartCard/ChartCard';\nimport { resolveI18nProps } from '../../../component.utils';\nimport { BarChart } from '../../../../../remarkable-ui/charts/bars/BarChart';\nimport { getBarChartProData, getBarChartProOptions } from '../bars.utils';\nimport { mergician } from 'mergician';\nimport { DataResponse, Dimension, Measure } from '@embeddable.com/core';\n\ntype BarChartProProps = {\n  description: string;\n  dimension: Dimension;\n  measures: Measure[];\n  results: DataResponse;\n  title: string;\n  xAxisLabel: string;\n  xAxisMaxItems: number;\n  yAxisLabel: string;\n  yAxisRangeMin?: number;\n  yAxisRangeMax?: number;\n  showLegend: boolean;\n  showLogarithmicScale: boolean;\n  showTooltips: boolean;\n  showValueLabels: boolean;\n  reverseXAxis: boolean;\n  onSegmentClick: (args: { dimensionValue: string | null }) => void;\n};\n\nconst BarChartPro = (props: BarChartProProps) => {\n  const theme = useTheme() as Theme;\n  i18nSetup(theme);\n\n  const {\n    description,\n    dimension,\n    measures,\n    results,\n    title,\n    xAxisLabel,\n    xAxisMaxItems,\n    yAxisLabel,\n    yAxisRangeMin,\n    yAxisRangeMax,\n    showLegend,\n    showLogarithmicScale,\n    showTooltips,\n    showValueLabels,\n    reverseXAxis,\n    onSegmentClick,\n  } = resolveI18nProps(props);\n\n  const data = getBarChartProData(\n    { data: results.data, dimension, measures, maxItems: xAxisMaxItems },\n    theme,\n  );\n\n  const options = mergician(\n    getBarChartProOptions(theme, measures[0]!), // Format Y axis based on first measure\n    theme.charts?.barChartPro?.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, ...measures]}\n      errorMessage={results.error}\n      subtitle={description}\n      title={title}\n    >\n      <BarChart\n        data={data}\n        onSegmentClick={handleSegmentClick}\n        showLegend={showLegend}\n        showTooltips={showTooltips}\n        showValueLabels={showValueLabels}\n        showLogarithmicScale={showLogarithmicScale}\n        xAxisLabel={xAxisLabel}\n        yAxisLabel={yAxisLabel}\n        reverseXAxis={reverseXAxis}\n        yAxisRangeMin={yAxisRangeMin}\n        yAxisRangeMax={yAxisRangeMax}\n        options={options}\n      />\n    </ChartCard>\n  );\n};\n\nexport default BarChartPro;\n","import { Value, loadData } from '@embeddable.com/core';\nimport { defineComponent, EmbeddedComponentMeta, Inputs } from '@embeddable.com/react';\nimport BarChartPro from './index';\nimport {\n  dataset,\n  description,\n  dimension,\n  showLegend,\n  showTooltips,\n  showValueLabels,\n  title,\n  measures,\n  showLogarithmicScale,\n  xAxisLabel,\n  yAxisLabel,\n  reverseXAxis,\n  yAxisRangeMin,\n  yAxisRangeMax,\n  xAxisMaxItems,\n} from '../../../component.constants';\n\nexport const meta = {\n  name: 'BarChartPro',\n  label: 'Bar Chart',\n  category: 'Bar Charts',\n  inputs: [\n    dataset,\n    measures,\n    dimension,\n    title,\n    description,\n    showLegend,\n    showTooltips,\n    showValueLabels,\n    showLogarithmicScale,\n    xAxisLabel,\n    yAxisLabel,\n    reverseXAxis,\n    yAxisRangeMin,\n    yAxisRangeMax,\n    xAxisMaxItems,\n  ],\n  events: [\n    {\n      name: 'onSegmentClick',\n      label: 'A bar is clicked',\n      properties: [\n        {\n          name: 'dimensionValue',\n          label: 'Clicked Dimension value',\n          type: 'string',\n        },\n      ],\n    },\n  ],\n} as const satisfies EmbeddedComponentMeta;\n\nexport default defineComponent(BarChartPro, meta, {\n  props: (inputs: Inputs<typeof meta>) => {\n    return {\n      ...inputs,\n      results: loadData({\n        from: inputs.dataset,\n        select: [...inputs.measures, inputs.dimension],\n      }),\n    };\n  },\n  events: {\n    onSegmentClick: (value) => {\n      return {\n        dimensionValue: value.dimensionValue || Value.noFilter(),\n      };\n    },\n  },\n});\n"],"names":["BarChartPro","props","theme","useTheme","i18nSetup","description","dimension","measures","results","title","xAxisLabel","xAxisMaxItems","yAxisLabel","yAxisRangeMin","yAxisRangeMax","showLegend","showLogarithmicScale","showTooltips","showValueLabels","reverseXAxis","onSegmentClick","resolveI18nProps","data","getBarChartProData","options","mergician","getBarChartProOptions","_b","_a","handleSegmentClick","index","jsx","ChartCard","BarChart","meta","dataset","BarChartPro_emb","defineComponent","inputs","loadData","value","Value"],"mappings":";;;;AA6BA,MAAMA,IAAc,CAACC,MAA4B;;AAC/C,QAAMC,IAAQC,EAAA;AACd,EAAAC,EAAUF,CAAK;AAEf,QAAM;AAAA,IACJ,aAAAG;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA,IACEC,EAAiBpB,CAAK,GAEpBqB,IAAOC;AAAA,IACX,EAAE,MAAMf,EAAQ,MAAM,WAAAF,GAAW,UAAAC,GAAU,UAAUI,EAAA;AAAA,IACrDT;AAAA,EAAA,GAGIsB,IAAUC;AAAA,IACdC,EAAsBxB,GAAOK,EAAS,CAAC,CAAE;AAAA;AAAA,MACzCoB,KAAAC,IAAA1B,EAAM,WAAN,gBAAA0B,EAAc,gBAAd,gBAAAD,EAA2B,YAAW,CAAA;AAAA,EAAC,GAGnCE,IAAqB,CAACC,MAA8B;;AACxD,IAAAV,EAAe;AAAA,MACb,gBAAgBU,MAAU,WAAwBH,KAAAC,IAAApB,EAAQ,SAAR,gBAAAoB,EAAeE,OAAf,OAAZ,SAAYH,EAAwBrB,EAAU;AAAA,IAAI,CACzF;AAAA,EACH;AAEA,SACEyB,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMxB;AAAA,MACN,uBAAuB,CAACF,GAAW,GAAGC,CAAQ;AAAA,MAC9C,cAAcC,EAAQ;AAAA,MACtB,UAAUH;AAAA,MACV,OAAAI;AAAA,MAEA,UAAAsB,gBAAAA,EAAAA;AAAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAAX;AAAA,UACA,gBAAgBO;AAAA,UAChB,YAAAd;AAAA,UACA,cAAAE;AAAA,UACA,iBAAAC;AAAA,UACA,sBAAAF;AAAA,UACA,YAAAN;AAAA,UACA,YAAAE;AAAA,UACA,cAAAO;AAAA,UACA,eAAAN;AAAA,UACA,eAAAC;AAAA,UACA,SAAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,GCvEaU,KAAO;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,QAAQ;AAAA,IACNC;AAAA,IACA5B;AAAA,IACAD;AAAA,IACAG;AAAA,IACAJ;AAAA,IACAU;AAAA,IACAE;AAAA,IACAC;AAAA,IACAF;AAAA,IACAN;AAAA,IACAE;AAAA,IACAO;AAAA,IACAN;AAAA,IACAC;AAAA,IACAH;AAAA,EAAA;AAAA,EAEF,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,OAAO;AAAA,MACP,YAAY;AAAA,QACV;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEJ,GAEAyB,KAAeC,EAAgBrC,GAAakC,IAAM;AAAA,EAChD,OAAO,CAACI,OACC;AAAA,IACL,GAAGA;AAAA,IACH,SAASC,EAAS;AAAA,MAChB,MAAMD,EAAO;AAAA,MACb,QAAQ,CAAC,GAAGA,EAAO,UAAUA,EAAO,SAAS;AAAA,IAAA,CAC9C;AAAA,EAAA;AAAA,EAGL,QAAQ;AAAA,IACN,gBAAgB,CAACE,OACR;AAAA,MACL,gBAAgBA,EAAM,kBAAkBC,EAAM,SAAA;AAAA,IAAS;AAAA,EAE3D;AAEJ,CAAC;"}

package/dist/BarHorizontalChartPro.js

@@ -0,0 +1,119 @@
+import { i as V, r as k, m as y, j as d, d as P, a as z, b as R, t as j, c as H, s as I, e as D, f as T, g as Y, x as q, y as E, p as F, q as O, u as _, v as G, V as J, o as K } from "./component.constants-DKWzvCnZ.js";
+import { useTheme as N, defineComponent as Q } from "@embeddable.com/react";
+import { C as U } from "./object.utils-CGQBO06b.js";
+import { g as W, a as X, B as Z } from "./bars.utils-Dag5gg_Y.js";
+const $ = (e) => {
+  var r, i;
+  const a = N();
+  V(a);
+  const {
+    description: c,
+    dimension: t,
+    measures: o,
+    results: s,
+    reverseYAxis: x,
+    showLegend: h,
+    showLogarithmicScale: u,
+    showTooltips: g,
+    showValueLabels: p,
+    title: C,
+    xAxisLabel: b,
+    xAxisRangeMax: A,
+    xAxisRangeMin: L,
+    yAxisLabel: v,
+    yAxisMaxItems: B,
+    onSegmentClick: f
+  } = k(e), w = W(
+    { data: s.data, dimension: t, measures: o, maxItems: B },
+    a
+  ), M = y(
+    X(a, o[0], !0),
+    // Format X axis based on first measure
+    ((i = (r = a.charts) == null ? void 0 : r.barChartPro) == null ? void 0 : i.options) || {}
+  ), S = (n) => {
+    var l, m;
+    f({
+      dimensionValue: n === void 0 || (m = (l = s.data) == null ? void 0 : l[n]) == null ? void 0 : m[t.name]
+    });
+  };
+  return /* @__PURE__ */ d.jsx(
+    U,
+    {
+      data: s,
+      dimensionsAndMeasures: [t, ...o],
+      errorMessage: s.error,
+      subtitle: c,
+      title: C,
+      children: /* @__PURE__ */ d.jsx(
+        Z,
+        {
+          horizontal: !0,
+          data: w,
+          options: M,
+          reverseYAxis: x,
+          showLegend: h,
+          showLogarithmicScale: u,
+          showTooltips: g,
+          showValueLabels: p,
+          xAxisLabel: b,
+          xAxisRangeMax: A,
+          xAxisRangeMin: L,
+          yAxisLabel: v,
+          onSegmentClick: S
+        }
+      )
+    }
+  );
+}, ee = {
+  name: "BarHorizontalChartPro",
+  label: "Bar Horizontal Chart",
+  category: "Bar Charts",
+  inputs: [
+    P,
+    z,
+    R,
+    j,
+    H,
+    I,
+    D,
+    T,
+    Y,
+    q,
+    E,
+    F,
+    O,
+    _,
+    G
+  ],
+  events: [
+    {
+      name: "onSegmentClick",
+      label: "A bar is clicked",
+      properties: [
+        {
+          name: "dimensionValue",
+          label: "Clicked Dimension value",
+          type: "string"
+        }
+      ]
+    }
+  ]
+}, re = Q($, ee, {
+  props: (e) => ({
+    ...e,
+    results: K({
+      from: e.dataset,
+      select: [...e.measures, e.dimension]
+    })
+  }),
+  events: {
+    onSegmentClick: (e) => ({
+      dimensionValue: e.dimensionValue || J.noFilter()
+    })
+  }
+});
+export {
+  re as default,
+  ee as meta
+};
+//# sourceMappingURL=BarHorizontalChartPro.js.map

package/dist/BarHorizontalChartPro.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarHorizontalChartPro.js","sources":["../src/remarkable-pro/components/charts/bars/BarHorizontalChartPro/index.tsx","../src/remarkable-pro/components/charts/bars/BarHorizontalChartPro/BarHorizontalChartPro.emb.ts"],"sourcesContent":["import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { ChartCard } from '../../shared/ChartCard/ChartCard';\nimport { resolveI18nProps } from '../../../component.utils';\nimport { BarChart } from '../../../../../remarkable-ui/charts/bars/BarChart';\nimport { getBarChartProData, getBarChartProOptions } from '../bars.utils';\nimport { mergician } from 'mergician';\nimport { DataResponse, Dimension, Measure } from '@embeddable.com/core';\n\ntype BarHorizontalChartProProps = {\n  description: string;\n  dimension: Dimension;\n  measures: Measure[];\n  results: DataResponse;\n  reverseYAxis: boolean;\n  showLegend: boolean;\n  showLogarithmicScale: boolean;\n  showTooltips: boolean;\n  showValueLabels: boolean;\n  title: string;\n  xAxisLabel: string;\n  xAxisRangeMax?: number;\n  xAxisRangeMin?: number;\n  yAxisLabel: string;\n  yAxisMaxItems: number;\n  onSegmentClick: (args: { dimensionValue: string | null }) => void;\n};\n\nconst BarHorizontalChartPro = (props: BarHorizontalChartProProps) => {\n  const theme = useTheme() as Theme;\n  i18nSetup(theme);\n\n  const {\n    description,\n    dimension,\n    measures,\n    results,\n    reverseYAxis,\n    showLegend,\n    showLogarithmicScale,\n    showTooltips,\n    showValueLabels,\n    title,\n    xAxisLabel,\n    xAxisRangeMax,\n    xAxisRangeMin,\n    yAxisLabel,\n    yAxisMaxItems,\n    onSegmentClick,\n  } = resolveI18nProps(props);\n\n  const data = getBarChartProData(\n    { data: results.data, dimension, measures, maxItems: yAxisMaxItems },\n    theme,\n  );\n\n  const options = mergician(\n    getBarChartProOptions(theme, measures[0]!, true), // Format X axis based on first measure\n    theme.charts?.barChartPro?.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, ...measures]}\n      errorMessage={results.error}\n      subtitle={description}\n      title={title}\n    >\n      <BarChart\n        horizontal\n        data={data}\n        options={options}\n        reverseYAxis={reverseYAxis}\n        showLegend={showLegend}\n        showLogarithmicScale={showLogarithmicScale}\n        showTooltips={showTooltips}\n        showValueLabels={showValueLabels}\n        xAxisLabel={xAxisLabel}\n        xAxisRangeMax={xAxisRangeMax}\n        xAxisRangeMin={xAxisRangeMin}\n        yAxisLabel={yAxisLabel}\n        onSegmentClick={handleSegmentClick}\n      />\n    </ChartCard>\n  );\n};\n\nexport default BarHorizontalChartPro;\n","import { Value, loadData } from '@embeddable.com/core';\nimport { defineComponent, EmbeddedComponentMeta, Inputs } from '@embeddable.com/react';\nimport BarHorizontalChartPro from './index';\nimport {\n  dataset,\n  description,\n  dimension,\n  showLegend,\n  showTooltips,\n  showValueLabels,\n  title,\n  measures,\n  showLogarithmicScale,\n  xAxisLabel,\n  yAxisLabel,\n  reverseYAxis,\n  xAxisRangeMin,\n  xAxisRangeMax,\n  yAxisMaxItems,\n} from '../../../component.constants';\n\nexport const meta = {\n  name: 'BarHorizontalChartPro',\n  label: 'Bar Horizontal Chart',\n  category: 'Bar Charts',\n  inputs: [\n    dataset,\n    measures,\n    dimension,\n    title,\n    description,\n    showLegend,\n    showTooltips,\n    showValueLabels,\n    showLogarithmicScale,\n    xAxisLabel,\n    yAxisLabel,\n    reverseYAxis,\n    xAxisRangeMin,\n    xAxisRangeMax,\n    yAxisMaxItems,\n  ],\n  events: [\n    {\n      name: 'onSegmentClick',\n      label: 'A bar is clicked',\n      properties: [\n        {\n          name: 'dimensionValue',\n          label: 'Clicked Dimension value',\n          type: 'string',\n        },\n      ],\n    },\n  ],\n} as const satisfies EmbeddedComponentMeta;\n\nexport default defineComponent(BarHorizontalChartPro, meta, {\n  props: (inputs: Inputs<typeof meta>) => {\n    return {\n      ...inputs,\n      results: loadData({\n        from: inputs.dataset,\n        select: [...inputs.measures, inputs.dimension],\n      }),\n    };\n  },\n  events: {\n    onSegmentClick: (value) => {\n      return {\n        dimensionValue: value.dimensionValue || Value.noFilter(),\n      };\n    },\n  },\n});\n"],"names":["BarHorizontalChartPro","props","theme","useTheme","i18nSetup","description","dimension","measures","results","reverseYAxis","showLegend","showLogarithmicScale","showTooltips","showValueLabels","title","xAxisLabel","xAxisRangeMax","xAxisRangeMin","yAxisLabel","yAxisMaxItems","onSegmentClick","resolveI18nProps","data","getBarChartProData","options","mergician","getBarChartProOptions","_b","_a","handleSegmentClick","index","jsx","ChartCard","BarChart","meta","dataset","BarHorizontalChartPro_emb","defineComponent","inputs","loadData","value","Value"],"mappings":";;;;AA6BA,MAAMA,IAAwB,CAACC,MAAsC;;AACnE,QAAMC,IAAQC,EAAA;AACd,EAAAC,EAAUF,CAAK;AAEf,QAAM;AAAA,IACJ,aAAAG;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA,IACEC,EAAiBpB,CAAK,GAEpBqB,IAAOC;AAAA,IACX,EAAE,MAAMf,EAAQ,MAAM,WAAAF,GAAW,UAAAC,GAAU,UAAUY,EAAA;AAAA,IACrDjB;AAAA,EAAA,GAGIsB,IAAUC;AAAA,IACdC,EAAsBxB,GAAOK,EAAS,CAAC,GAAI,EAAI;AAAA;AAAA,MAC/CoB,KAAAC,IAAA1B,EAAM,WAAN,gBAAA0B,EAAc,gBAAd,gBAAAD,EAA2B,YAAW,CAAA;AAAA,EAAC,GAGnCE,IAAqB,CAACC,MAA8B;;AACxD,IAAAV,EAAe;AAAA,MACb,gBAAgBU,MAAU,WAAwBH,KAAAC,IAAApB,EAAQ,SAAR,gBAAAoB,EAAeE,OAAf,OAAZ,SAAYH,EAAwBrB,EAAU;AAAA,IAAI,CACzF;AAAA,EACH;AAEA,SACEyB,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMxB;AAAA,MACN,uBAAuB,CAACF,GAAW,GAAGC,CAAQ;AAAA,MAC9C,cAAcC,EAAQ;AAAA,MACtB,UAAUH;AAAA,MACV,OAAAS;AAAA,MAEA,UAAAiB,gBAAAA,EAAAA;AAAAA,QAACE;AAAA,QAAA;AAAA,UACC,YAAU;AAAA,UACV,MAAAX;AAAA,UACA,SAAAE;AAAA,UACA,cAAAf;AAAA,UACA,YAAAC;AAAA,UACA,sBAAAC;AAAA,UACA,cAAAC;AAAA,UACA,iBAAAC;AAAA,UACA,YAAAE;AAAA,UACA,eAAAC;AAAA,UACA,eAAAC;AAAA,UACA,YAAAC;AAAA,UACA,gBAAgBW;AAAA,QAAA;AAAA,MAAA;AAAA,IAClB;AAAA,EAAA;AAGN,GCxEaK,KAAO;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,QAAQ;AAAA,IACNC;AAAA,IACA5B;AAAA,IACAD;AAAA,IACAQ;AAAA,IACAT;AAAA,IACAK;AAAA,IACAE;AAAA,IACAC;AAAA,IACAF;AAAA,IACAI;AAAA,IACAG;AAAA,IACAT;AAAA,IACAQ;AAAA,IACAD;AAAA,IACAG;AAAA,EAAA;AAAA,EAEF,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,OAAO;AAAA,MACP,YAAY;AAAA,QACV;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEJ,GAEAiB,KAAeC,EAAgBrC,GAAuBkC,IAAM;AAAA,EAC1D,OAAO,CAACI,OACC;AAAA,IACL,GAAGA;AAAA,IACH,SAASC,EAAS;AAAA,MAChB,MAAMD,EAAO;AAAA,MACb,QAAQ,CAAC,GAAGA,EAAO,UAAUA,EAAO,SAAS;AAAA,IAAA,CAC9C;AAAA,EAAA;AAAA,EAGL,QAAQ;AAAA,IACN,gBAAgB,CAACE,OACR;AAAA,MACL,gBAAgBA,EAAM,kBAAkBC,EAAM,SAAA;AAAA,IAAS;AAAA,EAE3D;AAEJ,CAAC;"}