@hisptz/dhis2-analytics 1.0.4 → 1.0.6

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>;
-};

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

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

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

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

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