@hisptz/dhis2-analytics 1.0.5 → 1.0.7

package/src/components/Map/components/MapLayer/components/LegendArea/index.tsx

@@ -1,168 +0,0 @@
-import {colors, IconLegend24, Popper, Portal} from "@dhis2/ui";
-import {ControlPosition} from "leaflet";
-import {compact, head} from "lodash";
-import React, {useEffect, useRef, useState} from "react";
-import {MapLegendConfig} from "../../../MapArea/interfaces";
-import {CustomControl} from "../../../MapControls/components/CustomControl";
-import {
-    CustomBubbleLayer,
-    CustomGoogleEngineLayer,
-    CustomPointLayer,
-    CustomThematicLayer,
-    SUPPORTED_EARTH_ENGINE_LAYERS
-} from "../../interfaces";
-import PointLegend from "../PointLayer/components/PointLegend";
-import BubbleLegend from "../ThematicLayer/components/Bubble/components/BubbleLegend";
-import ChoroplethLegend from "../ThematicLayer/components/Choropleth/components/ChoroplethLegend";
-import EarthEngineLegend from "../GoogleEngineLayer/components/EarthEngineLegend";
-import classes from "./LegendArea.module.css";
-import {usePrintMedia} from "../../../../hooks/map";
-
-const TOOLTIP_OFFSET = 4;
-
-function getLegendComponent(layer: CustomThematicLayer | CustomPointLayer | CustomGoogleEngineLayer) {
-  if (layer.type === "point") {
-    return <PointLegend name={layer.label} />;
-  }
-
-  if (SUPPORTED_EARTH_ENGINE_LAYERS.includes(layer.type)) {
-    return <EarthEngineLegend name={layer.name ?? ""} layer={layer as CustomGoogleEngineLayer} />;
-  }
-
-  const { type, enabled, control, dataItem, name, data, legends } = (layer as CustomThematicLayer) ?? {};
-
-  if (!enabled || !control) {
-    return null;
-  }
-  switch (type) {
-    case "bubble":
-      return (
-        <BubbleLegend
-          radius={(layer as CustomBubbleLayer)?.radius ?? { min: 0, max: 50 }}
-          legends={legends ?? []}
-          name={name ?? dataItem.displayName}
-          data={data}
-          dataItem={head(data)?.dataItem ?? dataItem}
-        />
-      );
-    case "choropleth":
-      return <ChoroplethLegend legends={legends ?? []} name={name ?? dataItem.displayName} data={data} dataItem={head(data)?.dataItem ?? dataItem} />;
-  }
-}
-
-function CollapsedLegendIcon({ onCollapse, name }: { name: string; onCollapse: () => void }) {
-  const openDelay = 200;
-  const closeDelay = 200;
-  const [openTooltip, setOpenTooltip] = useState(false);
-  const openTimerRef = useRef<any>(null);
-  const closeTimerRef = useRef<any>(null);
-  const ref = useRef<HTMLDivElement>(null);
-
-  const hideModifier = { name: "hide" };
-  const offsetModifier = {
-    name: "offset",
-    options: {
-      offset: [0, TOOLTIP_OFFSET],
-    },
-  };
-
-  const flipModifier = {
-    name: "flip",
-    options: { altBoundary: true },
-  };
-
-  const onMouseOver = () => {
-    clearTimeout(closeTimerRef.current);
-
-    openTimerRef.current = setTimeout(() => {
-      setOpenTooltip(true);
-    }, openDelay);
-  };
-
-  const onMouseOut = () => {
-    clearTimeout(openTimerRef.current);
-
-    closeTimerRef.current = setTimeout(() => {
-      setOpenTooltip(false);
-    }, closeDelay);
-  };
-
-  useEffect(
-    () => () => {
-      clearTimeout(openTimerRef.current);
-      clearTimeout(closeTimerRef.current);
-    },
-    []
-  );
-
-  return (
-    <div ref={ref} onMouseOver={onMouseOver} onMouseOut={onMouseOut} onClick={onCollapse} style={{ width: 28, height: 28 }} className="legend-card collapsed">
-      <IconLegend24 />
-      {openTooltip && (
-        <Portal className={classes["map-tooltip"]}>
-          <Popper className={classes["map-tooltip"]} reference={ref} modifiers={[offsetModifier, flipModifier, hideModifier]}>
-            <div
-              style={{
-                backgroundColor: `${colors.grey900}`,
-                borderRadius: 3,
-                color: `${colors.white}`,
-                padding: "4px 6px",
-              }}
-              data-test={`content`}>
-              {name}
-            </div>
-          </Popper>
-        </Portal>
-      )}
-    </div>
-  );
-}
-
-function Legend({ children, collapsible }: { children: React.ReactElement; collapsible: boolean }) {
-  const [collapsed, setCollapsed] = useState(collapsible);
-  const inPrintMode = usePrintMedia();
-  const onCollapse = () => {
-    if (collapsible) {
-      setCollapsed((prevState) => !prevState);
-    }
-  };
-
-  const name = head(React.Children.toArray(children) as React.ReactElement[])?.props.name;
-
-  const shouldCollapse = collapsed && !inPrintMode;
-  console.log(inPrintMode);
-
-  return (
-    <div className="w-100">
-      {shouldCollapse ? (
-        <CollapsedLegendIcon name={name} onCollapse={onCollapse} />
-      ) : (
-        React.Children.map(children, (child) => React.cloneElement(child, { collapsible, onCollapse }))
-      )}
-    </div>
-  );
-}
-
-export default function LegendArea({
-  layers,
-  legends: legendConfig,
-}: {
-  layers: Array<CustomThematicLayer | CustomPointLayer | CustomGoogleEngineLayer>;
-  position: ControlPosition;
-  legends?: MapLegendConfig;
-}) {
-  const legends: JSX.Element[] = compact(layers.filter((layer) => layer.enabled).map(getLegendComponent));
-  const { position, collapsible } = legendConfig ?? {};
-
-  return (
-    <CustomControl position={position}>
-      <div className="column gap-16 align-items-end">
-        {legends?.map((legend: any, index) => (
-          <Legend collapsible={collapsible ?? true} key={`${index}-map-legend`}>
-            {legend}
-          </Legend>
-        ))}
-      </div>
-    </CustomControl>
-  );
-}

package/src/components/Map/components/MapLayer/components/PointLayer/components/PointLegend/index.tsx

@@ -1,44 +0,0 @@
-import {useConfig} from "@dhis2/app-runtime";
-import {Divider} from "@dhis2/ui";
-import React, {forwardRef} from "react";
-import {getIconUrl} from "../../../../../../utils/helpers";
-import LegendCardHeader from "../../../LegendArea/components/LegendCardHeader";
-import {usePointLayer} from "../../hooks";
-
-function PointLegends({ orgUnitGroups, icon, label }: { orgUnitGroups: { name: string; symbol: string }[]; icon?: string; label?: string }) {
-  const { baseUrl } = useConfig();
-
-  return (
-    <div style={{ minWidth: 100, alignItems: "flex-start" }} className="w-100 p-8 legend-list column">
-      {icon && (
-        <div key={`${icon}-legend`} className="row gap-16  align-items-center">
-          <img height={20} width={20} alt={`${name}-icon`} src={getIconUrl(icon, { baseUrl })} />
-          <p>{label}</p>
-        </div>
-      )}
-      {orgUnitGroups.map(({ name, symbol }) => {
-        return (
-          <div key={`${name}-legend`} className="row gap-16  align-items-center">
-            <img height={20} width={20} alt={`${name}-icon`} src={getIconUrl(symbol ?? "", { baseUrl })} />
-            <p>{name}</p>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-function PointLegend({ collapsible, onCollapse }: any, ref: React.LegacyRef<HTMLDivElement>) {
-  const pointLayer = usePointLayer();
-  const { label, style } = pointLayer ?? {};
-
-  return (
-    <div ref={ref} className="legend-card">
-      <LegendCardHeader collapsible={collapsible} onCollapse={onCollapse} title={label ?? "Points"} />
-      <Divider margin={"0"} />
-      <PointLegends label={label} orgUnitGroups={style?.orgUnitGroups ?? []} icon={style?.icon} />
-    </div>
-  );
-}
-
-export default forwardRef(PointLegend);

package/src/components/Map/components/MapLayer/components/PointLayer/hooks/index.ts

@@ -1,8 +0,0 @@
-import {find} from "lodash";
-import {useMapLayers} from "../../../../MapProvider/hooks";
-import {CustomPointLayer} from "../../../interfaces";
-
-export function usePointLayer() {
-  const { layers } = useMapLayers();
-  return find(layers, ["type", "point"]) as CustomPointLayer;
-}

package/src/components/Map/components/MapLayer/components/PointLayer/index.tsx

@@ -1,36 +0,0 @@
-import {useConfig} from "@dhis2/app-runtime";
-import i18n from "@dhis2/d2-i18n";
-import L from "leaflet";
-import React from "react";
-import {GeoJSON, LayerGroup, LayersControl, Popup, Tooltip} from "react-leaflet";
-import {PointOrgUnit} from "../../../../interfaces";
-import {getIcon, getIconUrl} from "../../../../utils/helpers";
-import {usePointLayer} from "./hooks";
-
-export function PointLayer() {
-  const pointLayer = usePointLayer();
-  const { enabled, label, points: orgUnits, style } = pointLayer ?? {};
-  const { baseUrl } = useConfig();
-  return (
-    <LayersControl.Overlay checked={enabled} name={label ?? i18n.t("Points")}>
-      <LayerGroup>
-        {orgUnits?.map((area: PointOrgUnit) => {
-          return (
-            <GeoJSON
-              pointToLayer={(_, coordinates) => {
-                return L.marker(coordinates, { icon: getIcon(getIconUrl(area.icon.icon ?? style?.icon, { baseUrl })) });
-              }}
-              data={area.geoJSON}
-              interactive
-              key={`${area.id}-polygon`}>
-              <Tooltip>{area.name}</Tooltip>
-              <Popup minWidth={80}>
-                <h3>{area.name}</h3>
-              </Popup>
-            </GeoJSON>
-          );
-        })}
-      </LayerGroup>
-    </LayersControl.Overlay>
-  );
-}

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubble.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-import {guideLength, textPadding} from "./Bubbles";
-
-export interface BubbleProps {
-  radius: number;
-  maxRadius: number;
-  text?: string;
-  textAlign?: "left" | "right";
-  color?: string;
-  stroke?: string;
-  pattern?: string;
-  gap?: number;
-}
-
-const Bubble = ({ radius, maxRadius, text, textAlign, color, stroke, pattern }: BubbleProps) => {
-  const leftAlign = textAlign === "left";
-  const x = maxRadius;
-  const y = maxRadius * 2 - radius;
-  const x2 = leftAlign ? x - maxRadius - guideLength : x + maxRadius + guideLength;
-  const y2 = maxRadius * 2 - radius * 2;
-  const textX = x2 + (leftAlign ? -textPadding : textPadding);
-  const textAnchor = leftAlign ? "end" : "start";
-
-  return (
-    <g>
-      <circle
-        cx={x}
-        cy={y}
-        r={radius}
-        stroke={stroke || "#000"}
-        style={{
-          fill: pattern ? `url(#${pattern})` : color || "none",
-          strokeWidth: 0.5,
-        }}
-      />
-      {text && (
-        <g>
-          <line x1={x} x2={x2} y1={y2} y2={y2} stroke="black" style={{ strokeDasharray: "2, 2", strokeWidth: 0.5 }} />
-          <text x={textX} y={y2} textAnchor={textAnchor} alignmentBaseline="middle" style={{ fontSize: 12 }}>
-            {text}
-          </text>
-        </g>
-      )}
-    </g>
-  );
-};
-
-export default Bubble;

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/index.tsx

@@ -1,39 +0,0 @@
-import {Divider} from "@dhis2/ui";
-import type {Legend} from "@hisptz/dhis2-utils";
-import React, {forwardRef} from "react";
-import {ThematicLayerData, ThematicLayerDataItem} from "../../../../../../interfaces";
-import LegendCardHeader from "../../../../../LegendArea/components/LegendCardHeader";
-import Bubbles from "./components/Bubbles";
-
-function BubbleLegend(
-  {
-    radius,
-    dataItem,
-    data,
-    name,
-    collapsible,
-    onCollapse,
-    legends,
-  }: {
-    radius: { min: number; max: number };
-    dataItem: ThematicLayerDataItem;
-    data: ThematicLayerData[];
-    name?: string;
-    collapsible?: boolean;
-    onCollapse?: () => void;
-    legends: Legend[];
-  },
-  ref: React.LegacyRef<HTMLDivElement> | undefined
-) {
-  return (
-    <div className="legend-card" ref={ref}>
-      <LegendCardHeader title={dataItem.displayName} onCollapse={onCollapse} collapsible={collapsible} />
-      <Divider margin={"0"} />
-      <div className="legend-list pt-8">
-        <Bubbles classes={legends.reverse()} radiusHigh={radius.max} radiusLow={radius.min} color={"#FF0000"} />
-      </div>
-    </div>
-  );
-}
-
-export default forwardRef(BubbleLegend);

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/index.tsx

@@ -1,57 +0,0 @@
-import {colors} from "@dhis2/ui";
-import type {Legend} from "@hisptz/dhis2-utils";
-import {geoJSON} from "leaflet";
-import React, {useMemo} from "react";
-import {CircleMarker} from "react-leaflet";
-import {getColorFromLegendSet, highlightFeature, resetHighlight} from "../../../../../../utils/map";
-import {ThematicLayerData} from "../../../../interfaces";
-import CustomTooltip from "../CustomTooltip";
-
-const defaultStyle = {
-  weight: 1,
-};
-const highlightStyle = {
-  weight: 2,
-};
-
-export default function Bubble({
-  data,
-  highestData,
-  legends,
-  radius,
-}: {
-  data: ThematicLayerData;
-  highestData: number;
-  legends: Legend[];
-  radius?: { min: number; max: number };
-}) {
-  const { orgUnit, data: value } = data ?? {};
-
-  const geoJSONObject = orgUnit.geoJSON;
-  const center = geoJSON(geoJSONObject).getBounds().getCenter();
-
-  const circleRadius = useMemo(() => {
-    return ((value ?? 0) * (radius?.max ?? 50)) / highestData;
-  }, [radius, data, highestData]);
-
-  return (
-    <>
-      <CircleMarker
-        interactive
-        eventHandlers={{
-          mouseover: (e) => highlightFeature(e, highlightStyle),
-          mouseout: (e) => resetHighlight(e, defaultStyle),
-        }}
-        pathOptions={{
-          fillColor: getColorFromLegendSet(legends, data.data),
-          fillOpacity: 1,
-          color: colors.grey900,
-          weight: 1,
-        }}
-        radius={circleRadius}
-        center={center}>
-        <CustomTooltip data={data} />
-      </CircleMarker>
-    </>
-  );
-}

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/components/ChoroplethLegend.tsx

@@ -1,43 +0,0 @@
-import "../../../styles/legends.css";
-import {Divider} from "@dhis2/ui";
-import type {Legend} from "@hisptz/dhis2-utils";
-import React, {forwardRef} from "react";
-import {getLegendCount} from "../../../../../../../utils/map";
-import {ThematicLayerData, ThematicLayerDataItem} from "../../../../../interfaces";
-import LegendCardHeader from "../../../../LegendArea/components/LegendCardHeader";
-
-export function LegendItem({ legend, value }: { legend: { startValue: number; endValue: number; color: string }; value: number }) {
-  return (
-    <div className="legend-item">
-      <div className="legend-item-color" style={{ backgroundColor: legend.color }} />
-      <div className="legend-item-label">{`${legend.startValue} - ${legend.endValue}`}</div>
-      <div className="legend-item-value">{`(${value})`}</div>
-    </div>
-  );
-}
-
-function ChoroplethLegend(
-  {
-    dataItem,
-    data,
-    name,
-    collapsible,
-    onCollapse,
-    legends,
-  }: { data: ThematicLayerData[]; dataItem: ThematicLayerDataItem; name?: string; collapsible?: boolean; onCollapse?: () => void; legends: Legend[] },
-  ref: React.LegacyRef<HTMLDivElement> | undefined
-) {
-  return (
-    <div className="legend-card" ref={ref}>
-      <LegendCardHeader title={dataItem.displayName} collapsible={collapsible} onCollapse={onCollapse} />
-      <Divider margin={"0"} />
-      <div className="legend-list pt-8">
-        {legends?.map((legend: any) => (
-          <LegendItem key={`${legend?.color}-legend-list`} legend={legend} value={getLegendCount(legend, data)} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default forwardRef(ChoroplethLegend);

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/index.tsx

@@ -1,38 +0,0 @@
-import {colors} from "@dhis2/ui";
-import type {Legend} from "@hisptz/dhis2-utils";
-import React from "react";
-import {GeoJSON} from "react-leaflet";
-import {MapOrgUnit} from "../../../../../../interfaces";
-import {getColorFromLegendSet, highlightFeature, resetHighlight} from "../../../../../../utils/map";
-import {ThematicLayerDataItem} from "../../../../interfaces";
-import CustomTooltip from "../CustomTooltip";
-
-const defaultStyle = {
-  weight: 1,
-};
-const highlightStyle = {
-  weight: 2,
-};
-
-export default function Choropleth({ data, legends }: { data: { orgUnit: MapOrgUnit; data?: number; dataItem: ThematicLayerDataItem }; legends: Legend[] }) {
-  const { orgUnit } = data;
-  return (
-    <>
-      <GeoJSON
-        data={orgUnit.geoJSON}
-        eventHandlers={{
-          mouseover: (e) => highlightFeature(e, highlightStyle),
-          mouseout: (e) => resetHighlight(e, defaultStyle),
-        }}
-        pathOptions={{
-          fillColor: getColorFromLegendSet(legends, data.data),
-          fillOpacity: 1,
-          color: colors.grey900,
-          weight: 1,
-        }}
-        key={`${data.dataItem.id}-layer`}>
-        <CustomTooltip data={data} />
-      </GeoJSON>
-    </>
-  );
-}

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/CustomTooltip/index.tsx

@@ -1,26 +0,0 @@
-import i18n from "@dhis2/d2-i18n";
-import React from "react";
-import {Pane, Popup, Tooltip} from "react-leaflet";
-import {useMapPeriods} from "../../../../../MapProvider/hooks";
-import {ThematicLayerData} from "../../../../interfaces";
-
-export default function CustomTooltip({ data: dataObject }: { data: ThematicLayerData }) {
-  const { dataItem, orgUnit, data } = dataObject ?? {};
-  const { periods } = useMapPeriods() ?? {};
-
-  return (
-    <Pane name={`${dataItem.displayName}-${orgUnit.id}-popup-pane`} pane="popupPane">
-      <Tooltip>
-        {orgUnit?.name} ({data})
-      </Tooltip>
-      <Popup minWidth={80}>
-        <h3 style={{ margin: 0 }}>{orgUnit?.name}</h3>
-        <div>{dataItem?.displayName}</div>
-        <div>{periods?.map((period) => period.name).join(",")}</div>
-        <div>
-          {i18n.t("Value")}: {data}
-        </div>
-      </Popup>
-    </Pane>
-  );
-}

package/src/components/Map/components/MapLayer/components/ThematicLayer/hooks/config.ts

@@ -1,10 +0,0 @@
-import {find} from "lodash";
-import {useContext} from "react";
-import {MapLayersContext} from "../../../../../state";
-import {CustomThematicLayer} from "../../../interfaces";
-
-export default function useThematicLayer(layerId: string): CustomThematicLayer | undefined {
-  const { layers } = useContext(MapLayersContext);
-
-  return find(layers as CustomThematicLayer[], ["id", layerId]);
-}

package/src/components/Map/components/MapLayer/components/ThematicLayer/index.tsx

@@ -1,46 +0,0 @@
-import {last} from "lodash";
-import React from "react";
-import {LayerGroup, LayersControl, Pane} from "react-leaflet";
-import {CustomBubbleLayer} from "../../interfaces";
-import Bubble from "./components/Bubble";
-import Choropleth from "./components/Choropleth";
-import useThematicLayer from "./hooks/config";
-
-export default function ThematicLayer({ layerId, index }: { layerId: string; index: number }) {
-  const layer = useThematicLayer(layerId);
-
-  if (!layer) {
-    return null;
-  }
-
-  const { type, dataItem, name, data, enabled, legends } = layer ?? {};
-  const uniqueName = name ?? dataItem.displayName;
-  return (
-    <>
-      <LayersControl.Overlay checked={enabled} name={uniqueName}>
-        <Pane
-          style={{
-            zIndex: type === "bubble" ? 500 : 500 - (index + 1),
-          }}
-          name={uniqueName}>
-          <LayerGroup>
-            {data?.map((datum) =>
-              type === "choropleth" ? <Choropleth legends={legends ?? []} data={datum} key={`${datum?.dataItem?.id}-${datum?.orgUnit?.id}-layer`} /> : null
-            )}
-            {data?.map((datum) =>
-              type === "bubble" ? (
-                <Bubble
-                  radius={(layer as CustomBubbleLayer)?.radius}
-                  legends={legends ?? []}
-                  highestData={last(data)?.data ?? 1}
-                  data={datum}
-                  key={`${datum?.dataItem?.id}-${datum?.orgUnit?.id}-layer`}
-                />
-              ) : null
-            )}
-          </LayerGroup>
-        </Pane>
-      </LayersControl.Overlay>
-    </>
-  );
-}

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

@@ -1,32 +0,0 @@
-import React from "react";
-import BoundaryLayer from "./components/BoundaryLayer";
-import GoogleEngineLayer from "./components/GoogleEngineLayer";
-import {PointLayer} from "./components/PointLayer";
-import ThematicLayer from "./components/ThematicLayer";
-import {CustomBoundaryLayer, CustomGoogleEngineLayer, CustomPointLayer, CustomThematicLayer} from "./interfaces";
-
-export default function MapLayer({
-  layer,
-  index,
-}: {
-  layer: CustomThematicLayer | CustomBoundaryLayer | CustomPointLayer | CustomGoogleEngineLayer;
-  index: number;
-}) {
-  switch (layer.type) {
-    case "overlay":
-    case "basemap":
-      return <BoundaryLayer {...layer} />;
-    case "bubble":
-    case "choropleth":
-      return <ThematicLayer layerId={layer.id} index={index} />;
-    case "point":
-      return <PointLayer />;
-    case "population":
-    case "elevation":
-    case "footprints":
-    case "landCover":
-      return <GoogleEngineLayer layerId={layer.id} />;
-    default:
-      return null;
-  }
-}