@undp/data-viz 1.2.8 → 1.3.0

package/dist/DotDensityMap.d.ts

@@ -0,0 +1,191 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare interface AnimateDataType {
+    duration: number;
+    once: boolean;
+    amount: 'some' | 'all' | number;
+}
+
+declare interface AxesClassNameObject {
+    gridLines?: string;
+    labels?: string;
+    title?: string;
+    axis?: string;
+}
+
+declare interface AxesStyleObject {
+    gridLines?: React.CSSProperties;
+    labels?: React.CSSProperties;
+    title?: React.CSSProperties;
+    axis?: React.CSSProperties;
+}
+
+declare interface ClassNameObject {
+    title?: string;
+    footnote?: string;
+    source?: string;
+    description?: string;
+    tooltip?: string;
+    xAxis?: AxesClassNameObject;
+    yAxis?: AxesClassNameObject;
+    legend?: string;
+    graphContainer?: string;
+    graphObjectValues?: string;
+    dataConnectors?: string;
+    mouseOverLine?: string;
+    regLine?: string;
+    dataCards?: string;
+}
+
+declare interface CustomLayerDataType {
+    position: 'before' | 'after';
+    layer: React.ReactNode;
+}
+
+export declare function DotDensityMap(props: Props): JSX.Element;
+
+declare interface DotDensityMapDataType {
+    lat: number;
+    long: number;
+    radius?: number;
+    color?: string | number;
+    label?: string | number;
+    date?: string | number;
+    data?: object;
+}
+
+declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'jp' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
+
+declare type MapProjectionTypes = 'mercator' | 'equalEarth' | 'naturalEarth' | 'orthographic' | 'albersUSA';
+
+declare interface Props {
+    /** Array of data objects */
+    data: DotDensityMapDataType[];
+    /** Title of the graph */
+    graphTitle?: string | React.ReactNode;
+    /** Description of the graph */
+    graphDescription?: string | React.ReactNode;
+    /** Footnote for the graph */
+    footNote?: string | React.ReactNode;
+    /** Source data for the graph */
+    sources?: SourcesDataType[];
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Color or array of colors for the circle */
+    colors?: string | string[];
+    /** Domain of colors for the graph */
+    colorDomain: string[];
+    /** Title for the color legend */
+    colorLegendTitle?: string;
+    /** Color for the areas where data is no available */
+    mapNoDataColor?: string;
+    /** Background color of the graph */
+    backgroundColor?: string | boolean;
+    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
+    styles?: StyleObject;
+    /** Custom class names */
+    classNames?: ClassNameObject;
+    /** Width of the graph */
+    width?: number;
+    /** Height of the graph */
+    height?: number;
+    /** Minimum height of the graph */
+    minHeight?: number;
+    /** Relative height scaling factor. This overwrites the height props */
+    relativeHeight?: number;
+    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
+    padding?: string;
+    /** Maximum radius of the circle */
+    radius?: number;
+    /** Map data as an object in geoJson format or a url for geoJson */
+    mapData?: any;
+    /** Scaling factor for the map. Multiplies the scale number to scale. */
+    scale?: number;
+    /** Center point of the map */
+    centerPoint?: [number, number];
+    /** Defines the zoom mode for the map */
+    zoomInteraction?: ZoomInteractionTypes;
+    /** Stroke width of the regions in the map */
+    mapBorderWidth?: number;
+    /** Stroke color of the regions in the map */
+    mapBorderColor?: string;
+    /** Toggle if the map is a world map */
+    isWorldMap?: boolean;
+    /** Map projection type */
+    mapProjection?: MapProjectionTypes;
+    /** Extend of the allowed zoom in the map */
+    zoomScaleExtend?: [number, number];
+    /** Extend of the allowed panning in the map */
+    zoomTranslateExtend?: [[number, number], [number, number]];
+    /** Toggle visibility of labels */
+    showLabels?: boolean;
+    /** Maximum value mapped to the radius chart */
+    maxRadiusValue?: number;
+    /** Data points to highlight. Use the label value from data to highlight the data point */
+    highlightedDataPoints?: (string | number)[];
+    /** Defines the opacity of the non-highlighted data */
+    dimmedOpacity?: number;
+    /** Toggles if the graph animates in when loaded.  */
+    animate?: boolean | AnimateDataType;
+    /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */
+    showColorScale?: boolean;
+    /** Toggles the visibility of Antarctica in the default map. Only applicable for the default map. */
+    showAntarctica?: boolean;
+    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
+    customLayers?: CustomLayerDataType[];
+    /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
+    timeline?: TimelineDataType;
+    /** Enable graph download option as png */
+    graphDownload?: boolean;
+    /** Enable data download option as a csv */
+    dataDownload?: boolean;
+    /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
+    resetSelectionOnDoubleClick?: boolean;
+    /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
+    tooltip?: string | ((_d: any) => React.ReactNode);
+    /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
+    detailsOnClick?: string | ((_d: any) => React.ReactNode);
+    /** Callback for mouse over event */
+    onSeriesMouseOver?: (_d: any) => void;
+    /** Callback for mouse click event */
+    onSeriesMouseClick?: (_d: any) => void;
+    /** Language setting  */
+    language?: Languages;
+    /** Color theme */
+    theme?: 'light' | 'dark';
+    /** Unique ID for the graph */
+    graphID?: string;
+}
+
+declare interface SourcesDataType {
+    source: string;
+    link?: string;
+}
+
+declare interface StyleObject {
+    title?: React.CSSProperties;
+    footnote?: React.CSSProperties;
+    source?: React.CSSProperties;
+    description?: React.CSSProperties;
+    graphContainer?: React.CSSProperties;
+    tooltip?: React.CSSProperties;
+    xAxis?: AxesStyleObject;
+    yAxis?: AxesStyleObject;
+    graphObjectValues?: React.CSSProperties;
+    dataConnectors?: React.CSSProperties;
+    mouseOverLine?: React.CSSProperties;
+    regLine?: React.CSSProperties;
+    dataCards?: React.CSSProperties;
+}
+
+declare interface TimelineDataType {
+    autoplay: boolean;
+    enabled: boolean;
+    showOnlyActiveDate: boolean;
+    speed?: number;
+    dateFormat?: string;
+}
+
+declare type ZoomInteractionTypes = 'scroll' | 'ctrlScroll' | 'button' | 'noZoom';
+
+export { }

package/dist/DotDensityMap.js

@@ -0,0 +1,2 @@
+"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;
+//# sourceMappingURL=DotDensityMap.js.map

package/dist/DotDensityMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotDensityMap.js","sources":["../src/Components/Graphs/Maps/DotDensityMap/Graph.tsx","../src/Components/Graphs/Maps/DotDensityMap/index.tsx"],"sourcesContent":["import isEqual from 'fast-deep-equal';\r\nimport { useEffect, useRef, useState } from 'react';\r\nimport {\r\n  geoAlbersUsa,\r\n  geoEqualEarth,\r\n  geoMercator,\r\n  geoNaturalEarth1,\r\n  geoOrthographic,\r\n} from 'd3-geo';\r\nimport { D3ZoomEvent, zoom, ZoomBehavior } from 'd3-zoom';\r\nimport { select } from 'd3-selection';\r\nimport { scaleSqrt } from 'd3-scale';\r\nimport { Modal } from '@undp/design-system-react/Modal';\r\nimport {P} from '@undp/design-system-react/Typography';\r\nimport bbox from '@turf/bbox';\r\nimport centroid from '@turf/centroid';\r\nimport { AnimatePresence, motion, useInView } from 'motion/react';\r\n\r\nimport {\r\n  AnimateDataType,\r\n  ClassNameObject,\r\n  CustomLayerDataType,\r\n  DotDensityMapDataType,\r\n  MapProjectionTypes,\r\n  StyleObject,\r\n  ZoomInteractionTypes,\r\n} from '@/Types';\r\nimport { Tooltip } from '@/Components/Elements/Tooltip';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\nimport { X } from '@/Components/Icons';\r\n\r\ninterface Props {\r\n  data: DotDensityMapDataType[];\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  mapData: any;\r\n  colorDomain: string[];\r\n  width: number;\r\n  height: number;\r\n  scale: number;\r\n  centerPoint?: [number, number];\r\n  colors: string[];\r\n  colorLegendTitle?: string;\r\n  radius: number;\r\n  mapBorderWidth: number;\r\n  mapNoDataColor: string;\r\n  showLabels: boolean;\r\n  mapBorderColor: string;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  tooltip?: string | ((_d: any) => React.ReactNode);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  onSeriesMouseOver?: (_d: any) => void;\r\n  isWorldMap: boolean;\r\n  showColorScale: boolean;\r\n  zoomScaleExtend: [number, number];\r\n  zoomTranslateExtend?: [[number, number], [number, number]];\r\n  highlightedDataPoints: (string | number)[];\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  onSeriesMouseClick?: (_d: any) => void;\r\n  resetSelectionOnDoubleClick: boolean;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\r\n  styles?: StyleObject;\r\n  classNames?: ClassNameObject;\r\n  zoomInteraction: ZoomInteractionTypes;\r\n  mapProjection: MapProjectionTypes;\r\n  animate: AnimateDataType;\r\n  dimmedOpacity: number;\r\n  customLayers: CustomLayerDataType[];\r\n  maxRadiusValue: number;\r\n}\r\n\r\nexport function Graph(props: Props) {\r\n  const {\r\n    data,\r\n    colors,\r\n    mapData,\r\n    colorLegendTitle,\r\n    colorDomain,\r\n    radius,\r\n    height,\r\n    width,\r\n    scale,\r\n    centerPoint,\r\n    tooltip,\r\n    showLabels,\r\n    mapBorderWidth,\r\n    mapBorderColor,\r\n    mapNoDataColor,\r\n    onSeriesMouseOver,\r\n    showColorScale,\r\n    zoomScaleExtend,\r\n    zoomTranslateExtend,\r\n    highlightedDataPoints,\r\n    onSeriesMouseClick,\r\n    resetSelectionOnDoubleClick,\r\n    detailsOnClick,\r\n    styles,\r\n    classNames,\r\n    mapProjection,\r\n    zoomInteraction,\r\n    animate,\r\n    dimmedOpacity,\r\n    customLayers,\r\n    maxRadiusValue,\r\n  } = props;\r\n  const [selectedColor, setSelectedColor] = useState<string | undefined>(undefined);\r\n  const [showLegend, setShowLegend] = useState(!(width < 680));\r\n  const zoomRef = useRef<ZoomBehavior<SVGSVGElement, unknown> | null>(null);\r\n\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\r\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\r\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\r\n  const mapSvg = useRef<SVGSVGElement>(null);\r\n  const isInView = useInView(mapSvg, {\r\n    once: animate.once,\r\n    amount: animate.amount,\r\n  });\r\n  const mapG = useRef<SVGGElement>(null);\r\n  const radiusScale =\r\n    data.filter(d => d.radius === undefined || d.radius === null).length !== data.length\r\n      ? scaleSqrt().domain([0, maxRadiusValue]).range([0.25, radius]).nice()\r\n      : undefined;\r\n\r\n  useEffect(() => {\r\n    const mapGSelect = select(mapG.current);\r\n    const mapSvgSelect = select(mapSvg.current);\r\n    const zoomFilter = (e: D3ZoomEvent<SVGSVGElement, unknown>['sourceEvent']) => {\r\n      if (zoomInteraction === 'noZoom') return false;\r\n      if (zoomInteraction === 'button') return !e.type.includes('wheel');\r\n      const isWheel = e.type === 'wheel';\r\n      const isTouch = e.type.startsWith('touch');\r\n      const isDrag = e.type === 'mousedown' || e.type === 'mousemove';\r\n\r\n      if (isTouch) return true;\r\n      if (isWheel) {\r\n        if (zoomInteraction === 'scroll') return true;\r\n        return e.ctrlKey;\r\n      }\r\n      return isDrag && !e.button && !e.ctrlKey;\r\n    };\r\n    const zoomBehavior = zoom<SVGSVGElement, unknown>()\r\n      .scaleExtent(zoomScaleExtend)\r\n      .translateExtent(\r\n        zoomTranslateExtend || [\r\n          [-20, -20],\r\n          [width + 20, height + 20],\r\n        ],\r\n      )\r\n      .filter(zoomFilter)\r\n      .on('zoom', ({ transform }) => {\r\n        mapGSelect.attr('transform', transform);\r\n      });\r\n\r\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n    mapSvgSelect.call(zoomBehavior as any);\r\n\r\n    zoomRef.current = zoomBehavior;\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [height, width, zoomInteraction]);\r\n\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const bounds = bbox(mapData as any);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const center = centroid(mapData as any);\r\n  const lonDiff = bounds[2] - bounds[0];\r\n  const latDiff = bounds[3] - bounds[1];\r\n  const scaleX = (((width * 190) / 960) * 360) / lonDiff;\r\n  const scaleY = (((height * 190) / 678) * 180) / latDiff;\r\n  const scaleVar = scale * Math.min(scaleX, scaleY);\r\n\r\n  const projection =\r\n    mapProjection === 'mercator'\r\n      ? geoMercator()\r\n          .rotate([0, 0])\r\n          .center(centerPoint || (center.geometry.coordinates as [number, number]))\r\n          .translate([width / 2, height / 2])\r\n          .scale(scaleVar)\r\n      : mapProjection === 'equalEarth'\r\n        ? geoEqualEarth()\r\n            .rotate([0, 0])\r\n            .center(centerPoint || (center.geometry.coordinates as [number, number]))\r\n            .translate([width / 2, height / 2])\r\n            .scale(scaleVar)\r\n        : mapProjection === 'naturalEarth'\r\n          ? geoNaturalEarth1()\r\n              .rotate([0, 0])\r\n              .center(centerPoint || (center.geometry.coordinates as [number, number]))\r\n              .translate([width / 2, height / 2])\r\n              .scale(scaleVar)\r\n          : mapProjection === 'orthographic'\r\n            ? geoOrthographic()\r\n                .rotate([0, 0])\r\n                .center(centerPoint || (center.geometry.coordinates as [number, number]))\r\n                .translate([width / 2, height / 2])\r\n                .scale(scaleVar)\r\n            : geoAlbersUsa()\r\n                .rotate([0, 0])\r\n                .center(centerPoint || (center.geometry.coordinates as [number, number]))\r\n                .translate([width / 2, height / 2])\r\n                .scale(scaleVar);\r\n\r\n  const handleZoom = (direction: 'in' | 'out') => {\r\n    if (!mapSvg.current || !zoomRef.current) return;\r\n    const svg = select(mapSvg.current);\r\n    svg.call(zoomRef.current.scaleBy, direction === 'in' ? 1.2 : 1 / 1.2);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <div className='relative'>\r\n        <motion.svg\r\n          width={`${width}px`}\r\n          height={`${height}px`}\r\n          viewBox={`0 0 ${width} ${height}`}\r\n          ref={mapSvg}\r\n          direction='ltr'\r\n        >\r\n          <g ref={mapG}>\r\n            {customLayers.filter(d => d.position === 'before').map(d => d.layer)}\r\n            {\r\n              // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n              mapData.features.map((d: any, i: number) => {\r\n                return (\r\n                  <g key={i}>\r\n                    {d.geometry.type === 'MultiPolygon'\r\n                      ? // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n                        d.geometry.coordinates.map((el: any, j: any) => {\r\n                          let masterPath = '';\r\n                          el.forEach((geo: number[][]) => {\r\n                            let path = ' M';\r\n                            geo.forEach((c: number[], k: number) => {\r\n                              const point = projection([c[0], c[1]]) as [number, number];\r\n                              if (k !== geo.length - 1) path = `${path}${point[0]} ${point[1]}L`;\r\n                              else path = `${path}${point[0]} ${point[1]}`;\r\n                            });\r\n                            masterPath += path;\r\n                          });\r\n                          return (\r\n                            <path\r\n                              key={j}\r\n                              d={masterPath}\r\n                              style={{\r\n                                stroke: mapBorderColor,\r\n                                strokeWidth: mapBorderWidth,\r\n                                fill: mapNoDataColor,\r\n                              }}\r\n                            />\r\n                          );\r\n                        })\r\n                      : // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n                        d.geometry.coordinates.map((el: any, j: number) => {\r\n                          let path = 'M';\r\n                          el.forEach((c: number[], k: number) => {\r\n                            const point = projection([c[0], c[1]]) as [number, number];\r\n                            if (k !== el.length - 1) path = `${path}${point[0]} ${point[1]}L`;\r\n                            else path = `${path}${point[0]} ${point[1]}`;\r\n                          });\r\n                          return (\r\n                            <path\r\n                              key={j}\r\n                              d={path}\r\n                              style={{\r\n                                stroke: mapBorderColor,\r\n                                strokeWidth: mapBorderWidth,\r\n                                fill: mapNoDataColor,\r\n                              }}\r\n                            />\r\n                          );\r\n                        })}\r\n                  </g>\r\n                );\r\n              })\r\n            }\r\n            <AnimatePresence>\r\n              {data.map(d => {\r\n                const color =\r\n                  data.filter(el => el.color).length === 0\r\n                    ? colors[0]\r\n                    : !d.color\r\n                      ? Colors.gray\r\n                      : colors[colorDomain.indexOf(`${d.color}`)];\r\n                return (\r\n                  <motion.g\r\n                    key={d.label || `${d.lat}-${d.long}`}\r\n                    variants={{\r\n                      initial: { opacity: 0 },\r\n                      whileInView: {\r\n                        opacity: selectedColor\r\n                          ? selectedColor === color\r\n                            ? 1\r\n                            : dimmedOpacity\r\n                          : highlightedDataPoints.length !== 0\r\n                            ? highlightedDataPoints.indexOf(d.label || '') !== -1\r\n                              ? 1\r\n                              : dimmedOpacity\r\n                            : 1,\r\n                        transition: { duration: animate.duration },\r\n                      },\r\n                    }}\r\n                    initial='initial'\r\n                    animate={isInView ? 'whileInView' : 'initial'}\r\n                    exit={{ opacity: 0, transition: { duration: animate.duration } }}\r\n                    onMouseEnter={event => {\r\n                      setMouseOverData(d);\r\n                      setEventY(event.clientY);\r\n                      setEventX(event.clientX);\r\n                      onSeriesMouseOver?.(d);\r\n                    }}\r\n                    onMouseMove={event => {\r\n                      setMouseOverData(d);\r\n                      setEventY(event.clientY);\r\n                      setEventX(event.clientX);\r\n                    }}\r\n                    onMouseLeave={() => {\r\n                      setMouseOverData(undefined);\r\n                      setEventX(undefined);\r\n                      setEventY(undefined);\r\n                      onSeriesMouseOver?.(undefined);\r\n                    }}\r\n                    onClick={() => {\r\n                      if (onSeriesMouseClick || detailsOnClick) {\r\n                        if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\r\n                          setMouseClickData(undefined);\r\n                          onSeriesMouseClick?.(undefined);\r\n                        } else {\r\n                          setMouseClickData(d);\r\n                          onSeriesMouseClick?.(d);\r\n                        }\r\n                      }\r\n                    }}\r\n                    transform={`translate(${\r\n                      (projection([d.long, d.lat]) as [number, number])[0]\r\n                    },${(projection([d.long, d.lat]) as [number, number])[1]})`}\r\n                  >\r\n                    <motion.circle\r\n                      cx={0}\r\n                      cy={0}\r\n                      variants={{\r\n                        initial: {\r\n                          r: 0,\r\n                          fill:\r\n                            data.filter(el => el.color).length === 0\r\n                              ? colors[0]\r\n                              : !d.color\r\n                                ? Colors.gray\r\n                                : colors[colorDomain.indexOf(`${d.color}`)],\r\n                          stroke:\r\n                            data.filter(el => el.color).length === 0\r\n                              ? colors[0]\r\n                              : !d.color\r\n                                ? Colors.gray\r\n                                : colors[colorDomain.indexOf(`${d.color}`)],\r\n                        },\r\n                        whileInView: {\r\n                          r: !radiusScale ? radius : radiusScale(d.radius || 0),\r\n                          fill:\r\n                            data.filter(el => el.color).length === 0\r\n                              ? colors[0]\r\n                              : !d.color\r\n                                ? Colors.gray\r\n                                : colors[colorDomain.indexOf(`${d.color}`)],\r\n                          stroke:\r\n                            data.filter(el => el.color).length === 0\r\n                              ? colors[0]\r\n                              : !d.color\r\n                                ? Colors.gray\r\n                                : colors[colorDomain.indexOf(`${d.color}`)],\r\n                          transition: { duration: animate.duration },\r\n                        },\r\n                      }}\r\n                      initial='initial'\r\n                      animate={isInView ? 'whileInView' : 'initial'}\r\n                      exit={{ r: 0, transition: { duration: animate.duration } }}\r\n                      style={{\r\n                        fillOpacity: 0.8,\r\n                      }}\r\n                    />\r\n                    {showLabels && d.label ? (\r\n                      <motion.text\r\n                        variants={{\r\n                          initial: {\r\n                            opacity: 0,\r\n                            x: !radiusScale ? radius : radiusScale(d.radius || 0),\r\n                          },\r\n                          whileInView: {\r\n                            opacity: 1,\r\n                            x: !radiusScale ? radius : radiusScale(d.radius || 0),\r\n                            transition: { duration: animate.duration },\r\n                          },\r\n                        }}\r\n                        initial='initial'\r\n                        animate={isInView ? 'whileInView' : 'initial'}\r\n                        exit={{ opacity: 0, transition: { duration: animate.duration } }}\r\n                        y={0}\r\n                        className='fill-primary-gray-600 dark:fill-primary-gray-300 text-sm'\r\n                        style={{ textAnchor: 'start' }}\r\n                        dx={4}\r\n                        dy={5}\r\n                      >\r\n                        {d.label}\r\n                      </motion.text>\r\n                    ) : null}\r\n                  </motion.g>\r\n                );\r\n              })}\r\n            </AnimatePresence>\r\n            {customLayers.filter(d => d.position === 'after').map(d => d.layer)}\r\n          </g>\r\n        </motion.svg>\r\n        {data.filter(el => el.color).length === 0 || showColorScale === false ? null : (\r\n          <div className='absolute left-4 bottom-4'>\r\n            {showLegend ? (\r\n              <>\r\n                <div\r\n                  style={{\r\n                    backgroundColor: 'rgba(240,240,240, 0.7)',\r\n                    border: '1px solid var(--gray-400)',\r\n                    borderRadius: '999px',\r\n                    width: '24px',\r\n                    height: '24px',\r\n                    padding: '3px',\r\n                    cursor: 'pointer',\r\n                    zIndex: 10,\r\n                    position: 'absolute',\r\n                    right: '-0.75rem',\r\n                    top: '-0.75rem',\r\n                  }}\r\n                  onClick={() => {\r\n                    setShowLegend(false);\r\n                  }}\r\n                >\r\n                  <X />\r\n                </div>\r\n                <div className='p-2' style={{ backgroundColor: 'rgba(240,240,240, 0.7)' }}>\r\n                  {colorLegendTitle && colorLegendTitle !== '' ? (\r\n                    <p\r\n                      className='p-0 leading-normal overflow-hidden text-primary-gray-700 dark:text-primary-gray-300'\r\n                      style={{\r\n                        display: '-webkit-box',\r\n                        WebkitLineClamp: '1',\r\n                        WebkitBoxOrient: 'vertical',\r\n                      }}\r\n                    >\r\n                      {colorLegendTitle}\r\n                    </p>\r\n                  ) : null}\r\n                  <div className='flex flex-col gap-3'>\r\n                    {colorDomain.map((d, i) => (\r\n                      <div\r\n                        key={i}\r\n                        className='flex gap-2 items-center'\r\n                        onMouseOver={() => {\r\n                          setSelectedColor(colors[i % colors.length]);\r\n                        }}\r\n                        onMouseLeave={() => {\r\n                          setSelectedColor(undefined);\r\n                        }}\r\n                      >\r\n                        <div\r\n                          className='w-2 h-2 rounded-full'\r\n                          style={{ backgroundColor: colors[i % colors.length] }}\r\n                        />\r\n                        <P size='sm' marginBottom='none' leading='none'>\r\n                          {d}\r\n                        </P>\r\n                      </div>\r\n                    ))}\r\n                  </div>\r\n                </div>\r\n              </>\r\n            ) : (\r\n              <button\r\n                type='button'\r\n                className='mb-0 border-0 bg-transparent p-0 self-start'\r\n                onClick={() => {\r\n                  setShowLegend(true);\r\n                }}\r\n              >\r\n                <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'>\r\n                  Show Legend\r\n                </div>\r\n              </button>\r\n            )}\r\n          </div>\r\n        )}\r\n        {zoomInteraction === 'button' && (\r\n          <div className='absolute left-4 top-4 flex flex-col'>\r\n            <button\r\n              onClick={() => handleZoom('in')}\r\n              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'\r\n            >\r\n              +\r\n            </button>\r\n            <button\r\n              onClick={() => handleZoom('out')}\r\n              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'\r\n            >\r\n              –\r\n            </button>\r\n          </div>\r\n        )}\r\n      </div>\r\n      {detailsOnClick && mouseClickData !== undefined ? (\r\n        <Modal\r\n          open={mouseClickData !== undefined}\r\n          onClose={() => {\r\n            setMouseClickData(undefined);\r\n          }}\r\n        >\r\n          <div\r\n            className='graph-modal-content m-0'\r\n            dangerouslySetInnerHTML={\r\n              typeof detailsOnClick === 'string'\r\n                ? { __html: string2HTML(detailsOnClick, mouseClickData) }\r\n                : undefined\r\n            }\r\n          >\r\n            {typeof detailsOnClick === 'function' ? detailsOnClick(mouseClickData) : null}\r\n          </div>\r\n        </Modal>\r\n      ) : null}\r\n      {mouseOverData && tooltip && eventX && eventY ? (\r\n        <Tooltip\r\n          data={mouseOverData}\r\n          body={tooltip}\r\n          xPos={eventX}\r\n          yPos={eventY}\r\n          backgroundStyle={styles?.tooltip}\r\n          className={classNames?.tooltip}\r\n        />\r\n      ) : null}\r\n    </>\r\n  );\r\n}\r\n","import { useState, useRef, useEffect } from 'react';\r\nimport uniqBy from 'lodash.uniqby';\r\nimport { format } from 'date-fns/format';\r\nimport { parse } from 'date-fns/parse';\r\nimport { cn } from '@undp/design-system-react/cn';\r\nimport {SliderUI } from '@undp/design-system-react/SliderUI';\r\nimport { Spinner  } from '@undp/design-system-react/Spinner';\r\nimport { ascending, sort } from 'd3-array';\r\n\r\nimport { Graph } from './Graph';\r\n\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport {\r\n  DotDensityMapDataType,\r\n  Languages,\r\n  SourcesDataType,\r\n  StyleObject,\r\n  ClassNameObject,\r\n  ZoomInteractionTypes,\r\n  MapProjectionTypes,\r\n  CustomLayerDataType,\r\n  AnimateDataType,\r\n  TimelineDataType,\r\n} from '@/Types';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\r\nimport { Pause, Play } from '@/Components/Icons';\r\nimport { getSliderMarks } from '@/Utils/getSliderMarks';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects */\r\n  data: DotDensityMapDataType[];\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Color or array of colors for the circle */\r\n  colors?: string | string[];\r\n  /** Domain of colors for the graph */\r\n  colorDomain: string[];\r\n  /** Title for the color legend */\r\n  colorLegendTitle?: string;\r\n  /** Color for the areas where data is no available */\r\n  mapNoDataColor?: string;\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Minimum height of the graph */\r\n  minHeight?: number;\r\n  /** Relative height scaling factor. This overwrites the height props */\r\n  relativeHeight?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n\r\n  // Graph Parameters\r\n  /** Maximum radius of the circle */\r\n  radius?: number;\r\n  /** Map data as an object in geoJson format or a url for geoJson */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  mapData?: any;\r\n  /** Scaling factor for the map. Multiplies the scale number to scale. */\r\n  scale?: number;\r\n  /** Center point of the map */\r\n  centerPoint?: [number, number];\r\n  /** Defines the zoom mode for the map */\r\n  zoomInteraction?: ZoomInteractionTypes;\r\n  /** Stroke width of the regions in the map */\r\n  mapBorderWidth?: number;\r\n  /** Stroke color of the regions in the map */\r\n  mapBorderColor?: string;\r\n  /** Toggle if the map is a world map */\r\n  isWorldMap?: boolean;\r\n  /** Map projection type */\r\n  mapProjection?: MapProjectionTypes;\r\n  /** Extend of the allowed zoom in the map */\r\n  zoomScaleExtend?: [number, number];\r\n  /** Extend of the allowed panning in the map */\r\n  zoomTranslateExtend?: [[number, number], [number, number]];\r\n  /** Toggle visibility of labels */\r\n  showLabels?: boolean;\r\n  /** Maximum value mapped to the radius chart */\r\n  maxRadiusValue?: number;\r\n  /** Data points to highlight. Use the label value from data to highlight the data point */\r\n  highlightedDataPoints?: (string | number)[];\r\n  /** Defines the opacity of the non-highlighted data */\r\n  dimmedOpacity?: number;\r\n  /** Toggles if the graph animates in when loaded.  */\r\n  animate?: boolean | AnimateDataType;\r\n  /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */\r\n  showColorScale?: boolean;\r\n  /** Toggles the visibility of Antarctica in the default map. Only applicable for the default map. */\r\n  showAntarctica?: boolean;\r\n  /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */\r\n  customLayers?: CustomLayerDataType[];\r\n  /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */\r\n  timeline?: TimelineDataType;\r\n  /** Enable graph download option as png */\r\n  graphDownload?: boolean;\r\n  /** Enable data download option as a csv */\r\n  dataDownload?: boolean;\r\n  /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */\r\n  resetSelectionOnDoubleClick?: boolean;\r\n\r\n  // Interactions and Callbacks\r\n  /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  tooltip?: string | ((_d: any) => React.ReactNode);\r\n  /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\r\n  /** Callback for mouse over event */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  onSeriesMouseOver?: (_d: any) => void;\r\n  /** Callback for mouse click event */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  onSeriesMouseClick?: (_d: any) => void;\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\nexport function DotDensityMap(props: Props) {\r\n  const {\r\n    data,\r\n    mapData = 'https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap.json',\r\n    graphTitle,\r\n    colors,\r\n    sources,\r\n    graphDescription,\r\n    height,\r\n    width,\r\n    footNote = '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.',\r\n    colorLegendTitle,\r\n    colorDomain,\r\n    radius = 5,\r\n    scale = 0.95,\r\n    centerPoint,\r\n    padding,\r\n    mapBorderWidth = 0.5,\r\n    mapNoDataColor = Colors.light.graphNoData,\r\n    backgroundColor = false,\r\n    showLabels = false,\r\n    mapBorderColor = Colors.light.grays['gray-500'],\r\n    tooltip,\r\n    relativeHeight,\r\n    onSeriesMouseOver,\r\n    isWorldMap = true,\r\n    showColorScale = true,\r\n    zoomScaleExtend = [0.8, 6],\r\n    zoomTranslateExtend,\r\n    graphID,\r\n    highlightedDataPoints = [],\r\n    onSeriesMouseClick,\r\n    graphDownload = false,\r\n    dataDownload = false,\r\n    showAntarctica = false,\r\n    language = 'en',\r\n    minHeight = 0,\r\n    theme = 'light',\r\n    ariaLabel,\r\n    resetSelectionOnDoubleClick = true,\r\n    detailsOnClick,\r\n    styles,\r\n    classNames,\r\n    mapProjection,\r\n    zoomInteraction = 'button',\r\n    animate = false,\r\n    dimmedOpacity = 0.3,\r\n    customLayers = [],\r\n    maxRadiusValue,\r\n    timeline = { enabled: false, autoplay: false, showOnlyActiveDate: true },\r\n  } = props;\r\n\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n  const [play, setPlay] = useState(timeline.autoplay);\r\n  const uniqDatesSorted = sort(\r\n    uniqBy(\r\n      data.filter(d => d.date !== undefined && d.date !== null),\r\n      d => d.date,\r\n    ).map(d => parse(`${d.date}`, timeline.dateFormat || 'yyyy', new Date()).getTime()),\r\n    (a, b) => ascending(a, b),\r\n  );\r\n  const [index, setIndex] = useState(timeline.autoplay ? 0 : uniqDatesSorted.length - 1);\r\n\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [mapShape, setMapShape] = useState<any>(undefined);\r\n\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const graphParentDiv = useRef<HTMLDivElement>(null);\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver(entries => {\r\n      setSvgWidth(width || entries[0].target.clientWidth || 760);\r\n      setSvgHeight(height || entries[0].target.clientHeight || 480);\r\n    });\r\n    if (graphDiv.current) {\r\n      setSvgHeight(graphDiv.current.clientHeight || 480);\r\n      setSvgWidth(graphDiv.current.clientWidth || 760);\r\n      if (!width) resizeObserver.observe(graphDiv.current);\r\n    }\r\n    return () => resizeObserver.disconnect();\r\n  }, [width, height]);\r\n  useEffect(() => {\r\n    if (typeof mapData === 'string') {\r\n      const fetchData = fetchAndParseJSON(mapData);\r\n      fetchData.then(d => {\r\n        setMapShape(d);\r\n      });\r\n    } else {\r\n      setMapShape(mapData);\r\n    }\r\n  }, [mapData]);\r\n\r\n  useEffect(() => {\r\n    const interval = setInterval(\r\n      () => {\r\n        setIndex(i => (i < uniqDatesSorted.length - 1 ? i + 1 : 0));\r\n      },\r\n      (timeline.speed || 2) * 1000,\r\n    );\r\n    if (!play) clearInterval(interval);\r\n    return () => clearInterval(interval);\r\n  }, [uniqDatesSorted, play, timeline.speed]);\r\n\r\n  const markObj = getSliderMarks(\r\n    uniqDatesSorted,\r\n    index,\r\n    timeline.showOnlyActiveDate,\r\n    timeline.dateFormat || 'yyyy',\r\n  );\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        ref={graphParentDiv}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${\r\n            graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n          }This is a dot density map showing the distribution of a variable across a region or world, with each dot representing a data point.${\r\n            graphDescription ? ` ${graphDescription}` : ''\r\n          }`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {graphTitle || graphDescription || graphDownload || dataDownload ? (\r\n              <GraphHeader\r\n                styles={{\r\n                  title: styles?.title,\r\n                  description: styles?.description,\r\n                }}\r\n                classNames={{\r\n                  title: classNames?.title,\r\n                  description: classNames?.description,\r\n                }}\r\n                graphTitle={graphTitle}\r\n                graphDescription={graphDescription}\r\n                width={width}\r\n                graphDownload={graphDownload ? graphParentDiv.current : undefined}\r\n                dataDownload={\r\n                  dataDownload\r\n                    ? data.map(d => d.data).filter(d => d !== undefined).length > 0\r\n                      ? data.map(d => d.data).filter(d => d !== undefined)\r\n                      : data.filter(d => d !== undefined)\r\n                    : null\r\n                }\r\n              />\r\n            ) : null}\r\n            {timeline.enabled && uniqDatesSorted.length > 0 && markObj ? (\r\n              <div className='flex gap-6 items-center' dir='ltr'>\r\n                <button\r\n                  type='button'\r\n                  onClick={() => {\r\n                    setPlay(!play);\r\n                  }}\r\n                  className='p-0 border-0 cursor-pointer bg-transparent'\r\n                  aria-label={play ? 'Click to pause animation' : 'Click to play animation'}\r\n                >\r\n                  {play ? <Pause /> : <Play />}\r\n                </button>\r\n                <SliderUI\r\n                  min={uniqDatesSorted[0]}\r\n                  max={uniqDatesSorted[uniqDatesSorted.length - 1]}\r\n                  marks={markObj}\r\n                  step={null}\r\n                  defaultValue={uniqDatesSorted[uniqDatesSorted.length - 1]}\r\n                  value={uniqDatesSorted[index]}\r\n                  onChangeComplete={nextValue => {\r\n                    setIndex(uniqDatesSorted.indexOf(nextValue as number));\r\n                  }}\r\n                  onChange={nextValue => {\r\n                    setIndex(uniqDatesSorted.indexOf(nextValue as number));\r\n                  }}\r\n                  aria-label='Time slider. Use arrow keys to adjust selected time period.'\r\n                />\r\n              </div>\r\n            ) : null}\r\n            <div\r\n              className='flex flex-col grow justify-center leading-0'\r\n              ref={graphDiv}\r\n              aria-label='Map area'\r\n            >\r\n              {(width || svgWidth) && (height || svgHeight) && mapShape ? (\r\n                <Graph\r\n                  data={data.filter(d =>\r\n                    timeline.enabled\r\n                      ? d.date ===\r\n                        format(new Date(uniqDatesSorted[index]), timeline.dateFormat || 'yyyy')\r\n                      : d,\r\n                  )}\r\n                  mapData={\r\n                    showAntarctica\r\n                      ? mapShape\r\n                      : {\r\n                          ...mapShape,\r\n                          features: mapShape.features.filter(\r\n                            // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n                            (el: any) => el.properties.NAME !== 'Antarctica',\r\n                          ),\r\n                        }\r\n                  }\r\n                  colorDomain={\r\n                    data.filter(el => el.color).length === 0\r\n                      ? []\r\n                      : colorDomain ||\r\n                        (uniqBy(\r\n                          data.filter(el => !checkIfNullOrUndefined(el.color)),\r\n                          'color',\r\n                        ).map(d => `${d.color}`) as string[])\r\n                  }\r\n                  width={width || svgWidth}\r\n                  height={Math.max(\r\n                    minHeight,\r\n                    height ||\r\n                      (relativeHeight\r\n                        ? minHeight\r\n                          ? (width || svgWidth) * relativeHeight > minHeight\r\n                            ? (width || svgWidth) * relativeHeight\r\n                            : minHeight\r\n                          : (width || svgWidth) * relativeHeight\r\n                        : svgHeight),\r\n                  )}\r\n                  scale={scale}\r\n                  centerPoint={centerPoint}\r\n                  colors={\r\n                    data.filter(el => el.color).length === 0\r\n                      ? colors\r\n                        ? [colors as string]\r\n                        : [Colors.primaryColors['blue-600']]\r\n                      : (colors as string[] | undefined) || Colors[theme].categoricalColors.colors\r\n                  }\r\n                  colorLegendTitle={colorLegendTitle}\r\n                  radius={radius}\r\n                  mapBorderWidth={mapBorderWidth}\r\n                  mapNoDataColor={mapNoDataColor}\r\n                  mapBorderColor={mapBorderColor}\r\n                  tooltip={tooltip}\r\n                  onSeriesMouseOver={onSeriesMouseOver}\r\n                  showLabels={showLabels}\r\n                  isWorldMap={isWorldMap}\r\n                  showColorScale={showColorScale}\r\n                  zoomScaleExtend={zoomScaleExtend}\r\n                  zoomTranslateExtend={zoomTranslateExtend}\r\n                  onSeriesMouseClick={onSeriesMouseClick}\r\n                  highlightedDataPoints={highlightedDataPoints}\r\n                  resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\r\n                  styles={styles}\r\n                  classNames={classNames}\r\n                  zoomInteraction={zoomInteraction}\r\n                  detailsOnClick={detailsOnClick}\r\n                  mapProjection={mapProjection || (isWorldMap ? 'naturalEarth' : 'mercator')}\r\n                  animate={\r\n                    animate === true\r\n                      ? { duration: 0.5, once: true, amount: 0.5 }\r\n                      : animate || { duration: 0, once: true, amount: 0 }\r\n                  }\r\n                  dimmedOpacity={dimmedOpacity}\r\n                  customLayers={customLayers}\r\n                  maxRadiusValue={\r\n                    !checkIfNullOrUndefined(maxRadiusValue)\r\n                      ? (maxRadiusValue as number)\r\n                      : Math.max(\r\n                          ...data.map(d => d.radius).filter(d => d !== undefined && d !== null),\r\n                        )\r\n                  }\r\n                />\r\n              ) : (\r\n                <div\r\n                  style={{\r\n                    height: `${Math.max(\r\n                      minHeight,\r\n                      height ||\r\n                        (relativeHeight\r\n                          ? minHeight\r\n                            ? (width || svgWidth) * relativeHeight > minHeight\r\n                              ? (width || svgWidth) * relativeHeight\r\n                              : minHeight\r\n                            : (width || svgWidth) * relativeHeight\r\n                          : svgHeight),\r\n                    )}px`,\r\n                  }}\r\n                  className='flex items-center justify-center'\r\n                >\r\n                  <Spinner aria-label='Loading graph' />\r\n                </div>\r\n              )}\r\n            </div>\r\n            {sources || footNote ? (\r\n              <GraphFooter\r\n                styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                classNames={{\r\n                  footnote: classNames?.footnote,\r\n                  source: classNames?.source,\r\n                }}\r\n                sources={sources}\r\n                footNote={footNote}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Graph","props","data","colors","mapData","colorLegendTitle","colorDomain","radius","height","width","scale","centerPoint","tooltip","showLabels","mapBorderWidth","mapBorderColor","mapNoDataColor","onSeriesMouseOver","showColorScale","zoomScaleExtend","zoomTranslateExtend","highlightedDataPoints","onSeriesMouseClick","resetSelectionOnDoubleClick","detailsOnClick","styles","classNames","mapProjection","zoomInteraction","animate","dimmedOpacity","customLayers","maxRadiusValue","selectedColor","setSelectedColor","useState","showLegend","setShowLegend","zoomRef","useRef","mouseClickData","setMouseClickData","mouseOverData","setMouseOverData","eventX","setEventX","eventY","setEventY","mapSvg","isInView","useInView","mapG","radiusScale","d","scaleSqrt","useEffect","mapGSelect","select","mapSvgSelect","zoomFilter","e","isWheel","isTouch","isDrag","zoomBehavior","zoom","transform","bounds","bbox","center","centroid","lonDiff","latDiff","scaleX","scaleY","scaleVar","projection","geoMercator","geoEqualEarth","geoNaturalEarth1","geoOrthographic","geoAlbersUsa","handleZoom","direction","jsxs","Fragment","jsx","motion","i","el","j","masterPath","geo","path","c","k","point","AnimatePresence","color","Colors","event","isEqual","X","P","Modal","string2HTML","Tooltip","DotDensityMap","graphTitle","sources","graphDescription","footNote","padding","backgroundColor","relativeHeight","isWorldMap","graphID","graphDownload","dataDownload","showAntarctica","language","minHeight","theme","ariaLabel","timeline","svgWidth","setSvgWidth","svgHeight","setSvgHeight","play","setPlay","uniqDatesSorted","sort","uniqBy","parse","a","b","ascending","index","setIndex","mapShape","setMapShape","graphDiv","graphParentDiv","resizeObserver","entries","fetchAndParseJSON","interval","markObj","getSliderMarks","cn","GraphHeader","Pause","Play","SliderUI","nextValue","format","checkIfNullOrUndefined","Spinner","GraphFooter"],"mappings":"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"}