@hisptz/dhis2-analytics 1.0.49 → 1.0.51

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

@@ -0,0 +1,48 @@
+import type {Analytics} from "@hisptz/dhis2-utils";
+import HighCharts, {DashStyleValue, YAxisOptions, YAxisPlotLinesLabelOptions} from "highcharts";
+
+export type ChartType = "column" | "pie" | "stacked-column" | "line" | "multi-series" | "bar" | "stacked-bar";
+
+export interface MultiSeriesConfig {
+    series?: Array<{
+        id: string;
+        as: "column" | "line";
+        cumulative?: boolean;
+        yAxis?: number;
+    }>;
+    yAxes?: Array<YAxisOptions>;
+    target?: TargetConfig;
+}
+
+export interface TargetConfig {
+    id: string;
+    value: number;
+    label?: YAxisPlotLinesLabelOptions;
+    styles: {
+        color?: string;
+        width?: number;
+        dashStyle?: DashStyleValue;
+        zIndex?: number;
+    };
+}
+
+export type ChartConfig = {
+    layout: {
+        series: Array<string>;
+        category: Array<string>;
+        filter: Array<string>;
+    };
+    type?: ChartType;
+    height?: number;
+    colors?: Array<string>;
+    name?: string;
+    allowChartTypeChange?: boolean;
+    highChartOverrides?: Partial<HighCharts.Options> | ((config: HighCharts.Options) => Partial<HighCharts.Options>);
+    multiSeries?: MultiSeriesConfig;
+};
+
+export type ChartAnalyticsProps = {
+    analytics: Analytics;
+    config: ChartConfig;
+    containerProps?: Record<string, any>;
+};

package/src/components/ChartAnalytics/utils/chart.ts

@@ -0,0 +1,128 @@
+import type {Analytics, AnalyticsHeader, AnalyticsMetadata} from "@hisptz/dhis2-utils";
+import {compact, find, findIndex, head, isEmpty, set} from "lodash";
+import {DHIS2Chart} from "../models";
+import {DHIS2ColumnChart, DHIS2StackedColumnChart} from "../models/column";
+import {DHIS2LineChart} from "../models/line";
+import {DHIS2MultiSeriesChart} from "../models/multi-series";
+import {DHIS2PieChart} from "../models/pie";
+import {ChartConfig, ChartType} from "../types/props";
+import {DHIS2BarChart, DHIS2StackedBarChart} from "../models/bar";
+
+export function getDimensionHeaderIndex(headers: AnalyticsHeader[], name: string): number {
+  return findIndex(headers, { name });
+}
+
+export function getPointSeries(analytics: Analytics, config: ChartConfig, highchartsType: string) {
+  const series: string[] = config.layout.series;
+
+  return series.map((seriesName: string) => {
+    const header = analytics?.headers?.find((header: any) => header.name === seriesName);
+    if (!header) {
+      return undefined;
+    }
+    if (analytics?.metaData) {
+      return getColumnSeries(analytics, header, config, highchartsType);
+    }
+  })[0];
+}
+
+export function getColumnSeries(analytics: Analytics, header: AnalyticsHeader, config: ChartConfig, highchartsType: string): any {
+  const headerIndex = analytics?.headers?.findIndex((h) => header.name === h.name);
+  const valueIndex = analytics?.headers?.findIndex((h) => h.name === "value");
+
+  const colors = config.colors ?? [];
+
+  const { items, dimensions } = analytics?.metaData ?? {};
+  const categoriesDimension = config.layout.category;
+
+  const seriesDimensionValues: string[] = dimensions?.[header.name as "dx" | "ou" | "pe"] ?? [];
+
+  return head(
+    categoriesDimension?.map((categoryDimension: string) => {
+      const categories: string[] = dimensions?.[categoryDimension as "dx" | "ou" | "pe"] as any;
+      const categoryDimensionIndex = analytics?.headers?.findIndex((h) => h.name === categoryDimension);
+      return seriesDimensionValues?.map((seriesDimensionValue: string, index) => {
+        const data = categories?.map((category: string) => {
+          const row = find(analytics?.rows, (row: any) => row[headerIndex ?? -1] === seriesDimensionValue && row[categoryDimensionIndex ?? -1] === category);
+          return row?.[valueIndex ?? -1] ? parseFloat(row?.[valueIndex ?? -1]) : 0;
+        });
+        return {
+          name: items?.[seriesDimensionValue as any]?.name,
+          data,
+          type: highchartsType,
+          color: colors[index % colors.length],
+        };
+      });
+    })
+  );
+}
+
+function getCategories({ name }: AnalyticsHeader, { items, dimensions }: AnalyticsMetadata): string[] {
+  const categories: string[] = dimensions?.[name as "dx" | "ou" | "pe"] as any;
+
+  return categories?.map((category: string) => {
+    return items[category as any]?.name ?? "";
+  }) as unknown as string[];
+}
+
+export function getAllCategories(analytics: Analytics, config: ChartConfig): string[] {
+  const categories = config.layout.category;
+
+  return compact(
+    categories?.map((category: string) => {
+      const header = analytics?.headers?.find((header: any) => header.name === category);
+      if (!header) {
+        return undefined;
+      }
+      if (analytics?.metaData) {
+        return getCategories(header, analytics?.metaData);
+      }
+    })
+  )[0];
+}
+
+export function updateLayout(config: ChartConfig, { type }: { type: ChartType }) {
+  if (type === config.type) {
+    return config.layout;
+  }
+
+  const updatedLayout = { ...config.layout };
+
+  switch (type) {
+    case "pie":
+      set(updatedLayout, "category", []);
+      if (isEmpty(updatedLayout.series)) {
+        if (!isEmpty(config.layout.category)) {
+          set(updatedLayout, "series", [head(config.layout.category)]);
+        } else {
+          throw new Error("Invalid layout for pie chart");
+        }
+      }
+      if (updatedLayout.series.length > 1) {
+        set(updatedLayout, "series", [head(updatedLayout.series)]);
+      }
+  }
+
+  return updatedLayout;
+}
+
+export function getChartInstance(id: string, analytics: Analytics, config: ChartConfig): DHIS2Chart {
+  switch (config.type) {
+    case "column":
+      return new DHIS2ColumnChart(id, analytics, config);
+      case "bar":
+      return new DHIS2BarChart(id, analytics, config);
+      case "stacked-bar":
+      return new DHIS2StackedBarChart(id, analytics, config);
+    case "stacked-column":
+      return new DHIS2StackedColumnChart(id, analytics, config);
+    case "pie":
+      return new DHIS2PieChart(id, analytics, config);
+    case "line":
+      return new DHIS2LineChart(id, analytics, config);
+    case "multi-series":
+      return new DHIS2MultiSeriesChart(id, analytics, config);
+    default:
+      throw new Error(`Unsupported chart type: ${config.type}`);
+  }
+}

package/src/components/CircularProgressDashboard/CircularProgressIndicator.test.tsx

@@ -0,0 +1,9 @@
+import {mount} from "@cypress/react";
+import React from "react";
+import {CircularProgressDashboard} from ".";
+
+describe("CircularProgressDashboard", () => {
+  it("should render", () => {
+    mount(<CircularProgressDashboard size="100px" />);
+  });
+});

package/src/components/CircularProgressDashboard/index.tsx

@@ -0,0 +1,36 @@
+import {colors} from "@dhis2/ui";
+import React, {useMemo} from "react";
+import {CircularProgressbarWithChildren} from "react-circular-progressbar";
+import {CircularDashboardProps} from "./types/props";
+
+export * from "./types/props";
+export function CircularProgressDashboard({ numerator, size, denominator, value, textStyle, strokeStyle }: CircularDashboardProps): React.ReactElement {
+  const filledSectionFieldsPercentage = useMemo(() => {
+    return value !== undefined ? value : Math.floor(((numerator ?? 0) / (denominator ?? 1)) * 100);
+  }, [numerator, denominator, value]);
+  return (
+    <div
+      style={{
+        backgroundColor: "transparent",
+        width: size,
+      }}>
+      <CircularProgressbarWithChildren
+        styles={{
+          path: {
+            stroke: strokeStyle?.color ?? colors.blue700,
+          },
+        }}
+        strokeWidth={7}
+        value={filledSectionFieldsPercentage}>
+        <div
+          style={{
+            ...(textStyle ?? {}),
+            fontSize: textStyle?.fontSize ?? typeof size === "number" ? 0.3 * (size as number) : "100%",
+            marginTop: -11,
+          }}>
+          <strong style={{ color: textStyle?.color ?? strokeStyle?.color ?? colors.blue700 }}>{filledSectionFieldsPercentage}%</strong>
+        </div>
+      </CircularProgressbarWithChildren>
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+export type CircularDashboardProps = {
+  strokeStyle?: {
+    width?: number | string;
+    color?: string;
+    [key: string]: any;
+  };
+  textStyle?: {
+    color?: string;
+    fontSize?: number | string;
+    fontWeight?: number | string;
+    [key: string]: any;
+  };
+  value?: number;
+  numerator?: number;
+  denominator?: number;
+  size: string | number;
+};

package/src/components/CustomPivotTable/components/Table/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import {DataTable} from '@dhis2/ui'
+
+
+export interface PivotTableLayoutProps {
+    scrollHeight?: string;
+    scrollWidth?: string;
+    layout?: string;
+    width?: string
+}
+
+export interface PivotTableProps {
+    children: React.ReactNode;
+    tableProps?: PivotTableLayoutProps;
+}
+
+export function PivotTable({tableProps, children}: PivotTableProps) {
+    return (
+        <DataTable {...(tableProps ?? {})} >
+            {children}
+        </DataTable>
+    )
+}

package/src/components/CustomPivotTable/components/TableBody/TableBody.module.css

@@ -0,0 +1,12 @@
+.nested-table-cell {
+    padding: 0 !important;
+}
+
+.nested-table {
+    margin: 0;
+    padding: 0;
+}
+
+.header-cell {
+    border-right: 1px solid rgb(232, 237, 242) !important;
+}

package/src/components/CustomPivotTable/components/TableBody/index.tsx

@@ -0,0 +1,96 @@
+import {Header} from "../../services/engine";
+import {isEmpty, slice} from "lodash";
+import {useCustomPivotTableEngine} from "../../state/engine";
+import {DataTableCell, DataTableRow, TableBody} from '@dhis2/ui'
+import React, {Fragment} from "react";
+import {AnalyticsItem} from "@hisptz/dhis2-utils";
+import classes from "./TableBody.module.css"
+import {useElementSize} from "usehooks-ts";
+import {DHIS2Dimension} from "../../interfaces";
+
+function DataRowRenderer({
+                             mapper,
+                             item,
+                             dimension,
+                         }: { mapper?: { [key: string]: any }; item: AnalyticsItem, dimension: DHIS2Dimension }) {
+    const engine = useCustomPivotTableEngine();
+
+    const columnMappers = engine?.columnMap;
+    const completeMapper = columnMappers?.map((map) => ({...map, ...mapper, [dimension]: item.uid}));
+    return <>
+        {
+            completeMapper?.map((mapper) => (
+                <DataTableCell key={`${Object.values(mapper).join('-')}-value`} align="center" bordered>
+                    {engine?.getValue(mapper) ?? ''}
+                </DataTableCell>
+            ))
+        }
+    </>;
+}
+
+function RowRenderer({
+                         row,
+                         index,
+                         config: {rows, columns, mapper, prevWidth, fixRowHeaders}
+                     }: { row: Header, index: number, config: { rows: Header[], columns?: Header[]; mapper?: { [key: string]: string | undefined }, prevWidth?: number; fixRowHeaders?: boolean } }): React.ReactElement | null {
+    const [cellRef, {width}] = useElementSize();
+
+    const rowSpan = slice(rows, index + 1).reduce((acc, column) => {
+        return acc * (column.items?.length ?? 1);
+    }, 1)
+    const hasSubRows = !isEmpty(rows[index + 1]);
+    const nextRow = rows[index + 1];
+
+    return (
+        <>
+
+            {
+                row?.items?.map((item) => {
+                    return (
+                        <Fragment key={`${item.name}-${row.dimension}-fragment`}>
+                            <DataTableRow key={`${item.name}-${row.dimension}-row`}>
+                                <DataTableCell ref={cellRef} fixed={fixRowHeaders} left={`${prevWidth}px`}
+                                               className={classes['header-cell']} tag="th"
+                                               bordered
+                                               rowSpan={(rowSpan + (hasSubRows ? 1 : 0)).toString()}>
+                                    {item.name}
+                                </DataTableCell>
+                                {
+                                    !hasSubRows ?
+                                        <DataRowRenderer dimension={row.dimension} mapper={mapper} item={item}/> : null
+                                }
+                            </DataTableRow>
+                            {
+                                hasSubRows ? (<RowRenderer row={nextRow} index={index + 1} config={{
+                                    rows,
+                                    columns,
+                                    prevWidth: width,
+                                    mapper: {...mapper, [row.dimension]: item.uid as unknown as string}
+                                }}/>) : null
+                            }
+                        </Fragment>
+                    )
+                })
+            }
+        </>
+    )
+
+}
+
+
+export function CustomPivotTableBody() {
+    const engine = useCustomPivotTableEngine();
+    const rows = engine?.rowHeaders;
+    const columns = engine?.columnHeaders;
+    const fixRowHeaders = engine?.fixRowHeaders;
+
+    if (!rows || isEmpty(rows)) {
+        return null;
+    }
+
+    return (
+        <TableBody>
+            <RowRenderer row={rows[0]} index={0} config={{rows, columns, fixRowHeaders}}/>
+        </TableBody>
+    )
+}

package/src/components/CustomPivotTable/components/TableHeaders/TableHeaders.module.css

@@ -0,0 +1,10 @@
+.table-header{
+    border-right: 1px solid rgb(232, 237, 242);
+}
+.table-header:last-child{
+    border-right: none;
+}
+
+.table-header > span > span{
+    justify-content: center;
+}

package/src/components/CustomPivotTable/components/TableHeaders/index.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import {useCustomPivotTableEngine} from "../../state/engine";
+import {DataTableColumnHeader, DataTableRow, TableHead} from '@dhis2/ui'
+import {isEmpty, slice, times} from "lodash";
+import {Header} from "../../services/engine";
+import classes from "./TableHeaders.module.css"
+import {useElementSize} from "usehooks-ts";
+
+function ColumnRenderer({
+                            column,
+                            index,
+                            config: {fixColumnHeaders, rowHeaders, prevHeight = 0, columns}
+                        }: { column: Header, index: number, config: { columns: Header[], rowHeaders?: Header[], prevHeight?: number; fixColumnHeaders?: boolean } }): React.ReactElement | null {
+
+    const [columnHeaderRef, {height}] = useElementSize();
+
+    if (!column) {
+        return null;
+    }
+    const colSpan = slice(columns, index + 1).reduce((acc, column) => {
+        return acc * (column.items?.length ?? 1);
+    }, 1);
+
+    const hasSubColumns = !isEmpty(columns[index + 1]);
+    const nextColumn = columns[index + 1];
+
+    const multiplicationFactor = slice(columns, 0, index).reduce((acc, column) => {
+        return acc * (column.items?.length ?? 1);
+    }, 1);
+
+    return (
+        <>
+            <DataTableRow>
+                {
+                    ((index === 0) && rowHeaders?.map((header) => {
+                        return (
+                            <DataTableColumnHeader
+                                fixed={fixColumnHeaders}
+                                top={"0"}
+                                className={classes['table-header']}
+                                rowSpan={columns.length.toString()}
+                                key={`${header.dimension}-header-column`}>
+                                {header.label ?? ""}
+                            </DataTableColumnHeader>
+                        )
+                    }))
+                }
+                {
+                    (times(multiplicationFactor, (colNo) => {
+                        return (column.items?.map((item) => (
+                            <DataTableColumnHeader
+                                fixed={fixColumnHeaders}
+                                top={`${prevHeight.toString()}px`}
+                                ref={index === 0 ? columnHeaderRef : undefined}
+                                className={classes['table-header']} align="center"
+                                colSpan={colSpan.toString()}
+                                key={`${colNo}-${item.name}-column-header`}>
+                                {item.name}
+                            </DataTableColumnHeader>
+                        )))
+                    }))
+                }
+            </DataTableRow>
+            {
+                hasSubColumns ? (<ColumnRenderer column={nextColumn} index={index + 1} config={{
+                    columns,
+                    rowHeaders,
+                    prevHeight: height,
+                    fixColumnHeaders
+                }}/>) : null
+            }
+        </>
+    )
+
+}
+
+
+export function TableHeaders() {
+    const engine = useCustomPivotTableEngine();
+    const columns = engine?.columnHeaders;
+    const rowHeaders = engine?.rowHeaders;
+    const fixColumnHeaders = engine?.fixColumnHeaders;
+
+    if (!columns || isEmpty(columns)) {
+        return null;
+    }
+
+    return (
+        <TableHead>
+            <ColumnRenderer column={columns[0]} index={0} config={{rowHeaders, columns, fixColumnHeaders}}/>
+        </TableHead>
+    )
+
+}

package/src/components/CustomPivotTable/index.tsx

@@ -0,0 +1,63 @@
+import {Analytics, LegendSet} from "@hisptz/dhis2-utils";
+import {CustomPivotTableEngine} from "./services/engine";
+import React, {useMemo} from "react";
+import {CustomPivotTableEngineProvider} from "./state/engine";
+import {PivotTable} from "./components/Table";
+import {TableHeaders} from "./components/TableHeaders";
+import {CustomPivotTableBody} from "./components/TableBody";
+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?: {
+        scrollHeight?: string;
+        scrollWidth?: string;
+        layout?: string;
+        width?: string
+    };
+    config: {
+        layout: {
+            columns: {
+                dimension: DHIS2Dimension,
+                label?: string;
+            }[];
+            rows: {
+                dimension: DHIS2Dimension,
+                label?: string;
+            }[];
+            filter?: {
+                dimension: DHIS2Dimension,
+                label?: string;
+            }[]
+        },
+        options?: CustomPivotTableOptions
+    }
+}
+
+
+export function CustomPivotTable({analytics, config, tableProps}: CustomPivotTableProps) {
+    const engine = useMemo(() => new CustomPivotTableEngine({analytics, config}), [analytics, config]);
+
+    return (
+        <CustomPivotTableEngineProvider engine={engine}>
+            <PivotTable tableProps={tableProps}>
+                <TableHeaders/>
+                <CustomPivotTableBody/>
+            </PivotTable>
+        </CustomPivotTableEngineProvider>
+    )
+
+}

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

@@ -0,0 +1 @@
+export type DHIS2Dimension = "ou" | "pe" | "dx" | "co" | string;

package/src/components/CustomPivotTable/services/engine.ts

@@ -0,0 +1,102 @@
+import {Analytics, AnalyticsItem, LegendSet} from "@hisptz/dhis2-utils";
+import {compact, findIndex, intersection, times, zip} from "lodash";
+import {DHIS2Dimension} from "../interfaces";
+
+
+export interface EngineConfig {
+    layout: {
+        columns: { dimension: DHIS2Dimension, label?: string }[];
+        rows: { dimension: DHIS2Dimension, label?: string }[]
+        filter?: { dimension: DHIS2Dimension, label?: string }[]
+    }
+    options?: {
+        legendSets?: LegendSet[],
+        hideEmptyColumns?: boolean,
+        hideEmptyRows?: boolean,
+        showRowTotals?: boolean,
+        showColumnTotals?: boolean,
+        showRowSubtotals?: boolean,
+        showColumnSubtotals?: boolean,
+        fixColumnHeaders?: boolean,
+        fixRowHeaders?: boolean,
+        [key: string]: any
+    }
+}
+
+export interface Header {
+    dimension: DHIS2Dimension;
+    label?: string;
+    items?: AnalyticsItem[]
+}
+
+export class CustomPivotTableEngine {
+    analyticsData: Analytics;
+    valueIndex: number;
+    config: EngineConfig;
+    rowHeaders?: Header[];
+    columnHeaders?: Header[];
+
+    columnMap?: { [key: string]: any }[]
+
+    constructor({analytics, config}: { analytics: Analytics, config: EngineConfig }) {
+        this.config = config;
+        this.analyticsData = analytics;
+        this.valueIndex = findIndex(this.analyticsData.headers, ['name', 'value'])
+        this.getHeaders();
+        this.getColumnMap();
+    }
+
+    get fixColumnHeaders() {
+        return this.config.options?.fixColumnHeaders ?? true;
+    }
+
+    get fixRowHeaders() {
+        return this.config.options?.fixRowHeaders ?? true;
+    }
+
+    getDimensionItems(dimension: DHIS2Dimension) {
+        return this.analyticsData.metaData?.dimensions[dimension] ?? [];
+    }
+
+    getItem(id: string) {
+        return this.analyticsData.metaData?.items[id as any]
+    }
+
+
+    getValue(mapper: { [key: string]: any }) {
+        const dimensions = Object.values(mapper);
+        const data = this.analyticsData.rows?.filter((row) => intersection(row, dimensions).length >= dimensions.length);
+        return data?.reduce((acc, row) => {
+            return acc + parseFloat(row[this.valueIndex])
+        }, 0)
+    }
+
+    getHeaders() {
+        this.rowHeaders = this.config.layout.rows.map((rowConfig) => {
+            return {
+                ...rowConfig,
+                items: compact(this.getDimensionItems(rowConfig.dimension).map((itemId: string) => this.getItem(itemId)))
+            }
+        });
+        this.columnHeaders = this.config.layout.columns.map((columnConfig) => {
+            return {
+                ...columnConfig,
+                items: compact(this.getDimensionItems(columnConfig.dimension).map((itemId: string) => this.getItem(itemId)))
+            }
+        });
+    }
+
+
+    getColumnMap() {
+        const columns = this.columnHeaders;
+        const sanitizedColumns = compact(columns?.map((column) => (column.items?.map(item => ({[column.dimension]: item.uid}))))) ?? [];
+        const size = sanitizedColumns.reduce((acc, items) => {
+            return acc * (items?.length ?? 1);
+        }, 1);
+        const standardiseColumns = sanitizedColumns.map(items => ([...(times(size / items.length, () => items).flat())]));
+        this.columnMap = compact(zip(...standardiseColumns).map(arr => arr.reduce((obj, value) => {
+            return {...obj, ...value}
+        })));
+    }
+
+}

package/src/components/CustomPivotTable/state/engine.tsx

@@ -0,0 +1,22 @@
+import React, {createContext, ReactNode, useContext} from "react";
+import {CustomPivotTableEngine} from "../services/engine";
+
+
+const CustomPivotTableEngineContext = createContext<CustomPivotTableEngine | null>(null);
+
+
+export function useCustomPivotTableEngine() {
+    return useContext(CustomPivotTableEngineContext)
+}
+
+export function CustomPivotTableEngineProvider({
+                                                   children,
+                                                   engine
+                                               }: { children: ReactNode, engine: CustomPivotTableEngine }) {
+
+    return (
+        <CustomPivotTableEngineContext.Provider value={engine}>
+            {children}
+        </CustomPivotTableEngineContext.Provider>
+    )
+}