@hisptz/dhis2-analytics 1.0.66 → 2.0.0-alpha.1

package/build/es/components/Map/components/MapLayer/components/GoogleEngineLayer/utils/index.js

@@ -1,111 +0,0 @@
-export const combineReducers = ee => types => types.reduce((r, t, i) => i === 0 ? r[t]() : r.combine({
-  reducer2: ee.Reducer[t](),
-  sharedInputs: true
-}), ee.Reducer);
-export const getInfo = instance => new Promise((resolve, reject) => instance.evaluate((data, error) => {
-  if (error) {
-    reject(error);
-  } else {
-    resolve(data);
-  }
-}));
-export const getFeatureCollectionProperties = data => data.features.reduce((obj, f) => ({
-  ...obj,
-  [f.id]: f.properties
-}), {});
-export const getScale = async image => {
-  return image.select(0).projection().nominalScale();
-};
-const getParamsFromLegend = legend => {
-  const keys = legend.map(l => l.id);
-  const min = Math.min(...keys);
-  const max = Math.max(...keys);
-  const palette = legend.map(l => l.color).join(",");
-  return {
-    min,
-    max,
-    palette
-  };
-};
-export const getClassifiedImage = (eeImage, _ref) => {
-  var _legends$items;
-  let {
-    legend: legends,
-    params
-  } = _ref;
-  const legend = (_legends$items = legends === null || legends === void 0 ? void 0 : legends.items) !== null && _legends$items !== void 0 ? _legends$items : [];
-  if (!params) {
-    // Image has classes (e.g. landcover)
-    return {
-      eeImage,
-      params: getParamsFromLegend(legend)
-    };
-  }
-  const min = 0;
-  const max = legend.length - 1;
-  const {
-    palette
-  } = params;
-  let zones;
-  for (let i = min, item; i < max; i++) {
-    item = legend[i];
-    if (!zones) {
-      zones = eeImage.gt(item.to);
-    } else {
-      zones = zones.add(eeImage.gt(item.to));
-    }
-  }
-  return {
-    eeImage: zones,
-    params: {
-      min,
-      max,
-      palette
-    }
-  };
-};
-const squareMetersToHectares = value => value / 10000;
-const squareMetersToAcres = value => value / 4046.8564224;
-const classAggregation = ["percentage", "hectares", "acres"];
-export const hasClasses = type => classAggregation.includes(type);
-export const getHistogramStatistics = _ref2 => {
-  let {
-    data,
-    scale,
-    aggregationType,
-    legend
-  } = _ref2;
-  return data.features.reduce((obj, _ref3) => {
-    let {
-      id,
-      properties
-    } = _ref3;
-    const {
-      histogram
-    } = properties;
-    const sum = Object.values(histogram).reduce((a, b) => a + b, 0);
-    obj[id] = legend.reduce((values, _ref4) => {
-      let {
-        id
-      } = _ref4;
-      const count = histogram[id] || 0;
-      const sqMeters = count * (scale * scale);
-      let value;
-      switch (aggregationType) {
-        case "hectares":
-          value = Math.round(squareMetersToHectares(sqMeters));
-          break;
-        case "acres":
-          value = Math.round(squareMetersToAcres(sqMeters));
-          break;
-        default:
-          value = count / sum * 100;
-        // percentage
-      }
-
-      values[id] = value;
-      return values;
-    }, {});
-    return obj;
-  }, {});
-};

package/build/es/components/Map/components/MapLayer/components/LegendArea/LegendArea.module.css

@@ -1,12 +0,0 @@
-.map-tooltip {
-    padding: 4px 6px;
-    border-radius: 3px;
-    font-size: 13px;
-    line-height: 17px;
-    z-index: 1000000 !important;
-}
-
-[data-test="dhi2-uicore-popper"] {
-
-}
-

package/build/es/components/Map/components/MapLayer/components/LegendArea/components/LegendCardHeader/index.js

@@ -1,19 +0,0 @@
-import { IconLaunch16 } from "@dhis2/ui";
-import React from "react";
-export default function LegendCardHeader(_ref) {
-  let {
-    title,
-    collapsible,
-    onCollapse
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "row w-100 space-between align-items-center"
-  }, /*#__PURE__*/React.createElement("h4", {
-    style: {
-      margin: 0
-    },
-    className: "legend-header"
-  }, title), collapsible && /*#__PURE__*/React.createElement("div", {
-    onClick: onCollapse
-  }, /*#__PURE__*/React.createElement(IconLaunch16, null)));
-}

package/build/es/components/Map/components/MapLayer/components/LegendArea/index.js

@@ -1,171 +0,0 @@
-import { colors, IconLegend24, Popper, Portal } from "@dhis2/ui";
-import { compact, head } from "lodash";
-import React, { useEffect, useRef, useState } from "react";
-import { CustomControl } from "../../../MapControls/components/CustomControl";
-import { 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) {
-  var _ref, _radius, _head$dataItem, _head, _head$dataItem2, _head2;
-  if (layer.type === "point") {
-    return /*#__PURE__*/React.createElement(PointLegend, {
-      name: layer.label
-    });
-  }
-  if (SUPPORTED_EARTH_ENGINE_LAYERS.includes(layer.type)) {
-    var _layer$name;
-    return /*#__PURE__*/React.createElement(EarthEngineLegend, {
-      name: (_layer$name = layer.name) !== null && _layer$name !== void 0 ? _layer$name : "",
-      layer: layer
-    });
-  }
-  const {
-    type,
-    enabled,
-    control,
-    dataItem,
-    name,
-    data,
-    legends
-  } = (_ref = layer) !== null && _ref !== void 0 ? _ref : {};
-  if (!enabled || !control) {
-    return null;
-  }
-  switch (type) {
-    case "bubble":
-      return /*#__PURE__*/React.createElement(BubbleLegend, {
-        radius: (_radius = layer === null || layer === void 0 ? void 0 : layer.radius) !== null && _radius !== void 0 ? _radius : {
-          min: 0,
-          max: 50
-        },
-        legends: legends !== null && legends !== void 0 ? legends : [],
-        name: name !== null && name !== void 0 ? name : dataItem.displayName,
-        data: data,
-        dataItem: (_head$dataItem = (_head = head(data)) === null || _head === void 0 ? void 0 : _head.dataItem) !== null && _head$dataItem !== void 0 ? _head$dataItem : dataItem
-      });
-    case "choropleth":
-      return /*#__PURE__*/React.createElement(ChoroplethLegend, {
-        legends: legends !== null && legends !== void 0 ? legends : [],
-        name: name !== null && name !== void 0 ? name : dataItem.displayName,
-        data: data,
-        dataItem: (_head$dataItem2 = (_head2 = head(data)) === null || _head2 === void 0 ? void 0 : _head2.dataItem) !== null && _head$dataItem2 !== void 0 ? _head$dataItem2 : dataItem
-      });
-  }
-}
-function CollapsedLegendIcon(_ref2) {
-  let {
-    onCollapse,
-    name
-  } = _ref2;
-  const openDelay = 200;
-  const closeDelay = 200;
-  const [openTooltip, setOpenTooltip] = useState(false);
-  const openTimerRef = useRef(null);
-  const closeTimerRef = useRef(null);
-  const ref = useRef(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 /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut,
-    onClick: onCollapse,
-    style: {
-      width: 28,
-      height: 28
-    },
-    className: "legend-card collapsed"
-  }, /*#__PURE__*/React.createElement(IconLegend24, null), openTooltip && /*#__PURE__*/React.createElement(Portal, {
-    className: classes["map-tooltip"]
-  }, /*#__PURE__*/React.createElement(Popper, {
-    className: classes["map-tooltip"],
-    reference: ref,
-    modifiers: [offsetModifier, flipModifier, hideModifier]
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundColor: `${colors.grey900}`,
-      borderRadius: 3,
-      color: `${colors.white}`,
-      padding: "4px 6px"
-    },
-    "data-test": `content`
-  }, name))));
-}
-function Legend(_ref3) {
-  var _head3;
-  let {
-    children,
-    collapsible
-  } = _ref3;
-  const [collapsed, setCollapsed] = useState(collapsible);
-  const inPrintMode = usePrintMedia();
-  const onCollapse = () => {
-    if (collapsible) {
-      setCollapsed(prevState => !prevState);
-    }
-  };
-  const name = (_head3 = head(React.Children.toArray(children))) === null || _head3 === void 0 ? void 0 : _head3.props.name;
-  const shouldCollapse = collapsed && !inPrintMode;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-100"
-  }, shouldCollapse ? /*#__PURE__*/React.createElement(CollapsedLegendIcon, {
-    name: name,
-    onCollapse: onCollapse
-  }) : React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
-    collapsible,
-    onCollapse
-  })));
-}
-export default function LegendArea(_ref4) {
-  let {
-    layers,
-    legends: legendConfig
-  } = _ref4;
-  const legends = compact(layers.filter(layer => layer.enabled).map(getLegendComponent));
-  const {
-    position,
-    collapsible
-  } = legendConfig !== null && legendConfig !== void 0 ? legendConfig : {};
-  return /*#__PURE__*/React.createElement(CustomControl, {
-    position: position
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "column gap-16 align-items-end"
-  }, legends === null || legends === void 0 ? void 0 : legends.map((legend, index) => /*#__PURE__*/React.createElement(Legend, {
-    collapsible: collapsible !== null && collapsible !== void 0 ? collapsible : true,
-    key: `${index}-map-legend`
-  }, legend))));
-}

package/build/es/components/Map/components/MapLayer/components/PointLayer/components/PointLegend/index.js

@@ -1,76 +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(_ref) {
-  let {
-    orgUnitGroups,
-    icon,
-    label
-  } = _ref;
-  const {
-    baseUrl
-  } = useConfig();
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      minWidth: 100,
-      alignItems: "flex-start"
-    },
-    className: "w-100 p-8 legend-list column"
-  }, icon && /*#__PURE__*/React.createElement("div", {
-    key: `${icon}-legend`,
-    className: "row gap-16  align-items-center"
-  }, /*#__PURE__*/React.createElement("img", {
-    height: 20,
-    width: 20,
-    alt: `${name}-icon`,
-    src: getIconUrl(icon, {
-      baseUrl
-    })
-  }), /*#__PURE__*/React.createElement("p", null, label)), orgUnitGroups.map(_ref2 => {
-    let {
-      name,
-      symbol
-    } = _ref2;
-    return /*#__PURE__*/React.createElement("div", {
-      key: `${name}-legend`,
-      className: "row gap-16  align-items-center"
-    }, /*#__PURE__*/React.createElement("img", {
-      height: 20,
-      width: 20,
-      alt: `${name}-icon`,
-      src: getIconUrl(symbol !== null && symbol !== void 0 ? symbol : "", {
-        baseUrl
-      })
-    }), /*#__PURE__*/React.createElement("p", null, name));
-  }));
-}
-function PointLegend(_ref3, ref) {
-  var _style$orgUnitGroups;
-  let {
-    collapsible,
-    onCollapse
-  } = _ref3;
-  const pointLayer = usePointLayer();
-  const {
-    label,
-    style
-  } = pointLayer !== null && pointLayer !== void 0 ? pointLayer : {};
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: "legend-card"
-  }, /*#__PURE__*/React.createElement(LegendCardHeader, {
-    collapsible: collapsible,
-    onCollapse: onCollapse,
-    title: label !== null && label !== void 0 ? label : "Points"
-  }), /*#__PURE__*/React.createElement(Divider, {
-    margin: "0"
-  }), /*#__PURE__*/React.createElement(PointLegends, {
-    label: label,
-    orgUnitGroups: (_style$orgUnitGroups = style === null || style === void 0 ? void 0 : style.orgUnitGroups) !== null && _style$orgUnitGroups !== void 0 ? _style$orgUnitGroups : [],
-    icon: style === null || style === void 0 ? void 0 : style.icon
-  }));
-}
-export default /*#__PURE__*/forwardRef(PointLegend);

package/build/es/components/Map/components/MapLayer/components/PointLayer/hooks/index.js

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

package/build/es/components/Map/components/MapLayer/components/PointLayer/index.js

@@ -1,39 +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 { getIcon, getIconUrl } from "../../../../utils/helpers";
-import { usePointLayer } from "./hooks";
-export function PointLayer() {
-  const pointLayer = usePointLayer();
-  const {
-    enabled,
-    label,
-    points: orgUnits,
-    style
-  } = pointLayer !== null && pointLayer !== void 0 ? pointLayer : {};
-  const {
-    baseUrl
-  } = useConfig();
-  return /*#__PURE__*/React.createElement(LayersControl.Overlay, {
-    checked: enabled,
-    name: label !== null && label !== void 0 ? label : i18n.t("Points")
-  }, /*#__PURE__*/React.createElement(LayerGroup, null, orgUnits === null || orgUnits === void 0 ? void 0 : orgUnits.map(area => {
-    return /*#__PURE__*/React.createElement(GeoJSON, {
-      pointToLayer: (_, coordinates) => {
-        var _area$icon$icon;
-        return L.marker(coordinates, {
-          icon: getIcon(getIconUrl((_area$icon$icon = area.icon.icon) !== null && _area$icon$icon !== void 0 ? _area$icon$icon : style === null || style === void 0 ? void 0 : style.icon, {
-            baseUrl
-          }))
-        });
-      },
-      data: area.geoJSON,
-      interactive: true,
-      key: `${area.id}-polygon`
-    }, /*#__PURE__*/React.createElement(Tooltip, null, area.name), /*#__PURE__*/React.createElement(Popup, {
-      minWidth: 80
-    }, /*#__PURE__*/React.createElement("h3", null, area.name)));
-  })));
-}

package/build/es/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubble.js

@@ -1,49 +0,0 @@
-import React from "react";
-import { guideLength, textPadding } from "./Bubbles";
-const Bubble = _ref => {
-  let {
-    radius,
-    maxRadius,
-    text,
-    textAlign,
-    color,
-    stroke,
-    pattern
-  } = _ref;
-  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 /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("circle", {
-    cx: x,
-    cy: y,
-    r: radius,
-    stroke: stroke || "#000",
-    style: {
-      fill: pattern ? `url(#${pattern})` : color || "none",
-      strokeWidth: 0.5
-    }
-  }), text && /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
-    x1: x,
-    x2: x2,
-    y1: y2,
-    y2: y2,
-    stroke: "black",
-    style: {
-      strokeDasharray: "2, 2",
-      strokeWidth: 0.5
-    }
-  }), /*#__PURE__*/React.createElement("text", {
-    x: textX,
-    y: y2,
-    textAnchor: textAnchor,
-    alignmentBaseline: "middle",
-    style: {
-      fontSize: 12
-    }
-  }, text)));
-};
-export default Bubble;

package/build/es/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubbles.js

@@ -1,133 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import i18n from "@dhis2/d2-i18n";
-import { scaleSqrt } from "d3-scale";
-import { reduce } from "lodash";
-import React, { memo } from "react";
-import { getContrastColor } from "../../../../../../../../../utils/colors";
-import { getLongestTextLength } from "../../../../../../../../../utils/helpers";
-import Bubble from "./Bubble";
-const style = {
-  paddingTop: 10,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center"
-};
-const legendWidth = 200;
-const digitWidth = 6.8;
-export const guideLength = 16;
-export const textPadding = 4;
-const Bubbles = _ref => {
-  let {
-    radiusLow,
-    radiusHigh,
-    color,
-    classes
-  } = _ref;
-  const height = radiusHigh * 2 + 4;
-  const scale = scaleSqrt().range([radiusLow, radiusHigh]);
-  const radiusMid = scale(0.5);
-  if (isNaN(radiusLow) || isNaN(radiusHigh)) {
-    return null;
-  }
-  let bubbles = [];
-
-  // If color legend
-  if (Array.isArray(classes) && classes.length) {
-    const startValue = classes[0].startValue;
-    const endValue = classes[classes.length - 1].endValue;
-    const itemScale = scale.domain([startValue, endValue]);
-    bubbles = [...classes].reverse().map(c => ({
-      radius: itemScale(c.endValue),
-      maxRadius: radiusHigh,
-      color: c.color,
-      text: String(c.endValue)
-    }));
-
-    // Add the smallest bubble for the lowest value
-    bubbles.push({
-      radius: itemScale(startValue),
-      maxRadius: radiusHigh,
-      text: String(startValue)
-    });
-  } else {
-    // If single color
-    const stroke = color && getContrastColor(color);
-    bubbles = [{
-      radius: radiusHigh,
-      maxRadius: radiusHigh,
-      color,
-      stroke,
-      text: i18n.t("Max")
-    }, {
-      radius: radiusMid,
-      maxRadius: radiusHigh,
-      color,
-      stroke,
-      text: i18n.t("Mid")
-    }, {
-      radius: radiusLow,
-      maxRadius: radiusHigh,
-      color,
-      stroke,
-      text: i18n.t("Min")
-    }];
-  }
-
-  // Calculate the pixel length of the longest number
-  let textLength = Math.ceil(Math.max(getLongestTextLength(classes, "startValue"), getLongestTextLength(classes, "endValue")) * digitWidth);
-
-  // Calculate the total length if numbers are alternate on each side
-  const alternateLength = (radiusHigh + guideLength + textPadding + textLength) * 2;
-  let smallestGap = reduce(bubbles, (prev, curr, i) => {
-    const gap = prev.radius - curr.radius;
-    const smallestGap = prev.gap === undefined || gap < prev.gap ? gap : prev.gap;
-    return i === bubbles.length - 1 ? Math.round(smallestGap * 2) : {
-      radius: curr.radius,
-      gap: smallestGap
-    };
-  });
-  const alternateFit = alternateLength < legendWidth;
-  const alternate = alternateFit && smallestGap > 5 && smallestGap < 12;
-  if (!alternateFit) {
-    smallestGap = smallestGap / 2;
-  }
-
-  // Too cramped to show number for each bubble
-  if (smallestGap < 4) {
-    const [maxBubble] = bubbles;
-    const minBubble = bubbles[bubbles.length - 1];
-    const gap = maxBubble.radius - minBubble.radius;
-    const showNumbers = [0]; // Always show the largest number
-
-    if (gap > 4) {
-      showNumbers.push(bubbles.length - 1);
-    }
-    if (gap > 15) {
-      const midRadius = minBubble.radius + gap / 2;
-
-      // Find the closest bubble above the mid-radius
-      const midBubble = bubbles.reduce((prev, curr) => curr.radius >= midRadius && curr.radius - midRadius < prev.radius - midRadius ? curr : prev);
-      showNumbers.push(bubbles.indexOf(midBubble));
-    }
-    bubbles.forEach((b, i) => {
-      if (!showNumbers.includes(i)) {
-        delete b.text;
-      }
-    });
-  }
-  textLength = Math.ceil(getLongestTextLength(bubbles, "text") * digitWidth);
-  const offset = textLength + guideLength + textPadding;
-  return /*#__PURE__*/React.createElement("div", {
-    style: style
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: legendWidth,
-    height: height + 50
-  }, /*#__PURE__*/React.createElement("g", {
-    transform: `translate(${alternate ? offset : "16"} 24)`
-  }, bubbles.map((bubble, i) => /*#__PURE__*/React.createElement(Bubble, _extends({
-    key: i
-  }, bubble, {
-    textAlign: alternate && i % 2 == 0 ? "left" : "right"
-  }))))));
-};
-export default /*#__PURE__*/memo(Bubbles);

package/build/es/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/index.js

@@ -1,33 +0,0 @@
-import { Divider } from "@dhis2/ui";
-import React, { forwardRef } from "react";
-import LegendCardHeader from "../../../../../LegendArea/components/LegendCardHeader";
-import Bubbles from "./components/Bubbles";
-function BubbleLegend(_ref, ref) {
-  let {
-    radius,
-    dataItem,
-    data,
-    name,
-    collapsible,
-    onCollapse,
-    legends
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "legend-card",
-    ref: ref
-  }, /*#__PURE__*/React.createElement(LegendCardHeader, {
-    title: dataItem.displayName,
-    onCollapse: onCollapse,
-    collapsible: collapsible
-  }), /*#__PURE__*/React.createElement(Divider, {
-    margin: "0"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "legend-list pt-8"
-  }, /*#__PURE__*/React.createElement(Bubbles, {
-    classes: legends.reverse(),
-    radiusHigh: radius.max,
-    radiusLow: radius.min,
-    color: "#FF0000"
-  })));
-}
-export default /*#__PURE__*/forwardRef(BubbleLegend);