@hisptz/dhis2-analytics 1.0.40 → 1.0.42

package/build/es/components/Visualization/components/VisualizationSelector/index.js

@@ -0,0 +1,174 @@
+import React, { useMemo } from "react";
+import { useVisualizationType } from "../VisualizationTypeProvider";
+import { useAnalyticsData } from "../AnalyticsDataProvider";
+import { CircularLoader } from "@dhis2/ui";
+import { CustomPivotTable } from "../../../CustomPivotTable";
+import { useLayout } from "../LayoutProvider";
+import { filter, find, findIndex, forEach, mapValues, set } from "lodash";
+import { useDimensions } from "../DimensionsProvider";
+import i18n from '@dhis2/d2-i18n';
+import { ChartAnalytics } from "../../../ChartAnalytics";
+import { Map } from "../../../Map";
+export 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 "";
+  }
+}
+export 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 {
+      var _orgUnitSelection$org;
+      const orgUnits = [...((_orgUnitSelection$org = orgUnitSelection.orgUnits) !== null && _orgUnitSelection$org !== void 0 ? _orgUnitSelection$org : [])];
+      orgUnits.push({
+        id: ou,
+        children: []
+      });
+      set(orgUnitSelection, ['orgUnits'], orgUnits);
+    }
+  });
+  return orgUnitSelection;
+}
+export function PivotTableRenderer(_ref) {
+  var _options$scrollHeight, _options$scrollWidth, _options$width;
+  let {
+    options
+  } = _ref;
+  const [layout] = useLayout();
+  const {
+    analytics
+  } = useAnalyticsData();
+  const sanitizedLayout = useMemo(() => {
+    return mapValues(layout, dimension => dimension.map(dimension => ({
+      dimension,
+      label: getDimensionLabel(dimension)
+    })));
+  }, [layout]);
+  if (!analytics) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(CustomPivotTable, {
+    tableProps: {
+      scrollHeight: (_options$scrollHeight = options.scrollHeight) !== null && _options$scrollHeight !== void 0 ? _options$scrollHeight : "100%",
+      scrollWidth: (_options$scrollWidth = options.scrollWidth) !== null && _options$scrollWidth !== void 0 ? _options$scrollWidth : "100%",
+      width: (_options$width = options.width) !== null && _options$width !== void 0 ? _options$width : "100%"
+    },
+    analytics: analytics,
+    config: {
+      layout: sanitizedLayout,
+      options
+    }
+  });
+}
+export function ChartRenderer(_ref2) {
+  let {
+    options,
+    height
+  } = _ref2;
+  const {
+    analytics
+  } = useAnalyticsData();
+  if (!analytics) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ChartAnalytics, {
+    analytics: analytics,
+    config: {
+      ...options,
+      height
+    }
+  });
+}
+export function MapRenderer(_ref3) {
+  let {
+    options
+  } = _ref3;
+  const [dimensions] = useDimensions();
+  const {
+    analytics
+  } = useAnalyticsData();
+  const orgUnitSelection = useMemo(() => {
+    var _dimensions$ou;
+    return getOrgUnitSelectionFromIds((_dimensions$ou = dimensions.ou) !== null && _dimensions$ou !== void 0 ? _dimensions$ou : []);
+  }, [dimensions.ou]);
+  const thematicLayers = useMemo(() => {
+    var _findIndex, _analytics$metaData$d, _analytics$metaData, _analytics$metaData$d2;
+    const valueIndex = (_findIndex = findIndex(analytics.headers, ['name', 'value'])) !== null && _findIndex !== void 0 ? _findIndex : -1;
+    return (_analytics$metaData$d = (_analytics$metaData = analytics.metaData) === null || _analytics$metaData === void 0 ? void 0 : (_analytics$metaData$d2 = _analytics$metaData.dimensions["dx"]) === null || _analytics$metaData$d2 === void 0 ? void 0 : _analytics$metaData$d2.map(dataId => {
+      var _analytics$metaData$d3, _analytics$metaData2, _analytics$metaData2$, _analytics$metaData2$2;
+      const config = find(options.thematicLayers, ['id', dataId]);
+      const data = (_analytics$metaData$d3 = (_analytics$metaData2 = analytics.metaData) === null || _analytics$metaData2 === void 0 ? void 0 : (_analytics$metaData2$ = _analytics$metaData2.dimensions) === null || _analytics$metaData2$ === void 0 ? void 0 : (_analytics$metaData2$2 = _analytics$metaData2$.ou) === null || _analytics$metaData2$2 === void 0 ? void 0 : _analytics$metaData2$2.map(ouId => {
+        const values = filter(analytics.rows, row => row.includes(dataId) && row.includes(ouId));
+        const value = values.reduce((acc, value) => acc + parseFloat(value[valueIndex]), 0);
+        return {
+          data: value,
+          dataItem: dataId,
+          orgUnit: ouId
+        };
+      })) !== null && _analytics$metaData$d3 !== void 0 ? _analytics$metaData$d3 : [];
+      return {
+        ...config,
+        data
+      };
+    })) !== null && _analytics$metaData$d !== void 0 ? _analytics$metaData$d : [];
+  }, [analytics]);
+  return /*#__PURE__*/React.createElement(Map, {
+    orgUnitSelection: orgUnitSelection,
+    thematicLayers: thematicLayers
+  });
+}
+export function VisualizationSelector(_ref4) {
+  let {
+    config,
+    height
+  } = _ref4;
+  const [type] = useVisualizationType();
+  const {
+    analytics,
+    loading
+  } = useAnalyticsData();
+  if (loading) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      }
+    }, /*#__PURE__*/React.createElement(CircularLoader, {
+      small: true
+    }));
+  }
+  if (!analytics) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%",
+      height: "100%"
+    }
+  }, type === "pivotTable" && /*#__PURE__*/React.createElement(PivotTableRenderer, {
+    options: config === null || config === void 0 ? void 0 : config.pivotTable
+  }), type === "chart" && /*#__PURE__*/React.createElement(ChartRenderer, {
+    height: height,
+    options: config === null || config === void 0 ? void 0 : config.chart
+  }), type === "map" && /*#__PURE__*/React.createElement(MapRenderer, {
+    options: config === null || config === void 0 ? void 0 : config.map
+  }));
+}

package/build/es/components/Visualization/components/VisualizationTypeProvider/index.js

@@ -0,0 +1,25 @@
+import React, { createContext, useContext, useState } from "react";
+export const VisualizationTypeContext = /*#__PURE__*/createContext('pivotTable');
+export const VisualizationConfigContext = /*#__PURE__*/createContext(undefined);
+export const VisualizationTypeSetter = /*#__PURE__*/createContext(undefined);
+export function useVisualizationType() {
+  return [useContext(VisualizationTypeContext), useContext(VisualizationTypeSetter)];
+}
+export function useVisualizationConfig() {
+  return useContext(VisualizationConfigContext);
+}
+export function VisualizationTypeProvider(_ref) {
+  let {
+    children,
+    defaultType,
+    config
+  } = _ref;
+  const [type, setType] = useState(defaultType);
+  return /*#__PURE__*/React.createElement(VisualizationTypeContext.Provider, {
+    value: type
+  }, /*#__PURE__*/React.createElement(VisualizationConfigContext.Provider, {
+    value: config
+  }, /*#__PURE__*/React.createElement(VisualizationTypeSetter.Provider, {
+    value: setType
+  }, children)));
+}

package/build/es/components/Visualization/components/VisualizationTypeSelector/index.js

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

package/build/es/components/Visualization/index.js

@@ -0,0 +1,97 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from "react";
+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 { Button, colors, IconError24 } from "@dhis2/ui";
+/**
+ *  An analytics component that allows visualization of `chart`, `map`, and `pivot table` by passing analytics object and the default layout and type
+ *
+ * */
+
+function ErrorFallback(_ref) {
+  let {
+    error,
+    resetErrorBoundary,
+    height
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%",
+      textAlign: "center",
+      height: height !== null && height !== void 0 ? height : 500,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 16,
+      padding: 16
+    }
+  }, /*#__PURE__*/React.createElement(IconError24, null), /*#__PURE__*/React.createElement("h3", {
+    style: {
+      color: colors.grey800,
+      margin: 0
+    }
+  }, i18n.t("Could not load visualization")), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: 0
+    }
+  }, error.message), resetErrorBoundary && /*#__PURE__*/React.createElement(Button, {
+    onClick: resetErrorBoundary,
+    small: true
+  }, i18n.t("Try again")));
+}
+export function Visualization(_ref2) {
+  let {
+    dimensions,
+    layout,
+    defaultVisualizationType,
+    config,
+    height,
+    showToolbar
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    onReset: () => {
+      //TODO: reset the visualization
+    },
+    resetKeys: [dimensions, layout, defaultVisualizationType, config],
+    fallbackRender: props => /*#__PURE__*/React.createElement(ErrorFallback, _extends({
+      height: height
+    }, props))
+  }, /*#__PURE__*/React.createElement(VisualizationProvider, {
+    config: config,
+    type: defaultVisualizationType,
+    layout: layout,
+    dimensions: dimensions
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      height: "100%",
+      padding: 16,
+      gap: 16
+    }
+  }, showToolbar && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      gap: 16,
+      justifyContent: "space-between"
+    }
+  }, /*#__PURE__*/React.createElement(VisualizationTypeSelector, null), /*#__PURE__*/React.createElement(VisualizationDimensionSelector, null)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      height: height !== null && height !== void 0 ? height : 500
+    }
+  }, /*#__PURE__*/React.createElement(VisualizationSelector, {
+    height: height !== null && height !== void 0 ? height : 500,
+    config: config
+  })))));
+}

package/build/es/locales/en/translations.json

@@ -124,5 +124,15 @@
     "Legend set is required": "Legend set is required",
     "Radius": "Radius",
     "Configure Thematic Layer": "Configure Thematic Layer",
-    "Loading ...": "Loading ..."
+    "Loading ...": "Loading ...",
+    "Select location(s)": "Select location(s)",
+    "Location": "Location",
+    "Organisation unit": "Organisation unit",
+    "Data": "Data",
+    "Pivot table": "Pivot table",
+    "Chart": "Chart",
+    "Map": "Map",
+    "View as {{type}}": "View as {{type}}",
+    "Could not load visualization": "Could not load visualization",
+    "Try again": "Try again"
 }

package/build/types/components/CustomPivotTable/components/Table/index.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
+export interface PivotTableLayoutProps {
+    scrollHeight?: string;
+    scrollWidth?: string;
+    layout?: string;
+    width?: string;
+}
 export interface PivotTableProps {
     children: React.ReactNode;
-    tableProps?: {
-        scrollHeight?: string;
-        scrollWidth?: string;
-        layout?: string;
-        width?: string;
-    };
+    tableProps?: PivotTableLayoutProps;
 }
 export declare function PivotTable({ tableProps, children }: PivotTableProps): JSX.Element;

package/build/types/components/CustomPivotTable/index.d.ts

@@ -1,6 +1,17 @@
 /// <reference types="react" />
 import { Analytics, LegendSet } from "@hisptz/dhis2-utils";
 import { DHIS2Dimension } from "./interfaces";
+export interface CustomPivotTableOptions {
+    legendSets?: LegendSet[];
+    hideEmptyColumns?: boolean;
+    hideEmptyRows?: boolean;
+    showRowTotals?: boolean;
+    showColumnTotals?: boolean;
+    showRowSubtotals?: boolean;
+    showColumnSubtotals?: boolean;
+    fixColumnHeaders?: boolean;
+    fixRowHeaders?: boolean;
+}
 export interface CustomPivotTableProps {
     analytics: Analytics;
     tableProps?: {
@@ -24,17 +35,7 @@ export interface CustomPivotTableProps {
                 label?: string;
             }[];
         };
-        options?: {
-            legendSets?: LegendSet[];
-            hideEmptyColumns?: boolean;
-            hideEmptyRows?: boolean;
-            showRowTotals?: boolean;
-            showColumnTotals?: boolean;
-            showRowSubtotals?: boolean;
-            showColumnSubtotals?: boolean;
-            fixColumnHeaders?: boolean;
-            fixRowHeaders?: boolean;
-        };
+        options?: CustomPivotTableOptions;
     };
 }
 export declare function CustomPivotTable({ analytics, config, tableProps }: CustomPivotTableProps): JSX.Element;

package/build/types/components/Visualization/components/AnalyticsDataProvider/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Analytics } from "@hisptz/dhis2-utils";
+export interface DataProviderProps {
+    children: React.ReactNode;
+}
+export declare function useAnalyticsData(): {
+    loading: boolean;
+    analytics: Analytics;
+};
+export declare function AnalyticsDataProvider({ children }: DataProviderProps): JSX.Element;

package/build/types/components/Visualization/components/DimensionsProvider/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { AnalyticsDimension } from "@hisptz/dhis2-utils";
+export type Dimension = "ou" | "pe" | "dx" | "co";
+export type DimensionUpdater = (data: {
+    dimension: Dimension;
+    value: string[];
+}) => void;
+export declare const DimensionState: React.Context<AnalyticsDimension>;
+export declare const DimensionUpdateState: React.Context<DimensionUpdater | undefined>;
+export interface DimensionProviderProps {
+    children: React.ReactNode;
+    dimensions: AnalyticsDimension;
+}
+export declare function useDimensions(): [AnalyticsDimension, DimensionUpdater];
+export declare function DimensionsProvider({ children, dimensions }: DimensionProviderProps): JSX.Element;

package/build/types/components/Visualization/components/LayoutProvider/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Dimension } from "../DimensionsProvider";
+export interface Layout {
+    rows: Dimension[];
+    columns: Dimension[];
+    filters: Dimension[];
+}
+export interface LayoutProviderProps {
+    children: React.ReactNode;
+    defaultLayout: Layout;
+}
+export declare const LayoutState: React.Context<Layout | undefined>;
+export declare function useLayout(): Layout[];
+export declare function LayoutProvider({ defaultLayout, children }: LayoutProviderProps): JSX.Element;

package/build/types/components/Visualization/components/VisualizationDimensionSelector/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function VisualizationDimensionSelector(): JSX.Element;

package/build/types/components/Visualization/components/VisualizationProvider/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Layout } from "../LayoutProvider";
+import { AnalyticsDimension } from "@hisptz/dhis2-utils";
+import { VisualizationType } from "../VisualizationTypeProvider";
+import { VisualizationConfig } from "../../index";
+export interface VisualizationProviderProps {
+    children: React.ReactNode;
+    layout: Layout;
+    dimensions: AnalyticsDimension;
+    type: VisualizationType;
+    config: VisualizationConfig;
+}
+export declare function VisualizationProvider({ layout, dimensions, children, type, config }: VisualizationProviderProps): JSX.Element;

package/build/types/components/Visualization/components/VisualizationSelector/index.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { CustomPivotTableOptions } from "../../../CustomPivotTable";
+import { Dimension } from "../DimensionsProvider";
+import { ChartConfig } from "../../../ChartAnalytics";
+import { VisualizationConfig } from "../../index";
+import { MapProps } from "../../../Map";
+import { OrgUnitSelection } from "@hisptz/dhis2-utils";
+import { PivotTableLayoutProps } from "../../../CustomPivotTable/components/Table";
+export interface VisualizationSelectorProps {
+    config: VisualizationConfig;
+    height: number;
+}
+export declare function getDimensionLabel(dimension: Dimension): any;
+export declare function getOrgUnitSelectionFromIds(ous: string[]): OrgUnitSelection;
+export declare function PivotTableRenderer({ options }: {
+    options: CustomPivotTableOptions & PivotTableLayoutProps;
+}): JSX.Element | null;
+export declare function ChartRenderer({ options, height }: {
+    options: ChartConfig;
+    height: number;
+}): JSX.Element | null;
+export declare function MapRenderer({ options }: {
+    options: Omit<MapProps, "orgUnitSelection" | "periodSelection">;
+}): JSX.Element;
+export declare function VisualizationSelector({ config, height }: VisualizationSelectorProps): JSX.Element | null;

package/build/types/components/Visualization/components/VisualizationTypeProvider/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { VisualizationConfig } from "../../index";
+export type VisualizationType = "pivotTable" | "chart" | "map";
+export declare const VisualizationTypeContext: React.Context<VisualizationType>;
+export declare const VisualizationConfigContext: React.Context<VisualizationConfig | undefined>;
+export declare const VisualizationTypeSetter: React.Context<React.Dispatch<React.SetStateAction<VisualizationType>> | undefined>;
+export interface VisualizationTypeProviderProps {
+    children: React.ReactNode;
+    defaultType: VisualizationType;
+    config: VisualizationConfig;
+}
+export declare function useVisualizationType(): [VisualizationType, React.Dispatch<React.SetStateAction<VisualizationType>>];
+export declare function useVisualizationConfig(): VisualizationConfig | undefined;
+export declare function VisualizationTypeProvider({ children, defaultType, config }: VisualizationTypeProviderProps): JSX.Element;

package/build/types/components/Visualization/components/VisualizationTypeSelector/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function VisualizationTypeSelector(): JSX.Element;

package/build/types/components/Visualization/index.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { AnalyticsDimension } from "@hisptz/dhis2-utils";
+import { Layout } from "./components/LayoutProvider";
+import { VisualizationType } from "./components/VisualizationTypeProvider";
+import { CustomPivotTableOptions } from "../CustomPivotTable";
+import { ChartConfig } from "../ChartAnalytics";
+import { MapProps } from "../Map";
+export interface VisualizationConfig {
+    pivotTable?: CustomPivotTableOptions;
+    chart?: ChartConfig;
+    map?: Omit<MapProps, "orgUnitSelection" | "periodSelection">;
+}
+export interface VisualizationProps {
+    layout: Layout;
+    defaultVisualizationType: VisualizationType;
+    dimensions: AnalyticsDimension;
+    config: VisualizationConfig;
+    height?: number;
+    showToolbar?: boolean;
+}
+export declare function Visualization({ dimensions, layout, defaultVisualizationType, config, height, showToolbar }: VisualizationProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hisptz/dhis2-analytics",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "description": "A collection of reusable react components for visualizing analytics data from DHIS2",
   "license": "BSD-3-Clause",
   "scripts": {
@@ -31,8 +31,8 @@
   "dependencies": {
     "@dhis2/analytics": "^24.4.2",
     "@dhis2/app-runtime": "^3.7.0",
-    "@hisptz/dhis2-ui": "^1.0.40",
-    "@hisptz/dhis2-utils": "^1.0.37",
+    "@hisptz/dhis2-ui": "^1.0.42",
+    "@hisptz/dhis2-utils": "^1.0.42",
     "async-es": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-scale": "^4.0.2",
@@ -42,6 +42,7 @@
     "leaflet-easyprint": "^2.1.9",
     "leaflet.fullscreen": "^2.4.0",
     "react-circular-progressbar": "^2.1.0",
+    "react-error-boundary": "^4.0.4",
     "react-helmet": "^6.1.0",
     "react-leaflet": "^4.2.0",
     "react-leaflet-custom-control": "^1.3.1",
@@ -80,5 +81,5 @@
   "peerDependencies": {
     "lodash": "^4"
   },
-  "gitHead": "fa7d27a9b9b35e71955a03aaf786d5dc428511dc"
+  "gitHead": "dcbb64418e4f7ba3132cb7788abe9f19451aafdc"
 }