@hisptz/dhis2-analytics 1.0.5 → 1.0.7

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

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

@@ -1,339 +0,0 @@
-import type {Story} from "@storybook/react";
-import React from "react";
-import {MapProps} from "./interfaces";
-import {Map} from "./index";
-
-const Template: Story<MapProps> = (args) => <Map {...args} />;
-
-export const BaseMap = Template.bind({});
-BaseMap.args = {
-  orgUnitSelection: { orgUnits: [], userOrgUnit: true, userSubUnit: true, userSubX2Unit: true },
-};
-
-export const Controls = Template.bind({});
-Controls.args = {
-  orgUnitSelection: { orgUnits: [], userOrgUnit: true, userSubUnit: true, userSubX2Unit: true },
-  controls: [
-    {
-      type: "print",
-      position: "topleft",
-      options: {
-        hidden: false,
-        hideControlContainer: true,
-        sizeModes: ["A4Landscape", "A4Portrait", "Current"],
-      },
-    },
-  ],
-};
-
-export const BoundaryLayer = Template.bind({});
-BoundaryLayer.args = {
-  orgUnitSelection: { orgUnits: [], userOrgUnit: true, userSubUnit: true, userSubX2Unit: true },
-  boundaryLayer: {
-    enabled: true,
-  },
-};
-
-export const BoundaryLayerWithLevels = Template.bind({});
-BoundaryLayerWithLevels.args = {
-  orgUnitSelection: {
-    orgUnits: [
-      {
-        id: "ImspTQPwCqd",
-        displayName: "Sierra Leone",
-        name: "Sierra Leone",
-        path: "/ImspTQPwCqd",
-        children: [],
-      },
-    ],
-    levels: ["2"],
-  },
-  boundaryLayer: {
-    enabled: true,
-  },
-};
-
-export const ChoroplethThematicLayer = Template.bind({});
-ChoroplethThematicLayer.args = {
-  orgUnitSelection: { orgUnits: [], userOrgUnit: true, userSubUnit: true, userSubX2Unit: false },
-  boundaryLayer: {
-    enabled: true,
-  },
-  thematicLayers: [
-    {
-      type: "choropleth",
-      id: "choropleth",
-      enabled: true,
-      dataItem: {
-        id: "Uvn6LCg7dVU",
-        displayName: "ANC 1 Coverage",
-        type: "indicator",
-      },
-      control: {
-        enabled: true,
-        position: "topright",
-      },
-    },
-  ],
-  periodSelection: {
-    periods: ["2022"],
-  },
-  legends: {
-    enabled: true,
-    position: "topright",
-    collapsible: true,
-  },
-};
-
-export const BubbleThematicLayer = Template.bind({});
-BubbleThematicLayer.args = {
-  orgUnitSelection: { orgUnits: [], userOrgUnit: true, userSubUnit: true, userSubX2Unit: true },
-  boundaryLayer: {
-    enabled: true,
-  },
-  thematicLayers: [
-    {
-      type: "bubble",
-      id: "bubble",
-      enabled: true,
-      dataItem: {
-        id: "Uvn6LCg7dVU",
-        displayName: "ANC 1 Coverage",
-        type: "indicator",
-      },
-      control: {
-        enabled: true,
-        position: "topright",
-      },
-      radius: {
-        min: 0,
-        max: 40,
-      },
-    },
-  ],
-  legends: {
-    enabled: true,
-    position: "topright",
-    collapsible: true,
-  },
-  periodSelection: {
-    periods: ["2022"],
-  },
-  controls: [
-    {
-      type: "fullscreen",
-      position: "topleft",
-    },
-  ],
-};
-
-export const AllThematicLayers = Template.bind({});
-AllThematicLayers.args = {
-  orgUnitSelection: { orgUnits: [], userOrgUnit: true, userSubUnit: true, userSubX2Unit: true },
-  boundaryLayer: {
-    enabled: true,
-  },
-  thematicLayers: [
-    {
-      type: "choropleth",
-      id: "ReUHfIn0pTQ",
-      enabled: true,
-      dataItem: {
-        id: "ReUHfIn0pTQ",
-        displayName: "ANC 1-3 Dropout Rate",
-        type: "indicator",
-        legendSet: "fqs276KXCXi",
-      },
-      control: {
-        enabled: true,
-        position: "topright",
-      },
-    },
-    {
-      type: "choropleth",
-      id: "Uvn6LCg7dVU",
-      enabled: true,
-      dataItem: {
-        id: "Uvn6LCg7dVU",
-        displayName: "ANC 1 Coverage",
-        type: "indicator",
-      },
-      control: {
-        enabled: true,
-        position: "topright",
-      },
-    },
-  ],
-  legends: {
-    enabled: true,
-    position: "topright",
-    collapsible: true,
-  },
-  periodSelection: {
-    periods: ["2022"],
-  },
-  controls: [
-    {
-      type: "scale",
-      position: "bottomleft",
-      options: {
-        imperial: false,
-        metric: true,
-      },
-    },
-    {
-      type: "fullscreen",
-      position: "bottomleft",
-    },
-  ],
-};
-
-export const ChoroplethThematicLayerWithLevels = Template.bind({});
-ChoroplethThematicLayerWithLevels.args = {
-  orgUnitSelection: {
-    orgUnits: [
-      {
-        id: "ImspTQPwCqd",
-        displayName: "Sierra Leone",
-        name: "Sierra Leone",
-        path: "/ImspTQPwCqd",
-        children: [],
-      },
-    ],
-    levels: ["3"],
-  },
-  boundaryLayer: {
-    enabled: true,
-  },
-  thematicLayers: [
-    {
-      type: "choropleth",
-      id: "choropleth",
-      enabled: true,
-      dataItem: {
-        id: "Uvn6LCg7dVU",
-        displayName: "ANC 1 Coverage",
-        type: "indicator",
-      },
-      control: {
-        enabled: true,
-        position: "topright",
-      },
-    },
-  ],
-  legends: {
-    enabled: true,
-    position: "topright",
-    collapsible: true,
-  },
-  periodSelection: {
-    periods: ["2022"],
-  },
-  controls: [
-    {
-      type: "print",
-      position: "topleft",
-      options: {
-        hidden: false,
-        hideControlContainer: true,
-        sizeModes: ["A4Landscape", "A4Portrait", "Current"],
-      },
-    },
-  ],
-};
-
-export const PointLayer = Template.bind({});
-PointLayer.args = {
-  orgUnitSelection: { orgUnits: [], userOrgUnit: true, userSubUnit: true, userSubX2Unit: false },
-  thematicLayers: [
-    {
-      type: "choropleth",
-      id: "choropleth",
-      enabled: true,
-      dataItem: {
-        id: "Uvn6LCg7dVU",
-        displayName: "ANC 1 Coverage",
-        type: "indicator",
-      },
-      control: {
-        enabled: true,
-        position: "topright",
-      },
-    },
-  ],
-  periodSelection: {
-    periods: ["2022"],
-  },
-  pointLayer: {
-    enabled: true,
-    label: "Facilities",
-    level: "m9lBJogzE95",
-    style: {
-      groupSet: "J5jldMd8OHv",
-    },
-  },
-};
-
-export const GoogleEarthEngineLayers = Template.bind({});
-GoogleEarthEngineLayers.args = {
-  orgUnitSelection: { orgUnits: [], userOrgUnit: true, userSubUnit: true, userSubX2Unit: false },
-  thematicLayers: [],
-  periodSelection: {
-    periods: ["2022"],
-  },
-  earthEngineLayers: [
-    {
-      name: "Population",
-      type: "population",
-      id: "population",
-      enabled: false,
-      params: {
-        min: 0,
-        max: 10,
-        palette: "#f7fbff,#deebf7,#c6dbef,#9ecae1,#6baed6,#4292c6,#2171b5,#08519c,#08306b",
-      },
-      aggregations: ["sum", "mean"],
-      filters: {
-        period: "2020",
-      },
-    },
-    {
-      name: "Footprints",
-      type: "footprints",
-      id: "footprints",
-      aggregations: ["count"],
-      enabled: false,
-    },
-    {
-      name: "Land Cover",
-      type: "landCover",
-      id: "landCover",
-      enabled: true,
-      aggregations: ["percentage"],
-    },
-  ],
-  pointLayer: {
-    enabled: false,
-    label: "Facilities",
-    level: "m9lBJogzE95",
-    style: {
-      groupSet: "J5jldMd8OHv",
-    },
-  },
-};
-
-export default {
-  title: "Components/Map",
-  component: Map,
-  decorators: [
-    (MapStory: any) => {
-      return (
-        <div style={{ width: "100%", height: "100%" }}>
-          {/*<MapDataProvider>*/}
-          <MapStory />
-          {/*</MapDataProvider>*/}
-        </div>
-      );
-    },
-  ],
-};

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: "Components/Map/Earth Engine Config Modal",
-  component: EarthEngineLayerConfiguration,
-  decorators: [
-    (MapStory: any) => {
-      return (
-        <div style={{ width: "50%", height: "50%" }}>
-          <MapStory />
-        </div>
-      );
-    },
-  ],
-};

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

@@ -1,34 +0,0 @@
-import {Story} from "@storybook/react";
-import {EarthEngineLayerConfiguration, EarthEngineLayerConfigurationProps} from "./index";
-import React from "react";
-import {useForm} from "react-hook-form";
-import {EarthEngineLayerConfig} from "../MapLayer/interfaces";
-import i18n from "@dhis2/d2-i18n";
-import {Button} from "@dhis2/ui";
-
-const Template: Story<EarthEngineLayerConfigurationProps> = (args) => {
-  const form = useForm<EarthEngineLayerConfig>();
-  return (
-    <form className="column gap-16" onSubmit={form.handleSubmit(console.log)}>
-      <EarthEngineLayerConfiguration {...args} form={form} />
-      <Button type="submit">{i18n.t("Submit")}</Button>
-    </form>
-  );
-};
-
-export const Basic = Template.bind({});
-Basic.args = {};
-
-export default {
-  title: "Components/Map/Earth Engine Configuration",
-  component: EarthEngineLayerConfiguration,
-  decorators: [
-    (MapStory: any) => {
-      return (
-        <div style={{ width: "50%", height: "50%" }}>
-          <MapStory />
-        </div>
-      );
-    },
-  ],
-};