@hisptz/dhis2-analytics 1.0.48 → 1.0.51

package/src/components/ChartAnalytics/components/DownloadMenu/components/Menu.tsx

@@ -0,0 +1,48 @@
+import {FlyoutMenu, Menu, MenuDivider, MenuItem, Popover} from "@dhis2/ui";
+import {isEmpty, map} from "lodash";
+import React from "react";
+import {chartMenuSections} from "../constants/menu";
+import {ChartExportMenuItem} from "../interfaces/menu";
+
+export function ChartMenu({
+  menuRef,
+  onClick,
+  onClose,
+  exclude = [],
+}: {
+  menuRef: HTMLDivElement;
+  onClick: (action: string) => void;
+  onClose: () => void;
+  exclude?: ChartExportMenuItem[];
+}) {
+  const onMenuClick = (action: string) => () => {
+    onClick(action);
+    onClose();
+  };
+
+  const menuSections = map(chartMenuSections, (section) => {
+    return {
+      ...section,
+      menuItems: section.menuItems.filter((item: any) => !exclude.includes(item.name)),
+    };
+  }).filter((section) => !isEmpty(section.menuItems));
+
+  return (
+    <Popover onClickOutside={onClose} onClose={onClose} reference={menuRef}>
+      <FlyoutMenu>
+        <Menu>
+          {menuSections?.map((section, index) => {
+            return (
+              <>
+                {section.menuItems?.map(({ name, label }) => {
+                  return <MenuItem key={`${name}-menu-item`} dataTest={`download-${name}`} label={label} onClick={onMenuClick(name)} />;
+                })}
+                {index !== menuSections.length - 1 && <MenuDivider />}
+              </>
+            );
+          })}
+        </Menu>
+      </FlyoutMenu>
+    </Popover>
+  );
+}

package/src/components/ChartAnalytics/components/DownloadMenu/constants/menu.ts

@@ -0,0 +1,38 @@
+import i18n from "@dhis2/d2-i18n";
+
+export const chartMenuSections = [
+  {
+    name: "download",
+    menuItems: [
+      {
+        name: "png",
+        label: i18n.t("Download PNG"),
+      },
+      {
+        name: "jpeg",
+        label: i18n.t("Download JPEG"),
+      },
+      {
+        name: "svg",
+        label: i18n.t("Download SVG"),
+      },
+      {
+        name: "pdf",
+        label: i18n.t("Download PDF"),
+      },
+    ],
+  },
+  {
+    name: "view",
+    menuItems: [
+      {
+        name: "table",
+        label: i18n.t("View as table"),
+      },
+      {
+        name: "full-screen",
+        label: i18n.t("View full screen"),
+      },
+    ],
+  },
+];

package/src/components/ChartAnalytics/components/DownloadMenu/index.tsx

@@ -0,0 +1,65 @@
+import {IconMore24} from "@dhis2/ui";
+import HighchartsReact from "highcharts-react-official";
+import React, {useRef, useState} from "react";
+import {onCSVDownload, onFullScreenView, onImageDownload, onPDFDownload, onViewAsTable} from "../../services/export";
+import {ChartMenu} from "./components/Menu";
+import {ChartExportMenuItem} from "./interfaces/menu";
+
+export function ChartDownloadMenu({
+  chartRef,
+  exclude,
+  icon,
+}: {
+  chartRef: HighchartsReact.RefObject | null;
+  exclude?: ChartExportMenuItem[];
+  icon?: React.ReactNode;
+}) {
+  const menuButtonRef = useRef<HTMLDivElement | null>(null);
+  const [menuRef, setMenuRef] = useState<HTMLDivElement | null>(null);
+  const toggleMenu = () => {
+    if (menuRef === null) {
+      setMenuRef(menuButtonRef.current);
+    } else {
+      setMenuRef(null);
+    }
+  };
+
+  const chart = chartRef;
+
+  const onMenuClick = (action: string) => {
+    if (chart) {
+      switch (action) {
+        case "png":
+          onImageDownload(chart, "png");
+          break;
+        case "jpeg":
+          onImageDownload(chart, "jpeg");
+          break;
+        case "svg":
+          onImageDownload(chart, "svg+xml");
+          break;
+        case "csv":
+          onCSVDownload(chart);
+          break;
+        case "pdf":
+          onPDFDownload(chart);
+          break;
+        case "table":
+          onViewAsTable(chart, true);
+          break;
+        case "full-screen":
+          onFullScreenView(chart);
+          break;
+      }
+    }
+  };
+
+  return (
+    <>
+      <div onClick={toggleMenu} ref={menuButtonRef}>
+        {icon ?? <IconMore24 />}
+      </div>
+      {menuRef && <ChartMenu exclude={exclude} onClick={onMenuClick} onClose={toggleMenu} menuRef={menuRef} />}
+    </>
+  );
+}

package/src/components/ChartAnalytics/components/DownloadMenu/interfaces/menu.ts

@@ -0,0 +1 @@
+export type ChartExportMenuItem = "png" | "jpeg" | "svg" | "csv" | "pdf" | "table" | "full-screen";

package/src/components/ChartAnalytics/hooks/useChart.ts

@@ -0,0 +1,35 @@
+import type {Analytics} from "@hisptz/dhis2-utils";
+import HighCharts from "highcharts";
+import {useCallback, useEffect, useState} from "react";
+import {DHIS2Chart} from "../models";
+import {ChartConfig, ChartType} from "../types/props";
+import {getChartInstance, updateLayout} from "../utils/chart";
+
+export function useChart({ id, analytics, config }: { id: string; analytics: Analytics; config: ChartConfig }): {
+  chart?: HighCharts.Options;
+  changeChartType: (type: ChartType) => void;
+} {
+  const [chart, setChart] = useState<HighCharts.Options | undefined>(getChartInstance(id, analytics, config).getOptions());
+
+  const changeChartType = useCallback(
+    (type: ChartType) => {
+      const updatedLayout = updateLayout(config, { type });
+      const updatedConfig = { ...config, layout: updatedLayout, type };
+      const chartInstance: DHIS2Chart = getChartInstance(id, analytics, updatedConfig);
+      setChart(chartInstance.getOptions());
+    },
+    [config, id, analytics]
+  );
+
+  useEffect(() => {
+    if (analytics && config) {
+      const chartInstance: DHIS2Chart = getChartInstance(id, analytics, config);
+      setChart(chartInstance.getOptions());
+    }
+  }, [analytics, config, id]);
+
+  return {
+    chart,
+    changeChartType,
+  };
+}

package/src/components/ChartAnalytics/index.tsx

@@ -0,0 +1,28 @@
+import {uid} from "@hisptz/dhis2-utils";
+import HighCharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import React, {forwardRef, useRef} from "react";
+import {useChart} from "./hooks/useChart";
+import "./styles/custom-highchart.css";
+import {ChartAnalyticsProps} from "./types/props";
+
+export * from "./services/export";
+export * from "./types/props"
+export * from "./components/DownloadMenu"
+
+function ChartAnalyticsComponent({
+                                     analytics,
+                                     config,
+                                     containerProps
+                                 }: ChartAnalyticsProps, ref: React.ForwardedRef<HighchartsReact.RefObject>) {
+    const id = useRef(`${uid()}-chart-item`);
+    const {chart} = useChart({id: id.current, analytics, config});
+
+    if (!chart) {
+        return null;
+    }
+    return <HighchartsReact immutable ref={ref} containerProps={{id: id.current, ...(containerProps ?? {})}}
+                            highcharts={HighCharts} options={{...chart}}/>;
+}
+
+export const ChartAnalytics: React.FC<ChartAnalyticsProps> = forwardRef(ChartAnalyticsComponent);

package/src/components/ChartAnalytics/models/bar.ts

@@ -0,0 +1,20 @@
+import {PlotOptions} from "highcharts";
+import {DHIS2ColumnChart} from "./column";
+
+export class DHIS2BarChart extends DHIS2ColumnChart {
+    getHighchartsType(): string {
+        return "bar";
+    }
+
+}
+
+export class DHIS2StackedBarChart extends DHIS2BarChart {
+    getPlotOptions(): PlotOptions {
+        return {
+            column: {
+                stacking: "normal",
+                ...super.getPlotOptions().column,
+            },
+        };
+    }
+}

package/src/components/ChartAnalytics/models/column.ts

@@ -0,0 +1,52 @@
+import {PlotOptions, SeriesOptionsType, XAxisOptions} from "highcharts";
+import {getAllCategories, getPointSeries} from "../utils/chart";
+import {DHIS2Chart} from "./index";
+
+export class DHIS2ColumnChart extends DHIS2Chart {
+  getCategories(): any[] | undefined {
+    return undefined;
+  }
+
+  getHighchartsType(): string {
+    return "column";
+  }
+
+  getPlotOptions(): PlotOptions {
+    return {
+      column: {
+        dataLabels: {
+          enabled: true,
+        },
+      },
+    };
+  }
+
+  getSeries(): SeriesOptionsType[] {
+    return getPointSeries(this.analytics, this.config, "column");
+  }
+
+  getXAxis(): XAxisOptions | undefined {
+    return {
+      type: "category",
+      categories: getAllCategories(this.analytics, this.config),
+      crosshair: true,
+      labels: {
+        enabled: true,
+      },
+      title: { text: "" },
+    };
+  }
+}
+
+export class DHIS2StackedColumnChart extends DHIS2ColumnChart {
+  getPlotOptions(): PlotOptions {
+    return {
+      column: {
+        stacking: "normal",
+        ...super.getPlotOptions().column,
+      },
+    };
+  }
+}
+
+

package/src/components/ChartAnalytics/models/index.ts

@@ -0,0 +1,111 @@
+import type {Analytics} from "@hisptz/dhis2-utils";
+import HighCharts from "highcharts";
+import {ChartConfig} from "../types/props";
+
+export abstract class DHIS2Chart {
+    id: string;
+    analytics: Analytics;
+    config: ChartConfig;
+
+    constructor(id: string, analytics: Analytics, config: ChartConfig) {
+        this.id = id;
+        this.analytics = analytics;
+        this.config = config;
+    }
+
+    abstract getHighchartsType(): string;
+
+    getChartConfig(): HighCharts.ChartOptions & any {
+        return {
+            renderTo: this.id,
+            zoomType: "xy",
+            type: this.getHighchartsType(),
+            height: this.config?.height,
+            styledMode: false,
+        };
+    }
+
+    getOptions(): HighCharts.Options {
+
+        const options = {
+            yAxis: this.getYAxis(),
+            chart: this.getChartConfig(),
+            colors: this.config?.colors ?? [
+                '#a8bf24',
+                '#518cc3',
+                '#d74554',
+                '#ff9e21',
+                '#968f8f',
+                '#ba3ba1',
+                '#ffda54',
+                '#45beae',
+                '#b98037',
+                '#676767',
+                '#6b2dd4',
+                '#47792c',
+                '#fcbdbd',
+                '#830000',
+                '#a5ffc0',
+                '#000078',
+                '#817c00',
+                '#bdf023',
+                '#fffac4',
+            ],
+            series: this.getSeries(),
+            plotOptions: this.getPlotOptions(),
+            title: {text: ""},
+            xAxis: this.getXAxis(),
+            exporting: this.getExporting(),
+            legend: {enabled: true},
+            credits: {enabled: false},
+        };
+
+        let overrides = {};
+
+        if (this.config?.highChartOverrides) {
+            overrides = {
+                ...((typeof this.config?.highChartOverrides === "object" ? this.config?.highChartOverrides ?? {} : this.config?.highChartOverrides(options)))
+            }
+        }
+
+        return {
+            ...options,
+            ...overrides
+        }
+    }
+
+    abstract getSeries(): HighCharts.SeriesOptionsType[];
+
+    abstract getPlotOptions(): HighCharts.PlotOptions;
+
+    abstract getXAxis(): HighCharts.XAxisOptions | undefined;
+
+    getYAxis(): HighCharts.YAxisOptions[] {
+        return [
+            {
+                title: {
+                    text: "",
+                    style: {color: "#000000", fontWeight: "normal", fontSize: "14px"},
+                },
+                labels: {enabled: true, style: {color: "#000000", fontWeight: "normal", fontSize: "14px"}},
+                plotLines: [
+                    {color: "#000000", dashStyle: "Solid", width: 2, zIndex: 1000, label: {text: ""}},
+                    {color: "#bbbbbb", dashStyle: "Solid", zIndex: 1000, width: 2, label: {text: ""}},
+                ],
+            },
+        ];
+    }
+
+    getExporting(): HighCharts.ExportingOptions {
+        const name = this.config?.name ?? "chart";
+        return {
+            filename: `${name}`,
+            sourceWidth: 1200,
+            buttons: {
+                contextButton: {
+                    enabled: false,
+                },
+            },
+        };
+    }
+}

package/src/components/ChartAnalytics/models/line.ts

@@ -0,0 +1,31 @@
+import {PlotOptions, SeriesOptionsType, XAxisOptions} from "highcharts";
+import {getAllCategories, getPointSeries} from "../utils/chart";
+import {DHIS2Chart} from "./index";
+
+export class DHIS2LineChart extends DHIS2Chart {
+  getHighchartsType(): string {
+    return "line";
+  }
+
+  getPlotOptions(): PlotOptions {
+    return {
+      line: {},
+    };
+  }
+
+  getSeries(): SeriesOptionsType[] {
+    return getPointSeries(this.analytics, this.config, "line");
+  }
+
+  getXAxis(): XAxisOptions | undefined {
+    return {
+      type: "category",
+      categories: getAllCategories(this.analytics, this.config),
+      crosshair: true,
+      labels: {
+        enabled: true,
+      },
+      title: { text: "" },
+    };
+  }
+}

package/src/components/ChartAnalytics/models/multi-series.ts

@@ -0,0 +1,115 @@
+import {PlotOptions, SeriesOptionsType, XAxisOptions, YAxisOptions} from "highcharts";
+import {compact, head} from "lodash";
+import {MultiSeriesConfig} from "../types/props";
+import {getAllCategories, getDimensionHeaderIndex} from "../utils/chart";
+import {DHIS2Chart} from "./index";
+
+export class DHIS2MultiSeriesChart extends DHIS2Chart {
+  getHighchartsType(): string {
+    return "";
+  }
+
+  getPlotOptions(): PlotOptions {
+    return {
+      column: {},
+      line: {},
+    };
+  }
+
+  getSeries(): SeriesOptionsType[] {
+    const analytics = this.analytics;
+    const config = this.config;
+
+    const categoryDimension = head(config.layout.category);
+    const seriesConfig: MultiSeriesConfig | undefined = this.config.multiSeries;
+
+    const categoryIndex = getDimensionHeaderIndex(analytics.headers ?? [], categoryDimension ?? "");
+    const seriesIndex = getDimensionHeaderIndex(analytics.headers ?? [], head(config.layout.series) ?? "");
+    const valueIndex = getDimensionHeaderIndex(analytics.headers ?? [], "value");
+
+    if (!categoryDimension) {
+      throw new Error("At least one category dimension is required");
+    }
+
+    if (!seriesConfig) {
+      throw new Error("MultiSeries config is required for chart type multi-series");
+    }
+
+    return compact(
+      seriesConfig?.series?.map(({ id, as, cumulative, yAxis }) => {
+        const dataItem = analytics.metaData?.items[id as any];
+        const categoryItems = analytics.metaData?.dimensions[categoryDimension as "dx" | "ou" | "pe"];
+
+        const data = categoryItems?.map((item: string) => {
+          const row = analytics.rows?.find((row: any) => row[categoryIndex] === item && row[seriesIndex] === id);
+          return row?.[valueIndex] ? parseFloat(row?.[valueIndex]) : 0;
+        });
+
+        let cumulativeData: number[] = [];
+
+        if (cumulative) {
+          cumulativeData =
+            data?.reduce((acc, curr, index) => {
+              if (index === 0) {
+                return [...acc, curr];
+              }
+              return [...acc, acc[index - 1] + curr];
+            }, [] as number[]) ?? [];
+        }
+
+        return {
+          name: dataItem?.name,
+          data: cumulative ? cumulativeData : data,
+          type: as,
+          yAxis: yAxis ?? 0,
+        };
+      })
+    ) as SeriesOptionsType[];
+  }
+
+  getXAxis(): XAxisOptions | undefined {
+    return {
+      type: "category",
+      categories: getAllCategories(this.analytics, this.config),
+      crosshair: true,
+      labels: {
+        enabled: true,
+      },
+      title: { text: "" },
+    };
+  }
+
+  getYAxis(): YAxisOptions[] {
+    let yAxes: YAxisOptions[] = [];
+
+    if (this.config.multiSeries?.yAxes) {
+      yAxes = this.config.multiSeries?.yAxes;
+    } else {
+      yAxes = super.getYAxis();
+    }
+
+    if (!this.config.multiSeries?.target) {
+      return yAxes;
+    }
+
+    const { value, styles, label } = this.config.multiSeries?.target ?? {};
+
+    return [
+      {
+        ...yAxes[0],
+        plotLines: [
+          ...(yAxes[0].plotLines ?? []),
+          {
+            color: styles?.color ?? "#00FF00",
+            dashStyle: styles?.dashStyle ?? "Solid",
+            value,
+            width: styles?.width ?? 2,
+            zIndex: styles?.zIndex ?? 1000,
+            label: label,
+          },
+        ],
+      },
+      ...yAxes.slice(1),
+    ];
+  }
+}

package/src/components/ChartAnalytics/models/pie.ts

@@ -0,0 +1,54 @@
+import {PlotOptions, SeriesOptionsType, XAxisOptions} from "highcharts";
+import {head} from "lodash";
+import {DHIS2Chart} from "./index";
+
+export class DHIS2PieChart extends DHIS2Chart {
+  getHighchartsType(): string {
+    return "pie";
+  }
+
+  getPlotOptions(): PlotOptions {
+    return {
+      pie: {
+        allowPointSelect: true,
+        cursor: "pointer",
+        dataLabels: {
+          enabled: true,
+          format: "<b>{point.name}</b>: {point.percentage:.1f} %",
+        },
+      },
+    };
+  }
+
+  getSeries(): SeriesOptionsType[] {
+    const analytics = this.analytics;
+    const config = this.config;
+    const seriesDimension = head(config.layout.series);
+    const seriesIndex = analytics?.headers?.findIndex((h) => h.name === seriesDimension) ?? -1;
+    const valueIndex = analytics?.headers?.findIndex((h) => h.name === "value") ?? -1;
+
+    if (!seriesDimension) {
+      throw new Error("Pie chart must have a series dimension");
+    }
+    const seriesValues = analytics.metaData?.dimensions?.[seriesDimension as "dx" | "ou" | "pe"];
+
+    return [
+      {
+        id: seriesDimension ?? "",
+        name: analytics.metaData?.items?.[seriesDimension as any]?.name ?? "",
+        data: seriesValues?.map((value: string) => {
+          const row = analytics?.rows?.find((row: any) => row[seriesIndex] === value);
+
+          return {
+            name: analytics.metaData?.items?.[value as any]?.name,
+            y: row?.[valueIndex] ? parseFloat(row?.[valueIndex] ?? "") : 0,
+          };
+        }),
+      } as SeriesOptionsType,
+    ];
+  }
+
+  getXAxis(): XAxisOptions | undefined {
+    return undefined;
+  }
+}

package/src/components/ChartAnalytics/services/export.ts

@@ -0,0 +1,38 @@
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import HighChartsExportCSV from "highcharts/modules/export-data";
+import HighChartsExport from "highcharts/modules/exporting";
+import HighChartsFullScreen from "highcharts/modules/full-screen";
+
+export function setupHighchartsModules(highcharts: typeof Highcharts) {
+  HighChartsExport(highcharts);
+  HighChartsExportCSV(highcharts);
+  HighChartsFullScreen(highcharts);
+}
+
+export function onFullScreenView(chartRef: HighchartsReact.RefObject, options?: Highcharts.Options) {
+  chartRef?.chart?.fullscreen.toggle();
+}
+
+export function onPDFDownload(chartRef: HighchartsReact.RefObject, options?: Highcharts.Options) {
+  chartRef?.chart.exportChart({ type: "application/pdf" }, options ?? {});
+}
+
+export function onCSVDownload(chartRef: HighchartsReact.RefObject, options?: Highcharts.Options) {
+  chartRef?.chart.downloadCSV();
+}
+
+export const onImageDownload = (chartRef: HighchartsReact.RefObject, type: "png" | "svg+xml" | "jpeg", options?: Highcharts.Options) => {
+  chartRef?.chart.exportChart({ type: `image/${type}` }, options ?? {});
+};
+
+export const onViewAsTable = (chartRef: HighchartsReact.RefObject, show: boolean) => {
+  const options = chartRef?.chart.options;
+  chartRef?.chart?.update({
+    ...options,
+    exporting: {
+      ...options?.exporting,
+      showTable: show,
+    },
+  });
+};

package/src/components/ChartAnalytics/styles/custom-highchart.css

@@ -0,0 +1,48 @@
+
+.highcharts-data-table table {
+    border: 1px solid rgb(232, 237, 242);
+    text-align: left;
+    min-width: 100%;
+    border-collapse: collapse;
+    vertical-align: top;
+}
+
+.highcharts-data-table td,
+.highcharts-data-table th,
+.highcharts-data-table caption {
+    font-size: 14px;
+    line-height: 16px;
+    padding: 8px 6px;
+    height: 32px;
+    border-bottom: 1px solid rgb(232, 237, 242);
+}
+
+.highcharts-data-table thead tr {
+    background: transparent;
+}
+
+.highcharts-data-table tr:nth-child(even) {
+    background: rgb(251, 252, 253);
+}
+
+.highcharts-data-table tr {
+    cursor: pointer;
+}
+
+.highcharts-data-table tr:hover {
+    background: rgb(251, 252, 253);
+}
+
+.highcharts-data-table caption {
+    border-bottom: none;
+    font-size: 1.1em;
+    font-weight: bold;
+}
+
+.highcharts-sort-ascending::after {
+    content: " ↓";
+}
+
+.highcharts-sort-descending::after {
+    content: " ↑";
+}