npm - @hisptz/dhis2-analytics - Versions diffs - 2.0.7 → 2.0.9 - Mend

@hisptz/dhis2-analytics 2.0.7 → 2.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (257) hide show

package/dist/components/ChartAnalytics/ChartAnalytics.stories.js CHANGED Viewed

@@ -35,6 +35,7 @@ const Default = {
         category: ["ou"],
         filter: ["pe"]
       },
+      showFilterAsTitle: true,
       type: "column"
     }
   }
@@ -49,6 +50,7 @@ const Bar = {
         category: ["ou"],
         filter: ["pe"]
       },
+      showFilterAsTitle: true,
       type: "bar"
     }
   }
@@ -63,6 +65,7 @@ const MultipleColumns = {
         category: ["pe"],
         filter: ["dx"]
       },
+      showFilterAsTitle: true,
       type: "column"
     }
   }
@@ -77,6 +80,7 @@ const StackedColumn = {
         category: ["pe"],
         filter: ["dx"]
       },
+      showFilterAsTitle: true,
       type: "stacked-column"
     }
   }
@@ -91,6 +95,7 @@ const StackedBar = {
         category: ["pe"],
         filter: ["dx"]
       },
+      showFilterAsTitle: true,
       type: "stacked-bar"
     }
   }
@@ -105,6 +110,7 @@ const Line = {
         category: ["ou"],
         filter: ["pe"]
       },
+      showFilterAsTitle: true,
       type: "line"
     }
   }
@@ -119,6 +125,7 @@ const MultipleLines = {
         category: ["pe"],
         filter: ["dx"]
       },
+      showFilterAsTitle: true,
       type: "line"
     }
   }
@@ -131,8 +138,9 @@ const PieChart = {
       layout: {
         series: ["dx"],
         category: [],
-        filter: ["dx", "pe"]
+        filter: ["pe", "ou"]
       },
+      showFilterAsTitle: true,
       type: "pie"
     }
   }
@@ -147,6 +155,7 @@ const MultiSeries = {
         category: ["pe"],
         filter: ["dx"]
       },
+      showFilterAsTitle: true,
       type: "multi-series",
       multiSeries: {
         series: [
@@ -210,6 +219,7 @@ const ComplexMultiSeries = {
         filter: ["ou"]
       },
       type: "multi-series",
+      showFilterAsTitle: true,
       multiSeries: {
         series: [
           {

package/dist/components/ChartAnalytics/ChartAnalytics.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
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"]}
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\tshowFilterAsTitle: true,\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\tshowFilterAsTitle: true,\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\tshowFilterAsTitle: true,\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\tshowFilterAsTitle: true,\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\tshowFilterAsTitle: true,\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\tshowFilterAsTitle: true,\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\tshowFilterAsTitle: true,\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: [\"pe\", \"ou\"],\n\t\t\t},\n\t\t\tshowFilterAsTitle: true,\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\tshowFilterAsTitle: true,\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\tshowFilterAsTitle: true,\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/components/ChartAnalytics/models/index.js CHANGED Viewed

@@ -1,5 +1,7 @@
 'use strict';
+var lodash = require('lodash');
 class DHIS2Chart {
   constructor(id, analytics, config) {
     this.id = id;
@@ -42,7 +44,9 @@ class DHIS2Chart {
       ],
       series: this.getSeries(),
       plotOptions: this.getPlotOptions(),
-      title: { text: "" },
+      title: {
+        text: this.config.showFilterAsTitle ? this.getFilterLabel() : ""
+      },
       xAxis: this.getXAxis(),
       exporting: this.getExporting(),
       legend: { enabled: true },
@@ -109,6 +113,17 @@ class DHIS2Chart {
       }
     };
   }
+  getFilterLabel() {
+    const filters = this.config.layout.filter;
+    const labels = filters.map((filter) => {
+      const dimensions = this.analytics.metaData?.dimensions[filter] ?? [];
+      return dimensions.map((dimension) => {
+        const filterItem = this.analytics.metaData?.items[dimension];
+        return filterItem?.name;
+      });
+    });
+    return lodash.compact(labels.flat()).join(", ");
+  }
 }
 exports.DHIS2Chart = DHIS2Chart;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ChartAnalytics/models/index.ts"],"names":[],"mappings":"~~AAIO~~,MAAe,WAAW;AAAA,EAKhC,YAAY,IAAY,WAAsB,QAAqB;AAClE,SAAK,KAAK;AACV,SAAK,YAAY;AACjB,SAAK,SAAS;AAAA,EACf;AAAA,EAIA,iBAAgD;AAC/C,WAAO;AAAA,MACN,UAAU,KAAK;AAAA,MACf,UAAU;AAAA,MACV,MAAM,KAAK,kBAAkB;AAAA,MAC7B,QAAQ,KAAK,QAAQ;AAAA,MACrB,YAAY;AAAA,IACb;AAAA,EACD;AAAA,EAEA,aAAiC;AAChC,UAAM,UAAU;AAAA,MACf,OAAO,KAAK,SAAS;AAAA,MACrB,OAAO,KAAK,eAAe;AAAA,MAC3B,QAAQ,KAAK,QAAQ,UAAU;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACA,QAAQ,KAAK,UAAU;AAAA,MACvB,aAAa,KAAK,eAAe;AAAA,MACjC,OAAO,~~EAAE~~,MAAM,~~GAAG~~;AAAA,~~MAClB~~,OAAO,KAAK,SAAS;AAAA,MACrB,WAAW,KAAK,aAAa;AAAA,MAC7B,QAAQ,EAAE,SAAS,KAAK;AAAA,MACxB,SAAS,EAAE,SAAS,MAAM;AAAA,IAC3B;AAEA,QAAI,YAAY,CAAC;AAEjB,QAAI,KAAK,QAAQ,oBAAoB;AACpC,kBAAY;AAAA,QACX,GAAI,OAAO,KAAK,QAAQ,uBAAuB,WAC5C,KAAK,QAAQ,sBAAsB,CAAC,IACpC,KAAK,QAAQ,mBAAmB,OAAO;AAAA,MAC3C;AAAA,IACD;AAEA,WAAO;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,IACJ;AAAA,EACD;AAAA,EAQA,WAAsC;AACrC,WAAO;AAAA,MACN;AAAA,QACC,OAAO;AAAA,UACN,MAAM;AAAA,UACN,OAAO;AAAA,YACN,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,UAAU;AAAA,UACX;AAAA,QACD;AAAA,QACA,QAAQ;AAAA,UACP,SAAS;AAAA,UACT,OAAO;AAAA,YACN,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,UAAU;AAAA,UACX;AAAA,QACD;AAAA,QACA,WAAW;AAAA,UACV;AAAA,YACC,OAAO;AAAA,YACP,WAAW;AAAA,YACX,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,OAAO,EAAE,MAAM,GAAG;AAAA,UACnB;AAAA,UACA;AAAA,YACC,OAAO;AAAA,YACP,WAAW;AAAA,YACX,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,OAAO,EAAE,MAAM,GAAG;AAAA,UACnB;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAAA,EAEA,eAA4C;AAC3C,UAAM,OAAO,KAAK,QAAQ,QAAQ;AAClC,WAAO;AAAA,MACN,UAAU,GAAG,IAAI;AAAA,MACjB,aAAa;AAAA,MACb,SAAS;AAAA,QACR,eAAe;AAAA,UACd,SAAS;AAAA,QACV;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD","sourcesContent":["import type { Analytics } from \"@hisptz/dhis2-utils\";\nimport HighCharts from \"highcharts\";\nimport { ChartConfig } from \"../types/props.js\";\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: { ~~text~~: \"\" },\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"]}
1	+ {"version":3,"sources":["../../../../src/components/ChartAnalytics/models/index.ts"],"names":[],"mappings":"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","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.showFilterAsTitle\n\t\t\t\t\t? this.getFilterLabel()\n\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"]}

package/dist/components/DHIS2PivotTable/DHIS2PivotTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/DHIS2PivotTable/DHIS2PivotTable.tsx"],"names":[],"mappings":"~~AA0DG~~,SACC,KADD;~~AAzDH~~,SAAS,~~6BAA6B~~;~~AACtC~~,SAAgB,eAAe;AAC/B,SAAS,qCAAqC;AAC9C,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;~~AAuC9B~~,SAAS,gBAAgB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,SAAS;AAAA,IACd,MAAM,IAAI,sBAAsB,EAAE,WAAW,OAAO,CAAC;AAAA,IACrD,CAAC,WAAW,MAAM;AAAA,EACnB;AAEA,SACC,oBAAC,iCAA8B,QAC9B,+BAAC,cAAW,QAAgB,YAC3B;AAAA,wBAAC,gBAAa;AAAA,IACd,oBAAC,wBAAqB;AAAA,KACvB,GACD;AAEF","sourcesContent":["import { Analytics, LegendSet } from \"@hisptz/dhis2-utils\";\nimport { DHIS2PivotTableEngine } from \"./services/engine.js\";\nimport React, { useMemo } from \"react\";\nimport { DHIS2PivotTableEngineProvider } from \"./state/engine.js\";\nimport { PivotTable } from \"./components/Table/index.js\";\nimport { TableHeaders } from \"./components/TableHeaders/index.js\";\nimport { CustomPivotTableBody } from \"./components/TableBody/index.js\";\nimport { ~~DHIS2Dimension } from \"./interfaces/index.js\";\nimport {~~ DataTableProps } from \"@dhis2/ui\";\n\nexport interface DHIS2PivotTableOptions {\n\tlegendSets?: LegendSet[];\n\thideEmptyColumns?: boolean;\n\thideEmptyRows?: boolean;\n\tshowRowTotals?: boolean;\n\tshowColumnTotals?: boolean;\n\tshowRowSubtotals?: boolean;\n\tshowColumnSubtotals?: boolean;\n\tfixColumnHeaders?: boolean;\n\tfixRowHeaders?: boolean;\n}\n\nexport interface DHIS2PivotTableProps {\n\tanalytics: Analytics;\n\ttableProps?: DataTableProps;\n\tsetRef?: (ref: HTMLTableElement) => void;\n\tconfig: ~~{\n\t\tlayout: {\n\t\t\tcolumns: {\n\t\t\t\tdimension: DHIS2Dimension~~;\n~~\t\t\t\tlabel?: string;\n\t\t\t~~}~~[];\n~~\~~t\t\trows: {\~~n\t\t\t\tdimension: DHIS2Dimension;\n\t\t\t\tlabel?: string;\n\t\t\t}[];\n\t\t\tfilter?: {\n\t\t\t\tdimension: DHIS2Dimension;\n\t\t\t\tlabel?: string;\n\t\t\t}[];\n\t\t};\n\t\toptions?: DHIS2PivotTableOptions;\n\t};\n}\n\nexport function DHIS2PivotTable({\n\tanalytics,\n\tconfig,\n\ttableProps,\n\tsetRef,\n}: DHIS2PivotTableProps) {\n\tconst engine = useMemo(\n\t\t() => new DHIS2PivotTableEngine({ analytics, config }),\n\t\t[analytics, config],\n\t);\n\n\treturn (\n\t\t<DHIS2PivotTableEngineProvider engine={engine}>\n\t\t\t<PivotTable setRef={setRef} tableProps={tableProps}>\n\t\t\t\t<TableHeaders />\n\t\t\t\t<CustomPivotTableBody />\n\t\t\t</PivotTable>\n\t\t</DHIS2PivotTableEngineProvider>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["../../../src/components/DHIS2PivotTable/DHIS2PivotTable.tsx"],"names":[],"mappings":"AA0CG,SACC,KADD;AAzCH,SAAS,6BAAgD;AACzD,SAAgB,eAAe;AAC/B,SAAS,qCAAqC;AAC9C,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AAuB9B,SAAS,gBAAgB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,SAAS;AAAA,IACd,MAAM,IAAI,sBAAsB,EAAE,WAAW,OAAO,CAAC;AAAA,IACrD,CAAC,WAAW,MAAM;AAAA,EACnB;AAEA,SACC,oBAAC,iCAA8B,QAC9B,+BAAC,cAAW,QAAgB,YAC3B;AAAA,wBAAC,gBAAa;AAAA,IACd,oBAAC,wBAAqB;AAAA,KACvB,GACD;AAEF","sourcesContent":["import { Analytics, LegendSet } from \"@hisptz/dhis2-utils\";\nimport { DHIS2PivotTableEngine, type EngineConfig } from \"./services/engine.js\";\nimport React, { useMemo } from \"react\";\nimport { DHIS2PivotTableEngineProvider } from \"./state/engine.js\";\nimport { PivotTable } from \"./components/Table/index.js\";\nimport { TableHeaders } from \"./components/TableHeaders/index.js\";\nimport { CustomPivotTableBody } from \"./components/TableBody/index.js\";\nimport { DataTableProps } from \"@dhis2/ui\";\n\nexport interface DHIS2PivotTableOptions {\n\tlegendSets?: LegendSet[];\n\thideEmptyColumns?: boolean;\n\thideEmptyRows?: boolean;\n\tshowRowTotals?: boolean;\n\tshowColumnTotals?: boolean;\n\tshowRowSubtotals?: boolean;\n\tshowColumnSubtotals?: boolean;\n\tfixColumnHeaders?: boolean;\n\tfixRowHeaders?: boolean;\n\tshowFilterAsTitle?: boolean;\n}\n\nexport interface DHIS2PivotTableProps {\n\tanalytics: Analytics;\n\ttableProps?: DataTableProps;\n\tsetRef?: (ref: HTMLTableElement) => void;\n\tconfig: EngineConfig;\n}\n\nexport function DHIS2PivotTable({\n\tanalytics,\n\tconfig,\n\ttableProps,\n\tsetRef,\n}: DHIS2PivotTableProps) {\n\tconst engine = useMemo(\n\t\t() => new DHIS2PivotTableEngine({ analytics, config }),\n\t\t[analytics, config],\n\t);\n\n\treturn (\n\t\t<DHIS2PivotTableEngineProvider engine={engine}>\n\t\t\t<PivotTable setRef={setRef} tableProps={tableProps}>\n\t\t\t\t<TableHeaders />\n\t\t\t\t<CustomPivotTableBody />\n\t\t\t</PivotTable>\n\t\t</DHIS2PivotTableEngineProvider>\n\t);\n}\n"]}

package/dist/components/DHIS2PivotTable/components/TableHeaders/index.js CHANGED Viewed

@@ -14,7 +14,7 @@ var classes__default = /*#__PURE__*/_interopDefault(classes);
 function ColumnRenderer({
   column,
   index,
-  config: { fixColumnHeaders, rowHeaders, prevHeight = 0, columns }
+  config: { fixColumnHeaders, rowHeaders, prevHeight = 0, columns, engine }
 }) {
   const [columnHeaderRef, { height }] = usehooksTs.useElementSize();
   if (!column) {
@@ -32,6 +32,14 @@ function ColumnRenderer({
     1
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    engine?.showTitle && /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      ui.DataTableColumnHeader,
+      {
+        align: "center",
+        colSpan: engine.titleSpan.toString(),
+        children: engine.title ?? ""
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsxs(ui.DataTableRow, { children: [
       index === 0 && rowHeaders?.map((header) => {
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -71,7 +79,8 @@ function ColumnRenderer({
           columns,
           rowHeaders,
           prevHeight: height,
-          fixColumnHeaders
+          fixColumnHeaders,
+          engine
         }
       }
     ) : null
@@ -90,7 +99,7 @@ function TableHeaders() {
     {
       column: columns[0],
       index: 0,
-      config: { rowHeaders, columns, fixColumnHeaders }
+      config: { engine, rowHeaders, columns, fixColumnHeaders }
     }
   ) });
 }

package/dist/components/DHIS2PivotTable/components/TableHeaders/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/DHIS2PivotTable/components/TableHeaders/index.tsx"],"names":["column"],"mappings":"~~AA0CE~~,~~mBAKK~~,~~KAJJ~~,~~YADD~~;~~AAzCF~~,SAAS,iCAAiC;AAC1C,SAAS,uBAAuB,cAAc,iBAAiB;AAC/D,SAAS,SAAS,OAAO,aAAa;AAEtC,OAAO,aAAa;AACpB,SAAS,sBAAsB;AAE/B,SAAS,eAAe;AAAA,EACvB;AAAA,EACA;AAAA,EACA,QAAQ,EAAE,kBAAkB,YAAY,aAAa,GAAG,~~QAAQ~~;~~AACjE~~,~~GAS8B~~;AAC7B,QAAM,CAAC,iBAAiB,EAAE,OAAO,CAAC,IAAI,eAAe;AAErD,MAAI,CAAC,QAAQ;AACZ,WAAO;AAAA,EACR;AACA,QAAM,UAAU,MAAM,SAAS,QAAQ,CAAC,EAAE,OAAO,CAAC,KAAKA,YAAW;AACjE,WAAO,OAAOA,QAAO,OAAO,UAAU;AAAA,EACvC,GAAG,CAAC;AAEJ,QAAM,gBAAgB,CAAC,QAAQ,QAAQ,QAAQ,CAAC,CAAC;AACjD,QAAM,aAAa,QAAQ,QAAQ,CAAC;AAEpC,QAAM,uBAAuB,MAAM,SAAS,GAAG,KAAK,EAAE;AAAA,IACrD,CAAC,KAAKA,YAAW;AAChB,aAAO,OAAOA,QAAO,OAAO,UAAU;AAAA,IACvC;AAAA,IACA;AAAA,EACD;AAEA,SACC,~~iCACC~~;AAAA,~~yBAAC~~,gBACC;AAAA,gBAAU,KACV,YAAY,IAAI,CAAC,WAAW;AAC3B,eACC;AAAA,UAAC;AAAA;AAAA,YACA,OAAO;AAAA,YAGP,KAAK;AAAA,YACL,WAAW,QAAQ,cAAc;AAAA,YACjC,SAAS,QAAQ,OAAO,SAAS;AAAA,YAGhC,iBAAO,SAAS;AAAA;AAAA,UAFZ,GAAG,OAAO,SAAS;AAAA,QAGzB;AAAA,MAEF,CAAC;AAAA,MACD,MAAM,sBAAsB,CAAC,UAAU;AACvC,eAAO,OAAO,OAAO,IAAI,CAAC,SACzB;AAAA,UAAC;AAAA;AAAA,YACA,OAAO;AAAA,YAGP,KAAK,GAAG,WAAW,SAAS,CAAC;AAAA,YAC7B,KAAK,UAAU,IAAI,kBAAkB;AAAA,YACrC,WAAW,QAAQ,cAAc;AAAA,YACjC,OAAM;AAAA,YACN,SAAS,QAAQ,SAAS;AAAA,YAGzB,eAAK;AAAA;AAAA,UAFD,GAAG,KAAK,IAAI,KAAK,IAAI;AAAA,QAG3B,CACA;AAAA,MACF,CAAC;AAAA,OACF;AAAA,IACC,gBACA;AAAA,MAAC;AAAA;AAAA,QACA,QAAQ;AAAA,QACR,OAAO,QAAQ;AAAA,QACf,QAAQ;AAAA,UACP;AAAA,UACA;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,QACD;AAAA;AAAA,IACD,IACG;AAAA,KACL;AAEF;AAEO,SAAS,eAAe;AAC9B,QAAM,SAAS,0BAA0B;AACzC,QAAM,UAAU,QAAQ;AACxB,QAAM,aAAa,QAAQ;AAC3B,QAAM,mBAAmB,QAAQ;AAEjC,MAAI,CAAC,WAAW,QAAQ,OAAO,GAAG;AACjC,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,aACA;AAAA,IAAC;AAAA;AAAA,MACA,QAAQ,QAAQ,CAAC;AAAA,MACjB,OAAO;AAAA,MACP,QAAQ,EAAE,YAAY,SAAS,iBAAiB;AAAA;AAAA,~~EACjD~~,GACD;AAEF","sourcesContent":["import React from \"react\";\nimport { useCustomPivotTableEngine } from \"../../state/engine.js\";\nimport { DataTableColumnHeader, DataTableRow, TableHead } from \"@dhis2/ui\";\nimport { isEmpty, slice, times } from \"lodash\";\nimport { Header } from \"../../services/engine.js\";\nimport classes from \"./TableHeaders.module.css\";\nimport { useElementSize } from \"usehooks-ts\";\n\nfunction ColumnRenderer({\n\tcolumn,\n\tindex,\n\tconfig: { fixColumnHeaders, rowHeaders, prevHeight = 0, columns },\n}: {\n\tcolumn: Header;\n\tindex: number;\n\tconfig: {\n\t\tcolumns: Header[];\n\t\trowHeaders?: Header[];\n\t\tprevHeight?: number;\n\t\tfixColumnHeaders?: boolean;\n\t};\n}): React.ReactElement \| null {\n\tconst [columnHeaderRef, { height }] = useElementSize();\n\n\tif (!column) {\n\t\treturn null;\n\t}\n\tconst colSpan = slice(columns, index + 1).reduce((acc, column) => {\n\t\treturn acc * (column.items?.length ?? 1);\n\t}, 1);\n\n\tconst hasSubColumns = !isEmpty(columns[index + 1]);\n\tconst nextColumn = columns[index + 1];\n\n\tconst multiplicationFactor = slice(columns, 0, index).reduce(\n\t\t(acc, column) => {\n\t\t\treturn acc * (column.items?.length ?? 1);\n\t\t},\n\t\t1,\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<DataTableRow>\n\t\t\t\t{index === 0 &&\n\t\t\t\t\trowHeaders?.map((header) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<DataTableColumnHeader\n\t\t\t\t\t\t\t\tfixed={fixColumnHeaders}\n\t\t\t\t\t\t\t\t/\n // @ts-ignore /\n\t\t\t\t\t\t\t\ttop={\"0\"}\n\t\t\t\t\t\t\t\tclassName={classes[\"table-header\"]}\n\t\t\t\t\t\t\t\trowSpan={columns.length.toString()}\n\t\t\t\t\t\t\t\tkey={`${header.dimension}-header-column`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{header.label ?? \"\"}\n\t\t\t\t\t\t\t</DataTableColumnHeader>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t{times(multiplicationFactor, (colNo) => {\n\t\t\t\t\treturn column.items?.map((item) => (\n\t\t\t\t\t\t<DataTableColumnHeader\n\t\t\t\t\t\t\tfixed={fixColumnHeaders}\n\t\t\t\t\t\t\t/\n // @ts-ignore /\n\t\t\t\t\t\t\ttop={`${prevHeight.toString()}px`}\n\t\t\t\t\t\t\tref={index === 0 ? columnHeaderRef : undefined}\n\t\t\t\t\t\t\tclassName={classes[\"table-header\"]}\n\t\t\t\t\t\t\talign=\"center\"\n\t\t\t\t\t\t\tcolSpan={colSpan.toString()}\n\t\t\t\t\t\t\tkey={`${colNo}-${item.name}-column-header`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{item.name as unknown as string}\n\t\t\t\t\t\t</DataTableColumnHeader>\n\t\t\t\t\t));\n\t\t\t\t})}\n\t\t\t</DataTableRow>\n\t\t\t{hasSubColumns ? (\n\t\t\t\t<ColumnRenderer\n\t\t\t\t\tcolumn={nextColumn}\n\t\t\t\t\tindex={index + 1}\n\t\t\t\t\tconfig={{\n\t\t\t\t\t\tcolumns,\n\t\t\t\t\t\trowHeaders,\n\t\t\t\t\t\tprevHeight: height,\n\t\t\t\t\t\tfixColumnHeaders,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</>\n\t);\n}\n\nexport function TableHeaders() {\n\tconst engine = useCustomPivotTableEngine();\n\tconst columns = engine?.columnHeaders;\n\tconst rowHeaders = engine?.rowHeaders;\n\tconst fixColumnHeaders = engine?.fixColumnHeaders;\n\n\tif (!columns \|\| isEmpty(columns)) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<TableHead>\n\t\t\t<ColumnRenderer\n\t\t\t\tcolumn={columns[0]}\n\t\t\t\tindex={0}\n\t\t\t\tconfig={{ rowHeaders, columns, fixColumnHeaders }}\n\t\t\t/>\n\t\t</TableHead>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["../../../../../src/components/DHIS2PivotTable/components/TableHeaders/index.tsx"],"names":["column"],"mappings":"AA2CE,mBAGG,KAQF,YAXD;AA1CF,SAAS,iCAAiC;AAC1C,SAAS,uBAAuB,cAAc,iBAAiB;AAC/D,SAAS,SAAS,OAAO,aAAa;AAEtC,OAAO,aAAa;AACpB,SAAS,sBAAsB;AAE/B,SAAS,eAAe;AAAA,EACvB;AAAA,EACA;AAAA,EACA,QAAQ,EAAE,kBAAkB,YAAY,aAAa,GAAG,SAAS,OAAO;AACzE,GAU8B;AAC7B,QAAM,CAAC,iBAAiB,EAAE,OAAO,CAAC,IAAI,eAAe;AAErD,MAAI,CAAC,QAAQ;AACZ,WAAO;AAAA,EACR;AACA,QAAM,UAAU,MAAM,SAAS,QAAQ,CAAC,EAAE,OAAO,CAAC,KAAKA,YAAW;AACjE,WAAO,OAAOA,QAAO,OAAO,UAAU;AAAA,EACvC,GAAG,CAAC;AAEJ,QAAM,gBAAgB,CAAC,QAAQ,QAAQ,QAAQ,CAAC,CAAC;AACjD,QAAM,aAAa,QAAQ,QAAQ,CAAC;AAEpC,QAAM,uBAAuB,MAAM,SAAS,GAAG,KAAK,EAAE;AAAA,IACrD,CAAC,KAAKA,YAAW;AAChB,aAAO,OAAOA,QAAO,OAAO,UAAU;AAAA,IACvC;AAAA,IACA;AAAA,EACD;AAEA,SACC,iCACE;AAAA,YAAQ,aACR,oBAAC,gBACA;AAAA,MAAC;AAAA;AAAA,QACA,OAAM;AAAA,QACN,SAAS,OAAO,UAAU,SAAS;AAAA,QAElC,iBAAO,SAAS;AAAA;AAAA,IAClB,GACD;AAAA,IAED,qBAAC,gBACC;AAAA,gBAAU,KACV,YAAY,IAAI,CAAC,WAAW;AAC3B,eACC;AAAA,UAAC;AAAA;AAAA,YACA,OAAO;AAAA,YAGP,KAAK;AAAA,YACL,WAAW,QAAQ,cAAc;AAAA,YACjC,SAAS,QAAQ,OAAO,SAAS;AAAA,YAGhC,iBAAO,SAAS;AAAA;AAAA,UAFZ,GAAG,OAAO,SAAS;AAAA,QAGzB;AAAA,MAEF,CAAC;AAAA,MACD,MAAM,sBAAsB,CAAC,UAAU;AACvC,eAAO,OAAO,OAAO,IAAI,CAAC,SACzB;AAAA,UAAC;AAAA;AAAA,YACA,OAAO;AAAA,YAGP,KAAK,GAAG,WAAW,SAAS,CAAC;AAAA,YAC7B,KAAK,UAAU,IAAI,kBAAkB;AAAA,YACrC,WAAW,QAAQ,cAAc;AAAA,YACjC,OAAM;AAAA,YACN,SAAS,QAAQ,SAAS;AAAA,YAGzB,eAAK;AAAA;AAAA,UAFD,GAAG,KAAK,IAAI,KAAK,IAAI;AAAA,QAG3B,CACA;AAAA,MACF,CAAC;AAAA,OACF;AAAA,IACC,gBACA;AAAA,MAAC;AAAA;AAAA,QACA,QAAQ;AAAA,QACR,OAAO,QAAQ;AAAA,QACf,QAAQ;AAAA,UACP;AAAA,UACA;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,UACA;AAAA,QACD;AAAA;AAAA,IACD,IACG;AAAA,KACL;AAEF;AAEO,SAAS,eAAe;AAC9B,QAAM,SAAS,0BAA0B;AACzC,QAAM,UAAU,QAAQ;AACxB,QAAM,aAAa,QAAQ;AAC3B,QAAM,mBAAmB,QAAQ;AAEjC,MAAI,CAAC,WAAW,QAAQ,OAAO,GAAG;AACjC,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,aACA;AAAA,IAAC;AAAA;AAAA,MACA,QAAQ,QAAQ,CAAC;AAAA,MACjB,OAAO;AAAA,MACP,QAAQ,EAAE,QAAQ,YAAY,SAAS,iBAAiB;AAAA;AAAA,EACzD,GACD;AAEF","sourcesContent":["import React from \"react\";\nimport { useCustomPivotTableEngine } from \"../../state/engine.js\";\nimport { DataTableColumnHeader, DataTableRow, TableHead } from \"@dhis2/ui\";\nimport { isEmpty, slice, times } from \"lodash\";\nimport { DHIS2PivotTableEngine, Header } from \"../../services/engine.js\";\nimport classes from \"./TableHeaders.module.css\";\nimport { useElementSize } from \"usehooks-ts\";\n\nfunction ColumnRenderer({\n\tcolumn,\n\tindex,\n\tconfig: { fixColumnHeaders, rowHeaders, prevHeight = 0, columns, engine },\n}: {\n\tcolumn: Header;\n\tindex: number;\n\tconfig: {\n\t\tcolumns: Header[];\n\t\trowHeaders?: Header[];\n\t\tprevHeight?: number;\n\t\tfixColumnHeaders?: boolean;\n\t\tengine: DHIS2PivotTableEngine;\n\t};\n}): React.ReactElement \| null {\n\tconst [columnHeaderRef, { height }] = useElementSize();\n\n\tif (!column) {\n\t\treturn null;\n\t}\n\tconst colSpan = slice(columns, index + 1).reduce((acc, column) => {\n\t\treturn acc * (column.items?.length ?? 1);\n\t}, 1);\n\n\tconst hasSubColumns = !isEmpty(columns[index + 1]);\n\tconst nextColumn = columns[index + 1];\n\n\tconst multiplicationFactor = slice(columns, 0, index).reduce(\n\t\t(acc, column) => {\n\t\t\treturn acc * (column.items?.length ?? 1);\n\t\t},\n\t\t1,\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{engine?.showTitle && (\n\t\t\t\t<DataTableRow>\n\t\t\t\t\t<DataTableColumnHeader\n\t\t\t\t\t\talign=\"center\"\n\t\t\t\t\t\tcolSpan={engine.titleSpan.toString()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{engine.title ?? \"\"}\n\t\t\t\t\t</DataTableColumnHeader>\n\t\t\t\t</DataTableRow>\n\t\t\t)}\n\t\t\t<DataTableRow>\n\t\t\t\t{index === 0 &&\n\t\t\t\t\trowHeaders?.map((header) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<DataTableColumnHeader\n\t\t\t\t\t\t\t\tfixed={fixColumnHeaders}\n\t\t\t\t\t\t\t\t/\n // @ts-ignore /\n\t\t\t\t\t\t\t\ttop={\"0\"}\n\t\t\t\t\t\t\t\tclassName={classes[\"table-header\"]}\n\t\t\t\t\t\t\t\trowSpan={columns.length.toString()}\n\t\t\t\t\t\t\t\tkey={`${header.dimension}-header-column`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{header.label ?? \"\"}\n\t\t\t\t\t\t\t</DataTableColumnHeader>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t{times(multiplicationFactor, (colNo) => {\n\t\t\t\t\treturn column.items?.map((item) => (\n\t\t\t\t\t\t<DataTableColumnHeader\n\t\t\t\t\t\t\tfixed={fixColumnHeaders}\n\t\t\t\t\t\t\t/\n // @ts-ignore /\n\t\t\t\t\t\t\ttop={`${prevHeight.toString()}px`}\n\t\t\t\t\t\t\tref={index === 0 ? columnHeaderRef : undefined}\n\t\t\t\t\t\t\tclassName={classes[\"table-header\"]}\n\t\t\t\t\t\t\talign=\"center\"\n\t\t\t\t\t\t\tcolSpan={colSpan.toString()}\n\t\t\t\t\t\t\tkey={`${colNo}-${item.name}-column-header`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{item.name as unknown as string}\n\t\t\t\t\t\t</DataTableColumnHeader>\n\t\t\t\t\t));\n\t\t\t\t})}\n\t\t\t</DataTableRow>\n\t\t\t{hasSubColumns ? (\n\t\t\t\t<ColumnRenderer\n\t\t\t\t\tcolumn={nextColumn}\n\t\t\t\t\tindex={index + 1}\n\t\t\t\t\tconfig={{\n\t\t\t\t\t\tcolumns,\n\t\t\t\t\t\trowHeaders,\n\t\t\t\t\t\tprevHeight: height,\n\t\t\t\t\t\tfixColumnHeaders,\n\t\t\t\t\t\tengine,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</>\n\t);\n}\n\nexport function TableHeaders() {\n\tconst engine = useCustomPivotTableEngine();\n\tconst columns = engine?.columnHeaders;\n\tconst rowHeaders = engine?.rowHeaders;\n\tconst fixColumnHeaders = engine?.fixColumnHeaders;\n\n\tif (!columns \|\| isEmpty(columns)) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<TableHead>\n\t\t\t<ColumnRenderer\n\t\t\t\tcolumn={columns[0]}\n\t\t\t\tindex={0}\n\t\t\t\tconfig={{ engine, rowHeaders, columns, fixColumnHeaders }}\n\t\t\t/>\n\t\t</TableHead>\n\t);\n}\n"]}

package/dist/components/DHIS2PivotTable/services/engine.js CHANGED Viewed

@@ -16,6 +16,28 @@ class DHIS2PivotTableEngine {
     this.getHeaders();
     this.getColumnMap();
   }
+  get title() {
+    const filters = this.config.layout.filter;
+    const labels = filters?.map(({ dimension }) => {
+      const dimensions = this.analyticsData.metaData?.dimensions[dimension];
+      return dimensions?.map((dimension2) => {
+        const dimensionItem = this.analyticsData.metaData?.items[dimension2];
+        return dimensionItem?.name;
+      });
+    }) ?? [];
+    return lodash.compact(labels.flat()).join(", ");
+  }
+  get titleSpan() {
+    const rowHeaders = this.rowHeaders?.length ?? 0;
+    const columnHeaders = this.columnHeaders?.reduce(
+      (acc, val) => acc + (val.items?.length ?? 0),
+      0
+    ) ?? 0;
+    return rowHeaders + columnHeaders;
+  }
+  get showTitle() {
+    return this.config?.options?.showFilterAsTitle;
+  }
   get fixColumnHeaders() {
     return this.config.options?.fixColumnHeaders ?? true;
   }

package/dist/components/DHIS2PivotTable/services/engine.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/DHIS2PivotTable/services/engine.ts"],"names":[],"mappings":"AACA,SAAS,SAAS,WAAW,cAAc,OAAO,WAAW;~~AA6BtD~~,MAAM,sBAAsB;AAAA,EASlC,YAAY;AAAA,IACX;AAAA,IACA;AAAA,EACD,GAGG;AACF,SAAK,SAAS;AACd,SAAK,gBAAgB;AACrB,SAAK,aAAa,UAAU,KAAK,cAAc,SAAS;AAAA,MACvD;AAAA,MACA;AAAA,IACD,CAAC;AACD,SAAK,WAAW;AAChB,SAAK,aAAa;AAAA,EACnB;AAAA,EAEA,IAAI,mBAAmB;AACtB,WAAO,KAAK,OAAO,SAAS,oBAAoB;AAAA,EACjD;AAAA,EAEA,IAAI,gBAAgB;AACnB,WAAO,KAAK,OAAO,SAAS,iBAAiB;AAAA,EAC9C;AAAA,EAEA,kBAAkB,WAA2B;AAC5C,WAAO,KAAK,cAAc,UAAU,WAAW,SAAS,KAAK,CAAC;AAAA,EAC/D;AAAA,EAEA,QAAQ,IAAY;AACnB,WAAO,KAAK,cAAc,UAAU,MAAM,EAAS;AAAA,EACpD;AAAA,EAEA,SAAS,QAAgC;AACxC,UAAM,aAAa,OAAO,OAAO,MAAM;AACvC,UAAM,OAAO,KAAK,cAAc,MAAM;AAAA,MACrC,CAAC,QAAQ,aAAa,KAAK,UAAU,EAAE,UAAU,WAAW;AAAA,IAC7D;AACA,WAAO,MAAM,OAAO,CAAC,KAAK,QAAQ;AACjC,aAAO,MAAM,WAAW,IAAI,KAAK,UAAU,CAAC;AAAA,IAC7C,GAAG,CAAC;AAAA,EACL;AAAA,EAEA,aAAa;AACZ,SAAK,aAAa,KAAK,OAAO,OAAO,KAAK,IAAI,CAAC,cAAc;AAC5D,aAAO;AAAA,QACN,GAAG;AAAA,QACH,OAAO;AAAA,UACN,KAAK,kBAAkB,UAAU,SAAS,EAAE;AAAA,YAC3C,CAAC,WAAmB,KAAK,QAAQ,MAAM;AAAA,UACxC;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAC;AACD,SAAK,gBAAgB,KAAK,OAAO,OAAO,QAAQ,IAAI,CAAC,iBAAiB;AACrE,aAAO;AAAA,QACN,GAAG;AAAA,QACH,OAAO;AAAA,UACN,KAAK,kBAAkB,aAAa,SAAS,EAAE;AAAA,YAC9C,CAAC,WAAmB,KAAK,QAAQ,MAAM;AAAA,UACxC;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAC;AAAA,EACF;AAAA,EAEA,eAAe;AACd,UAAM,UAAU,KAAK;AACrB,UAAM,mBACL;AAAA,MACC,SAAS;AAAA,QACR,CAAC,WACA,OAAO,OAAO,IAAI,CAAC,UAAU;AAAA,UAC5B,CAAC,OAAO,SAAS,GAAG,KAAK;AAAA,QAC1B,EAAE;AAAA,MACJ;AAAA,IACD,KAAK,CAAC;AACP,UAAM,OAAO,iBAAiB,OAAO,CAAC,KAAK,UAAU;AACpD,aAAO,OAAO,OAAO,UAAU;AAAA,IAChC,GAAG,CAAC;AACJ,UAAM,qBAAqB,iBAAiB,IAAI,CAAC,UAAU;AAAA,MAC1D,GAAG,MAAM,OAAO,MAAM,QAAQ,MAAM,KAAK,EAAE,KAAK;AAAA,IACjD,CAAC;AACD,SAAK,YAAY;AAAA,MAChB,IAAI,GAAG,kBAAkB,EAAE;AAAA,QAAI,CAAC,QAC/B,IAAI,OAAO,CAAC,KAAK,UAAU;AAC1B,iBAAO,EAAE,GAAG,KAAK,GAAG,MAAM;AAAA,QAC3B,CAAC;AAAA,MACF;AAAA,IACD;AAAA,EACD;AACD","sourcesContent":["import { Analytics, AnalyticsItem, LegendSet } from \"@hisptz/dhis2-utils\";\nimport { compact, findIndex, intersection, times, zip } from \"lodash\";\nimport { DHIS2Dimension } from \"../interfaces/index.js\";\n\nexport interface EngineConfig {\n\tlayout: {\n\t\tcolumns: { dimension: DHIS2Dimension; label?: string }[];\n\t\trows: { dimension: DHIS2Dimension; label?: string }[];\n\t\tfilter?: { dimension: DHIS2Dimension; label?: string }[];\n\t};\n\toptions?: {\n\t\tlegendSets?: LegendSet[];\n\t\thideEmptyColumns?: boolean;\n\t\thideEmptyRows?: boolean;\n\t\tshowRowTotals?: boolean;\n\t\tshowColumnTotals?: boolean;\n\t\tshowRowSubtotals?: boolean;\n\t\tshowColumnSubtotals?: boolean;\n\t\tfixColumnHeaders?: boolean;\n\t\tfixRowHeaders?: boolean;\n\t\t[key: string]: any;\n\t};\n}\n\nexport interface Header {\n\tdimension: DHIS2Dimension;\n\tlabel?: string;\n\titems?: AnalyticsItem[];\n}\n\nexport class DHIS2PivotTableEngine {\n\tanalyticsData: Analytics;\n\tvalueIndex: number;\n\tconfig: EngineConfig;\n\trowHeaders?: Header[];\n\tcolumnHeaders?: Header[];\n\n\tcolumnMap?: { [key: string]: any }[];\n\n\tconstructor({\n\t\tanalytics,\n\t\tconfig,\n\t}: {\n\t\tanalytics: Analytics;\n\t\tconfig: EngineConfig;\n\t}) {\n\t\tthis.config = config;\n\t\tthis.analyticsData = analytics;\n\t\tthis.valueIndex = findIndex(this.analyticsData.headers, [\n\t\t\t\"name\",\n\t\t\t\"value\",\n\t\t]);\n\t\tthis.getHeaders();\n\t\tthis.getColumnMap();\n\t}\n\n\tget fixColumnHeaders() {\n\t\treturn this.config.options?.fixColumnHeaders ?? true;\n\t}\n\n\tget fixRowHeaders() {\n\t\treturn this.config.options?.fixRowHeaders ?? true;\n\t}\n\n\tgetDimensionItems(dimension: DHIS2Dimension) {\n\t\treturn this.analyticsData.metaData?.dimensions[dimension] ?? [];\n\t}\n\n\tgetItem(id: string) {\n\t\treturn this.analyticsData.metaData?.items[id as any];\n\t}\n\n\tgetValue(mapper: { [key: string]: any }) {\n\t\tconst dimensions = Object.values(mapper);\n\t\tconst data = this.analyticsData.rows?.filter(\n\t\t\t(row) => intersection(row, dimensions).length >= dimensions.length,\n\t\t);\n\t\treturn data?.reduce((acc, row) => {\n\t\t\treturn acc + parseFloat(row[this.valueIndex]);\n\t\t}, 0);\n\t}\n\n\tgetHeaders() {\n\t\tthis.rowHeaders = this.config.layout.rows.map((rowConfig) => {\n\t\t\treturn {\n\t\t\t\t...rowConfig,\n\t\t\t\titems: compact(\n\t\t\t\t\tthis.getDimensionItems(rowConfig.dimension).map(\n\t\t\t\t\t\t(itemId: string) => this.getItem(itemId),\n\t\t\t\t\t),\n\t\t\t\t),\n\t\t\t};\n\t\t});\n\t\tthis.columnHeaders = this.config.layout.columns.map((columnConfig) => {\n\t\t\treturn {\n\t\t\t\t...columnConfig,\n\t\t\t\titems: compact(\n\t\t\t\t\tthis.getDimensionItems(columnConfig.dimension).map(\n\t\t\t\t\t\t(itemId: string) => this.getItem(itemId),\n\t\t\t\t\t),\n\t\t\t\t),\n\t\t\t};\n\t\t});\n\t}\n\n\tgetColumnMap() {\n\t\tconst columns = this.columnHeaders;\n\t\tconst sanitizedColumns =\n\t\t\tcompact(\n\t\t\t\tcolumns?.map(\n\t\t\t\t\t(column) =>\n\t\t\t\t\t\tcolumn.items?.map((item) => ({\n\t\t\t\t\t\t\t[column.dimension]: item.uid,\n\t\t\t\t\t\t})),\n\t\t\t\t),\n\t\t\t) ?? [];\n\t\tconst size = sanitizedColumns.reduce((acc, items) => {\n\t\t\treturn acc * (items?.length ?? 1);\n\t\t}, 1);\n\t\tconst standardiseColumns = sanitizedColumns.map((items) => [\n\t\t\t...times(size / items.length, () => items).flat(),\n\t\t]);\n\t\tthis.columnMap = compact(\n\t\t\tzip(...standardiseColumns).map((arr) =>\n\t\t\t\tarr.reduce((obj, value) => {\n\t\t\t\t\treturn { ...obj, ...value };\n\t\t\t\t}),\n\t\t\t),\n\t\t);\n\t}\n}\n"]}
1	+ {"version":3,"sources":["../../../../src/components/DHIS2PivotTable/services/engine.ts"],"names":["dimension"],"mappings":"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","sourcesContent":["import { Analytics, AnalyticsItem, LegendSet } from \"@hisptz/dhis2-utils\";\nimport { compact, findIndex, intersection, times, zip } from \"lodash\";\nimport { DHIS2Dimension } from \"../interfaces/index.js\";\n\nexport interface EngineConfig {\n\tlayout: {\n\t\tcolumns: { dimension: DHIS2Dimension; label?: string }[];\n\t\trows: { dimension: DHIS2Dimension; label?: string }[];\n\t\tfilter?: { dimension: DHIS2Dimension; label?: string }[];\n\t};\n\toptions?: {\n\t\tlegendSets?: LegendSet[];\n\t\thideEmptyColumns?: boolean;\n\t\thideEmptyRows?: boolean;\n\t\tshowRowTotals?: boolean;\n\t\tshowColumnTotals?: boolean;\n\t\tshowRowSubtotals?: boolean;\n\t\tshowColumnSubtotals?: boolean;\n\t\tshowFilterAsTitle?: boolean;\n\t\tfixColumnHeaders?: boolean;\n\t\tfixRowHeaders?: boolean;\n\t\t[key: string]: any;\n\t};\n}\n\nexport interface Header {\n\tdimension: DHIS2Dimension;\n\tlabel?: string;\n\titems?: AnalyticsItem[];\n}\n\nexport class DHIS2PivotTableEngine {\n\tanalyticsData: Analytics;\n\tvalueIndex: number;\n\tconfig: EngineConfig;\n\trowHeaders?: Header[];\n\tcolumnHeaders?: Header[];\n\n\tcolumnMap?: { [key: string]: any }[];\n\n\tconstructor({\n\t\tanalytics,\n\t\tconfig,\n\t}: {\n\t\tanalytics: Analytics;\n\t\tconfig: EngineConfig;\n\t}) {\n\t\tthis.config = config;\n\t\tthis.analyticsData = analytics;\n\t\tthis.valueIndex = findIndex(this.analyticsData.headers, [\n\t\t\t\"name\",\n\t\t\t\"value\",\n\t\t]);\n\t\tthis.getHeaders();\n\t\tthis.getColumnMap();\n\t}\n\n\tget title() {\n\t\tconst filters = this.config.layout.filter;\n\t\tconst labels =\n\t\t\tfilters?.map(({ dimension }) => {\n\t\t\t\tconst dimensions =\n\t\t\t\t\tthis.analyticsData.metaData?.dimensions[dimension];\n\n\t\t\t\treturn dimensions?.map((dimension) => {\n\t\t\t\t\tconst dimensionItem =\n\t\t\t\t\t\tthis.analyticsData.metaData?.items[dimension];\n\t\t\t\t\treturn dimensionItem?.name;\n\t\t\t\t});\n\t\t\t}) ?? [];\n\n\t\treturn compact(labels.flat()).join(\", \");\n\t}\n\n\tget titleSpan() {\n\t\tconst rowHeaders = this.rowHeaders?.length ?? 0;\n\t\tconst columnHeaders =\n\t\t\tthis.columnHeaders?.reduce(\n\t\t\t\t(acc, val) => acc + (val.items?.length ?? 0),\n\t\t\t\t0,\n\t\t\t) ?? 0;\n\n\t\treturn rowHeaders + columnHeaders;\n\t}\n\n\tget showTitle() {\n\t\treturn this.config?.options?.showFilterAsTitle;\n\t}\n\n\tget fixColumnHeaders() {\n\t\treturn this.config.options?.fixColumnHeaders ?? true;\n\t}\n\n\tget fixRowHeaders() {\n\t\treturn this.config.options?.fixRowHeaders ?? true;\n\t}\n\n\tgetDimensionItems(dimension: DHIS2Dimension) {\n\t\treturn this.analyticsData.metaData?.dimensions[dimension] ?? [];\n\t}\n\n\tgetItem(id: string) {\n\t\treturn this.analyticsData.metaData?.items[id as any];\n\t}\n\n\tgetValue(mapper: { [key: string]: any }) {\n\t\tconst dimensions = Object.values(mapper);\n\t\tconst data = this.analyticsData.rows?.filter(\n\t\t\t(row) => intersection(row, dimensions).length >= dimensions.length,\n\t\t);\n\t\treturn data?.reduce((acc, row) => {\n\t\t\treturn acc + parseFloat(row[this.valueIndex]);\n\t\t}, 0);\n\t}\n\n\tgetHeaders() {\n\t\tthis.rowHeaders = this.config.layout.rows.map((rowConfig) => {\n\t\t\treturn {\n\t\t\t\t...rowConfig,\n\t\t\t\titems: compact(\n\t\t\t\t\tthis.getDimensionItems(rowConfig.dimension).map(\n\t\t\t\t\t\t(itemId: string) => this.getItem(itemId),\n\t\t\t\t\t),\n\t\t\t\t),\n\t\t\t};\n\t\t});\n\t\tthis.columnHeaders = this.config.layout.columns.map((columnConfig) => {\n\t\t\treturn {\n\t\t\t\t...columnConfig,\n\t\t\t\titems: compact(\n\t\t\t\t\tthis.getDimensionItems(columnConfig.dimension).map(\n\t\t\t\t\t\t(itemId: string) => this.getItem(itemId),\n\t\t\t\t\t),\n\t\t\t\t),\n\t\t\t};\n\t\t});\n\t}\n\n\tgetColumnMap() {\n\t\tconst columns = this.columnHeaders;\n\t\tconst sanitizedColumns =\n\t\t\tcompact(\n\t\t\t\tcolumns?.map(\n\t\t\t\t\t(column) =>\n\t\t\t\t\t\tcolumn.items?.map((item) => ({\n\t\t\t\t\t\t\t[column.dimension]: item.uid,\n\t\t\t\t\t\t})),\n\t\t\t\t),\n\t\t\t) ?? [];\n\t\tconst size = sanitizedColumns.reduce((acc, items) => {\n\t\t\treturn acc * (items?.length ?? 1);\n\t\t}, 1);\n\t\tconst standardiseColumns = sanitizedColumns.map((items) => [\n\t\t\t...times(size / items.length, () => items).flat(),\n\t\t]);\n\t\tthis.columnMap = compact(\n\t\t\tzip(...standardiseColumns).map((arr) =>\n\t\t\t\tarr.reduce((obj, value) => {\n\t\t\t\t\treturn { ...obj, ...value };\n\t\t\t\t}),\n\t\t\t),\n\t\t);\n\t}\n}\n"]}

package/dist/components/SingleValueContainer/SingleValueContainer.stories.js CHANGED Viewed

@@ -143,10 +143,48 @@ SingleValuesWithDecimalPlaces.args = {
     }
   ]
 };
+const DisabledAnimation = {
+  name: "Disabled Animation"
+};
+DisabledAnimation.args = {
+  title: "PRIORITY INDICATORS",
+  animationDuration: 1500,
+  animationDelay: 500,
+  disableAnimation: true,
+  singleValueItems: [
+    {
+      label: "Total Bookings",
+      value: 136344
+    },
+    {
+      label: "At least one dose",
+      value: 4423,
+      percentage: 23,
+      color: "#0D47A1"
+    },
+    {
+      label: "Partially vaccinated",
+      value: 1394,
+      percentage: 17,
+      color: "#0D47A1"
+    },
+    {
+      label: "Fully vaccinated",
+      value: 12432,
+      percentage: 83,
+      color: "#0D47A1"
+    },
+    {
+      label: "Number of AEFI",
+      value: 26423
+    }
+  ]
+};
 exports.AnimatedAllValues = AnimatedAllValues;
 exports.AnimatedSingleValue = AnimatedSingleValue;
 exports.Default = Default;
+exports.DisabledAnimation = DisabledAnimation;
 exports.SingleValuesWithDecimalPlaces = SingleValuesWithDecimalPlaces;
 exports.default = SingleValueContainer_stories_default;
 //# sourceMappingURL=out.js.map

package/dist/components/SingleValueContainer/SingleValueContainer.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/SingleValueContainer/SingleValueContainer.stories.tsx"],"names":[],"mappings":"AACA,SAAS,6BAA6B;AAEtC,MAAM,OAA2C;AAAA,EAChD,OAAO;AAAA,EACP,WAAW;AACZ;AAEA,IAAO,uCAAQ;AAGR,MAAM,UAAiB;AAAA,EAC7B,MAAM;AACP;AACA,QAAQ,OAAO;AAAA,EACd,OAAO;AAAA,EACP,kBAAkB;AAAA,IACjB;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,IACR;AAAA,EACD;AACD;AAEO,MAAM,oBAA2B;AAAA,EACvC,MAAM;AACP;AACA,kBAAkB,OAAO;AAAA,EACxB,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,IACjB;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,IACR;AAAA,EACD;AACD;AAEO,MAAM,sBAA6B;AAAA,EACzC,MAAM;AACP;AACA,oBAAoB,OAAO;AAAA,EAC1B,OAAO;AAAA,EACP,kBAAkB;AAAA,IACjB;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,mBAAmB;AAAA,MACnB,gBAAgB;AAAA,IACjB;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,mBAAmB;AAAA,MACnB,gBAAgB;AAAA,IACjB;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,mBAAmB;AAAA,MACnB,gBAAgB;AAAA,IACjB;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,mBAAmB;AAAA,MACnB,gBAAgB;AAAA,IACjB;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,mBAAmB;AAAA,MACnB,gBAAgB;AAAA,IACjB;AAAA,EACD;AACD;AAEO,MAAM,gCAAuC;AAAA,EACnD,MAAM;AACP;AACA,8BAA8B,OAAO;AAAA,EACpC,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,IACjB;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,eAAe;AAAA,IAChB;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,eAAe;AAAA,IAChB;AAAA,EACD;AACD","sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport { SingleValueVisualizer } from \"./SingleValueVisualizer\";\n\nconst meta: Meta<typeof SingleValueVisualizer> = {\n\ttitle: \"Single Value Visualizer\",\n\tcomponent: SingleValueVisualizer,\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof SingleValueVisualizer>;\nexport const Default: Story = {\n\tname: \"Default\",\n};\nDefault.args = {\n\ttitle: \"PRIORITY INDICATORS\",\n\tsingleValueItems: [\n\t\t{\n\t\t\tlabel: \"Total Bookings\",\n\t\t\tvalue: 136,\n\t\t},\n\t\t{\n\t\t\tlabel: \"At least one dose\",\n\t\t\tvalue: 45,\n\t\t\tpercentage: 23,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Partially vaccinated\",\n\t\t\tvalue: 13,\n\t\t\tpercentage: 17,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Fully vaccinated\",\n\t\t\tvalue: 126,\n\t\t\tpercentage: 83,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Number of AEFI\",\n\t\t\tvalue: 26,\n\t\t},\n\t],\n};\n\nexport const AnimatedAllValues: Story = {\n\tname: \"Animated all values\",\n};\nAnimatedAllValues.args = {\n\ttitle: \"PRIORITY INDICATORS\",\n\tanimationDuration: 1500,\n\tanimationDelay: 500,\n\tsingleValueItems: [\n\t\t{\n\t\t\tlabel: \"Total Bookings\",\n\t\t\tvalue: 136344,\n\t\t},\n\t\t{\n\t\t\tlabel: \"At least one dose\",\n\t\t\tvalue: 4423,\n\t\t\tpercentage: 23,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Partially vaccinated\",\n\t\t\tvalue: 1394,\n\t\t\tpercentage: 17,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Fully vaccinated\",\n\t\t\tvalue: 12432,\n\t\t\tpercentage: 83,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Number of AEFI\",\n\t\t\tvalue: 26423,\n\t\t},\n\t],\n};\n\nexport const AnimatedSingleValue: Story = {\n\tname: \"Animated single value\",\n};\nAnimatedSingleValue.args = {\n\ttitle: \"PRIORITY INDICATORS\",\n\tsingleValueItems: [\n\t\t{\n\t\t\tlabel: \"Total Bookings\",\n\t\t\tvalue: 13634244,\n\t\t\tanimationDuration: 1000,\n\t\t\tanimationDelay: 100,\n\t\t},\n\t\t{\n\t\t\tlabel: \"At least one dose\",\n\t\t\tvalue: 45423,\n\t\t\tpercentage: 23,\n\t\t\tcolor: \"#0D47A1\",\n\t\t\tanimationDuration: 1000,\n\t\t\tanimationDelay: 600,\n\t\t},\n\t\t{\n\t\t\tlabel: \"Partially vaccinated\",\n\t\t\tvalue: 13434,\n\t\t\tpercentage: 17,\n\t\t\tcolor: \"#0D47A1\",\n\t\t\tanimationDuration: 1000,\n\t\t\tanimationDelay: 1100,\n\t\t},\n\t\t{\n\t\t\tlabel: \"Fully vaccinated\",\n\t\t\tvalue: 126432,\n\t\t\tpercentage: 83,\n\t\t\tcolor: \"#0D47A1\",\n\t\t\tanimationDuration: 1000,\n\t\t\tanimationDelay: 1600,\n\t\t},\n\t\t{\n\t\t\tlabel: \"Number of AEFI\",\n\t\t\tvalue: 268423,\n\t\t\tanimationDuration: 1000,\n\t\t\tanimationDelay: 2000,\n\t\t},\n\t],\n};\n\nexport const SingleValuesWithDecimalPlaces: Story = {\n\tname: \"Single value with decimal places\",\n};\nSingleValuesWithDecimalPlaces.args = {\n\ttitle: \"ENROLLMENTS\",\n\tanimationDuration: 1500,\n\tanimationDelay: 500,\n\tsingleValueItems: [\n\t\t{\n\t\t\tlabel: \"Number of Enrolled Clients\",\n\t\t\tvalue: 268423,\n\t\t\tdecimalPlaces: 3,\n\t\t},\n\t\t{\n\t\t\tlabel: \"Number of Served Clients\",\n\t\t\tvalue: 268423,\n\t\t\tdecimalPlaces: 1,\n\t\t},\n\t],\n};\n"]}
1	+ {"version":3,"sources":["../../../src/components/SingleValueContainer/SingleValueContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport { SingleValueVisualizer } from \"./SingleValueVisualizer\";\n\nconst meta: Meta<typeof SingleValueVisualizer> = {\n\ttitle: \"Single Value Visualizer\",\n\tcomponent: SingleValueVisualizer,\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof SingleValueVisualizer>;\nexport const Default: Story = {\n\tname: \"Default\",\n};\nDefault.args = {\n\ttitle: \"PRIORITY INDICATORS\",\n\tsingleValueItems: [\n\t\t{\n\t\t\tlabel: \"Total Bookings\",\n\t\t\tvalue: 136,\n\t\t},\n\t\t{\n\t\t\tlabel: \"At least one dose\",\n\t\t\tvalue: 45,\n\t\t\tpercentage: 23,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Partially vaccinated\",\n\t\t\tvalue: 13,\n\t\t\tpercentage: 17,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Fully vaccinated\",\n\t\t\tvalue: 126,\n\t\t\tpercentage: 83,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Number of AEFI\",\n\t\t\tvalue: 26,\n\t\t},\n\t],\n};\n\nexport const AnimatedAllValues: Story = {\n\tname: \"Animated all values\",\n};\nAnimatedAllValues.args = {\n\ttitle: \"PRIORITY INDICATORS\",\n\tanimationDuration: 1500,\n\tanimationDelay: 500,\n\tsingleValueItems: [\n\t\t{\n\t\t\tlabel: \"Total Bookings\",\n\t\t\tvalue: 136344,\n\t\t},\n\t\t{\n\t\t\tlabel: \"At least one dose\",\n\t\t\tvalue: 4423,\n\t\t\tpercentage: 23,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Partially vaccinated\",\n\t\t\tvalue: 1394,\n\t\t\tpercentage: 17,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Fully vaccinated\",\n\t\t\tvalue: 12432,\n\t\t\tpercentage: 83,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Number of AEFI\",\n\t\t\tvalue: 26423,\n\t\t},\n\t],\n};\n\nexport const AnimatedSingleValue: Story = {\n\tname: \"Animated single value\",\n};\nAnimatedSingleValue.args = {\n\ttitle: \"PRIORITY INDICATORS\",\n\tsingleValueItems: [\n\t\t{\n\t\t\tlabel: \"Total Bookings\",\n\t\t\tvalue: 13634244,\n\t\t\tanimationDuration: 1000,\n\t\t\tanimationDelay: 100,\n\t\t},\n\t\t{\n\t\t\tlabel: \"At least one dose\",\n\t\t\tvalue: 45423,\n\t\t\tpercentage: 23,\n\t\t\tcolor: \"#0D47A1\",\n\t\t\tanimationDuration: 1000,\n\t\t\tanimationDelay: 600,\n\t\t},\n\t\t{\n\t\t\tlabel: \"Partially vaccinated\",\n\t\t\tvalue: 13434,\n\t\t\tpercentage: 17,\n\t\t\tcolor: \"#0D47A1\",\n\t\t\tanimationDuration: 1000,\n\t\t\tanimationDelay: 1100,\n\t\t},\n\t\t{\n\t\t\tlabel: \"Fully vaccinated\",\n\t\t\tvalue: 126432,\n\t\t\tpercentage: 83,\n\t\t\tcolor: \"#0D47A1\",\n\t\t\tanimationDuration: 1000,\n\t\t\tanimationDelay: 1600,\n\t\t},\n\t\t{\n\t\t\tlabel: \"Number of AEFI\",\n\t\t\tvalue: 268423,\n\t\t\tanimationDuration: 1000,\n\t\t\tanimationDelay: 2000,\n\t\t},\n\t],\n};\n\nexport const SingleValuesWithDecimalPlaces: Story = {\n\tname: \"Single value with decimal places\",\n};\nSingleValuesWithDecimalPlaces.args = {\n\ttitle: \"ENROLLMENTS\",\n\tanimationDuration: 1500,\n\tanimationDelay: 500,\n\tsingleValueItems: [\n\t\t{\n\t\t\tlabel: \"Number of Enrolled Clients\",\n\t\t\tvalue: 268423,\n\t\t\tdecimalPlaces: 3,\n\t\t},\n\t\t{\n\t\t\tlabel: \"Number of Served Clients\",\n\t\t\tvalue: 268423,\n\t\t\tdecimalPlaces: 1,\n\t\t},\n\t],\n};\n\nexport const DisabledAnimation: Story = {\n\tname: \"Disabled Animation\",\n};\nDisabledAnimation.args = {\n\ttitle: \"PRIORITY INDICATORS\",\n\tanimationDuration: 1500,\n\tanimationDelay: 500,\n\tdisableAnimation: true,\n\tsingleValueItems: [\n\t\t{\n\t\t\tlabel: \"Total Bookings\",\n\t\t\tvalue: 136344,\n\t\t},\n\t\t{\n\t\t\tlabel: \"At least one dose\",\n\t\t\tvalue: 4423,\n\t\t\tpercentage: 23,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Partially vaccinated\",\n\t\t\tvalue: 1394,\n\t\t\tpercentage: 17,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Fully vaccinated\",\n\t\t\tvalue: 12432,\n\t\t\tpercentage: 83,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Number of AEFI\",\n\t\t\tvalue: 26423,\n\t\t},\n\t],\n};\n"]}

package/dist/components/SingleValueContainer/SingleValueVisualizer.js CHANGED Viewed

@@ -18,7 +18,8 @@ function SingleValueVisualizer({
   title,
   singleValueItems,
   animationDuration,
-  animationDelay
+  animationDelay,
+  disableAnimation
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-100 h-100", children: [
     /* @__PURE__ */ jsxRuntime.jsx(ui.CssReset, {}),
@@ -34,6 +35,7 @@ function SingleValueVisualizer({
         (singleValueItem) => /* @__PURE__ */ jsxRuntime.jsx(
           SingleValueItem__default.default,
           {
+            disableAnimation,
             ...singleValueItem,
             globalAnimationDuration: animationDuration,
             globalAnimationDelay: animationDelay

package/dist/components/SingleValueContainer/SingleValueVisualizer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/SingleValueContainer/SingleValueVisualizer.tsx"],"names":[],"mappings":"~~AAiBG~~,cAEC,YAFD;~~AAjBH~~,OAAO,UAAU;AACjB,SAAS,gBAAgB;AACzB,SAAgB,gBAAgB;AAChC,OAAO,qBAAqB;AAC5B,OAAO,YAAY;AAGnB,cAAc;AAEP,SAAS,sBAAsB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAmD;AAClD,SACC,qBAAC,SAAI,WAAU,eACd;AAAA,wBAAC,YAAS;AAAA,IACV,oBAAC,YAAS,UAAU,oBAAC,SAAK,eAAK,EAAE,aAAa,GAAE,GAC/C,+BAAC,SACA;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,GAAG,OAAO,cAAc,CAAC,IAAI,OAAO,WAAW,CAAC;AAAA,UAE1D;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,SAAI,WAAW,OAAO,mBAAmB,GACxC,2BAAiB;AAAA,QACjB,CAAC,oBACA;AAAA,UAAC;AAAA;AAAA,YAEC,GAAG;AAAA,YACJ,yBAAyB;AAAA,YACzB,sBAAsB;AAAA;AAAA,UAHjB,GAAG,gBAAgB,KAAK,IAAI,gBAAgB,KAAK;AAAA,QAIvD;AAAA,MAEF,GACD;AAAA,OACD,GACD;AAAA,KACD;AAEF;AAKO,MAAM,uBAAuB","sourcesContent":["import i18n from \"@dhis2/d2-i18n\";\nimport { CssReset } from \"@dhis2/ui\";\nimport React, { Suspense } from \"react\";\nimport SingleValueItem from \"./components/SingleValueItem/SingleValueItem.js\";\nimport styles from \"./styles/SingleValueContainer.module.css\";\nimport { SingleValue, SingleValueVisualizerProps } from \"./types/props.js\";\n\nexport * from \"./types/props.js\";\n\nexport function SingleValueVisualizer({\n\ttitle,\n\tsingleValueItems,\n\tanimationDuration,\n\tanimationDelay,\n}: SingleValueVisualizerProps): React.ReactElement {\n\treturn (\n\t\t<div className=\"w-100 h-100\">\n\t\t\t<CssReset />\n\t\t\t<Suspense fallback={<div>{i18n.t(\"Loading ...\")}</div>}>\n\t\t\t\t<div>\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={`${styles[\"font-x-large\"]} ${styles[\"font-bold\"]}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div className={styles[\"single-value-list\"]}>\n\t\t\t\t\t\t{singleValueItems.map(\n\t\t\t\t\t\t\t(singleValueItem: SingleValue) => (\n\t\t\t\t\t\t\t\t<SingleValueItem\n\t\t\t\t\t\t\t\t\tkey={`${singleValueItem.label}-${singleValueItem.value}`}\n\t\t\t\t\t\t\t\t\t{...singleValueItem}\n\t\t\t\t\t\t\t\t\tglobalAnimationDuration={animationDuration}\n\t\t\t\t\t\t\t\t\tglobalAnimationDelay={animationDelay}\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</div>\n\t\t\t\t</div>\n\t\t\t</Suspense>\n\t\t</div>\n\t);\n}\n\n/*\n @deprecated since `v2`. Use `SingleValueVisualizer` instead\n * */\nexport const SingleValueContainer = SingleValueVisualizer;\nexport { SingleValueItem };\n"]}
1	+ {"version":3,"sources":["../../../src/components/SingleValueContainer/SingleValueVisualizer.tsx"],"names":[],"mappings":"AAkBG,cAEC,YAFD;AAlBH,OAAO,UAAU;AACjB,SAAS,gBAAgB;AACzB,SAAgB,gBAAgB;AAChC,OAAO,qBAAqB;AAC5B,OAAO,YAAY;AAGnB,cAAc;AAEP,SAAS,sBAAsB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAmD;AAClD,SACC,qBAAC,SAAI,WAAU,eACd;AAAA,wBAAC,YAAS;AAAA,IACV,oBAAC,YAAS,UAAU,oBAAC,SAAK,eAAK,EAAE,aAAa,GAAE,GAC/C,+BAAC,SACA;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,GAAG,OAAO,cAAc,CAAC,IAAI,OAAO,WAAW,CAAC;AAAA,UAE1D;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,SAAI,WAAW,OAAO,mBAAmB,GACxC,2BAAiB;AAAA,QACjB,CAAC,oBACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YAEC,GAAG;AAAA,YACJ,yBAAyB;AAAA,YACzB,sBAAsB;AAAA;AAAA,UAHjB,GAAG,gBAAgB,KAAK,IAAI,gBAAgB,KAAK;AAAA,QAIvD;AAAA,MAEF,GACD;AAAA,OACD,GACD;AAAA,KACD;AAEF;AAKO,MAAM,uBAAuB","sourcesContent":["import i18n from \"@dhis2/d2-i18n\";\nimport { CssReset } from \"@dhis2/ui\";\nimport React, { Suspense } from \"react\";\nimport SingleValueItem from \"./components/SingleValueItem/SingleValueItem.js\";\nimport styles from \"./styles/SingleValueContainer.module.css\";\nimport { SingleValue, SingleValueVisualizerProps } from \"./types/props.js\";\n\nexport * from \"./types/props.js\";\n\nexport function SingleValueVisualizer({\n\ttitle,\n\tsingleValueItems,\n\tanimationDuration,\n\tanimationDelay,\n\tdisableAnimation,\n}: SingleValueVisualizerProps): React.ReactElement {\n\treturn (\n\t\t<div className=\"w-100 h-100\">\n\t\t\t<CssReset />\n\t\t\t<Suspense fallback={<div>{i18n.t(\"Loading ...\")}</div>}>\n\t\t\t\t<div>\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={`${styles[\"font-x-large\"]} ${styles[\"font-bold\"]}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div className={styles[\"single-value-list\"]}>\n\t\t\t\t\t\t{singleValueItems.map(\n\t\t\t\t\t\t\t(singleValueItem: SingleValue) => (\n\t\t\t\t\t\t\t\t<SingleValueItem\n\t\t\t\t\t\t\t\t\tdisableAnimation={disableAnimation}\n\t\t\t\t\t\t\t\t\tkey={`${singleValueItem.label}-${singleValueItem.value}`}\n\t\t\t\t\t\t\t\t\t{...singleValueItem}\n\t\t\t\t\t\t\t\t\tglobalAnimationDuration={animationDuration}\n\t\t\t\t\t\t\t\t\tglobalAnimationDelay={animationDelay}\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</div>\n\t\t\t\t</div>\n\t\t\t</Suspense>\n\t\t</div>\n\t);\n}\n\n/*\n @deprecated since `v2`. Use `SingleValueVisualizer` instead\n * */\nexport const SingleValueContainer = SingleValueVisualizer;\nexport { SingleValueItem };\n"]}

package/dist/components/SingleValueContainer/components/SingleValueItem/SingleValueItem.js CHANGED Viewed

@@ -21,13 +21,15 @@ function SingleValueItem({
   animationDelay,
   globalAnimationDelay,
   decimalPlaces,
-  globalAnimationDuration
+  globalAnimationDuration,
+  disableAnimation
 }) {
   const numberFormatter = (value2) => Intl.NumberFormat("en-US", {
     notation: "compact",
     maximumFractionDigits: decimalPlaces ?? 1
   }).format(value2);
   const sanitizedValue = reactSpring.useSpring({
+    cancel: disableAnimation,
     val: value,
     from: { val: 0 },
     config: {

package/dist/components/SingleValueContainer/components/SingleValueItem/SingleValueItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/SingleValueContainer/components/SingleValueItem/SingleValueItem.tsx"],"names":["value"],"mappings":"~~AAyCE~~,SACC,KADD;~~AAzCF~~,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAE3B,SAAS,UAAU,iBAAiB;AACpC,OAAO,YAAY;AAEnB,OAAO,2BAA2B;~~AAOnB~~,SAAR,gBAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyC;AACxC,QAAM,kBAAkB,CAACA,WACxB,KAAK,aAAa,SAAS;AAAA,IAC1B,UAAU;AAAA,IACV,uBAAuB,iBAAiB;AAAA,EACzC,CAAC,EAAE,OAAOA,MAAK;AAEhB,QAAM,iBAAiB,UAAU;AAAA,IAChC,KAAK;AAAA,IACL,MAAM,EAAE,KAAK,EAAE;AAAA,IACf,QAAQ;AAAA,MACP,UAAU,qBAAqB,2BAA2B;AAAA,IAC3D;AAAA,IACA,OAAO,kBAAkB,wBAAwB;AAAA,EAClD,CAAC;AAED,QAAM,iBAAiB,GAAG,KAAK,KAAK,KAAK;AACzC,SACC,qBAAC,SAAI,WAAW,GAAG,OAAO,mBAAmB,CAAC,gBAC7C;AAAA,wBAAC,SAAI,WAAW,OAAO,YAAY,GAAI,iBAAM;AAAA,IAC7C,oBAAC,WAAQ,SAAS,WAAW,cAAc,GAC1C;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA,WAAW,GAAG,OAAO,WAAW,CAAC,IAAI,OAAO,eAAe,CAAC,IAAI,OAAO,aAAa,CAAC;AAAA,QAEpF,yBAAe,IAAI;AAAA,UAAG,CAACA,WACvB,gBAAgB,KAAK,MAAMA,MAAK,CAAC;AAAA,QAClC;AAAA;AAAA,IACD,GACD;AAAA,IACC,aACA,oBAAC,yBAAsB,OAAc,YAAwB,IAE7D,oBAAC,UAAK;AAAA,KAER;AAEF","sourcesContent":["import { Tooltip } from \"@dhis2/ui\";\nimport { capitalize } from \"lodash\";\nimport React from \"react\";\nimport { animated, useSpring } from \"react-spring\";\nimport styles from \"../../styles/SingleValueContainer.module.css\";\nimport { SingleValue } from \"../../types/props.js\";\nimport SingleValuePercentage from \"./SingleValuePercentage.js\";\n\ninterface SingleValueProps extends SingleValue {\n\tglobalAnimationDelay?: number;\n\tglobalAnimationDuration?: number;\n}\n\nexport default function SingleValueItem({\n\tlabel,\n\tvalue,\n\tcolor,\n\tpercentage,\n\tanimationDuration,\n\tanimationDelay,\n\tglobalAnimationDelay,\n\tdecimalPlaces,\n\tglobalAnimationDuration,\n}: SingleValueProps): React.ReactElement {\n\tconst numberFormatter = (value: number) =>\n\t\tIntl.NumberFormat(\"en-US\", {\n\t\t\tnotation: \"compact\",\n\t\t\tmaximumFractionDigits: decimalPlaces ?? 1,\n\t\t}).format(value);\n\n\tconst sanitizedValue = useSpring({\n\t\tval: value,\n\t\tfrom: { val: 0 },\n\t\tconfig: {\n\t\t\tduration: animationDuration ?? globalAnimationDuration ?? 1000,\n\t\t},\n\t\tdelay: animationDelay ?? globalAnimationDelay ?? 10,\n\t});\n\n\tconst tooltipContent = `${label}: ${value}`;\n\treturn (\n\t\t<div className={`${styles[\"single-value-item\"]} text-center`}>\n\t\t\t<div className={styles[\"font-large\"]}>{label}</div>\n\t\t\t<Tooltip content={capitalize(tooltipContent)}>\n\t\t\t\t<animated.div\n\t\t\t\t\tclassName={`${styles[\"font-bold\"]} ${styles[\"font-xx-large\"]} ${styles[\"padding-top\"]}`}\n\t\t\t\t>\n\t\t\t\t\t{sanitizedValue.val.to((value) =>\n\t\t\t\t\t\tnumberFormatter(Math.floor(value)),\n\t\t\t\t\t)}\n\t\t\t\t</animated.div>\n\t\t\t</Tooltip>\n\t\t\t{percentage ? (\n\t\t\t\t<SingleValuePercentage color={color} percentage={percentage} />\n\t\t\t) : (\n\t\t\t\t<span></span>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["../../../../../src/components/SingleValueContainer/components/SingleValueItem/SingleValueItem.tsx"],"names":["value"],"mappings":"AA4CE,SACC,KADD;AA5CF,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAE3B,SAAS,UAAU,iBAAiB;AACpC,OAAO,YAAY;AAEnB,OAAO,2BAA2B;AAQnB,SAAR,gBAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyC;AACxC,QAAM,kBAAkB,CAACA,WACxB,KAAK,aAAa,SAAS;AAAA,IAC1B,UAAU;AAAA,IACV,uBAAuB,iBAAiB;AAAA,EACzC,CAAC,EAAE,OAAOA,MAAK;AAEhB,QAAM,iBAAiB,UAAU;AAAA,IAChC,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,MAAM,EAAE,KAAK,EAAE;AAAA,IACf,QAAQ;AAAA,MACP,UAAU,qBAAqB,2BAA2B;AAAA,IAC3D;AAAA,IACA,OAAO,kBAAkB,wBAAwB;AAAA,EAClD,CAAC;AAED,QAAM,iBAAiB,GAAG,KAAK,KAAK,KAAK;AACzC,SACC,qBAAC,SAAI,WAAW,GAAG,OAAO,mBAAmB,CAAC,gBAC7C;AAAA,wBAAC,SAAI,WAAW,OAAO,YAAY,GAAI,iBAAM;AAAA,IAC7C,oBAAC,WAAQ,SAAS,WAAW,cAAc,GAC1C;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA,WAAW,GAAG,OAAO,WAAW,CAAC,IAAI,OAAO,eAAe,CAAC,IAAI,OAAO,aAAa,CAAC;AAAA,QAEpF,yBAAe,IAAI;AAAA,UAAG,CAACA,WACvB,gBAAgB,KAAK,MAAMA,MAAK,CAAC;AAAA,QAClC;AAAA;AAAA,IACD,GACD;AAAA,IACC,aACA,oBAAC,yBAAsB,OAAc,YAAwB,IAE7D,oBAAC,UAAK;AAAA,KAER;AAEF","sourcesContent":["import { Tooltip } from \"@dhis2/ui\";\nimport { capitalize } from \"lodash\";\nimport React from \"react\";\nimport { animated, useSpring } from \"react-spring\";\nimport styles from \"../../styles/SingleValueContainer.module.css\";\nimport { SingleValue } from \"../../types/props.js\";\nimport SingleValuePercentage from \"./SingleValuePercentage.js\";\n\ninterface SingleValueProps extends SingleValue {\n\tglobalAnimationDelay?: number;\n\tglobalAnimationDuration?: number;\n\tdisableAnimation?: boolean;\n}\n\nexport default function SingleValueItem({\n\tlabel,\n\tvalue,\n\tcolor,\n\tpercentage,\n\tanimationDuration,\n\tanimationDelay,\n\tglobalAnimationDelay,\n\tdecimalPlaces,\n\tglobalAnimationDuration,\n\tdisableAnimation,\n}: SingleValueProps): React.ReactElement {\n\tconst numberFormatter = (value: number) =>\n\t\tIntl.NumberFormat(\"en-US\", {\n\t\t\tnotation: \"compact\",\n\t\t\tmaximumFractionDigits: decimalPlaces ?? 1,\n\t\t}).format(value);\n\n\tconst sanitizedValue = useSpring({\n\t\tcancel: disableAnimation,\n\t\tval: value,\n\t\tfrom: { val: 0 },\n\t\tconfig: {\n\t\t\tduration: animationDuration ?? globalAnimationDuration ?? 1000,\n\t\t},\n\t\tdelay: animationDelay ?? globalAnimationDelay ?? 10,\n\t});\n\n\tconst tooltipContent = `${label}: ${value}`;\n\treturn (\n\t\t<div className={`${styles[\"single-value-item\"]} text-center`}>\n\t\t\t<div className={styles[\"font-large\"]}>{label}</div>\n\t\t\t<Tooltip content={capitalize(tooltipContent)}>\n\t\t\t\t<animated.div\n\t\t\t\t\tclassName={`${styles[\"font-bold\"]} ${styles[\"font-xx-large\"]} ${styles[\"padding-top\"]}`}\n\t\t\t\t>\n\t\t\t\t\t{sanitizedValue.val.to((value) =>\n\t\t\t\t\t\tnumberFormatter(Math.floor(value)),\n\t\t\t\t\t)}\n\t\t\t\t</animated.div>\n\t\t\t</Tooltip>\n\t\t\t{percentage ? (\n\t\t\t\t<SingleValuePercentage color={color} percentage={percentage} />\n\t\t\t) : (\n\t\t\t\t<span></span>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"]}

package/dist/components/SingleValueContainer/index.js CHANGED Viewed

@@ -2,6 +2,7 @@
 var SingleValueVisualizer_js = require('./SingleValueVisualizer.js');
 var SingleValuePercentage_js = require('./components/SingleValueItem/SingleValuePercentage.js');
+var SingleValueItem_js = require('./components/SingleValueItem/SingleValueItem.js');
 var props_js = require('./types/props.js');
@@ -18,6 +19,12 @@ Object.keys(SingleValuePercentage_js).forEach(function (k) {
 		get: function () { return SingleValuePercentage_js[k]; }
 	});
 });
+Object.keys(SingleValueItem_js).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return SingleValueItem_js[k]; }
+	});
+});
 Object.keys(props_js).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/components/SingleValueContainer/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/SingleValueContainer/index.ts"],"names":[],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc","sourcesContent":["export * from \"./SingleValueVisualizer.js\";\nexport * from \"./components/SingleValueItem/SingleValuePercentage.js\";\nexport * from \"./types/props.js\";\n"]}
1	+ {"version":3,"sources":["../../../src/components/SingleValueContainer/index.ts"],"names":[],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc","sourcesContent":["export * from \"./SingleValueVisualizer.js\";\nexport * from \"./components/SingleValueItem/SingleValuePercentage.js\";\nexport * from \"./components/SingleValueItem/SingleValueItem.js\";\nexport * from \"./types/props.js\";\n"]}

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

@@ -22,6 +22,7 @@ const Default = {
         category: ["ou"],
         filter: ["pe"]
       },
+      showFilterAsTitle: true,
       type: "column"
     }
   }
@@ -36,6 +37,7 @@ const Bar = {
         category: ["ou"],
         filter: ["pe"]
       },
+      showFilterAsTitle: true,
       type: "bar"
     }
   }
@@ -50,6 +52,7 @@ const MultipleColumns = {
         category: ["pe"],
         filter: ["dx"]
       },
+      showFilterAsTitle: true,
       type: "column"
     }
   }
@@ -64,6 +67,7 @@ const StackedColumn = {
         category: ["pe"],
         filter: ["dx"]
       },
+      showFilterAsTitle: true,
       type: "stacked-column"
     }
   }
@@ -78,6 +82,7 @@ const StackedBar = {
         category: ["pe"],
         filter: ["dx"]
       },
+      showFilterAsTitle: true,
       type: "stacked-bar"
     }
   }
@@ -92,6 +97,7 @@ const Line = {
         category: ["ou"],
         filter: ["pe"]
       },
+      showFilterAsTitle: true,
       type: "line"
     }
   }
@@ -106,6 +112,7 @@ const MultipleLines = {
         category: ["pe"],
         filter: ["dx"]
       },
+      showFilterAsTitle: true,
       type: "line"
     }
   }
@@ -118,8 +125,9 @@ const PieChart = {
       layout: {
         series: ["dx"],
         category: [],
-        filter: ["dx", "pe"]
+        filter: ["pe", "ou"]
       },
+      showFilterAsTitle: true,
       type: "pie"
     }
   }
@@ -134,6 +142,7 @@ const MultiSeries = {
         category: ["pe"],
         filter: ["dx"]
       },
+      showFilterAsTitle: true,
       type: "multi-series",
       multiSeries: {
         series: [
@@ -197,6 +206,7 @@ const ComplexMultiSeries = {
         filter: ["ou"]
       },
       type: "multi-series",
+      showFilterAsTitle: true,
       multiSeries: {
         series: [
           {