@hisptz/dhis2-analytics 1.0.5 → 1.0.6

package/src/components/Map/hooks/map.ts

@@ -1,47 +0,0 @@
-import {geoJSON, LatLngTuple} from "leaflet";
-import {useEffect, useMemo} from "react";
-import {useMapOrganisationUnit} from "../components/MapProvider/hooks";
-import {useElementSize, useMediaQuery} from "usehooks-ts";
-import {isEmpty} from "lodash";
-import {useMap} from "react-leaflet";
-
-export function useMapBounds() {
-  const { orgUnits } = useMapOrganisationUnit();
-  const geoJSONObject = useMemo(
-    () =>
-      geoJSON({
-        type: "FeatureCollection",
-        features: orgUnits?.map((orgUnit) => orgUnit.geoJSON),
-      } as any),
-    [orgUnits]
-  );
-
-  const center = useMemo(() => {
-    return geoJSONObject.getBounds().getCenter();
-  }, [orgUnits]);
-  const bounds: any = useMemo(() => {
-    return geoJSONObject.getBounds();
-  }, [orgUnits]);
-
-  return {
-    center,
-    bounds,
-  };
-}
-
-export function useCenterMap({ bounds }: { bounds: LatLngTuple[] }) {
-  const map = useMap();
-  const [ref, { width, height }] = useElementSize();
-
-  useEffect(() => {
-    if (!isEmpty(bounds)) {
-      map.fitBounds(bounds);
-    }
-  }, [width, height]);
-
-  return ref;
-}
-
-export function usePrintMedia() {
-  return useMediaQuery("@media print");
-}

package/src/components/Map/index.tsx

@@ -1,65 +0,0 @@
-import {Map as LeafletMap} from "leaflet";
-import React, {forwardRef} from "react";
-import MapArea from "./components/MapArea";
-import {CustomBoundaryLayer, CustomPointLayer} from "./components/MapLayer/interfaces";
-import {MapProvider} from "./components/MapProvider";
-import {MapProps} from "./interfaces";
-import "leaflet/dist/leaflet.css";
-
-const MapComponent = (
-    {
-        orgUnitSelection,
-        pointLayer,
-        boundaryLayer,
-        thematicLayers,
-        earthEngineLayers,
-        periodSelection,
-        mapOptions,
-        key,
-        controls,
-        legends
-    }: MapProps,
-    ref: React.Ref<LeafletMap> | undefined
-) => {
-    const sanitizedPointLayers: CustomPointLayer[] = [
-        {
-            type: "point",
-            id: "point",
-            enabled: pointLayer?.enabled ?? false,
-            ...pointLayer,
-        },
-    ];
-    const sanitizedBoundaryLayers: CustomBoundaryLayer[] = [
-        {
-            type: "overlay",
-            id: "boundary",
-            enabled: boundaryLayer?.enabled ?? false,
-        },
-    ];
-
-    return (
-        <>
-            <MapProvider periodSelection={periodSelection} orgUnitSelection={orgUnitSelection}>
-                <MapArea
-                    layers={{
-                        thematicLayers,
-                        earthEngineLayers,
-                        boundaryLayers: sanitizedBoundaryLayers,
-                        pointLayers: sanitizedPointLayers,
-                    }}
-                    legends={legends}
-                    controls={controls}
-                    key={key}
-                    ref={ref}
-                    mapOptions={mapOptions}
-                />
-            </MapProvider>
-        </>
-    );
-};
-export const Map: React.FC<MapProps> = forwardRef(MapComponent);
-
-export * from "./components/EarthEngineLayerConfiguration";
-export * from "./components/ThematicLayerConfiguration";
-export * from "./interfaces";
-export * from "./constants/colors";

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

@@ -1,57 +0,0 @@
-import type {OrgUnitSelection} from "@hisptz/dhis2-utils";
-import React from "react";
-import type {MapContainerProps} from "react-leaflet";
-import {MapControls, MapLegendConfig} from "../components/MapArea/interfaces";
-import {EarthEngineLayerConfig, ThematicLayerConfig} from "../components/MapLayer/interfaces";
-
-export interface MapProviderProps {
-  children: React.ReactNode;
-  orgUnitSelection: OrgUnitSelection;
-  periodSelection?: { periods?: string[]; range?: { start: Date; end: Date } };
-}
-
-export interface MapProps {
-  key?: string;
-  orgUnitSelection: OrgUnitSelection; //Organisation unit selection
-  pointLayer?: {
-    enabled: boolean;
-    label?: string;
-    level?: number | string;
-    group?: string;
-    style?: {
-      icon?: string;
-      groupSet?: string;
-    };
-  };
-  boundaryLayer?: {
-    enabled: boolean;
-  };
-  controls?: MapControls[];
-  legends?: MapLegendConfig;
-  thematicLayers?: ThematicLayerConfig[];
-  earthEngineLayers?: EarthEngineLayerConfig[];
-  periodSelection?: { periods?: string[]; range?: { start: Date; end: Date } };
-  mapOptions?: MapContainerProps;
-}
-
-export interface MapOrgUnit {
-  id: string;
-  path: string;
-  name: string;
-  bounds: any[];
-  geoJSON: any;
-  children?: MapOrgUnit[];
-  level?: number;
-}
-
-export interface PointOrgUnit {
-  id: string;
-  path: string;
-  name: string;
-  bounds: any[];
-  geoJSON: any;
-  icon: {
-    type: "custom" | "groupIcon";
-    icon: string;
-  };
-}

package/src/components/Map/state/index.tsx

@@ -1,31 +0,0 @@
-import type {OrgUnitSelection} from "@hisptz/dhis2-utils";
-import {PeriodInterface} from "@iapps/period-utilities";
-import {createContext} from "react";
-import {CustomMapLayer} from "../components/MapLayer/interfaces";
-import {MapOrgUnit} from "../interfaces";
-
-export const MapOrgUnitContext = createContext<{
-  orgUnitSelection: OrgUnitSelection;
-  orgUnits?: MapOrgUnit[];
-}>({
-  orgUnitSelection: { orgUnits: [] },
-  orgUnits: [],
-});
-
-export const MapPeriodContext = createContext<
-  | {
-      periods?: PeriodInterface[];
-      range?: { start: Date; end: Date };
-    }
-  | undefined
->({
-  periods: [],
-});
-
-export const MapLayersContext = createContext<{
-  layers: CustomMapLayer[];
-  updateLayer: (id: string, updatedLayer: CustomMapLayer) => void;
-}>({
-  layers: [],
-  updateLayer: () => {},
-});

package/src/components/Map/utils/colors.ts

@@ -1,95 +0,0 @@
-import {hcl} from "d3-color";
-import {isString} from "lodash";
-import {COLOR_PALETTES} from "../constants/colors";
-
-const colorbrewer: Record<string, any> = COLOR_PALETTES;
-
-// Returns a color brewer scale for a number of classes
-export const getColorPalette = (scale: string, classes: number) => {
-  return colorbrewer?.[scale]?.[classes];
-};
-
-export const getColorClasses = (palette: string) => {
-  return palette?.split(",")?.length;
-};
-
-// Returns color scale name for a palette
-export const getColorScale = (palette: string) => {
-  const classes = palette.split(",").length;
-  return colorScales.find((name) => colorbrewer[name][classes]?.join(",") === palette);
-};
-
-export const defaultColorScaleName = "YlOrBr";
-export const defaultClasses = 5;
-export const defaultColorScale = getColorPalette(defaultColorScaleName, defaultClasses);
-
-// Correct colors not adhering to the css standard (add missing #)
-export const cssColor = (color: any) => {
-  if (!isString(color)) {
-    return color;
-  } else if (color === "##normal") {
-    // ##normal is used in old map favorites
-    return null; // Will apply default color
-  }
-  return (/(^[0-9A-F]{6}$)|(^[0-9A-F]{3}$)/i.test(color) ? "#" : "") + color;
-};
-
-// Returns an unique color (first from an array, then random but still unique)
-export const getUniqueColor = (defaultColors: any) => {
-  const colors = [...defaultColors];
-
-  function randomColor(): string {
-    const color = "#000000".replace(/0/g, () => (~~(Math.random() * 16)).toString(16));
-
-    // Recursive until color is unique
-    if (colors.includes(color)) {
-      return randomColor();
-    }
-
-    colors.push(color);
-
-    return color;
-  }
-
-  return (index: number) => colors[index] || randomColor();
-};
-
-// Returns true if a color is dark
-export const isDarkColor = (color: string) => hcl(color).l < 70;
-
-// Returns constrasting color
-export const getContrastColor = (color: string) => (isDarkColor(color) ? "#fff" : "#000");
-export type LegendColorScale = typeof colorScales[number];
-export const colorScales = [
-  "YlOrBr",
-  "Reds",
-  "YlGn",
-  "Greens",
-  "Blues",
-  "BuPu",
-  "RdPu",
-  "PuRd",
-  "Greys",
-  "YlOrBr_reverse",
-  "Reds_reverse",
-  "YlGn_reverse",
-  "Greens_reverse",
-  "Blues_reverse",
-  "BuPu_reverse",
-  "RdPu_reverse",
-  "PuRd_reverse",
-  "Greys_reverse",
-  "PuOr",
-  "BrBG",
-  "PRGn",
-  "PiYG",
-  "RdBu",
-  "RdGy",
-  "RdYlBu",
-  "Spectral",
-  "RdYlGn",
-  "Paired",
-  "Pastel1",
-  "Set1",
-  "Set3",
-];

package/src/components/Map/utils/helpers.ts

@@ -1,15 +0,0 @@
-// Get the longest text length from an object property in an array
-import L from "leaflet";
-
-export const getLongestTextLength = (array: Array<any>, key: string | number) =>
-  array.reduce((text, curr) => (curr[key] && String(curr[key]).length > text.length ? String(curr[key]) : text), "").length;
-
-export function getIconUrl(icon: string, { baseUrl }: { baseUrl: string }) {
-  return `${baseUrl}/images/orgunitgroup/${icon ?? "01.png"}`;
-}
-
-export function getIcon(url: string): L.Icon | undefined {
-  return new L.Icon({
-    iconUrl: url,
-  });
-}

package/src/components/Map/utils/map.ts

@@ -1,150 +0,0 @@
-import type {Legend, OrganisationUnit, OrgUnitSelection} from "@hisptz/dhis2-utils";
-import {LeafletMouseEvent} from "leaflet";
-import {compact, filter, find, forEach, isEmpty, isString, sortBy} from "lodash";
-import {defaultClasses, defaultColorScaleName, getColorPalette} from "./colors";
-
-export function highlightFeature(e: LeafletMouseEvent, style: any) {
-  const layer = e.target;
-  layer.setStyle(style);
-  // layer.bringToFront();
-}
-
-export function resetHighlight(e: LeafletMouseEvent, defaultStyle: any) {
-  const layer = e.target;
-  layer.setStyle(defaultStyle);
-  // layer.bringToBack();
-}
-
-export function getColorFromLegendSet(legends: Legend[], value?: number): string {
-  if (!value) {
-    return "";
-  }
-  const legend: any = find(legends ?? [], (legend: any) => legend?.startValue <= value && legend?.endValue >= value) ?? {};
-  return legend.color ? legend.color : "transparent";
-}
-
-export function getLegendCount(legend: any, data: any) {
-  const { startValue, endValue } = legend;
-  return filter(data, (d: any) => d.data >= startValue && d.data <= endValue).length;
-}
-
-export function getOrgUnitsSelection(orgUnitSelection: OrgUnitSelection) {
-  const orgUnits = [];
-  if (orgUnitSelection.userOrgUnit) {
-    orgUnits.push("USER_ORGUNIT");
-  }
-
-  if (orgUnitSelection.userSubUnit) {
-    orgUnits.push("USER_ORGUNIT_CHILDREN");
-  }
-
-  if (orgUnitSelection.userSubX2Unit) {
-    orgUnits.push("USER_ORGUNIT_GRANDCHILDREN");
-  }
-  if (!isEmpty(orgUnitSelection.levels)) {
-    forEach(orgUnitSelection.levels, (level) => orgUnits.push(`LEVEL-${level}`));
-  }
-
-  return [...orgUnits, ...(orgUnitSelection?.orgUnits?.map((ou: OrganisationUnit) => `${ou.id}`) ?? [])];
-}
-
-export function sanitizeOrgUnits(metaData: any) {
-  if (metaData) {
-    return metaData?.dimensions?.ou?.map((ouId: string) => ({
-      id: ouId,
-      name: metaData?.items[ouId]?.name,
-      path: metaData?.ouHierarchy?.[ouId],
-    }));
-  }
-  return [];
-}
-
-export function toGeoJson(organisationUnits: any) {
-  return sortBy(organisationUnits, "le").map((ou: any) => {
-    try {
-      const coord = JSON.parse(ou.co);
-      let gpid = "";
-      let gppg = "";
-      let type = "Point";
-
-      if (ou.ty === 2) {
-        type = "Polygon";
-        if (ou.co.substring(0, 4) === "[[[[") {
-          type = "MultiPolygon";
-        }
-      }
-
-      // Grand parent
-      if (isString(ou.pg) && ou.pg.length) {
-        const ids = compact(ou.pg.split("/"));
-
-        // Grand parent id
-        if (ids.length >= 2) {
-          gpid = ids[ids.length - 2] as string;
-        }
-
-        // Grand parent parent graph
-        if (ids.length > 2) {
-          gppg = "/" + ids.slice(0, ids.length - 2).join("/");
-        }
-      }
-
-      return {
-        type: "Feature",
-        id: ou.id,
-        geometry: {
-          type,
-          coordinates: coord,
-        },
-        properties: {
-          type,
-          id: ou.id,
-          name: ou.na,
-          hasCoordinatesDown: ou.hcd,
-          hasCoordinatesUp: ou.hcu,
-          level: ou.le,
-          grandParentParentGraph: gppg,
-          grandParentId: gpid,
-          parentGraph: ou.pg,
-          parentId: ou.pi,
-          parentName: ou.pn,
-          dimensions: ou.dimensions,
-        },
-      };
-    } catch (e) {
-      return {};
-    }
-  });
-}
-
-export function sanitizeDate(startDate: string): string {
-  if (startDate?.split("-")?.[0]?.length < 4) {
-    return startDate?.split("-")?.reverse()?.join("-");
-  }
-  return startDate;
-}
-
-export function generateLegends(maxValue: number, minValue: number, { classesCount, colorClass }: { classesCount: number; colorClass: string }): Array<Legend> {
-  const count: number = classesCount ?? defaultClasses;
-  const color = colorClass ?? defaultColorScaleName;
-
-  const colorScale = [...getColorPalette(color, count)].reverse();
-
-  const maxLegendValue = 5 * Math.ceil(maxValue / 5);
-  const range = maxLegendValue / count;
-
-  const values = [];
-  let legendColorsIterator = colorScale.length - 1;
-  for (let i = 0; i < maxLegendValue; i += range) {
-    const id = colorScale[legendColorsIterator];
-    values.push({
-      startValue: Math.floor(i),
-      endValue: Math.floor(i + range),
-      id,
-      color: id,
-    });
-    legendColorsIterator--;
-  }
-
-  return values.reverse();
-}

package/src/components/SingleValueContainer/SingleValueContainer.stories.tsx

@@ -1,146 +0,0 @@
-import type {Story} from "@storybook/react";
-import React from "react";
-import {SingleValueContainerProps} from "./types/props";
-import {SingleValueContainer} from ".";
-
-const Template: Story<SingleValueContainerProps> = (args) => <SingleValueContainer {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  title: "PRIORITY INDICATORS",
-  singleValueItems: [
-    {
-      label: "Total Bookings",
-      value: 136,
-    },
-    {
-      label: "At least one dose",
-      value: 45,
-      percentage: 23,
-      color: "#0D47A1",
-    },
-    {
-      label: "Partially vaccinated",
-      value: 13,
-      percentage: 17,
-      color: "#0D47A1",
-    },
-    {
-      label: "Fully vaccinated",
-      value: 126,
-      percentage: 83,
-      color: "#0D47A1",
-    },
-    {
-      label: "Number of AEFI",
-      value: 26,
-    },
-  ],
-};
-
-export const AnimatedAllValues = Template.bind({});
-AnimatedAllValues.args = {
-  title: "PRIORITY INDICATORS",
-  animationDuration: 1500,
-  animationDelay: 500,
-  singleValueItems: [
-    {
-      label: "Total Bookings",
-      value: 136344,
-    },
-    {
-      label: "At least one dose",
-      value: 4423,
-      percentage: 23,
-      color: "#0D47A1",
-    },
-    {
-      label: "Partially vaccinated",
-      value: 1394,
-      percentage: 17,
-      color: "#0D47A1",
-    },
-    {
-      label: "Fully vaccinated",
-      value: 12432,
-      percentage: 83,
-      color: "#0D47A1",
-    },
-    {
-      label: "Number of AEFI",
-      value: 26423,
-    },
-  ],
-};
-
-export const AnimatedSingleValue = Template.bind({});
-AnimatedSingleValue.args = {
-  title: "PRIORITY INDICATORS",
-  singleValueItems: [
-    {
-      label: "Total Bookings",
-      value: 13634244,
-      animationDuration: 1000,
-      animationDelay: 100,
-    },
-    {
-      label: "At least one dose",
-      value: 45423,
-      percentage: 23,
-      color: "#0D47A1",
-      animationDuration: 1000,
-      animationDelay: 600,
-    },
-    {
-      label: "Partially vaccinated",
-      value: 13434,
-      percentage: 17,
-      color: "#0D47A1",
-      animationDuration: 1000,
-      animationDelay: 1100,
-    },
-    {
-      label: "Fully vaccinated",
-      value: 126432,
-      percentage: 83,
-      color: "#0D47A1",
-      animationDuration: 1000,
-      animationDelay: 1600,
-    },
-    {
-      label: "Number of AEFI",
-      value: 268423,
-      animationDuration: 1000,
-      animationDelay: 2000,
-    },
-  ],
-};
-
-export const SingleValuesWithDecimalPlaces = Template.bind({});
-SingleValuesWithDecimalPlaces.args = {
-  title: "ENROLLMENTS",
-  animationDuration: 1500,
-  animationDelay: 500,
-  singleValueItems: [
-    {
-      label: "Number of Enrolled Clients",
-      value: 268423,
-      decimalPlaces: 3,
-    },
-    {
-      label: "Number of Served Clients",
-      value: 268423,
-      decimalPlaces: 1,
-    },
-  ],
-};
-
-export default {
-  title: "Components/Single Value Container",
-  component: SingleValueContainer,
-  decorators: [
-    (SingleValueStory: any) => {
-      return <SingleValueStory />;
-    },
-  ],
-};

package/src/components/SingleValueContainer/SingleValueContainer.test.tsx

@@ -1,24 +0,0 @@
-import {mount} from "@cypress/react";
-import React from "react";
-import {SingleValueContainer} from ".";
-
-describe("Single Value Container Tests", () => {
-  it("should render", function () {
-    const arg = {
-      title: "PRIORITY INDICATORS",
-      singleValueItems: [
-        {
-          label: "Total Bookings",
-          value: 136,
-        },
-        {
-          label: "At least one dose",
-          value: 45,
-          percentage: 23,
-          color: "#0D47A1",
-        },
-      ],
-    };
-    mount(<SingleValueContainer {...arg} />);
-  });
-});

package/src/components/SingleValueContainer/components/SingleValueItem/SingleValueItem.tsx

@@ -1,46 +0,0 @@
-import {Tooltip} from "@dhis2/ui";
-import {capitalize} from "lodash";
-import React from "react";
-import {animated, useSpring} from "react-spring";
-import styles from "../../styles/SingleValueContainer.module.css";
-import {SingleValue} from "../../types/props";
-import SingleValuePercentage from "./SingleValuePercentage";
-
-interface SingleValueProps extends SingleValue {
-  globalAnimationDelay?: number;
-  globalAnimationDuration?: number;
-}
-
-export default function SingleValueItem({
-  label,
-  value,
-  color,
-  percentage,
-  animationDuration,
-  animationDelay,
-  globalAnimationDelay,
-  decimalPlaces,
-  globalAnimationDuration,
-}: SingleValueProps): React.ReactElement {
-  const numberFormatter = (value: number) => Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: decimalPlaces ?? 1 }).format(value);
-
-  const sanitizedValue = useSpring({
-    val: value,
-    from: { val: 0 },
-    config: { duration: animationDuration ?? globalAnimationDuration ?? 1000 },
-    delay: animationDelay ?? globalAnimationDelay ?? 10,
-  });
-
-  const tooltipContent = `${label}: ${value}`;
-  return (
-    <div className={`${styles["single-value-item"]} text-center`}>
-      <div className={styles["font-large"]}>{label}</div>
-      <Tooltip content={capitalize(tooltipContent)}>
-        <animated.div className={`${styles["font-bold"]} ${styles["font-xx-large"]} ${styles["padding-top"]}`}>
-          {sanitizedValue.val.to((value) => numberFormatter(Math.floor(value)))}
-        </animated.div>
-      </Tooltip>
-      {percentage ? <SingleValuePercentage color={color} percentage={percentage} /> : <span></span>}
-    </div>
-  );
-}

package/src/components/SingleValueContainer/components/SingleValueItem/SingleValuePercentage.tsx

@@ -1,12 +0,0 @@
-import {LinearLoader} from "@dhis2/ui";
-import React from "react";
-import styles from "../../styles/SingleValueContainer.module.css";
-
-export default function SingleValuePercentage({ percentage, color }: any): React.ReactElement {
-  const width = "100%";
-  return (
-    <div className="w-100">
-      <LinearLoader className={styles["percent-value"]} width={width} amount={percentage} />
-    </div>
-  );
-}