@hisptz/dhis2-analytics 1.0.51 → 1.0.52

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

@@ -1,65 +0,0 @@
-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

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

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

@@ -1,35 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,48 +0,0 @@
-
-.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: " ↑";
-}

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

@@ -1,48 +0,0 @@
-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>;
-};