@hisptz/dhis2-analytics 1.0.5 → 1.0.7

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

@@ -0,0 +1,172 @@
+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;
+  console.log(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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,49 @@
+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/{src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubbles.tsx → build/es/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubbles.js}

@@ -1,80 +1,76 @@
+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, {BubbleProps} from "./Bubble";
-
+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",
+  justifyContent: "center"
 };
-
 const legendWidth = 200;
 const digitWidth = 6.8;
 export const guideLength = 16;
 export const textPadding = 4;
-
-const Bubbles = ({ radiusLow, radiusHigh, color, classes }: { radiusLow: number; radiusHigh: number; color?: string; classes: Array<any> }) => {
+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: Array<BubbleProps> = [];
+  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) => ({
+    bubbles = [...classes].reverse().map(c => ({
       radius: itemScale(c.endValue),
       maxRadius: radiusHigh,
       color: c.color,
-      text: String(c.endValue),
+      text: String(c.endValue)
     }));
 
     // Add the smallest bubble for the lowest value
     bubbles.push({
       radius: itemScale(startValue),
       maxRadius: radiusHigh,
-      text: String(startValue),
+      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"),
-      },
-    ];
+    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
@@ -82,23 +78,16 @@ const Bubbles = ({ radiusLow, radiusHigh, color, classes }: { radiusLow: number;
 
   // Calculate the total length if numbers are alternate on each side
   const alternateLength = (radiusHigh + guideLength + textPadding + textLength) * 2;
-
-  let smallestGap = reduce(bubbles, (prev, curr: any, i) => {
+  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,
-        };
+    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;
   }
@@ -113,38 +102,32 @@ const Bubbles = ({ radiusLow, radiusHigh, color, classes }: { radiusLow: 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));
-
+      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 (
-    <div style={style}>
-      <svg width={legendWidth} height={height + 50}>
-        <g transform={`translate(${alternate ? offset : "16"} 24)`}>
-          {bubbles.map((bubble, i) => (
-            <Bubble key={i} {...bubble} textAlign={alternate && i % 2 == 0 ? "left" : "right"} />
-          ))}
-        </g>
-      </svg>
-    </div>
-  );
+  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 memo(Bubbles);
+export default /*#__PURE__*/memo(Bubbles);

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

@@ -0,0 +1,33 @@
+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);

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

@@ -0,0 +1,47 @@
+import { colors } from "@dhis2/ui";
+import { geoJSON } from "leaflet";
+import React, { useMemo } from "react";
+import { CircleMarker } from "react-leaflet";
+import { getColorFromLegendSet, highlightFeature, resetHighlight } from "../../../../../../utils/map";
+import CustomTooltip from "../CustomTooltip";
+const defaultStyle = {
+  weight: 1
+};
+const highlightStyle = {
+  weight: 2
+};
+export default function Bubble(_ref) {
+  let {
+    data,
+    highestData,
+    legends,
+    radius
+  } = _ref;
+  const {
+    orgUnit,
+    data: value
+  } = data !== null && data !== void 0 ? data : {};
+  const geoJSONObject = orgUnit.geoJSON;
+  const center = geoJSON(geoJSONObject).getBounds().getCenter();
+  const circleRadius = useMemo(() => {
+    var _radius$max;
+    return (value !== null && value !== void 0 ? value : 0) * ((_radius$max = radius === null || radius === void 0 ? void 0 : radius.max) !== null && _radius$max !== void 0 ? _radius$max : 50) / highestData;
+  }, [radius, data, highestData]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CircleMarker, {
+    interactive: true,
+    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
+  }, /*#__PURE__*/React.createElement(CustomTooltip, {
+    data: data
+  })));
+}

package/build/es/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/components/ChoroplethLegend.js

@@ -0,0 +1,50 @@
+import "../../../styles/legends.css";
+import { Divider } from "@dhis2/ui";
+import React, { forwardRef } from "react";
+import { getLegendCount } from "../../../../../../../utils/map";
+import LegendCardHeader from "../../../../LegendArea/components/LegendCardHeader";
+export function LegendItem(_ref) {
+  let {
+    legend,
+    value
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "legend-item-color",
+    style: {
+      backgroundColor: legend.color
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "legend-item-label"
+  }, `${legend.startValue} - ${legend.endValue}`), /*#__PURE__*/React.createElement("div", {
+    className: "legend-item-value"
+  }, `(${value})`));
+}
+function ChoroplethLegend(_ref2, ref) {
+  let {
+    dataItem,
+    data,
+    name,
+    collapsible,
+    onCollapse,
+    legends
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "legend-card",
+    ref: ref
+  }, /*#__PURE__*/React.createElement(LegendCardHeader, {
+    title: dataItem.displayName,
+    collapsible: collapsible,
+    onCollapse: onCollapse
+  }), /*#__PURE__*/React.createElement(Divider, {
+    margin: "0"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "legend-list pt-8"
+  }, legends === null || legends === void 0 ? void 0 : legends.map(legend => /*#__PURE__*/React.createElement(LegendItem, {
+    key: `${legend === null || legend === void 0 ? void 0 : legend.color}-legend-list`,
+    legend: legend,
+    value: getLegendCount(legend, data)
+  }))));
+}
+export default /*#__PURE__*/forwardRef(ChoroplethLegend);