@hisptz/dhis2-analytics 2.0.67 → 2.1.1

package/dist/components/ChartAnalytics/DHIS2Chart.js

@@ -2,18 +2,42 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var dhis2Utils = require('@hisptz/dhis2-utils');
-var HighCharts = require('highcharts');
+var Highcharts = require('highcharts');
 var HighchartsReact = require('highcharts-react-official');
 var react = require('react');
 var useChart_js = require('./hooks/useChart.js');
 require('./styles/custom-highchart.css');
+require('highcharts/modules/exporting');
+require('highcharts/modules/export-data');
+require('highcharts/modules/full-screen');
+require('highcharts/highcharts-more');
+require('highcharts/modules/solid-gauge');
+require('highcharts/modules/accessibility');
 var export_js = require('./services/export.js');
 var props_js = require('./types/props.js');
 var index_js = require('./components/DownloadMenu/index.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var HighCharts__default = /*#__PURE__*/_interopDefault(HighCharts);
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var Highcharts__namespace = /*#__PURE__*/_interopNamespace(Highcharts);
 var HighchartsReact__default = /*#__PURE__*/_interopDefault(HighchartsReact);
 
 function ChartAnalyticsComponent({
@@ -32,8 +56,12 @@ function ChartAnalyticsComponent({
     {
       immutable: true,
       ref: setRef,
-      containerProps: { id: id.current, ...containerProps ?? {} },
-      highcharts: HighCharts__default.default,
+      containerProps: {
+        id: id.current,
+        style: { width: "100%", height: "100%" },
+        ...containerProps ?? {}
+      },
+      highcharts: Highcharts__namespace,
       options: { ...chart }
     }
   );

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ChartAnalytics/DHIS2Chart.tsx"],"names":["useRef","uid","useChart","jsx","HighchartsReact","HighCharts","forwardRef"],"mappings":";;;;;;;;;;;;;;;;;;AAYA,SAAS,uBAAwB,CAAA;AAAA,EAChC,SAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AAAA,EACA;AACD,CAAwB,EAAA;AACvB,EAAA,MAAM,EAAK,GAAAA,YAAA,CAAO,CAAG,EAAAC,cAAA,EAAK,CAAa,WAAA,CAAA,CAAA;AACvC,EAAM,MAAA,EAAE,KAAM,EAAA,GAAIC,oBAAS,CAAA,EAAE,IAAI,EAAG,CAAA,OAAA,EAAS,SAAW,EAAA,MAAA,EAAQ,CAAA;AAEhE,EAAA,IAAI,CAAC,KAAO,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAER,EACC,uBAAAC,cAAA;AAAA,IAACC,gCAAA;AAAA,IAAA;AAAA,MACA,SAAS,EAAA,IAAA;AAAA,MACT,GAAK,EAAA,MAAA;AAAA,MACL,cAAA,EAAgB,EAAE,EAAI,EAAA,EAAA,CAAG,SAAS,GAAI,cAAA,IAAkB,EAAI,EAAA;AAAA,MAC5D,UAAY,EAAAC,2BAAA;AAAA,MACZ,OAAA,EAAS,EAAE,GAAG,KAAM;AAAA;AAAA,GACrB;AAEF;AAgBO,MAAM,UACZ,GAAAC,gBAAA;AAAA,EACC;AACD;AAKM,MAAM,cAAiB,GAAA","file":"DHIS2Chart.js","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\tanalytics,\n\tconfig,\n\tcontainerProps,\n\tsetRef,\n}: ChartAnalyticsProps) {\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={setRef}\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.ForwardRefExoticComponent<ChartAnalyticsProps>} - The DHIS2 chart component with forward ref support.\n */\nexport const DHIS2Chart: React.ForwardRefExoticComponent<ChartAnalyticsProps> =\n\tforwardRef<HighchartsReact.RefObject, ChartAnalyticsProps>(\n\t\tChartAnalyticsComponent,\n\t);\n\n/**\n * @deprecated since `v2`. Use `DHIS2Chart` instead\n * */\nexport const ChartAnalytics = DHIS2Chart;\n"]}
+{"version":3,"sources":["../../../src/components/ChartAnalytics/DHIS2Chart.tsx"],"names":["useRef","uid","useChart","jsx","HighchartsReact","Highcharts","forwardRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,SAAS,uBAAwB,CAAA;AAAA,EAChC,SAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AAAA,EACA;AACD,CAAwB,EAAA;AACvB,EAAA,MAAM,EAAK,GAAAA,YAAA,CAAO,CAAG,EAAAC,cAAA,EAAK,CAAa,WAAA,CAAA,CAAA;AACvC,EAAM,MAAA,EAAE,KAAM,EAAA,GAAIC,oBAAS,CAAA,EAAE,IAAI,EAAG,CAAA,OAAA,EAAS,SAAW,EAAA,MAAA,EAAQ,CAAA;AAEhE,EAAA,IAAI,CAAC,KAAO,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAER,EACC,uBAAAC,cAAA;AAAA,IAACC,gCAAA;AAAA,IAAA;AAAA,MACA,SAAS,EAAA,IAAA;AAAA,MACT,GAAK,EAAA,MAAA;AAAA,MACL,cAAgB,EAAA;AAAA,QACf,IAAI,EAAG,CAAA,OAAA;AAAA,QACP,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,QAAQ,MAAO,EAAA;AAAA,QACvC,GAAI,kBAAkB;AAAC,OACxB;AAAA,MACA,UAAY,EAAAC,qBAAA;AAAA,MACZ,OAAA,EAAS,EAAE,GAAG,KAAM;AAAA;AAAA,GACrB;AAEF;AAgBO,MAAM,UACZ,GAAAC,gBAAA;AAAA,EACC;AACD;AAKM,MAAM,cAAiB,GAAA","file":"DHIS2Chart.js","sourcesContent":["import { uid } from \"@hisptz/dhis2-utils\";\nimport * as 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 \"highcharts/modules/exporting\";\nimport \"highcharts/modules/export-data\";\nimport \"highcharts/modules/full-screen\";\nimport \"highcharts/highcharts-more\";\nimport \"highcharts/modules/solid-gauge\";\nimport \"highcharts/modules/accessibility\";\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\tanalytics,\n\tconfig,\n\tcontainerProps,\n\tsetRef,\n}: ChartAnalyticsProps) {\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={setRef}\n\t\t\tcontainerProps={{\n\t\t\t\tid: id.current,\n\t\t\t\tstyle: { width: \"100%\", height: \"100%\" },\n\t\t\t\t...(containerProps ?? {}),\n\t\t\t}}\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.ForwardRefExoticComponent<ChartAnalyticsProps>} - The DHIS2 chart component with forward ref support.\n */\nexport const DHIS2Chart: React.ForwardRefExoticComponent<ChartAnalyticsProps> =\n\tforwardRef<HighchartsReact.RefObject, ChartAnalyticsProps>(\n\t\tChartAnalyticsComponent,\n\t);\n\n/**\n * @deprecated since `v2`. Use `DHIS2Chart` instead\n * */\nexport const ChartAnalytics = DHIS2Chart;\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChartAnalytics/hooks/useChart.ts"],"names":["useState","getChartInstance","useCallback","updateLayout","useEffect"],"mappings":";;;;;AAOO,SAAS,QAAS,CAAA;AAAA,EACxB,EAAA;AAAA,EACA,SAAA;AAAA,EACA;AACD,CAOE,EAAA;AACD,EAAM,MAAA,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAAA,cAAA;AAAA,IACzBC,yBAAiB,CAAA,EAAA,EAAI,SAAW,EAAA,MAAM,EAAE,UAAW;AAAA,GACpD;AAEA,EAAA,MAAM,eAAkB,GAAAC,iBAAA;AAAA,IACvB,CAAC,IAAoB,KAAA;AACpB,MAAA,MAAM,aAAgB,GAAAC,qBAAA,CAAa,MAAQ,EAAA,EAAE,MAAM,CAAA;AACnD,MAAA,MAAM,gBAAgB,EAAE,GAAG,MAAQ,EAAA,MAAA,EAAQ,eAAe,IAAK,EAAA;AAC/D,MAAA,MAAM,aAA4B,GAAAF,yBAAA;AAAA,QACjC,EAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OACD;AACA,MAAS,QAAA,CAAA,aAAA,CAAc,YAAY,CAAA;AAAA,KACpC;AAAA,IACA,CAAC,MAAQ,EAAA,EAAA,EAAI,SAAS;AAAA,GACvB;AAEA,EAAAG,eAAA,CAAU,MAAM;AACf,IAAA,IAAI,aAAa,MAAQ,EAAA;AACxB,MAAA,MAAM,aAA4B,GAAAH,yBAAA;AAAA,QACjC,EAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OACD;AACA,MAAS,QAAA,CAAA,aAAA,CAAc,YAAY,CAAA;AAAA;AACpC,GACE,EAAA,CAAC,SAAW,EAAA,MAAA,EAAQ,EAAE,CAAC,CAAA;AAE1B,EAAO,OAAA;AAAA,IACN,KAAA;AAAA,IACA;AAAA,GACD;AACD","file":"useChart.js","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"]}
+{"version":3,"sources":["../../../../src/components/ChartAnalytics/hooks/useChart.ts"],"names":["useState","getChartInstance","useCallback","updateLayout","useEffect"],"mappings":";;;;;AAOO,SAAS,QAAS,CAAA;AAAA,EACxB,EAAA;AAAA,EACA,SAAA;AAAA,EACA;AACD,CAOE,EAAA;AACD,EAAM,MAAA,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAAA,cAAA;AAAA,IACzBC,yBAAiB,CAAA,EAAA,EAAI,SAAW,EAAA,MAAM,EAAE,UAAW;AAAA,GACpD;AAEA,EAAA,MAAM,eAAkB,GAAAC,iBAAA;AAAA,IACvB,CAAC,IAAoB,KAAA;AACpB,MAAA,MAAM,aAAgB,GAAAC,qBAAA,CAAa,MAAQ,EAAA,EAAE,MAAM,CAAA;AACnD,MAAA,MAAM,gBAAgB,EAAE,GAAG,MAAQ,EAAA,MAAA,EAAQ,eAAe,IAAK,EAAA;AAC/D,MAAA,MAAM,aAA4B,GAAAF,yBAAA;AAAA,QACjC,EAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OACD;AACA,MAAS,QAAA,CAAA,aAAA,CAAc,YAAY,CAAA;AAAA,KACpC;AAAA,IACA,CAAC,MAAQ,EAAA,EAAA,EAAI,SAAS;AAAA,GACvB;AAEA,EAAAG,eAAA,CAAU,MAAM;AACf,IAAA,IAAI,aAAa,MAAQ,EAAA;AACxB,MAAA,MAAM,aAA4B,GAAAH,yBAAA;AAAA,QACjC,EAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OACD;AACA,MAAS,QAAA,CAAA,aAAA,CAAc,YAAY,CAAA;AAAA;AACpC,GACE,EAAA,CAAC,SAAW,EAAA,MAAA,EAAQ,EAAE,CAAC,CAAA;AAE1B,EAAO,OAAA;AAAA,IACN,KAAA;AAAA,IACA;AAAA,GACD;AACD","file":"useChart.js","sourcesContent":["import type { Analytics } from \"@hisptz/dhis2-utils\";\nimport { Options } from \"highcharts\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { DHIS2Chart } from \"../models\";\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?: Options;\n\tchangeChartType: (type: ChartType) => void;\n} {\n\tconst [chart, setChart] = useState<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/components/ChartAnalytics/models/area.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var chart_js = require('../utils/chart.js');
+var line = require('./line');
+
+class DHIS2AreaChart extends line.DHIS2LineChart {
+  getHighchartsType() {
+    return "area";
+  }
+  getPlotOptions() {
+    return {
+      area: {}
+    };
+  }
+  getSeries() {
+    return chart_js.getPointSeries(this.analytics, this.config, "area");
+  }
+}
+class DHISStackedAreaChart extends DHIS2AreaChart {
+  getPlotOptions() {
+    return {
+      area: {
+        stacking: "normal",
+        ...super.getPlotOptions().area
+      }
+    };
+  }
+}
+
+exports.DHIS2AreaChart = DHIS2AreaChart;
+exports.DHISStackedAreaChart = DHISStackedAreaChart;
+//# sourceMappingURL=area.js.map
+//# sourceMappingURL=area.js.map

package/dist/components/ChartAnalytics/models/area.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ChartAnalytics/models/area.ts"],"names":["DHIS2LineChart","getPointSeries"],"mappings":";;;;;AAIO,MAAM,uBAAuBA,mBAAe,CAAA;AAAA,EAClD,iBAA4B,GAAA;AAC3B,IAAO,OAAA,MAAA;AAAA;AACR,EAEA,cAA8B,GAAA;AAC7B,IAAO,OAAA;AAAA,MACN,MAAM;AAAC,KACR;AAAA;AACD,EAEA,SAAiC,GAAA;AAChC,IAAA,OAAOC,uBAAe,CAAA,IAAA,CAAK,SAAW,EAAA,IAAA,CAAK,QAAQ,MAAM,CAAA;AAAA;AAE3D;AAEO,MAAM,6BAA6B,cAAe,CAAA;AAAA,EACxD,cAA8B,GAAA;AAC7B,IAAO,OAAA;AAAA,MACN,IAAM,EAAA;AAAA,QACL,QAAU,EAAA,QAAA;AAAA,QACV,GAAG,KAAM,CAAA,cAAA,EAAiB,CAAA;AAAA;AAC3B,KACD;AAAA;AAEF","file":"area.js","sourcesContent":["import { PlotOptions, SeriesOptionsType } from \"highcharts\";\nimport { getPointSeries } from \"../utils/chart.js\";\nimport { DHIS2LineChart } from \"./line\";\n\nexport class DHIS2AreaChart extends DHIS2LineChart {\n\tgetHighchartsType(): string {\n\t\treturn \"area\";\n\t}\n\n\tgetPlotOptions(): PlotOptions {\n\t\treturn {\n\t\t\tarea: {},\n\t\t};\n\t}\n\n\tgetSeries(): SeriesOptionsType[] {\n\t\treturn getPointSeries(this.analytics, this.config, \"area\");\n\t}\n}\n\nexport class DHISStackedAreaChart extends DHIS2AreaChart {\n\tgetPlotOptions(): PlotOptions {\n\t\treturn {\n\t\t\tarea: {\n\t\t\t\tstacking: \"normal\",\n\t\t\t\t...super.getPlotOptions().area,\n\t\t\t},\n\t\t};\n\t}\n}\n"]}

package/dist/components/ChartAnalytics/models/gauge.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var lodash = require('lodash');
+var index_js = require('./index.js');
+var map = require('../../Map/utils/map');
+var ui = require('@dhis2/ui');
+
+const DEFAULT_PANE_SIZE = "100%";
+const DEFAULT_FONT_SIZE = "28px";
+class DHIS2GaugeChart extends index_js.DHIS2Chart {
+  getHighchartsType() {
+    return "solidgauge";
+  }
+  getPlotOptions() {
+    return {
+      solidgauge: {
+        borderRadius: 4,
+        color: lodash.head(this.config.colors),
+        dataLabels: {
+          y: 5,
+          borderWidth: 0,
+          useHTML: true
+        },
+        borderWidth: 0,
+        borderColor: "white",
+        innerRadius: "60%"
+      }
+    };
+  }
+  getValue() {
+    const { rows, headers } = this.analytics;
+    const valueHeaderIndex = headers.findIndex(
+      ({ name }) => name === "value"
+    );
+    return parseFloat(lodash.get(lodash.head(rows), [valueHeaderIndex]) ?? "");
+  }
+  getPane() {
+    return {
+      center: ["50%", "85%"],
+      size: DEFAULT_PANE_SIZE,
+      startAngle: -90,
+      endAngle: 90,
+      background: [
+        {
+          backgroundColor: "transparent",
+          innerRadius: "60%",
+          outerRadius: "100%",
+          shape: "arc"
+        }
+      ]
+    };
+  }
+  getSeries() {
+    const value = this.getValue();
+    return [
+      {
+        name: this.id,
+        data: [Math.round(value ?? 0)],
+        color: "white",
+        enableMouseTracking: false,
+        dataLabels: {
+          y: 0,
+          borderWidth: 0,
+          verticalAlign: "bottom",
+          style: {
+            fontSize: DEFAULT_FONT_SIZE,
+            color: ui.colors.grey900
+          }
+        },
+        compare: "percent",
+        tooltip: {
+          valueSuffix: "%"
+        }
+      }
+    ];
+  }
+  getYAxis() {
+    const chartColors = this.config.colors ?? [];
+    const legendSet = this.config.legendSet;
+    const legendColor = legendSet ? map.getColorFromLegendSet(legendSet?.legends, this.getValue()) : void 0;
+    return [
+      {
+        min: 0,
+        max: 100,
+        offset: 0,
+        lineWidth: 0,
+        minorTicks: false,
+        tickWidth: 0,
+        type: "linear",
+        labels: {
+          enabled: false,
+          distance: 20,
+          style: {
+            fontSize: "14px"
+          }
+        },
+        maxPadding: 0,
+        pane: 0,
+        minColor: legendColor ?? lodash.head(chartColors),
+        maxColor: legendColor ?? lodash.head(chartColors),
+        margin: 0
+      }
+    ];
+  }
+  getXAxis() {
+    return void 0;
+  }
+}
+
+exports.DHIS2GaugeChart = DHIS2GaugeChart;
+//# sourceMappingURL=gauge.js.map
+//# sourceMappingURL=gauge.js.map

package/dist/components/ChartAnalytics/models/gauge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ChartAnalytics/models/gauge.ts"],"names":["DHIS2Chart","head","get","colors","getColorFromLegendSet"],"mappings":";;;;;;;AAcA,MAAM,iBAAoB,GAAA,MAAA;AAC1B,MAAM,iBAAoB,GAAA,MAAA;AAEnB,MAAM,wBAAwBA,mBAAW,CAAA;AAAA,EAC/C,iBAA4B,GAAA;AAC3B,IAAO,OAAA,YAAA;AAAA;AACR,EAEA,cAA8B,GAAA;AAC7B,IAAO,OAAA;AAAA,MACN,UAAY,EAAA;AAAA,QACX,YAAc,EAAA,CAAA;AAAA,QACd,KAAO,EAAAC,WAAA,CAAK,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA,QAC9B,UAAY,EAAA;AAAA,UACX,CAAG,EAAA,CAAA;AAAA,UACH,WAAa,EAAA,CAAA;AAAA,UACb,OAAS,EAAA;AAAA,SACV;AAAA,QACA,WAAa,EAAA,CAAA;AAAA,QACb,WAAa,EAAA,OAAA;AAAA,QACb,WAAa,EAAA;AAAA;AACd,KACD;AAAA;AACD,EAEA,QAA+B,GAAA;AAC9B,IAAA,MAAM,EAAE,IAAA,EAAM,OAAQ,EAAA,GAAI,IAAK,CAAA,SAAA;AAC/B,IAAA,MAAM,mBAAmB,OAAS,CAAA,SAAA;AAAA,MACjC,CAAC,EAAE,IAAK,EAAA,KAAM,IAAS,KAAA;AAAA,KACxB;AACA,IAAO,OAAA,UAAA,CAAWC,WAAID,WAAK,CAAA,IAAI,GAAG,CAAC,gBAAgB,CAAC,CAAA,IAAK,EAAE,CAAA;AAAA;AAC5D,EAEA,OAAmC,GAAA;AAClC,IAAO,OAAA;AAAA,MACN,MAAA,EAAQ,CAAC,KAAA,EAAO,KAAK,CAAA;AAAA,MACrB,IAAM,EAAA,iBAAA;AAAA,MACN,UAAY,EAAA,GAAA;AAAA,MACZ,QAAU,EAAA,EAAA;AAAA,MACV,UAAY,EAAA;AAAA,QACX;AAAA,UACC,eAAiB,EAAA,aAAA;AAAA,UACjB,WAAa,EAAA,KAAA;AAAA,UACb,WAAa,EAAA,MAAA;AAAA,UACb,KAAO,EAAA;AAAA;AACR;AACD,KACD;AAAA;AACD,EAEA,SAAiC,GAAA;AAChC,IAAM,MAAA,KAAA,GAAQ,KAAK,QAAS,EAAA;AAC5B,IAAO,OAAA;AAAA,MACN;AAAA,QACC,MAAM,IAAK,CAAA,EAAA;AAAA,QACX,MAAM,CAAC,IAAA,CAAK,KAAM,CAAA,KAAA,IAAS,CAAC,CAAC,CAAA;AAAA,QAC7B,KAAO,EAAA,OAAA;AAAA,QACP,mBAAqB,EAAA,KAAA;AAAA,QACrB,UAAY,EAAA;AAAA,UACX,CAAG,EAAA,CAAA;AAAA,UACH,WAAa,EAAA,CAAA;AAAA,UACb,aAAe,EAAA,QAAA;AAAA,UACf,KAAO,EAAA;AAAA,YACN,QAAU,EAAA,iBAAA;AAAA,YACV,OAAOE,SAAO,CAAA;AAAA;AACf,SACD;AAAA,QACA,OAAS,EAAA,SAAA;AAAA,QACT,OAAS,EAAA;AAAA,UACR,WAAa,EAAA;AAAA;AACd;AACD,KACD;AAAA;AACD,EAEA,QAA2B,GAAA;AAC1B,IAAA,MAAM,WAAc,GAAA,IAAA,CAAK,MAAO,CAAA,MAAA,IAAU,EAAC;AAC3C,IAAM,MAAA,SAAA,GAAY,KAAK,MAAO,CAAA,SAAA;AAC9B,IAAM,MAAA,WAAA,GAAc,YACjBC,yBAAsB,CAAA,SAAA,EAAW,SAAS,IAAK,CAAA,QAAA,EAAU,CACzD,GAAA,MAAA;AACH,IAAO,OAAA;AAAA,MACN;AAAA,QACC,GAAK,EAAA,CAAA;AAAA,QACL,GAAK,EAAA,GAAA;AAAA,QACL,MAAQ,EAAA,CAAA;AAAA,QACR,SAAW,EAAA,CAAA;AAAA,QACX,UAAY,EAAA,KAAA;AAAA,QACZ,SAAW,EAAA,CAAA;AAAA,QACX,IAAM,EAAA,QAAA;AAAA,QACN,MAAQ,EAAA;AAAA,UACP,OAAS,EAAA,KAAA;AAAA,UACT,QAAU,EAAA,EAAA;AAAA,UACV,KAAO,EAAA;AAAA,YACN,QAAU,EAAA;AAAA;AACX,SACD;AAAA,QACA,UAAY,EAAA,CAAA;AAAA,QACZ,IAAM,EAAA,CAAA;AAAA,QACN,QAAA,EAAU,WAAe,IAAAH,WAAA,CAAK,WAAW,CAAA;AAAA,QACzC,QAAA,EAAU,WAAe,IAAAA,WAAA,CAAK,WAAW,CAAA;AAAA,QACzC,MAAQ,EAAA;AAAA;AACT,KACD;AAAA;AACD,EAEA,QAAqC,GAAA;AACpC,IAAO,OAAA,MAAA;AAAA;AAET","file":"gauge.js","sourcesContent":["import {\n\ttype PaneBackgroundOptions,\n\ttype PaneOptions,\n\tPlotOptions,\n\tSeriesGaugeOptions,\n\tSeriesOptionsType,\n\tXAxisOptions,\n\ttype YAxisOptions,\n} from \"highcharts\";\nimport { get, head } from \"lodash\";\nimport { DHIS2Chart } from \"./index.js\";\nimport { getColorFromLegendSet } from \"../../Map/utils/map\";\nimport { colors } from \"@dhis2/ui\";\n\nconst DEFAULT_PANE_SIZE = \"100%\";\nconst DEFAULT_FONT_SIZE = \"28px\";\n\nexport class DHIS2GaugeChart extends DHIS2Chart {\n\tgetHighchartsType(): string {\n\t\treturn \"solidgauge\";\n\t}\n\n\tgetPlotOptions(): PlotOptions {\n\t\treturn {\n\t\t\tsolidgauge: {\n\t\t\t\tborderRadius: 4,\n\t\t\t\tcolor: head(this.config.colors),\n\t\t\t\tdataLabels: {\n\t\t\t\t\ty: 5,\n\t\t\t\t\tborderWidth: 0,\n\t\t\t\t\tuseHTML: true,\n\t\t\t\t},\n\t\t\t\tborderWidth: 0,\n\t\t\t\tborderColor: \"white\",\n\t\t\t\tinnerRadius: \"60%\",\n\t\t\t},\n\t\t} as Highcharts.PlotOptions;\n\t}\n\n\tgetValue(): number | undefined {\n\t\tconst { rows, headers } = this.analytics;\n\t\tconst valueHeaderIndex = headers!.findIndex(\n\t\t\t({ name }) => name === \"value\",\n\t\t);\n\t\treturn parseFloat(get(head(rows), [valueHeaderIndex]) ?? \"\");\n\t}\n\n\tgetPane(): PaneOptions | undefined {\n\t\treturn {\n\t\t\tcenter: [\"50%\", \"85%\"],\n\t\t\tsize: DEFAULT_PANE_SIZE,\n\t\t\tstartAngle: -90,\n\t\t\tendAngle: 90,\n\t\t\tbackground: [\n\t\t\t\t{\n\t\t\t\t\tbackgroundColor: \"transparent\",\n\t\t\t\t\tinnerRadius: \"60%\",\n\t\t\t\t\touterRadius: \"100%\",\n\t\t\t\t\tshape: \"arc\",\n\t\t\t\t} as PaneBackgroundOptions,\n\t\t\t],\n\t\t};\n\t}\n\n\tgetSeries(): SeriesOptionsType[] {\n\t\tconst value = this.getValue();\n\t\treturn [\n\t\t\t{\n\t\t\t\tname: this.id,\n\t\t\t\tdata: [Math.round(value ?? 0)],\n\t\t\t\tcolor: \"white\",\n\t\t\t\tenableMouseTracking: false,\n\t\t\t\tdataLabels: {\n\t\t\t\t\ty: 0,\n\t\t\t\t\tborderWidth: 0,\n\t\t\t\t\tverticalAlign: \"bottom\",\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tfontSize: DEFAULT_FONT_SIZE,\n\t\t\t\t\t\tcolor: colors.grey900,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tcompare: \"percent\",\n\t\t\t\ttooltip: {\n\t\t\t\t\tvalueSuffix: \"%\",\n\t\t\t\t},\n\t\t\t},\n\t\t] as unknown as SeriesGaugeOptions[];\n\t}\n\n\tgetYAxis(): YAxisOptions[] {\n\t\tconst chartColors = this.config.colors ?? [];\n\t\tconst legendSet = this.config.legendSet;\n\t\tconst legendColor = legendSet\n\t\t\t? getColorFromLegendSet(legendSet?.legends, this.getValue())\n\t\t\t: undefined;\n\t\treturn [\n\t\t\t{\n\t\t\t\tmin: 0,\n\t\t\t\tmax: 100,\n\t\t\t\toffset: 0,\n\t\t\t\tlineWidth: 0,\n\t\t\t\tminorTicks: false,\n\t\t\t\ttickWidth: 0,\n\t\t\t\ttype: \"linear\",\n\t\t\t\tlabels: {\n\t\t\t\t\tenabled: false,\n\t\t\t\t\tdistance: 20,\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tfontSize: \"14px\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tmaxPadding: 0,\n\t\t\t\tpane: 0,\n\t\t\t\tminColor: legendColor ?? head(chartColors),\n\t\t\t\tmaxColor: legendColor ?? head(chartColors),\n\t\t\t\tmargin: 0,\n\t\t\t} as YAxisOptions,\n\t\t];\n\t}\n\n\tgetXAxis(): XAxisOptions | undefined {\n\t\treturn undefined;\n\t}\n}\n"]}

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

@@ -17,10 +17,14 @@ class DHIS2Chart {
       styledMode: false
     };
   }
+  getPane() {
+    return void 0;
+  }
   getOptions() {
     const options = {
       yAxis: this.getYAxis(),
       chart: this.getChartConfig(),
+      pane: this.getPane(),
       colors: this.config?.colors ?? [
         "#a8bf24",
         "#518cc3",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChartAnalytics/models/index.ts"],"names":["compact"],"mappings":"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","file":"index.js","sourcesContent":["import type { Analytics } from \"@hisptz/dhis2-utils\";\nimport HighCharts from \"highcharts\";\nimport { ChartConfig } from \"../types/props.js\";\nimport { compact } from \"lodash\";\n\nexport abstract class DHIS2Chart {\n\tid: string;\n\tanalytics: Analytics;\n\tconfig: ChartConfig;\n\n\tconstructor(id: string, analytics: Analytics, config: ChartConfig) {\n\t\tthis.id = id;\n\t\tthis.analytics = analytics;\n\t\tthis.config = config;\n\t}\n\n\tabstract getHighchartsType(): string;\n\n\tgetChartConfig(): HighCharts.ChartOptions & any {\n\t\treturn {\n\t\t\trenderTo: this.id,\n\t\t\tzoomType: \"xy\",\n\t\t\ttype: this.getHighchartsType(),\n\t\t\theight: this.config?.height,\n\t\t\tstyledMode: false,\n\t\t};\n\t}\n\n\tgetOptions(): HighCharts.Options {\n\t\tconst options = {\n\t\t\tyAxis: this.getYAxis(),\n\t\t\tchart: this.getChartConfig(),\n\t\t\tcolors: this.config?.colors ?? [\n\t\t\t\t\"#a8bf24\",\n\t\t\t\t\"#518cc3\",\n\t\t\t\t\"#d74554\",\n\t\t\t\t\"#ff9e21\",\n\t\t\t\t\"#968f8f\",\n\t\t\t\t\"#ba3ba1\",\n\t\t\t\t\"#ffda54\",\n\t\t\t\t\"#45beae\",\n\t\t\t\t\"#b98037\",\n\t\t\t\t\"#676767\",\n\t\t\t\t\"#6b2dd4\",\n\t\t\t\t\"#47792c\",\n\t\t\t\t\"#fcbdbd\",\n\t\t\t\t\"#830000\",\n\t\t\t\t\"#a5ffc0\",\n\t\t\t\t\"#000078\",\n\t\t\t\t\"#817c00\",\n\t\t\t\t\"#bdf023\",\n\t\t\t\t\"#fffac4\",\n\t\t\t],\n\t\t\tseries: this.getSeries(),\n\t\t\tplotOptions: this.getPlotOptions(),\n\t\t\ttitle: {\n\t\t\t\ttext: this.config.customTitle\n\t\t\t\t\t? this.config.customTitle\n\t\t\t\t\t: this.config.showFilterAsTitle\n\t\t\t\t\t\t? this.getFilterLabel()\n\t\t\t\t\t\t: \"\",\n\t\t\t},\n\t\t\txAxis: this.getXAxis(),\n\t\t\texporting: this.getExporting(),\n\t\t\tlegend: { enabled: true },\n\t\t\tcredits: { enabled: false },\n\t\t};\n\n\t\tlet overrides = {};\n\n\t\tif (this.config?.highChartOverrides) {\n\t\t\toverrides = {\n\t\t\t\t...(typeof this.config?.highChartOverrides === \"object\"\n\t\t\t\t\t? (this.config?.highChartOverrides ?? {})\n\t\t\t\t\t: this.config?.highChartOverrides(options)),\n\t\t\t};\n\t\t}\n\n\t\treturn {\n\t\t\t...options,\n\t\t\t...overrides,\n\t\t};\n\t}\n\n\tabstract getSeries(): HighCharts.SeriesOptionsType[];\n\n\tabstract getPlotOptions(): HighCharts.PlotOptions;\n\n\tabstract getXAxis(): HighCharts.XAxisOptions | undefined;\n\n\tgetYAxis(): HighCharts.YAxisOptions[] {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: {\n\t\t\t\t\ttext: \"\",\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tcolor: \"#000000\",\n\t\t\t\t\t\tfontWeight: \"normal\",\n\t\t\t\t\t\tfontSize: \"14px\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tlabels: {\n\t\t\t\t\tenabled: true,\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tcolor: \"#000000\",\n\t\t\t\t\t\tfontWeight: \"normal\",\n\t\t\t\t\t\tfontSize: \"14px\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tplotLines: [\n\t\t\t\t\t{\n\t\t\t\t\t\tcolor: \"#000000\",\n\t\t\t\t\t\tdashStyle: \"Solid\",\n\t\t\t\t\t\twidth: 2,\n\t\t\t\t\t\tzIndex: 1000,\n\t\t\t\t\t\tlabel: { text: \"\" },\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tcolor: \"#bbbbbb\",\n\t\t\t\t\t\tdashStyle: \"Solid\",\n\t\t\t\t\t\tzIndex: 1000,\n\t\t\t\t\t\twidth: 2,\n\t\t\t\t\t\tlabel: { text: \"\" },\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t];\n\t}\n\n\tgetExporting(): HighCharts.ExportingOptions {\n\t\tconst name = this.config?.name ?? \"chart\";\n\t\treturn {\n\t\t\tfilename: `${name}`,\n\t\t\tsourceWidth: 1200,\n\t\t\tbuttons: {\n\t\t\t\tcontextButton: {\n\t\t\t\t\tenabled: false,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate getFilterLabel() {\n\t\tconst filters = this.config.layout.filter ?? [];\n\t\tconst labels = filters.map((filter) => {\n\t\t\tconst dimensions =\n\t\t\t\tthis.analytics.metaData?.dimensions[filter] ?? [];\n\t\t\treturn dimensions.map((dimension) => {\n\t\t\t\tconst filterItem = this.analytics.metaData?.items[dimension];\n\t\t\t\treturn filterItem?.name;\n\t\t\t});\n\t\t});\n\t\treturn compact(labels.flat()).join(\", \");\n\t}\n}\n"]}
+{"version":3,"sources":["../../../../src/components/ChartAnalytics/models/index.ts"],"names":["compact"],"mappings":"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","file":"index.js","sourcesContent":["import type { Analytics } from \"@hisptz/dhis2-utils\";\nimport { ChartConfig } from \"../types/props.js\";\nimport { compact } from \"lodash\";\nimport {\n\tChartOptions,\n\tExportingOptions,\n\tOptions,\n\tPaneOptions,\n\tPlotOptions,\n\tSeriesOptionsType,\n\tXAxisOptions,\n\tYAxisOptions,\n} from \"highcharts\";\n\nexport abstract class DHIS2Chart {\n\tid: string;\n\tanalytics: Analytics;\n\tconfig: ChartConfig;\n\n\tconstructor(id: string, analytics: Analytics, config: ChartConfig) {\n\t\tthis.id = id;\n\t\tthis.analytics = analytics;\n\t\tthis.config = config;\n\t}\n\n\tabstract getHighchartsType(): string;\n\n\tgetChartConfig(): ChartOptions & any {\n\t\treturn {\n\t\t\trenderTo: this.id,\n\t\t\tzoomType: \"xy\",\n\t\t\ttype: this.getHighchartsType(),\n\t\t\theight: this.config?.height,\n\t\t\tstyledMode: false,\n\t\t};\n\t}\n\n\tgetPane(): PaneOptions | undefined {\n\t\treturn undefined;\n\t}\n\n\tgetOptions(): Options {\n\t\tconst options = {\n\t\t\tyAxis: this.getYAxis(),\n\t\t\tchart: this.getChartConfig(),\n\t\t\tpane: this.getPane(),\n\t\t\tcolors: this.config?.colors ?? [\n\t\t\t\t\"#a8bf24\",\n\t\t\t\t\"#518cc3\",\n\t\t\t\t\"#d74554\",\n\t\t\t\t\"#ff9e21\",\n\t\t\t\t\"#968f8f\",\n\t\t\t\t\"#ba3ba1\",\n\t\t\t\t\"#ffda54\",\n\t\t\t\t\"#45beae\",\n\t\t\t\t\"#b98037\",\n\t\t\t\t\"#676767\",\n\t\t\t\t\"#6b2dd4\",\n\t\t\t\t\"#47792c\",\n\t\t\t\t\"#fcbdbd\",\n\t\t\t\t\"#830000\",\n\t\t\t\t\"#a5ffc0\",\n\t\t\t\t\"#000078\",\n\t\t\t\t\"#817c00\",\n\t\t\t\t\"#bdf023\",\n\t\t\t\t\"#fffac4\",\n\t\t\t],\n\t\t\tseries: this.getSeries(),\n\t\t\tplotOptions: this.getPlotOptions(),\n\t\t\ttitle: {\n\t\t\t\ttext: this.config.customTitle\n\t\t\t\t\t? this.config.customTitle\n\t\t\t\t\t: this.config.showFilterAsTitle\n\t\t\t\t\t\t? this.getFilterLabel()\n\t\t\t\t\t\t: \"\",\n\t\t\t},\n\t\t\txAxis: this.getXAxis(),\n\t\t\texporting: this.getExporting(),\n\t\t\tlegend: { enabled: true },\n\t\t\tcredits: { enabled: false },\n\t\t};\n\n\t\tlet overrides = {};\n\n\t\tif (this.config?.highChartOverrides) {\n\t\t\toverrides = {\n\t\t\t\t...(typeof this.config?.highChartOverrides === \"object\"\n\t\t\t\t\t? (this.config?.highChartOverrides ?? {})\n\t\t\t\t\t: this.config?.highChartOverrides(options)),\n\t\t\t};\n\t\t}\n\n\t\treturn {\n\t\t\t...options,\n\t\t\t...overrides,\n\t\t};\n\t}\n\n\tabstract getSeries(): SeriesOptionsType[];\n\n\tabstract getPlotOptions(): PlotOptions;\n\n\tabstract getXAxis(): XAxisOptions | undefined;\n\n\tgetYAxis(): YAxisOptions[] {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: {\n\t\t\t\t\ttext: \"\",\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tcolor: \"#000000\",\n\t\t\t\t\t\tfontWeight: \"normal\",\n\t\t\t\t\t\tfontSize: \"14px\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tlabels: {\n\t\t\t\t\tenabled: true,\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tcolor: \"#000000\",\n\t\t\t\t\t\tfontWeight: \"normal\",\n\t\t\t\t\t\tfontSize: \"14px\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tplotLines: [\n\t\t\t\t\t{\n\t\t\t\t\t\tcolor: \"#000000\",\n\t\t\t\t\t\tdashStyle: \"Solid\",\n\t\t\t\t\t\twidth: 2,\n\t\t\t\t\t\tzIndex: 1000,\n\t\t\t\t\t\tlabel: { text: \"\" },\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tcolor: \"#bbbbbb\",\n\t\t\t\t\t\tdashStyle: \"Solid\",\n\t\t\t\t\t\tzIndex: 1000,\n\t\t\t\t\t\twidth: 2,\n\t\t\t\t\t\tlabel: { text: \"\" },\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t];\n\t}\n\n\tgetExporting(): ExportingOptions {\n\t\tconst name = this.config?.name ?? \"chart\";\n\t\treturn {\n\t\t\tfilename: `${name}`,\n\t\t\tsourceWidth: 1200,\n\t\t\tbuttons: {\n\t\t\t\tcontextButton: {\n\t\t\t\t\tenabled: false,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate getFilterLabel() {\n\t\tconst filters = this.config.layout.filter ?? [];\n\t\tconst labels = filters.map((filter) => {\n\t\t\tconst dimensions =\n\t\t\t\tthis.analytics.metaData?.dimensions[filter] ?? [];\n\t\t\treturn dimensions.map((dimension) => {\n\t\t\t\tconst filterItem = this.analytics.metaData?.items[dimension];\n\t\t\t\treturn filterItem?.name;\n\t\t\t});\n\t\t});\n\t\treturn compact(labels.flat()).join(\", \");\n\t}\n}\n"]}

package/dist/components/ChartAnalytics/models/radar.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var line = require('./line');
+
+class DHIS2RadarChart extends line.DHIS2LineChart {
+  getChartConfig() {
+    return {
+      ...super.getChartConfig(),
+      polar: true
+    };
+  }
+}
+
+exports.DHIS2RadarChart = DHIS2RadarChart;
+//# sourceMappingURL=radar.js.map
+//# sourceMappingURL=radar.js.map

package/dist/components/ChartAnalytics/models/radar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ChartAnalytics/models/radar.ts"],"names":["DHIS2LineChart"],"mappings":";;;;AAEO,MAAM,wBAAwBA,mBAAe,CAAA;AAAA,EACnD,cAAsB,GAAA;AACrB,IAAO,OAAA;AAAA,MACN,GAAG,MAAM,cAAe,EAAA;AAAA,MACxB,KAAO,EAAA;AAAA,KACR;AAAA;AAEF","file":"radar.js","sourcesContent":["import { DHIS2LineChart } from \"./line\";\n\nexport class DHIS2RadarChart extends DHIS2LineChart {\n\tgetChartConfig(): any {\n\t\treturn {\n\t\t\t...super.getChartConfig(),\n\t\t\tpolar: true,\n\t\t};\n\t}\n}\n"]}

package/dist/components/ChartAnalytics/models/scatter.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var line = require('./line');
+var chart = require('../utils/chart');
+
+class DHIS2ScatterChart extends line.DHIS2LineChart {
+  getHighchartsType() {
+    return "scatter";
+  }
+  getSeries() {
+    return chart.getPointSeries(this.analytics, this.config, "scatter");
+  }
+}
+
+exports.DHIS2ScatterChart = DHIS2ScatterChart;
+//# sourceMappingURL=scatter.js.map
+//# sourceMappingURL=scatter.js.map

package/dist/components/ChartAnalytics/models/scatter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ChartAnalytics/models/scatter.ts"],"names":["DHIS2LineChart","getPointSeries"],"mappings":";;;;;AAIO,MAAM,0BAA0BA,mBAAe,CAAA;AAAA,EACrD,iBAA4B,GAAA;AAC3B,IAAO,OAAA,SAAA;AAAA;AACR,EAEA,SAAiC,GAAA;AAChC,IAAA,OAAOC,oBAAe,CAAA,IAAA,CAAK,SAAW,EAAA,IAAA,CAAK,QAAQ,SAAS,CAAA;AAAA;AAE9D","file":"scatter.js","sourcesContent":["import { DHIS2LineChart } from \"./line\";\nimport { SeriesOptionsType } from \"highcharts\";\nimport { getPointSeries } from \"../utils/chart\";\n\nexport class DHIS2ScatterChart extends DHIS2LineChart {\n\tgetHighchartsType(): string {\n\t\treturn \"scatter\";\n\t}\n\n\tgetSeries(): SeriesOptionsType[] {\n\t\treturn getPointSeries(this.analytics, this.config, \"scatter\");\n\t}\n}\n"]}

package/dist/components/ChartAnalytics/services/export.js

@@ -1,19 +1,14 @@
 'use strict';
 
-var HighChartsExportCSV = require('highcharts/modules/export-data.js');
-var HighChartsExport = require('highcharts/modules/exporting.js');
-var HighChartsFullScreen = require('highcharts/modules/full-screen.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var HighChartsExportCSV__default = /*#__PURE__*/_interopDefault(HighChartsExportCSV);
-var HighChartsExport__default = /*#__PURE__*/_interopDefault(HighChartsExport);
-var HighChartsFullScreen__default = /*#__PURE__*/_interopDefault(HighChartsFullScreen);
+require('highcharts/modules/exporting');
+require('highcharts/modules/export-data');
+require('highcharts/modules/full-screen');
+require('highcharts/modules/accessibility');
 
 function setupHighchartsModules(highcharts) {
-  HighChartsExport__default.default(highcharts);
-  HighChartsExportCSV__default.default(highcharts);
-  HighChartsFullScreen__default.default(highcharts);
+  console.warn(
+    `Due to highchart changes this is no longer needed. You can remove this call.`
+  );
 }
 function onFullScreenView(chartRef, options) {
   chartRef?.chart?.fullscreen.toggle();

package/dist/components/ChartAnalytics/services/export.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChartAnalytics/services/export.ts"],"names":["HighChartsExport","HighChartsExportCSV","HighChartsFullScreen"],"mappings":";;;;;;;;;;;;AAMO,SAAS,uBAAuB,UAA+B,EAAA;AACrE,EAAAA,iCAAA,CAAiB,UAAU,CAAA;AAC3B,EAAAC,oCAAA,CAAoB,UAAU,CAAA;AAC9B,EAAAC,qCAAA,CAAqB,UAAU,CAAA;AAChC;AAEO,SAAS,gBAAA,CACf,UACA,OACC,EAAA;AACD,EAAU,QAAA,EAAA,KAAA,EAAO,WAAW,MAAO,EAAA;AACpC;AAEO,SAAS,aAAA,CACf,UACA,OACC,EAAA;AACD,EAAU,QAAA,EAAA,KAAA,CAAM,YAAY,EAAE,IAAA,EAAM,mBAAqB,EAAA,OAAA,IAAW,EAAE,CAAA;AACvE;AAEO,SAAS,aAAA,CACf,UACA,OACC,EAAA;AACD,EAAA,QAAA,EAAU,MAAM,WAAY,EAAA;AAC7B;AAEO,MAAM,eAAkB,GAAA,CAC9B,QACA,EAAA,IAAA,EACA,OACI,KAAA;AACJ,EAAU,QAAA,EAAA,KAAA,CAAM,WAAY,CAAA,EAAE,IAAM,EAAA,CAAA,MAAA,EAAS,IAAI,CAAG,CAAA,EAAA,EAAG,OAAW,IAAA,EAAE,CAAA;AACrE;AAEa,MAAA,aAAA,GAAgB,CAC5B,QAAA,EACA,IACI,KAAA;AACJ,EAAM,MAAA,OAAA,GAAU,UAAU,KAAM,CAAA,OAAA;AAChC,EAAA,QAAA,EAAU,OAAO,MAAO,CAAA;AAAA,IACvB,GAAG,OAAA;AAAA,IACH,SAAW,EAAA;AAAA,MACV,GAAG,OAAS,EAAA,SAAA;AAAA,MACZ,SAAW,EAAA;AAAA;AACZ,GACA,CAAA;AACF","file":"export.js","sourcesContent":["import Highcharts from \"highcharts\";\nimport HighchartsReact from \"highcharts-react-official\";\nimport HighChartsExportCSV from \"highcharts/modules/export-data.js\";\nimport HighChartsExport from \"highcharts/modules/exporting.js\";\nimport HighChartsFullScreen from \"highcharts/modules/full-screen.js\";\n\nexport function setupHighchartsModules(highcharts: typeof Highcharts) {\n\tHighChartsExport(highcharts);\n\tHighChartsExportCSV(highcharts);\n\tHighChartsFullScreen(highcharts);\n}\n\nexport function onFullScreenView(\n\tchartRef: HighchartsReact.RefObject,\n\toptions?: Highcharts.Options,\n) {\n\tchartRef?.chart?.fullscreen.toggle();\n}\n\nexport function onPDFDownload(\n\tchartRef: HighchartsReact.RefObject,\n\toptions?: Highcharts.Options,\n) {\n\tchartRef?.chart.exportChart({ type: \"application/pdf\" }, options ?? {});\n}\n\nexport function onCSVDownload(\n\tchartRef: HighchartsReact.RefObject,\n\toptions?: Highcharts.Options,\n) {\n\tchartRef?.chart.downloadCSV();\n}\n\nexport const onImageDownload = (\n\tchartRef: HighchartsReact.RefObject,\n\ttype: \"png\" | \"svg+xml\" | \"jpeg\",\n\toptions?: Highcharts.Options,\n) => {\n\tchartRef?.chart.exportChart({ type: `image/${type}` }, options ?? {});\n};\n\nexport const onViewAsTable = (\n\tchartRef: HighchartsReact.RefObject,\n\tshow: boolean,\n) => {\n\tconst options = chartRef?.chart.options;\n\tchartRef?.chart?.update({\n\t\t...options,\n\t\texporting: {\n\t\t\t...options?.exporting,\n\t\t\tshowTable: show,\n\t\t},\n\t});\n};\n"]}
+{"version":3,"sources":["../../../../src/components/ChartAnalytics/services/export.ts"],"names":[],"mappings":";;;;;;;AAUO,SAAS,uBAAuB,UAA+B,EAAA;AACrE,EAAQ,OAAA,CAAA,IAAA;AAAA,IACP,CAAA,4EAAA;AAAA,GACD;AACD;AAEO,SAAS,gBAAA,CACf,UACA,OACC,EAAA;AACD,EAAU,QAAA,EAAA,KAAA,EAAO,WAAW,MAAO,EAAA;AACpC;AAEO,SAAS,aAAA,CACf,UACA,OACC,EAAA;AACD,EAAU,QAAA,EAAA,KAAA,CAAM,YAAY,EAAE,IAAA,EAAM,mBAAqB,EAAA,OAAA,IAAW,EAAE,CAAA;AACvE;AAEO,SAAS,aAAA,CACf,UACA,OACC,EAAA;AACD,EAAA,QAAA,EAAU,MAAM,WAAY,EAAA;AAC7B;AAEO,MAAM,eAAkB,GAAA,CAC9B,QACA,EAAA,IAAA,EACA,OACI,KAAA;AACJ,EAAU,QAAA,EAAA,KAAA,CAAM,WAAY,CAAA,EAAE,IAAM,EAAA,CAAA,MAAA,EAAS,IAAI,CAAG,CAAA,EAAA,EAAG,OAAW,IAAA,EAAE,CAAA;AACrE;AAEa,MAAA,aAAA,GAAgB,CAC5B,QAAA,EACA,IACI,KAAA;AACJ,EAAM,MAAA,OAAA,GAAU,UAAU,KAAM,CAAA,OAAA;AAChC,EAAA,QAAA,EAAU,OAAO,MAAO,CAAA;AAAA,IACvB,GAAG,OAAA;AAAA,IACH,SAAW,EAAA;AAAA,MACV,GAAG,OAAS,EAAA,SAAA;AAAA,MACZ,SAAW,EAAA;AAAA;AACZ,GACA,CAAA;AACF","file":"export.js","sourcesContent":["import * as Highcharts from \"highcharts\";\nimport HighchartsReact from \"highcharts-react-official\";\nimport \"highcharts/modules/exporting\";\nimport \"highcharts/modules/export-data\";\nimport \"highcharts/modules/full-screen\";\nimport \"highcharts/modules/accessibility\";\n\n/**\n * @deprecated since `v2`. Not needed for highcharts > v12\n * */\nexport function setupHighchartsModules(highcharts: typeof Highcharts) {\n\tconsole.warn(\n\t\t`Due to highchart changes this is no longer needed. You can remove this call.`,\n\t);\n}\n\nexport function onFullScreenView(\n\tchartRef: HighchartsReact.RefObject,\n\toptions?: Highcharts.Options,\n) {\n\tchartRef?.chart?.fullscreen.toggle();\n}\n\nexport function onPDFDownload(\n\tchartRef: HighchartsReact.RefObject,\n\toptions?: Highcharts.Options,\n) {\n\tchartRef?.chart.exportChart({ type: \"application/pdf\" }, options ?? {});\n}\n\nexport function onCSVDownload(\n\tchartRef: HighchartsReact.RefObject,\n\toptions?: Highcharts.Options,\n) {\n\tchartRef?.chart.downloadCSV();\n}\n\nexport const onImageDownload = (\n\tchartRef: HighchartsReact.RefObject,\n\ttype: \"png\" | \"svg+xml\" | \"jpeg\",\n\toptions?: Highcharts.Options,\n) => {\n\tchartRef?.chart.exportChart({ type: `image/${type}` }, options ?? {});\n};\n\nexport const onViewAsTable = (\n\tchartRef: HighchartsReact.RefObject,\n\tshow: boolean,\n) => {\n\tconst options = chartRef?.chart.options;\n\tchartRef?.chart?.update({\n\t\t...options,\n\t\texporting: {\n\t\t\t...options?.exporting,\n\t\t\tshowTable: show,\n\t\t},\n\t});\n};\n"]}

package/dist/components/ChartAnalytics/utils/chart.js

@@ -6,6 +6,10 @@ var line_js = require('../models/line.js');
 var multiSeries_js = require('../models/multi-series.js');
 var pie_js = require('../models/pie.js');
 var bar_js = require('../models/bar.js');
+var gauge = require('../models/gauge');
+var area = require('../models/area');
+var radar = require('../models/radar');
+var scatter = require('../models/scatter');
 
 function getDimensionHeaderIndex(headers, name) {
   return lodash.findIndex(headers, { name });
@@ -121,8 +125,18 @@ function getChartInstance(id, analytics, config) {
       return new pie_js.DHIS2PieChart(id, analytics, config);
     case "line":
       return new line_js.DHIS2LineChart(id, analytics, config);
+    case "area":
+      return new area.DHIS2AreaChart(id, analytics, config);
+    case "stacked-area":
+      return new area.DHISStackedAreaChart(id, analytics, config);
     case "multi-series":
       return new multiSeries_js.DHIS2MultiSeriesChart(id, analytics, config);
+    case "gauge":
+      return new gauge.DHIS2GaugeChart(id, analytics, config);
+    case "radar":
+      return new radar.DHIS2RadarChart(id, analytics, config);
+    case "scatter":
+      return new scatter.DHIS2ScatterChart(id, analytics, config);
     default:
       throw new Error(`Unsupported chart type: ${config.type}`);
   }

package/dist/components/ChartAnalytics/utils/chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChartAnalytics/utils/chart.ts"],"names":["findIndex","header","head","find","row","compact","set","isEmpty","DHIS2ColumnChart","DHIS2BarChart","DHIS2StackedBarChart","DHIS2StackedColumnChart","DHIS2PieChart","DHIS2LineChart","DHIS2MultiSeriesChart"],"mappings":"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","file":"chart.js","sourcesContent":["import type {\n\tAnalytics,\n\tAnalyticsHeader,\n\tAnalyticsMetadata,\n} from \"@hisptz/dhis2-utils\";\nimport { compact, find, findIndex, head, isEmpty, set } from \"lodash\";\nimport { DHIS2Chart } from \"../models/index.js\";\nimport { DHIS2ColumnChart, DHIS2StackedColumnChart } from \"../models/column.js\";\nimport { DHIS2LineChart } from \"../models/line.js\";\nimport { DHIS2MultiSeriesChart } from \"../models/multi-series.js\";\nimport { DHIS2PieChart } from \"../models/pie.js\";\nimport { ChartConfig, ChartType } from \"../types/props.js\";\nimport { DHIS2BarChart, DHIS2StackedBarChart } from \"../models/bar.js\";\n\nexport function getDimensionHeaderIndex(\n\theaders: AnalyticsHeader[],\n\tname: string,\n): number {\n\treturn findIndex(headers, { name });\n}\n\nexport function getPointSeries(\n\tanalytics: Analytics,\n\tconfig: ChartConfig,\n\thighchartsType: string,\n) {\n\tconst series: string[] = config.layout.series;\n\n\treturn series.map((seriesName: string) => {\n\t\tconst header = analytics?.headers?.find(\n\t\t\t(header: any) => header.name === seriesName,\n\t\t);\n\t\tif (!header) {\n\t\t\treturn undefined;\n\t\t}\n\t\tif (analytics?.metaData) {\n\t\t\treturn getColumnSeries(analytics, header, config, highchartsType);\n\t\t}\n\t})[0];\n}\n\nexport function getColumnSeries(\n\tanalytics: Analytics,\n\theader: AnalyticsHeader,\n\tconfig: ChartConfig,\n\thighchartsType: string,\n): any {\n\tconst headerIndex = analytics?.headers?.findIndex(\n\t\t(h: { name: any }) => header.name === h.name,\n\t);\n\tconst valueIndex = analytics?.headers?.findIndex(\n\t\t(h: { name: string }) => h.name === \"value\",\n\t);\n\n\tconst colors = config.colors ?? [];\n\n\tconst { items, dimensions } = analytics?.metaData ?? {};\n\tconst categoriesDimension = config.layout.category;\n\n\tconst seriesDimensionValues: string[] =\n\t\tdimensions?.[header.name as \"dx\" | \"ou\" | \"pe\"] ?? [];\n\n\treturn head(\n\t\tcategoriesDimension?.map((categoryDimension: string) => {\n\t\t\tconst categories: string[] = dimensions?.[\n\t\t\t\tcategoryDimension as \"dx\" | \"ou\" | \"pe\"\n\t\t\t] as any;\n\t\t\tconst categoryDimensionIndex = analytics?.headers?.findIndex(\n\t\t\t\t(h: { name: string }) => h.name === categoryDimension,\n\t\t\t);\n\t\t\treturn seriesDimensionValues?.map(\n\t\t\t\t(seriesDimensionValue: string, index) => {\n\t\t\t\t\tconst data = categories?.map((category: string) => {\n\t\t\t\t\t\tconst row = find(\n\t\t\t\t\t\t\tanalytics?.rows,\n\t\t\t\t\t\t\t(row: any) =>\n\t\t\t\t\t\t\t\trow[headerIndex ?? -1] ===\n\t\t\t\t\t\t\t\t\tseriesDimensionValue &&\n\t\t\t\t\t\t\t\trow[categoryDimensionIndex ?? -1] === category,\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn row?.[valueIndex ?? -1]\n\t\t\t\t\t\t\t? parseFloat(row?.[valueIndex ?? -1])\n\t\t\t\t\t\t\t: null;\n\t\t\t\t\t});\n\t\t\t\t\treturn {\n\t\t\t\t\t\tid: seriesDimensionValue,\n\t\t\t\t\t\tname: items?.[seriesDimensionValue as any]?.name,\n\t\t\t\t\t\tdata,\n\t\t\t\t\t\ttype: highchartsType,\n\t\t\t\t\t\tcolor: colors[index % colors.length],\n\t\t\t\t\t};\n\t\t\t\t},\n\t\t\t);\n\t\t}),\n\t);\n}\n\nfunction getCategories(\n\t{ name }: AnalyticsHeader,\n\t{ items, dimensions }: AnalyticsMetadata,\n): string[] {\n\tconst categories: string[] = dimensions?.[\n\t\tname as \"dx\" | \"ou\" | \"pe\"\n\t] as any;\n\n\treturn categories?.map((category: string) => {\n\t\treturn items[category as any]?.name ?? \"\";\n\t}) as unknown as string[];\n}\n\nexport function getAllCategories(\n\tanalytics: Analytics,\n\tconfig: ChartConfig,\n): string[] {\n\tconst categories = config.layout.category;\n\n\treturn compact(\n\t\tcategories?.map((category: string) => {\n\t\t\tconst header = analytics?.headers?.find(\n\t\t\t\t(header: any) => header.name === category,\n\t\t\t);\n\t\t\tif (!header) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\tif (analytics?.metaData) {\n\t\t\t\treturn getCategories(header, analytics?.metaData);\n\t\t\t}\n\t\t}),\n\t)[0];\n}\n\nexport function updateLayout(\n\tconfig: ChartConfig,\n\t{ type }: { type: ChartType },\n) {\n\tif (type === config.type) {\n\t\treturn config.layout;\n\t}\n\n\tconst updatedLayout = { ...config.layout };\n\n\tswitch (type) {\n\t\tcase \"pie\":\n\t\t\tset(updatedLayout, \"category\", []);\n\t\t\tif (isEmpty(updatedLayout.series)) {\n\t\t\t\tif (!isEmpty(config.layout.category)) {\n\t\t\t\t\tset(updatedLayout, \"series\", [\n\t\t\t\t\t\thead(config.layout.category),\n\t\t\t\t\t]);\n\t\t\t\t} else {\n\t\t\t\t\tthrow new Error(\"Invalid layout for pie chart\");\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (updatedLayout.series.length > 1) {\n\t\t\t\tset(updatedLayout, \"series\", [head(updatedLayout.series)]);\n\t\t\t}\n\t}\n\n\treturn updatedLayout;\n}\n\nexport function getChartInstance(\n\tid: string,\n\tanalytics: Analytics,\n\tconfig: ChartConfig,\n): DHIS2Chart {\n\tswitch (config.type) {\n\t\tcase \"column\":\n\t\t\treturn new DHIS2ColumnChart(id, analytics, config);\n\t\tcase \"bar\":\n\t\t\treturn new DHIS2BarChart(id, analytics, config);\n\t\tcase \"stacked-bar\":\n\t\t\treturn new DHIS2StackedBarChart(id, analytics, config);\n\t\tcase \"stacked-column\":\n\t\t\treturn new DHIS2StackedColumnChart(id, analytics, config);\n\t\tcase \"pie\":\n\t\t\treturn new DHIS2PieChart(id, analytics, config);\n\t\tcase \"line\":\n\t\t\treturn new DHIS2LineChart(id, analytics, config);\n\t\tcase \"multi-series\":\n\t\t\treturn new DHIS2MultiSeriesChart(id, analytics, config);\n\t\tdefault:\n\t\t\tthrow new Error(`Unsupported chart type: ${config.type}`);\n\t}\n}\n"]}
+{"version":3,"sources":["../../../../src/components/ChartAnalytics/utils/chart.ts"],"names":["findIndex","header","head","find","row","compact","set","isEmpty","DHIS2ColumnChart","DHIS2BarChart","DHIS2StackedBarChart","DHIS2StackedColumnChart","DHIS2PieChart","DHIS2LineChart","DHIS2AreaChart","DHISStackedAreaChart","DHIS2MultiSeriesChart","DHIS2GaugeChart","DHIS2RadarChart","DHIS2ScatterChart"],"mappings":"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","file":"chart.js","sourcesContent":["import type {\n\tAnalytics,\n\tAnalyticsHeader,\n\tAnalyticsMetadata,\n} from \"@hisptz/dhis2-utils\";\nimport { compact, find, findIndex, head, isEmpty, set } from \"lodash\";\nimport { DHIS2Chart } from \"../models\";\nimport { DHIS2ColumnChart, DHIS2StackedColumnChart } from \"../models/column.js\";\nimport { DHIS2LineChart } from \"../models/line.js\";\nimport { DHIS2MultiSeriesChart } from \"../models/multi-series.js\";\nimport { DHIS2PieChart } from \"../models/pie.js\";\nimport { ChartConfig, ChartType } from \"../types/props.js\";\nimport { DHIS2BarChart, DHIS2StackedBarChart } from \"../models/bar.js\";\nimport { DHIS2GaugeChart } from \"../models/gauge\";\nimport { DHIS2AreaChart, DHISStackedAreaChart } from \"../models/area\";\nimport { DHIS2RadarChart } from \"../models/radar\";\nimport { DHIS2ScatterChart } from \"../models/scatter\";\n\nexport function getDimensionHeaderIndex(\n\theaders: AnalyticsHeader[],\n\tname: string,\n): number {\n\treturn findIndex(headers, { name });\n}\n\nexport function getPointSeries(\n\tanalytics: Analytics,\n\tconfig: ChartConfig,\n\thighchartsType: string,\n) {\n\tconst series: string[] = config.layout.series;\n\n\treturn series.map((seriesName: string) => {\n\t\tconst header = analytics?.headers?.find(\n\t\t\t(header: any) => header.name === seriesName,\n\t\t);\n\t\tif (!header) {\n\t\t\treturn undefined;\n\t\t}\n\t\tif (analytics?.metaData) {\n\t\t\treturn getColumnSeries(analytics, header, config, highchartsType);\n\t\t}\n\t})[0];\n}\n\nexport function getColumnSeries(\n\tanalytics: Analytics,\n\theader: AnalyticsHeader,\n\tconfig: ChartConfig,\n\thighchartsType: string,\n): any {\n\tconst headerIndex = analytics?.headers?.findIndex(\n\t\t(h: { name: any }) => header.name === h.name,\n\t);\n\tconst valueIndex = analytics?.headers?.findIndex(\n\t\t(h: { name: string }) => h.name === \"value\",\n\t);\n\n\tconst colors = config.colors ?? [];\n\n\tconst { items, dimensions } = analytics?.metaData ?? {};\n\tconst categoriesDimension = config.layout.category;\n\n\tconst seriesDimensionValues: string[] =\n\t\tdimensions?.[header.name as \"dx\" | \"ou\" | \"pe\"] ?? [];\n\n\treturn head(\n\t\tcategoriesDimension?.map((categoryDimension: string) => {\n\t\t\tconst categories: string[] = dimensions?.[\n\t\t\t\tcategoryDimension as \"dx\" | \"ou\" | \"pe\"\n\t\t\t] as any;\n\t\t\tconst categoryDimensionIndex = analytics?.headers?.findIndex(\n\t\t\t\t(h: { name: string }) => h.name === categoryDimension,\n\t\t\t);\n\t\t\treturn seriesDimensionValues?.map(\n\t\t\t\t(seriesDimensionValue: string, index) => {\n\t\t\t\t\tconst data = categories?.map((category: string) => {\n\t\t\t\t\t\tconst row = find(\n\t\t\t\t\t\t\tanalytics?.rows,\n\t\t\t\t\t\t\t(row: any) =>\n\t\t\t\t\t\t\t\trow[headerIndex ?? -1] ===\n\t\t\t\t\t\t\t\t\tseriesDimensionValue &&\n\t\t\t\t\t\t\t\trow[categoryDimensionIndex ?? -1] === category,\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn row?.[valueIndex ?? -1]\n\t\t\t\t\t\t\t? parseFloat(row?.[valueIndex ?? -1])\n\t\t\t\t\t\t\t: null;\n\t\t\t\t\t});\n\t\t\t\t\treturn {\n\t\t\t\t\t\tid: seriesDimensionValue,\n\t\t\t\t\t\tname: items?.[seriesDimensionValue as any]?.name,\n\t\t\t\t\t\tdata,\n\t\t\t\t\t\ttype: highchartsType,\n\t\t\t\t\t\tcolor: colors[index % colors.length],\n\t\t\t\t\t};\n\t\t\t\t},\n\t\t\t);\n\t\t}),\n\t);\n}\n\nfunction getCategories(\n\t{ name }: AnalyticsHeader,\n\t{ items, dimensions }: AnalyticsMetadata,\n): string[] {\n\tconst categories: string[] = dimensions?.[\n\t\tname as \"dx\" | \"ou\" | \"pe\"\n\t] as any;\n\n\treturn categories?.map((category: string) => {\n\t\treturn items[category as any]?.name ?? \"\";\n\t}) as unknown as string[];\n}\n\nexport function getAllCategories(\n\tanalytics: Analytics,\n\tconfig: ChartConfig,\n): string[] {\n\tconst categories = config.layout.category;\n\n\treturn compact(\n\t\tcategories?.map((category: string) => {\n\t\t\tconst header = analytics?.headers?.find(\n\t\t\t\t(header: any) => header.name === category,\n\t\t\t);\n\t\t\tif (!header) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\tif (analytics?.metaData) {\n\t\t\t\treturn getCategories(header, analytics?.metaData);\n\t\t\t}\n\t\t}),\n\t)[0];\n}\n\nexport function updateLayout(\n\tconfig: ChartConfig,\n\t{ type }: { type: ChartType },\n) {\n\tif (type === config.type) {\n\t\treturn config.layout;\n\t}\n\n\tconst updatedLayout = { ...config.layout };\n\n\tswitch (type) {\n\t\tcase \"pie\":\n\t\t\tset(updatedLayout, \"category\", []);\n\t\t\tif (isEmpty(updatedLayout.series)) {\n\t\t\t\tif (!isEmpty(config.layout.category)) {\n\t\t\t\t\tset(updatedLayout, \"series\", [\n\t\t\t\t\t\thead(config.layout.category),\n\t\t\t\t\t]);\n\t\t\t\t} else {\n\t\t\t\t\tthrow new Error(\"Invalid layout for pie chart\");\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (updatedLayout.series.length > 1) {\n\t\t\t\tset(updatedLayout, \"series\", [head(updatedLayout.series)]);\n\t\t\t}\n\t}\n\n\treturn updatedLayout;\n}\n\nexport function getChartInstance(\n\tid: string,\n\tanalytics: Analytics,\n\tconfig: ChartConfig,\n): DHIS2Chart {\n\tswitch (config.type) {\n\t\tcase \"column\":\n\t\t\treturn new DHIS2ColumnChart(id, analytics, config);\n\t\tcase \"bar\":\n\t\t\treturn new DHIS2BarChart(id, analytics, config);\n\t\tcase \"stacked-bar\":\n\t\t\treturn new DHIS2StackedBarChart(id, analytics, config);\n\t\tcase \"stacked-column\":\n\t\t\treturn new DHIS2StackedColumnChart(id, analytics, config);\n\t\tcase \"pie\":\n\t\t\treturn new DHIS2PieChart(id, analytics, config);\n\t\tcase \"line\":\n\t\t\treturn new DHIS2LineChart(id, analytics, config);\n\t\tcase \"area\":\n\t\t\treturn new DHIS2AreaChart(id, analytics, config);\n\t\tcase \"stacked-area\":\n\t\t\treturn new DHISStackedAreaChart(id, analytics, config);\n\t\tcase \"multi-series\":\n\t\t\treturn new DHIS2MultiSeriesChart(id, analytics, config);\n\t\tcase \"gauge\":\n\t\t\treturn new DHIS2GaugeChart(id, analytics, config);\n\t\tcase \"radar\":\n\t\t\treturn new DHIS2RadarChart(id, analytics, config);\n\t\tcase \"scatter\":\n\t\t\treturn new DHIS2ScatterChart(id, analytics, config);\n\t\tdefault:\n\t\t\tthrow new Error(`Unsupported chart type: ${config.type}`);\n\t}\n}\n"]}

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

@@ -1,10 +1,16 @@
 import { jsx } from 'react/jsx-runtime';
 import { uid } from '@hisptz/dhis2-utils';
-import HighCharts from 'highcharts';
+import * as 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';
+import 'highcharts/modules/exporting';
+import 'highcharts/modules/export-data';
+import 'highcharts/modules/full-screen';
+import 'highcharts/highcharts-more';
+import 'highcharts/modules/solid-gauge';
+import 'highcharts/modules/accessibility';
 export * from './services/export.js';
 export * from './types/props.js';
 export * from './components/DownloadMenu/index.js';
@@ -25,8 +31,12 @@ function ChartAnalyticsComponent({
     {
       immutable: true,
       ref: setRef,
-      containerProps: { id: id.current, ...containerProps ?? {} },
-      highcharts: HighCharts,
+      containerProps: {
+        id: id.current,
+        style: { width: "100%", height: "100%" },
+        ...containerProps ?? {}
+      },
+      highcharts: Highcharts,
       options: { ...chart }
     }
   );

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChartAnalytics/DHIS2Chart.tsx"],"names":[],"mappings":";;;;;;;;;;;AAYA,SAAS,uBAAwB,CAAA;AAAA,EAChC,SAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AAAA,EACA;AACD,CAAwB,EAAA;AACvB,EAAA,MAAM,EAAK,GAAA,MAAA,CAAO,CAAG,EAAA,GAAA,EAAK,CAAa,WAAA,CAAA,CAAA;AACvC,EAAM,MAAA,EAAE,KAAM,EAAA,GAAI,QAAS,CAAA,EAAE,IAAI,EAAG,CAAA,OAAA,EAAS,SAAW,EAAA,MAAA,EAAQ,CAAA;AAEhE,EAAA,IAAI,CAAC,KAAO,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAER,EACC,uBAAA,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACA,SAAS,EAAA,IAAA;AAAA,MACT,GAAK,EAAA,MAAA;AAAA,MACL,cAAA,EAAgB,EAAE,EAAI,EAAA,EAAA,CAAG,SAAS,GAAI,cAAA,IAAkB,EAAI,EAAA;AAAA,MAC5D,UAAY,EAAA,UAAA;AAAA,MACZ,OAAA,EAAS,EAAE,GAAG,KAAM;AAAA;AAAA,GACrB;AAEF;AAgBO,MAAM,UACZ,GAAA,UAAA;AAAA,EACC;AACD;AAKM,MAAM,cAAiB,GAAA","file":"DHIS2Chart.js","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\tanalytics,\n\tconfig,\n\tcontainerProps,\n\tsetRef,\n}: ChartAnalyticsProps) {\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={setRef}\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.ForwardRefExoticComponent<ChartAnalyticsProps>} - The DHIS2 chart component with forward ref support.\n */\nexport const DHIS2Chart: React.ForwardRefExoticComponent<ChartAnalyticsProps> =\n\tforwardRef<HighchartsReact.RefObject, ChartAnalyticsProps>(\n\t\tChartAnalyticsComponent,\n\t);\n\n/**\n * @deprecated since `v2`. Use `DHIS2Chart` instead\n * */\nexport const ChartAnalytics = DHIS2Chart;\n"]}
+{"version":3,"sources":["../../../../src/components/ChartAnalytics/DHIS2Chart.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAkBA,SAAS,uBAAwB,CAAA;AAAA,EAChC,SAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AAAA,EACA;AACD,CAAwB,EAAA;AACvB,EAAA,MAAM,EAAK,GAAA,MAAA,CAAO,CAAG,EAAA,GAAA,EAAK,CAAa,WAAA,CAAA,CAAA;AACvC,EAAM,MAAA,EAAE,KAAM,EAAA,GAAI,QAAS,CAAA,EAAE,IAAI,EAAG,CAAA,OAAA,EAAS,SAAW,EAAA,MAAA,EAAQ,CAAA;AAEhE,EAAA,IAAI,CAAC,KAAO,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAER,EACC,uBAAA,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACA,SAAS,EAAA,IAAA;AAAA,MACT,GAAK,EAAA,MAAA;AAAA,MACL,cAAgB,EAAA;AAAA,QACf,IAAI,EAAG,CAAA,OAAA;AAAA,QACP,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,QAAQ,MAAO,EAAA;AAAA,QACvC,GAAI,kBAAkB;AAAC,OACxB;AAAA,MACA,UAAY,EAAA,UAAA;AAAA,MACZ,OAAA,EAAS,EAAE,GAAG,KAAM;AAAA;AAAA,GACrB;AAEF;AAgBO,MAAM,UACZ,GAAA,UAAA;AAAA,EACC;AACD;AAKM,MAAM,cAAiB,GAAA","file":"DHIS2Chart.js","sourcesContent":["import { uid } from \"@hisptz/dhis2-utils\";\nimport * as 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 \"highcharts/modules/exporting\";\nimport \"highcharts/modules/export-data\";\nimport \"highcharts/modules/full-screen\";\nimport \"highcharts/highcharts-more\";\nimport \"highcharts/modules/solid-gauge\";\nimport \"highcharts/modules/accessibility\";\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\tanalytics,\n\tconfig,\n\tcontainerProps,\n\tsetRef,\n}: ChartAnalyticsProps) {\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={setRef}\n\t\t\tcontainerProps={{\n\t\t\t\tid: id.current,\n\t\t\t\tstyle: { width: \"100%\", height: \"100%\" },\n\t\t\t\t...(containerProps ?? {}),\n\t\t\t}}\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.ForwardRefExoticComponent<ChartAnalyticsProps>} - The DHIS2 chart component with forward ref support.\n */\nexport const DHIS2Chart: React.ForwardRefExoticComponent<ChartAnalyticsProps> =\n\tforwardRef<HighchartsReact.RefObject, ChartAnalyticsProps>(\n\t\tChartAnalyticsComponent,\n\t);\n\n/**\n * @deprecated since `v2`. Use `DHIS2Chart` instead\n * */\nexport const ChartAnalytics = DHIS2Chart;\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ChartAnalytics/hooks/useChart.ts"],"names":[],"mappings":";;;AAOO,SAAS,QAAS,CAAA;AAAA,EACxB,EAAA;AAAA,EACA,SAAA;AAAA,EACA;AACD,CAOE,EAAA;AACD,EAAM,MAAA,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA;AAAA,IACzB,gBAAiB,CAAA,EAAA,EAAI,SAAW,EAAA,MAAM,EAAE,UAAW;AAAA,GACpD;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACvB,CAAC,IAAoB,KAAA;AACpB,MAAA,MAAM,aAAgB,GAAA,YAAA,CAAa,MAAQ,EAAA,EAAE,MAAM,CAAA;AACnD,MAAA,MAAM,gBAAgB,EAAE,GAAG,MAAQ,EAAA,MAAA,EAAQ,eAAe,IAAK,EAAA;AAC/D,MAAA,MAAM,aAA4B,GAAA,gBAAA;AAAA,QACjC,EAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OACD;AACA,MAAS,QAAA,CAAA,aAAA,CAAc,YAAY,CAAA;AAAA,KACpC;AAAA,IACA,CAAC,MAAQ,EAAA,EAAA,EAAI,SAAS;AAAA,GACvB;AAEA,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,IAAI,aAAa,MAAQ,EAAA;AACxB,MAAA,MAAM,aAA4B,GAAA,gBAAA;AAAA,QACjC,EAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OACD;AACA,MAAS,QAAA,CAAA,aAAA,CAAc,YAAY,CAAA;AAAA;AACpC,GACE,EAAA,CAAC,SAAW,EAAA,MAAA,EAAQ,EAAE,CAAC,CAAA;AAE1B,EAAO,OAAA;AAAA,IACN,KAAA;AAAA,IACA;AAAA,GACD;AACD","file":"useChart.js","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"]}
+{"version":3,"sources":["../../../../../src/components/ChartAnalytics/hooks/useChart.ts"],"names":[],"mappings":";;;AAOO,SAAS,QAAS,CAAA;AAAA,EACxB,EAAA;AAAA,EACA,SAAA;AAAA,EACA;AACD,CAOE,EAAA;AACD,EAAM,MAAA,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA;AAAA,IACzB,gBAAiB,CAAA,EAAA,EAAI,SAAW,EAAA,MAAM,EAAE,UAAW;AAAA,GACpD;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACvB,CAAC,IAAoB,KAAA;AACpB,MAAA,MAAM,aAAgB,GAAA,YAAA,CAAa,MAAQ,EAAA,EAAE,MAAM,CAAA;AACnD,MAAA,MAAM,gBAAgB,EAAE,GAAG,MAAQ,EAAA,MAAA,EAAQ,eAAe,IAAK,EAAA;AAC/D,MAAA,MAAM,aAA4B,GAAA,gBAAA;AAAA,QACjC,EAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OACD;AACA,MAAS,QAAA,CAAA,aAAA,CAAc,YAAY,CAAA;AAAA,KACpC;AAAA,IACA,CAAC,MAAQ,EAAA,EAAA,EAAI,SAAS;AAAA,GACvB;AAEA,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,IAAI,aAAa,MAAQ,EAAA;AACxB,MAAA,MAAM,aAA4B,GAAA,gBAAA;AAAA,QACjC,EAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OACD;AACA,MAAS,QAAA,CAAA,aAAA,CAAc,YAAY,CAAA;AAAA;AACpC,GACE,EAAA,CAAC,SAAW,EAAA,MAAA,EAAQ,EAAE,CAAC,CAAA;AAE1B,EAAO,OAAA;AAAA,IACN,KAAA;AAAA,IACA;AAAA,GACD;AACD","file":"useChart.js","sourcesContent":["import type { Analytics } from \"@hisptz/dhis2-utils\";\nimport { Options } from \"highcharts\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { DHIS2Chart } from \"../models\";\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?: Options;\n\tchangeChartType: (type: ChartType) => void;\n} {\n\tconst [chart, setChart] = useState<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/models/area.js

@@ -0,0 +1,30 @@
+import { getPointSeries } from '../utils/chart.js';
+import { DHIS2LineChart } from './line';
+
+class DHIS2AreaChart extends DHIS2LineChart {
+  getHighchartsType() {
+    return "area";
+  }
+  getPlotOptions() {
+    return {
+      area: {}
+    };
+  }
+  getSeries() {
+    return getPointSeries(this.analytics, this.config, "area");
+  }
+}
+class DHISStackedAreaChart extends DHIS2AreaChart {
+  getPlotOptions() {
+    return {
+      area: {
+        stacking: "normal",
+        ...super.getPlotOptions().area
+      }
+    };
+  }
+}
+
+export { DHIS2AreaChart, DHISStackedAreaChart };
+//# sourceMappingURL=area.js.map
+//# sourceMappingURL=area.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ChartAnalytics/models/area.ts"],"names":[],"mappings":";;;AAIO,MAAM,uBAAuB,cAAe,CAAA;AAAA,EAClD,iBAA4B,GAAA;AAC3B,IAAO,OAAA,MAAA;AAAA;AACR,EAEA,cAA8B,GAAA;AAC7B,IAAO,OAAA;AAAA,MACN,MAAM;AAAC,KACR;AAAA;AACD,EAEA,SAAiC,GAAA;AAChC,IAAA,OAAO,cAAe,CAAA,IAAA,CAAK,SAAW,EAAA,IAAA,CAAK,QAAQ,MAAM,CAAA;AAAA;AAE3D;AAEO,MAAM,6BAA6B,cAAe,CAAA;AAAA,EACxD,cAA8B,GAAA;AAC7B,IAAO,OAAA;AAAA,MACN,IAAM,EAAA;AAAA,QACL,QAAU,EAAA,QAAA;AAAA,QACV,GAAG,KAAM,CAAA,cAAA,EAAiB,CAAA;AAAA;AAC3B,KACD;AAAA;AAEF","file":"area.js","sourcesContent":["import { PlotOptions, SeriesOptionsType } from \"highcharts\";\nimport { getPointSeries } from \"../utils/chart.js\";\nimport { DHIS2LineChart } from \"./line\";\n\nexport class DHIS2AreaChart extends DHIS2LineChart {\n\tgetHighchartsType(): string {\n\t\treturn \"area\";\n\t}\n\n\tgetPlotOptions(): PlotOptions {\n\t\treturn {\n\t\t\tarea: {},\n\t\t};\n\t}\n\n\tgetSeries(): SeriesOptionsType[] {\n\t\treturn getPointSeries(this.analytics, this.config, \"area\");\n\t}\n}\n\nexport class DHISStackedAreaChart extends DHIS2AreaChart {\n\tgetPlotOptions(): PlotOptions {\n\t\treturn {\n\t\t\tarea: {\n\t\t\t\tstacking: \"normal\",\n\t\t\t\t...super.getPlotOptions().area,\n\t\t\t},\n\t\t};\n\t}\n}\n"]}