@hisptz/dhis2-analytics 1.0.51 → 1.0.53

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

@@ -1,128 +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";
-import {DHIS2BarChart, DHIS2StackedBarChart} from "../models/bar";
-
-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 "bar":
-      return new DHIS2BarChart(id, analytics, config);
-      case "stacked-bar":
-      return new DHIS2StackedBarChart(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,36 +0,0 @@
-import {colors} from "@dhis2/ui";
-import React, {useMemo} from "react";
-import {CircularProgressbarWithChildren} from "react-circular-progressbar";
-import {CircularDashboardProps} from "./types/props";
-
-export * 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;
-};

package/src/components/CustomPivotTable/components/Table/index.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import {DataTable} from '@dhis2/ui'
-
-
-export interface PivotTableLayoutProps {
-    scrollHeight?: string;
-    scrollWidth?: string;
-    layout?: string;
-    width?: string
-}
-
-export interface PivotTableProps {
-    children: React.ReactNode;
-    tableProps?: PivotTableLayoutProps;
-}
-
-export function PivotTable({tableProps, children}: PivotTableProps) {
-    return (
-        <DataTable {...(tableProps ?? {})} >
-            {children}
-        </DataTable>
-    )
-}

package/src/components/CustomPivotTable/components/TableBody/TableBody.module.css

@@ -1,12 +0,0 @@
-.nested-table-cell {
-    padding: 0 !important;
-}
-
-.nested-table {
-    margin: 0;
-    padding: 0;
-}
-
-.header-cell {
-    border-right: 1px solid rgb(232, 237, 242) !important;
-}

package/src/components/CustomPivotTable/components/TableBody/index.tsx

@@ -1,96 +0,0 @@
-import {Header} from "../../services/engine";
-import {isEmpty, slice} from "lodash";
-import {useCustomPivotTableEngine} from "../../state/engine";
-import {DataTableCell, DataTableRow, TableBody} from '@dhis2/ui'
-import React, {Fragment} from "react";
-import {AnalyticsItem} from "@hisptz/dhis2-utils";
-import classes from "./TableBody.module.css"
-import {useElementSize} from "usehooks-ts";
-import {DHIS2Dimension} from "../../interfaces";
-
-function DataRowRenderer({
-                             mapper,
-                             item,
-                             dimension,
-                         }: { mapper?: { [key: string]: any }; item: AnalyticsItem, dimension: DHIS2Dimension }) {
-    const engine = useCustomPivotTableEngine();
-
-    const columnMappers = engine?.columnMap;
-    const completeMapper = columnMappers?.map((map) => ({...map, ...mapper, [dimension]: item.uid}));
-    return <>
-        {
-            completeMapper?.map((mapper) => (
-                <DataTableCell key={`${Object.values(mapper).join('-')}-value`} align="center" bordered>
-                    {engine?.getValue(mapper) ?? ''}
-                </DataTableCell>
-            ))
-        }
-    </>;
-}
-
-function RowRenderer({
-                         row,
-                         index,
-                         config: {rows, columns, mapper, prevWidth, fixRowHeaders}
-                     }: { row: Header, index: number, config: { rows: Header[], columns?: Header[]; mapper?: { [key: string]: string | undefined }, prevWidth?: number; fixRowHeaders?: boolean } }): React.ReactElement | null {
-    const [cellRef, {width}] = useElementSize();
-
-    const rowSpan = slice(rows, index + 1).reduce((acc, column) => {
-        return acc * (column.items?.length ?? 1);
-    }, 1)
-    const hasSubRows = !isEmpty(rows[index + 1]);
-    const nextRow = rows[index + 1];
-
-    return (
-        <>
-
-            {
-                row?.items?.map((item) => {
-                    return (
-                        <Fragment key={`${item.name}-${row.dimension}-fragment`}>
-                            <DataTableRow key={`${item.name}-${row.dimension}-row`}>
-                                <DataTableCell ref={cellRef} fixed={fixRowHeaders} left={`${prevWidth}px`}
-                                               className={classes['header-cell']} tag="th"
-                                               bordered
-                                               rowSpan={(rowSpan + (hasSubRows ? 1 : 0)).toString()}>
-                                    {item.name}
-                                </DataTableCell>
-                                {
-                                    !hasSubRows ?
-                                        <DataRowRenderer dimension={row.dimension} mapper={mapper} item={item}/> : null
-                                }
-                            </DataTableRow>
-                            {
-                                hasSubRows ? (<RowRenderer row={nextRow} index={index + 1} config={{
-                                    rows,
-                                    columns,
-                                    prevWidth: width,
-                                    mapper: {...mapper, [row.dimension]: item.uid as unknown as string}
-                                }}/>) : null
-                            }
-                        </Fragment>
-                    )
-                })
-            }
-        </>
-    )
-
-}
-
-
-export function CustomPivotTableBody() {
-    const engine = useCustomPivotTableEngine();
-    const rows = engine?.rowHeaders;
-    const columns = engine?.columnHeaders;
-    const fixRowHeaders = engine?.fixRowHeaders;
-
-    if (!rows || isEmpty(rows)) {
-        return null;
-    }
-
-    return (
-        <TableBody>
-            <RowRenderer row={rows[0]} index={0} config={{rows, columns, fixRowHeaders}}/>
-        </TableBody>
-    )
-}

package/src/components/CustomPivotTable/components/TableHeaders/TableHeaders.module.css

@@ -1,10 +0,0 @@
-.table-header{
-    border-right: 1px solid rgb(232, 237, 242);
-}
-.table-header:last-child{
-    border-right: none;
-}
-
-.table-header > span > span{
-    justify-content: center;
-}

package/src/components/CustomPivotTable/components/TableHeaders/index.tsx

@@ -1,94 +0,0 @@
-import React from "react";
-import {useCustomPivotTableEngine} from "../../state/engine";
-import {DataTableColumnHeader, DataTableRow, TableHead} from '@dhis2/ui'
-import {isEmpty, slice, times} from "lodash";
-import {Header} from "../../services/engine";
-import classes from "./TableHeaders.module.css"
-import {useElementSize} from "usehooks-ts";
-
-function ColumnRenderer({
-                            column,
-                            index,
-                            config: {fixColumnHeaders, rowHeaders, prevHeight = 0, columns}
-                        }: { column: Header, index: number, config: { columns: Header[], rowHeaders?: Header[], prevHeight?: number; fixColumnHeaders?: boolean } }): React.ReactElement | null {
-
-    const [columnHeaderRef, {height}] = useElementSize();
-
-    if (!column) {
-        return null;
-    }
-    const colSpan = slice(columns, index + 1).reduce((acc, column) => {
-        return acc * (column.items?.length ?? 1);
-    }, 1);
-
-    const hasSubColumns = !isEmpty(columns[index + 1]);
-    const nextColumn = columns[index + 1];
-
-    const multiplicationFactor = slice(columns, 0, index).reduce((acc, column) => {
-        return acc * (column.items?.length ?? 1);
-    }, 1);
-
-    return (
-        <>
-            <DataTableRow>
-                {
-                    ((index === 0) && rowHeaders?.map((header) => {
-                        return (
-                            <DataTableColumnHeader
-                                fixed={fixColumnHeaders}
-                                top={"0"}
-                                className={classes['table-header']}
-                                rowSpan={columns.length.toString()}
-                                key={`${header.dimension}-header-column`}>
-                                {header.label ?? ""}
-                            </DataTableColumnHeader>
-                        )
-                    }))
-                }
-                {
-                    (times(multiplicationFactor, (colNo) => {
-                        return (column.items?.map((item) => (
-                            <DataTableColumnHeader
-                                fixed={fixColumnHeaders}
-                                top={`${prevHeight.toString()}px`}
-                                ref={index === 0 ? columnHeaderRef : undefined}
-                                className={classes['table-header']} align="center"
-                                colSpan={colSpan.toString()}
-                                key={`${colNo}-${item.name}-column-header`}>
-                                {item.name}
-                            </DataTableColumnHeader>
-                        )))
-                    }))
-                }
-            </DataTableRow>
-            {
-                hasSubColumns ? (<ColumnRenderer column={nextColumn} index={index + 1} config={{
-                    columns,
-                    rowHeaders,
-                    prevHeight: height,
-                    fixColumnHeaders
-                }}/>) : null
-            }
-        </>
-    )
-
-}
-
-
-export function TableHeaders() {
-    const engine = useCustomPivotTableEngine();
-    const columns = engine?.columnHeaders;
-    const rowHeaders = engine?.rowHeaders;
-    const fixColumnHeaders = engine?.fixColumnHeaders;
-
-    if (!columns || isEmpty(columns)) {
-        return null;
-    }
-
-    return (
-        <TableHead>
-            <ColumnRenderer column={columns[0]} index={0} config={{rowHeaders, columns, fixColumnHeaders}}/>
-        </TableHead>
-    )
-
-}

package/src/components/CustomPivotTable/index.tsx

@@ -1,63 +0,0 @@
-import {Analytics, LegendSet} from "@hisptz/dhis2-utils";
-import {CustomPivotTableEngine} from "./services/engine";
-import React, {useMemo} from "react";
-import {CustomPivotTableEngineProvider} from "./state/engine";
-import {PivotTable} from "./components/Table";
-import {TableHeaders} from "./components/TableHeaders";
-import {CustomPivotTableBody} from "./components/TableBody";
-import {DHIS2Dimension} from "./interfaces";
-
-
-export interface CustomPivotTableOptions {
-    legendSets?: LegendSet[],
-    hideEmptyColumns?: boolean,
-    hideEmptyRows?: boolean,
-    showRowTotals?: boolean,
-    showColumnTotals?: boolean,
-    showRowSubtotals?: boolean,
-    showColumnSubtotals?: boolean,
-    fixColumnHeaders?: boolean,
-    fixRowHeaders?: boolean,
-}
-
-export interface CustomPivotTableProps {
-    analytics: Analytics;
-    tableProps?: {
-        scrollHeight?: string;
-        scrollWidth?: string;
-        layout?: string;
-        width?: string
-    };
-    config: {
-        layout: {
-            columns: {
-                dimension: DHIS2Dimension,
-                label?: string;
-            }[];
-            rows: {
-                dimension: DHIS2Dimension,
-                label?: string;
-            }[];
-            filter?: {
-                dimension: DHIS2Dimension,
-                label?: string;
-            }[]
-        },
-        options?: CustomPivotTableOptions
-    }
-}
-
-
-export function CustomPivotTable({analytics, config, tableProps}: CustomPivotTableProps) {
-    const engine = useMemo(() => new CustomPivotTableEngine({analytics, config}), [analytics, config]);
-
-    return (
-        <CustomPivotTableEngineProvider engine={engine}>
-            <PivotTable tableProps={tableProps}>
-                <TableHeaders/>
-                <CustomPivotTableBody/>
-            </PivotTable>
-        </CustomPivotTableEngineProvider>
-    )
-
-}

package/src/components/CustomPivotTable/interfaces/index.ts

@@ -1 +0,0 @@
-export type DHIS2Dimension = "ou" | "pe" | "dx" | "co" | string;

package/src/components/CustomPivotTable/services/engine.ts

@@ -1,102 +0,0 @@
-import {Analytics, AnalyticsItem, LegendSet} from "@hisptz/dhis2-utils";
-import {compact, findIndex, intersection, times, zip} from "lodash";
-import {DHIS2Dimension} from "../interfaces";
-
-
-export interface EngineConfig {
-    layout: {
-        columns: { dimension: DHIS2Dimension, label?: string }[];
-        rows: { dimension: DHIS2Dimension, label?: string }[]
-        filter?: { dimension: DHIS2Dimension, label?: string }[]
-    }
-    options?: {
-        legendSets?: LegendSet[],
-        hideEmptyColumns?: boolean,
-        hideEmptyRows?: boolean,
-        showRowTotals?: boolean,
-        showColumnTotals?: boolean,
-        showRowSubtotals?: boolean,
-        showColumnSubtotals?: boolean,
-        fixColumnHeaders?: boolean,
-        fixRowHeaders?: boolean,
-        [key: string]: any
-    }
-}
-
-export interface Header {
-    dimension: DHIS2Dimension;
-    label?: string;
-    items?: AnalyticsItem[]
-}
-
-export class CustomPivotTableEngine {
-    analyticsData: Analytics;
-    valueIndex: number;
-    config: EngineConfig;
-    rowHeaders?: Header[];
-    columnHeaders?: Header[];
-
-    columnMap?: { [key: string]: any }[]
-
-    constructor({analytics, config}: { analytics: Analytics, config: EngineConfig }) {
-        this.config = config;
-        this.analyticsData = analytics;
-        this.valueIndex = findIndex(this.analyticsData.headers, ['name', 'value'])
-        this.getHeaders();
-        this.getColumnMap();
-    }
-
-    get fixColumnHeaders() {
-        return this.config.options?.fixColumnHeaders ?? true;
-    }
-
-    get fixRowHeaders() {
-        return this.config.options?.fixRowHeaders ?? true;
-    }
-
-    getDimensionItems(dimension: DHIS2Dimension) {
-        return this.analyticsData.metaData?.dimensions[dimension] ?? [];
-    }
-
-    getItem(id: string) {
-        return this.analyticsData.metaData?.items[id as any]
-    }
-
-
-    getValue(mapper: { [key: string]: any }) {
-        const dimensions = Object.values(mapper);
-        const data = this.analyticsData.rows?.filter((row) => intersection(row, dimensions).length >= dimensions.length);
-        return data?.reduce((acc, row) => {
-            return acc + parseFloat(row[this.valueIndex])
-        }, 0)
-    }
-
-    getHeaders() {
-        this.rowHeaders = this.config.layout.rows.map((rowConfig) => {
-            return {
-                ...rowConfig,
-                items: compact(this.getDimensionItems(rowConfig.dimension).map((itemId: string) => this.getItem(itemId)))
-            }
-        });
-        this.columnHeaders = this.config.layout.columns.map((columnConfig) => {
-            return {
-                ...columnConfig,
-                items: compact(this.getDimensionItems(columnConfig.dimension).map((itemId: string) => this.getItem(itemId)))
-            }
-        });
-    }
-
-
-    getColumnMap() {
-        const columns = this.columnHeaders;
-        const sanitizedColumns = compact(columns?.map((column) => (column.items?.map(item => ({[column.dimension]: item.uid}))))) ?? [];
-        const size = sanitizedColumns.reduce((acc, items) => {
-            return acc * (items?.length ?? 1);
-        }, 1);
-        const standardiseColumns = sanitizedColumns.map(items => ([...(times(size / items.length, () => items).flat())]));
-        this.columnMap = compact(zip(...standardiseColumns).map(arr => arr.reduce((obj, value) => {
-            return {...obj, ...value}
-        })));
-    }
-
-}

package/src/components/CustomPivotTable/state/engine.tsx

@@ -1,22 +0,0 @@
-import React, {createContext, ReactNode, useContext} from "react";
-import {CustomPivotTableEngine} from "../services/engine";
-
-
-const CustomPivotTableEngineContext = createContext<CustomPivotTableEngine | null>(null);
-
-
-export function useCustomPivotTableEngine() {
-    return useContext(CustomPivotTableEngineContext)
-}
-
-export function CustomPivotTableEngineProvider({
-                                                   children,
-                                                   engine
-                                               }: { children: ReactNode, engine: CustomPivotTableEngine }) {
-
-    return (
-        <CustomPivotTableEngineContext.Provider value={engine}>
-            {children}
-        </CustomPivotTableEngineContext.Provider>
-    )
-}

package/src/components/Map/components/EarthEngineLayerConfiguration/EarthEngineLayerConfigModal.stories.tsx

@@ -1,28 +0,0 @@
-import {Story} from "@storybook/react";
-import {EarthEngineLayerConfigModal, EarthEngineLayerConfigModalProps, EarthEngineLayerConfiguration} from "./index";
-import React from "react";
-
-const Template: Story<EarthEngineLayerConfigModalProps> = (args) => {
-  return <EarthEngineLayerConfigModal {...args} />;
-};
-
-export const Basic = Template.bind({});
-Basic.args = {
-  onClose: () => {},
-  onChange: console.info,
-  open: true,
-};
-
-export default {
-  title: "Analytics/Map/Earth Engine Config Modal",
-  component: EarthEngineLayerConfiguration,
-  decorators: [
-    (MapStory: any) => {
-      return (
-        <div style={{ width: "50%", height: "50%" }}>
-          <MapStory />
-        </div>
-      );
-    },
-  ],
-};