@undp/data-viz 1.3.0 → 1.3.1

package/dist/DotDensityMap.js

@@ -1,2 +1,601 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-BHm2KTjD-D8FylaKc.cjs"),n=require("react"),be=require("./index-CZbIGs8q.cjs"),Ee=require("./parse-hMnG_lRV.cjs"),Re=require("./Typography-CDR-DAHH.cjs"),ye=require("./getSliderMarks-DDJ1CdhL.cjs"),Ce=require("./Spinner-UmN-KPe9.cjs"),Se=require("./index-BXns0-ng.cjs"),N=require("./zoom-Lo7IAUfC.cjs"),De=require("./Modal-cQF2UQIa.cjs"),$e=require("./Tooltip-BM18N_3l.cjs"),R=require("./Colors.js"),Ne=require("./string2HTML-X4ZYX5jI.cjs"),ve=require("./index-CEc_9zWy.cjs"),K=require("./use-in-view-Dl1CsAIo.cjs"),Me=require("./pow-B5-jkdHU.cjs"),je=require("./select-Bnfk0lJx.cjs"),Oe=require("./index-a2C2Bqn2.cjs"),qe=require("./GraphFooter.js"),Ie=require("./GraphHeader.js"),Pe=require("./fetchAndParseData.js"),we=require("./checkIfNullOrUndefined.js"),Te=require("./init-DU0ybBc_.cjs");function Le(pe){const{data:l,colors:c,mapData:k,colorLegendTitle:M,colorDomain:j,radius:v,height:p,width:a,scale:Z,centerPoint:O,tooltip:J,showLabels:me,mapBorderWidth:Q,mapBorderColor:ee,mapNoDataColor:B,onSeriesMouseOver:te,showColorScale:xe,zoomScaleExtend:C,zoomTranslateExtend:he,highlightedDataPoints:re,onSeriesMouseClick:H,resetSelectionOnDoubleClick:g,detailsOnClick:S,styles:oe,classNames:ge,mapProjection:L,zoomInteraction:q,animate:f,dimmedOpacity:ae,customLayers:ie,maxRadiusValue:se}=pe,[A,ne]=n.useState(void 0),[U,h]=n.useState(!(a<680)),z=n.useRef(null),[I,F]=n.useState(void 0),[le,y]=n.useState(void 0),[b,G]=n.useState(void 0),[ce,V]=n.useState(void 0),P=n.useRef(null),X=K.useInView(P,{once:f.once,amount:f.amount}),_=n.useRef(null),d=l.filter(e=>e.radius===void 0||e.radius===null).length!==l.length?Me.sqrt().domain([0,se]).range([.25,v]).nice():void 0;n.useEffect(()=>{const e=je.select(_.current),x=je.select(P.current),o=i=>{if(q==="noZoom")return!1;if(q==="button")return!i.type.includes("wheel");const t=i.type==="wheel",u=i.type.startsWith("touch"),w=i.type==="mousedown"||i.type==="mousemove";return u?!0:t?q==="scroll"?!0:i.ctrlKey:w&&!i.button&&!i.ctrlKey},E=N.zoom().scaleExtent(C).translateExtent(he||[[-20,-20],[a+20,p+20]]).filter(o).on("zoom",({transform:i})=>{e.attr("transform",i)});x.call(E),z.current=E},[p,a,q]);const m=N.turf_bbox_default(k),D=N.turf_centroid_default(k),Y=m[2]-m[0],ue=m[3]-m[1],T=a*190/960*360/Y,fe=p*190/678*180/ue,s=Z*Math.min(T,fe),$=L==="mercator"?N.geoMercator().rotate([0,0]).center(O||D.geometry.coordinates).translate([a/2,p/2]).scale(s):L==="equalEarth"?N.geoEqualEarth().rotate([0,0]).center(O||D.geometry.coordinates).translate([a/2,p/2]).scale(s):L==="naturalEarth"?N.geoNaturalEarth1().rotate([0,0]).center(O||D.geometry.coordinates).translate([a/2,p/2]).scale(s):L==="orthographic"?N.geoOrthographic().rotate([0,0]).center(O||D.geometry.coordinates).translate([a/2,p/2]).scale(s):N.geoAlbersUsa().rotate([0,0]).center(O||D.geometry.coordinates).translate([a/2,p/2]).scale(s),W=e=>{if(!P.current||!z.current)return;je.select(P.current).call(z.current.scaleBy,e==="in"?1.2:1/1.2)};return r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsxs("div",{className:"relative",children:[r.jsxRuntimeExports.jsx(K.motion.svg,{width:`${a}px`,height:`${p}px`,viewBox:`0 0 ${a} ${p}`,ref:P,direction:"ltr",children:r.jsxRuntimeExports.jsxs("g",{ref:_,children:[ie.filter(e=>e.position==="before").map(e=>e.layer),k.features.map((e,x)=>r.jsxRuntimeExports.jsx("g",{children:e.geometry.type==="MultiPolygon"?e.geometry.coordinates.map((o,E)=>{let i="";return o.forEach(t=>{let u=" M";t.forEach((w,ke)=>{const de=$([w[0],w[1]]);ke!==t.length-1?u=`${u}${de[0]} ${de[1]}L`:u=`${u}${de[0]} ${de[1]}`}),i+=u}),r.jsxRuntimeExports.jsx("path",{d:i,style:{stroke:ee,strokeWidth:Q,fill:B}},E)}):e.geometry.coordinates.map((o,E)=>{let i="M";return o.forEach((t,u)=>{const w=$([t[0],t[1]]);u!==o.length-1?i=`${i}${w[0]} ${w[1]}L`:i=`${i}${w[0]} ${w[1]}`}),r.jsxRuntimeExports.jsx("path",{d:i,style:{stroke:ee,strokeWidth:Q,fill:B}},E)})},x)),r.jsxRuntimeExports.jsx(Oe.AnimatePresence,{children:l.map(e=>{const x=l.filter(o=>o.color).length===0?c[0]:e.color?c[j.indexOf(`${e.color}`)]:R.Colors.gray;return r.jsxRuntimeExports.jsxs(K.motion.g,{variants:{initial:{opacity:0},whileInView:{opacity:A?A===x?1:ae:re.length!==0?re.indexOf(e.label||"")!==-1?1:ae:1,transition:{duration:f.duration}}},initial:"initial",animate:X?"whileInView":"initial",exit:{opacity:0,transition:{duration:f.duration}},onMouseEnter:o=>{y(e),V(o.clientY),G(o.clientX),te?.(e)},onMouseMove:o=>{y(e),V(o.clientY),G(o.clientX)},onMouseLeave:()=>{y(void 0),G(void 0),V(void 0),te?.(void 0)},onClick:()=>{(H||S)&&(Se.isEqual(I,e)&&g?(F(void 0),H?.(void 0)):(F(e),H?.(e)))},transform:`translate(${$([e.long,e.lat])[0]},${$([e.long,e.lat])[1]})`,children:[r.jsxRuntimeExports.jsx(K.motion.circle,{cx:0,cy:0,variants:{initial:{r:0,fill:l.filter(o=>o.color).length===0?c[0]:e.color?c[j.indexOf(`${e.color}`)]:R.Colors.gray,stroke:l.filter(o=>o.color).length===0?c[0]:e.color?c[j.indexOf(`${e.color}`)]:R.Colors.gray},whileInView:{r:d?d(e.radius||0):v,fill:l.filter(o=>o.color).length===0?c[0]:e.color?c[j.indexOf(`${e.color}`)]:R.Colors.gray,stroke:l.filter(o=>o.color).length===0?c[0]:e.color?c[j.indexOf(`${e.color}`)]:R.Colors.gray,transition:{duration:f.duration}}},initial:"initial",animate:X?"whileInView":"initial",exit:{r:0,transition:{duration:f.duration}},style:{fillOpacity:.8}}),me&&e.label?r.jsxRuntimeExports.jsx(K.motion.text,{variants:{initial:{opacity:0,x:d?d(e.radius||0):v},whileInView:{opacity:1,x:d?d(e.radius||0):v,transition:{duration:f.duration}}},initial:"initial",animate:X?"whileInView":"initial",exit:{opacity:0,transition:{duration:f.duration}},y:0,className:"fill-primary-gray-600 dark:fill-primary-gray-300 text-sm",style:{textAnchor:"start"},dx:4,dy:5,children:e.label}):null]},e.label||`${e.lat}-${e.long}`)})}),ie.filter(e=>e.position==="after").map(e=>e.layer)]})}),l.filter(e=>e.color).length===0||xe===!1?null:r.jsxRuntimeExports.jsx("div",{className:"absolute left-4 bottom-4",children:U?r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx("div",{style:{backgroundColor:"rgba(240,240,240, 0.7)",border:"1px solid var(--gray-400)",borderRadius:"999px",width:"24px",height:"24px",padding:"3px",cursor:"pointer",zIndex:10,position:"absolute",right:"-0.75rem",top:"-0.75rem"},onClick:()=>{h(!1)},children:r.jsxRuntimeExports.jsx(ve.X,{})}),r.jsxRuntimeExports.jsxs("div",{className:"p-2",style:{backgroundColor:"rgba(240,240,240, 0.7)"},children:[M&&M!==""?r.jsxRuntimeExports.jsx("p",{className:"p-0 leading-normal overflow-hidden text-primary-gray-700 dark:text-primary-gray-300",style:{display:"-webkit-box",WebkitLineClamp:"1",WebkitBoxOrient:"vertical"},children:M}):null,r.jsxRuntimeExports.jsx("div",{className:"flex flex-col gap-3",children:j.map((e,x)=>r.jsxRuntimeExports.jsxs("div",{className:"flex gap-2 items-center",onMouseOver:()=>{ne(c[x%c.length])},onMouseLeave:()=>{ne(void 0)},children:[r.jsxRuntimeExports.jsx("div",{className:"w-2 h-2 rounded-full",style:{backgroundColor:c[x%c.length]}}),r.jsxRuntimeExports.jsx(Re.TypographyExports.P,{size:"sm",marginBottom:"none",leading:"none",children:e})]},x))})]})]}):r.jsxRuntimeExports.jsx("button",{type:"button",className:"mb-0 border-0 bg-transparent p-0 self-start",onClick:()=>{h(!0)},children:r.jsxRuntimeExports.jsx("div",{className:"items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500",children:"Show Legend"})})}),q==="button"&&r.jsxRuntimeExports.jsxs("div",{className:"absolute left-4 top-4 flex flex-col",children:[r.jsxRuntimeExports.jsx("button",{onClick:()=>W("in"),className:"leading-0 px-2 py-3.5 border border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-400 dark:bg-primary-gray-600 dark:text-primary-gray-100",children:"+"}),r.jsxRuntimeExports.jsx("button",{onClick:()=>W("out"),className:"leading-0 px-2 py-3.5 border border-t-0 border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-400 dark:bg-primary-gray-600 dark:text-primary-gray-100",children:"–"})]})]}),S&&I!==void 0?r.jsxRuntimeExports.jsx(De.ModalExports.Modal,{open:I!==void 0,onClose:()=>{F(void 0)},children:r.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof S=="string"?{__html:Ne.string2HTML(S,I)}:void 0,children:typeof S=="function"?S(I):null})}):null,le&&J&&b&&ce?r.jsxRuntimeExports.jsx($e.Tooltip,{data:le,body:J,xPos:b,yPos:ce,backgroundStyle:oe?.tooltip,className:ge?.tooltip}):null]})}function ze(pe){const{data:l,mapData:c="https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap.json",graphTitle:k,colors:M,sources:j,graphDescription:v,height:p,width:a,footNote:Z="The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.",colorLegendTitle:O,colorDomain:J,radius:me=5,scale:Q=.95,centerPoint:ee,padding:B,mapBorderWidth:te=.5,mapNoDataColor:xe=R.Colors.light.graphNoData,backgroundColor:C=!1,showLabels:he=!1,mapBorderColor:re=R.Colors.light.grays["gray-500"],tooltip:H,relativeHeight:g,onSeriesMouseOver:S,isWorldMap:oe=!0,showColorScale:ge=!0,zoomScaleExtend:L=[.8,6],zoomTranslateExtend:q,graphID:f,highlightedDataPoints:ae=[],onSeriesMouseClick:ie,graphDownload:se=!1,dataDownload:A=!1,showAntarctica:ne=!1,language:U="en",minHeight:h=0,theme:z="light",ariaLabel:I,resetSelectionOnDoubleClick:F=!0,detailsOnClick:le,styles:y,classNames:b,mapProjection:G,zoomInteraction:ce="button",animate:V=!1,dimmedOpacity:P=.3,customLayers:X=[],maxRadiusValue:_,timeline:d={enabled:!1,autoplay:!1,showOnlyActiveDate:!0}}=pe,[m,D]=n.useState(0),[Y,ue]=n.useState(0),[T,fe]=n.useState(d.autoplay),s=ye.sort(be.uniqBy(l.filter(t=>t.date!==void 0&&t.date!==null),t=>t.date).map(t=>Ee.parse(`${t.date}`,d.dateFormat||"yyyy",new Date).getTime()),(t,u)=>Te.ascending(t,u)),[$,W]=n.useState(d.autoplay?0:s.length-1),[e,x]=n.useState(void 0),o=n.useRef(null),E=n.useRef(null);n.useEffect(()=>{const t=new ResizeObserver(u=>{D(a||u[0].target.clientWidth||760),ue(p||u[0].target.clientHeight||480)});return o.current&&(ue(o.current.clientHeight||480),D(o.current.clientWidth||760),a||t.observe(o.current)),()=>t.disconnect()},[a,p]),n.useEffect(()=>{typeof c=="string"?Pe.fetchAndParseJSON(c).then(u=>{x(u)}):x(c)},[c]),n.useEffect(()=>{const t=setInterval(()=>{W(u=>u<s.length-1?u+1:0)},(d.speed||2)*1e3);return T||clearInterval(t),()=>clearInterval(t)},[s,T,d.speed]);const i=ye.getSliderMarks(s,$,d.showOnlyActiveDate,d.dateFormat||"yyyy");return r.jsxRuntimeExports.jsx("div",{className:`${z||"light"} flex  ${a?"w-fit grow-0":"w-full grow"}`,dir:U==="he"||U==="ar"?"rtl":void 0,children:r.jsxRuntimeExports.jsx("div",{className:Re.cnExports.cn(`${C?C===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${U||"en"}`,b?.graphContainer),style:{...y?.graphContainer||{},...C&&C!==!0?{backgroundColor:C}:{}},id:f,ref:E,"aria-label":I||`${k?`The graph shows ${k}. `:""}This is a dot density map showing the distribution of a variable across a region or world, with each dot representing a data point.${v?` ${v}`:""}`,children:r.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:C?B||"1rem":B||0},children:r.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[k||v||se||A?r.jsxRuntimeExports.jsx(Ie.GraphHeader,{styles:{title:y?.title,description:y?.description},classNames:{title:b?.title,description:b?.description},graphTitle:k,graphDescription:v,width:a,graphDownload:se?E.current:void 0,dataDownload:A?l.map(t=>t.data).filter(t=>t!==void 0).length>0?l.map(t=>t.data).filter(t=>t!==void 0):l.filter(t=>t!==void 0):null}):null,d.enabled&&s.length>0&&i?r.jsxRuntimeExports.jsxs("div",{className:"flex gap-6 items-center",dir:"ltr",children:[r.jsxRuntimeExports.jsx("button",{type:"button",onClick:()=>{fe(!T)},className:"p-0 border-0 cursor-pointer bg-transparent","aria-label":T?"Click to pause animation":"Click to play animation",children:T?r.jsxRuntimeExports.jsx(ve.Pause,{}):r.jsxRuntimeExports.jsx(ve.Play,{})}),r.jsxRuntimeExports.jsx(ye.SliderUIExports.SliderUI,{min:s[0],max:s[s.length-1],marks:i,step:null,defaultValue:s[s.length-1],value:s[$],onChangeComplete:t=>{W(s.indexOf(t))},onChange:t=>{W(s.indexOf(t))},"aria-label":"Time slider. Use arrow keys to adjust selected time period."})]}):null,r.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:o,"aria-label":"Map area",children:(a||m)&&(p||Y)&&e?r.jsxRuntimeExports.jsx(Le,{data:l.filter(t=>d.enabled?t.date===Ee.format(new Date(s[$]),d.dateFormat||"yyyy"):t),mapData:ne?e:{...e,features:e.features.filter(t=>t.properties.NAME!=="Antarctica")},colorDomain:l.filter(t=>t.color).length===0?[]:J||be.uniqBy(l.filter(t=>!we.checkIfNullOrUndefined(t.color)),"color").map(t=>`${t.color}`),width:a||m,height:Math.max(h,p||(g?h?(a||m)*g>h?(a||m)*g:h:(a||m)*g:Y)),scale:Q,centerPoint:ee,colors:l.filter(t=>t.color).length===0?M?[M]:[R.Colors.primaryColors["blue-600"]]:M||R.Colors[z].categoricalColors.colors,colorLegendTitle:O,radius:me,mapBorderWidth:te,mapNoDataColor:xe,mapBorderColor:re,tooltip:H,onSeriesMouseOver:S,showLabels:he,isWorldMap:oe,showColorScale:ge,zoomScaleExtend:L,zoomTranslateExtend:q,onSeriesMouseClick:ie,highlightedDataPoints:ae,resetSelectionOnDoubleClick:F,styles:y,classNames:b,zoomInteraction:ce,detailsOnClick:le,mapProjection:G||(oe?"naturalEarth":"mercator"),animate:V===!0?{duration:.5,once:!0,amount:.5}:V||{duration:0,once:!0,amount:0},dimmedOpacity:P,customLayers:X,maxRadiusValue:we.checkIfNullOrUndefined(_)?Math.max(...l.map(t=>t.radius).filter(t=>t!=null)):_}):r.jsxRuntimeExports.jsx("div",{style:{height:`${Math.max(h,p||(g?h?(a||m)*g>h?(a||m)*g:h:(a||m)*g:Y))}px`},className:"flex items-center justify-center",children:r.jsxRuntimeExports.jsx(Ce.SpinnerExports.Spinner,{"aria-label":"Loading graph"})})}),j||Z?r.jsxRuntimeExports.jsx(qe.GraphFooter,{styles:{footnote:y?.footnote,source:y?.source},classNames:{footnote:b?.footnote,source:b?.source},sources:j,footNote:Z,width:a}):null]})})})})}exports.DotDensityMap=ze;
+import { j as r, m as ke } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useState as g, useRef as Y, useEffect as pe } from "react";
+import { u as be } from "./index-CaAIPGZo.js";
+import { p as De, f as Ce } from "./parse-DlCRUFh_.js";
+import { s as Ne, g as $e, x as Me } from "./getSliderMarks-C0jptXeP.js";
+import { y as Oe } from "./Spinner-C85UF28E.js";
+import { i as Se } from "./index-27yTRcko.js";
+import { z as Ee, t as Pe, a as Ie, g as Le, b as ze, c as Te, d as Ve, e as We } from "./zoom-_lqdiGoI.js";
+import { X as Ae } from "./Modal-CUU6ZK3U.js";
+import { u as Be } from "./Typography-Ctgfl1J5.js";
+import { T as He } from "./Tooltip-DyM5snqx.js";
+import { Colors as D } from "./Colors.js";
+import { s as Re } from "./string2HTML-CWHGfz_d.js";
+import { X as Xe, P as Fe, f as qe } from "./index-BmCqpO1B.js";
+import { u as Ue } from "./use-in-view-BAHrBy6b.js";
+import { s as _e } from "./pow-e8zx3AQJ.js";
+import { s as ve } from "./select-DKy99ogv.js";
+import { m as me } from "./proxy-DJxJg1kD.js";
+import { A as Ge } from "./index-BxAUvrua.js";
+import { GraphFooter as Ye } from "./GraphFooter.js";
+import { GraphHeader as Ke } from "./GraphHeader.js";
+import { f as Ze } from "./fetchAndParseData-Bcmr659B.js";
+import { c as we } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { c as Je } from "./init-BhZylTFx.js";
+function Qe(ue) {
+  const {
+    data: l,
+    colors: s,
+    mapData: C,
+    colorLegendTitle: S,
+    colorDomain: v,
+    radius: b,
+    height: m,
+    width: o,
+    scale: K,
+    centerPoint: E,
+    tooltip: Z,
+    showLabels: he,
+    mapBorderWidth: J,
+    mapBorderColor: Q,
+    mapNoDataColor: B,
+    onSeriesMouseOver: ee,
+    showColorScale: ge,
+    zoomScaleExtend: N,
+    zoomTranslateExtend: fe,
+    highlightedDataPoints: te,
+    onSeriesMouseClick: H,
+    resetSelectionOnDoubleClick: f,
+    detailsOnClick: $,
+    styles: re,
+    classNames: ye,
+    mapProjection: T,
+    zoomInteraction: P,
+    animate: y,
+    dimmedOpacity: ae,
+    customLayers: oe,
+    maxRadiusValue: ie
+  } = ue, [R, ne] = g(void 0), [X, h] = g(!(o < 680)), V = Y(null), [I, F] = g(void 0), [le, x] = g(void 0), [w, q] = g(void 0), [se, W] = g(void 0), L = Y(null), U = Ue(L, {
+    once: y.once,
+    amount: y.amount
+  }), _ = Y(null), d = l.filter((e) => e.radius === void 0 || e.radius === null).length !== l.length ? _e().domain([0, ie]).range([0.25, b]).nice() : void 0;
+  pe(() => {
+    const e = ve(_.current), u = ve(L.current), a = (i) => {
+      if (P === "noZoom") return !1;
+      if (P === "button") return !i.type.includes("wheel");
+      const t = i.type === "wheel", c = i.type.startsWith("touch"), k = i.type === "mousedown" || i.type === "mousemove";
+      return c ? !0 : t ? P === "scroll" ? !0 : i.ctrlKey : k && !i.button && !i.ctrlKey;
+    }, j = Ee().scaleExtent(N).translateExtent(
+      fe || [
+        [-20, -20],
+        [o + 20, m + 20]
+      ]
+    ).filter(a).on("zoom", ({ transform: i }) => {
+      e.attr("transform", i);
+    });
+    u.call(j), V.current = j;
+  }, [m, o, P]);
+  const p = Pe(C), M = Ie(C), G = p[2] - p[0], ce = p[3] - p[1], z = o * 190 / 960 * 360 / G, xe = m * 190 / 678 * 180 / ce, n = K * Math.min(z, xe), O = T === "mercator" ? Le().rotate([0, 0]).center(E || M.geometry.coordinates).translate([o / 2, m / 2]).scale(n) : T === "equalEarth" ? ze().rotate([0, 0]).center(E || M.geometry.coordinates).translate([o / 2, m / 2]).scale(n) : T === "naturalEarth" ? Te().rotate([0, 0]).center(E || M.geometry.coordinates).translate([o / 2, m / 2]).scale(n) : T === "orthographic" ? Ve().rotate([0, 0]).center(E || M.geometry.coordinates).translate([o / 2, m / 2]).scale(n) : We().rotate([0, 0]).center(E || M.geometry.coordinates).translate([o / 2, m / 2]).scale(n), A = (e) => {
+    if (!L.current || !V.current) return;
+    ve(L.current).call(V.current.scaleBy, e === "in" ? 1.2 : 1 / 1.2);
+  };
+  return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ r.jsx(
+        me.svg,
+        {
+          width: `${o}px`,
+          height: `${m}px`,
+          viewBox: `0 0 ${o} ${m}`,
+          ref: L,
+          direction: "ltr",
+          children: /* @__PURE__ */ r.jsxs("g", { ref: _, children: [
+            oe.filter((e) => e.position === "before").map((e) => e.layer),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            C.features.map((e, u) => /* @__PURE__ */ r.jsx("g", { children: e.geometry.type === "MultiPolygon" ? (
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              e.geometry.coordinates.map((a, j) => {
+                let i = "";
+                return a.forEach((t) => {
+                  let c = " M";
+                  t.forEach((k, je) => {
+                    const de = O([k[0], k[1]]);
+                    je !== t.length - 1 ? c = `${c}${de[0]} ${de[1]}L` : c = `${c}${de[0]} ${de[1]}`;
+                  }), i += c;
+                }), /* @__PURE__ */ r.jsx(
+                  "path",
+                  {
+                    d: i,
+                    style: {
+                      stroke: Q,
+                      strokeWidth: J,
+                      fill: B
+                    }
+                  },
+                  j
+                );
+              })
+            ) : (
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              e.geometry.coordinates.map((a, j) => {
+                let i = "M";
+                return a.forEach((t, c) => {
+                  const k = O([t[0], t[1]]);
+                  c !== a.length - 1 ? i = `${i}${k[0]} ${k[1]}L` : i = `${i}${k[0]} ${k[1]}`;
+                }), /* @__PURE__ */ r.jsx(
+                  "path",
+                  {
+                    d: i,
+                    style: {
+                      stroke: Q,
+                      strokeWidth: J,
+                      fill: B
+                    }
+                  },
+                  j
+                );
+              })
+            ) }, u)),
+            /* @__PURE__ */ r.jsx(Ge, { children: l.map((e) => {
+              const u = l.filter((a) => a.color).length === 0 ? s[0] : e.color ? s[v.indexOf(`${e.color}`)] : D.gray;
+              return /* @__PURE__ */ r.jsxs(
+                me.g,
+                {
+                  variants: {
+                    initial: { opacity: 0 },
+                    whileInView: {
+                      opacity: R ? R === u ? 1 : ae : te.length !== 0 ? te.indexOf(e.label || "") !== -1 ? 1 : ae : 1,
+                      transition: { duration: y.duration }
+                    }
+                  },
+                  initial: "initial",
+                  animate: U ? "whileInView" : "initial",
+                  exit: { opacity: 0, transition: { duration: y.duration } },
+                  onMouseEnter: (a) => {
+                    x(e), W(a.clientY), q(a.clientX), ee?.(e);
+                  },
+                  onMouseMove: (a) => {
+                    x(e), W(a.clientY), q(a.clientX);
+                  },
+                  onMouseLeave: () => {
+                    x(void 0), q(void 0), W(void 0), ee?.(void 0);
+                  },
+                  onClick: () => {
+                    (H || $) && (Se(I, e) && f ? (F(void 0), H?.(void 0)) : (F(e), H?.(e)));
+                  },
+                  transform: `translate(${O([e.long, e.lat])[0]},${O([e.long, e.lat])[1]})`,
+                  children: [
+                    /* @__PURE__ */ r.jsx(
+                      me.circle,
+                      {
+                        cx: 0,
+                        cy: 0,
+                        variants: {
+                          initial: {
+                            r: 0,
+                            fill: l.filter((a) => a.color).length === 0 ? s[0] : e.color ? s[v.indexOf(`${e.color}`)] : D.gray,
+                            stroke: l.filter((a) => a.color).length === 0 ? s[0] : e.color ? s[v.indexOf(`${e.color}`)] : D.gray
+                          },
+                          whileInView: {
+                            r: d ? d(e.radius || 0) : b,
+                            fill: l.filter((a) => a.color).length === 0 ? s[0] : e.color ? s[v.indexOf(`${e.color}`)] : D.gray,
+                            stroke: l.filter((a) => a.color).length === 0 ? s[0] : e.color ? s[v.indexOf(`${e.color}`)] : D.gray,
+                            transition: { duration: y.duration }
+                          }
+                        },
+                        initial: "initial",
+                        animate: U ? "whileInView" : "initial",
+                        exit: { r: 0, transition: { duration: y.duration } },
+                        style: {
+                          fillOpacity: 0.8
+                        }
+                      }
+                    ),
+                    he && e.label ? /* @__PURE__ */ r.jsx(
+                      me.text,
+                      {
+                        variants: {
+                          initial: {
+                            opacity: 0,
+                            x: d ? d(e.radius || 0) : b
+                          },
+                          whileInView: {
+                            opacity: 1,
+                            x: d ? d(e.radius || 0) : b,
+                            transition: { duration: y.duration }
+                          }
+                        },
+                        initial: "initial",
+                        animate: U ? "whileInView" : "initial",
+                        exit: { opacity: 0, transition: { duration: y.duration } },
+                        y: 0,
+                        className: "fill-primary-gray-600 dark:fill-primary-gray-300 text-sm",
+                        style: { textAnchor: "start" },
+                        dx: 4,
+                        dy: 5,
+                        children: e.label
+                      }
+                    ) : null
+                  ]
+                },
+                e.label || `${e.lat}-${e.long}`
+              );
+            }) }),
+            oe.filter((e) => e.position === "after").map((e) => e.layer)
+          ] })
+        }
+      ),
+      l.filter((e) => e.color).length === 0 || ge === !1 ? null : /* @__PURE__ */ r.jsx("div", { className: "absolute left-4 bottom-4", children: X ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        /* @__PURE__ */ r.jsx(
+          "div",
+          {
+            style: {
+              backgroundColor: "rgba(240,240,240, 0.7)",
+              border: "1px solid var(--gray-400)",
+              borderRadius: "999px",
+              width: "24px",
+              height: "24px",
+              padding: "3px",
+              cursor: "pointer",
+              zIndex: 10,
+              position: "absolute",
+              right: "-0.75rem",
+              top: "-0.75rem"
+            },
+            onClick: () => {
+              h(!1);
+            },
+            children: /* @__PURE__ */ r.jsx(Xe, {})
+          }
+        ),
+        /* @__PURE__ */ r.jsxs("div", { className: "p-2", style: { backgroundColor: "rgba(240,240,240, 0.7)" }, children: [
+          S && S !== "" ? /* @__PURE__ */ r.jsx(
+            "p",
+            {
+              className: "p-0 leading-normal overflow-hidden text-primary-gray-700 dark:text-primary-gray-300",
+              style: {
+                display: "-webkit-box",
+                WebkitLineClamp: "1",
+                WebkitBoxOrient: "vertical"
+              },
+              children: S
+            }
+          ) : null,
+          /* @__PURE__ */ r.jsx("div", { className: "flex flex-col gap-3", children: v.map((e, u) => /* @__PURE__ */ r.jsxs(
+            "div",
+            {
+              className: "flex gap-2 items-center",
+              onMouseOver: () => {
+                ne(s[u % s.length]);
+              },
+              onMouseLeave: () => {
+                ne(void 0);
+              },
+              children: [
+                /* @__PURE__ */ r.jsx(
+                  "div",
+                  {
+                    className: "w-2 h-2 rounded-full",
+                    style: { backgroundColor: s[u % s.length] }
+                  }
+                ),
+                /* @__PURE__ */ r.jsx(Be, { size: "sm", marginBottom: "none", leading: "none", children: e })
+              ]
+            },
+            u
+          )) })
+        ] })
+      ] }) : /* @__PURE__ */ r.jsx(
+        "button",
+        {
+          type: "button",
+          className: "mb-0 border-0 bg-transparent p-0 self-start",
+          onClick: () => {
+            h(!0);
+          },
+          children: /* @__PURE__ */ r.jsx("div", { className: "items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500", children: "Show Legend" })
+        }
+      ) }),
+      P === "button" && /* @__PURE__ */ r.jsxs("div", { className: "absolute left-4 top-4 flex flex-col", children: [
+        /* @__PURE__ */ r.jsx(
+          "button",
+          {
+            onClick: () => A("in"),
+            className: "leading-0 px-2 py-3.5 border border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-400 dark:bg-primary-gray-600 dark:text-primary-gray-100",
+            children: "+"
+          }
+        ),
+        /* @__PURE__ */ r.jsx(
+          "button",
+          {
+            onClick: () => A("out"),
+            className: "leading-0 px-2 py-3.5 border border-t-0 border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-400 dark:bg-primary-gray-600 dark:text-primary-gray-100",
+            children: "–"
+          }
+        )
+      ] })
+    ] }),
+    $ && I !== void 0 ? /* @__PURE__ */ r.jsx(
+      Ae,
+      {
+        open: I !== void 0,
+        onClose: () => {
+          F(void 0);
+        },
+        children: /* @__PURE__ */ r.jsx(
+          "div",
+          {
+            className: "graph-modal-content m-0",
+            dangerouslySetInnerHTML: typeof $ == "string" ? { __html: Re($, I) } : void 0,
+            children: typeof $ == "function" ? $(I) : null
+          }
+        )
+      }
+    ) : null,
+    le && Z && w && se ? /* @__PURE__ */ r.jsx(
+      He,
+      {
+        data: le,
+        body: Z,
+        xPos: w,
+        yPos: se,
+        backgroundStyle: re?.tooltip,
+        className: ye?.tooltip
+      }
+    ) : null
+  ] });
+}
+function Dt(ue) {
+  const {
+    data: l,
+    mapData: s = "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap.json",
+    graphTitle: C,
+    colors: S,
+    sources: v,
+    graphDescription: b,
+    height: m,
+    width: o,
+    footNote: K = "The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.",
+    colorLegendTitle: E,
+    colorDomain: Z,
+    radius: he = 5,
+    scale: J = 0.95,
+    centerPoint: Q,
+    padding: B,
+    mapBorderWidth: ee = 0.5,
+    mapNoDataColor: ge = D.light.graphNoData,
+    backgroundColor: N = !1,
+    showLabels: fe = !1,
+    mapBorderColor: te = D.light.grays["gray-500"],
+    tooltip: H,
+    relativeHeight: f,
+    onSeriesMouseOver: $,
+    isWorldMap: re = !0,
+    showColorScale: ye = !0,
+    zoomScaleExtend: T = [0.8, 6],
+    zoomTranslateExtend: P,
+    graphID: y,
+    highlightedDataPoints: ae = [],
+    onSeriesMouseClick: oe,
+    graphDownload: ie = !1,
+    dataDownload: R = !1,
+    showAntarctica: ne = !1,
+    language: X = "en",
+    minHeight: h = 0,
+    theme: V = "light",
+    ariaLabel: I,
+    resetSelectionOnDoubleClick: F = !0,
+    detailsOnClick: le,
+    styles: x,
+    classNames: w,
+    mapProjection: q,
+    zoomInteraction: se = "button",
+    animate: W = !1,
+    dimmedOpacity: L = 0.3,
+    customLayers: U = [],
+    maxRadiusValue: _,
+    timeline: d = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 }
+  } = ue, [p, M] = g(0), [G, ce] = g(0), [z, xe] = g(d.autoplay), n = Ne(
+    be(
+      l.filter((t) => t.date !== void 0 && t.date !== null),
+      (t) => t.date
+    ).map((t) => De(`${t.date}`, d.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()),
+    (t, c) => Je(t, c)
+  ), [O, A] = g(d.autoplay ? 0 : n.length - 1), [e, u] = g(void 0), a = Y(null), j = Y(null);
+  pe(() => {
+    const t = new ResizeObserver((c) => {
+      M(o || c[0].target.clientWidth || 760), ce(m || c[0].target.clientHeight || 480);
+    });
+    return a.current && (ce(a.current.clientHeight || 480), M(a.current.clientWidth || 760), o || t.observe(a.current)), () => t.disconnect();
+  }, [o, m]), pe(() => {
+    typeof s == "string" ? Ze(s).then((c) => {
+      u(c);
+    }) : u(s);
+  }, [s]), pe(() => {
+    const t = setInterval(
+      () => {
+        A((c) => c < n.length - 1 ? c + 1 : 0);
+      },
+      (d.speed || 2) * 1e3
+    );
+    return z || clearInterval(t), () => clearInterval(t);
+  }, [n, z, d.speed]);
+  const i = $e(
+    n,
+    O,
+    d.showOnlyActiveDate,
+    d.dateFormat || "yyyy"
+  );
+  return /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      className: `${V || "light"} flex  ${o ? "w-fit grow-0" : "w-full grow"}`,
+      dir: X === "he" || X === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          className: ke(
+            `${N ? N === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${X || "en"}`,
+            w?.graphContainer
+          ),
+          style: {
+            ...x?.graphContainer || {},
+            ...N && N !== !0 ? { backgroundColor: N } : {}
+          },
+          id: y,
+          ref: j,
+          "aria-label": I || `${C ? `The graph shows ${C}. ` : ""}This is a dot density map showing the distribution of a variable across a region or world, with each dot representing a data point.${b ? ` ${b}` : ""}`,
+          children: /* @__PURE__ */ r.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: N ? B || "1rem" : B || 0 },
+              children: /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                C || b || ie || R ? /* @__PURE__ */ r.jsx(
+                  Ke,
+                  {
+                    styles: {
+                      title: x?.title,
+                      description: x?.description
+                    },
+                    classNames: {
+                      title: w?.title,
+                      description: w?.description
+                    },
+                    graphTitle: C,
+                    graphDescription: b,
+                    width: o,
+                    graphDownload: ie ? j.current : void 0,
+                    dataDownload: R ? l.map((t) => t.data).filter((t) => t !== void 0).length > 0 ? l.map((t) => t.data).filter((t) => t !== void 0) : l.filter((t) => t !== void 0) : null
+                  }
+                ) : null,
+                d.enabled && n.length > 0 && i ? /* @__PURE__ */ r.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+                  /* @__PURE__ */ r.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        xe(!z);
+                      },
+                      className: "p-0 border-0 cursor-pointer bg-transparent",
+                      "aria-label": z ? "Click to pause animation" : "Click to play animation",
+                      children: z ? /* @__PURE__ */ r.jsx(Fe, {}) : /* @__PURE__ */ r.jsx(qe, {})
+                    }
+                  ),
+                  /* @__PURE__ */ r.jsx(
+                    Me,
+                    {
+                      min: n[0],
+                      max: n[n.length - 1],
+                      marks: i,
+                      step: null,
+                      defaultValue: n[n.length - 1],
+                      value: n[O],
+                      onChangeComplete: (t) => {
+                        A(n.indexOf(t));
+                      },
+                      onChange: (t) => {
+                        A(n.indexOf(t));
+                      },
+                      "aria-label": "Time slider. Use arrow keys to adjust selected time period."
+                    }
+                  )
+                ] }) : null,
+                /* @__PURE__ */ r.jsx(
+                  "div",
+                  {
+                    className: "flex flex-col grow justify-center leading-0",
+                    ref: a,
+                    "aria-label": "Map area",
+                    children: (o || p) && (m || G) && e ? /* @__PURE__ */ r.jsx(
+                      Qe,
+                      {
+                        data: l.filter(
+                          (t) => d.enabled ? t.date === Ce(new Date(n[O]), d.dateFormat || "yyyy") : t
+                        ),
+                        mapData: ne ? e : {
+                          ...e,
+                          features: e.features.filter(
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            (t) => t.properties.NAME !== "Antarctica"
+                          )
+                        },
+                        colorDomain: l.filter((t) => t.color).length === 0 ? [] : Z || be(
+                          l.filter((t) => !we(t.color)),
+                          "color"
+                        ).map((t) => `${t.color}`),
+                        width: o || p,
+                        height: Math.max(
+                          h,
+                          m || (f ? h ? (o || p) * f > h ? (o || p) * f : h : (o || p) * f : G)
+                        ),
+                        scale: J,
+                        centerPoint: Q,
+                        colors: l.filter((t) => t.color).length === 0 ? S ? [S] : [D.primaryColors["blue-600"]] : S || D[V].categoricalColors.colors,
+                        colorLegendTitle: E,
+                        radius: he,
+                        mapBorderWidth: ee,
+                        mapNoDataColor: ge,
+                        mapBorderColor: te,
+                        tooltip: H,
+                        onSeriesMouseOver: $,
+                        showLabels: fe,
+                        isWorldMap: re,
+                        showColorScale: ye,
+                        zoomScaleExtend: T,
+                        zoomTranslateExtend: P,
+                        onSeriesMouseClick: oe,
+                        highlightedDataPoints: ae,
+                        resetSelectionOnDoubleClick: F,
+                        styles: x,
+                        classNames: w,
+                        zoomInteraction: se,
+                        detailsOnClick: le,
+                        mapProjection: q || (re ? "naturalEarth" : "mercator"),
+                        animate: W === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : W || { duration: 0, once: !0, amount: 0 },
+                        dimmedOpacity: L,
+                        customLayers: U,
+                        maxRadiusValue: we(_) ? Math.max(
+                          ...l.map((t) => t.radius).filter((t) => t != null)
+                        ) : _
+                      }
+                    ) : /* @__PURE__ */ r.jsx(
+                      "div",
+                      {
+                        style: {
+                          height: `${Math.max(
+                            h,
+                            m || (f ? h ? (o || p) * f > h ? (o || p) * f : h : (o || p) * f : G)
+                          )}px`
+                        },
+                        className: "flex items-center justify-center",
+                        children: /* @__PURE__ */ r.jsx(Oe, { "aria-label": "Loading graph" })
+                      }
+                    )
+                  }
+                ),
+                v || K ? /* @__PURE__ */ r.jsx(
+                  Ye,
+                  {
+                    styles: { footnote: x?.footnote, source: x?.source },
+                    classNames: {
+                      footnote: w?.footnote,
+                      source: w?.source
+                    },
+                    sources: v,
+                    footNote: K,
+                    width: o
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  Dt as DotDensityMap
+};
 //# sourceMappingURL=DotDensityMap.js.map