@undp/data-viz 1.2.8 → 1.3.1

package/dist/GeoHubMapWithLayerSelection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeoHubMapWithLayerSelection.cjs","sources":["../src/Components/Graphs/Maps/GeoHubMaps/MapWithLayerSelection/MapEl.tsx","../src/Components/Graphs/Maps/GeoHubMaps/MapWithLayerSelection/index.tsx"],"sourcesContent":["import { useRef, useEffect, useState } from 'react';\r\nimport maplibreGl from 'maplibre-gl';\r\nimport * as pmtiles from 'pmtiles';\r\nimport 'maplibre-gl/dist/maplibre-gl.css';\r\nimport { select } from 'd3-selection';\r\nimport React from 'react';\r\n\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\nimport { X } from '@/Components/Icons';\r\n\r\ninterface Props {\r\n  mapStyle: string;\r\n  center?: [number, number];\r\n  zoomLevel?: number;\r\n  width?: number;\r\n  height?: number;\r\n  relativeHeight?: number;\r\n  minHeight: number;\r\n  selectedLayer: string[];\r\n  layerIdList: string[];\r\n  excludeLayers: string[];\r\n  mapLegend?: string | React.ReactNode;\r\n}\r\n\r\nexport function MapEl(props: Props) {\r\n  const {\r\n    mapStyle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    center,\r\n    zoomLevel,\r\n    minHeight,\r\n    selectedLayer,\r\n    layerIdList,\r\n    excludeLayers,\r\n    mapLegend,\r\n  } = props;\r\n\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n  const [showLegend, setShowLegend] = useState(true);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [mapStyleData, setMapStyleData] = useState<any>(undefined);\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const mapContainer = useRef<HTMLDivElement>(null);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const mapRef = useRef<any>(null);\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver(entries => {\r\n      setSvgWidth(width || entries[0].target.clientWidth || 620);\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 || 620);\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 (mapContainer.current && svgWidth && !mapRef.current) {\r\n      fetchAndParseJSON(mapStyle).then(d => {\r\n        setMapStyleData(d);\r\n        const mapDiv = select(mapContainer.current);\r\n        mapDiv.selectAll('div').remove();\r\n        const protocol = new pmtiles.Protocol();\r\n        maplibreGl.addProtocol('pmtiles', protocol.tile);\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const mapObj: any = {\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          container: mapContainer.current as any,\r\n          style: {\r\n            ...d,\r\n            layers: filterData(d.layers, [\r\n              {\r\n                column: 'id',\r\n                excludeValues: [\r\n                  ...excludeLayers,\r\n                  ...layerIdList.filter(el => selectedLayer.indexOf(el) === -1),\r\n                ],\r\n              },\r\n            ]),\r\n          },\r\n          attributionControl: true,\r\n        };\r\n        if (center) {\r\n          mapObj.center = center;\r\n        }\r\n        if (zoomLevel) {\r\n          mapObj.zoom = zoomLevel;\r\n        }\r\n        mapRef.current = new maplibreGl.Map(mapObj);\r\n        mapRef.current.addControl(\r\n          new maplibreGl.NavigationControl({\r\n            visualizePitch: true,\r\n            showZoom: true,\r\n            showCompass: true,\r\n          }),\r\n          'bottom-right',\r\n        );\r\n        mapRef.current.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      });\r\n    }\r\n  }, [svgWidth, center, zoomLevel, layerIdList, mapStyle, excludeLayers, selectedLayer]);\r\n  useEffect(() => {\r\n    if (mapRef.current) {\r\n      if (mapStyleData) {\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const mapStyleObj: any = {\r\n          ...mapStyleData,\r\n          layers: filterData(mapStyleData.layers, [\r\n            {\r\n              column: 'id',\r\n              excludeValues: [\r\n                ...excludeLayers,\r\n                ...layerIdList.filter(el => selectedLayer.indexOf(el) === -1),\r\n              ],\r\n            },\r\n          ]),\r\n        };\r\n        mapRef.current.setStyle(mapStyleObj);\r\n      } else\r\n        fetchAndParseJSON(mapStyle).then(d => {\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          const mapStyleObj: any = {\r\n            ...d,\r\n            layers: filterData(d.layers, [\r\n              {\r\n                column: 'id',\r\n                excludeValues: [\r\n                  ...excludeLayers,\r\n                  ...layerIdList.filter(el => selectedLayer.indexOf(el) === -1),\r\n                ],\r\n              },\r\n            ]),\r\n          };\r\n          mapRef.current.setStyle(mapStyleObj);\r\n        });\r\n    }\r\n  }, [excludeLayers, layerIdList, mapStyle, mapStyleData, selectedLayer]);\r\n  return (\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) ? (\r\n        <div\r\n          style={{\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          }}\r\n        >\r\n          <div ref={mapContainer} className='map maplibre-show-control w-full h-full' />\r\n\r\n          {mapLegend ? (\r\n            <div className='absolute left-[22px] bottom-13'>\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\r\n                    className='p-2'\r\n                    style={{\r\n                      backgroundColor: 'rgba(240,240,240, 0.7)',\r\n                    }}\r\n                    dangerouslySetInnerHTML={\r\n                      typeof mapLegend === 'string' ? { __html: string2HTML(mapLegend) } : undefined\r\n                    }\r\n                  >\r\n                    {React.isValidElement(mapLegend) ? mapLegend : null}\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          ) : null}\r\n        </div>\r\n      ) : null}\r\n    </div>\r\n  );\r\n}\r\n","import { useEffect, useMemo, useState } from 'react';\r\nimport flattenDeep from 'lodash.flattendeep';\r\nimport { createFilter, DropdownSelect } from '@undp/design-system-react/DropdownSelect';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { MapEl } from './MapEl';\r\n\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport {\r\n  ClassNameObject,\r\n  Languages,\r\n  MapLegendDataType,\r\n  SourcesDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\n\r\ninterface Props {\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  /** 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  /** URL for mapStyle JSON  */\r\n  mapStyle: string;\r\n  /** Starting center point of the map */\r\n  center?: [number, number];\r\n  /** Starting zoom level of the map */\r\n  zoomLevel?: number;\r\n  /** List of the layers that the user select and switch between sing a drop down */\r\n  layerSelection: { layerID: string[]; name: string }[];\r\n  /** Defines the legend for the map. mapLegend is of type { mapStyleName: string; legend: string | React.ReactNode }[] where mapStyleName corresponds to the each name in the layerSelection. */\r\n  mapLegend?: MapLegendDataType[];\r\n  /** List of layer IDs to be excluded from the visualization */\r\n  excludeLayers?: string[];\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  /** Theme for the UI elements */\r\n  uiMode?: 'light' | 'normal';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\n/** For using these maps you will have to install [`maplibre`](https://maplibre.org/maplibre-gl-js/docs/#npm) and [pmtiles](https://www.npmjs.com/package/pmtiles) package to your project */\r\nexport function GeoHubMapWithLayerSelection(props: Props) {\r\n  const {\r\n    mapStyle,\r\n    graphTitle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    sources,\r\n    graphDescription,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    center,\r\n    zoomLevel,\r\n    graphID,\r\n    language = 'en',\r\n    minHeight = 0,\r\n    theme = 'light',\r\n    layerSelection,\r\n    excludeLayers = [],\r\n    ariaLabel,\r\n    uiMode = 'normal',\r\n    styles,\r\n    classNames,\r\n    mapLegend = [],\r\n  } = props;\r\n\r\n  const [selectedLayer, setSelectedLayer] = useState(layerSelection[0].layerID);\r\n\r\n  useEffect(() => {\r\n    setSelectedLayer(layerSelection[0].layerID);\r\n  }, [layerSelection]);\r\n\r\n  const filterConfig = useMemo(\r\n    () => ({\r\n      ignoreCase: true,\r\n      ignoreAccents: true,\r\n      trim: true,\r\n    }),\r\n    [],\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        aria-label={\r\n          ariaLabel ||\r\n          `${\r\n            graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n          }This is a map.${graphDescription ? ` ${graphDescription}` : ''}`\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 ? (\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              />\r\n            ) : null}\r\n            <DropdownSelect\r\n              options={layerSelection.map(d => ({\r\n                label: d.name,\r\n                value: d.layerID,\r\n              }))}\r\n              size='sm'\r\n              isClearable={false}\r\n              variant={uiMode}\r\n              isRtl={language === 'he' || language === 'ar'}\r\n              isSearchable\r\n              filterOption={createFilter(filterConfig)}\r\n              defaultValue={{\r\n                label: layerSelection[0].name,\r\n                value: layerSelection[0].layerID,\r\n              }}\r\n              controlShouldRenderValue\r\n              // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n              onChange={(el: any) => {\r\n                if (el) setSelectedLayer(el.value);\r\n              }}\r\n            />\r\n            <MapEl\r\n              mapStyle={mapStyle}\r\n              center={center}\r\n              zoomLevel={zoomLevel}\r\n              width={width}\r\n              height={height}\r\n              relativeHeight={relativeHeight}\r\n              minHeight={minHeight}\r\n              selectedLayer={selectedLayer}\r\n              layerIdList={flattenDeep(layerSelection.map(d => d.layerID))}\r\n              excludeLayers={excludeLayers}\r\n              mapLegend={\r\n                (mapLegend as MapLegendDataType[]).find(\r\n                  d =>\r\n                    d.mapStyleName ===\r\n                    layerSelection.find(el => el.layerID === selectedLayer)?.name,\r\n                )?.legend\r\n              }\r\n            />\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":["MapEl","props","mapStyle","height","width","relativeHeight","center","zoomLevel","minHeight","selectedLayer","layerIdList","excludeLayers","mapLegend","svgWidth","setSvgWidth","useState","svgHeight","setSvgHeight","showLegend","setShowLegend","mapStyleData","setMapStyleData","graphDiv","useRef","mapContainer","mapRef","useEffect","resizeObserver","entries","fetchAndParseJSON","d","select","protocol","pmtiles","maplibreGl","mapObj","filterData","el","mapStyleObj","jsx","jsxs","Fragment","X","string2HTML","React","GeoHubMapWithLayerSelection","graphTitle","sources","graphDescription","footNote","padding","backgroundColor","graphID","language","theme","layerSelection","ariaLabel","uiMode","styles","classNames","setSelectedLayer","filterConfig","useMemo","cn","GraphHeader","DropdownSelect","createFilter","flattenDeep","GraphFooter"],"mappings":"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"}

package/dist/GeoHubMapWithLayerSelection.d.ts

@@ -0,0 +1,117 @@
+import { JSX } from 'react/jsx-runtime';
+
+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;
+}
+
+/** For using these maps you will have to install [`maplibre`](https://maplibre.org/maplibre-gl-js/docs/#npm) and [pmtiles](https://www.npmjs.com/package/pmtiles) package to your project */
+export declare function GeoHubMapWithLayerSelection(props: Props): JSX.Element;
+
+declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'jp' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
+
+declare interface MapLegendDataType {
+    mapStyleName: string;
+    legend: string | React.ReactNode;
+}
+
+declare interface Props {
+    /** 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;
+    /** 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;
+    /** URL for mapStyle JSON  */
+    mapStyle: string;
+    /** Starting center point of the map */
+    center?: [number, number];
+    /** Starting zoom level of the map */
+    zoomLevel?: number;
+    /** List of the layers that the user select and switch between sing a drop down */
+    layerSelection: {
+        layerID: string[];
+        name: string;
+    }[];
+    /** Defines the legend for the map. mapLegend is of type { mapStyleName: string; legend: string | React.ReactNode }[] where mapStyleName corresponds to the each name in the layerSelection. */
+    mapLegend?: MapLegendDataType[];
+    /** List of layer IDs to be excluded from the visualization */
+    excludeLayers?: string[];
+    /** Language setting  */
+    language?: Languages;
+    /** Color theme */
+    theme?: 'light' | 'dark';
+    /** Theme for the UI elements */
+    uiMode?: 'light' | 'normal';
+    /** 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;
+}
+
+export { }

package/dist/GeoHubMapWithLayerSelection.js

@@ -0,0 +1,308 @@
+import { j as e, m as V } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import _, { useState as L, useRef as O, useEffect as H, useMemo as T } from "react";
+import { f as W } from "./index-UV9hjG_S.js";
+import { Z as E, H as G } from "./DropdownSelect-CDC9lEqU.js";
+import D from "maplibre-gl";
+import * as P from "pmtiles";
+/* empty css                     */
+import { f as $ } from "./fetchAndParseData-Bcmr659B.js";
+import { f as z } from "./filterData-B8ocT57s.js";
+import { s as A } from "./string2HTML-CWHGfz_d.js";
+import { X as Z } from "./index-BmCqpO1B.js";
+import { s as F } from "./select-DKy99ogv.js";
+import { GraphHeader as J } from "./GraphHeader.js";
+import { GraphFooter as X } from "./GraphFooter.js";
+function q(I) {
+  const {
+    mapStyle: x,
+    height: c,
+    width: i,
+    relativeHeight: m,
+    center: j,
+    zoomLevel: b,
+    minHeight: d,
+    selectedLayer: p,
+    layerIdList: f,
+    excludeLayers: a,
+    mapLegend: h
+  } = I, [u, C] = L(0), [g, N] = L(0), [k, l] = L(!0), [v, M] = L(void 0), y = O(null), s = O(null), t = O(null);
+  return H(() => {
+    const r = new ResizeObserver((n) => {
+      C(i || n[0].target.clientWidth || 620), N(c || n[0].target.clientHeight || 480);
+    });
+    return y.current && (N(y.current.clientHeight || 480), C(y.current.clientWidth || 620), i || r.observe(y.current)), () => r.disconnect();
+  }, [i, c]), H(() => {
+    s.current && u && !t.current && $(x).then((r) => {
+      M(r), F(s.current).selectAll("div").remove();
+      const w = new P.Protocol();
+      D.addProtocol("pmtiles", w.tile);
+      const S = {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        container: s.current,
+        style: {
+          ...r,
+          layers: z(r.layers, [
+            {
+              column: "id",
+              excludeValues: [
+                ...a,
+                ...f.filter((o) => p.indexOf(o) === -1)
+              ]
+            }
+          ])
+        },
+        attributionControl: !0
+      };
+      j && (S.center = j), b && (S.zoom = b), t.current = new D.Map(S), t.current.addControl(
+        new D.NavigationControl({
+          visualizePitch: !0,
+          showZoom: !0,
+          showCompass: !0
+        }),
+        "bottom-right"
+      ), t.current.addControl(new D.ScaleControl(), "bottom-left");
+    });
+  }, [u, j, b, f, x, a, p]), H(() => {
+    if (t.current)
+      if (v) {
+        const r = {
+          ...v,
+          layers: z(v.layers, [
+            {
+              column: "id",
+              excludeValues: [
+                ...a,
+                ...f.filter((n) => p.indexOf(n) === -1)
+              ]
+            }
+          ])
+        };
+        t.current.setStyle(r);
+      } else
+        $(x).then((r) => {
+          const n = {
+            ...r,
+            layers: z(r.layers, [
+              {
+                column: "id",
+                excludeValues: [
+                  ...a,
+                  ...f.filter((w) => p.indexOf(w) === -1)
+                ]
+              }
+            ])
+          };
+          t.current.setStyle(n);
+        });
+  }, [a, f, x, v, p]), /* @__PURE__ */ e.jsx(
+    "div",
+    {
+      className: "flex flex-col grow justify-center leading-0",
+      ref: y,
+      "aria-label": "Map area",
+      children: (i || u) && (c || g) ? /* @__PURE__ */ e.jsxs(
+        "div",
+        {
+          style: {
+            width: i || u,
+            height: Math.max(
+              d,
+              c || (m ? d ? (i || u) * m > d ? (i || u) * m : d : (i || u) * m : g)
+            )
+          },
+          children: [
+            /* @__PURE__ */ e.jsx("div", { ref: s, className: "map maplibre-show-control w-full h-full" }),
+            h ? /* @__PURE__ */ e.jsx("div", { className: "absolute left-[22px] bottom-13", children: k ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+              /* @__PURE__ */ e.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: () => {
+                    l(!1);
+                  },
+                  children: /* @__PURE__ */ e.jsx(Z, {})
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                "div",
+                {
+                  className: "p-2",
+                  style: {
+                    backgroundColor: "rgba(240,240,240, 0.7)"
+                  },
+                  dangerouslySetInnerHTML: typeof h == "string" ? { __html: A(h) } : void 0,
+                  children: _.isValidElement(h) ? h : null
+                }
+              )
+            ] }) : /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                type: "button",
+                className: "mb-0 border-0 bg-transparent p-0 self-start",
+                onClick: () => {
+                  l(!0);
+                },
+                children: /* @__PURE__ */ e.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" })
+              }
+            ) }) : null
+          ]
+        }
+      ) : null
+    }
+  );
+}
+function ne(I) {
+  const {
+    mapStyle: x,
+    graphTitle: c,
+    height: i,
+    width: m,
+    relativeHeight: j,
+    sources: b,
+    graphDescription: d,
+    footNote: p,
+    padding: f,
+    backgroundColor: a = !1,
+    center: h,
+    zoomLevel: u,
+    graphID: C,
+    language: g = "en",
+    minHeight: N = 0,
+    theme: k = "light",
+    layerSelection: l,
+    excludeLayers: v = [],
+    ariaLabel: M,
+    uiMode: y = "normal",
+    styles: s,
+    classNames: t,
+    mapLegend: r = []
+  } = I, [n, w] = L(l[0].layerID);
+  H(() => {
+    w(l[0].layerID);
+  }, [l]);
+  const S = T(
+    () => ({
+      ignoreCase: !0,
+      ignoreAccents: !0,
+      trim: !0
+    }),
+    []
+  );
+  return /* @__PURE__ */ e.jsx(
+    "div",
+    {
+      className: `${k || "light"} flex  ${m ? "w-fit grow-0" : "w-full grow"}`,
+      dir: g === "he" || g === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: V(
+            `${a ? a === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${g || "en"}`,
+            t?.graphContainer
+          ),
+          style: {
+            ...s?.graphContainer || {},
+            ...a && a !== !0 ? { backgroundColor: a } : {}
+          },
+          id: C,
+          "aria-label": M || `${c ? `The graph shows ${c}. ` : ""}This is a map.${d ? ` ${d}` : ""}`,
+          children: /* @__PURE__ */ e.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: a ? f || "1rem" : f || 0 },
+              children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                c || d ? /* @__PURE__ */ e.jsx(
+                  J,
+                  {
+                    styles: {
+                      title: s?.title,
+                      description: s?.description
+                    },
+                    classNames: {
+                      title: t?.title,
+                      description: t?.description
+                    },
+                    graphTitle: c,
+                    graphDescription: d,
+                    width: m
+                  }
+                ) : null,
+                /* @__PURE__ */ e.jsx(
+                  E,
+                  {
+                    options: l.map((o) => ({
+                      label: o.name,
+                      value: o.layerID
+                    })),
+                    size: "sm",
+                    isClearable: !1,
+                    variant: y,
+                    isRtl: g === "he" || g === "ar",
+                    isSearchable: !0,
+                    filterOption: G(S),
+                    defaultValue: {
+                      label: l[0].name,
+                      value: l[0].layerID
+                    },
+                    controlShouldRenderValue: !0,
+                    onChange: (o) => {
+                      o && w(o.value);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ e.jsx(
+                  q,
+                  {
+                    mapStyle: x,
+                    center: h,
+                    zoomLevel: u,
+                    width: m,
+                    height: i,
+                    relativeHeight: j,
+                    minHeight: N,
+                    selectedLayer: n,
+                    layerIdList: W(l.map((o) => o.layerID)),
+                    excludeLayers: v,
+                    mapLegend: r.find(
+                      (o) => o.mapStyleName === l.find((R) => R.layerID === n)?.name
+                    )?.legend
+                  }
+                ),
+                b || p ? /* @__PURE__ */ e.jsx(
+                  X,
+                  {
+                    styles: { footnote: s?.footnote, source: s?.source },
+                    classNames: {
+                      footnote: t?.footnote,
+                      source: t?.source
+                    },
+                    sources: b,
+                    footNote: p,
+                    width: m
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  ne as GeoHubMapWithLayerSelection
+};
+//# sourceMappingURL=GeoHubMapWithLayerSelection.js.map

package/dist/GeoHubMapWithLayerSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeoHubMapWithLayerSelection.js","sources":["../src/Components/Graphs/Maps/GeoHubMaps/MapWithLayerSelection/MapEl.tsx","../src/Components/Graphs/Maps/GeoHubMaps/MapWithLayerSelection/index.tsx"],"sourcesContent":["import { useRef, useEffect, useState } from 'react';\r\nimport maplibreGl from 'maplibre-gl';\r\nimport * as pmtiles from 'pmtiles';\r\nimport 'maplibre-gl/dist/maplibre-gl.css';\r\nimport { select } from 'd3-selection';\r\nimport React from 'react';\r\n\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\nimport { X } from '@/Components/Icons';\r\n\r\ninterface Props {\r\n  mapStyle: string;\r\n  center?: [number, number];\r\n  zoomLevel?: number;\r\n  width?: number;\r\n  height?: number;\r\n  relativeHeight?: number;\r\n  minHeight: number;\r\n  selectedLayer: string[];\r\n  layerIdList: string[];\r\n  excludeLayers: string[];\r\n  mapLegend?: string | React.ReactNode;\r\n}\r\n\r\nexport function MapEl(props: Props) {\r\n  const {\r\n    mapStyle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    center,\r\n    zoomLevel,\r\n    minHeight,\r\n    selectedLayer,\r\n    layerIdList,\r\n    excludeLayers,\r\n    mapLegend,\r\n  } = props;\r\n\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n  const [showLegend, setShowLegend] = useState(true);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [mapStyleData, setMapStyleData] = useState<any>(undefined);\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const mapContainer = useRef<HTMLDivElement>(null);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const mapRef = useRef<any>(null);\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver(entries => {\r\n      setSvgWidth(width || entries[0].target.clientWidth || 620);\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 || 620);\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 (mapContainer.current && svgWidth && !mapRef.current) {\r\n      fetchAndParseJSON(mapStyle).then(d => {\r\n        setMapStyleData(d);\r\n        const mapDiv = select(mapContainer.current);\r\n        mapDiv.selectAll('div').remove();\r\n        const protocol = new pmtiles.Protocol();\r\n        maplibreGl.addProtocol('pmtiles', protocol.tile);\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const mapObj: any = {\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          container: mapContainer.current as any,\r\n          style: {\r\n            ...d,\r\n            layers: filterData(d.layers, [\r\n              {\r\n                column: 'id',\r\n                excludeValues: [\r\n                  ...excludeLayers,\r\n                  ...layerIdList.filter(el => selectedLayer.indexOf(el) === -1),\r\n                ],\r\n              },\r\n            ]),\r\n          },\r\n          attributionControl: true,\r\n        };\r\n        if (center) {\r\n          mapObj.center = center;\r\n        }\r\n        if (zoomLevel) {\r\n          mapObj.zoom = zoomLevel;\r\n        }\r\n        mapRef.current = new maplibreGl.Map(mapObj);\r\n        mapRef.current.addControl(\r\n          new maplibreGl.NavigationControl({\r\n            visualizePitch: true,\r\n            showZoom: true,\r\n            showCompass: true,\r\n          }),\r\n          'bottom-right',\r\n        );\r\n        mapRef.current.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      });\r\n    }\r\n  }, [svgWidth, center, zoomLevel, layerIdList, mapStyle, excludeLayers, selectedLayer]);\r\n  useEffect(() => {\r\n    if (mapRef.current) {\r\n      if (mapStyleData) {\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const mapStyleObj: any = {\r\n          ...mapStyleData,\r\n          layers: filterData(mapStyleData.layers, [\r\n            {\r\n              column: 'id',\r\n              excludeValues: [\r\n                ...excludeLayers,\r\n                ...layerIdList.filter(el => selectedLayer.indexOf(el) === -1),\r\n              ],\r\n            },\r\n          ]),\r\n        };\r\n        mapRef.current.setStyle(mapStyleObj);\r\n      } else\r\n        fetchAndParseJSON(mapStyle).then(d => {\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          const mapStyleObj: any = {\r\n            ...d,\r\n            layers: filterData(d.layers, [\r\n              {\r\n                column: 'id',\r\n                excludeValues: [\r\n                  ...excludeLayers,\r\n                  ...layerIdList.filter(el => selectedLayer.indexOf(el) === -1),\r\n                ],\r\n              },\r\n            ]),\r\n          };\r\n          mapRef.current.setStyle(mapStyleObj);\r\n        });\r\n    }\r\n  }, [excludeLayers, layerIdList, mapStyle, mapStyleData, selectedLayer]);\r\n  return (\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) ? (\r\n        <div\r\n          style={{\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          }}\r\n        >\r\n          <div ref={mapContainer} className='map maplibre-show-control w-full h-full' />\r\n\r\n          {mapLegend ? (\r\n            <div className='absolute left-[22px] bottom-13'>\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\r\n                    className='p-2'\r\n                    style={{\r\n                      backgroundColor: 'rgba(240,240,240, 0.7)',\r\n                    }}\r\n                    dangerouslySetInnerHTML={\r\n                      typeof mapLegend === 'string' ? { __html: string2HTML(mapLegend) } : undefined\r\n                    }\r\n                  >\r\n                    {React.isValidElement(mapLegend) ? mapLegend : null}\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          ) : null}\r\n        </div>\r\n      ) : null}\r\n    </div>\r\n  );\r\n}\r\n","import { useEffect, useMemo, useState } from 'react';\r\nimport flattenDeep from 'lodash.flattendeep';\r\nimport { createFilter, DropdownSelect } from '@undp/design-system-react/DropdownSelect';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { MapEl } from './MapEl';\r\n\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport {\r\n  ClassNameObject,\r\n  Languages,\r\n  MapLegendDataType,\r\n  SourcesDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\n\r\ninterface Props {\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  /** 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  /** URL for mapStyle JSON  */\r\n  mapStyle: string;\r\n  /** Starting center point of the map */\r\n  center?: [number, number];\r\n  /** Starting zoom level of the map */\r\n  zoomLevel?: number;\r\n  /** List of the layers that the user select and switch between sing a drop down */\r\n  layerSelection: { layerID: string[]; name: string }[];\r\n  /** Defines the legend for the map. mapLegend is of type { mapStyleName: string; legend: string | React.ReactNode }[] where mapStyleName corresponds to the each name in the layerSelection. */\r\n  mapLegend?: MapLegendDataType[];\r\n  /** List of layer IDs to be excluded from the visualization */\r\n  excludeLayers?: string[];\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  /** Theme for the UI elements */\r\n  uiMode?: 'light' | 'normal';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\n/** For using these maps you will have to install [`maplibre`](https://maplibre.org/maplibre-gl-js/docs/#npm) and [pmtiles](https://www.npmjs.com/package/pmtiles) package to your project */\r\nexport function GeoHubMapWithLayerSelection(props: Props) {\r\n  const {\r\n    mapStyle,\r\n    graphTitle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    sources,\r\n    graphDescription,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    center,\r\n    zoomLevel,\r\n    graphID,\r\n    language = 'en',\r\n    minHeight = 0,\r\n    theme = 'light',\r\n    layerSelection,\r\n    excludeLayers = [],\r\n    ariaLabel,\r\n    uiMode = 'normal',\r\n    styles,\r\n    classNames,\r\n    mapLegend = [],\r\n  } = props;\r\n\r\n  const [selectedLayer, setSelectedLayer] = useState(layerSelection[0].layerID);\r\n\r\n  useEffect(() => {\r\n    setSelectedLayer(layerSelection[0].layerID);\r\n  }, [layerSelection]);\r\n\r\n  const filterConfig = useMemo(\r\n    () => ({\r\n      ignoreCase: true,\r\n      ignoreAccents: true,\r\n      trim: true,\r\n    }),\r\n    [],\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        aria-label={\r\n          ariaLabel ||\r\n          `${\r\n            graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n          }This is a map.${graphDescription ? ` ${graphDescription}` : ''}`\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 ? (\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              />\r\n            ) : null}\r\n            <DropdownSelect\r\n              options={layerSelection.map(d => ({\r\n                label: d.name,\r\n                value: d.layerID,\r\n              }))}\r\n              size='sm'\r\n              isClearable={false}\r\n              variant={uiMode}\r\n              isRtl={language === 'he' || language === 'ar'}\r\n              isSearchable\r\n              filterOption={createFilter(filterConfig)}\r\n              defaultValue={{\r\n                label: layerSelection[0].name,\r\n                value: layerSelection[0].layerID,\r\n              }}\r\n              controlShouldRenderValue\r\n              // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n              onChange={(el: any) => {\r\n                if (el) setSelectedLayer(el.value);\r\n              }}\r\n            />\r\n            <MapEl\r\n              mapStyle={mapStyle}\r\n              center={center}\r\n              zoomLevel={zoomLevel}\r\n              width={width}\r\n              height={height}\r\n              relativeHeight={relativeHeight}\r\n              minHeight={minHeight}\r\n              selectedLayer={selectedLayer}\r\n              layerIdList={flattenDeep(layerSelection.map(d => d.layerID))}\r\n              excludeLayers={excludeLayers}\r\n              mapLegend={\r\n                (mapLegend as MapLegendDataType[]).find(\r\n                  d =>\r\n                    d.mapStyleName ===\r\n                    layerSelection.find(el => el.layerID === selectedLayer)?.name,\r\n                )?.legend\r\n              }\r\n            />\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":["MapEl","props","mapStyle","height","width","relativeHeight","center","zoomLevel","minHeight","selectedLayer","layerIdList","excludeLayers","mapLegend","svgWidth","setSvgWidth","useState","svgHeight","setSvgHeight","showLegend","setShowLegend","mapStyleData","setMapStyleData","graphDiv","useRef","mapContainer","mapRef","useEffect","resizeObserver","entries","fetchAndParseJSON","d","select","protocol","pmtiles","maplibreGl","mapObj","filterData","el","mapStyleObj","jsx","jsxs","Fragment","X","string2HTML","React","GeoHubMapWithLayerSelection","graphTitle","sources","graphDescription","footNote","padding","backgroundColor","graphID","language","theme","layerSelection","ariaLabel","uiMode","styles","classNames","setSelectedLayer","filterConfig","useMemo","cn","GraphHeader","DropdownSelect","createFilter","flattenDeep","GraphFooter"],"mappings":"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"}

package/dist/GraphDescription.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-CHPV5EwG-DDoeWRVt.cjs"),s=require("./Typography-k-kOjICQ.cjs"),o=require("react");function a(n){const{text:e,style:t,className:i}=n;return typeof e=="string"?e.trim()===""?null:r.jsxRuntimeExports.jsx(s.u,{size:"sm",marginBottom:"none",className:r.mo("text-primary-gray-550 dark:text-primary-gray-400",i),"aria-label":"Graph description",style:t,children:e}):o.isValidElement(e)?r.jsxRuntimeExports.jsx("div",{className:i,style:t,children:e}):(console.error("GraphDescription: Invalid text type. Expected string or React element."),null)}exports.GraphDescription=a;
+//# sourceMappingURL=GraphDescription.cjs.map

package/dist/GraphDescription.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphDescription.cjs","sources":["../src/Components/Typography/GraphDescription.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { P } from '@undp/design-system-react/Typography';\r\nimport React from 'react';\r\n\r\ninterface Props {\r\n  text: string | React.ReactNode;\r\n  style?: React.CSSProperties;\r\n  className?: string;\r\n}\r\n\r\nexport function GraphDescription(props: Props) {\r\n  const { text, style, className } = props;\r\n  if (typeof text === 'string') {\r\n    if (text.trim() === '') return null;\r\n    return (\r\n      <P\r\n        size='sm'\r\n        marginBottom='none'\r\n        className={cn('text-primary-gray-550 dark:text-primary-gray-400', className)}\r\n        aria-label='Graph description'\r\n        style={style}\r\n      >\r\n        {text}\r\n      </P>\r\n    );\r\n  }\r\n\r\n  if (React.isValidElement(text))\r\n    return (\r\n      <div className={className} style={style}>\r\n        {text}\r\n      </div>\r\n    );\r\n  console.error('GraphDescription: Invalid text type. Expected string or React element.');\r\n  return null;\r\n}\r\n"],"names":["GraphDescription","props","text","style","className","jsx","P","cn","React"],"mappings":"2LAUO,SAASA,EAAiBC,EAAc,CAC7C,KAAM,CAAE,KAAAC,EAAM,MAAAC,EAAO,UAAAC,CAAA,EAAcH,EACnC,OAAI,OAAOC,GAAS,SACdA,EAAK,SAAW,GAAW,KAE7BG,EAAAA,kBAAAA,IAACC,EAAAA,EAAA,CACC,KAAK,KACL,aAAa,OACb,UAAWC,EAAAA,GAAG,mDAAoDH,CAAS,EAC3E,aAAW,oBACX,MAAAD,EAEC,SAAAD,CAAA,CAAA,EAKHM,EAAM,eAAeN,CAAI,EAEzBG,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAAD,EAAsB,MAAAD,EACxB,SAAAD,EACH,GAEJ,QAAQ,MAAM,wEAAwE,EAC/E,KACT"}

package/dist/GraphDescription.d.ts

@@ -0,0 +1,12 @@
+import { default as default_2 } from 'react';
+import { JSX } from 'react/jsx-runtime';
+
+export declare function GraphDescription(props: Props): JSX.Element | null;
+
+declare interface Props {
+    text: string | default_2.ReactNode;
+    style?: default_2.CSSProperties;
+    className?: string;
+}
+
+export { }

package/dist/GraphDescription.js

@@ -0,0 +1,21 @@
+import { j as i, m as a } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { u as o } from "./Typography-Ctgfl1J5.js";
+import s from "react";
+function c(n) {
+  const { text: r, style: t, className: e } = n;
+  return typeof r == "string" ? r.trim() === "" ? null : /* @__PURE__ */ i.jsx(
+    o,
+    {
+      size: "sm",
+      marginBottom: "none",
+      className: a("text-primary-gray-550 dark:text-primary-gray-400", e),
+      "aria-label": "Graph description",
+      style: t,
+      children: r
+    }
+  ) : s.isValidElement(r) ? /* @__PURE__ */ i.jsx("div", { className: e, style: t, children: r }) : (console.error("GraphDescription: Invalid text type. Expected string or React element."), null);
+}
+export {
+  c as GraphDescription
+};
+//# sourceMappingURL=GraphDescription.js.map

package/dist/GraphDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphDescription.js","sources":["../src/Components/Typography/GraphDescription.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { P } from '@undp/design-system-react/Typography';\r\nimport React from 'react';\r\n\r\ninterface Props {\r\n  text: string | React.ReactNode;\r\n  style?: React.CSSProperties;\r\n  className?: string;\r\n}\r\n\r\nexport function GraphDescription(props: Props) {\r\n  const { text, style, className } = props;\r\n  if (typeof text === 'string') {\r\n    if (text.trim() === '') return null;\r\n    return (\r\n      <P\r\n        size='sm'\r\n        marginBottom='none'\r\n        className={cn('text-primary-gray-550 dark:text-primary-gray-400', className)}\r\n        aria-label='Graph description'\r\n        style={style}\r\n      >\r\n        {text}\r\n      </P>\r\n    );\r\n  }\r\n\r\n  if (React.isValidElement(text))\r\n    return (\r\n      <div className={className} style={style}>\r\n        {text}\r\n      </div>\r\n    );\r\n  console.error('GraphDescription: Invalid text type. Expected string or React element.');\r\n  return null;\r\n}\r\n"],"names":["GraphDescription","props","text","style","className","jsx","P","cn","React"],"mappings":";;;AAUO,SAASA,EAAiBC,GAAc;AAC7C,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,WAAAC,EAAA,IAAcH;AACnC,SAAI,OAAOC,KAAS,WACdA,EAAK,WAAW,KAAW,OAE7BG,gBAAAA,EAAAA;AAAAA,IAACC;AAAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAa;AAAA,MACb,WAAWC,EAAG,oDAAoDH,CAAS;AAAA,MAC3E,cAAW;AAAA,MACX,OAAAD;AAAA,MAEC,UAAAD;AAAA,IAAA;AAAA,EAAA,IAKHM,EAAM,eAAeN,CAAI,IAEzBG,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAAD,GAAsB,OAAAD,GACxB,UAAAD,GACH,KAEJ,QAAQ,MAAM,wEAAwE,GAC/E;AACT;"}

package/dist/GraphFooter.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-CHPV5EwG-DDoeWRVt.cjs"),u=require("./FootNote.cjs"),i=require("./Source.cjs");function a(n){const{sources:e,footNote:o,width:s,styles:r,classNames:l}=n;return(e===void 0||(e||[]).length===0)&&o===void 0?null:t.jsxRuntimeExports.jsxs("div",{className:"flex gap-2 flex-col",style:{maxWidth:s?`${s}px`:"none"},"aria-label":"Graph footer",children:[e?t.jsxRuntimeExports.jsx(i.Source,{sources:e,style:r?.source,className:l?.source}):null,o?t.jsxRuntimeExports.jsx(u.FootNote,{text:o,style:r?.footnote,className:l?.footnote}):null]})}exports.GraphFooter=a;
+//# sourceMappingURL=GraphFooter.cjs.map

package/dist/GraphFooter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphFooter.cjs","sources":["../src/Components/Elements/GraphFooter.tsx"],"sourcesContent":["import { SourcesDataType } from '@/Types';\r\nimport { FootNote } from '@/Components/Typography/FootNote';\r\nimport { Source } from '@/Components/Typography/Source';\r\n\r\ninterface Props {\r\n  footNote?: string | React.ReactNode;\r\n  sources?: SourcesDataType[];\r\n  width?: number;\r\n  styles?: { footnote?: React.CSSProperties; source?: React.CSSProperties };\r\n  classNames?: { footnote?: string; source?: string };\r\n}\r\n\r\nexport function GraphFooter(props: Props) {\r\n  const { sources, footNote, width, styles, classNames } = props;\r\n  if ((sources === undefined || (sources || []).length === 0) && footNote === undefined)\r\n    return null;\r\n  return (\r\n    <div\r\n      className='flex gap-2 flex-col'\r\n      style={{ maxWidth: width ? `${width}px` : 'none' }}\r\n      aria-label='Graph footer'\r\n    >\r\n      {sources ? (\r\n        <Source sources={sources} style={styles?.source} className={classNames?.source} />\r\n      ) : null}\r\n      {footNote ? (\r\n        <FootNote text={footNote} style={styles?.footnote} className={classNames?.footnote} />\r\n      ) : null}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["GraphFooter","props","sources","footNote","width","styles","classNames","jsxs","jsx","Source","FootNote"],"mappings":"uLAYO,SAASA,EAAYC,EAAc,CACxC,KAAM,CAAE,QAAAC,EAAS,SAAAC,EAAU,MAAAC,EAAO,OAAAC,EAAQ,WAAAC,GAAeL,EACzD,OAAKC,IAAY,SAAcA,GAAW,CAAA,GAAI,SAAW,IAAMC,IAAa,OACnE,KAEPI,EAAAA,kBAAAA,KAAC,MAAA,CACC,UAAU,sBACV,MAAO,CAAE,SAAUH,EAAQ,GAAGA,CAAK,KAAO,MAAA,EAC1C,aAAW,eAEV,SAAA,CAAAF,EACCM,EAAAA,kBAAAA,IAACC,UAAO,QAAAP,EAAkB,MAAOG,GAAQ,OAAQ,UAAWC,GAAY,MAAA,CAAQ,EAC9E,KACHH,EACCK,EAAAA,kBAAAA,IAACE,EAAAA,SAAA,CAAS,KAAMP,EAAU,MAAOE,GAAQ,SAAU,UAAWC,GAAY,QAAA,CAAU,EAClF,IAAA,CAAA,CAAA,CAGV"}

package/dist/GraphFooter.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'react/jsx-runtime';
+
+export declare function GraphFooter(props: Props): JSX.Element | null;
+
+declare interface Props {
+    footNote?: string | React.ReactNode;
+    sources?: SourcesDataType[];
+    width?: number;
+    styles?: {
+        footnote?: React.CSSProperties;
+        source?: React.CSSProperties;
+    };
+    classNames?: {
+        footnote?: string;
+        source?: string;
+    };
+}
+
+declare interface SourcesDataType {
+    source: string;
+    link?: string;
+}
+
+export { }

package/dist/GraphFooter.js

@@ -0,0 +1,22 @@
+import { j as t } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { FootNote as n } from "./FootNote.js";
+import { Source as i } from "./Source.js";
+function u(a) {
+  const { sources: o, footNote: e, width: s, styles: r, classNames: l } = a;
+  return (o === void 0 || (o || []).length === 0) && e === void 0 ? null : /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      className: "flex gap-2 flex-col",
+      style: { maxWidth: s ? `${s}px` : "none" },
+      "aria-label": "Graph footer",
+      children: [
+        o ? /* @__PURE__ */ t.jsx(i, { sources: o, style: r?.source, className: l?.source }) : null,
+        e ? /* @__PURE__ */ t.jsx(n, { text: e, style: r?.footnote, className: l?.footnote }) : null
+      ]
+    }
+  );
+}
+export {
+  u as GraphFooter
+};
+//# sourceMappingURL=GraphFooter.js.map