@hisptz/dhis2-analytics 1.0.65 → 2.0.0-alpha.0

package/dist/components/Visualization/components/VisualizationSelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Visualization/components/VisualizationSelector/index.tsx"],"names":["dimension","value"],"mappings":"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","sourcesContent":["import React, { useMemo } from \"react\";\nimport { useVisualizationType } from \"../VisualizationTypeProvider\";\nimport { useAnalyticsData } from \"../AnalyticsDataProvider\";\nimport { CircularLoader } from \"@dhis2/ui\";\nimport {\n\tDHIS2PivotTable,\n\tDHIS2PivotTableOptions,\n} from \"../../../DHIS2PivotTable\";\nimport { useLayout } from \"../LayoutProvider\";\nimport { filter, find, findIndex, forEach, mapValues, set } from \"lodash\";\nimport { Dimension, useDimensions } from \"../DimensionsProvider\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { ChartConfig, DHIS2Chart } from \"../../../ChartAnalytics\";\nimport { VisualizationConfig } from \"../../index\";\nimport { DHIS2Map, MapProps } from \"../../../Map\";\nimport { OrgUnitSelection } from \"@hisptz/dhis2-utils\";\nimport {\n\tThematicLayerConfig,\n\tThematicLayerRawData,\n} from \"../../../Map/components/MapLayer/interfaces\";\nimport { PivotTableLayoutProps } from \"../../../DHIS2PivotTable/components/Table\";\n\nexport interface VisualizationSelectorProps {\n\tconfig: VisualizationConfig;\n}\n\nexport function getDimensionLabel(dimension: Dimension) {\n\tswitch (dimension) {\n\t\tcase \"pe\":\n\t\t\treturn i18n.t(\"Period\");\n\t\tcase \"ou\":\n\t\t\treturn i18n.t(\"Organisation unit\");\n\t\tcase \"dx\":\n\t\t\treturn i18n.t(\"Data\");\n\t\tdefault:\n\t\t\treturn \"\";\n\t}\n}\n\nexport function getOrgUnitSelectionFromIds(ous: string[]) {\n\tconst orgUnitSelection: OrgUnitSelection = {\n\t\torgUnits: [],\n\t};\n\tforEach(ous, (ou) => {\n\t\tif (ou === \"USER_ORGUNIT\") {\n\t\t\tset(orgUnitSelection, [\"userOrgUnit\"], true);\n\t\t} else if (ou === \"USER_ORGUNIT_CHILDREN\") {\n\t\t\tset(orgUnitSelection, [\"userSubUnit\"], true);\n\t\t} else if (ou === \"USER_ORGUNIT_GRANDCHILDREN\") {\n\t\t\tset(orgUnitSelection, [\"userSubX2Unit\"], true);\n\t\t} else {\n\t\t\tconst orgUnits = [...(orgUnitSelection.orgUnits ?? [])];\n\t\t\torgUnits.push({\n\t\t\t\tid: ou,\n\t\t\t\tchildren: [],\n\t\t\t\tpath: \"\",\n\t\t\t});\n\t\t\tset(orgUnitSelection, [\"orgUnits\"], orgUnits);\n\t\t}\n\t});\n\treturn orgUnitSelection;\n}\n\nexport function PivotTableRenderer({\n\toptions,\n}: {\n\toptions: DHIS2PivotTableOptions & PivotTableLayoutProps;\n}) {\n\tconst [layout] = useLayout();\n\tconst { analytics } = useAnalyticsData();\n\n\tconst sanitizedLayout = useMemo(() => {\n\t\treturn mapValues(layout, (dimension) =>\n\t\t\tdimension.map((dimension) => ({\n\t\t\t\tdimension,\n\t\t\t\tlabel: getDimensionLabel(dimension),\n\t\t\t})),\n\t\t);\n\t}, [layout]);\n\n\tif (!analytics) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<DHIS2PivotTable\n\t\t\ttableProps={{\n\t\t\t\tscrollHeight: options.scrollHeight ?? \"100%\",\n\t\t\t\tscrollWidth: options.scrollWidth ?? \"100%\",\n\t\t\t\twidth: options.width ?? \"100%\",\n\t\t\t}}\n\t\t\tanalytics={analytics}\n\t\t\tconfig={{ layout: sanitizedLayout, options }}\n\t\t/>\n\t);\n}\n\nexport function ChartRenderer({ options }: { options: ChartConfig }) {\n\tconst { analytics } = useAnalyticsData();\n\tif (!analytics) {\n\t\treturn null;\n\t}\n\treturn <DHIS2Chart analytics={analytics} config={{ ...options }} />;\n}\n\nexport function MapRenderer({\n\toptions,\n}: {\n\toptions: Omit<MapProps, \"orgUnitSelection\" | \"periodSelection\">;\n}) {\n\tconst [dimensions] = useDimensions();\n\tconst { analytics } = useAnalyticsData();\n\tconst orgUnitSelection: OrgUnitSelection = useMemo(() => {\n\t\treturn getOrgUnitSelectionFromIds(dimensions.ou ?? []);\n\t}, [dimensions.ou]);\n\n\tconst thematicLayers: ThematicLayerConfig[] = useMemo(() => {\n\t\tconst valueIndex =\n\t\t\tfindIndex(analytics.headers, [\"name\", \"value\"]) ?? -1;\n\t\treturn (\n\t\t\tanalytics.metaData?.dimensions[\"dx\"]?.map((dataId) => {\n\t\t\t\tconst config = find(options.thematicLayers, [\"id\", dataId]);\n\t\t\t\tconst data: ThematicLayerRawData[] =\n\t\t\t\t\tanalytics.metaData?.dimensions?.ou?.map((ouId) => {\n\t\t\t\t\t\tconst values = filter(\n\t\t\t\t\t\t\tanalytics.rows,\n\t\t\t\t\t\t\t(row) => row.includes(dataId) && row.includes(ouId),\n\t\t\t\t\t\t) as unknown as string[];\n\t\t\t\t\t\tconst value = values.reduce(\n\t\t\t\t\t\t\t(acc, value) => acc + parseFloat(value[valueIndex]),\n\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tdata: value,\n\t\t\t\t\t\t\tdataItem: dataId,\n\t\t\t\t\t\t\torgUnit: ouId,\n\t\t\t\t\t\t};\n\t\t\t\t\t}) ?? [];\n\t\t\t\treturn {\n\t\t\t\t\t...config,\n\t\t\t\t\tdata,\n\t\t\t\t} as ThematicLayerConfig;\n\t\t\t}) ?? []\n\t\t);\n\t}, [analytics]);\n\n\treturn (\n\t\t<DHIS2Map\n\t\t\torgUnitSelection={orgUnitSelection}\n\t\t\tthematicLayers={thematicLayers}\n\t\t/>\n\t);\n}\n\nexport function VisualizationSelector({ config }: VisualizationSelectorProps) {\n\tconst [type] = useVisualizationType();\n\tconst { analytics, loading } = useAnalyticsData();\n\n\tif (loading) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\theight: \"100%\",\n\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\tjustifyContent: \"center\",\n\t\t\t\t\talignItems: \"center\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<CircularLoader small />\n\t\t\t</div>\n\t\t);\n\t}\n\tif (!analytics) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{type === \"pivotTable\" && (\n\t\t\t\t<PivotTableRenderer\n\t\t\t\t\toptions={config?.pivotTable as DHIS2PivotTableOptions}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{type === \"chart\" && (\n\t\t\t\t<ChartRenderer options={config?.chart as ChartConfig} />\n\t\t\t)}\n\t\t\t{type === \"map\" && (\n\t\t\t\t<MapRenderer\n\t\t\t\t\toptions={\n\t\t\t\t\t\tconfig?.map as Omit<\n\t\t\t\t\t\t\tMapProps,\n\t\t\t\t\t\t\t\"orgUnitSelection\" | \"periodSelection\"\n\t\t\t\t\t\t>\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/Visualization/components/VisualizationSelector/index.mjs

@@ -0,0 +1,167 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useVisualizationType } from '../VisualizationTypeProvider';
+import { useAnalyticsData } from '../AnalyticsDataProvider';
+import { CircularLoader } from '@dhis2/ui';
+import { DHIS2PivotTable } from '../../../DHIS2PivotTable';
+import { useLayout } from '../LayoutProvider';
+import { forEach, set, mapValues, findIndex, find, filter } from 'lodash';
+import { useDimensions } from '../DimensionsProvider';
+import i18n from '@dhis2/d2-i18n';
+import { DHIS2Chart } from '../../../ChartAnalytics';
+import { DHIS2Map } from '../../../Map';
+
+function getDimensionLabel(dimension) {
+  switch (dimension) {
+    case "pe":
+      return i18n.t("Period");
+    case "ou":
+      return i18n.t("Organisation unit");
+    case "dx":
+      return i18n.t("Data");
+    default:
+      return "";
+  }
+}
+function getOrgUnitSelectionFromIds(ous) {
+  const orgUnitSelection = {
+    orgUnits: []
+  };
+  forEach(ous, (ou) => {
+    if (ou === "USER_ORGUNIT") {
+      set(orgUnitSelection, ["userOrgUnit"], true);
+    } else if (ou === "USER_ORGUNIT_CHILDREN") {
+      set(orgUnitSelection, ["userSubUnit"], true);
+    } else if (ou === "USER_ORGUNIT_GRANDCHILDREN") {
+      set(orgUnitSelection, ["userSubX2Unit"], true);
+    } else {
+      const orgUnits = [...orgUnitSelection.orgUnits ?? []];
+      orgUnits.push({
+        id: ou,
+        children: [],
+        path: ""
+      });
+      set(orgUnitSelection, ["orgUnits"], orgUnits);
+    }
+  });
+  return orgUnitSelection;
+}
+function PivotTableRenderer({
+  options
+}) {
+  const [layout] = useLayout();
+  const { analytics } = useAnalyticsData();
+  const sanitizedLayout = useMemo(() => {
+    return mapValues(
+      layout,
+      (dimension) => dimension.map((dimension2) => ({
+        dimension: dimension2,
+        label: getDimensionLabel(dimension2)
+      }))
+    );
+  }, [layout]);
+  if (!analytics) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    DHIS2PivotTable,
+    {
+      tableProps: {
+        scrollHeight: options.scrollHeight ?? "100%",
+        scrollWidth: options.scrollWidth ?? "100%",
+        width: options.width ?? "100%"
+      },
+      analytics,
+      config: { layout: sanitizedLayout, options }
+    }
+  );
+}
+function ChartRenderer({ options }) {
+  const { analytics } = useAnalyticsData();
+  if (!analytics) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(DHIS2Chart, { analytics, config: { ...options } });
+}
+function MapRenderer({
+  options
+}) {
+  const [dimensions] = useDimensions();
+  const { analytics } = useAnalyticsData();
+  const orgUnitSelection = useMemo(() => {
+    return getOrgUnitSelectionFromIds(dimensions.ou ?? []);
+  }, [dimensions.ou]);
+  const thematicLayers = useMemo(() => {
+    const valueIndex = findIndex(analytics.headers, ["name", "value"]) ?? -1;
+    return analytics.metaData?.dimensions["dx"]?.map((dataId) => {
+      const config = find(options.thematicLayers, ["id", dataId]);
+      const data = analytics.metaData?.dimensions?.ou?.map((ouId) => {
+        const values = filter(
+          analytics.rows,
+          (row) => row.includes(dataId) && row.includes(ouId)
+        );
+        const value = values.reduce(
+          (acc, value2) => acc + parseFloat(value2[valueIndex]),
+          0
+        );
+        return {
+          data: value,
+          dataItem: dataId,
+          orgUnit: ouId
+        };
+      }) ?? [];
+      return {
+        ...config,
+        data
+      };
+    }) ?? [];
+  }, [analytics]);
+  return /* @__PURE__ */ jsx(
+    DHIS2Map,
+    {
+      orgUnitSelection,
+      thematicLayers
+    }
+  );
+}
+function VisualizationSelector({ config }) {
+  const [type] = useVisualizationType();
+  const { analytics, loading } = useAnalyticsData();
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ jsx(CircularLoader, { small: true })
+      }
+    );
+  }
+  if (!analytics) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    type === "pivotTable" && /* @__PURE__ */ jsx(
+      PivotTableRenderer,
+      {
+        options: config?.pivotTable
+      }
+    ),
+    type === "chart" && /* @__PURE__ */ jsx(ChartRenderer, { options: config?.chart }),
+    type === "map" && /* @__PURE__ */ jsx(
+      MapRenderer,
+      {
+        options: config?.map
+      }
+    )
+  ] });
+}
+
+export { ChartRenderer, MapRenderer, PivotTableRenderer, VisualizationSelector, getDimensionLabel, getOrgUnitSelectionFromIds };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/Visualization/components/VisualizationSelector/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Visualization/components/VisualizationSelector/index.tsx"],"names":["dimension","value"],"mappings":"AAqFE,SA6FA,UA7FA,KA6FA,YA7FA;AArFF,SAAgB,eAAe;AAC/B,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B;AAAA,EACC;AAAA,OAEM;AACP,SAAS,iBAAiB;AAC1B,SAAS,QAAQ,MAAM,WAAW,SAAS,WAAW,WAAW;AACjE,SAAoB,qBAAqB;AACzC,OAAO,UAAU;AACjB,SAAsB,kBAAkB;AAExC,SAAS,gBAA0B;AAY5B,SAAS,kBAAkB,WAAsB;AACvD,UAAQ,WAAW;AAAA,IAClB,KAAK;AACJ,aAAO,KAAK,EAAE,QAAQ;AAAA,IACvB,KAAK;AACJ,aAAO,KAAK,EAAE,mBAAmB;AAAA,IAClC,KAAK;AACJ,aAAO,KAAK,EAAE,MAAM;AAAA,IACrB;AACC,aAAO;AAAA,EACT;AACD;AAEO,SAAS,2BAA2B,KAAe;AACzD,QAAM,mBAAqC;AAAA,IAC1C,UAAU,CAAC;AAAA,EACZ;AACA,UAAQ,KAAK,CAAC,OAAO;AACpB,QAAI,OAAO,gBAAgB;AAC1B,UAAI,kBAAkB,CAAC,aAAa,GAAG,IAAI;AAAA,IAC5C,WAAW,OAAO,yBAAyB;AAC1C,UAAI,kBAAkB,CAAC,aAAa,GAAG,IAAI;AAAA,IAC5C,WAAW,OAAO,8BAA8B;AAC/C,UAAI,kBAAkB,CAAC,eAAe,GAAG,IAAI;AAAA,IAC9C,OAAO;AACN,YAAM,WAAW,CAAC,GAAI,iBAAiB,YAAY,CAAC,CAAE;AACtD,eAAS,KAAK;AAAA,QACb,IAAI;AAAA,QACJ,UAAU,CAAC;AAAA,QACX,MAAM;AAAA,MACP,CAAC;AACD,UAAI,kBAAkB,CAAC,UAAU,GAAG,QAAQ;AAAA,IAC7C;AAAA,EACD,CAAC;AACD,SAAO;AACR;AAEO,SAAS,mBAAmB;AAAA,EAClC;AACD,GAEG;AACF,QAAM,CAAC,MAAM,IAAI,UAAU;AAC3B,QAAM,EAAE,UAAU,IAAI,iBAAiB;AAEvC,QAAM,kBAAkB,QAAQ,MAAM;AACrC,WAAO;AAAA,MAAU;AAAA,MAAQ,CAAC,cACzB,UAAU,IAAI,CAACA,gBAAe;AAAA,QAC7B,WAAAA;AAAA,QACA,OAAO,kBAAkBA,UAAS;AAAA,MACnC,EAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAC,MAAM,CAAC;AAEX,MAAI,CAAC,WAAW;AACf,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,YAAY;AAAA,QACX,cAAc,QAAQ,gBAAgB;AAAA,QACtC,aAAa,QAAQ,eAAe;AAAA,QACpC,OAAO,QAAQ,SAAS;AAAA,MACzB;AAAA,MACA;AAAA,MACA,QAAQ,EAAE,QAAQ,iBAAiB,QAAQ;AAAA;AAAA,EAC5C;AAEF;AAEO,SAAS,cAAc,EAAE,QAAQ,GAA6B;AACpE,QAAM,EAAE,UAAU,IAAI,iBAAiB;AACvC,MAAI,CAAC,WAAW;AACf,WAAO;AAAA,EACR;AACA,SAAO,oBAAC,cAAW,WAAsB,QAAQ,EAAE,GAAG,QAAQ,GAAG;AAClE;AAEO,SAAS,YAAY;AAAA,EAC3B;AACD,GAEG;AACF,QAAM,CAAC,UAAU,IAAI,cAAc;AACnC,QAAM,EAAE,UAAU,IAAI,iBAAiB;AACvC,QAAM,mBAAqC,QAAQ,MAAM;AACxD,WAAO,2BAA2B,WAAW,MAAM,CAAC,CAAC;AAAA,EACtD,GAAG,CAAC,WAAW,EAAE,CAAC;AAElB,QAAM,iBAAwC,QAAQ,MAAM;AAC3D,UAAM,aACL,UAAU,UAAU,SAAS,CAAC,QAAQ,OAAO,CAAC,KAAK;AACpD,WACC,UAAU,UAAU,WAAW,IAAI,GAAG,IAAI,CAAC,WAAW;AACrD,YAAM,SAAS,KAAK,QAAQ,gBAAgB,CAAC,MAAM,MAAM,CAAC;AAC1D,YAAM,OACL,UAAU,UAAU,YAAY,IAAI,IAAI,CAAC,SAAS;AACjD,cAAM,SAAS;AAAA,UACd,UAAU;AAAA,UACV,CAAC,QAAQ,IAAI,SAAS,MAAM,KAAK,IAAI,SAAS,IAAI;AAAA,QACnD;AACA,cAAM,QAAQ,OAAO;AAAA,UACpB,CAAC,KAAKC,WAAU,MAAM,WAAWA,OAAM,UAAU,CAAC;AAAA,UAClD;AAAA,QACD;AACA,eAAO;AAAA,UACN,MAAM;AAAA,UACN,UAAU;AAAA,UACV,SAAS;AAAA,QACV;AAAA,MACD,CAAC,KAAK,CAAC;AACR,aAAO;AAAA,QACN,GAAG;AAAA,QACH;AAAA,MACD;AAAA,IACD,CAAC,KAAK,CAAC;AAAA,EAET,GAAG,CAAC,SAAS,CAAC;AAEd,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD;AAEF;AAEO,SAAS,sBAAsB,EAAE,OAAO,GAA+B;AAC7E,QAAM,CAAC,IAAI,IAAI,qBAAqB;AACpC,QAAM,EAAE,WAAW,QAAQ,IAAI,iBAAiB;AAEhD,MAAI,SAAS;AACZ,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAO;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,QACb;AAAA,QAEA,8BAAC,kBAAe,OAAK,MAAC;AAAA;AAAA,IACvB;AAAA,EAEF;AACA,MAAI,CAAC,WAAW;AACf,WAAO;AAAA,EACR;AAEA,SACC,iCACE;AAAA,aAAS,gBACT;AAAA,MAAC;AAAA;AAAA,QACA,SAAS,QAAQ;AAAA;AAAA,IAClB;AAAA,IAEA,SAAS,WACT,oBAAC,iBAAc,SAAS,QAAQ,OAAsB;AAAA,IAEtD,SAAS,SACT;AAAA,MAAC;AAAA;AAAA,QACA,SACC,QAAQ;AAAA;AAAA,IAKV;AAAA,KAEF;AAEF","sourcesContent":["import React, { useMemo } from \"react\";\nimport { useVisualizationType } from \"../VisualizationTypeProvider\";\nimport { useAnalyticsData } from \"../AnalyticsDataProvider\";\nimport { CircularLoader } from \"@dhis2/ui\";\nimport {\n\tDHIS2PivotTable,\n\tDHIS2PivotTableOptions,\n} from \"../../../DHIS2PivotTable\";\nimport { useLayout } from \"../LayoutProvider\";\nimport { filter, find, findIndex, forEach, mapValues, set } from \"lodash\";\nimport { Dimension, useDimensions } from \"../DimensionsProvider\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { ChartConfig, DHIS2Chart } from \"../../../ChartAnalytics\";\nimport { VisualizationConfig } from \"../../index\";\nimport { DHIS2Map, MapProps } from \"../../../Map\";\nimport { OrgUnitSelection } from \"@hisptz/dhis2-utils\";\nimport {\n\tThematicLayerConfig,\n\tThematicLayerRawData,\n} from \"../../../Map/components/MapLayer/interfaces\";\nimport { PivotTableLayoutProps } from \"../../../DHIS2PivotTable/components/Table\";\n\nexport interface VisualizationSelectorProps {\n\tconfig: VisualizationConfig;\n}\n\nexport function getDimensionLabel(dimension: Dimension) {\n\tswitch (dimension) {\n\t\tcase \"pe\":\n\t\t\treturn i18n.t(\"Period\");\n\t\tcase \"ou\":\n\t\t\treturn i18n.t(\"Organisation unit\");\n\t\tcase \"dx\":\n\t\t\treturn i18n.t(\"Data\");\n\t\tdefault:\n\t\t\treturn \"\";\n\t}\n}\n\nexport function getOrgUnitSelectionFromIds(ous: string[]) {\n\tconst orgUnitSelection: OrgUnitSelection = {\n\t\torgUnits: [],\n\t};\n\tforEach(ous, (ou) => {\n\t\tif (ou === \"USER_ORGUNIT\") {\n\t\t\tset(orgUnitSelection, [\"userOrgUnit\"], true);\n\t\t} else if (ou === \"USER_ORGUNIT_CHILDREN\") {\n\t\t\tset(orgUnitSelection, [\"userSubUnit\"], true);\n\t\t} else if (ou === \"USER_ORGUNIT_GRANDCHILDREN\") {\n\t\t\tset(orgUnitSelection, [\"userSubX2Unit\"], true);\n\t\t} else {\n\t\t\tconst orgUnits = [...(orgUnitSelection.orgUnits ?? [])];\n\t\t\torgUnits.push({\n\t\t\t\tid: ou,\n\t\t\t\tchildren: [],\n\t\t\t\tpath: \"\",\n\t\t\t});\n\t\t\tset(orgUnitSelection, [\"orgUnits\"], orgUnits);\n\t\t}\n\t});\n\treturn orgUnitSelection;\n}\n\nexport function PivotTableRenderer({\n\toptions,\n}: {\n\toptions: DHIS2PivotTableOptions & PivotTableLayoutProps;\n}) {\n\tconst [layout] = useLayout();\n\tconst { analytics } = useAnalyticsData();\n\n\tconst sanitizedLayout = useMemo(() => {\n\t\treturn mapValues(layout, (dimension) =>\n\t\t\tdimension.map((dimension) => ({\n\t\t\t\tdimension,\n\t\t\t\tlabel: getDimensionLabel(dimension),\n\t\t\t})),\n\t\t);\n\t}, [layout]);\n\n\tif (!analytics) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<DHIS2PivotTable\n\t\t\ttableProps={{\n\t\t\t\tscrollHeight: options.scrollHeight ?? \"100%\",\n\t\t\t\tscrollWidth: options.scrollWidth ?? \"100%\",\n\t\t\t\twidth: options.width ?? \"100%\",\n\t\t\t}}\n\t\t\tanalytics={analytics}\n\t\t\tconfig={{ layout: sanitizedLayout, options }}\n\t\t/>\n\t);\n}\n\nexport function ChartRenderer({ options }: { options: ChartConfig }) {\n\tconst { analytics } = useAnalyticsData();\n\tif (!analytics) {\n\t\treturn null;\n\t}\n\treturn <DHIS2Chart analytics={analytics} config={{ ...options }} />;\n}\n\nexport function MapRenderer({\n\toptions,\n}: {\n\toptions: Omit<MapProps, \"orgUnitSelection\" | \"periodSelection\">;\n}) {\n\tconst [dimensions] = useDimensions();\n\tconst { analytics } = useAnalyticsData();\n\tconst orgUnitSelection: OrgUnitSelection = useMemo(() => {\n\t\treturn getOrgUnitSelectionFromIds(dimensions.ou ?? []);\n\t}, [dimensions.ou]);\n\n\tconst thematicLayers: ThematicLayerConfig[] = useMemo(() => {\n\t\tconst valueIndex =\n\t\t\tfindIndex(analytics.headers, [\"name\", \"value\"]) ?? -1;\n\t\treturn (\n\t\t\tanalytics.metaData?.dimensions[\"dx\"]?.map((dataId) => {\n\t\t\t\tconst config = find(options.thematicLayers, [\"id\", dataId]);\n\t\t\t\tconst data: ThematicLayerRawData[] =\n\t\t\t\t\tanalytics.metaData?.dimensions?.ou?.map((ouId) => {\n\t\t\t\t\t\tconst values = filter(\n\t\t\t\t\t\t\tanalytics.rows,\n\t\t\t\t\t\t\t(row) => row.includes(dataId) && row.includes(ouId),\n\t\t\t\t\t\t) as unknown as string[];\n\t\t\t\t\t\tconst value = values.reduce(\n\t\t\t\t\t\t\t(acc, value) => acc + parseFloat(value[valueIndex]),\n\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tdata: value,\n\t\t\t\t\t\t\tdataItem: dataId,\n\t\t\t\t\t\t\torgUnit: ouId,\n\t\t\t\t\t\t};\n\t\t\t\t\t}) ?? [];\n\t\t\t\treturn {\n\t\t\t\t\t...config,\n\t\t\t\t\tdata,\n\t\t\t\t} as ThematicLayerConfig;\n\t\t\t}) ?? []\n\t\t);\n\t}, [analytics]);\n\n\treturn (\n\t\t<DHIS2Map\n\t\t\torgUnitSelection={orgUnitSelection}\n\t\t\tthematicLayers={thematicLayers}\n\t\t/>\n\t);\n}\n\nexport function VisualizationSelector({ config }: VisualizationSelectorProps) {\n\tconst [type] = useVisualizationType();\n\tconst { analytics, loading } = useAnalyticsData();\n\n\tif (loading) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\theight: \"100%\",\n\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\tjustifyContent: \"center\",\n\t\t\t\t\talignItems: \"center\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<CircularLoader small />\n\t\t\t</div>\n\t\t);\n\t}\n\tif (!analytics) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{type === \"pivotTable\" && (\n\t\t\t\t<PivotTableRenderer\n\t\t\t\t\toptions={config?.pivotTable as DHIS2PivotTableOptions}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{type === \"chart\" && (\n\t\t\t\t<ChartRenderer options={config?.chart as ChartConfig} />\n\t\t\t)}\n\t\t\t{type === \"map\" && (\n\t\t\t\t<MapRenderer\n\t\t\t\t\toptions={\n\t\t\t\t\t\tconfig?.map as Omit<\n\t\t\t\t\t\t\tMapProps,\n\t\t\t\t\t\t\t\"orgUnitSelection\" | \"periodSelection\"\n\t\t\t\t\t\t>\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/Visualization/components/VisualizationTypeProvider/index.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const VisualizationTypeContext = react.createContext("pivotTable");
+const VisualizationConfigContext = react.createContext(void 0);
+const VisualizationTypeSetter = react.createContext(void 0);
+function useVisualizationType() {
+  return [
+    react.useContext(VisualizationTypeContext),
+    react.useContext(VisualizationTypeSetter)
+  ];
+}
+function useVisualizationConfig() {
+  return react.useContext(VisualizationConfigContext);
+}
+function VisualizationTypeProvider({ children, defaultType, config }) {
+  const [type, setType] = react.useState(defaultType);
+  return /* @__PURE__ */ jsxRuntime.jsx(VisualizationTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsxRuntime.jsx(VisualizationConfigContext.Provider, { value: config, children: /* @__PURE__ */ jsxRuntime.jsx(VisualizationTypeSetter.Provider, { value: setType, children }) }) });
+}
+
+exports.VisualizationConfigContext = VisualizationConfigContext;
+exports.VisualizationTypeContext = VisualizationTypeContext;
+exports.VisualizationTypeProvider = VisualizationTypeProvider;
+exports.VisualizationTypeSetter = VisualizationTypeSetter;
+exports.useVisualizationConfig = useVisualizationConfig;
+exports.useVisualizationType = useVisualizationType;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Visualization/components/VisualizationTypeProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Visualization/components/VisualizationTypeProvider/index.tsx"],"names":[],"mappings":"AAiCgB;AAjChB,SAAgB,eAAe,YAAY,gBAAgB;AAMpD,MAAM,2BAA2B,cAAiC,YAAY;AAC9E,MAAM,6BAA6B,cAA+C,MAAS;AAC3F,MAAM,0BAA0B,cAAmF,MAAS;AAQ5H,SAAS,uBAAuB;AACnC,SAAO;AAAA,IACH,WAAW,wBAAwB;AAAA,IACnC,WAAW,uBAAuB;AAAA,EACtC;AACJ;AAEO,SAAS,yBAAyB;AACrC,SAAO,WAAW,0BAA0B;AAChD;AAEO,SAAS,0BAA0B,EAAC,UAAU,aAAa,OAAM,GAAmC;AACvG,QAAM,CAAC,MAAM,OAAO,IAAI,SAA4B,WAAW;AAE/D,SACI,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,MACtC,8BAAC,2BAA2B,UAA3B,EAAoC,OAAO,QACxC,8BAAC,wBAAwB,UAAxB,EAAiC,OAAO,SACpC,UACL,GACJ,GACJ;AAER","sourcesContent":["import React, { createContext, useContext, useState } from \"react\";\nimport { VisualizationConfig } from \"../../index\";\n\nexport type VisualizationType = \"pivotTable\" | \"chart\" | \"map\";\n\n\nexport const VisualizationTypeContext = createContext<VisualizationType>('pivotTable')\nexport const VisualizationConfigContext = createContext<VisualizationConfig | undefined>(undefined);\nexport const VisualizationTypeSetter = createContext<React.Dispatch<React.SetStateAction<VisualizationType>> | undefined>(undefined)\n\nexport interface VisualizationTypeProviderProps {\n    children: React.ReactNode;\n    defaultType: VisualizationType;\n    config: VisualizationConfig\n}\n\nexport function useVisualizationType() {\n    return [\n        useContext(VisualizationTypeContext),\n        useContext(VisualizationTypeSetter)\n    ] as [VisualizationType, React.Dispatch<React.SetStateAction<VisualizationType>>]\n}\n\nexport function useVisualizationConfig() {\n    return useContext(VisualizationConfigContext);\n}\n\nexport function VisualizationTypeProvider({children, defaultType, config}: VisualizationTypeProviderProps) {\n    const [type, setType] = useState<VisualizationType>(defaultType);\n\n    return (\n        <VisualizationTypeContext.Provider value={type}>\n            <VisualizationConfigContext.Provider value={config}>\n                <VisualizationTypeSetter.Provider value={setType}>\n                    {children}\n                </VisualizationTypeSetter.Provider>\n            </VisualizationConfigContext.Provider>\n        </VisualizationTypeContext.Provider>\n    )\n}\n"]}

package/dist/components/Visualization/components/VisualizationTypeProvider/index.mjs

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState } from 'react';
+
+const VisualizationTypeContext = createContext("pivotTable");
+const VisualizationConfigContext = createContext(void 0);
+const VisualizationTypeSetter = createContext(void 0);
+function useVisualizationType() {
+  return [
+    useContext(VisualizationTypeContext),
+    useContext(VisualizationTypeSetter)
+  ];
+}
+function useVisualizationConfig() {
+  return useContext(VisualizationConfigContext);
+}
+function VisualizationTypeProvider({ children, defaultType, config }) {
+  const [type, setType] = useState(defaultType);
+  return /* @__PURE__ */ jsx(VisualizationTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx(VisualizationConfigContext.Provider, { value: config, children: /* @__PURE__ */ jsx(VisualizationTypeSetter.Provider, { value: setType, children }) }) });
+}
+
+export { VisualizationConfigContext, VisualizationTypeContext, VisualizationTypeProvider, VisualizationTypeSetter, useVisualizationConfig, useVisualizationType };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/Visualization/components/VisualizationTypeProvider/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Visualization/components/VisualizationTypeProvider/index.tsx"],"names":[],"mappings":"AAiCgB;AAjChB,SAAgB,eAAe,YAAY,gBAAgB;AAMpD,MAAM,2BAA2B,cAAiC,YAAY;AAC9E,MAAM,6BAA6B,cAA+C,MAAS;AAC3F,MAAM,0BAA0B,cAAmF,MAAS;AAQ5H,SAAS,uBAAuB;AACnC,SAAO;AAAA,IACH,WAAW,wBAAwB;AAAA,IACnC,WAAW,uBAAuB;AAAA,EACtC;AACJ;AAEO,SAAS,yBAAyB;AACrC,SAAO,WAAW,0BAA0B;AAChD;AAEO,SAAS,0BAA0B,EAAC,UAAU,aAAa,OAAM,GAAmC;AACvG,QAAM,CAAC,MAAM,OAAO,IAAI,SAA4B,WAAW;AAE/D,SACI,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,MACtC,8BAAC,2BAA2B,UAA3B,EAAoC,OAAO,QACxC,8BAAC,wBAAwB,UAAxB,EAAiC,OAAO,SACpC,UACL,GACJ,GACJ;AAER","sourcesContent":["import React, { createContext, useContext, useState } from \"react\";\nimport { VisualizationConfig } from \"../../index\";\n\nexport type VisualizationType = \"pivotTable\" | \"chart\" | \"map\";\n\n\nexport const VisualizationTypeContext = createContext<VisualizationType>('pivotTable')\nexport const VisualizationConfigContext = createContext<VisualizationConfig | undefined>(undefined);\nexport const VisualizationTypeSetter = createContext<React.Dispatch<React.SetStateAction<VisualizationType>> | undefined>(undefined)\n\nexport interface VisualizationTypeProviderProps {\n    children: React.ReactNode;\n    defaultType: VisualizationType;\n    config: VisualizationConfig\n}\n\nexport function useVisualizationType() {\n    return [\n        useContext(VisualizationTypeContext),\n        useContext(VisualizationTypeSetter)\n    ] as [VisualizationType, React.Dispatch<React.SetStateAction<VisualizationType>>]\n}\n\nexport function useVisualizationConfig() {\n    return useContext(VisualizationConfigContext);\n}\n\nexport function VisualizationTypeProvider({children, defaultType, config}: VisualizationTypeProviderProps) {\n    const [type, setType] = useState<VisualizationType>(defaultType);\n\n    return (\n        <VisualizationTypeContext.Provider value={type}>\n            <VisualizationConfigContext.Provider value={config}>\n                <VisualizationTypeSetter.Provider value={setType}>\n                    {children}\n                </VisualizationTypeSetter.Provider>\n            </VisualizationConfigContext.Provider>\n        </VisualizationTypeContext.Provider>\n    )\n}\n"]}

package/dist/components/Visualization/components/VisualizationTypeSelector/index.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var VisualizationTypeProvider = require('../VisualizationTypeProvider');
+var ui = require('@dhis2/ui');
+var i18n = require('@dhis2/d2-i18n');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var i18n__default = /*#__PURE__*/_interopDefault(i18n);
+
+const supportedVisualizationTypes = [
+  {
+    id: "pivotTable",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.IconTable24, {}),
+    label: i18n__default.default.t("Pivot table")
+  },
+  {
+    id: "chart",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.IconVisualizationColumn24, {}),
+    label: i18n__default.default.t("Chart")
+  },
+  {
+    id: "map",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.IconWorld24, {}),
+    label: i18n__default.default.t("Map")
+  }
+];
+function VisualizationTypeSelector() {
+  const [type, setType] = VisualizationTypeProvider.useVisualizationType();
+  const config = VisualizationTypeProvider.useVisualizationConfig();
+  const types = react.useMemo(() => supportedVisualizationTypes.filter((supportedType) => {
+    return Object.keys(config ?? {}).includes(supportedType.id) && supportedType.id !== type;
+  }), [type, config]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 8 }, children: types.map(({ icon, label, id }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: i18n__default.default.t("View as {{type}}", {
+      type: label.toLowerCase()
+    }), children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: () => setType(id), icon }) }, `${label}-tooltip`);
+  }) });
+}
+
+exports.VisualizationTypeSelector = VisualizationTypeSelector;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Visualization/components/VisualizationTypeSelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Visualization/components/VisualizationTypeSelector/index.tsx"],"names":[],"mappings":"AAkBQ;AAlBR,SAAgB,eAAe;AAC/B;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,OAAO,UAAU;AAEjB,MAAM,8BAA8B;AAAA,EACnC;AAAA,IACC,IAAI;AAAA,IACJ,MAAM,oBAAC,eAAY;AAAA,IACnB,OAAO,KAAK,EAAE,aAAa;AAAA,EAC5B;AAAA,EACA;AAAA,IACC,IAAI;AAAA,IACJ,MAAM,oBAAC,6BAA0B;AAAA,IACjC,OAAO,KAAK,EAAE,OAAO;AAAA,EACtB;AAAA,EACA;AAAA,IACC,IAAI;AAAA,IACJ,MAAM,oBAAC,eAAY;AAAA,IACnB,OAAO,KAAK,EAAE,KAAK;AAAA,EACpB;AACD;AAEO,SAAS,4BAA4B;AACxC,QAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAC7C,QAAM,SAAS,uBAAuB;AAEtC,QAAM,QAAQ,QAAQ,MAAM,4BAA4B,OAAO,CAAC,kBAAkB;AAC9E,WAAO,OAAO,KAAK,UAAU,CAAC,CAAC,EAAE,SAAS,cAAc,EAAE,KAAK,cAAc,OAAO;AAAA,EACxF,CAAC,GAAG,CAAC,MAAM,MAAM,CAAC;AAElB,SACI,oBAAC,SAAI,OAAO,EAAC,SAAS,QAAQ,KAAK,EAAC,GAE5B,gBAAM,IAAI,CAAC,EAAC,MAAM,OAAO,GAAE,MAAM;AAC7B,WACI,oBAAC,WAAiC,SAAS,KAAK,EAAE,oBAAoB;AAAA,MAClE,MAAM,MAAM,YAAY;AAAA,IAC5B,CAAC,GACG,8BAAC,UAAO,SAAS,MAAM,QAAQ,EAAuB,GAAG,MAAW,KAH1D,GAAG,KAAK,UAItB;AAAA,EAER,CAAC,GAET;AAER","sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n\tuseVisualizationConfig,\n\tuseVisualizationType,\n\tVisualizationType,\n} from \"../VisualizationTypeProvider\";\nimport {\n\tButton,\n\tIconTable24,\n\tIconVisualizationColumn24,\n\tIconWorld24,\n\tTooltip,\n} from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\n\nconst supportedVisualizationTypes = [\n\t{\n\t\tid: \"pivotTable\",\n\t\ticon: <IconTable24 />,\n\t\tlabel: i18n.t(\"Pivot table\"),\n\t},\n\t{\n\t\tid: \"chart\",\n\t\ticon: <IconVisualizationColumn24 />,\n\t\tlabel: i18n.t(\"Chart\"),\n\t},\n\t{\n\t\tid: \"map\",\n\t\ticon: <IconWorld24 />,\n\t\tlabel: i18n.t(\"Map\"),\n\t},\n];\n\nexport function VisualizationTypeSelector() {\n    const [type, setType] = useVisualizationType();\n    const config = useVisualizationConfig();\n\n    const types = useMemo(() => supportedVisualizationTypes.filter((supportedType) => {\n        return Object.keys(config ?? {}).includes(supportedType.id) && supportedType.id !== type\n    }), [type, config]);\n\n    return (\n        <div style={{display: \"flex\", gap: 8}}>\n            {\n                types.map(({icon, label, id}) => {\n                    return (\n                        <Tooltip key={`${label}-tooltip`} content={i18n.t(\"View as {{type}}\", {\n                            type: label.toLowerCase()\n                        })}>\n                            <Button onClick={() => setType(id as VisualizationType)} icon={icon}/>\n                        </Tooltip>\n                    )\n                })\n            }\n        </div>\n    )\n}\n"]}

package/dist/components/Visualization/components/VisualizationTypeSelector/index.mjs

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useVisualizationType, useVisualizationConfig } from '../VisualizationTypeProvider';
+import { IconTable24, IconVisualizationColumn24, IconWorld24, Tooltip, Button } from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
+
+const supportedVisualizationTypes = [
+  {
+    id: "pivotTable",
+    icon: /* @__PURE__ */ jsx(IconTable24, {}),
+    label: i18n.t("Pivot table")
+  },
+  {
+    id: "chart",
+    icon: /* @__PURE__ */ jsx(IconVisualizationColumn24, {}),
+    label: i18n.t("Chart")
+  },
+  {
+    id: "map",
+    icon: /* @__PURE__ */ jsx(IconWorld24, {}),
+    label: i18n.t("Map")
+  }
+];
+function VisualizationTypeSelector() {
+  const [type, setType] = useVisualizationType();
+  const config = useVisualizationConfig();
+  const types = useMemo(() => supportedVisualizationTypes.filter((supportedType) => {
+    return Object.keys(config ?? {}).includes(supportedType.id) && supportedType.id !== type;
+  }), [type, config]);
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 8 }, children: types.map(({ icon, label, id }) => {
+    return /* @__PURE__ */ jsx(Tooltip, { content: i18n.t("View as {{type}}", {
+      type: label.toLowerCase()
+    }), children: /* @__PURE__ */ jsx(Button, { onClick: () => setType(id), icon }) }, `${label}-tooltip`);
+  }) });
+}
+
+export { VisualizationTypeSelector };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/Visualization/components/VisualizationTypeSelector/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Visualization/components/VisualizationTypeSelector/index.tsx"],"names":[],"mappings":"AAkBQ;AAlBR,SAAgB,eAAe;AAC/B;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,OAAO,UAAU;AAEjB,MAAM,8BAA8B;AAAA,EACnC;AAAA,IACC,IAAI;AAAA,IACJ,MAAM,oBAAC,eAAY;AAAA,IACnB,OAAO,KAAK,EAAE,aAAa;AAAA,EAC5B;AAAA,EACA;AAAA,IACC,IAAI;AAAA,IACJ,MAAM,oBAAC,6BAA0B;AAAA,IACjC,OAAO,KAAK,EAAE,OAAO;AAAA,EACtB;AAAA,EACA;AAAA,IACC,IAAI;AAAA,IACJ,MAAM,oBAAC,eAAY;AAAA,IACnB,OAAO,KAAK,EAAE,KAAK;AAAA,EACpB;AACD;AAEO,SAAS,4BAA4B;AACxC,QAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAC7C,QAAM,SAAS,uBAAuB;AAEtC,QAAM,QAAQ,QAAQ,MAAM,4BAA4B,OAAO,CAAC,kBAAkB;AAC9E,WAAO,OAAO,KAAK,UAAU,CAAC,CAAC,EAAE,SAAS,cAAc,EAAE,KAAK,cAAc,OAAO;AAAA,EACxF,CAAC,GAAG,CAAC,MAAM,MAAM,CAAC;AAElB,SACI,oBAAC,SAAI,OAAO,EAAC,SAAS,QAAQ,KAAK,EAAC,GAE5B,gBAAM,IAAI,CAAC,EAAC,MAAM,OAAO,GAAE,MAAM;AAC7B,WACI,oBAAC,WAAiC,SAAS,KAAK,EAAE,oBAAoB;AAAA,MAClE,MAAM,MAAM,YAAY;AAAA,IAC5B,CAAC,GACG,8BAAC,UAAO,SAAS,MAAM,QAAQ,EAAuB,GAAG,MAAW,KAH1D,GAAG,KAAK,UAItB;AAAA,EAER,CAAC,GAET;AAER","sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n\tuseVisualizationConfig,\n\tuseVisualizationType,\n\tVisualizationType,\n} from \"../VisualizationTypeProvider\";\nimport {\n\tButton,\n\tIconTable24,\n\tIconVisualizationColumn24,\n\tIconWorld24,\n\tTooltip,\n} from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\n\nconst supportedVisualizationTypes = [\n\t{\n\t\tid: \"pivotTable\",\n\t\ticon: <IconTable24 />,\n\t\tlabel: i18n.t(\"Pivot table\"),\n\t},\n\t{\n\t\tid: \"chart\",\n\t\ticon: <IconVisualizationColumn24 />,\n\t\tlabel: i18n.t(\"Chart\"),\n\t},\n\t{\n\t\tid: \"map\",\n\t\ticon: <IconWorld24 />,\n\t\tlabel: i18n.t(\"Map\"),\n\t},\n];\n\nexport function VisualizationTypeSelector() {\n    const [type, setType] = useVisualizationType();\n    const config = useVisualizationConfig();\n\n    const types = useMemo(() => supportedVisualizationTypes.filter((supportedType) => {\n        return Object.keys(config ?? {}).includes(supportedType.id) && supportedType.id !== type\n    }), [type, config]);\n\n    return (\n        <div style={{display: \"flex\", gap: 8}}>\n            {\n                types.map(({icon, label, id}) => {\n                    return (\n                        <Tooltip key={`${label}-tooltip`} content={i18n.t(\"View as {{type}}\", {\n                            type: label.toLowerCase()\n                        })}>\n                            <Button onClick={() => setType(id as VisualizationType)} icon={icon}/>\n                        </Tooltip>\n                    )\n                })\n            }\n        </div>\n    )\n}\n"]}

package/dist/components/Visualization/index.js

@@ -0,0 +1,119 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var VisualizationProvider = require('./components/VisualizationProvider');
+var VisualizationTypeSelector = require('./components/VisualizationTypeSelector');
+var VisualizationDimensionSelector = require('./components/VisualizationDimensionSelector');
+var VisualizationSelector = require('./components/VisualizationSelector');
+var reactErrorBoundary = require('react-error-boundary');
+var i18n = require('@dhis2/d2-i18n');
+var ui = require('@dhis2/ui');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var i18n__default = /*#__PURE__*/_interopDefault(i18n);
+
+function ErrorFallback({
+  error,
+  resetErrorBoundary,
+  height
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        textAlign: "center",
+        height: height ?? 500,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 16,
+        padding: 16
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.IconError24, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "h3",
+          {
+            style: {
+              color: ui.colors.grey800,
+              margin: 0
+            },
+            children: i18n__default.default.t("Could not load visualization")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0 }, children: error.message }),
+        resetErrorBoundary && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: resetErrorBoundary, small: true, children: i18n__default.default.t("Try again") })
+      ]
+    }
+  );
+}
+function Visualization({
+  dimensions,
+  layout,
+  defaultVisualizationType,
+  config,
+  height,
+  showToolbar,
+  showOrgUnitSelector,
+  showPeriodSelector
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactErrorBoundary.ErrorBoundary,
+    {
+      resetKeys: [dimensions, layout, defaultVisualizationType, config],
+      fallbackRender: (props) => /* @__PURE__ */ jsxRuntime.jsx(ErrorFallback, { height, ...props }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        VisualizationProvider.VisualizationProvider,
+        {
+          config,
+          type: defaultVisualizationType,
+          layout,
+          dimensions,
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                width: "100%",
+                height: "100%",
+                gap: 16
+              },
+              children: [
+                showToolbar && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: "row",
+                      gap: 16,
+                      justifyContent: "space-between"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(VisualizationTypeSelector.VisualizationTypeSelector, {}),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        VisualizationDimensionSelector.VisualizationDimensionSelector,
+                        {
+                          showPeriodSelector,
+                          showOrgUnitSelector
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(VisualizationSelector.VisualizationSelector, { config }) })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+exports.Visualization = Visualization;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Visualization/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Visualization/index.tsx"],"names":[],"mappings":"AA2CE,SAgFG,UAnEF,KAbD;AAzCF,SAAS,6BAA6B;AAGtC,SAAS,iCAAiC;AAC1C,SAAS,sCAAsC;AAC/C,SAAS,6BAA6B;AAItC,SAAS,qBAAoC;AAC7C,OAAO,UAAU;AACjB,SAAS,QAAQ,QAAQ,mBAAmB;AAwB5C,SAAS,cAAc;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACD,GAAwC;AACvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ,UAAU;AAAA,QAClB,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,QACL,SAAS;AAAA,MACV;AAAA,MAEA;AAAA,4BAAC,eAAY;AAAA,QACb;AAAA,UAAC;AAAA;AAAA,YACA,OAAO;AAAA,cACN,OAAO,OAAO;AAAA,cACd,QAAQ;AAAA,YACT;AAAA,YAEC,eAAK,EAAE,8BAA8B;AAAA;AAAA,QACvC;AAAA,QACA,oBAAC,OAAE,OAAO,EAAE,QAAQ,EAAE,GAAI,gBAAM,SAAQ;AAAA,QACvC,sBACA,oBAAC,UAAO,SAAS,oBAAoB,OAAK,MACxC,eAAK,EAAE,WAAW,GACpB;AAAA;AAAA;AAAA,EAEF;AAEF;AAEO,SAAS,cAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAuB;AACtB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,CAAC,YAAY,QAAQ,0BAA0B,MAAM;AAAA,MAChE,gBAAgB,CAAC,UACf,oBAAC,iBAAc,QAAiB,GAAG,OAAO;AAAA,MAG5C;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA,OAAO;AAAA,gBACN,SAAS;AAAA,gBACT,eAAe;AAAA,gBACf,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,KAAK;AAAA,cACN;AAAA,cAEC;AAAA,+BACA;AAAA,kBAAC;AAAA;AAAA,oBACA,OAAO;AAAA,sBACN,SAAS;AAAA,sBACT,eAAe;AAAA,sBACf,KAAK;AAAA,sBACL,gBAAgB;AAAA,oBACjB;AAAA,oBAEA;AAAA,0CAAC,6BAA0B;AAAA,sBAC3B;AAAA,wBAAC;AAAA;AAAA,0BACA;AAAA,0BACA;AAAA;AAAA,sBACD;AAAA;AAAA;AAAA,gBACD;AAAA,gBAED,gCACC,8BAAC,yBAAsB,QAAgB,GACxC;AAAA;AAAA;AAAA,UACD;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF","sourcesContent":["import React from \"react\";\nimport { AnalyticsDimension } from \"@hisptz/dhis2-utils\";\nimport { VisualizationProvider } from \"./components/VisualizationProvider\";\nimport { Layout } from \"./components/LayoutProvider\";\nimport { VisualizationType } from \"./components/VisualizationTypeProvider\";\nimport { VisualizationTypeSelector } from \"./components/VisualizationTypeSelector\";\nimport { VisualizationDimensionSelector } from \"./components/VisualizationDimensionSelector\";\nimport { VisualizationSelector } from \"./components/VisualizationSelector\";\nimport { DHIS2PivotTableOptions } from \"../DHIS2PivotTable\";\nimport { ChartConfig } from \"../ChartAnalytics\";\nimport { MapProps } from \"../Map\";\nimport { ErrorBoundary, FallbackProps } from \"react-error-boundary\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { Button, colors, IconError24 } from \"@dhis2/ui\";\n\nexport interface VisualizationConfig {\n\tpivotTable?: DHIS2PivotTableOptions;\n\tchart?: ChartConfig;\n\tmap?: Omit<MapProps, \"orgUnitSelection\" | \"periodSelection\">;\n}\n\nexport interface VisualizationProps {\n\tlayout: Layout;\n\tdefaultVisualizationType: VisualizationType;\n\tdimensions: AnalyticsDimension;\n\tconfig: VisualizationConfig;\n\theight?: number;\n\tshowToolbar?: boolean;\n\tshowPeriodSelector?: boolean;\n\tshowOrgUnitSelector?: boolean;\n}\n\n/**\n *  An analytics component that allows visualization of `chart`, `map`, and `pivot table` by passing analytics object and the default layout and type\n *\n * */\n\nfunction ErrorFallback({\n\terror,\n\tresetErrorBoundary,\n\theight,\n}: FallbackProps & { height?: number }) {\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\twidth: \"100%\",\n\t\t\t\ttextAlign: \"center\",\n\t\t\t\theight: height ?? 500,\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tflexDirection: \"column\",\n\t\t\t\talignItems: \"center\",\n\t\t\t\tjustifyContent: \"center\",\n\t\t\t\tgap: 16,\n\t\t\t\tpadding: 16,\n\t\t\t}}\n\t\t>\n\t\t\t<IconError24 />\n\t\t\t<h3\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: colors.grey800,\n\t\t\t\t\tmargin: 0,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{i18n.t(\"Could not load visualization\")}\n\t\t\t</h3>\n\t\t\t<p style={{ margin: 0 }}>{error.message}</p>\n\t\t\t{resetErrorBoundary && (\n\t\t\t\t<Button onClick={resetErrorBoundary} small>\n\t\t\t\t\t{i18n.t(\"Try again\")}\n\t\t\t\t</Button>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport function Visualization({\n\tdimensions,\n\tlayout,\n\tdefaultVisualizationType,\n\tconfig,\n\theight,\n\tshowToolbar,\n\tshowOrgUnitSelector,\n\tshowPeriodSelector,\n}: VisualizationProps) {\n\treturn (\n\t\t<ErrorBoundary\n\t\t\tresetKeys={[dimensions, layout, defaultVisualizationType, config]}\n\t\t\tfallbackRender={(props) =>\n\t\t\t\t(<ErrorFallback height={height} {...props} />) as any\n\t\t\t}\n\t\t>\n\t\t\t<VisualizationProvider\n\t\t\t\tconfig={config}\n\t\t\t\ttype={defaultVisualizationType}\n\t\t\t\tlayout={layout}\n\t\t\t\tdimensions={dimensions}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\tflexDirection: \"column\",\n\t\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\t\theight: \"100%\",\n\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{showToolbar && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\t\t\tflexDirection: \"row\",\n\t\t\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t\t\t\tjustifyContent: \"space-between\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<VisualizationTypeSelector />\n\t\t\t\t\t\t\t<VisualizationDimensionSelector\n\t\t\t\t\t\t\t\tshowPeriodSelector={showPeriodSelector}\n\t\t\t\t\t\t\t\tshowOrgUnitSelector={showOrgUnitSelector}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<>\n\t\t\t\t\t\t<VisualizationSelector config={config} />\n\t\t\t\t\t</>\n\t\t\t\t</div>\n\t\t\t</VisualizationProvider>\n\t\t</ErrorBoundary>\n\t);\n}\n"]}

package/dist/components/Visualization/index.mjs

@@ -0,0 +1,113 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { VisualizationProvider } from './components/VisualizationProvider';
+import { VisualizationTypeSelector } from './components/VisualizationTypeSelector';
+import { VisualizationDimensionSelector } from './components/VisualizationDimensionSelector';
+import { VisualizationSelector } from './components/VisualizationSelector';
+import { ErrorBoundary } from 'react-error-boundary';
+import i18n from '@dhis2/d2-i18n';
+import { IconError24, colors, Button } from '@dhis2/ui';
+
+function ErrorFallback({
+  error,
+  resetErrorBoundary,
+  height
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        textAlign: "center",
+        height: height ?? 500,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 16,
+        padding: 16
+      },
+      children: [
+        /* @__PURE__ */ jsx(IconError24, {}),
+        /* @__PURE__ */ jsx(
+          "h3",
+          {
+            style: {
+              color: colors.grey800,
+              margin: 0
+            },
+            children: i18n.t("Could not load visualization")
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { style: { margin: 0 }, children: error.message }),
+        resetErrorBoundary && /* @__PURE__ */ jsx(Button, { onClick: resetErrorBoundary, small: true, children: i18n.t("Try again") })
+      ]
+    }
+  );
+}
+function Visualization({
+  dimensions,
+  layout,
+  defaultVisualizationType,
+  config,
+  height,
+  showToolbar,
+  showOrgUnitSelector,
+  showPeriodSelector
+}) {
+  return /* @__PURE__ */ jsx(
+    ErrorBoundary,
+    {
+      resetKeys: [dimensions, layout, defaultVisualizationType, config],
+      fallbackRender: (props) => /* @__PURE__ */ jsx(ErrorFallback, { height, ...props }),
+      children: /* @__PURE__ */ jsx(
+        VisualizationProvider,
+        {
+          config,
+          type: defaultVisualizationType,
+          layout,
+          dimensions,
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                width: "100%",
+                height: "100%",
+                gap: 16
+              },
+              children: [
+                showToolbar && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: "row",
+                      gap: 16,
+                      justifyContent: "space-between"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(VisualizationTypeSelector, {}),
+                      /* @__PURE__ */ jsx(
+                        VisualizationDimensionSelector,
+                        {
+                          showPeriodSelector,
+                          showOrgUnitSelector
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(VisualizationSelector, { config }) })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+export { Visualization };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/Visualization/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Visualization/index.tsx"],"names":[],"mappings":"AA2CE,SAgFG,UAnEF,KAbD;AAzCF,SAAS,6BAA6B;AAGtC,SAAS,iCAAiC;AAC1C,SAAS,sCAAsC;AAC/C,SAAS,6BAA6B;AAItC,SAAS,qBAAoC;AAC7C,OAAO,UAAU;AACjB,SAAS,QAAQ,QAAQ,mBAAmB;AAwB5C,SAAS,cAAc;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACD,GAAwC;AACvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ,UAAU;AAAA,QAClB,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,QACL,SAAS;AAAA,MACV;AAAA,MAEA;AAAA,4BAAC,eAAY;AAAA,QACb;AAAA,UAAC;AAAA;AAAA,YACA,OAAO;AAAA,cACN,OAAO,OAAO;AAAA,cACd,QAAQ;AAAA,YACT;AAAA,YAEC,eAAK,EAAE,8BAA8B;AAAA;AAAA,QACvC;AAAA,QACA,oBAAC,OAAE,OAAO,EAAE,QAAQ,EAAE,GAAI,gBAAM,SAAQ;AAAA,QACvC,sBACA,oBAAC,UAAO,SAAS,oBAAoB,OAAK,MACxC,eAAK,EAAE,WAAW,GACpB;AAAA;AAAA;AAAA,EAEF;AAEF;AAEO,SAAS,cAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAuB;AACtB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,CAAC,YAAY,QAAQ,0BAA0B,MAAM;AAAA,MAChE,gBAAgB,CAAC,UACf,oBAAC,iBAAc,QAAiB,GAAG,OAAO;AAAA,MAG5C;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA,OAAO;AAAA,gBACN,SAAS;AAAA,gBACT,eAAe;AAAA,gBACf,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,KAAK;AAAA,cACN;AAAA,cAEC;AAAA,+BACA;AAAA,kBAAC;AAAA;AAAA,oBACA,OAAO;AAAA,sBACN,SAAS;AAAA,sBACT,eAAe;AAAA,sBACf,KAAK;AAAA,sBACL,gBAAgB;AAAA,oBACjB;AAAA,oBAEA;AAAA,0CAAC,6BAA0B;AAAA,sBAC3B;AAAA,wBAAC;AAAA;AAAA,0BACA;AAAA,0BACA;AAAA;AAAA,sBACD;AAAA;AAAA;AAAA,gBACD;AAAA,gBAED,gCACC,8BAAC,yBAAsB,QAAgB,GACxC;AAAA;AAAA;AAAA,UACD;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF","sourcesContent":["import React from \"react\";\nimport { AnalyticsDimension } from \"@hisptz/dhis2-utils\";\nimport { VisualizationProvider } from \"./components/VisualizationProvider\";\nimport { Layout } from \"./components/LayoutProvider\";\nimport { VisualizationType } from \"./components/VisualizationTypeProvider\";\nimport { VisualizationTypeSelector } from \"./components/VisualizationTypeSelector\";\nimport { VisualizationDimensionSelector } from \"./components/VisualizationDimensionSelector\";\nimport { VisualizationSelector } from \"./components/VisualizationSelector\";\nimport { DHIS2PivotTableOptions } from \"../DHIS2PivotTable\";\nimport { ChartConfig } from \"../ChartAnalytics\";\nimport { MapProps } from \"../Map\";\nimport { ErrorBoundary, FallbackProps } from \"react-error-boundary\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { Button, colors, IconError24 } from \"@dhis2/ui\";\n\nexport interface VisualizationConfig {\n\tpivotTable?: DHIS2PivotTableOptions;\n\tchart?: ChartConfig;\n\tmap?: Omit<MapProps, \"orgUnitSelection\" | \"periodSelection\">;\n}\n\nexport interface VisualizationProps {\n\tlayout: Layout;\n\tdefaultVisualizationType: VisualizationType;\n\tdimensions: AnalyticsDimension;\n\tconfig: VisualizationConfig;\n\theight?: number;\n\tshowToolbar?: boolean;\n\tshowPeriodSelector?: boolean;\n\tshowOrgUnitSelector?: boolean;\n}\n\n/**\n *  An analytics component that allows visualization of `chart`, `map`, and `pivot table` by passing analytics object and the default layout and type\n *\n * */\n\nfunction ErrorFallback({\n\terror,\n\tresetErrorBoundary,\n\theight,\n}: FallbackProps & { height?: number }) {\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\twidth: \"100%\",\n\t\t\t\ttextAlign: \"center\",\n\t\t\t\theight: height ?? 500,\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tflexDirection: \"column\",\n\t\t\t\talignItems: \"center\",\n\t\t\t\tjustifyContent: \"center\",\n\t\t\t\tgap: 16,\n\t\t\t\tpadding: 16,\n\t\t\t}}\n\t\t>\n\t\t\t<IconError24 />\n\t\t\t<h3\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: colors.grey800,\n\t\t\t\t\tmargin: 0,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{i18n.t(\"Could not load visualization\")}\n\t\t\t</h3>\n\t\t\t<p style={{ margin: 0 }}>{error.message}</p>\n\t\t\t{resetErrorBoundary && (\n\t\t\t\t<Button onClick={resetErrorBoundary} small>\n\t\t\t\t\t{i18n.t(\"Try again\")}\n\t\t\t\t</Button>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport function Visualization({\n\tdimensions,\n\tlayout,\n\tdefaultVisualizationType,\n\tconfig,\n\theight,\n\tshowToolbar,\n\tshowOrgUnitSelector,\n\tshowPeriodSelector,\n}: VisualizationProps) {\n\treturn (\n\t\t<ErrorBoundary\n\t\t\tresetKeys={[dimensions, layout, defaultVisualizationType, config]}\n\t\t\tfallbackRender={(props) =>\n\t\t\t\t(<ErrorFallback height={height} {...props} />) as any\n\t\t\t}\n\t\t>\n\t\t\t<VisualizationProvider\n\t\t\t\tconfig={config}\n\t\t\t\ttype={defaultVisualizationType}\n\t\t\t\tlayout={layout}\n\t\t\t\tdimensions={dimensions}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\tflexDirection: \"column\",\n\t\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\t\theight: \"100%\",\n\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{showToolbar && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\t\t\tflexDirection: \"row\",\n\t\t\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t\t\t\tjustifyContent: \"space-between\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<VisualizationTypeSelector />\n\t\t\t\t\t\t\t<VisualizationDimensionSelector\n\t\t\t\t\t\t\t\tshowPeriodSelector={showPeriodSelector}\n\t\t\t\t\t\t\t\tshowOrgUnitSelector={showOrgUnitSelector}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<>\n\t\t\t\t\t\t<VisualizationSelector config={config} />\n\t\t\t\t\t</>\n\t\t\t\t</div>\n\t\t\t</VisualizationProvider>\n\t\t</ErrorBoundary>\n\t);\n}\n"]}