@hisptz/dhis2-analytics 1.0.5 → 1.0.6

package/src/components/ChartAnalytics/ChartAnalytics.stories.tsx

@@ -1,250 +0,0 @@
-import {CssReset} from "@dhis2/ui";
-import type {Story} from "@storybook/react";
-import HighCharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-import React, {useState} from "react";
-import ChartDownloadMenu from "./components/DownloadMenu";
-import columnData from "./data/column-data.json";
-import complexMultiSeriesData from "./data/complex-multi-series-data.json";
-import multiSeriesData from "./data/multi-series-data.json";
-import pieData from "./data/pie-data.json";
-import stackedChartData from "./data/stacked-chart-data.json";
-import {setupHighchartsModules} from "./services/export";
-import {ChartAnalyticsProps} from "./types/props";
-import ChartAnalytics from ".";
-
-const Template: Story<ChartAnalyticsProps> = (args) => <ChartAnalytics {...args} />;
-setupHighchartsModules(HighCharts);
-
-export const Column = Template.bind({});
-Column.args = {
-  analytics: columnData as any,
-  config: {
-    layout: {
-      series: ["dx"],
-      category: ["ou"],
-      filter: ["pe"],
-    },
-    type: "column",
-    height: 500,
-    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
-  },
-};
-
-export const MultipleColumns = Template.bind({});
-MultipleColumns.args = {
-  analytics: multiSeriesData as any,
-  config: {
-    layout: {
-      series: ["ou"],
-      category: ["pe"],
-      filter: ["dx"],
-    },
-    type: "column",
-    height: 1000,
-    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
-  },
-};
-
-export const StackedColumn = Template.bind({});
-StackedColumn.args = {
-  analytics: stackedChartData as any,
-  config: {
-    layout: {
-      series: ["ou"],
-      category: ["pe"],
-      filter: ["dx"],
-    },
-    type: "stacked-column",
-    height: 1000,
-    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
-  },
-};
-
-export const Line = Template.bind({});
-Line.args = {
-  analytics: columnData as any,
-  config: {
-    layout: {
-      series: ["dx"],
-      category: ["ou"],
-      filter: ["pe"],
-    },
-    type: "line",
-    height: 1000,
-    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
-  },
-};
-
-export const MultipleLines = Template.bind({});
-MultipleLines.args = {
-  analytics: multiSeriesData as any,
-  config: {
-    layout: {
-      series: ["ou"],
-      category: ["pe"],
-      filter: ["dx"],
-    },
-    type: "line",
-    height: 500,
-    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
-  },
-};
-
-export const PieChart = Template.bind({});
-PieChart.args = {
-  analytics: pieData as any,
-  config: {
-    layout: {
-      series: ["dx"],
-      category: [],
-      filter: ["dx", "pe"],
-    },
-    type: "pie",
-    height: 500,
-    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c4255", "#a6c96a"],
-  },
-};
-
-export const MultiSeries = Template.bind({});
-MultiSeries.args = {
-  analytics: multiSeriesData as any,
-  config: {
-    layout: {
-      series: ["ou"],
-      category: ["pe"],
-      filter: ["dx"],
-    },
-    type: "multi-series",
-    height: 500,
-    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
-    multiSeries: {
-      series: [
-        {
-          id: "qhqAxPSTUXp",
-          as: "column",
-          yAxis: 0,
-        },
-        {
-          id: "Vth0fbpFcsO",
-          as: "line",
-          cumulative: true,
-          yAxis: 1,
-        },
-      ],
-      yAxes: [
-        {
-          id: "yAxis1",
-          title: {
-            text: "Koinandugu",
-          },
-          labels: {
-            format: "{value}",
-          },
-        },
-        {
-          id: "yAxis2",
-          title: {
-            text: "Kono",
-          },
-          labels: {
-            format: "{value}",
-          },
-          opposite: true,
-        },
-      ],
-      target: {
-        id: "",
-        styles: {
-          color: "blue",
-        },
-        value: 45,
-        label: {
-          text: "Target",
-          textAlign: "center",
-          verticalAlign: "middle",
-        },
-      },
-    },
-  },
-};
-
-export const ComplexMultiSeries = Template.bind({});
-ComplexMultiSeries.args = {
-  analytics: complexMultiSeriesData as any,
-  config: {
-    layout: {
-      series: ["dx"],
-      category: ["pe"],
-      filter: ["ou"],
-    },
-    type: "multi-series",
-    height: 500,
-    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
-    multiSeries: {
-      series: [
-        {
-          id: "QQkOAJFukyY",
-          as: "column",
-          yAxis: 0,
-        },
-        {
-          id: "QQkOAJFukyY",
-          as: "line",
-          cumulative: true,
-          yAxis: 1,
-        },
-      ],
-      yAxes: [
-        {
-          id: "yAxis1",
-          title: {
-            text: "Koinandugu",
-          },
-          labels: {
-            format: "{value}",
-          },
-        },
-        {
-          id: "yAxis2",
-          title: {
-            text: "Kono",
-          },
-          labels: {
-            format: "{value}",
-          },
-          opposite: true,
-        },
-      ],
-      target: {
-        id: "",
-        styles: {
-          color: "blue",
-        },
-        value: 45,
-        label: {
-          text: "Target",
-          textAlign: "center",
-          verticalAlign: "middle",
-        },
-      },
-    },
-  },
-};
-
-export default {
-  title: "Components/Chart Analytics",
-  component: ChartAnalytics,
-  decorators: [
-    (ChartStory: any) => {
-      const [chartRef, setChartRef] = useState<HighchartsReact.RefObject | null>(null);
-      return (
-        <div style={{ width: 1000, height: "100%", display: "flex", gap: 8, flexDirection: "column" }}>
-          <CssReset />
-          <div style={{ width: "100%", display: "flex", justifyContent: "end" }}>{<ChartDownloadMenu chartRef={chartRef} />}</div>
-          <ChartStory ref={setChartRef} />
-        </div>
-      );
-    },
-  ],
-};

package/src/components/ChartAnalytics/ChartAnalytics.test.tsx

@@ -1,51 +0,0 @@
-import {mount} from "@cypress/react";
-import HighCharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-import React, {useState} from "react";
-import ChartDownloadMenu from "./components/DownloadMenu";
-import columnData from "./data/column-data.json";
-import {setupHighchartsModules} from "./services/export";
-import ChartAnalytics from ".";
-
-const props: any = {
-  analytics: columnData as any,
-  config: {
-    layout: {
-      series: ["dx"],
-      category: ["ou"],
-      filter: ["pe"],
-    },
-    type: "column",
-    height: 500,
-    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
-  },
-};
-
-function TestComponent() {
-  return <ChartAnalytics {...props} />;
-}
-
-function ExportTestComponent() {
-  const [chartRef, setChartRef] = useState<HighchartsReact.RefObject | null>(null);
-
-  return (
-    <div style={{ display: "flex", flexDirection: "column" }}>
-      <div>
-        <ChartDownloadMenu chartRef={chartRef} />
-      </div>
-      <ChartAnalytics {...props} ref={setChartRef} />
-    </div>
-  );
-}
-
-describe("Chart Component Tests", () => {
-  setupHighchartsModules(HighCharts);
-
-  it("Mounts without errors", () => {
-    mount(<TestComponent />);
-  });
-
-  it("Can be exported as PDF", () => {
-    mount(<ExportTestComponent />);
-  });
-});

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/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,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: "" },
-    };
-  }
-}