@hisptz/dhis2-analytics 1.0.5 → 1.0.7

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

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

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

@@ -1,67 +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";
-
-function ChartDownloadMenu({
-  chartRef,
-  exclude,
-  icon,
-}: {
-  chartRef: HighchartsReact.RefObject | null;
-  exclude?: ChartExportMenuItem[];
-  icon?: React.ReactNode;
-}) {
-  const menuButtonRef = useRef<HTMLButtonElement | null>(null);
-  const [menuRef, setMenuRef] = useState<HTMLButtonElement | 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} />}
-    </>
-  );
-}
-
-export default ChartDownloadMenu;

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,23 +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 ChartDownloadMenu from "./components/DownloadMenu";
-import {useChart} from "./hooks/useChart";
-import {ChartAnalyticsProps} from "./types/props";
-import "./styles/custom-highchart.css";
-
-export * from "./services/export";
-export { ChartDownloadMenu };
-
-function ChartAnalytics({ 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 default forwardRef(ChartAnalytics);

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

@@ -1,50 +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,78 +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 {
-    return {
-      renderTo: this.id,
-      zoomType: "xy",
-      type: this.getHighchartsType(),
-      height: this.config?.height,
-      styledMode: false,
-    };
-  }
-
-  getOptions(): HighCharts.Options {
-    return {
-      yAxis: this.getYAxis(),
-      chart: this.getChartConfig(),
-      colors: this.config?.colors ?? ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
-      series: this.getSeries(),
-      plotOptions: this.getPlotOptions(),
-      title: { text: "" },
-      xAxis: this.getXAxis(),
-      exporting: this.getExporting(),
-      legend: { enabled: true },
-      credits: { enabled: false },
-      ...(this.config?.highChartOverrides ?? {}),
-    };
-  }
-
-  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/types/props.tsx

@@ -1,48 +0,0 @@
-import type {Analytics} from "@hisptz/dhis2-utils";
-import {DashStyleValue, YAxisOptions, YAxisPlotLinesLabelOptions} from "highcharts";
-
-export type ChartType = "column" | "pie" | "stacked-column" | "line" | "multi-series";
-
-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?: Record<string, any>;
-  multiSeries?: MultiSeriesConfig;
-};
-
-export type ChartAnalyticsProps = {
-  analytics: Analytics;
-  config: ChartConfig;
-  containerProps?: Record<string, any>;
-};