@hisptz/dhis2-analytics 1.0.0

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: " ↑";
+}

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

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

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

@@ -0,0 +1,123 @@
+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";
+
+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 "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.stories.tsx

@@ -0,0 +1,41 @@
+import type {Story} from "@storybook/react";
+import React from "react";
+import {CircularDashboardProps} from "./types/props";
+import CircularProgressDashboard from ".";
+
+const Template: Story<CircularDashboardProps> = (args) => <CircularProgressDashboard {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  numerator: 7,
+  denominator: 10,
+  size: 500,
+};
+
+export const WithStrokeStyling = Template.bind({});
+WithStrokeStyling.args = {
+  numerator: 7,
+  denominator: 10,
+  size: 500,
+  strokeStyle: {
+    width: "10%",
+    color: "red",
+  },
+};
+
+export const WithTextStyling = Template.bind({});
+WithTextStyling.args = {
+  numerator: 7,
+  denominator: 10,
+  size: 500,
+  textStyle: {
+    color: "red",
+    fontWeight: "bold",
+    fontSize: "20vh",
+  },
+};
+
+export default {
+  title: "Components/Circular Progress Indicator",
+  component: CircularProgressDashboard,
+};

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,35 @@
+import {colors} from "@dhis2/ui";
+import React, {useMemo} from "react";
+import {CircularProgressbarWithChildren} from "react-circular-progressbar";
+import {CircularDashboardProps} 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;
+};