@undp/data-viz 1.3.1 → 1.4.0

package/dist/SingleGraphDashboardGeoHubMaps.d.ts

@@ -0,0 +1,428 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare interface AnimateDataType {
+    duration: number;
+    once: boolean;
+    amount: 'some' | 'all' | number;
+}
+
+declare interface AnnotationSettingsDataType {
+    text: string;
+    maxWidth?: number;
+    xCoordinate?: number | string;
+    yCoordinate?: number | string;
+    xOffset?: number;
+    yOffset?: number;
+    align?: 'center' | 'left' | 'right';
+    color?: string;
+    fontWeight?: 'regular' | 'bold' | 'medium';
+    showConnector?: boolean | number;
+    connectorRadius?: number;
+    classNames?: {
+        connector?: string;
+        text?: string;
+    };
+    styles?: {
+        connector?: React.CSSProperties;
+        text?: React.CSSProperties;
+    };
+}
+
+declare interface AxesClassNameObject {
+    gridLines?: string;
+    labels?: string;
+    title?: string;
+    axis?: string;
+}
+
+declare interface AxesStyleObject {
+    gridLines?: React.CSSProperties;
+    labels?: React.CSSProperties;
+    title?: React.CSSProperties;
+    axis?: React.CSSProperties;
+}
+
+declare interface ClassNameObject {
+    title?: string;
+    footnote?: string;
+    source?: string;
+    description?: string;
+    tooltip?: string;
+    xAxis?: AxesClassNameObject;
+    yAxis?: AxesClassNameObject;
+    legend?: string;
+    graphContainer?: string;
+    graphObjectValues?: string;
+    dataConnectors?: string;
+    mouseOverLine?: string;
+    regLine?: string;
+    dataCards?: string;
+}
+
+declare type CurveTypes = 'linear' | 'curve' | 'step' | 'stepAfter' | 'stepBefore';
+
+declare interface CustomHighlightAreaSettingsDataType {
+    coordinates: (number | string)[];
+    closePath?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    color?: string;
+    strokeWidth?: number;
+}
+
+declare interface CustomLayerDataType {
+    position: 'before' | 'after';
+    layer: React.ReactNode;
+}
+
+declare interface DataTableColumnDataType {
+    columnTitle?: string;
+    columnId: string;
+    sortable?: boolean;
+    filterOptions?: string[];
+    chip?: boolean;
+    chipColumnId?: string;
+    chipColors?: {
+        value: string;
+        color: string;
+    }[];
+    separator?: string;
+    align?: 'left' | 'right' | 'center';
+    suffix?: string;
+    prefix?: string;
+    columnWidth?: number;
+}
+
+declare type GeoHubGraphType = 'geoHubCompareMap' | 'geoHubMap' | 'geoHubMapWithLayerSelection';
+
+declare interface GraphSettingsDataType {
+    colors?: string | string[] | string[][];
+    orientation?: 'horizontal' | 'vertical';
+    axisTitles?: [string, string];
+    graphTitle?: string | React.ReactNode;
+    labelOrder?: string[];
+    graphDescription?: string | React.ReactNode;
+    footNote?: string | React.ReactNode;
+    height?: number;
+    width?: number;
+    suffix?: string;
+    prefix?: string;
+    sources?: SourcesDataType[];
+    barPadding?: number;
+    showTicks?: boolean;
+    leftMargin?: number;
+    rightMargin?: number;
+    truncateBy?: number;
+    colorDomain?: string[] | number[];
+    colorLegendTitle?: string;
+    backgroundColor?: string | boolean;
+    padding?: string;
+    topMargin?: number;
+    bottomMargin?: number;
+    relativeHeight?: number;
+    showColorScale?: boolean;
+    maxValue?: number;
+    minValue?: number;
+    tooltip?: string | ((_d: any) => React.ReactNode);
+    refValues?: ReferenceDataType[];
+    graphID?: string;
+    highlightedDataPoints?: (string | number)[];
+    graphDownload?: boolean;
+    sortData?: 'desc' | 'asc';
+    dataDownload?: boolean;
+    maxRadiusValue?: number;
+    leftBarTitle?: string;
+    rightBarTitle?: string;
+    barColors?: [string, string];
+    centerGap?: number;
+    columnData?: DataTableColumnDataType[];
+    mainText?: string;
+    subNote?: string;
+    radius?: number;
+    strokeWidth?: number;
+    showValues?: boolean;
+    scaleType?: ScaleDataType;
+    showColumnLabels?: boolean;
+    showRowLabels?: boolean;
+    noDataColor?: string;
+    fillContainer?: boolean;
+    numberOfBins?: number;
+    donutStrokeWidth?: number;
+    barGraphLayout?: 'horizontal' | 'vertical';
+    graphType?: 'circlePacking' | 'treeMap' | 'barGraph' | 'donutChart';
+    donutColorDomain?: string[];
+    lineTitles?: [string, string];
+    noOfXTicks?: number;
+    dateFormat?: string;
+    lineColors?: string[];
+    sameAxes?: boolean;
+    highlightAreaSettings?: HighlightAreaSettingsDataType[] | HighlightAreaSettingsForScatterPlotDataType[];
+    labels?: (string | number)[];
+    showColorLegendAtTop?: boolean;
+    highlightedLines?: (string | number)[];
+    area?: boolean;
+    mapData?: any;
+    xColorLegendTitle?: string;
+    yColorLegendTitle?: string;
+    xDomain?: [number, number, number, number];
+    yDomain?: [number, number, number, number];
+    scale?: number;
+    centerPoint?: [number, number];
+    mapBorderWidth?: number;
+    mapNoDataColor?: string;
+    mapBorderColor?: string;
+    isWorldMap?: boolean;
+    zoomScaleExtend?: [number, number];
+    zoomTranslateExtend?: [[number, number], [number, number]];
+    highlightedIds?: string[];
+    mapProperty?: string;
+    showAntarctica?: boolean;
+    mapStyles?: [string, string];
+    center?: [number, number];
+    zoomLevel?: number;
+    mapStyle?: string | {
+        style: string;
+        name: string;
+    }[];
+    barTitle?: string;
+    lineTitle?: string;
+    barColor?: string;
+    lineColor?: string;
+    showLabels?: boolean;
+    xAxisTitle?: string;
+    yAxisTitle?: string;
+    refXValues?: ReferenceDataType[];
+    refYValues?: ReferenceDataType[];
+    customHighlightAreaSettings?: CustomHighlightAreaSettingsDataType[];
+    maxXValue?: number;
+    minXValue?: number;
+    maxYValue?: number;
+    minYValue?: number;
+    axisTitle?: [string, string];
+    year?: number | string;
+    aggregationMethod?: 'count' | 'max' | 'min' | 'average' | 'sum';
+    stripType?: 'strip' | 'dot';
+    language?: Languages;
+    animate?: boolean | AnimateDataType;
+    highlightColor?: string;
+    dotOpacity?: number;
+    sortParameter?: number | 'diff' | 'total';
+    arrowConnector?: boolean;
+    connectorStrokeWidth?: number;
+    countOnly?: (string | number)[];
+    value?: number;
+    gridSize?: number;
+    unitPadding?: number;
+    size?: number;
+    totalNoOfDots?: number;
+    showStrokeForWhiteDots?: boolean;
+    note?: string;
+    showNAColor?: boolean;
+    minHeight?: number;
+    autoPlay?: boolean;
+    autoSort?: boolean;
+    showOnlyActiveDate?: boolean;
+    showDots?: boolean;
+    diffAreaColors?: [string, string];
+    theme?: 'dark' | 'light';
+    uiMode?: 'light' | 'normal';
+    maxBarThickness?: number;
+    minBarThickness?: number;
+    maxNumberOfBars?: number;
+    includeLayers?: string[];
+    excludeLayers?: string[];
+    layerSelection?: {
+        layerID: string;
+        name: string[];
+    }[];
+    annotations?: AnnotationSettingsDataType[];
+    regressionLine?: boolean | string;
+    ariaLabel?: string;
+    nodePadding?: number;
+    nodeWidth?: number;
+    highlightedSourceDataPoints?: string[];
+    highlightedTargetDataPoints?: string[];
+    defaultLinkOpacity?: number;
+    sourceTitle?: string;
+    targetTitle?: string;
+    sortNodes?: 'asc' | 'desc' | 'mostReadable' | 'none';
+    sourceColors?: string[] | string;
+    targetColors?: string[] | string;
+    sourceColorDomain?: string[];
+    targetColorDomain?: string[];
+    showIntervalDots?: boolean;
+    showIntervalValues?: boolean;
+    intervalLineStrokeWidth?: number;
+    intervalLineColors?: [string, string];
+    intervalAreaColor?: string;
+    cardTemplate?: string | ((_d: any) => React.ReactNode);
+    cardBackgroundColor?: string;
+    legendMaxWidth?: string;
+    cardFilters?: {
+        column: string;
+        label?: string;
+        defaultValue?: string | number;
+        excludeValues?: (string | number)[];
+        width?: string;
+    }[];
+    cardSortingOptions?: {
+        defaultValue?: string;
+        options: {
+            value: string;
+            label: string;
+            type: 'asc' | 'desc';
+        }[];
+        width?: string;
+    };
+    cardSearchColumns?: string[];
+    cardMinWidth?: number;
+    textBackground?: boolean;
+    headingFontSize?: string;
+    centerAlign?: boolean;
+    verticalAlign?: 'center' | 'top' | 'bottom';
+    resetSelectionOnDoubleClick?: boolean;
+    intervalAreaOpacity?: number;
+    detailsOnClick?: string | ((_d: any) => React.ReactNode);
+    valueColor?: string;
+    labelColor?: string;
+    noOfYTicks?: number;
+    noOfTicks?: number;
+    minDate?: string | number;
+    maxDate?: string | number;
+    colorLegendColors?: string[];
+    colorLegendDomain?: string[];
+    barAxisTitle?: string;
+    barSuffix?: string;
+    barPrefix?: string;
+    lineSuffix?: string;
+    linePrefix?: string;
+    xSuffix?: string;
+    xPrefix?: string;
+    ySuffix?: string;
+    yPrefix?: string;
+    lineSuffixes?: [string, string];
+    linePrefixes?: [string, string];
+    allowDataDownloadOnDetail?: string | boolean;
+    noOfItemsInAPage?: number;
+    curveType?: CurveTypes;
+    styles?: StyleObject;
+    classNames?: ClassNameObject;
+    mapProjection?: MapProjectionTypes;
+    filterNA?: boolean;
+    fillShape?: boolean;
+    colorScaleMaxWidth?: string;
+    axisLabels?: (string | number)[];
+    minWidth?: string;
+    zoomInteraction?: ZoomInteractionTypes;
+    layout?: 'primary' | 'secondary';
+    qualitativeRangeColors?: string[];
+    targetStyle?: 'background' | 'line';
+    targetColor?: 'string';
+    measureBarWidthFactor?: number;
+    mapLegend?: string | React.ReactNode | MapLegendDataType[];
+    dimmedOpacity?: number;
+    precision?: number;
+    customLayers?: CustomLayerDataType[];
+    dashedLines?: (string | number)[];
+    dashSettings?: string[];
+    labelsToBeHidden?: (string | number)[];
+    autoRotate?: boolean;
+    enableZoom?: boolean;
+    globeMaterial?: MaterialDataType;
+    categorical?: boolean;
+    atmosphereColor?: string;
+    lineAxisTitle?: string;
+    timeline?: TimelineDataType;
+    naLabel?: string;
+    globeOffset?: [number, number];
+    polygonAltitude?: number;
+}
+
+declare interface HighlightAreaSettingsDataType {
+    coordinates: [number | string | null, number | string | null];
+    style?: React.CSSProperties;
+    className?: string;
+    color?: string;
+    strokeWidth?: number;
+}
+
+declare interface HighlightAreaSettingsForScatterPlotDataType {
+    coordinates: [number | null, number | null, number | null, number | null];
+    style?: React.CSSProperties;
+    className?: string;
+    color?: string;
+    strokeWidth?: number;
+}
+
+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 type MapProjectionTypes = 'mercator' | 'equalEarth' | 'naturalEarth' | 'orthographic' | 'albersUSA';
+
+declare interface MaterialDataType {
+    color: string;
+    opacity: number;
+    transparent: boolean;
+}
+
+declare interface Props {
+    graphSettings?: GraphSettingsDataType;
+    graphType: GeoHubGraphType;
+    debugMode?: boolean;
+    uiMode?: 'light' | 'normal';
+}
+
+declare interface ReferenceDataType {
+    value: number | null;
+    text: string;
+    color?: string;
+    styles?: {
+        line?: React.CSSProperties;
+        text?: React.CSSProperties;
+    };
+    classNames?: {
+        line?: string;
+        text?: string;
+    };
+}
+
+declare type ScaleDataType = 'categorical' | 'linear' | 'threshold';
+
+export declare function SingleGraphDashboardGeoHubMaps(props: Props): JSX.Element;
+
+declare interface SourcesDataType {
+    source: string;
+    link?: string;
+}
+
+declare interface StyleObject {
+    title?: React.CSSProperties;
+    footnote?: React.CSSProperties;
+    source?: React.CSSProperties;
+    description?: React.CSSProperties;
+    graphContainer?: React.CSSProperties;
+    tooltip?: React.CSSProperties;
+    xAxis?: AxesStyleObject;
+    yAxis?: AxesStyleObject;
+    graphObjectValues?: React.CSSProperties;
+    dataConnectors?: React.CSSProperties;
+    mouseOverLine?: React.CSSProperties;
+    regLine?: React.CSSProperties;
+    dataCards?: React.CSSProperties;
+}
+
+declare interface TimelineDataType {
+    autoplay: boolean;
+    enabled: boolean;
+    showOnlyActiveDate: boolean;
+    speed?: number;
+    dateFormat?: string;
+}
+
+declare type ZoomInteractionTypes = 'scroll' | 'ctrlScroll' | 'button' | 'noZoom';
+
+export { }

package/dist/SingleGraphDashboardGeoHubMaps.js

@@ -0,0 +1,185 @@
+import { j as a, m as p } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useRef as h } from "react";
+import { u as d } from "./Typography-Ctgfl1J5.js";
+import { GeoHubCompareMaps as c } from "./GeoHubCompareMaps.js";
+import { GeoHubMap as m } from "./GeoHubMap.js";
+import { GeoHubMapWithLayerSelection as u } from "./GeoHubMapWithLayerSelection.js";
+import { GraphHeader as b } from "./GraphHeader.js";
+function f(t) {
+  const { settings: e, graph: r, debugMode: o } = t;
+  o && (console.log(`Graph: ${r}`), console.log("Settings:", e));
+  const i = {
+    geoHubCompareMap: c,
+    geoHubMap: m,
+    geoHubMapWithLayerSelection: u
+  }, l = (n) => {
+    switch (n) {
+      case "geoHubCompareMap":
+        return {
+          theme: e?.theme,
+          graphTitle: e?.graphTitle,
+          sources: e?.sources,
+          graphDescription: e?.graphDescription,
+          footNote: e?.footNote,
+          backgroundColor: e?.backgroundColor,
+          padding: e?.padding,
+          width: e?.width,
+          height: e?.height,
+          relativeHeight: e?.relativeHeight,
+          graphID: e?.graphID,
+          mapStyles: e?.mapStyles,
+          center: e?.center,
+          zoomLevel: e?.zoomLevel,
+          language: e?.language,
+          minHeight: e?.minHeight,
+          ariaLabel: e?.ariaLabel,
+          styles: e?.styles,
+          classNames: e?.classNames,
+          mapLegend: e?.mapLegend
+        };
+      case "geoHubMap":
+        return {
+          theme: e?.theme,
+          mapStyle: e?.mapStyle,
+          center: e?.center,
+          zoomLevel: e?.zoomLevel,
+          graphTitle: e?.graphTitle,
+          sources: e?.sources,
+          graphDescription: e?.graphDescription,
+          footNote: e?.footNote,
+          backgroundColor: e?.backgroundColor,
+          padding: e?.padding,
+          width: e?.width,
+          height: e?.height,
+          relativeHeight: e?.relativeHeight,
+          graphID: e?.graphID,
+          language: e?.language,
+          minHeight: e?.minHeight,
+          includeLayers: e?.includeLayers,
+          excludeLayers: e?.excludeLayers,
+          ariaLabel: e?.ariaLabel,
+          uiMode: e?.uiMode,
+          styles: e?.styles,
+          classNames: e?.classNames,
+          mapLegend: e?.mapLegend
+        };
+      case "geoHubMapWithLayerSelection":
+        return {
+          theme: e?.theme,
+          mapStyle: e?.mapStyle,
+          center: e?.center,
+          zoomLevel: e?.zoomLevel,
+          graphTitle: e?.graphTitle,
+          sources: e?.sources,
+          graphDescription: e?.graphDescription,
+          footNote: e?.footNote,
+          backgroundColor: e?.backgroundColor,
+          padding: e?.padding,
+          width: e?.width,
+          height: e?.height,
+          relativeHeight: e?.relativeHeight,
+          graphID: e?.graphID,
+          language: e?.language,
+          minHeight: e?.minHeight,
+          layerSelection: e?.layerSelection,
+          excludeLayers: e?.excludeLayers,
+          ariaLabel: e?.ariaLabel,
+          uiMode: e?.uiMode,
+          mapLegend: e?.mapLegend
+        };
+      default:
+        return {};
+    }
+  }, s = i[r], g = l(r);
+  return /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      className: `grow my-0 mx-auto flex flex-col h-inherit ${e?.width ? "w-fit" : "w-full"} justify-center ${e?.theme || "light"}`,
+      style: { minHeight: "inherit" },
+      children: s ? /* @__PURE__ */ a.jsx(s, { ...g }) : /* @__PURE__ */ a.jsx(
+        d,
+        {
+          size: "sm",
+          marginBottom: "none",
+          className: "p-2 text-center text-accent-dark-red dark:text-accent-red",
+          children: `Invalid chart type: ${r}`
+        }
+      )
+    }
+  );
+}
+function D(t) {
+  const { graphSettings: e, graphType: r, debugMode: o, uiMode: i = "normal" } = t, l = h(null);
+  return /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      className: `${e?.theme || "light"} flex ${e?.width ? "w-fit grow-0" : "w-full grow"}${e?.height ? "" : " h-full"}`,
+      dir: e?.language === "he" || e?.language === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ a.jsx(
+        "div",
+        {
+          className: p(
+            `${e?.backgroundColor ? e?.backgroundColor === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${e?.language || "en"}`,
+            e?.classNames?.graphContainer
+          ),
+          style: {
+            ...e?.styles?.graphContainer || {},
+            ...e?.backgroundColor && e?.backgroundColor !== !0 ? { backgroundColor: e?.backgroundColor } : {}
+          },
+          id: e?.graphID,
+          ref: l,
+          children: /* @__PURE__ */ a.jsx(
+            "div",
+            {
+              style: {
+                padding: e?.backgroundColor ? e?.padding || "1rem" : e?.padding || 0,
+                flexGrow: 1,
+                display: "flex"
+              },
+              children: /* @__PURE__ */ a.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                /* @__PURE__ */ a.jsx(
+                  b,
+                  {
+                    styles: {
+                      title: e?.styles?.title,
+                      description: e?.styles?.description
+                    },
+                    classNames: {
+                      title: e?.classNames?.title,
+                      description: e?.classNames?.description
+                    },
+                    graphTitle: e?.graphTitle,
+                    graphDescription: e?.graphDescription,
+                    width: e?.width
+                  }
+                ),
+                /* @__PURE__ */ a.jsx(
+                  f,
+                  {
+                    graph: r,
+                    debugMode: o,
+                    settings: {
+                      ...e || {},
+                      graphTitle: void 0,
+                      graphDescription: void 0,
+                      graphDownload: !1,
+                      dataDownload: !1,
+                      backgroundColor: void 0,
+                      padding: "0",
+                      uiMode: i,
+                      theme: e?.theme
+                    }
+                  }
+                )
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  D as SingleGraphDashboardGeoHubMaps
+};
+//# sourceMappingURL=SingleGraphDashboardGeoHubMaps.js.map

package/dist/SingleGraphDashboardGeoHubMaps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleGraphDashboardGeoHubMaps.js","sources":["../src/Components/Dashboard/PerformanceIntensive/GeoHubMapsEl.tsx","../src/Components/Dashboard/PerformanceIntensive/SingleGraphDashboardGeoHubMaps.tsx"],"sourcesContent":["import { P } from '@undp/design-system-react/Typography';\r\n\r\nimport { GeoHubCompareMaps } from '../../Graphs/Maps/GeoHubMaps/CompareMaps';\r\nimport { GeoHubMap } from '../../Graphs/Maps/GeoHubMaps/SimpleMap';\r\nimport { GeoHubMapWithLayerSelection } from '../../Graphs/Maps/GeoHubMaps/MapWithLayerSelection';\r\n\r\nimport { GraphSettingsDataType, GeoHubGraphType } from '@/Types';\r\n\r\ninterface Props {\r\n  graph: GeoHubGraphType;\r\n  settings?: GraphSettingsDataType;\r\n  debugMode?: boolean;\r\n}\r\n\r\nfunction GeoHubMapsEl(props: Props) {\r\n  const { settings, graph, debugMode } = props;\r\n  if (debugMode) {\r\n    // eslint-disable-next-line no-console\r\n    console.log(`Graph: ${graph}`);\r\n    // eslint-disable-next-line no-console\r\n    console.log('Settings:', settings);\r\n  }\r\n  const graphComponents: Record<GeoHubGraphType, React.ElementType | null> = {\r\n    geoHubCompareMap: GeoHubCompareMaps,\r\n    geoHubMap: GeoHubMap,\r\n    geoHubMapWithLayerSelection: GeoHubMapWithLayerSelection,\r\n  };\r\n  const getGraphProps = (graphType: GeoHubGraphType) => {\r\n    switch (graphType) {\r\n      case 'geoHubCompareMap':\r\n        return {\r\n          theme: settings?.theme,\r\n          graphTitle: settings?.graphTitle,\r\n          sources: settings?.sources,\r\n          graphDescription: settings?.graphDescription,\r\n          footNote: settings?.footNote,\r\n          backgroundColor: settings?.backgroundColor,\r\n          padding: settings?.padding,\r\n          width: settings?.width,\r\n          height: settings?.height,\r\n          relativeHeight: settings?.relativeHeight,\r\n          graphID: settings?.graphID,\r\n          mapStyles: settings?.mapStyles as [string, string],\r\n          center: settings?.center,\r\n          zoomLevel: settings?.zoomLevel,\r\n          language: settings?.language,\r\n          minHeight: settings?.minHeight,\r\n          ariaLabel: settings?.ariaLabel,\r\n          styles: settings?.styles,\r\n          classNames: settings?.classNames,\r\n          mapLegend: settings?.mapLegend,\r\n        };\r\n      case 'geoHubMap':\r\n        return {\r\n          theme: settings?.theme,\r\n          mapStyle: settings?.mapStyle,\r\n          center: settings?.center,\r\n          zoomLevel: settings?.zoomLevel,\r\n          graphTitle: settings?.graphTitle,\r\n          sources: settings?.sources,\r\n          graphDescription: settings?.graphDescription,\r\n          footNote: settings?.footNote,\r\n          backgroundColor: settings?.backgroundColor,\r\n          padding: settings?.padding,\r\n          width: settings?.width,\r\n          height: settings?.height,\r\n          relativeHeight: settings?.relativeHeight,\r\n          graphID: settings?.graphID,\r\n          language: settings?.language,\r\n          minHeight: settings?.minHeight,\r\n          includeLayers: settings?.includeLayers,\r\n          excludeLayers: settings?.excludeLayers,\r\n          ariaLabel: settings?.ariaLabel,\r\n          uiMode: settings?.uiMode,\r\n          styles: settings?.styles,\r\n          classNames: settings?.classNames,\r\n          mapLegend: settings?.mapLegend,\r\n        };\r\n      case 'geoHubMapWithLayerSelection':\r\n        return {\r\n          theme: settings?.theme,\r\n          mapStyle: settings?.mapStyle,\r\n          center: settings?.center,\r\n          zoomLevel: settings?.zoomLevel,\r\n          graphTitle: settings?.graphTitle,\r\n          sources: settings?.sources,\r\n          graphDescription: settings?.graphDescription,\r\n          footNote: settings?.footNote,\r\n          backgroundColor: settings?.backgroundColor,\r\n          padding: settings?.padding,\r\n          width: settings?.width,\r\n          height: settings?.height,\r\n          relativeHeight: settings?.relativeHeight,\r\n          graphID: settings?.graphID,\r\n          language: settings?.language,\r\n          minHeight: settings?.minHeight,\r\n          layerSelection: settings?.layerSelection,\r\n          excludeLayers: settings?.excludeLayers,\r\n          ariaLabel: settings?.ariaLabel,\r\n          uiMode: settings?.uiMode,\r\n          mapLegend: settings?.mapLegend,\r\n        };\r\n      default:\r\n        return {};\r\n    }\r\n  };\r\n  const GraphComponent = graphComponents[graph];\r\n  const graphProps = getGraphProps(graph);\r\n  return (\r\n    <div\r\n      className={`grow my-0 mx-auto flex flex-col h-inherit ${settings?.width ? 'w-fit' : 'w-full'} justify-center ${settings?.theme || 'light'}`}\r\n      style={{ minHeight: 'inherit' }}\r\n    >\r\n      {GraphComponent ? (\r\n        <GraphComponent {...graphProps} />\r\n      ) : (\r\n        <P\r\n          size='sm'\r\n          marginBottom='none'\r\n          className='p-2 text-center text-accent-dark-red dark:text-accent-red'\r\n        >\r\n          {`Invalid chart type: ${graph}`}\r\n        </P>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default GeoHubMapsEl;\r\n","import { useRef } from 'react';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport GeoHubMapsEl from './GeoHubMapsEl';\r\n\r\nimport { GeoHubGraphType, GraphSettingsDataType } from '@/Types';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\n\r\ninterface Props {\r\n  graphSettings?: GraphSettingsDataType;\r\n  graphType: GeoHubGraphType;\r\n  debugMode?: boolean;\r\n  uiMode?: 'light' | 'normal';\r\n}\r\n\r\nexport function SingleGraphDashboardGeoHubMaps(props: Props) {\r\n  const { graphSettings, graphType, debugMode, uiMode = 'normal' } = props;\r\n  const graphParentDiv = useRef<HTMLDivElement>(null);\r\n  return (\r\n    <div\r\n      className={`${graphSettings?.theme || 'light'} flex ${\r\n        graphSettings?.width ? 'w-fit grow-0' : 'w-full grow'\r\n      }${graphSettings?.height ? '' : ' h-full'}`}\r\n      dir={graphSettings?.language === 'he' || graphSettings?.language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !graphSettings?.backgroundColor\r\n              ? 'bg-transparent '\r\n              : graphSettings?.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 ${graphSettings?.language || 'en'}`,\r\n          graphSettings?.classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(graphSettings?.styles?.graphContainer || {}),\r\n          ...(graphSettings?.backgroundColor && graphSettings?.backgroundColor !== true\r\n            ? { backgroundColor: graphSettings?.backgroundColor }\r\n            : {}),\r\n        }}\r\n        id={graphSettings?.graphID}\r\n        ref={graphParentDiv}\r\n      >\r\n        <div\r\n          style={{\r\n            padding: graphSettings?.backgroundColor\r\n              ? graphSettings?.padding || '1rem'\r\n              : graphSettings?.padding || 0,\r\n            flexGrow: 1,\r\n            display: 'flex',\r\n          }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            <GraphHeader\r\n              styles={{\r\n                title: graphSettings?.styles?.title,\r\n                description: graphSettings?.styles?.description,\r\n              }}\r\n              classNames={{\r\n                title: graphSettings?.classNames?.title,\r\n                description: graphSettings?.classNames?.description,\r\n              }}\r\n              graphTitle={graphSettings?.graphTitle}\r\n              graphDescription={graphSettings?.graphDescription}\r\n              width={graphSettings?.width}\r\n            />\r\n            <GeoHubMapsEl\r\n              graph={graphType}\r\n              debugMode={debugMode}\r\n              settings={{\r\n                ...(graphSettings || {}),\r\n                graphTitle: undefined,\r\n                graphDescription: undefined,\r\n                graphDownload: false,\r\n                dataDownload: false,\r\n                backgroundColor: undefined,\r\n                padding: '0',\r\n                uiMode,\r\n                theme: graphSettings?.theme,\r\n              }}\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["GeoHubMapsEl","props","settings","graph","debugMode","graphComponents","GeoHubCompareMaps","GeoHubMap","GeoHubMapWithLayerSelection","getGraphProps","graphType","GraphComponent","graphProps","jsx","P","SingleGraphDashboardGeoHubMaps","graphSettings","uiMode","graphParentDiv","useRef","cn","jsxs","GraphHeader"],"mappings":"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"}

package/dist/SingleGraphDashboardGeoHubMapsFromConfig.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-CHPV5EwG-DDoeWRVt.cjs"),n=require("react"),a=require("./Spinner-DA6Z5E4n.cjs"),u=require("./SingleGraphDashboardGeoHubMaps.cjs"),g=require("./fetchAndParseData-DmgQtB9n.cjs");function c(o){const{config:t}=o,[e,s]=n.useState(void 0);return n.useEffect(()=>{typeof t=="string"?g.fetchAndParseJSON(t).then(i=>{s(i)}):s(t)},[t]),e?r.jsxRuntimeExports.jsx(u.SingleGraphDashboardGeoHubMaps,{graphSettings:e.graphSettings,graphType:e.graphType,debugMode:e.debugMode,uiMode:e.uiMode}):r.jsxRuntimeExports.jsx("div",{className:"w-full flex justify-center p-4",children:r.jsxRuntimeExports.jsx(a.y,{})})}exports.SingleGraphDashboardGeoHubMapsFromConfig=c;
+//# sourceMappingURL=SingleGraphDashboardGeoHubMapsFromConfig.cjs.map

package/dist/SingleGraphDashboardGeoHubMapsFromConfig.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleGraphDashboardGeoHubMapsFromConfig.cjs","sources":["../src/Components/Dashboard/PerformanceIntensive/SingleGraphDashboardGeoHubMapsFromConfig.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { SingleGraphDashboardGeoHubMaps } from './SingleGraphDashboardGeoHubMaps';\r\n\r\nimport { GeoHubGraphType, GraphSettingsDataType } from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\n\r\ninterface ConfigObject {\r\n  graphSettings?: GraphSettingsDataType;\r\n  graphType: GeoHubGraphType;\r\n  debugMode?: boolean;\r\n  uiMode?: 'light' | 'normal';\r\n}\r\n\r\ninterface Props {\r\n  config: string | ConfigObject;\r\n}\r\n\r\nexport function SingleGraphDashboardGeoHubMapsFromConfig(props: Props) {\r\n  const { config } = props;\r\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\r\n\r\n  useEffect(() => {\r\n    if (typeof config === 'string') {\r\n      const fetchData = fetchAndParseJSON(config);\r\n      fetchData.then(d => {\r\n        setConfigSettings(d);\r\n      });\r\n    } else {\r\n      setConfigSettings(config);\r\n    }\r\n  }, [config]);\r\n  if (!configSettings)\r\n    return (\r\n      <div className='w-full flex justify-center p-4'>\r\n        <Spinner />\r\n      </div>\r\n    );\r\n  return (\r\n    <SingleGraphDashboardGeoHubMaps\r\n      graphSettings={configSettings.graphSettings}\r\n      graphType={configSettings.graphType}\r\n      debugMode={configSettings.debugMode}\r\n      uiMode={configSettings.uiMode}\r\n    />\r\n  );\r\n}\r\n"],"names":["SingleGraphDashboardGeoHubMapsFromConfig","props","config","configSettings","setConfigSettings","useState","useEffect","fetchAndParseJSON","d","jsx","SingleGraphDashboardGeoHubMaps","Spinner"],"mappings":"wRAmBO,SAASA,EAAyCC,EAAc,CACrE,KAAM,CAAE,OAAAC,GAAWD,EACb,CAACE,EAAgBC,CAAiB,EAAIC,EAAAA,SAAmC,MAAS,EAYxF,OAVAC,EAAAA,UAAU,IAAM,CACV,OAAOJ,GAAW,SACFK,EAAAA,kBAAkBL,CAAM,EAChC,KAAKM,GAAK,CAClBJ,EAAkBI,CAAC,CACrB,CAAC,EAEDJ,EAAkBF,CAAM,CAE5B,EAAG,CAACA,CAAM,CAAC,EACNC,EAOHM,EAAAA,kBAAAA,IAACC,EAAAA,+BAAA,CACC,cAAeP,EAAe,cAC9B,UAAWA,EAAe,UAC1B,UAAWA,EAAe,UAC1B,OAAQA,EAAe,MAAA,CAAA,0BATtB,MAAA,CAAI,UAAU,iCACb,SAAAM,wBAACE,EAAAA,IAAQ,EACX,CAUN"}