@hisptz/dhis2-analytics 2.0.0-alpha.1 → 2.0.1

package/dist/esm/components/ChartAnalytics/ChartAnalytics.stories.js

@@ -0,0 +1,254 @@
+import { setupHighchartsModules, DHIS2Chart } from '.';
+import columnData from '../../shared/resources/column-data.json';
+import multiSeriesData from '../../shared/resources/multi-series-data.json';
+import stackedChartData from '../../shared/resources/stacked-chart-data.json';
+import pieData from '../../shared/resources/pie-data.json';
+import complexMultiSeriesData from '../../shared/resources/complex-multi-series-data.json';
+import HighCharts from 'highcharts';
+
+setupHighchartsModules(HighCharts);
+const meta = {
+  component: DHIS2Chart,
+  title: "DHIS2 Chart"
+};
+var ChartAnalytics_stories_default = meta;
+const Default = {
+  name: "Column",
+  args: {
+    analytics: columnData,
+    config: {
+      layout: {
+        series: ["dx"],
+        category: ["ou"],
+        filter: ["pe"]
+      },
+      type: "column"
+    }
+  }
+};
+const Bar = {
+  name: "Bar",
+  args: {
+    analytics: columnData,
+    config: {
+      layout: {
+        series: ["dx"],
+        category: ["ou"],
+        filter: ["pe"]
+      },
+      type: "bar"
+    }
+  }
+};
+const MultipleColumns = {
+  name: "Multiple columns",
+  args: {
+    analytics: multiSeriesData,
+    config: {
+      layout: {
+        series: ["ou"],
+        category: ["pe"],
+        filter: ["dx"]
+      },
+      type: "column"
+    }
+  }
+};
+const StackedColumn = {
+  name: "Stacked column",
+  args: {
+    analytics: stackedChartData,
+    config: {
+      layout: {
+        series: ["ou"],
+        category: ["pe"],
+        filter: ["dx"]
+      },
+      type: "stacked-column"
+    }
+  }
+};
+const StackedBar = {
+  name: "Stacked bar",
+  args: {
+    analytics: stackedChartData,
+    config: {
+      layout: {
+        series: ["ou"],
+        category: ["pe"],
+        filter: ["dx"]
+      },
+      type: "stacked-bar"
+    }
+  }
+};
+const Line = {
+  name: "Line chart",
+  args: {
+    analytics: columnData,
+    config: {
+      layout: {
+        series: ["dx"],
+        category: ["ou"],
+        filter: ["pe"]
+      },
+      type: "line"
+    }
+  }
+};
+const MultipleLines = {
+  name: "Multi line",
+  args: {
+    analytics: multiSeriesData,
+    config: {
+      layout: {
+        series: ["ou"],
+        category: ["pe"],
+        filter: ["dx"]
+      },
+      type: "line"
+    }
+  }
+};
+const PieChart = {
+  name: "Pie chart",
+  args: {
+    analytics: pieData,
+    config: {
+      layout: {
+        series: ["dx"],
+        category: [],
+        filter: ["dx", "pe"]
+      },
+      type: "pie"
+    }
+  }
+};
+const MultiSeries = {
+  name: "Multi series",
+  args: {
+    analytics: multiSeriesData,
+    config: {
+      layout: {
+        series: ["ou"],
+        category: ["pe"],
+        filter: ["dx"]
+      },
+      type: "multi-series",
+      multiSeries: {
+        series: [
+          {
+            id: "qhqAxPSTUXp",
+            as: "column",
+            yAxis: 0
+          },
+          {
+            id: "Vth0fbpFcsO",
+            as: "line",
+            cumulative: true,
+            yAxis: 1
+          }
+        ],
+        yAxes: [
+          {
+            id: "yAxis1",
+            title: {
+              text: "Koinandugu"
+            },
+            labels: {
+              format: "{value}"
+            }
+          },
+          {
+            id: "yAxis2",
+            title: {
+              text: "Kono"
+            },
+            labels: {
+              format: "{value}"
+            },
+            opposite: true
+          }
+        ],
+        target: {
+          id: "",
+          styles: {
+            color: "blue"
+          },
+          value: 45,
+          label: {
+            text: "Target",
+            textAlign: "center",
+            verticalAlign: "middle"
+          }
+        }
+      }
+    }
+  }
+};
+const ComplexMultiSeries = {
+  name: "Complex multi series",
+  args: {
+    analytics: complexMultiSeriesData,
+    config: {
+      layout: {
+        series: ["dx"],
+        category: ["pe"],
+        filter: ["ou"]
+      },
+      type: "multi-series",
+      multiSeries: {
+        series: [
+          {
+            id: "QQkOAJFukyY",
+            as: "column",
+            yAxis: 0
+          },
+          {
+            id: "QQkOAJFukyY",
+            as: "line",
+            cumulative: true,
+            yAxis: 1
+          }
+        ],
+        yAxes: [
+          {
+            id: "yAxis1",
+            title: {
+              text: "Koinandugu"
+            },
+            labels: {
+              format: "{value}"
+            }
+          },
+          {
+            id: "yAxis2",
+            title: {
+              text: "Kono"
+            },
+            labels: {
+              format: "{value}"
+            },
+            opposite: true
+          }
+        ],
+        target: {
+          id: "",
+          styles: {
+            color: "blue"
+          },
+          value: 45,
+          label: {
+            text: "Target",
+            textAlign: "center",
+            verticalAlign: "middle"
+          }
+        }
+      }
+    }
+  }
+};
+
+export { Bar, ComplexMultiSeries, Default, Line, MultiSeries, MultipleColumns, MultipleLines, PieChart, StackedBar, StackedColumn, ChartAnalytics_stories_default as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=ChartAnalytics.stories.js.map

package/dist/esm/components/ChartAnalytics/ChartAnalytics.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ChartAnalytics/ChartAnalytics.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DHIS2Chart, setupHighchartsModules } from \".\";\nimport { Meta, StoryObj } from \"@storybook/react\";\nimport columnData from \"../../shared/resources/column-data.json\";\nimport multiSeriesData from \"../../shared/resources/multi-series-data.json\";\nimport stackedChartData from \"../../shared/resources/stacked-chart-data.json\";\nimport pieData from \"../../shared/resources/pie-data.json\";\nimport complexMultiSeriesData from \"../../shared/resources/complex-multi-series-data.json\";\nimport { Analytics } from \"@hisptz/dhis2-utils\";\nimport HighCharts from \"highcharts\";\n\nsetupHighchartsModules(HighCharts);\n\nconst meta: Meta<typeof DHIS2Chart> = {\n\tcomponent: DHIS2Chart,\n\ttitle: \"DHIS2 Chart\",\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof DHIS2Chart>;\n\nexport const Default: Story = {\n\tname: \"Column\",\n\targs: {\n\t\tanalytics: columnData as unknown as Analytics,\n\t\tconfig: {\n\t\t\tlayout: {\n\t\t\t\tseries: [\"dx\"],\n\t\t\t\tcategory: [\"ou\"],\n\t\t\t\tfilter: [\"pe\"],\n\t\t\t},\n\t\t\ttype: \"column\",\n\t\t},\n\t},\n};\n\nexport const Bar: Story = {\n\tname: \"Bar\",\n\targs: {\n\t\tanalytics: columnData as any,\n\t\tconfig: {\n\t\t\tlayout: {\n\t\t\t\tseries: [\"dx\"],\n\t\t\t\tcategory: [\"ou\"],\n\t\t\t\tfilter: [\"pe\"],\n\t\t\t},\n\t\t\ttype: \"bar\",\n\t\t},\n\t},\n};\nexport const MultipleColumns: Story = {\n\tname: \"Multiple columns\",\n\targs: {\n\t\tanalytics: multiSeriesData as any,\n\t\tconfig: {\n\t\t\tlayout: {\n\t\t\t\tseries: [\"ou\"],\n\t\t\t\tcategory: [\"pe\"],\n\t\t\t\tfilter: [\"dx\"],\n\t\t\t},\n\t\t\ttype: \"column\",\n\t\t},\n\t},\n};\n\nexport const StackedColumn: Story = {\n\tname: \"Stacked column\",\n\targs: {\n\t\tanalytics: stackedChartData as any,\n\t\tconfig: {\n\t\t\tlayout: {\n\t\t\t\tseries: [\"ou\"],\n\t\t\t\tcategory: [\"pe\"],\n\t\t\t\tfilter: [\"dx\"],\n\t\t\t},\n\t\t\ttype: \"stacked-column\",\n\t\t},\n\t},\n};\nexport const StackedBar: Story = {\n\tname: \"Stacked bar\",\n\targs: {\n\t\tanalytics: stackedChartData as any,\n\t\tconfig: {\n\t\t\tlayout: {\n\t\t\t\tseries: [\"ou\"],\n\t\t\t\tcategory: [\"pe\"],\n\t\t\t\tfilter: [\"dx\"],\n\t\t\t},\n\t\t\ttype: \"stacked-bar\",\n\t\t},\n\t},\n};\nexport const Line: Story = {\n\tname: \"Line chart\",\n\targs: {\n\t\tanalytics: columnData as any,\n\t\tconfig: {\n\t\t\tlayout: {\n\t\t\t\tseries: [\"dx\"],\n\t\t\t\tcategory: [\"ou\"],\n\t\t\t\tfilter: [\"pe\"],\n\t\t\t},\n\t\t\ttype: \"line\",\n\t\t},\n\t},\n};\n\nexport const MultipleLines: Story = {\n\tname: \"Multi line\",\n\targs: {\n\t\tanalytics: multiSeriesData as any,\n\t\tconfig: {\n\t\t\tlayout: {\n\t\t\t\tseries: [\"ou\"],\n\t\t\t\tcategory: [\"pe\"],\n\t\t\t\tfilter: [\"dx\"],\n\t\t\t},\n\t\t\ttype: \"line\",\n\t\t},\n\t},\n};\n\nexport const PieChart: Story = {\n\tname: \"Pie chart\",\n\targs: {\n\t\tanalytics: pieData as any,\n\t\tconfig: {\n\t\t\tlayout: {\n\t\t\t\tseries: [\"dx\"],\n\t\t\t\tcategory: [],\n\t\t\t\tfilter: [\"dx\", \"pe\"],\n\t\t\t},\n\t\t\ttype: \"pie\",\n\t\t},\n\t},\n};\n\nexport const MultiSeries: Story = {\n\tname: \"Multi series\",\n\targs: {\n\t\tanalytics: multiSeriesData as any,\n\t\tconfig: {\n\t\t\tlayout: {\n\t\t\t\tseries: [\"ou\"],\n\t\t\t\tcategory: [\"pe\"],\n\t\t\t\tfilter: [\"dx\"],\n\t\t\t},\n\t\t\ttype: \"multi-series\",\n\t\t\tmultiSeries: {\n\t\t\t\tseries: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"qhqAxPSTUXp\",\n\t\t\t\t\t\tas: \"column\",\n\t\t\t\t\t\tyAxis: 0,\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"Vth0fbpFcsO\",\n\t\t\t\t\t\tas: \"line\",\n\t\t\t\t\t\tcumulative: true,\n\t\t\t\t\t\tyAxis: 1,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\tyAxes: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"yAxis1\",\n\t\t\t\t\t\ttitle: {\n\t\t\t\t\t\t\ttext: \"Koinandugu\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\tlabels: {\n\t\t\t\t\t\t\tformat: \"{value}\",\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"yAxis2\",\n\t\t\t\t\t\ttitle: {\n\t\t\t\t\t\t\ttext: \"Kono\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\tlabels: {\n\t\t\t\t\t\t\tformat: \"{value}\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\topposite: true,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\ttarget: {\n\t\t\t\t\tid: \"\",\n\t\t\t\t\tstyles: {\n\t\t\t\t\t\tcolor: \"blue\",\n\t\t\t\t\t},\n\t\t\t\t\tvalue: 45,\n\t\t\t\t\tlabel: {\n\t\t\t\t\t\ttext: \"Target\",\n\t\t\t\t\t\ttextAlign: \"center\",\n\t\t\t\t\t\tverticalAlign: \"middle\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t},\n};\n\nexport const ComplexMultiSeries: Story = {\n\tname: \"Complex multi series\",\n\targs: {\n\t\tanalytics: complexMultiSeriesData as any,\n\t\tconfig: {\n\t\t\tlayout: {\n\t\t\t\tseries: [\"dx\"],\n\t\t\t\tcategory: [\"pe\"],\n\t\t\t\tfilter: [\"ou\"],\n\t\t\t},\n\t\t\ttype: \"multi-series\",\n\t\t\tmultiSeries: {\n\t\t\t\tseries: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"QQkOAJFukyY\",\n\t\t\t\t\t\tas: \"column\",\n\t\t\t\t\t\tyAxis: 0,\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"QQkOAJFukyY\",\n\t\t\t\t\t\tas: \"line\",\n\t\t\t\t\t\tcumulative: true,\n\t\t\t\t\t\tyAxis: 1,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\tyAxes: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"yAxis1\",\n\t\t\t\t\t\ttitle: {\n\t\t\t\t\t\t\ttext: \"Koinandugu\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\tlabels: {\n\t\t\t\t\t\t\tformat: \"{value}\",\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"yAxis2\",\n\t\t\t\t\t\ttitle: {\n\t\t\t\t\t\t\ttext: \"Kono\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\tlabels: {\n\t\t\t\t\t\t\tformat: \"{value}\",\n\t\t\t\t\t\t},\n\t\t\t\t\t\topposite: true,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\ttarget: {\n\t\t\t\t\tid: \"\",\n\t\t\t\t\tstyles: {\n\t\t\t\t\t\tcolor: \"blue\",\n\t\t\t\t\t},\n\t\t\t\t\tvalue: 45,\n\t\t\t\t\tlabel: {\n\t\t\t\t\t\ttext: \"Target\",\n\t\t\t\t\t\ttextAlign: \"center\",\n\t\t\t\t\t\tverticalAlign: \"middle\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t},\n};\n"]}

package/dist/esm/components/ChartAnalytics/DHIS2Chart.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { uid } from '@hisptz/dhis2-utils';
+import HighCharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+import { forwardRef, useRef } from 'react';
+import { useChart } from './hooks/useChart.js';
+import './styles/custom-highchart.css';
+export * from './services/export.js';
+export * from './types/props.js';
+export * from './components/DownloadMenu/index.js';
+
+function ChartAnalyticsComponent({ analytics, config, containerProps }, ref) {
+  const id = useRef(`${uid()}-chart-item`);
+  const { chart } = useChart({ id: id.current, analytics, config });
+  if (!chart) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    HighchartsReact,
+    {
+      immutable: true,
+      ref,
+      containerProps: { id: id.current, ...containerProps ?? {} },
+      highcharts: HighCharts,
+      options: { ...chart }
+    }
+  );
+}
+const DHIS2Chart = forwardRef(
+  ChartAnalyticsComponent
+);
+const ChartAnalytics = DHIS2Chart;
+
+export { ChartAnalytics, DHIS2Chart };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=DHIS2Chart.js.map

package/dist/esm/components/ChartAnalytics/DHIS2Chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ChartAnalytics/DHIS2Chart.tsx"],"names":[],"mappings":"AAuBE;AAvBF,SAAS,WAAW;AACpB,OAAO,gBAAgB;AACvB,OAAO,qBAAqB;AAC5B,SAAgB,YAAY,cAAc;AAC1C,SAAS,gBAAgB;AACzB,OAAO;AAGP,cAAc;AACd,cAAc;AACd,cAAc;AAEd,SAAS,wBACR,EAAE,WAAW,QAAQ,eAAe,GACpC,KACC;AACD,QAAM,KAAK,OAAO,GAAG,IAAI,CAAC,aAAa;AACvC,QAAM,EAAE,MAAM,IAAI,SAAS,EAAE,IAAI,GAAG,SAAS,WAAW,OAAO,CAAC;AAEhE,MAAI,CAAC,OAAO;AACX,WAAO;AAAA,EACR;AACA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAS;AAAA,MACT;AAAA,MACA,gBAAgB,EAAE,IAAI,GAAG,SAAS,GAAI,kBAAkB,CAAC,EAAG;AAAA,MAC5D,YAAY;AAAA,MACZ,SAAS,EAAE,GAAG,MAAM;AAAA;AAAA,EACrB;AAEF;AAgBO,MAAM,aAA4C;AAAA,EACxD;AACD;AAKO,MAAM,iBAAiB","sourcesContent":["import { uid } from \"@hisptz/dhis2-utils\";\nimport HighCharts from \"highcharts\";\nimport HighchartsReact from \"highcharts-react-official\";\nimport React, { forwardRef, useRef } from \"react\";\nimport { useChart } from \"./hooks/useChart.js\";\nimport \"./styles/custom-highchart.css\";\nimport { ChartAnalyticsProps } from \"./types/props.js\";\n\nexport * from \"./services/export.js\";\nexport * from \"./types/props.js\";\nexport * from \"./components/DownloadMenu/index.js\";\n\nfunction ChartAnalyticsComponent(\n\t{ analytics, config, containerProps }: ChartAnalyticsProps,\n\tref: React.ForwardedRef<HighchartsReact.RefObject>,\n) {\n\tconst id = useRef(`${uid()}-chart-item`);\n\tconst { chart } = useChart({ id: id.current, analytics, config });\n\n\tif (!chart) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<HighchartsReact\n\t\t\timmutable\n\t\t\tref={ref}\n\t\t\tcontainerProps={{ id: id.current, ...(containerProps ?? {}) }}\n\t\t\thighcharts={HighCharts}\n\t\t\toptions={{ ...chart }}\n\t\t/>\n\t);\n}\n\n/**\n * The `DHIS2Chart` component allows you to render a chart visualization from DHIS2 analytics data.\n * It accepts the DHIS2 analytics payload as well as configuration on how to visualize the data.\n *\n * @component\n *\n * @param {ChartAnalyticsProps} props\n * @param {Analytics} [props.analytics] - Analytics data from DHIS2\n * @param {ChartConfig} [props.config] - Visualization configuration. See stories for more information\n * @param {Record<string, any>} [props.containerProps] - Props that will be passed to the chart container\n * @param {forwardRef} forwardRef - A function that creates a higher order component that forwards the ref through the component tree.\n *\n * @returns {React.FC<ChartAnalyticsProps & { ref: React.Ref<unknown> }>} - The DHIS2 chart component with forward ref support.\n */\nexport const DHIS2Chart: React.FC<ChartAnalyticsProps> = forwardRef(\n\tChartAnalyticsComponent,\n);\n\n/**\n * @deprecated since `v2`. Use `DHIS2Chart` instead\n * */\nexport const ChartAnalytics = DHIS2Chart;\n"]}

package/dist/esm/components/ChartAnalytics/components/DownloadMenu/components/Menu.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Popover, FlyoutMenu, Menu, MenuItem, MenuDivider } from '@dhis2/ui';
+import { map, isEmpty } from 'lodash';
+import { chartMenuSections } from '../constants/menu.js';
+
+function ChartMenu({
+  menuRef,
+  onClick,
+  onClose,
+  exclude = []
+}) {
+  const onMenuClick = (action) => () => {
+    onClick(action);
+    onClose();
+  };
+  const menuSections = map(chartMenuSections, (section) => {
+    return {
+      ...section,
+      menuItems: section.menuItems.filter(
+        (item) => !exclude.includes(item.name)
+      )
+    };
+  }).filter((section) => !isEmpty(section.menuItems));
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      onClickOutside: onClose,
+      onClose,
+      reference: menuRef,
+      children: /* @__PURE__ */ jsx(FlyoutMenu, { children: /* @__PURE__ */ jsx(Menu, { children: menuSections?.map((section, index) => {
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          section.menuItems?.map(({ name, label }) => {
+            return /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                dataTest: `download-${name}`,
+                label,
+                onClick: onMenuClick(name)
+              },
+              `${name}-menu-item`
+            );
+          }),
+          index !== menuSections.length - 1 && /* @__PURE__ */ jsx(MenuDivider, {})
+        ] });
+      }) }) })
+    }
+  );
+}
+
+export { ChartMenu };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=Menu.js.map

package/dist/esm/components/ChartAnalytics/components/DownloadMenu/components/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/ChartAnalytics/components/DownloadMenu/components/Menu.tsx"],"names":[],"mappings":"AA0CO,mBAGG,KAHH;AA1CP,SAAS,YAAY,MAAM,aAAa,UAAU,eAAe;AACjE,SAAS,SAAS,WAAW;AAE7B,SAAS,yBAAyB;AAG3B,SAAS,UAAU;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU,CAAC;AACZ,GAKG;AACF,QAAM,cAAc,CAAC,WAAmB,MAAM;AAC7C,YAAQ,MAAM;AACd,YAAQ;AAAA,EACT;AAEA,QAAM,eAAe,IAAI,mBAAmB,CAAC,YAAY;AACxD,WAAO;AAAA,MACN,GAAG;AAAA,MACH,WAAW,QAAQ,UAAU;AAAA,QAC5B,CAAC,SAAc,CAAC,QAAQ,SAAS,KAAK,IAAI;AAAA,MAC3C;AAAA,IACD;AAAA,EACD,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,QAAQ,QAAQ,SAAS,CAAC;AAElD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,gBAAgB;AAAA,MAEhB;AAAA,MACA,WAAW;AAAA,MAEX,8BAAC,cACA,8BAAC,QACC,wBAAc,IAAI,CAAC,SAAS,UAAU;AACtC,eACC,iCACE;AAAA,kBAAQ,WAAW,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM;AAC5C,mBACC;AAAA,cAAC;AAAA;AAAA,gBAEA,UAAU,YAAY,IAAI;AAAA,gBAC1B;AAAA,gBACA,SAAS,YAAY,IAAI;AAAA;AAAA,cAHpB,GAAG,IAAI;AAAA,YAIb;AAAA,UAEF,CAAC;AAAA,UACA,UAAU,aAAa,SAAS,KAChC,oBAAC,eAAY;AAAA,WAEf;AAAA,MAEF,CAAC,GACF,GACD;AAAA;AAAA,EACD;AAEF","sourcesContent":["import { FlyoutMenu, Menu, MenuDivider, MenuItem, Popover } from \"@dhis2/ui\";\nimport { isEmpty, map } from \"lodash\";\nimport React from \"react\";\nimport { chartMenuSections } from \"../constants/menu.js\";\nimport { ChartExportMenuItem } from \"../interfaces/menu.js\";\n\nexport function ChartMenu({\n\tmenuRef,\n\tonClick,\n\tonClose,\n\texclude = [],\n}: {\n\tmenuRef: HTMLDivElement;\n\tonClick: (action: string) => void;\n\tonClose: () => void;\n\texclude?: ChartExportMenuItem[];\n}) {\n\tconst onMenuClick = (action: string) => () => {\n\t\tonClick(action);\n\t\tonClose();\n\t};\n\n\tconst menuSections = map(chartMenuSections, (section) => {\n\t\treturn {\n\t\t\t...section,\n\t\t\tmenuItems: section.menuItems.filter(\n\t\t\t\t(item: any) => !exclude.includes(item.name),\n\t\t\t),\n\t\t};\n\t}).filter((section) => !isEmpty(section.menuItems));\n\n\treturn (\n\t\t<Popover\n\t\t\tonClickOutside={onClose} /*\n      // @ts-ignore */\n\t\t\tonClose={onClose}\n\t\t\treference={menuRef}\n\t\t>\n\t\t\t<FlyoutMenu>\n\t\t\t\t<Menu>\n\t\t\t\t\t{menuSections?.map((section, index) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{section.menuItems?.map(({ name, label }) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\tkey={`${name}-menu-item`}\n\t\t\t\t\t\t\t\t\t\t\tdataTest={`download-${name}`}\n\t\t\t\t\t\t\t\t\t\t\tlabel={label}\n\t\t\t\t\t\t\t\t\t\t\tonClick={onMenuClick(name)}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t{index !== menuSections.length - 1 && (\n\t\t\t\t\t\t\t\t\t<MenuDivider />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</Menu>\n\t\t\t</FlyoutMenu>\n\t\t</Popover>\n\t);\n}\n"]}

package/dist/esm/components/ChartAnalytics/components/DownloadMenu/constants/menu.js

@@ -0,0 +1,42 @@
+import i18n from '@dhis2/d2-i18n';
+
+const chartMenuSections = [
+  {
+    name: "download",
+    menuItems: [
+      {
+        name: "png",
+        label: i18n.t("Download PNG")
+      },
+      {
+        name: "jpeg",
+        label: i18n.t("Download JPEG")
+      },
+      {
+        name: "svg",
+        label: i18n.t("Download SVG")
+      },
+      {
+        name: "pdf",
+        label: i18n.t("Download PDF")
+      }
+    ]
+  },
+  {
+    name: "view",
+    menuItems: [
+      {
+        name: "table",
+        label: i18n.t("View as table")
+      },
+      {
+        name: "full-screen",
+        label: i18n.t("View full screen")
+      }
+    ]
+  }
+];
+
+export { chartMenuSections };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=menu.js.map

package/dist/esm/components/ChartAnalytics/components/DownloadMenu/constants/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/ChartAnalytics/components/DownloadMenu/constants/menu.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU;AAEV,MAAM,oBAAoB;AAAA,EAC/B;AAAA,IACE,MAAM;AAAA,IACN,WAAW;AAAA,MACT;AAAA,QACE,MAAM;AAAA,QACN,OAAO,KAAK,EAAE,cAAc;AAAA,MAC9B;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,OAAO,KAAK,EAAE,eAAe;AAAA,MAC/B;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,OAAO,KAAK,EAAE,cAAc;AAAA,MAC9B;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,OAAO,KAAK,EAAE,cAAc;AAAA,MAC9B;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,WAAW;AAAA,MACT;AAAA,QACE,MAAM;AAAA,QACN,OAAO,KAAK,EAAE,eAAe;AAAA,MAC/B;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,OAAO,KAAK,EAAE,kBAAkB;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AACF","sourcesContent":["import i18n from \"@dhis2/d2-i18n\";\n\nexport const chartMenuSections = [\n  {\n    name: \"download\",\n    menuItems: [\n      {\n        name: \"png\",\n        label: i18n.t(\"Download PNG\"),\n      },\n      {\n        name: \"jpeg\",\n        label: i18n.t(\"Download JPEG\"),\n      },\n      {\n        name: \"svg\",\n        label: i18n.t(\"Download SVG\"),\n      },\n      {\n        name: \"pdf\",\n        label: i18n.t(\"Download PDF\"),\n      },\n    ],\n  },\n  {\n    name: \"view\",\n    menuItems: [\n      {\n        name: \"table\",\n        label: i18n.t(\"View as table\"),\n      },\n      {\n        name: \"full-screen\",\n        label: i18n.t(\"View full screen\"),\n      },\n    ],\n  },\n];\n"]}

package/dist/esm/components/ChartAnalytics/components/DownloadMenu/index.js

@@ -0,0 +1,65 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { IconMore24 } from '@dhis2/ui';
+import { useRef, useState } from 'react';
+import { onFullScreenView, onViewAsTable, onPDFDownload, onCSVDownload, onImageDownload } from '../../services/export.js';
+import { ChartMenu } from './components/Menu.js';
+
+function ChartDownloadMenu({
+  chartRef,
+  exclude,
+  icon
+}) {
+  const menuButtonRef = useRef(null);
+  const [menuRef, setMenuRef] = useState(null);
+  const toggleMenu = () => {
+    if (menuRef === null) {
+      setMenuRef(menuButtonRef.current);
+    } else {
+      setMenuRef(null);
+    }
+  };
+  const chart = chartRef;
+  const onMenuClick = (action) => {
+    if (chart) {
+      switch (action) {
+        case "png":
+          onImageDownload(chart, "png");
+          break;
+        case "jpeg":
+          onImageDownload(chart, "jpeg");
+          break;
+        case "svg":
+          onImageDownload(chart, "svg+xml");
+          break;
+        case "csv":
+          onCSVDownload(chart);
+          break;
+        case "pdf":
+          onPDFDownload(chart);
+          break;
+        case "table":
+          onViewAsTable(chart, true);
+          break;
+        case "full-screen":
+          onFullScreenView(chart);
+          break;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { onClick: toggleMenu, ref: menuButtonRef, children: icon ?? /* @__PURE__ */ jsx(IconMore24, {}) }),
+    menuRef && /* @__PURE__ */ jsx(
+      ChartMenu,
+      {
+        exclude,
+        onClick: onMenuClick,
+        onClose: toggleMenu,
+        menuRef
+      }
+    )
+  ] });
+}
+
+export { ChartDownloadMenu };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/components/ChartAnalytics/components/DownloadMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/ChartAnalytics/components/DownloadMenu/index.tsx"],"names":[],"mappings":"AA+DE,mBAEW,KAFX;AA/DF,SAAS,kBAAkB;AAE3B,SAAgB,QAAQ,gBAAgB;AACxC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB;AAGnB,SAAS,kBAAkB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACD,GAIG;AACF,QAAM,gBAAgB,OAA8B,IAAI;AACxD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAgC,IAAI;AAClE,QAAM,aAAa,MAAM;AACxB,QAAI,YAAY,MAAM;AACrB,iBAAW,cAAc,OAAO;AAAA,IACjC,OAAO;AACN,iBAAW,IAAI;AAAA,IAChB;AAAA,EACD;AAEA,QAAM,QAAQ;AAEd,QAAM,cAAc,CAAC,WAAmB;AACvC,QAAI,OAAO;AACV,cAAQ,QAAQ;AAAA,QACf,KAAK;AACJ,0BAAgB,OAAO,KAAK;AAC5B;AAAA,QACD,KAAK;AACJ,0BAAgB,OAAO,MAAM;AAC7B;AAAA,QACD,KAAK;AACJ,0BAAgB,OAAO,SAAS;AAChC;AAAA,QACD,KAAK;AACJ,wBAAc,KAAK;AACnB;AAAA,QACD,KAAK;AACJ,wBAAc,KAAK;AACnB;AAAA,QACD,KAAK;AACJ,wBAAc,OAAO,IAAI;AACzB;AAAA,QACD,KAAK;AACJ,2BAAiB,KAAK;AACtB;AAAA,MACF;AAAA,IACD;AAAA,EACD;AAEA,SACC,iCACC;AAAA,wBAAC,SAAI,SAAS,YAAY,KAAK,eAC7B,kBAAQ,oBAAC,cAAW,GACtB;AAAA,IACC,WACA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,SAAS;AAAA,QACT;AAAA;AAAA,IACD;AAAA,KAEF;AAEF","sourcesContent":["import { IconMore24 } from \"@dhis2/ui\";\nimport HighchartsReact from \"highcharts-react-official\";\nimport React, { useRef, useState } from \"react\";\nimport {\n\tonCSVDownload,\n\tonFullScreenView,\n\tonImageDownload,\n\tonPDFDownload,\n\tonViewAsTable,\n} from \"../../services/export.js\";\nimport { ChartMenu } from \"./components/Menu.js\";\nimport { ChartExportMenuItem } from \"./interfaces/menu.js\";\n\nexport function ChartDownloadMenu({\n\tchartRef,\n\texclude,\n\ticon,\n}: {\n\tchartRef: HighchartsReact.RefObject | null;\n\texclude?: ChartExportMenuItem[];\n\ticon?: React.ReactNode;\n}) {\n\tconst menuButtonRef = useRef<HTMLDivElement | null>(null);\n\tconst [menuRef, setMenuRef] = useState<HTMLDivElement | null>(null);\n\tconst toggleMenu = () => {\n\t\tif (menuRef === null) {\n\t\t\tsetMenuRef(menuButtonRef.current);\n\t\t} else {\n\t\t\tsetMenuRef(null);\n\t\t}\n\t};\n\n\tconst chart = chartRef;\n\n\tconst onMenuClick = (action: string) => {\n\t\tif (chart) {\n\t\t\tswitch (action) {\n\t\t\t\tcase \"png\":\n\t\t\t\t\tonImageDownload(chart, \"png\");\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"jpeg\":\n\t\t\t\t\tonImageDownload(chart, \"jpeg\");\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"svg\":\n\t\t\t\t\tonImageDownload(chart, \"svg+xml\");\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"csv\":\n\t\t\t\t\tonCSVDownload(chart);\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"pdf\":\n\t\t\t\t\tonPDFDownload(chart);\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"table\":\n\t\t\t\t\tonViewAsTable(chart, true);\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"full-screen\":\n\t\t\t\t\tonFullScreenView(chart);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div onClick={toggleMenu} ref={menuButtonRef}>\n\t\t\t\t{icon ?? <IconMore24 />}\n\t\t\t</div>\n\t\t\t{menuRef && (\n\t\t\t\t<ChartMenu\n\t\t\t\t\texclude={exclude}\n\t\t\t\t\tonClick={onMenuClick}\n\t\t\t\t\tonClose={toggleMenu}\n\t\t\t\t\tmenuRef={menuRef}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n}\n"]}

package/dist/esm/components/ChartAnalytics/components/DownloadMenu/interfaces/menu.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=menu.js.map

package/dist/esm/components/ChartAnalytics/components/DownloadMenu/interfaces/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/esm/components/ChartAnalytics/hooks/useChart.js

@@ -0,0 +1,43 @@
+import { useState, useCallback, useEffect } from 'react';
+import { getChartInstance, updateLayout } from '../utils/chart.js';
+
+function useChart({
+  id,
+  analytics,
+  config
+}) {
+  const [chart, setChart] = useState(
+    getChartInstance(id, analytics, config).getOptions()
+  );
+  const changeChartType = useCallback(
+    (type) => {
+      const updatedLayout = updateLayout(config, { type });
+      const updatedConfig = { ...config, layout: updatedLayout, type };
+      const chartInstance = getChartInstance(
+        id,
+        analytics,
+        updatedConfig
+      );
+      setChart(chartInstance.getOptions());
+    },
+    [config, id, analytics]
+  );
+  useEffect(() => {
+    if (analytics && config) {
+      const chartInstance = getChartInstance(
+        id,
+        analytics,
+        config
+      );
+      setChart(chartInstance.getOptions());
+    }
+  }, [analytics, config, id]);
+  return {
+    chart,
+    changeChartType
+  };
+}
+
+export { useChart };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=useChart.js.map

package/dist/esm/components/ChartAnalytics/hooks/useChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ChartAnalytics/hooks/useChart.ts"],"names":[],"mappings":"AAEA,SAAS,aAAa,WAAW,gBAAgB;AAGjD,SAAS,kBAAkB,oBAAoB;AAExC,SAAS,SAAS;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACD,GAOE;AACD,QAAM,CAAC,OAAO,QAAQ,IAAI;AAAA,IACzB,iBAAiB,IAAI,WAAW,MAAM,EAAE,WAAW;AAAA,EACpD;AAEA,QAAM,kBAAkB;AAAA,IACvB,CAAC,SAAoB;AACpB,YAAM,gBAAgB,aAAa,QAAQ,EAAE,KAAK,CAAC;AACnD,YAAM,gBAAgB,EAAE,GAAG,QAAQ,QAAQ,eAAe,KAAK;AAC/D,YAAM,gBAA4B;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA,MACD;AACA,eAAS,cAAc,WAAW,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,QAAQ,IAAI,SAAS;AAAA,EACvB;AAEA,YAAU,MAAM;AACf,QAAI,aAAa,QAAQ;AACxB,YAAM,gBAA4B;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA,MACD;AACA,eAAS,cAAc,WAAW,CAAC;AAAA,IACpC;AAAA,EACD,GAAG,CAAC,WAAW,QAAQ,EAAE,CAAC;AAE1B,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD","sourcesContent":["import type { Analytics } from \"@hisptz/dhis2-utils\";\nimport HighCharts from \"highcharts\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { DHIS2Chart } from \"../models/index.js\";\nimport { ChartConfig, ChartType } from \"../types/props.js\";\nimport { getChartInstance, updateLayout } from \"../utils/chart.js\";\n\nexport function useChart({\n\tid,\n\tanalytics,\n\tconfig,\n}: {\n\tid: string;\n\tanalytics: Analytics;\n\tconfig: ChartConfig;\n}): {\n\tchart?: HighCharts.Options;\n\tchangeChartType: (type: ChartType) => void;\n} {\n\tconst [chart, setChart] = useState<HighCharts.Options | undefined>(\n\t\tgetChartInstance(id, analytics, config).getOptions(),\n\t);\n\n\tconst changeChartType = useCallback(\n\t\t(type: ChartType) => {\n\t\t\tconst updatedLayout = updateLayout(config, { type });\n\t\t\tconst updatedConfig = { ...config, layout: updatedLayout, type };\n\t\t\tconst chartInstance: DHIS2Chart = getChartInstance(\n\t\t\t\tid,\n\t\t\t\tanalytics,\n\t\t\t\tupdatedConfig,\n\t\t\t);\n\t\t\tsetChart(chartInstance.getOptions());\n\t\t},\n\t\t[config, id, analytics],\n\t);\n\n\tuseEffect(() => {\n\t\tif (analytics && config) {\n\t\t\tconst chartInstance: DHIS2Chart = getChartInstance(\n\t\t\t\tid,\n\t\t\t\tanalytics,\n\t\t\t\tconfig,\n\t\t\t);\n\t\t\tsetChart(chartInstance.getOptions());\n\t\t}\n\t}, [analytics, config, id]);\n\n\treturn {\n\t\tchart,\n\t\tchangeChartType,\n\t};\n}\n"]}

package/dist/esm/components/ChartAnalytics/index.js

@@ -0,0 +1,3 @@
+export * from './DHIS2Chart.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/components/ChartAnalytics/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ChartAnalytics/index.ts"],"names":[],"mappings":"AAAA,cAAc","sourcesContent":["export * from \"./DHIS2Chart.js\";\n"]}

package/dist/esm/components/ChartAnalytics/models/bar.js

@@ -0,0 +1,21 @@
+import { DHIS2ColumnChart } from './column.js';
+
+class DHIS2BarChart extends DHIS2ColumnChart {
+  getHighchartsType() {
+    return "bar";
+  }
+}
+class DHIS2StackedBarChart extends DHIS2BarChart {
+  getPlotOptions() {
+    return {
+      column: {
+        stacking: "normal",
+        ...super.getPlotOptions().column
+      }
+    };
+  }
+}
+
+export { DHIS2BarChart, DHIS2StackedBarChart };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=bar.js.map

package/dist/esm/components/ChartAnalytics/models/bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ChartAnalytics/models/bar.ts"],"names":[],"mappings":"AACA,SAAS,wBAAwB;AAE1B,MAAM,sBAAsB,iBAAiB;AAAA,EACnD,oBAA4B;AAC3B,WAAO;AAAA,EACR;AACD;AAEO,MAAM,6BAA6B,cAAc;AAAA,EACvD,iBAA8B;AAC7B,WAAO;AAAA,MACN,QAAQ;AAAA,QACP,UAAU;AAAA,QACV,GAAG,MAAM,eAAe,EAAE;AAAA,MAC3B;AAAA,IACD;AAAA,EACD;AACD","sourcesContent":["import { PlotOptions } from \"highcharts\";\nimport { DHIS2ColumnChart } from \"./column.js\";\n\nexport class DHIS2BarChart extends DHIS2ColumnChart {\n\tgetHighchartsType(): string {\n\t\treturn \"bar\";\n\t}\n}\n\nexport class DHIS2StackedBarChart extends DHIS2BarChart {\n\tgetPlotOptions(): PlotOptions {\n\t\treturn {\n\t\t\tcolumn: {\n\t\t\t\tstacking: \"normal\",\n\t\t\t\t...super.getPlotOptions().column,\n\t\t\t},\n\t\t};\n\t}\n}\n"]}

package/dist/esm/components/ChartAnalytics/models/column.js

@@ -0,0 +1,48 @@
+import { getPointSeries, getAllCategories } from '../utils/chart.js';
+import { DHIS2Chart } from './index.js';
+
+class DHIS2ColumnChart extends DHIS2Chart {
+  getCategories() {
+    return void 0;
+  }
+  getHighchartsType() {
+    return "column";
+  }
+  getPlotOptions() {
+    return {
+      column: {
+        dataLabels: {
+          enabled: true
+        }
+      }
+    };
+  }
+  getSeries() {
+    return getPointSeries(this.analytics, this.config, "column");
+  }
+  getXAxis() {
+    return {
+      type: "category",
+      categories: getAllCategories(this.analytics, this.config),
+      crosshair: true,
+      labels: {
+        enabled: true
+      },
+      title: { text: "" }
+    };
+  }
+}
+class DHIS2StackedColumnChart extends DHIS2ColumnChart {
+  getPlotOptions() {
+    return {
+      column: {
+        stacking: "normal",
+        ...super.getPlotOptions().column
+      }
+    };
+  }
+}
+
+export { DHIS2ColumnChart, DHIS2StackedColumnChart };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=column.js.map

package/dist/esm/components/ChartAnalytics/models/column.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ChartAnalytics/models/column.ts"],"names":[],"mappings":"AACA,SAAS,kBAAkB,sBAAsB;AACjD,SAAS,kBAAkB;AAEpB,MAAM,yBAAyB,WAAW;AAAA,EAChD,gBAAmC;AAClC,WAAO;AAAA,EACR;AAAA,EAEA,oBAA4B;AAC3B,WAAO;AAAA,EACR;AAAA,EAEA,iBAA8B;AAC7B,WAAO;AAAA,MACN,QAAQ;AAAA,QACP,YAAY;AAAA,UACX,SAAS;AAAA,QACV;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAAA,EAEA,YAAiC;AAChC,WAAO,eAAe,KAAK,WAAW,KAAK,QAAQ,QAAQ;AAAA,EAC5D;AAAA,EAEA,WAAqC;AACpC,WAAO;AAAA,MACN,MAAM;AAAA,MACN,YAAY,iBAAiB,KAAK,WAAW,KAAK,MAAM;AAAA,MACxD,WAAW;AAAA,MACX,QAAQ;AAAA,QACP,SAAS;AAAA,MACV;AAAA,MACA,OAAO,EAAE,MAAM,GAAG;AAAA,IACnB;AAAA,EACD;AACD;AAEO,MAAM,gCAAgC,iBAAiB;AAAA,EAC7D,iBAA8B;AAC7B,WAAO;AAAA,MACN,QAAQ;AAAA,QACP,UAAU;AAAA,QACV,GAAG,MAAM,eAAe,EAAE;AAAA,MAC3B;AAAA,IACD;AAAA,EACD;AACD","sourcesContent":["import { PlotOptions, SeriesOptionsType, XAxisOptions } from \"highcharts\";\nimport { getAllCategories, getPointSeries } from \"../utils/chart.js\";\nimport { DHIS2Chart } from \"./index.js\";\n\nexport class DHIS2ColumnChart extends DHIS2Chart {\n\tgetCategories(): any[] | undefined {\n\t\treturn undefined;\n\t}\n\n\tgetHighchartsType(): string {\n\t\treturn \"column\";\n\t}\n\n\tgetPlotOptions(): PlotOptions {\n\t\treturn {\n\t\t\tcolumn: {\n\t\t\t\tdataLabels: {\n\t\t\t\t\tenabled: true,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n\n\tgetSeries(): SeriesOptionsType[] {\n\t\treturn getPointSeries(this.analytics, this.config, \"column\");\n\t}\n\n\tgetXAxis(): XAxisOptions | undefined {\n\t\treturn {\n\t\t\ttype: \"category\",\n\t\t\tcategories: getAllCategories(this.analytics, this.config),\n\t\t\tcrosshair: true,\n\t\t\tlabels: {\n\t\t\t\tenabled: true,\n\t\t\t},\n\t\t\ttitle: { text: \"\" },\n\t\t};\n\t}\n}\n\nexport class DHIS2StackedColumnChart extends DHIS2ColumnChart {\n\tgetPlotOptions(): PlotOptions {\n\t\treturn {\n\t\t\tcolumn: {\n\t\t\t\tstacking: \"normal\",\n\t\t\t\t...super.getPlotOptions().column,\n\t\t\t},\n\t\t};\n\t}\n}\n"]}