@undp/data-viz 1.2.8 → 1.3.0

package/dist/GeoHubCompareMaps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeoHubCompareMaps.js","sources":["../src/Components/Graphs/Maps/GeoHubMaps/CompareMaps/Graph.tsx","../src/Components/Graphs/Maps/GeoHubMaps/CompareMaps/index.tsx"],"sourcesContent":["import { useRef, useEffect, useState } from 'react';\r\nimport * as 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 {\r\n  DndContext,\r\n  useDraggable,\r\n  useSensor,\r\n  useSensors,\r\n  PointerSensor,\r\n  DragMoveEvent,\r\n} from '@dnd-kit/core';\r\nimport { restrictToHorizontalAxis } from '@dnd-kit/modifiers';\r\nimport React from 'react';\r\n\r\nimport { ChevronLeftRight, X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\ninterface Props {\r\n  width: number;\r\n  height: number;\r\n  mapStyles: [string, string];\r\n  center: [number, number];\r\n  mapLegend?: string | React.ReactNode;\r\n  zoomLevel: number;\r\n}\r\n\r\nfunction synchronizeMap(map1: maplibreGl.Map, map2: maplibreGl.Map) {\r\n  let isSyncing = false;\r\n  function syncMap(sourceMap: maplibreGl.Map, targetMap: maplibreGl.Map) {\r\n    if (!isSyncing) {\r\n      isSyncing = true;\r\n      const center = sourceMap.getCenter();\r\n      const zoom = sourceMap.getZoom();\r\n      const bearing = sourceMap.getBearing();\r\n      const pitch = sourceMap.getPitch();\r\n      targetMap.jumpTo({\r\n        center,\r\n        zoom,\r\n        bearing,\r\n        pitch,\r\n      });\r\n      isSyncing = false;\r\n    }\r\n  }\r\n\r\n  // Event listeners for map1\r\n  map1.on('move', () => {\r\n    syncMap(map1, map2);\r\n  });\r\n\r\n  // Event listeners for map2\r\n  map2.on('move', () => {\r\n    syncMap(map2, map1);\r\n  });\r\n}\r\n\r\nexport function Graph(props: Props) {\r\n  const { height, width, mapStyles, center, zoomLevel, mapLegend } = props;\r\n  const [position, setPosition] = useState(50);\r\n  const [isDragging, setIsDragging] = useState(false);\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const [showLegend, setShowLegend] = useState(true);\r\n  const dragStartPositionRef = useRef(50);\r\n  const sliderWidthRef = useRef(0);\r\n\r\n  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 0 } }));\r\n\r\n  const handleDragStart = () => {\r\n    setIsDragging(true);\r\n    dragStartPositionRef.current = position;\r\n\r\n    if (containerRef.current) {\r\n      sliderWidthRef.current = containerRef.current.getBoundingClientRect().width;\r\n    }\r\n  };\r\n\r\n  const handleDragMove = (event: DragMoveEvent) => {\r\n    if (!containerRef.current || sliderWidthRef.current === 0) return;\r\n\r\n    // Calculate position change as percentage of width\r\n    const deltaPercentage = (event.delta.x / sliderWidthRef.current) * 100;\r\n    const newPosition = Math.max(0, Math.min(100, dragStartPositionRef.current + deltaPercentage));\r\n\r\n    setPosition(newPosition);\r\n  };\r\n\r\n  const handleDragEnd = () => {\r\n    setIsDragging(false);\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent) => {\r\n    if (isDragging || !containerRef.current) return;\r\n\r\n    const rect = containerRef.current.getBoundingClientRect();\r\n    const clickX = e.clientX - rect.left;\r\n    const newPosition = (clickX / rect.width) * 100;\r\n\r\n    setPosition(Math.max(0, Math.min(100, newPosition)));\r\n  };\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const leftMapRef = useRef<HTMLDivElement>(null);\r\n  const rightMapRef = useRef<HTMLDivElement>(null);\r\n  const mapContainer = useRef<HTMLDivElement>(null);\r\n  useEffect(() => {\r\n    if (mapContainer.current && leftMapRef.current && rightMapRef.current && width) {\r\n      const mapDiv = select(mapContainer.current);\r\n      mapDiv.selectAll('.maplibregl-compare').remove();\r\n      const leftMapDiv = select(leftMapRef.current);\r\n      leftMapDiv.selectAll('div').remove();\r\n      const rightMapDiv = select(rightMapRef.current);\r\n      rightMapDiv.selectAll('div').remove();\r\n      const protocol = new pmtiles.Protocol();\r\n      maplibreGl.addProtocol('pmtiles', protocol.tile);\r\n      const leftMap = new maplibreGl.Map({\r\n        container: leftMapRef.current,\r\n        style: mapStyles[0],\r\n        center: center || [0, 0],\r\n        zoom: zoomLevel || 4,\r\n      });\r\n\r\n      const rightMap = new maplibreGl.Map({\r\n        container: rightMapRef.current,\r\n        style: mapStyles[1],\r\n        center: center || [0, 0],\r\n        zoom: zoomLevel || 4,\r\n      });\r\n      rightMap.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      leftMap.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      leftMap.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      rightMap.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      synchronizeMap(leftMap, rightMap);\r\n    }\r\n  }, [width, mapStyles, center, zoomLevel]);\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      <div\r\n        style={{\r\n          width,\r\n          height,\r\n        }}\r\n      >\r\n        <div\r\n          ref={mapContainer}\r\n          className='map maplibre-show-control relative w-full h-full'\r\n          style={{ inset: 0 }}\r\n        >\r\n          <DndContext\r\n            sensors={sensors}\r\n            modifiers={[restrictToHorizontalAxis]}\r\n            onDragStart={handleDragStart}\r\n            onDragMove={handleDragMove}\r\n            onDragEnd={handleDragEnd}\r\n          >\r\n            <div\r\n              ref={containerRef}\r\n              style={{\r\n                position: 'relative',\r\n                width,\r\n                height,\r\n                overflow: 'hidden',\r\n                cursor: isDragging ? 'grabbing' : 'col-resize',\r\n                userSelect: 'none', // Prevent text selection during drag\r\n              }}\r\n              onClick={handleClick}\r\n            >\r\n              <div\r\n                ref={rightMapRef}\r\n                className='absolute h-full rightMap w-full'\r\n                style={{\r\n                  position: 'absolute',\r\n                  top: 0,\r\n                  left: 0,\r\n                  clipPath: `polygon(${position}% 0%, ${position}% 100%, 100% 100%, 100% 0%)`,\r\n                }}\r\n              />\r\n              <div\r\n                ref={leftMapRef}\r\n                className='absolute h-full leftMap w-full'\r\n                style={{\r\n                  position: 'absolute',\r\n                  top: 0,\r\n                  left: 0,\r\n                  inset: 0,\r\n                  clipPath: `polygon(0% 0%, ${position}% 0%, ${position}% 100%, 0% 100%)`,\r\n                }}\r\n              />\r\n\r\n              <SliderHandle position={position} />\r\n            </div>\r\n          </DndContext>\r\n        </div>\r\n      </div>\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  );\r\n}\r\n\r\ninterface HandleProps {\r\n  position: number;\r\n}\r\n\r\nfunction SliderHandle(props: HandleProps) {\r\n  const { position } = props;\r\n  const { attributes, listeners, setNodeRef } = useDraggable({ id: 'slider-handle' });\r\n\r\n  return (\r\n    <div\r\n      ref={setNodeRef}\r\n      style={{\r\n        position: 'absolute',\r\n        left: `${position}%`,\r\n        top: 0,\r\n        bottom: 0,\r\n        width: '40px',\r\n        transform: 'translateX(-50%)',\r\n        cursor: 'col-resize',\r\n        display: 'flex',\r\n        justifyContent: 'center',\r\n        alignItems: 'center',\r\n        zIndex: 10,\r\n        touchAction: 'none',\r\n      }}\r\n      {...listeners}\r\n      {...attributes}\r\n    >\r\n      <div\r\n        className='h-full bg-primary-blue-600 dark:bg-primary-blue-400'\r\n        style={{ width: '2px' }}\r\n      />\r\n      <div\r\n        className='flex bg-primary-blue-600 dark:bg-primary-blue-400 rounded-full absolute items-center justify-center text-primary-white font-primary-white'\r\n        style={{\r\n          boxShadow: 'inset 0 0 0 1px #fff',\r\n          width: '42px',\r\n          height: '42px',\r\n          top: 'calc(50% - 21px)',\r\n          left: '0',\r\n          cursor: 'col-resize',\r\n        }}\r\n      >\r\n        <ChevronLeftRight />\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n","import { useRef, useEffect, useState } from 'react';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { Graph } from './Graph';\r\n\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { ClassNameObject, Languages, SourcesDataType, StyleObject } 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  /** URLs for mapStyles JSON user wants to compare  */\r\n  mapStyles: [string, string];\r\n  /** Defines the legend for the map. mapLegend with type string is show as innerHTML. */\r\n  mapLegend?: string | React.ReactNode;\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\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\n/** For using these maps you will have to install [`maplibre`](https://maplibre.org/maplibre-gl-js/docs/#npm), [pmtiles](https://www.npmjs.com/package/pmtiles), [dnd-kit/core](https://www.npmjs.com/package/@dnd-kit/core), and [dnd-kit/modifier](https://www.npmjs.com/package/@dnd-kit/modifiers) package to your project */\r\nexport function GeoHubCompareMaps(props: Props) {\r\n  const {\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    graphID,\r\n    mapStyles,\r\n    center = [0, 0],\r\n    zoomLevel = 3,\r\n    language = 'en',\r\n    minHeight = 0,\r\n    theme = 'light',\r\n    ariaLabel,\r\n    styles,\r\n    classNames,\r\n    mapLegend,\r\n  } = props;\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n  const graphDiv = useRef<HTMLDivElement>(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  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 comparison between two maps.${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            <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                <Graph\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                  mapStyles={mapStyles}\r\n                  center={center}\r\n                  zoomLevel={zoomLevel}\r\n                  mapLegend={mapLegend}\r\n                />\r\n              ) : null}\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":["synchronizeMap","map1","map2","isSyncing","syncMap","sourceMap","targetMap","center","zoom","bearing","pitch","Graph","props","height","width","mapStyles","zoomLevel","mapLegend","position","setPosition","useState","isDragging","setIsDragging","containerRef","useRef","showLegend","setShowLegend","dragStartPositionRef","sliderWidthRef","sensors","useSensors","useSensor","PointerSensor","handleDragStart","handleDragMove","event","deltaPercentage","newPosition","handleDragEnd","handleClick","e","rect","graphDiv","leftMapRef","rightMapRef","mapContainer","useEffect","select","protocol","pmtiles","maplibreGl","leftMap","rightMap","jsxs","jsx","DndContext","restrictToHorizontalAxis","SliderHandle","Fragment","X","string2HTML","React","attributes","listeners","setNodeRef","useDraggable","ChevronLeftRight","GeoHubCompareMaps","graphTitle","relativeHeight","sources","graphDescription","footNote","padding","backgroundColor","graphID","language","minHeight","theme","ariaLabel","styles","classNames","svgWidth","setSvgWidth","svgHeight","setSvgHeight","resizeObserver","entries","cn","GraphHeader","GraphFooter"],"mappings":"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"}

package/dist/GeoHubMap.d.ts

@@ -0,0 +1,118 @@
+import { default as default_2 } from 'react';
+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 GeoHubMap(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 | default_2.ReactNode;
+    /** Description of the graph */
+    graphDescription?: string | default_2.ReactNode;
+    /** Footnote for the graph */
+    footNote?: string | default_2.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. If the type is string, otherwise it creates and dropdown and provide end user to select the map style they would like to  */
+    mapStyle: string | {
+        style: string;
+        name: string;
+    }[];
+    /** Defines the legend for the map. If the mapStyle is string, mapLegend can be string or ReactNode. mapLegend with type string is show as innerHTML. If the mapStyle is not string, mapLegend is of type { mapStyleName: string; legend: string | React.ReactNode }[] where mapStyleName corresponds to the each name in the mapStyle. */
+    mapLegend?: string | default_2.ReactNode | MapLegendDataType[];
+    /** Starting center point of the map */
+    center?: [number, number];
+    /** Starting zoom level of the map */
+    zoomLevel?: number;
+    /** List of layer IDs to be included in the visualization. If this is present only these layers are included. */
+    includeLayers?: string[];
+    /** 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/GeoHubMap.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BHm2KTjD-D8FylaKc.cjs"),s=require("react"),k=require("./DropdownSelect-CuzV7gdj.cjs"),$=require("./Typography-CDR-DAHH.cjs"),R=require("maplibre-gl"),G=require("pmtiles");;/* empty css                       */const H=require("./fetchAndParseData.js"),L=require("./filterData-DN6py7y_.cjs"),O=require("./index-CEc_9zWy.cjs"),q=require("./string2HTML-X4ZYX5jI.cjs"),z=require("./select-Bnfk0lJx.cjs"),W=require("./GraphHeader.js"),A=require("./GraphFooter.js");function _(h){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const n in h)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(h,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>h[n]})}}return t.default=h,Object.freeze(t)}const P=_(G);function F(h){const{mapStyle:t,height:n,width:r,relativeHeight:a,center:b,zoomLevel:j,minHeight:u,includeLayers:m,excludeLayers:g,mapLegend:i}=h,[o,w]=s.useState(0),[S,f]=s.useState(0),[N,E]=s.useState(!0),d=s.useRef(null),x=s.useRef(null),l=s.useRef(null);return s.useEffect(()=>{const c=new ResizeObserver(p=>{w(r||p[0].target.clientWidth||620),f(n||p[0].target.clientHeight||480)});return d.current&&(f(d.current.clientHeight||480),w(d.current.clientWidth||620),r||c.observe(d.current)),()=>c.disconnect()},[r,n]),s.useEffect(()=>{x.current&&o&&!l.current&&H.fetchAndParseJSON(t).then(c=>{z.select(x.current).selectAll("div").remove();const y=new P.Protocol;R.addProtocol("pmtiles",y.tile);const v={container:x.current,style:m.length===0&&g.length===0?c:{...c,layers:L.filterData(c.layers,[{column:"id",includeValues:m,excludeValues:g}])},attributionControl:!0};b&&(v.center=b),j&&(v.zoom=j),l.current=new R.Map(v),l.current.addControl(new R.NavigationControl({visualizePitch:!0,showZoom:!0,showCompass:!0}),"bottom-right"),l.current.addControl(new R.ScaleControl,"bottom-left")})},[o,b,j,m,g,t]),s.useEffect(()=>{l.current&&H.fetchAndParseJSON(t).then(c=>{const p={...c,layers:L.filterData(c.layers,[{column:"id",includeValues:m,excludeValues:g}])};l.current.setStyle(p)})},[g,m,t]),e.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:d,"aria-label":"Map area",children:(r||o)&&(n||S)?e.jsxRuntimeExports.jsxs("div",{style:{width:r||o,height:Math.max(u,n||(a?u?(r||o)*a>u?(r||o)*a:u:(r||o)*a:S))},children:[e.jsxRuntimeExports.jsx("div",{ref:x,className:"map maplibre-show-control",style:{width:"100%",height:"100%"}}),i?e.jsxRuntimeExports.jsx("div",{className:"absolute left-[22px] bottom-13",children:N?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.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:()=>{E(!1)},children:e.jsxRuntimeExports.jsx(O.X,{})}),e.jsxRuntimeExports.jsx("div",{className:"p-2",style:{backgroundColor:"rgba(240,240,240, 0.7)"},dangerouslySetInnerHTML:typeof i=="string"?{__html:q.string2HTML(i)}:void 0,children:s.isValidElement(i)?i:null})]}):e.jsxRuntimeExports.jsx("button",{type:"button",className:"mb-0 border-0 bg-transparent p-0 self-start",onClick:()=>{E(!0)},children:e.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"})})}):null]}):null})}function I(h){const{mapStyle:t,height:n,width:r,relativeHeight:a,center:b,zoomLevel:j,minHeight:u,includeLayers:m,excludeLayers:g,mapLegend:i}=h,[o,w]=s.useState(0),[S,f]=s.useState(0),[N,E]=s.useState(!0),d=s.useRef(null),x=s.useRef(null);return s.useEffect(()=>{const l=new ResizeObserver(c=>{w(r||c[0].target.clientWidth||620),f(n||c[0].target.clientHeight||480)});return d.current&&(f(d.current.clientHeight||480),w(d.current.clientWidth||620),r||l.observe(d.current)),()=>l.disconnect()},[r,n]),s.useEffect(()=>{x.current&&o&&H.fetchAndParseJSON(t).then(l=>{z.select(x.current).selectAll("div").remove();const p=new P.Protocol;R.addProtocol("pmtiles",p.tile);const y={container:x.current,style:m.length===0&&g.length===0?l:{...l,layers:L.filterData(l.layers,[{column:"id",includeValues:m,excludeValues:g}])},attributionControl:!0};b&&(y.center=b),j&&(y.zoom=j);const v=new R.Map(y);v.addControl(new R.NavigationControl({visualizePitch:!0,showZoom:!0,showCompass:!0}),"bottom-right"),v.addControl(new R.ScaleControl,"bottom-left")})},[o,t,b,j,m,g]),e.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:d,"aria-label":"Map area",children:(r||o)&&(n||S)?e.jsxRuntimeExports.jsxs("div",{style:{width:r||o,height:Math.max(u,n||(a?u?(r||o)*a>u?(r||o)*a:u:(r||o)*a:S))},children:[e.jsxRuntimeExports.jsx("div",{ref:x,className:"map maplibre-show-control",style:{width:"100%",height:"100%"}}),i?e.jsxRuntimeExports.jsx("div",{className:"absolute left-[22px] bottom-13",children:N?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.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:()=>{E(!1)},children:e.jsxRuntimeExports.jsx(O.X,{})}),e.jsxRuntimeExports.jsx("div",{className:"p-2",style:{backgroundColor:"rgba(240,240,240, 0.7)"},dangerouslySetInnerHTML:typeof i=="string"?{__html:q.string2HTML(i)}:void 0,children:s.isValidElement(i)?i:null})]}):e.jsxRuntimeExports.jsx("button",{type:"button",className:"mb-0 border-0 bg-transparent p-0 self-start",onClick:()=>{E(!0)},children:e.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"})})}):null]}):null})}function J(h){const{mapStyle:t,graphTitle:n,height:r,width:a,relativeHeight:b,sources:j,graphDescription:u,footNote:m,padding:g,backgroundColor:i=!1,center:o,zoomLevel:w,graphID:S,language:f="en",minHeight:N=0,theme:E="light",includeLayers:d=[],excludeLayers:x=[],ariaLabel:l,uiMode:c="normal",styles:p,classNames:y,mapLegend:v}=h,[M,D]=s.useState(typeof t=="string"?t:t[0].style);s.useEffect(()=>{D(typeof t=="string"?t:t[0].style)},[t]);const T=s.useMemo(()=>({ignoreCase:!0,ignoreAccents:!0,trim:!0}),[]);return e.jsxRuntimeExports.jsx("div",{className:`${E||"light"} flex  ${a?"w-fit grow-0":"w-full grow"}`,dir:f==="he"||f==="ar"?"rtl":void 0,children:e.jsxRuntimeExports.jsx("div",{className:$.cnExports.cn(`${i?i===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${f||"en"}`,y?.graphContainer),style:{...p?.graphContainer||{},...i&&i!==!0?{backgroundColor:i}:{}},id:S,"aria-label":l||`${n?`The graph shows ${n}. `:""}This is a map.${u?` ${u}`:""}`,children:e.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:i?g||"1rem":g||0},children:e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[n||u?e.jsxRuntimeExports.jsx(W.GraphHeader,{styles:{title:p?.title,description:p?.description},classNames:{title:y?.title,description:y?.description},graphTitle:n,graphDescription:u,width:a}):null,typeof t=="string"?null:e.jsxRuntimeExports.jsx(k.DropdownSelectExports.DropdownSelect,{options:t.map(C=>({label:C.name,value:C.style})),isClearable:!1,size:"sm",variant:c,isRtl:f==="he"||f==="ar",isSearchable:!0,filterOption:k.DropdownSelectExports.createFilter(T),defaultValue:{label:t[0].name,value:t[0].style},controlShouldRenderValue:!0,onChange:C=>{C&&D(C.value)}}),typeof t=="string"?e.jsxRuntimeExports.jsx(I,{mapStyle:t,center:o,zoomLevel:w,width:a,height:r,relativeHeight:b,minHeight:N,includeLayers:d,excludeLayers:x,mapLegend:v}):e.jsxRuntimeExports.jsx(F,{mapStyle:M,center:o,zoomLevel:w,width:a,height:r,relativeHeight:b,minHeight:N,includeLayers:d,excludeLayers:x,mapLegend:(v||[]).find(C=>C.mapStyleName===t.find(V=>V.style===M)?.name)?.legend}),j||m?e.jsxRuntimeExports.jsx(A.GraphFooter,{styles:{footnote:p?.footnote,source:p?.source},classNames:{footnote:y?.footnote,source:y?.source},sources:j,footNote:m,width:a}):null]})})})})}exports.GeoHubMap=J;
+//# sourceMappingURL=GeoHubMap.js.map

package/dist/GeoHubMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeoHubMap.js","sources":["../src/Components/Graphs/Maps/GeoHubMaps/SimpleMap/GeoHubMultipleMap.tsx","../src/Components/Graphs/Maps/GeoHubMaps/SimpleMap/GeoHubSingleMap.tsx","../src/Components/Graphs/Maps/GeoHubMaps/SimpleMap/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 { X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\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  includeLayers: string[];\r\n  excludeLayers: string[];\r\n  mapLegend?: string | React.ReactNode;\r\n}\r\n\r\nexport function GeoHubMultipleMap(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    includeLayers,\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  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        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            includeLayers.length === 0 && excludeLayers.length === 0\r\n              ? d\r\n              : {\r\n                  ...d,\r\n                  layers: filterData(d.layers, [\r\n                    {\r\n                      column: 'id',\r\n                      includeValues: includeLayers,\r\n                      excludeValues: excludeLayers,\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, includeLayers, excludeLayers, mapStyle]);\r\n  useEffect(() => {\r\n    if (mapRef.current) {\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              includeValues: includeLayers,\r\n              excludeValues: excludeLayers,\r\n            },\r\n          ]),\r\n        };\r\n        mapRef.current.setStyle(mapStyleObj);\r\n      });\r\n    }\r\n  }, [excludeLayers, includeLayers, mapStyle]);\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\r\n            ref={mapContainer}\r\n            className='map maplibre-show-control'\r\n            style={{ width: '100%', height: '100%' }}\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 { 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 { X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\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  mapLegend?: string | React.ReactNode;\r\n  includeLayers: string[];\r\n  excludeLayers: string[];\r\n}\r\n\r\nexport function GeoHubSingleMap(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    includeLayers,\r\n    excludeLayers,\r\n    mapLegend,\r\n  } = props;\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n  const [showLegend, setShowLegend] = useState(true);\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const mapContainer = useRef<HTMLDivElement>(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) {\r\n      fetchAndParseJSON(mapStyle).then(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            includeLayers.length === 0 && excludeLayers.length === 0\r\n              ? d\r\n              : {\r\n                  ...d,\r\n                  layers: filterData(d.layers, [\r\n                    {\r\n                      column: 'id',\r\n                      includeValues: includeLayers,\r\n                      excludeValues: excludeLayers,\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        const map = new maplibreGl.Map(mapObj);\r\n        map.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        map.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      });\r\n    }\r\n  }, [svgWidth, mapStyle, center, zoomLevel, includeLayers, excludeLayers]);\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\r\n            ref={mapContainer}\r\n            className='map maplibre-show-control'\r\n            style={{ width: '100%', height: '100%' }}\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 React, { useEffect, useMemo, useState } from 'react';\r\nimport { DropdownSelect, createFilter } from '@undp/design-system-react/DropdownSelect';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { GeoHubMultipleMap } from './GeoHubMultipleMap';\r\nimport { GeoHubSingleMap } from './GeoHubSingleMap';\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. If the type is string, otherwise it creates and dropdown and provide end user to select the map style they would like to  */\r\n  mapStyle: string | { style: string; name: string }[];\r\n  /** Defines the legend for the map. If the mapStyle is string, mapLegend can be string or ReactNode. mapLegend with type string is show as innerHTML. If the mapStyle is not string, mapLegend is of type { mapStyleName: string; legend: string | React.ReactNode }[] where mapStyleName corresponds to the each name in the mapStyle. */\r\n  mapLegend?: string | React.ReactNode | MapLegendDataType[];\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 layer IDs to be included in the visualization. If this is present only these layers are included. */\r\n  includeLayers?: string[];\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 GeoHubMap(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    includeLayers = [],\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 [selectedMapStyle, setSelectedMapStyle] = useState(\r\n    typeof mapStyle === 'string' ? mapStyle : mapStyle[0].style,\r\n  );\r\n\r\n  useEffect(() => {\r\n    setSelectedMapStyle(typeof mapStyle === 'string' ? mapStyle : mapStyle[0].style);\r\n  }, [mapStyle]);\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            {typeof mapStyle === 'string' ? null : (\r\n              <DropdownSelect\r\n                options={mapStyle.map(d => ({ label: d.name, value: d.style }))}\r\n                isClearable={false}\r\n                size='sm'\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: mapStyle[0].name,\r\n                  value: mapStyle[0].style,\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) setSelectedMapStyle(el.value);\r\n                }}\r\n              />\r\n            )}\r\n            {typeof mapStyle === 'string' ? (\r\n              <GeoHubSingleMap\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                includeLayers={includeLayers}\r\n                excludeLayers={excludeLayers}\r\n                mapLegend={mapLegend as string | React.ReactNode | undefined}\r\n              />\r\n            ) : (\r\n              <GeoHubMultipleMap\r\n                mapStyle={selectedMapStyle}\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                includeLayers={includeLayers}\r\n                excludeLayers={excludeLayers}\r\n                mapLegend={\r\n                  ((mapLegend || []) as MapLegendDataType[]).find(\r\n                    d =>\r\n                      d.mapStyleName === mapStyle.find(el => el.style === selectedMapStyle)?.name,\r\n                  )?.legend\r\n                }\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":["GeoHubMultipleMap","props","mapStyle","height","width","relativeHeight","center","zoomLevel","minHeight","includeLayers","excludeLayers","mapLegend","svgWidth","setSvgWidth","useState","svgHeight","setSvgHeight","showLegend","setShowLegend","graphDiv","useRef","mapContainer","mapRef","useEffect","resizeObserver","entries","fetchAndParseJSON","d","select","protocol","pmtiles","maplibreGl","mapObj","filterData","mapStyleObj","jsx","jsxs","Fragment","X","string2HTML","React","GeoHubSingleMap","map","GeoHubMap","graphTitle","sources","graphDescription","footNote","padding","backgroundColor","graphID","language","theme","ariaLabel","uiMode","styles","classNames","selectedMapStyle","setSelectedMapStyle","filterConfig","useMemo","cn","GraphHeader","DropdownSelect","createFilter","el","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,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BHm2KTjD-D8FylaKc.cjs"),r=require("react"),I=require("./index-B0rbzOoC.cjs"),H=require("./DropdownSelect-CuzV7gdj.cjs"),$=require("./Typography-CDR-DAHH.cjs"),N=require("maplibre-gl"),T=require("pmtiles");;/* empty css                       */const M=require("./fetchAndParseData.js"),q=require("./filterData-DN6py7y_.cjs"),z=require("./string2HTML-X4ZYX5jI.cjs"),P=require("./index-CEc_9zWy.cjs"),G=require("./select-Bnfk0lJx.cjs"),V=require("./GraphHeader.js"),W=require("./GraphFooter.js");function A(p){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const t in p)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(p,t);Object.defineProperty(c,t,s.get?s:{enumerable:!0,get:()=>p[t]})}}return c.default=p,Object.freeze(c)}const _=A(T);function F(p){const{mapStyle:c,height:t,width:s,relativeHeight:m,center:E,zoomLevel:v,minHeight:x,selectedLayer:f,layerIdList:h,excludeLayers:n,mapLegend:b}=p,[g,D]=r.useState(0),[y,L]=r.useState(0),[C,o]=r.useState(!0),[S,O]=r.useState(void 0),j=r.useRef(null),u=r.useRef(null),a=r.useRef(null);return r.useEffect(()=>{const i=new ResizeObserver(d=>{D(s||d[0].target.clientWidth||620),L(t||d[0].target.clientHeight||480)});return j.current&&(L(j.current.clientHeight||480),D(j.current.clientWidth||620),s||i.observe(j.current)),()=>i.disconnect()},[s,t]),r.useEffect(()=>{u.current&&g&&!a.current&&M.fetchAndParseJSON(c).then(i=>{O(i),G.select(u.current).selectAll("div").remove();const w=new _.Protocol;N.addProtocol("pmtiles",w.tile);const R={container:u.current,style:{...i,layers:q.filterData(i.layers,[{column:"id",excludeValues:[...n,...h.filter(l=>f.indexOf(l)===-1)]}])},attributionControl:!0};E&&(R.center=E),v&&(R.zoom=v),a.current=new N.Map(R),a.current.addControl(new N.NavigationControl({visualizePitch:!0,showZoom:!0,showCompass:!0}),"bottom-right"),a.current.addControl(new N.ScaleControl,"bottom-left")})},[g,E,v,h,c,n,f]),r.useEffect(()=>{if(a.current)if(S){const i={...S,layers:q.filterData(S.layers,[{column:"id",excludeValues:[...n,...h.filter(d=>f.indexOf(d)===-1)]}])};a.current.setStyle(i)}else M.fetchAndParseJSON(c).then(i=>{const d={...i,layers:q.filterData(i.layers,[{column:"id",excludeValues:[...n,...h.filter(w=>f.indexOf(w)===-1)]}])};a.current.setStyle(d)})},[n,h,c,S,f]),e.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:j,"aria-label":"Map area",children:(s||g)&&(t||y)?e.jsxRuntimeExports.jsxs("div",{style:{width:s||g,height:Math.max(x,t||(m?x?(s||g)*m>x?(s||g)*m:x:(s||g)*m:y))},children:[e.jsxRuntimeExports.jsx("div",{ref:u,className:"map maplibre-show-control w-full h-full"}),b?e.jsxRuntimeExports.jsx("div",{className:"absolute left-[22px] bottom-13",children:C?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.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:()=>{o(!1)},children:e.jsxRuntimeExports.jsx(P.X,{})}),e.jsxRuntimeExports.jsx("div",{className:"p-2",style:{backgroundColor:"rgba(240,240,240, 0.7)"},dangerouslySetInnerHTML:typeof b=="string"?{__html:z.string2HTML(b)}:void 0,children:r.isValidElement(b)?b:null})]}):e.jsxRuntimeExports.jsx("button",{type:"button",className:"mb-0 border-0 bg-transparent p-0 self-start",onClick:()=>{o(!0)},children:e.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"})})}):null]}):null})}function J(p){const{mapStyle:c,graphTitle:t,height:s,width:m,relativeHeight:E,sources:v,graphDescription:x,footNote:f,padding:h,backgroundColor:n=!1,center:b,zoomLevel:g,graphID:D,language:y="en",minHeight:L=0,theme:C="light",layerSelection:o,excludeLayers:S=[],ariaLabel:O,uiMode:j="normal",styles:u,classNames:a,mapLegend:i=[]}=p,[d,w]=r.useState(o[0].layerID);r.useEffect(()=>{w(o[0].layerID)},[o]);const R=r.useMemo(()=>({ignoreCase:!0,ignoreAccents:!0,trim:!0}),[]);return e.jsxRuntimeExports.jsx("div",{className:`${C||"light"} flex  ${m?"w-fit grow-0":"w-full grow"}`,dir:y==="he"||y==="ar"?"rtl":void 0,children:e.jsxRuntimeExports.jsx("div",{className:$.cnExports.cn(`${n?n===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${y||"en"}`,a?.graphContainer),style:{...u?.graphContainer||{},...n&&n!==!0?{backgroundColor:n}:{}},id:D,"aria-label":O||`${t?`The graph shows ${t}. `:""}This is a map.${x?` ${x}`:""}`,children:e.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:n?h||"1rem":h||0},children:e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[t||x?e.jsxRuntimeExports.jsx(V.GraphHeader,{styles:{title:u?.title,description:u?.description},classNames:{title:a?.title,description:a?.description},graphTitle:t,graphDescription:x,width:m}):null,e.jsxRuntimeExports.jsx(H.DropdownSelectExports.DropdownSelect,{options:o.map(l=>({label:l.name,value:l.layerID})),size:"sm",isClearable:!1,variant:j,isRtl:y==="he"||y==="ar",isSearchable:!0,filterOption:H.DropdownSelectExports.createFilter(R),defaultValue:{label:o[0].name,value:o[0].layerID},controlShouldRenderValue:!0,onChange:l=>{l&&w(l.value)}}),e.jsxRuntimeExports.jsx(F,{mapStyle:c,center:b,zoomLevel:g,width:m,height:s,relativeHeight:E,minHeight:L,selectedLayer:d,layerIdList:I.flattenDeep(o.map(l=>l.layerID)),excludeLayers:S,mapLegend:i.find(l=>l.mapStyleName===o.find(k=>k.layerID===d)?.name)?.legend}),v||f?e.jsxRuntimeExports.jsx(W.GraphFooter,{styles:{footnote:u?.footnote,source:u?.source},classNames:{footnote:a?.footnote,source:a?.source},sources:v,footNote:f,width:m}):null]})})})})}exports.GeoHubMapWithLayerSelection=J;
+//# 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.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,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./index-BHm2KTjD-D8FylaKc.cjs"),n=require("./Typography-CDR-DAHH.cjs"),o=require("react");function a(s){const{text:r,style:e,className:t}=s;return typeof r=="string"?r.trim()===""?null:i.jsxRuntimeExports.jsx(n.TypographyExports.P,{size:"sm",marginBottom:"none",className:n.cnExports.cn("text-primary-gray-550 dark:text-primary-gray-400",t),"aria-label":"Graph description",style:e,children:r}):o.isValidElement(r)?i.jsxRuntimeExports.jsx("div",{className:t,style:e,children:r}):(console.error("GraphDescription: Invalid text type. Expected string or React element."),null)}exports.GraphDescription=a;
+//# 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":"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,kBAAAA,EAAA,CACC,KAAK,KACL,aAAa,OACb,UAAWC,EAAAA,UAAAA,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/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,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-BHm2KTjD-D8FylaKc.cjs"),u=require("./FootNote.js"),i=require("./Source.js");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.js.map

package/dist/GraphFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphFooter.js","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":"qLAYO,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/GraphHeader.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'react/jsx-runtime';
+
+export declare function GraphHeader(props: Props): JSX.Element;
+
+declare interface Props {
+    graphTitle?: string | React.ReactNode;
+    graphDescription?: string | React.ReactNode;
+    width?: number;
+    graphDownload?: HTMLDivElement | null;
+    dataDownload?: any;
+    isDashboard?: boolean;
+    styles?: {
+        title?: React.CSSProperties;
+        description?: React.CSSProperties;
+    };
+    classNames?: {
+        title?: string;
+        description?: string;
+    };
+}
+
+export { }

package/dist/GraphHeader.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BHm2KTjD-D8FylaKc.cjs"),p=require("./CsvDownloadButton.js"),c=require("./ImageDownloadButton.js"),d=require("./GraphDescription.js"),m=require("./GraphTitle.js");function h(u){const{graphTitle:s,graphDescription:a,width:r,graphDownload:l,dataDownload:t,isDashboard:x,styles:n,classNames:i}=u;return e.jsxRuntimeExports.jsxs("div",{className:`flex gap-2 justify-between ${a&&s?"items-start":"items-center"}`,style:{maxWidth:r?`${r}px`:"none"},"aria-label":"Graph header",children:[e.jsxRuntimeExports.jsxs("div",{className:"flex-col flex gap-1",children:[s?e.jsxRuntimeExports.jsx(m.GraphTitle,{text:s,isDashboard:x,style:n?.title,className:i?.title}):null,a?e.jsxRuntimeExports.jsx(d.GraphDescription,{text:a,style:n?.description,className:i?.description}):null]}),l||t?e.jsxRuntimeExports.jsxs("div",{className:"flex gap-3",children:[l?e.jsxRuntimeExports.jsx(c.ImageDownloadButton,{nodeID:l,buttonSmall:!0}):null,t&&t.length>0?e.jsxRuntimeExports.jsx(p.CsvDownloadButton,{csvData:t,buttonSmall:!0,headers:Object.keys(t[0]).map(o=>({label:o,key:o}))}):null]}):null]})}exports.GraphHeader=h;
+//# sourceMappingURL=GraphHeader.js.map

package/dist/GraphHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphHeader.js","sources":["../src/Components/Elements/GraphHeader.tsx"],"sourcesContent":["import { CsvDownloadButton } from '@/Components/Actions/CsvDownloadButton';\r\nimport { ImageDownloadButton } from '@/Components/Actions/ImageDownloadButton';\r\nimport { GraphDescription } from '@/Components/Typography/GraphDescription';\r\nimport { GraphTitle } from '@/Components/Typography/GraphTitle';\r\n\r\ninterface Props {\r\n  graphTitle?: string | React.ReactNode;\r\n  graphDescription?: string | React.ReactNode;\r\n  width?: number;\r\n  graphDownload?: HTMLDivElement | null;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  dataDownload?: any;\r\n  isDashboard?: boolean;\r\n  styles?: { title?: React.CSSProperties; description?: React.CSSProperties };\r\n  classNames?: { title?: string; description?: string };\r\n}\r\n\r\nexport function GraphHeader(props: Props) {\r\n  const {\r\n    graphTitle,\r\n    graphDescription,\r\n    width,\r\n    graphDownload,\r\n    dataDownload,\r\n    isDashboard,\r\n    styles,\r\n    classNames,\r\n  } = props;\r\n  return (\r\n    <div\r\n      className={`flex gap-2 justify-between ${\r\n        graphDescription && graphTitle ? 'items-start' : 'items-center'\r\n      }`}\r\n      style={{ maxWidth: width ? `${width}px` : 'none' }}\r\n      aria-label='Graph header'\r\n    >\r\n      <div className='flex-col flex gap-1'>\r\n        {graphTitle ? (\r\n          <GraphTitle\r\n            text={graphTitle}\r\n            isDashboard={isDashboard}\r\n            style={styles?.title}\r\n            className={classNames?.title}\r\n          />\r\n        ) : null}\r\n        {graphDescription ? (\r\n          <GraphDescription\r\n            text={graphDescription}\r\n            style={styles?.description}\r\n            className={classNames?.description}\r\n          />\r\n        ) : null}\r\n      </div>\r\n      {graphDownload || dataDownload ? (\r\n        <div className='flex gap-3'>\r\n          {graphDownload ? <ImageDownloadButton nodeID={graphDownload} buttonSmall /> : null}\r\n          {dataDownload && dataDownload.length > 0 ? (\r\n            <CsvDownloadButton\r\n              csvData={dataDownload}\r\n              buttonSmall\r\n              headers={Object.keys(dataDownload[0]).map(d => ({\r\n                label: d,\r\n                key: d,\r\n              }))}\r\n            />\r\n          ) : null}\r\n        </div>\r\n      ) : null}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["GraphHeader","props","graphTitle","graphDescription","width","graphDownload","dataDownload","isDashboard","styles","classNames","jsxs","jsx","GraphTitle","GraphDescription","ImageDownloadButton","CsvDownloadButton","d"],"mappings":"2QAiBO,SAASA,EAAYC,EAAc,CACxC,KAAM,CACJ,WAAAC,EACA,iBAAAC,EACA,MAAAC,EACA,cAAAC,EACA,aAAAC,EACA,YAAAC,EACA,OAAAC,EACA,WAAAC,CAAA,EACER,EACJ,OACES,EAAAA,kBAAAA,KAAC,MAAA,CACC,UAAW,8BACTP,GAAoBD,EAAa,cAAgB,cACnD,GACA,MAAO,CAAE,SAAUE,EAAQ,GAAGA,CAAK,KAAO,MAAA,EAC1C,aAAW,eAEX,SAAA,CAAAM,EAAAA,kBAAAA,KAAC,MAAA,CAAI,UAAU,sBACZ,SAAA,CAAAR,EACCS,EAAAA,kBAAAA,IAACC,EAAAA,WAAA,CACC,KAAMV,EACN,YAAAK,EACA,MAAOC,GAAQ,MACf,UAAWC,GAAY,KAAA,CAAA,EAEvB,KACHN,EACCQ,EAAAA,kBAAAA,IAACE,EAAAA,iBAAA,CACC,KAAMV,EACN,MAAOK,GAAQ,YACf,UAAWC,GAAY,WAAA,CAAA,EAEvB,IAAA,EACN,EACCJ,GAAiBC,EAChBI,yBAAC,MAAA,CAAI,UAAU,aACZ,SAAA,CAAAL,0BAAiBS,EAAAA,oBAAA,CAAoB,OAAQT,EAAe,YAAW,GAAC,EAAK,KAC7EC,GAAgBA,EAAa,OAAS,EACrCK,EAAAA,kBAAAA,IAACI,EAAAA,kBAAA,CACC,QAAST,EACT,YAAW,GACX,QAAS,OAAO,KAAKA,EAAa,CAAC,CAAC,EAAE,IAAIU,IAAM,CAC9C,MAAOA,EACP,IAAKA,CAAA,EACL,CAAA,CAAA,EAEF,IAAA,CAAA,CACN,EACE,IAAA,CAAA,CAAA,CAGV"}

package/dist/GraphTitle.d.ts

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

package/dist/GraphTitle.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./index-BHm2KTjD-D8FylaKc.cjs"),t=require("./Typography-CDR-DAHH.cjs"),o=require("react");function l(n){const{text:r,isDashboard:s,style:e,className:a}=n;return typeof r=="string"?r.trim()===""?null:s?i.jsxRuntimeExports.jsx(t.TypographyExports.H5,{marginBottom:"base",className:t.cnExports.cn("font-bold pb-3 text-primary-black dark:text-primary-gray-100",a),"aria-label":"Dashboard title",style:e,children:r}):i.jsxRuntimeExports.jsx(t.TypographyExports.P,{marginBottom:"none",className:t.cnExports.cn("text-primary-black dark:text-primary-gray-100",a),"aria-label":"Graph title",style:e,children:r}):o.isValidElement(r)?i.jsxRuntimeExports.jsx("div",{className:a,style:e,children:r}):(console.error("GraphTitle: Invalid text type. Expected string or React element."),null)}exports.GraphTitle=l;
+//# sourceMappingURL=GraphTitle.js.map

package/dist/GraphTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphTitle.js","sources":["../src/Components/Typography/GraphTitle.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { H5, 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  isDashboard?: boolean;\r\n  style?: React.CSSProperties;\r\n  className?: string;\r\n}\r\n\r\nexport function GraphTitle(props: Props) {\r\n  const { text, isDashboard, style, className } = props;\r\n  if (typeof text === 'string') {\r\n    if (text.trim() === '') return null;\r\n    if (isDashboard)\r\n      return (\r\n        <H5\r\n          marginBottom='base'\r\n          className={cn('font-bold pb-3 text-primary-black dark:text-primary-gray-100', className)}\r\n          aria-label='Dashboard title'\r\n          style={style}\r\n        >\r\n          {text}\r\n        </H5>\r\n      );\r\n    return (\r\n      <P\r\n        marginBottom='none'\r\n        className={cn('text-primary-black dark:text-primary-gray-100', className)}\r\n        aria-label='Graph title'\r\n        style={style}\r\n      >\r\n        {text}\r\n      </P>\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('GraphTitle: Invalid text type. Expected string or React element.');\r\n  return null;\r\n}\r\n"],"names":["GraphTitle","props","text","isDashboard","style","className","jsx","H5","cn","P","React"],"mappings":"2LAWO,SAASA,EAAWC,EAAc,CACvC,KAAM,CAAE,KAAAC,EAAM,YAAAC,EAAa,MAAAC,EAAO,UAAAC,GAAcJ,EAChD,OAAI,OAAOC,GAAS,SACdA,EAAK,SAAW,GAAW,KAC3BC,EAEAG,EAAAA,kBAAAA,IAACC,EAAAA,kBAAAA,GAAA,CACC,aAAa,OACb,UAAWC,EAAAA,UAAAA,GAAG,+DAAgEH,CAAS,EACvF,aAAW,kBACX,MAAAD,EAEC,SAAAF,CAAA,CAAA,EAILI,EAAAA,kBAAAA,IAACG,EAAAA,kBAAAA,EAAA,CACC,aAAa,OACb,UAAWD,EAAAA,UAAAA,GAAG,gDAAiDH,CAAS,EACxE,aAAW,cACX,MAAAD,EAEC,SAAAF,CAAA,CAAA,EAIHQ,EAAM,eAAeR,CAAI,EAEzBI,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAAD,EAAsB,MAAAD,EACxB,SAAAF,EACH,GAEJ,QAAQ,MAAM,kEAAkE,EACzE,KACT"}