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

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

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState } from 'react';
+
+const LayoutState = createContext(void 0);
+function useLayout() {
+  return [useContext(LayoutState) ?? { rows: [], filters: [], columns: [] }];
+}
+function LayoutProvider({
+  defaultLayout,
+  children
+}) {
+  const [layout, setLayout] = useState(defaultLayout);
+  return /* @__PURE__ */ jsx(LayoutState.Provider, { value: layout, children });
+}
+
+export { LayoutProvider, LayoutState, useLayout };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Visualization/components/LayoutProvider/index.tsx"],"names":[],"mappings":"AA2BE;AA3BF,SAAgB,eAAe,YAAY,gBAAgB;AAcpD,MAAM,cAAc,cAAkC,MAAS;AAE/D,SAAS,YAAY;AAC3B,SAAO,CAAC,WAAW,WAAW,KAAK,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC,EAAE,CAAC;AAC1E;AAEO,SAAS,eAAe;AAAA,EAC9B;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,aAAa;AAElD,SACC,oBAAC,YAAY,UAAZ,EAAqB,OAAO,QAAS,UAAS;AAEjD","sourcesContent":["import React, { createContext, useContext, useState } from \"react\";\nimport { Dimension } from \"../DimensionsProvider/index.js\";\n\nexport interface Layout {\n\trows: Dimension[];\n\tcolumns: Dimension[];\n\tfilters: Dimension[];\n}\n\nexport interface LayoutProviderProps {\n\tchildren: React.ReactNode;\n\tdefaultLayout: Layout;\n}\n\nexport const LayoutState = createContext<Layout | undefined>(undefined);\n\nexport function useLayout() {\n\treturn [useContext(LayoutState) ?? { rows: [], filters: [], columns: [] }];\n}\n\nexport function LayoutProvider({\n\tdefaultLayout,\n\tchildren,\n}: LayoutProviderProps) {\n\tconst [layout, setLayout] = useState(defaultLayout);\n\n\treturn (\n\t\t<LayoutState.Provider value={layout}>{children}</LayoutState.Provider>\n\t);\n}\n"]}

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

@@ -0,0 +1,85 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useMemo, useState, useCallback } from 'react';
+import { Tooltip, Button, IconClock24, IconLocation24 } from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
+import { useDimensions } from '../DimensionsProvider/index.js';
+import { PeriodSelectorModal, OrgUnitSelectorModal } from '@hisptz/dhis2-ui';
+import { getOrgUnitSelectionFromIds } from '../VisualizationSelector/index.js';
+import { getOrgUnitsSelection } from '../../../Map/utils/map.js';
+
+function VisualizationDimensionSelector({
+  showPeriodSelector,
+  showOrgUnitSelector
+}) {
+  const [dimensions, setDimensions] = useDimensions();
+  const periods = useMemo(() => dimensions.pe, [dimensions.pe]);
+  const orgUnitSelection = useMemo(
+    () => getOrgUnitSelectionFromIds(dimensions.ou ?? []),
+    [dimensions.ou]
+  );
+  const [openFilter, setOpenFilter] = useState();
+  const onFilterUpdate = useCallback(
+    (type) => (data) => {
+      setOpenFilter(void 0);
+      if (type === "ou") {
+        setDimensions({
+          dimension: "ou",
+          value: getOrgUnitsSelection(data)
+        });
+        return;
+      }
+      if (type === "pe") {
+        setDimensions({ dimension: "pe", value: data });
+        return;
+      }
+    },
+    [setDimensions]
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+    showPeriodSelector && /* @__PURE__ */ jsx(Tooltip, { content: i18n.t("Period"), children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        PeriodSelectorModal,
+        {
+          position: "middle",
+          enablePeriodSelector: true,
+          selectedPeriods: periods,
+          onClose: () => setOpenFilter(void 0),
+          hide: openFilter !== "pe",
+          onUpdate: onFilterUpdate("pe")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => setOpenFilter("pe"),
+          icon: /* @__PURE__ */ jsx(IconClock24, {})
+        }
+      )
+    ] }) }),
+    showOrgUnitSelector && /* @__PURE__ */ jsx(Tooltip, { content: i18n.t("Location"), children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        OrgUnitSelectorModal,
+        {
+          showUserOptions: true,
+          searchable: true,
+          title: i18n.t("Select location(s)"),
+          value: orgUnitSelection,
+          onClose: () => setOpenFilter(void 0),
+          hide: openFilter !== "ou",
+          onUpdate: onFilterUpdate("ou")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => setOpenFilter("ou"),
+          icon: /* @__PURE__ */ jsx(IconLocation24, {})
+        }
+      )
+    ] }) })
+  ] }) });
+}
+
+export { VisualizationDimensionSelector };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Visualization/components/VisualizationDimensionSelector/index.tsx"],"names":[],"mappings":"AA+CM,mBACC,KADD;AA/CN,SAAgB,aAAa,SAAS,gBAAgB;AACtD,SAAS,QAAQ,aAAa,gBAAgB,eAAe;AAC7D,OAAO,UAAU;AACjB,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB,2BAA2B;AAE1D,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AAE9B,SAAS,+BAA+B;AAAA,EAC9C;AAAA,EACA;AACD,GAGG;AACF,QAAM,CAAC,YAAY,aAAa,IAAI,cAAc;AAClD,QAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,CAAC,WAAW,EAAE,CAAC;AAC5D,QAAM,mBAAmB;AAAA,IACxB,MAAM,2BAA2B,WAAW,MAAM,CAAC,CAAC;AAAA,IACpD,CAAC,WAAW,EAAE;AAAA,EACf;AACA,QAAM,CAAC,YAAY,aAAa,IAAI,SAAkC;AAEtE,QAAM,iBAAiB;AAAA,IACtB,CAAC,SAAsB,CAAC,SAAiC;AACxD,oBAAc,MAAS;AACvB,UAAI,SAAS,MAAM;AAClB,sBAAc;AAAA,UACb,WAAW;AAAA,UACX,OAAO,qBAAqB,IAAI;AAAA,QACjC,CAAC;AACD;AAAA,MACD;AACA,UAAI,SAAS,MAAM;AAClB,sBAAc,EAAE,WAAW,MAAM,OAAO,KAAK,CAAC;AAC9C;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,SACC,gCACC,+BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,EAAE,GACpC;AAAA,0BACA,oBAAC,WAAQ,SAAS,KAAK,EAAE,QAAQ,GAChC,2CACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,UAAS;AAAA,UACT,sBAAoB;AAAA,UACpB,iBAAiB;AAAA,UACjB,SAAS,MAAM,cAAc,MAAS;AAAA,UACtC,MAAM,eAAe;AAAA,UACrB,UAAU,eAAe,IAAI;AAAA;AAAA,MAC9B;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,SAAS,MAAM,cAAc,IAAI;AAAA,UACjC,MAAM,oBAAC,eAAY;AAAA;AAAA,MACpB;AAAA,OACD,GACD;AAAA,IAEA,uBACA,oBAAC,WAAQ,SAAS,KAAK,EAAE,UAAU,GAClC,2CACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,iBAAe;AAAA,UACf,YAAU;AAAA,UACV,OAAO,KAAK,EAAE,oBAAoB;AAAA,UAClC,OAAO;AAAA,UACP,SAAS,MAAM,cAAc,MAAS;AAAA,UACtC,MAAM,eAAe;AAAA,UACrB,UAAU,eAAe,IAAI;AAAA;AAAA,MAC9B;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,SAAS,MAAM,cAAc,IAAI;AAAA,UACjC,MAAM,oBAAC,kBAAe;AAAA;AAAA,MACvB;AAAA,OACD,GACD;AAAA,KAEF,GACD;AAEF","sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { Button, IconClock24, IconLocation24, Tooltip } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useDimensions } from \"../DimensionsProvider/index.js\";\nimport { OrgUnitSelectorModal, PeriodSelectorModal } from \"@hisptz/dhis2-ui\";\nimport { OrgUnitSelection } from \"@hisptz/dhis2-utils\";\nimport { getOrgUnitSelectionFromIds } from \"../VisualizationSelector/index.js\";\nimport { getOrgUnitsSelection } from \"../../../Map/utils/map.js\";\n\nexport function VisualizationDimensionSelector({\n\tshowPeriodSelector,\n\tshowOrgUnitSelector,\n}: {\n\tshowPeriodSelector?: boolean;\n\tshowOrgUnitSelector?: boolean;\n}) {\n\tconst [dimensions, setDimensions] = useDimensions();\n\tconst periods = useMemo(() => dimensions.pe, [dimensions.pe]);\n\tconst orgUnitSelection = useMemo(\n\t\t() => getOrgUnitSelectionFromIds(dimensions.ou ?? []),\n\t\t[dimensions.ou],\n\t);\n\tconst [openFilter, setOpenFilter] = useState<\"pe\" | \"ou\" | undefined>();\n\n\tconst onFilterUpdate = useCallback(\n\t\t(type: \"ou\" | \"pe\") => (data: OrgUnitSelection | any) => {\n\t\t\tsetOpenFilter(undefined);\n\t\t\tif (type === \"ou\") {\n\t\t\t\tsetDimensions({\n\t\t\t\t\tdimension: \"ou\",\n\t\t\t\t\tvalue: getOrgUnitsSelection(data),\n\t\t\t\t});\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (type === \"pe\") {\n\t\t\t\tsetDimensions({ dimension: \"pe\", value: data });\n\t\t\t\treturn;\n\t\t\t}\n\t\t},\n\t\t[setDimensions],\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<div style={{ display: \"flex\", gap: 8 }}>\n\t\t\t\t{showPeriodSelector && (\n\t\t\t\t\t<Tooltip content={i18n.t(\"Period\")}>\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<PeriodSelectorModal\n\t\t\t\t\t\t\t\tposition=\"middle\"\n\t\t\t\t\t\t\t\tenablePeriodSelector\n\t\t\t\t\t\t\t\tselectedPeriods={periods}\n\t\t\t\t\t\t\t\tonClose={() => setOpenFilter(undefined)}\n\t\t\t\t\t\t\t\thide={openFilter !== \"pe\"}\n\t\t\t\t\t\t\t\tonUpdate={onFilterUpdate(\"pe\")}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tonClick={() => setOpenFilter(\"pe\")}\n\t\t\t\t\t\t\t\ticon={<IconClock24 />}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t\t{showOrgUnitSelector && (\n\t\t\t\t\t<Tooltip content={i18n.t(\"Location\")}>\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<OrgUnitSelectorModal\n\t\t\t\t\t\t\t\tshowUserOptions\n\t\t\t\t\t\t\t\tsearchable\n\t\t\t\t\t\t\t\ttitle={i18n.t(\"Select location(s)\")}\n\t\t\t\t\t\t\t\tvalue={orgUnitSelection}\n\t\t\t\t\t\t\t\tonClose={() => setOpenFilter(undefined)}\n\t\t\t\t\t\t\t\thide={openFilter !== \"ou\"}\n\t\t\t\t\t\t\t\tonUpdate={onFilterUpdate(\"ou\")}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tonClick={() => setOpenFilter(\"ou\")}\n\t\t\t\t\t\t\t\ticon={<IconLocation24 />}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"]}

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

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { LayoutProvider } from '../LayoutProvider/index.js';
+import { DimensionsProvider } from '../DimensionsProvider/index.js';
+import { AnalyticsDataProvider } from '../AnalyticsDataProvider/index.js';
+import { VisualizationTypeProvider } from '../VisualizationTypeProvider/index.js';
+
+function VisualizationProvider({
+  layout,
+  dimensions,
+  children,
+  type,
+  config
+}) {
+  return /* @__PURE__ */ jsx(DimensionsProvider, { dimensions, children: /* @__PURE__ */ jsx(VisualizationTypeProvider, { config, defaultType: type, children: /* @__PURE__ */ jsx(LayoutProvider, { defaultLayout: layout, children: /* @__PURE__ */ jsx(AnalyticsDataProvider, { children }) }) }) });
+}
+
+export { VisualizationProvider };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Visualization/components/VisualizationProvider/index.tsx"],"names":[],"mappings":"AA8BK;AA7BL,SAAiB,sBAAsB;AAEvC,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AACtC;AAAA,EAEC;AAAA,OACM;AAWA,SAAS,sBAAsB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA+B;AAC9B,SACC,oBAAC,sBAAmB,YACnB,8BAAC,6BAA0B,QAAgB,aAAa,MACvD,8BAAC,kBAAe,eAAe,QAC9B,8BAAC,yBAAuB,UAAS,GAClC,GACD,GACD;AAEF","sourcesContent":["import React from \"react\";\nimport { Layout, LayoutProvider } from \"../LayoutProvider/index.js\";\nimport { AnalyticsDimension } from \"@hisptz/dhis2-utils\";\nimport { DimensionsProvider } from \"../DimensionsProvider/index.js\";\nimport { AnalyticsDataProvider } from \"../AnalyticsDataProvider/index.js\";\nimport {\n\tVisualizationType,\n\tVisualizationTypeProvider,\n} from \"../VisualizationTypeProvider/index.js\";\nimport { VisualizationConfig } from \"../../index.js\";\n\nexport interface VisualizationProviderProps {\n\tchildren: React.ReactNode;\n\tlayout: Layout;\n\tdimensions: AnalyticsDimension;\n\ttype: VisualizationType;\n\tconfig: VisualizationConfig;\n}\n\nexport function VisualizationProvider({\n\tlayout,\n\tdimensions,\n\tchildren,\n\ttype,\n\tconfig,\n}: VisualizationProviderProps) {\n\treturn (\n\t\t<DimensionsProvider dimensions={dimensions}>\n\t\t\t<VisualizationTypeProvider config={config} defaultType={type}>\n\t\t\t\t<LayoutProvider defaultLayout={layout}>\n\t\t\t\t\t<AnalyticsDataProvider>{children}</AnalyticsDataProvider>\n\t\t\t\t</LayoutProvider>\n\t\t\t</VisualizationTypeProvider>\n\t\t</DimensionsProvider>\n\t);\n}\n"]}

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

@@ -0,0 +1,167 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useVisualizationType } from '../VisualizationTypeProvider/index.js';
+import { useAnalyticsData } from '../AnalyticsDataProvider/index.js';
+import { CircularLoader } from '@dhis2/ui';
+import { DHIS2PivotTable } from '../../../DHIS2PivotTable/index.js';
+import { useLayout } from '../LayoutProvider/index.js';
+import { forEach, set, mapValues, findIndex, find, filter } from 'lodash';
+import { useDimensions } from '../DimensionsProvider/index.js';
+import i18n from '@dhis2/d2-i18n';
+import { DHIS2Chart } from '../../../ChartAnalytics/index.js';
+import { DHIS2Map } from '../../../Map/index.js';
+
+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.js.map

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":"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/index.js\";\nimport { useAnalyticsData } from \"../AnalyticsDataProvider/index.js\";\nimport { CircularLoader } from \"@dhis2/ui\";\nimport {\n\tDHIS2PivotTable,\n\tDHIS2PivotTableOptions,\n} from \"../../../DHIS2PivotTable/index.js\";\nimport { useLayout } from \"../LayoutProvider/index.js\";\nimport { filter, find, findIndex, forEach, mapValues, set } from \"lodash\";\nimport { Dimension, useDimensions } from \"../DimensionsProvider/index.js\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { ChartConfig, DHIS2Chart } from \"../../../ChartAnalytics/index.js\";\nimport { VisualizationConfig } from \"../../index.js\";\nimport { DHIS2Map, MapProps } from \"../../../Map/index.js\";\nimport { OrgUnitSelection } from \"@hisptz/dhis2-utils\";\nimport {\n\tThematicLayerConfig,\n\tThematicLayerRawData,\n} from \"../../../Map/components/MapLayer/interfaces/index.js\";\nimport type { PivotTableLayoutProps } from \"../../../DHIS2PivotTable/components/Table/index.js\";\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,27 @@
+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.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":"AA4CI;AA5CJ,SAAgB,eAAe,YAAY,gBAAgB;AAKpD,MAAM,2BACZ,cAAiC,YAAY;AACvC,MAAM,6BAA6B,cAExC,MAAS;AACJ,MAAM,0BAA0B,cAErC,MAAS;AAQJ,SAAS,uBAAuB;AACtC,SAAO;AAAA,IACN,WAAW,wBAAwB;AAAA,IACnC,WAAW,uBAAuB;AAAA,EACnC;AAID;AAEO,SAAS,yBAAyB;AACxC,SAAO,WAAW,0BAA0B;AAC7C;AAEO,SAAS,0BAA0B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AACD,GAAmC;AAClC,QAAM,CAAC,MAAM,OAAO,IAAI,SAA4B,WAAW;AAE/D,SACC,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,MACzC,8BAAC,2BAA2B,UAA3B,EAAoC,OAAO,QAC3C,8BAAC,wBAAwB,UAAxB,EAAiC,OAAO,SACvC,UACF,GACD,GACD;AAEF","sourcesContent":["import React, { createContext, useContext, useState } from \"react\";\nimport { VisualizationConfig } from \"../../index.js\";\n\nexport type VisualizationType = \"pivotTable\" | \"chart\" | \"map\";\n\nexport const VisualizationTypeContext =\n\tcreateContext<VisualizationType>(\"pivotTable\");\nexport const VisualizationConfigContext = createContext<\n\tVisualizationConfig | undefined\n>(undefined);\nexport const VisualizationTypeSetter = createContext<\n\tReact.Dispatch<React.SetStateAction<VisualizationType>> | undefined\n>(undefined);\n\nexport interface VisualizationTypeProviderProps {\n\tchildren: React.ReactNode;\n\tdefaultType: VisualizationType;\n\tconfig: VisualizationConfig;\n}\n\nexport function useVisualizationType() {\n\treturn [\n\t\tuseContext(VisualizationTypeContext),\n\t\tuseContext(VisualizationTypeSetter),\n\t] as [\n\t\tVisualizationType,\n\t\tReact.Dispatch<React.SetStateAction<VisualizationType>>,\n\t];\n}\n\nexport function useVisualizationConfig() {\n\treturn useContext(VisualizationConfigContext);\n}\n\nexport function VisualizationTypeProvider({\n\tchildren,\n\tdefaultType,\n\tconfig,\n}: VisualizationTypeProviderProps) {\n\tconst [type, setType] = useState<VisualizationType>(defaultType);\n\n\treturn (\n\t\t<VisualizationTypeContext.Provider value={type}>\n\t\t\t<VisualizationConfigContext.Provider value={config}>\n\t\t\t\t<VisualizationTypeSetter.Provider value={setType}>\n\t\t\t\t\t{children}\n\t\t\t\t</VisualizationTypeSetter.Provider>\n\t\t\t</VisualizationConfigContext.Provider>\n\t\t</VisualizationTypeContext.Provider>\n\t);\n}\n"]}

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

@@ -0,0 +1,55 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useVisualizationType, useVisualizationConfig } from '../VisualizationTypeProvider/index.js';
+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.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;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAC7C,QAAM,SAAS,uBAAuB;AAEtC,QAAM,QAAQ;AAAA,IACb,MACC,4BAA4B,OAAO,CAAC,kBAAkB;AACrD,aACC,OAAO,KAAK,UAAU,CAAC,CAAC,EAAE,SAAS,cAAc,EAAE,KACnD,cAAc,OAAO;AAAA,IAEvB,CAAC;AAAA,IACF,CAAC,MAAM,MAAM;AAAA,EACd;AAEA,SACC,oBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,EAAE,GACpC,gBAAM,IAAI,CAAC,EAAE,MAAM,OAAO,GAAG,MAAM;AACnC,WACC;AAAA,MAAC;AAAA;AAAA,QAEA,SAAS,KAAK,EAAE,oBAAoB;AAAA,UACnC,MAAM,MAAM,YAAY;AAAA,QACzB,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACA,SAAS,MAAM,QAAQ,EAAuB;AAAA,YAC9C;AAAA;AAAA,QACD;AAAA;AAAA,MARK,GAAG,KAAK;AAAA,IASd;AAAA,EAEF,CAAC,GACF;AAEF","sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n\tuseVisualizationConfig,\n\tuseVisualizationType,\n\tVisualizationType,\n} from \"../VisualizationTypeProvider/index.js\";\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\tconst [type, setType] = useVisualizationType();\n\tconst config = useVisualizationConfig();\n\n\tconst types = useMemo(\n\t\t() =>\n\t\t\tsupportedVisualizationTypes.filter((supportedType) => {\n\t\t\t\treturn (\n\t\t\t\t\tObject.keys(config ?? {}).includes(supportedType.id) &&\n\t\t\t\t\tsupportedType.id !== type\n\t\t\t\t);\n\t\t\t}),\n\t\t[type, config],\n\t);\n\n\treturn (\n\t\t<div style={{ display: \"flex\", gap: 8 }}>\n\t\t\t{types.map(({ icon, label, id }) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tkey={`${label}-tooltip`}\n\t\t\t\t\t\tcontent={i18n.t(\"View as {{type}}\", {\n\t\t\t\t\t\t\ttype: label.toLowerCase(),\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={() => setType(id as VisualizationType)}\n\t\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n"]}

package/dist/components/Visualization/index.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { VisualizationProvider } from './components/VisualizationProvider/index.js';
+import { VisualizationTypeSelector } from './components/VisualizationTypeSelector/index.js';
+import { VisualizationDimensionSelector } from './components/VisualizationDimensionSelector/index.js';
+import { VisualizationSelector } from './components/VisualizationSelector/index.js';
+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.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/index.js\";\nimport { Layout } from \"./components/LayoutProvider/index.js\";\nimport { VisualizationType } from \"./components/VisualizationTypeProvider/index.js\";\nimport { VisualizationTypeSelector } from \"./components/VisualizationTypeSelector/index.js\";\nimport { VisualizationDimensionSelector } from \"./components/VisualizationDimensionSelector/index.js\";\nimport { VisualizationSelector } from \"./components/VisualizationSelector/index.js\";\nimport { DHIS2PivotTableOptions } from \"../DHIS2PivotTable/index.js\";\nimport { ChartConfig } from \"../ChartAnalytics/index.js\";\nimport { MapProps } from \"../Map/index.js\";\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/index.js

@@ -0,0 +1,8 @@
+export * from './components/Map/index.js';
+export * from './components/CircularProgressDashboard/index.js';
+export * from './components/ChartAnalytics/index.js';
+export * from './components/SingleValueContainer/index.js';
+export * from './components/DHIS2PivotTable/index.js';
+export * from './components/Visualization/index.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/types/components/ChartAnalytics/DHIS2Chart.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import "./styles/custom-highchart.css";
+import { ChartAnalyticsProps } from "./types/props.js";
+export * from "./services/export.js";
+export * from "./types/props.js";
+export * from "./components/DownloadMenu/index.js";
+/**
+ * The `DHIS2Chart` component allows you to render a chart visualization from DHIS2 analytics data.
+ * It accepts the DHIS2 analytics payload as well as configuration on how to visualize the data.
+ *
+ * @component
+ *
+ * @param {ChartAnalyticsProps} props
+ * @param {Analytics} [props.analytics] - Analytics data from DHIS2
+ * @param {ChartConfig} [props.config] - Visualization configuration. See stories for more information
+ * @param {Record<string, any>} [props.containerProps] - Props that will be passed to the chart container
+ * @param {forwardRef} forwardRef - A function that creates a higher order component that forwards the ref through the component tree.
+ *
+ * @returns {React.FC<ChartAnalyticsProps & { ref: React.Ref<unknown> }>} - The DHIS2 chart component with forward ref support.
+ */
+export declare const DHIS2Chart: React.FC<ChartAnalyticsProps>;
+/**
+ * @deprecated since `v2`. Use `DHIS2Chart` instead
+ * */
+export declare const ChartAnalytics: React.FC<ChartAnalyticsProps>;
+//# sourceMappingURL=DHIS2Chart.d.ts.map

package/dist/types/components/ChartAnalytics/DHIS2Chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DHIS2Chart.d.ts","sourceRoot":"","sources":["../../../../src/components/ChartAnalytics/DHIS2Chart.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,+BAA+B,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oCAAoC,CAAC;AAuBnD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAEpD,CAAC;AAEF;;KAEK;AACL,eAAO,MAAM,cAAc,+BAAa,CAAC"}

package/{build → dist}/types/components/ChartAnalytics/components/DownloadMenu/components/Menu.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { ChartExportMenuItem } from "../interfaces/menu";
+import { ChartExportMenuItem } from "../interfaces/menu.js";
 export declare function ChartMenu({ menuRef, onClick, onClose, exclude, }: {
     menuRef: HTMLDivElement;
     onClick: (action: string) => void;
     onClose: () => void;
     exclude?: ChartExportMenuItem[];
-}): JSX.Element;
+}): import("react/jsx-runtime.js").JSX.Element;
+//# sourceMappingURL=Menu.d.ts.map

package/dist/types/components/ChartAnalytics/components/DownloadMenu/components/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/ChartAnalytics/components/DownloadMenu/components/Menu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,wBAAgB,SAAS,CAAC,EACzB,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAY,GACZ,EAAE;IACF,OAAO,EAAE,cAAc,CAAC;IACxB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;CAChC,8CA+CA"}

package/{build → dist}/types/components/ChartAnalytics/components/DownloadMenu/constants/menu.d.ts

@@ -5,3 +5,4 @@ export declare const chartMenuSections: {
         label: any;
     }[];
 }[];
+//# sourceMappingURL=menu.d.ts.map

package/dist/types/components/ChartAnalytics/components/DownloadMenu/constants/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/ChartAnalytics/components/DownloadMenu/constants/menu.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;;GAmC7B,CAAC"}