@hisptz/dhis2-analytics 1.0.49 → 1.0.51

package/src/components/Map/interfaces/index.ts

@@ -0,0 +1,57 @@
+import type {OrgUnitSelection} from "@hisptz/dhis2-utils";
+import React from "react";
+import type {MapContainerProps} from "react-leaflet";
+import {MapControls, MapLegendConfig} from "../components/MapArea/interfaces";
+import {EarthEngineLayerConfig, ThematicLayerConfig} from "../components/MapLayer/interfaces";
+
+export interface MapProviderProps {
+  children: React.ReactNode;
+  orgUnitSelection: OrgUnitSelection;
+  periodSelection?: { periods?: string[]; range?: { start: Date; end: Date } };
+}
+
+export interface MapProps {
+  key?: string;
+  orgUnitSelection: OrgUnitSelection; //Organisation unit selection
+  pointLayer?: {
+    enabled: boolean;
+    label?: string;
+    level?: number | string;
+    group?: string;
+    style?: {
+      icon?: string;
+      groupSet?: string;
+    };
+  };
+  boundaryLayer?: {
+    enabled: boolean;
+  };
+  controls?: MapControls[];
+  legends?: MapLegendConfig;
+  thematicLayers?: ThematicLayerConfig[];
+  earthEngineLayers?: EarthEngineLayerConfig[];
+  periodSelection?: { periods?: string[]; range?: { start: Date; end: Date } };
+  mapOptions?: MapContainerProps;
+}
+
+export interface MapOrgUnit {
+  id: string;
+  path: string;
+  name: string;
+  bounds: any[];
+  geoJSON: any;
+  children?: MapOrgUnit[];
+  level?: number;
+}
+
+export interface PointOrgUnit {
+  id: string;
+  path: string;
+  name: string;
+  bounds: any[];
+  geoJSON: any;
+  icon: {
+    type: "custom" | "groupIcon";
+    icon: string;
+  };
+}

package/src/components/Map/state/index.tsx

@@ -0,0 +1,31 @@
+import type {OrgUnitSelection} from "@hisptz/dhis2-utils";
+import {BasePeriod} from "@hisptz/dhis2-utils";
+import {createContext} from "react";
+import {CustomMapLayer} from "../components/MapLayer/interfaces";
+import {MapOrgUnit} from "../interfaces";
+
+export const MapOrgUnitContext = createContext<{
+  orgUnitSelection: OrgUnitSelection;
+  orgUnits?: MapOrgUnit[];
+}>({
+  orgUnitSelection: { orgUnits: [] },
+  orgUnits: [],
+});
+
+export const MapPeriodContext = createContext<
+  | {
+      periods?: BasePeriod[];
+      range?: { start: Date; end: Date };
+    }
+  | undefined
+>({
+  periods: [],
+});
+
+export const MapLayersContext = createContext<{
+  layers: CustomMapLayer[];
+  updateLayer: (id: string, updatedLayer: CustomMapLayer) => void;
+}>({
+  layers: [],
+  updateLayer: () => {},
+});

package/src/components/Map/utils/colors.ts

@@ -0,0 +1,95 @@
+import {hcl} from "d3-color";
+import {isString} from "lodash";
+import {COLOR_PALETTES} from "../constants/colors";
+
+const colorbrewer: Record<string, any> = COLOR_PALETTES;
+
+// Returns a color brewer scale for a number of classes
+export const getColorPalette = (scale: string, classes: number) => {
+  return colorbrewer?.[scale]?.[classes];
+};
+
+export const getColorClasses = (palette: string) => {
+  return palette?.split(",")?.length;
+};
+
+// Returns color scale name for a palette
+export const getColorScale = (palette: string) => {
+  const classes = palette.split(",").length;
+  return colorScales.find((name) => colorbrewer[name][classes]?.join(",") === palette);
+};
+
+export const defaultColorScaleName = "YlOrBr";
+export const defaultClasses = 5;
+export const defaultColorScale = getColorPalette(defaultColorScaleName, defaultClasses);
+
+// Correct colors not adhering to the css standard (add missing #)
+export const cssColor = (color: any) => {
+  if (!isString(color)) {
+    return color;
+  } else if (color === "##normal") {
+    // ##normal is used in old map favorites
+    return null; // Will apply default color
+  }
+  return (/(^[0-9A-F]{6}$)|(^[0-9A-F]{3}$)/i.test(color) ? "#" : "") + color;
+};
+
+// Returns an unique color (first from an array, then random but still unique)
+export const getUniqueColor = (defaultColors: any) => {
+  const colors = [...defaultColors];
+
+  function randomColor(): string {
+    const color = "#000000".replace(/0/g, () => (~~(Math.random() * 16)).toString(16));
+
+    // Recursive until color is unique
+    if (colors.includes(color)) {
+      return randomColor();
+    }
+
+    colors.push(color);
+
+    return color;
+  }
+
+  return (index: number) => colors[index] || randomColor();
+};
+
+// Returns true if a color is dark
+export const isDarkColor = (color: string) => hcl(color).l < 70;
+
+// Returns constrasting color
+export const getContrastColor = (color: string) => (isDarkColor(color) ? "#fff" : "#000");
+export type LegendColorScale = typeof colorScales[number];
+export const colorScales = [
+  "YlOrBr",
+  "Reds",
+  "YlGn",
+  "Greens",
+  "Blues",
+  "BuPu",
+  "RdPu",
+  "PuRd",
+  "Greys",
+  "YlOrBr_reverse",
+  "Reds_reverse",
+  "YlGn_reverse",
+  "Greens_reverse",
+  "Blues_reverse",
+  "BuPu_reverse",
+  "RdPu_reverse",
+  "PuRd_reverse",
+  "Greys_reverse",
+  "PuOr",
+  "BrBG",
+  "PRGn",
+  "PiYG",
+  "RdBu",
+  "RdGy",
+  "RdYlBu",
+  "Spectral",
+  "RdYlGn",
+  "Paired",
+  "Pastel1",
+  "Set1",
+  "Set3",
+];

package/src/components/Map/utils/helpers.ts

@@ -0,0 +1,15 @@
+// Get the longest text length from an object property in an array
+import L from "leaflet";
+
+export const getLongestTextLength = (array: Array<any>, key: string | number) =>
+  array.reduce((text, curr) => (curr[key] && String(curr[key]).length > text.length ? String(curr[key]) : text), "").length;
+
+export function getIconUrl(icon: string, { baseUrl }: { baseUrl: string }) {
+  return `${baseUrl}/images/orgunitgroup/${icon ?? "01.png"}`;
+}
+
+export function getIcon(url: string): L.Icon | undefined {
+  return new L.Icon({
+    iconUrl: url,
+  });
+}

package/src/components/Map/utils/map.ts

@@ -0,0 +1,150 @@
+import type {Legend, OrganisationUnit, OrgUnitSelection} from "@hisptz/dhis2-utils";
+import {LeafletMouseEvent} from "leaflet";
+import {compact, filter, find, forEach, isEmpty, isString, sortBy} from "lodash";
+import {defaultClasses, defaultColorScaleName, getColorPalette} from "./colors";
+
+export function highlightFeature(e: LeafletMouseEvent, style: any) {
+  const layer = e.target;
+  layer.setStyle(style);
+  // layer.bringToFront();
+}
+
+export function resetHighlight(e: LeafletMouseEvent, defaultStyle: any) {
+  const layer = e.target;
+  layer.setStyle(defaultStyle);
+  // layer.bringToBack();
+}
+
+export function getColorFromLegendSet(legends: Legend[], value?: number): string {
+  if (!value) {
+    return "";
+  }
+  const legend: any = find(legends ?? [], (legend: any) => legend?.startValue <= value && legend?.endValue >= value) ?? {};
+  return legend.color ? legend.color : "transparent";
+}
+
+export function getLegendCount(legend: any, data: any) {
+  const { startValue, endValue } = legend;
+  return filter(data, (d: any) => d.data >= startValue && d.data <= endValue).length;
+}
+
+export function getOrgUnitsSelection(orgUnitSelection: OrgUnitSelection) {
+  const orgUnits = [];
+  if (orgUnitSelection.userOrgUnit) {
+    orgUnits.push("USER_ORGUNIT");
+  }
+
+  if (orgUnitSelection.userSubUnit) {
+    orgUnits.push("USER_ORGUNIT_CHILDREN");
+  }
+
+  if (orgUnitSelection.userSubX2Unit) {
+    orgUnits.push("USER_ORGUNIT_GRANDCHILDREN");
+  }
+  if (!isEmpty(orgUnitSelection.levels)) {
+    forEach(orgUnitSelection.levels, (level) => orgUnits.push(`LEVEL-${level}`));
+  }
+
+  return [...orgUnits, ...(orgUnitSelection?.orgUnits?.map((ou: OrganisationUnit) => `${ou.id}`) ?? [])];
+}
+
+export function sanitizeOrgUnits(metaData: any) {
+  if (metaData) {
+    return metaData?.dimensions?.ou?.map((ouId: string) => ({
+      id: ouId,
+      name: metaData?.items[ouId]?.name,
+      path: metaData?.ouHierarchy?.[ouId],
+    }));
+  }
+  return [];
+}
+
+export function toGeoJson(organisationUnits: any) {
+  return sortBy(organisationUnits, "le").map((ou: any) => {
+    try {
+      const coord = JSON.parse(ou.co);
+      let gpid = "";
+      let gppg = "";
+      let type = "Point";
+
+      if (ou.ty === 2) {
+        type = "Polygon";
+        if (ou.co.substring(0, 4) === "[[[[") {
+          type = "MultiPolygon";
+        }
+      }
+
+      // Grand parent
+      if (isString(ou.pg) && ou.pg.length) {
+        const ids = compact(ou.pg.split("/"));
+
+        // Grand parent id
+        if (ids.length >= 2) {
+          gpid = ids[ids.length - 2] as string;
+        }
+
+        // Grand parent parent graph
+        if (ids.length > 2) {
+          gppg = "/" + ids.slice(0, ids.length - 2).join("/");
+        }
+      }
+
+      return {
+        type: "Feature",
+        id: ou.id,
+        geometry: {
+          type,
+          coordinates: coord,
+        },
+        properties: {
+          type,
+          id: ou.id,
+          name: ou.na,
+          hasCoordinatesDown: ou.hcd,
+          hasCoordinatesUp: ou.hcu,
+          level: ou.le,
+          grandParentParentGraph: gppg,
+          grandParentId: gpid,
+          parentGraph: ou.pg,
+          parentId: ou.pi,
+          parentName: ou.pn,
+          dimensions: ou.dimensions,
+        },
+      };
+    } catch (e) {
+      return {};
+    }
+  });
+}
+
+export function sanitizeDate(startDate: string): string {
+  if (startDate?.split("-")?.[0]?.length < 4) {
+    return startDate?.split("-")?.reverse()?.join("-");
+  }
+  return startDate;
+}
+
+export function generateLegends(maxValue: number, minValue: number, { classesCount, colorClass }: { classesCount: number; colorClass: string }): Array<Legend> {
+  const count: number = classesCount ?? defaultClasses;
+  const color = colorClass ?? defaultColorScaleName;
+
+  const colorScale = [...getColorPalette(color, count)].reverse();
+
+  const maxLegendValue = 5 * Math.ceil(maxValue / 5);
+  const range = maxLegendValue / count;
+
+  const values = [];
+  let legendColorsIterator = colorScale.length - 1;
+  for (let i = 0; i < maxLegendValue; i += range) {
+    const id = colorScale[legendColorsIterator];
+    values.push({
+      startValue: Math.floor(i),
+      endValue: Math.floor(i + range),
+      id,
+      color: id,
+    });
+    legendColorsIterator--;
+  }
+
+  return values.reverse();
+}

package/src/components/SingleValueContainer/SingleValueContainer.test.tsx

@@ -0,0 +1,24 @@
+import {mount} from "@cypress/react";
+import React from "react";
+import {SingleValueContainer} from ".";
+
+describe("Single Value Container Tests", () => {
+  it("should render", function () {
+    const arg = {
+      title: "PRIORITY INDICATORS",
+      singleValueItems: [
+        {
+          label: "Total Bookings",
+          value: 136,
+        },
+        {
+          label: "At least one dose",
+          value: 45,
+          percentage: 23,
+          color: "#0D47A1",
+        },
+      ],
+    };
+    mount(<SingleValueContainer {...arg} />);
+  });
+});

package/src/components/SingleValueContainer/components/SingleValueItem/SingleValueItem.tsx

@@ -0,0 +1,46 @@
+import {Tooltip} from "@dhis2/ui";
+import {capitalize} from "lodash";
+import React from "react";
+import {animated, useSpring} from "react-spring";
+import styles from "../../styles/SingleValueContainer.module.css";
+import {SingleValue} from "../../types/props";
+import SingleValuePercentage from "./SingleValuePercentage";
+
+interface SingleValueProps extends SingleValue {
+  globalAnimationDelay?: number;
+  globalAnimationDuration?: number;
+}
+
+export default function SingleValueItem({
+  label,
+  value,
+  color,
+  percentage,
+  animationDuration,
+  animationDelay,
+  globalAnimationDelay,
+  decimalPlaces,
+  globalAnimationDuration,
+}: SingleValueProps): React.ReactElement {
+  const numberFormatter = (value: number) => Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: decimalPlaces ?? 1 }).format(value);
+
+  const sanitizedValue = useSpring({
+    val: value,
+    from: { val: 0 },
+    config: { duration: animationDuration ?? globalAnimationDuration ?? 1000 },
+    delay: animationDelay ?? globalAnimationDelay ?? 10,
+  });
+
+  const tooltipContent = `${label}: ${value}`;
+  return (
+    <div className={`${styles["single-value-item"]} text-center`}>
+      <div className={styles["font-large"]}>{label}</div>
+      <Tooltip content={capitalize(tooltipContent)}>
+        <animated.div className={`${styles["font-bold"]} ${styles["font-xx-large"]} ${styles["padding-top"]}`}>
+          {sanitizedValue.val.to((value) => numberFormatter(Math.floor(value)))}
+        </animated.div>
+      </Tooltip>
+      {percentage ? <SingleValuePercentage color={color} percentage={percentage} /> : <span></span>}
+    </div>
+  );
+}

package/src/components/SingleValueContainer/components/SingleValueItem/SingleValuePercentage.tsx

@@ -0,0 +1,12 @@
+import {LinearLoader} from "@dhis2/ui";
+import React from "react";
+import styles from "../../styles/SingleValueContainer.module.css";
+
+export default function SingleValuePercentage({ percentage, color }: any): React.ReactElement {
+  const width = "100%";
+  return (
+    <div className="w-100">
+      <LinearLoader className={styles["percent-value"]} width={width} amount={percentage} />
+    </div>
+  );
+}

package/src/components/SingleValueContainer/index.tsx

@@ -0,0 +1,37 @@
+import i18n from "@dhis2/d2-i18n";
+import {CssReset} from "@dhis2/ui";
+import React, {Suspense} from "react";
+import SingleValueItem from "./components/SingleValueItem/SingleValueItem";
+import styles from "./styles/SingleValueContainer.module.css";
+import {SingleValue, SingleValueContainerProps} from "./types/props";
+
+export * from "./types/props";
+
+export function SingleValueContainer({
+                                         title,
+                                         singleValueItems,
+                                         animationDuration,
+                                         animationDelay
+                                     }: SingleValueContainerProps): React.ReactElement {
+    return (
+        <div className="w-100 h-100">
+            <CssReset/>
+            <Suspense fallback={<div>{i18n.t("Loading ...")}</div>}>
+                <div>
+                    <span className={`${styles["font-x-large"]} ${styles["font-bold"]}`}>{title}</span>
+                    <div className={styles["single-value-list"]}>
+                        {singleValueItems.map((singleValueItem: SingleValue) => (
+              <SingleValueItem
+                key={`${singleValueItem.label}-${singleValueItem.value}`}
+                {...singleValueItem}
+                globalAnimationDuration={animationDuration}
+                globalAnimationDelay={animationDelay}
+              />
+            ))}
+          </div>
+        </div>
+      </Suspense>
+    </div>
+  );
+}
+export { SingleValueItem };

package/src/components/SingleValueContainer/styles/SingleValueContainer.module.css

@@ -0,0 +1,39 @@
+.single-value-list {
+    padding: 10px 2px;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.padding-top {
+    padding-top: 12px;
+}
+
+.percent-value {
+    border-radius: 1rem;
+}
+
+.percent-value div {
+    height: .5rem !important;
+}
+
+.font-large {
+    font-size: 1rem;
+}
+
+.font-x-large {
+    font-size: 1.5rem;
+}
+
+.font-xx-large {
+    font-size: 3rem;
+}
+
+.font-bold {
+    font-weight: bold;
+}
+
+.single-value-item {
+    margin: 0 1vw;
+}

package/src/components/SingleValueContainer/types/props.tsx

@@ -0,0 +1,16 @@
+export type SingleValueContainerProps = {
+  title: string;
+  singleValueItems: Array<SingleValue>;
+  animationDuration?: number;
+  animationDelay?: number;
+};
+
+export type SingleValue = {
+  label: string;
+  value: number;
+  percentage?: number;
+  decimalPlaces?: number;
+  color?: string;
+  animationDuration?: number;
+  animationDelay?: number;
+};

package/src/components/Visualization/components/AnalyticsDataProvider/index.tsx

@@ -0,0 +1,76 @@
+import React, {createContext, useContext, useEffect, useMemo} from "react";
+import {Analytics, AnalyticsDimension} from "@hisptz/dhis2-utils";
+import {useDimensions} from "../DimensionsProvider";
+import {useDataQuery} from "@dhis2/app-runtime";
+import {useLayout} from "../LayoutProvider";
+import {forEach, set} from "lodash";
+
+const AnalyticsContext = createContext<{ loading: boolean; analytics: Analytics } | undefined>(undefined);
+
+const analyticsQuery = {
+    analytics: {
+        resource: "analytics",
+        params: ({dimensions, filters}: any) => {
+            return {
+                dimension: Object.keys(dimensions).map((dimension) => `${dimension}:${dimensions[dimension]?.join(';')}`),
+                filters: Object.keys(filters).map((dimension) => `${dimension}:${dimensions[dimension]?.join(';')}`),
+                includeMetadataDetails: true
+            }
+        }
+    }
+}
+
+export interface DataProviderProps {
+    children: React.ReactNode
+}
+
+export function useAnalyticsData() {
+    return useContext(AnalyticsContext) ?? {analytics: {}, loading: false}
+}
+
+export function AnalyticsDataProvider({children}: DataProviderProps) {
+    const [analyticsDimensions] = useDimensions();
+    const [layout] = useLayout();
+    const {dimensions, filters} = useMemo(() => {
+        const dimensions = {};
+        const filters = {};
+
+        forEach([...(layout?.columns ?? []), ...(layout?.rows ?? [])], (dimension) => {
+            set(dimensions, [dimension], (analyticsDimensions as AnalyticsDimension)?.[dimension])
+        })
+        forEach([...(layout?.filters ?? [])], (dimension) => {
+            set(dimensions, [dimension], (analyticsDimensions as AnalyticsDimension)?.[dimension])
+        })
+
+        return {
+            dimensions,
+            filters
+        }
+    }, [layout, analyticsDimensions.pe, analyticsDimensions.ou]);
+    const {data: analytics, error, loading, refetch, called} = useDataQuery(analyticsQuery, {
+        variables: {
+            dimensions,
+            filters
+        },
+        lazy: true
+    });
+
+    useEffect(() => {
+        refetch({
+            dimensions,
+            filters
+        })
+    }, [dimensions, filters]);
+
+    useEffect(() => {
+        if (error) {
+            throw error;
+        }
+    }, [error])
+
+    return (
+        <AnalyticsContext.Provider value={{analytics: analytics?.analytics as Analytics, loading}}>
+            {children}
+        </AnalyticsContext.Provider>
+    )
+}

package/src/components/Visualization/components/DimensionsProvider/index.tsx

@@ -0,0 +1,51 @@
+import React, {createContext, useContext, useReducer} from "react";
+import {AnalyticsDimension} from "@hisptz/dhis2-utils";
+import {set} from "lodash";
+import {useUpdateEffect} from "usehooks-ts";
+
+export type Dimension = "ou" | "pe" | "dx" | "co";
+
+export type DimensionUpdater = (data: { dimension: Dimension; value: string[] }) => void
+export const DimensionState = createContext<AnalyticsDimension>({
+    dx: [],
+    pe: [],
+    ou: []
+})
+export const DimensionUpdateState = createContext<DimensionUpdater | undefined>(undefined);
+
+
+function reducer(state: AnalyticsDimension, {dimension, value}: { dimension: Dimension, value: string[] }) {
+    const updatedState = {...(state ?? {})};
+    set(updatedState, [dimension], value);
+    return updatedState
+}
+
+export interface DimensionProviderProps {
+    children: React.ReactNode,
+    dimensions: AnalyticsDimension
+}
+
+export function useDimensions() {
+    return [
+        useContext(DimensionState),
+        useContext(DimensionUpdateState)
+    ] as [AnalyticsDimension, DimensionUpdater]
+}
+
+export function DimensionsProvider({children, dimensions}: DimensionProviderProps) {
+    const [state, dispatch] = useReducer(reducer, dimensions);
+
+    useUpdateEffect(() => {
+        Object.keys(dimensions).forEach((dimension: string) => {
+            console.log("updating")
+            dispatch({dimension: dimension as Dimension, value: dimensions[dimension] ?? []})
+        })
+    }, [dimensions]);
+
+
+    return <DimensionState.Provider value={state}>
+        <DimensionUpdateState.Provider value={dispatch}>
+            {children}
+        </DimensionUpdateState.Provider>
+    </DimensionState.Provider>
+}

package/src/components/Visualization/components/LayoutProvider/index.tsx

@@ -0,0 +1,34 @@
+import React, {createContext, useContext, useState} from "react";
+import {Dimension} from "../DimensionsProvider";
+
+
+export interface Layout {
+    rows: Dimension[];
+    columns: Dimension[];
+    filters: Dimension[]
+}
+
+export interface LayoutProviderProps {
+    children: React.ReactNode;
+    defaultLayout: Layout
+}
+
+export const LayoutState = createContext<Layout | undefined>(undefined);
+
+
+export function useLayout() {
+
+    return [
+        useContext(LayoutState) ?? {rows: [], filters: [], columns: []}
+    ]
+}
+
+export function LayoutProvider({defaultLayout, children}: LayoutProviderProps) {
+    const [layout, setLayout] = useState(defaultLayout);
+
+    return (
+        <LayoutState.Provider value={layout}>
+            {children}
+        </LayoutState.Provider>
+    )
+}