@undp/data-viz 1.2.8 → 1.3.1

package/dist/MultiGraphDashboardFromConfig.d.ts

@@ -0,0 +1,562 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare interface AdvancedDataSelectionDataType {
+    label?: string;
+    options: {
+        label: string;
+        dataConfiguration: {
+            columnId: string[] | string;
+            chartConfigId: string;
+        }[];
+        graphSettings?: GraphSettingsDataType;
+    }[];
+    ui?: 'select' | 'radio';
+    width?: string;
+    defaultValue?: {
+        label: string;
+        dataConfiguration: {
+            columnId: string[] | string;
+            chartConfigId: string;
+        }[];
+        graphSettings?: GraphSettingsDataType;
+    };
+}
+
+declare interface AggregationSettingsDataType {
+    column: string;
+    aggregationMethod?: 'sum' | 'average' | 'min' | 'max';
+}
+
+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 interface ColumnConfigurationDataType {
+    column: string;
+    delimiter?: string;
+}
+
+declare interface ConfigObject {
+    dashboardID?: string;
+    dashboardLayout: DashboardLayoutDataType;
+    dataSettings: DataSettingsDataType;
+    filters?: FilterUiSettingsDataType[];
+    noOfFiltersPerRow?: number;
+    filterPosition?: 'top' | 'side';
+    debugMode?: boolean;
+    theme?: 'dark' | 'light';
+    readableHeader?: {
+        value: string;
+        label: string;
+    }[];
+    dataFilters?: DataFilterDataType[];
+    uiMode?: 'light' | 'normal';
+    graphStyles?: StyleObject;
+    graphClassNames?: ClassNameObject;
+}
+
+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 type DashboardColumnDataType = {
+    graphType: GraphType;
+    attachedFilter?: string;
+    columnWidth?: number;
+    dataTransform?: {
+        keyColumn: string;
+        aggregationColumnsSetting?: AggregationSettingsDataType[];
+    };
+    dataFilters?: DataFilterDataType[];
+    graphDataConfiguration?: GraphConfigurationDataType[];
+    dataSelectionOptions?: DataSelectionDataType[];
+    advancedDataSelectionOptions?: AdvancedDataSelectionDataType[];
+    settings?: GraphSettingsDataType;
+};
+
+declare type DashboardLayoutDataType = {
+    title?: string;
+    description?: string;
+    padding?: string;
+    backgroundColor?: string | boolean;
+    language?: Languages;
+    rows: {
+        columns: DashboardColumnDataType[];
+        height?: number;
+    }[];
+};
+
+declare interface DataFilterDataType {
+    column: string;
+    includeValues?: (string | number | boolean | null | undefined)[];
+    excludeValues?: (string | number | boolean | null | undefined)[];
+}
+
+declare interface DataSelectionDataType {
+    label?: string;
+    allowedColumnIds: {
+        value: string;
+        label: string;
+        graphSettings: GraphSettingsDataType;
+    }[];
+    chartConfigId: string;
+    ui?: 'select' | 'radio';
+    width?: string;
+}
+
+declare interface DataSettingsDataType {
+    dataURL?: string | FileSettingsDataType[];
+    fileType?: 'csv' | 'json' | 'api';
+    delimiter?: string;
+    columnsToArray?: ColumnConfigurationDataType[];
+    apiHeaders?: any;
+    dataTransformation?: string;
+    idColumnTitle?: string;
+    data?: any;
+}
+
+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 interface FileSettingsDataType {
+    dataURL: string;
+    idColumnName: string;
+    fileType?: 'csv' | 'json' | 'api';
+    delimiter?: string;
+    columnsToArray?: ColumnConfigurationDataType[];
+    apiHeaders?: any;
+    dataTransformation?: string;
+}
+
+declare type FilterUiSettingsDataType = {
+    column: string;
+    label?: string;
+    singleSelect?: boolean;
+    clearable?: boolean;
+    defaultValue?: string[] | string | number | number[];
+    excludeValues?: string[];
+    allowSelectAll?: boolean;
+    width?: string;
+};
+
+declare type GeoHubGraphType = 'geoHubCompareMap' | 'geoHubMap' | 'geoHubMapWithLayerSelection';
+
+declare interface GraphConfigurationDataType {
+    columnId: string | string[];
+    chartConfigId: string;
+}
+
+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 type GraphType = GraphTypeForGriddedGraph | GeoHubGraphType;
+
+declare type GraphTypeForGriddedGraph = 'barChart' | 'stackedBarChart' | 'groupedBarChart' | 'lineChart' | 'dualAxisLineChart' | 'multiLineChart' | 'multiLineAltChart' | 'differenceLineChart' | 'stackedAreaChart' | 'choroplethMap' | 'biVariateChoroplethMap' | 'dotDensityMap' | 'donutChart' | 'slopeChart' | 'scatterPlot' | 'dumbbellChart' | 'treeMap' | 'circlePacking' | 'heatMap' | 'stripChart' | 'beeSwarmChart' | 'butterflyChart' | 'histogram' | 'sparkLine' | 'paretoChart' | 'dataTable' | 'statCard' | 'unitChart' | 'sankeyChart' | 'lineChartWithConfidenceInterval' | 'dataCards' | 'radarChart' | 'bulletChart' | 'threeDGlobe';
+
+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;
+}
+
+export declare function MultiGraphDashboardFromConfig(props: Props): JSX.Element;
+
+declare interface Props {
+    config: string | ConfigObject;
+}
+
+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';
+
+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/MultiGraphDashboardFromConfig.js

@@ -0,0 +1,38 @@
+import { j as a } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useState as i, useEffect as d } from "react";
+import { y as f } from "./Spinner-C85UF28E.js";
+import { MultiGraphDashboard as n } from "./MultiGraphDashboard.js";
+import { f as l } from "./fetchAndParseData-Bcmr659B.js";
+function b(s) {
+  const { config: e } = s, [t, r] = i(void 0);
+  return d(() => {
+    (async () => {
+      if (typeof e == "string") {
+        const o = await l(e);
+        r(o);
+      } else
+        r(e);
+    })();
+  }, [e]), t ? /* @__PURE__ */ a.jsx(
+    n,
+    {
+      dashboardID: t.dashboardID,
+      dashboardLayout: t.dashboardLayout,
+      dataSettings: t.dataSettings,
+      filters: t.filters,
+      debugMode: t.debugMode,
+      theme: t.theme,
+      readableHeader: t.readableHeader,
+      dataFilters: t.dataFilters,
+      noOfFiltersPerRow: t.noOfFiltersPerRow,
+      filterPosition: t.filterPosition,
+      uiMode: t.uiMode,
+      graphStyles: t.graphStyles,
+      graphClassNames: t.graphClassNames
+    }
+  ) : /* @__PURE__ */ a.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ a.jsx(f, {}) });
+}
+export {
+  b as MultiGraphDashboardFromConfig
+};
+//# sourceMappingURL=MultiGraphDashboardFromConfig.js.map

package/dist/MultiGraphDashboardFromConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiGraphDashboardFromConfig.js","sources":["../src/Components/Dashboard/MultiGraphDashboardFromConfig.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { MultiGraphDashboard } from './MultiGraphDashboard';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsDataType,\r\n  FilterUiSettingsDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\n\r\ninterface ConfigObject {\r\n  dashboardID?: string;\r\n  dashboardLayout: DashboardLayoutDataType;\r\n  dataSettings: DataSettingsDataType;\r\n  filters?: FilterUiSettingsDataType[];\r\n  noOfFiltersPerRow?: number;\r\n  filterPosition?: 'top' | 'side';\r\n  debugMode?: boolean;\r\n  theme?: 'dark' | 'light';\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  dataFilters?: DataFilterDataType[];\r\n  uiMode?: 'light' | 'normal';\r\n  graphStyles?: StyleObject;\r\n  graphClassNames?: ClassNameObject;\r\n}\r\n\r\ninterface Props {\r\n  config: string | ConfigObject;\r\n}\r\n\r\nexport function MultiGraphDashboardFromConfig(props: Props) {\r\n  const { config } = props;\r\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\r\n  useEffect(() => {\r\n    const fetchData = async () => {\r\n      if (typeof config === 'string') {\r\n        const data = await fetchAndParseJSON(config);\r\n        setConfigSettings(data);\r\n      } else {\r\n        setConfigSettings(config);\r\n      }\r\n    };\r\n    fetchData();\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    <MultiGraphDashboard\r\n      dashboardID={configSettings.dashboardID}\r\n      dashboardLayout={configSettings.dashboardLayout}\r\n      dataSettings={configSettings.dataSettings}\r\n      filters={configSettings.filters}\r\n      debugMode={configSettings.debugMode}\r\n      theme={configSettings.theme}\r\n      readableHeader={configSettings.readableHeader}\r\n      dataFilters={configSettings.dataFilters}\r\n      noOfFiltersPerRow={configSettings.noOfFiltersPerRow}\r\n      filterPosition={configSettings.filterPosition}\r\n      uiMode={configSettings.uiMode}\r\n      graphStyles={configSettings.graphStyles}\r\n      graphClassNames={configSettings.graphClassNames}\r\n    />\r\n  );\r\n}\r\n"],"names":["MultiGraphDashboardFromConfig","props","config","configSettings","setConfigSettings","useState","useEffect","data","fetchAndParseJSON","jsx","MultiGraphDashboard","Spinner"],"mappings":";;;;;AAsCO,SAASA,EAA8BC,GAAc;AAC1D,QAAM,EAAE,QAAAC,MAAWD,GACb,CAACE,GAAgBC,CAAiB,IAAIC,EAAmC,MAAS;AAYxF,SAXAC,EAAU,MAAM;AASd,KARkB,YAAY;AAC5B,UAAI,OAAOJ,KAAW,UAAU;AAC9B,cAAMK,IAAO,MAAMC,EAAkBN,CAAM;AAC3C,QAAAE,EAAkBG,CAAI;AAAA,MACxB;AACE,QAAAH,EAAkBF,CAAM;AAAA,IAE5B,GACA;AAAA,EACF,GAAG,CAACA,CAAM,CAAC,GACNC,IAOHM,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAaP,EAAe;AAAA,MAC5B,iBAAiBA,EAAe;AAAA,MAChC,cAAcA,EAAe;AAAA,MAC7B,SAASA,EAAe;AAAA,MACxB,WAAWA,EAAe;AAAA,MAC1B,OAAOA,EAAe;AAAA,MACtB,gBAAgBA,EAAe;AAAA,MAC/B,aAAaA,EAAe;AAAA,MAC5B,mBAAmBA,EAAe;AAAA,MAClC,gBAAgBA,EAAe;AAAA,MAC/B,QAAQA,EAAe;AAAA,MACvB,aAAaA,EAAe;AAAA,MAC5B,iBAAiBA,EAAe;AAAA,IAAA;AAAA,EAAA,0BAlB/B,OAAA,EAAI,WAAU,kCACb,UAAAM,gBAAAA,MAACE,KAAQ,GACX;AAmBN;"}

package/dist/MultiGraphDashboardWideToLongFormat.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-CHPV5EwG-DDoeWRVt.cjs"),o=require("react"),D=require("./DropdownSelect-0I2QxaVy.cjs"),L=require("./checkIfMultiple-D5ysrI7G.cjs"),k=require("./Spinner-DA6Z5E4n.cjs"),N=require("./SingleGraphDashboard.cjs"),m=require("./fetchAndParseData-DmgQtB9n.cjs"),W=require("./GraphHeader.cjs"),q=require("./filterData-DN6py7y_.cjs");function A(d,l,e,t){const i=[];return d.forEach(u=>{Object.entries(u).forEach(([n,p])=>{if(n!==l){const c={indicator:e.findIndex(h=>h.value===n)!==-1?e[e.findIndex(h=>h.value===n)].label:n,value:p};c[l]=u[l],i.push(c)}})}),t&&console.log(i),i}const b=d=>d.map(t=>t.columnWidth||1).reduce((t,i)=>t+i,0);function G(d){const{dashboardID:l,dashboardLayout:e,dataSettings:t,debugMode:i,theme:u="light",readableHeader:n,dataFilters:p,uiMode:c="normal",graphStyles:h,graphClassNames:w}=d,R=o.useMemo(()=>({ignoreCase:!0,ignoreAccents:!0,trim:!0}),[]),[y,E]=o.useState(void 0),[S,T]=o.useState([]),[f,v]=o.useState(void 0),[x,I]=o.useState(void 0);o.useEffect(()=>{if(x){const s=x.filter(g=>g[t.keyColumn]===f);E(s)}},[x,f,t.keyColumn]);const C=o.useCallback(async()=>{if(t)try{const g=await(t.dataURL?typeof t.dataURL=="string"?t.fileType==="json"?m.fetchAndParseJSON(t.dataURL,void 0,t.dataTransformation,i):t.fileType==="api"?m.fetchAndTransformDataFromAPI(t.dataURL,t.apiHeaders,void 0,t.dataTransformation,i):m.fetchAndParseCSV(t.dataURL,t.dataTransformation,void 0,i,t.delimiter,!0):m.fetchAndParseMultipleDataSources(t.dataURL,t.idColumnTitle):m.transformColumnsToArray(t.data,void 0)),a=q.filterData(g,p||[]);T(a.map(F=>F[t.keyColumn])),v(a[0][t.keyColumn]);const j=A(a,t.keyColumn,n||[],i);I(j)}catch(s){console.error("Data fetching error:",s)}},[t,i,p,n]);return o.useEffect(()=>{C()},[C]),r.jsxRuntimeExports.jsx("div",{className:`${u||"light"} flex grow`,dir:e.language==="he"||e.language==="ar"?"rtl":void 0,children:r.jsxRuntimeExports.jsx("div",{className:`${e?.backgroundColor?e?.backgroundColor===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}flex flex-col h-inherit w-full ml-auto mr-auto grow gap-4 ${e?.language||"en"}`,style:{...e?.backgroundColor&&e?.backgroundColor!==!0?{backgroundColor:e?.backgroundColor}:{}},id:l,children:r.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:e.backgroundColor?e.padding||"1rem":e.padding||0},children:r.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[e.title||e.description?r.jsxRuntimeExports.jsx(W.GraphHeader,{graphTitle:e.title,graphDescription:e.description,isDashboard:!0}):null,y?r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx("div",{style:{display:"flex",gap:"1rem",flexWrap:"wrap",alignItems:"flex-start",width:"100%"},children:r.jsxRuntimeExports.jsxs("div",{style:{width:"100%",flexGrow:1,flexShrink:0,minWidth:"240px"},children:[e.dropdownLabel?r.jsxRuntimeExports.jsx(L.f,{className:"mb-2",children:e.dropdownLabel}):null,r.jsxRuntimeExports.jsx(D.Za,{options:S.map(s=>({value:s,label:s})),size:"sm",variant:c,isClearable:!1,isSearchable:!0,controlShouldRenderValue:!0,filterOption:D.Hu(R),onChange:s=>{v(s?.value)},defaultValue:{value:f,label:f}})]})}),e.rows.map((s,g)=>r.jsxRuntimeExports.jsx("div",{style:{display:"flex",gap:"1rem",alignItems:"stretch",minHeight:`${s.height||0}px`,height:"auto",width:"100%",flexWrap:"wrap"},children:s.columns.map((a,j)=>r.jsxRuntimeExports.jsx("div",{className:"flex bg-transparent h-inherit grow min-w-60",style:{width:`calc(${100*(a.columnWidth||1)/b(s.columns)}% - ${(b(s.columns)-(a.columnWidth||1))/b(s.columns)}rem)`,minHeight:"inherit"},children:r.jsxRuntimeExports.jsx(N.SingleGraphDashboard,{graphType:a.graphType,dataFilters:a.dataFilters,uiMode:c,graphSettings:{...a.settings||{},width:void 0,height:void 0,radius:a.graphType==="donutChart"?void 0:a.settings?.radius,size:a.graphType==="unitChart"?a.settings.size:void 0,language:a.settings?.language||e.language,theme:a.settings?.theme||u,styles:a.settings?.styles||h,classNames:a.settings?.classNames||w},dataSettings:{data:y},graphDataConfiguration:a.graphDataConfiguration?a.graphDataConfiguration:a.graphType==="unitChart"?[{columnId:"indicator",chartConfigId:"label"},{columnId:"value",chartConfigId:"value"}]:[{columnId:"indicator",chartConfigId:"label"},{columnId:"value",chartConfigId:"size"}],debugMode:i,readableHeader:n||[]})},j))},g))]}):r.jsxRuntimeExports.jsx("div",{className:"w-full flex justify-center p-4",children:r.jsxRuntimeExports.jsx(k.y,{})})]})})})})}exports.MultiGraphDashboardWideToLongFormat=G;
+//# sourceMappingURL=MultiGraphDashboardWideToLongFormat.cjs.map

package/dist/MultiGraphDashboardWideToLongFormat.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiGraphDashboardWideToLongFormat.cjs","sources":["../src/Utils/wideToLongTranformation.ts","../src/Components/Dashboard/MultiGraphDashboardWideToLongFormat.tsx"],"sourcesContent":["export function wideToLongTransformation(\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  data: any,\r\n  keyColumn: string,\r\n  readableHeader: {\r\n    value: string;\r\n    label: string;\r\n  }[],\r\n  debugMode?: boolean,\r\n) {\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const transformedData: any = [];\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  data.forEach((row: any) => {\r\n    Object.entries(row).forEach(([key, value]) => {\r\n      if (key !== keyColumn) {\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const obj: any = {\r\n          indicator:\r\n            readableHeader.findIndex(d => d.value === key) !== -1\r\n              ? readableHeader[readableHeader.findIndex(d => d.value === key)].label\r\n              : key,\r\n          value,\r\n        };\r\n        obj[keyColumn] = row[keyColumn];\r\n        transformedData.push(obj);\r\n      }\r\n    });\r\n  });\r\n  if (debugMode) {\r\n    // eslint-disable-next-line no-console\r\n    console.log(transformedData);\r\n  }\r\n  return transformedData;\r\n}\r\n","import { useCallback, useEffect, useMemo, useState } from 'react';\r\nimport { createFilter, DropdownSelect } from '@undp/design-system-react/DropdownSelect';\r\nimport { Label } from '@undp/design-system-react/Label';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { SingleGraphDashboard } from './SingleGraphDashboard';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardFromWideToLongFormatColumnDataType,\r\n  DashboardFromWideToLongFormatLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsWideToLongDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport {\r\n  fetchAndParseCSV,\r\n  fetchAndParseJSON,\r\n  fetchAndParseMultipleDataSources,\r\n  fetchAndTransformDataFromAPI,\r\n} from '@/Utils/fetchAndParseData';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { wideToLongTransformation } from '@/Utils/wideToLongTranformation';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { transformColumnsToArray } from '@/Utils/transformData/transformColumnsToArray';\r\n\r\ninterface Props {\r\n  dashboardID?: string;\r\n  dashboardLayout: DashboardFromWideToLongFormatLayoutDataType;\r\n  dataSettings: DataSettingsWideToLongDataType;\r\n  debugMode?: boolean;\r\n  theme?: 'dark' | 'light';\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  dataFilters?: DataFilterDataType[];\r\n  uiMode?: 'light' | 'normal';\r\n  graphStyles?: StyleObject;\r\n  graphClassNames?: ClassNameObject;\r\n}\r\n\r\nconst TotalWidth = (columns: DashboardFromWideToLongFormatColumnDataType[]) => {\r\n  const columnWidth = columns.map(d => d.columnWidth || 1);\r\n  const sum = columnWidth.reduce((acc, cur) => acc + cur, 0);\r\n  return sum;\r\n};\r\n\r\nexport function MultiGraphDashboardWideToLongFormat(props: Props) {\r\n  const {\r\n    dashboardID,\r\n    dashboardLayout,\r\n    dataSettings,\r\n    debugMode,\r\n    theme = 'light',\r\n    readableHeader,\r\n    dataFilters,\r\n    uiMode = 'normal',\r\n    graphStyles,\r\n    graphClassNames,\r\n  } = props;\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  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [data, setData] = useState<any>(undefined);\r\n  const [filterValues, setFilterValues] = useState<string[]>([]);\r\n  const [selectedFilterValues, setSelectedFilterValues] = useState<string | undefined>(undefined);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [dataFromFile, setDataFromFile] = useState<any>(undefined);\r\n\r\n  useEffect(() => {\r\n    if (dataFromFile) {\r\n      const filteredData = dataFromFile.filter(\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        (item: any) => item[dataSettings.keyColumn] === selectedFilterValues,\r\n      );\r\n      setData(filteredData);\r\n    }\r\n  }, [dataFromFile, selectedFilterValues, dataSettings.keyColumn]);\r\n  const fetchDataHandler = useCallback(async () => {\r\n    if (dataSettings) {\r\n      try {\r\n        const fetchData = dataSettings.dataURL\r\n          ? typeof dataSettings.dataURL === 'string'\r\n            ? dataSettings.fileType === 'json'\r\n              ? fetchAndParseJSON(\r\n                  dataSettings.dataURL,\r\n                  undefined,\r\n                  dataSettings.dataTransformation,\r\n                  debugMode,\r\n                )\r\n              : dataSettings.fileType === 'api'\r\n                ? fetchAndTransformDataFromAPI(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.apiHeaders,\r\n                    undefined,\r\n                    dataSettings.dataTransformation,\r\n                    debugMode,\r\n                  )\r\n                : fetchAndParseCSV(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.dataTransformation,\r\n                    undefined,\r\n                    debugMode,\r\n                    dataSettings.delimiter,\r\n                    true,\r\n                  )\r\n            : fetchAndParseMultipleDataSources(dataSettings.dataURL, dataSettings.idColumnTitle)\r\n          : transformColumnsToArray(dataSettings.data, undefined);\r\n\r\n        const d = await fetchData;\r\n        const filteredData = filterData(d, dataFilters || []);\r\n        setFilterValues(\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          filteredData.map((el: any) => el[dataSettings.keyColumn]),\r\n        );\r\n        setSelectedFilterValues(filteredData[0][dataSettings.keyColumn]);\r\n        const tempData = wideToLongTransformation(\r\n          filteredData,\r\n          dataSettings.keyColumn,\r\n          readableHeader || [],\r\n          debugMode,\r\n        );\r\n        setDataFromFile(tempData);\r\n      } catch (error) {\r\n        console.error('Data fetching error:', error);\r\n      }\r\n    }\r\n  }, [dataSettings, debugMode, dataFilters, readableHeader]);\r\n  useEffect(() => {\r\n    fetchDataHandler();\r\n  }, [fetchDataHandler]);\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex grow`}\r\n      dir={\r\n        dashboardLayout.language === 'he' || dashboardLayout.language === 'ar' ? 'rtl' : undefined\r\n      }\r\n    >\r\n      <div\r\n        className={`${\r\n          !dashboardLayout?.backgroundColor\r\n            ? 'bg-transparent '\r\n            : dashboardLayout?.backgroundColor === true\r\n              ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n              : ''\r\n        }flex flex-col h-inherit w-full ml-auto mr-auto grow gap-4 ${\r\n          dashboardLayout?.language || 'en'\r\n        }`}\r\n        style={{\r\n          ...(dashboardLayout?.backgroundColor && dashboardLayout?.backgroundColor !== true\r\n            ? { backgroundColor: dashboardLayout?.backgroundColor }\r\n            : {}),\r\n        }}\r\n        id={dashboardID}\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{\r\n            padding: dashboardLayout.backgroundColor\r\n              ? dashboardLayout.padding || '1rem'\r\n              : dashboardLayout.padding || 0,\r\n          }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {dashboardLayout.title || dashboardLayout.description ? (\r\n              <GraphHeader\r\n                graphTitle={dashboardLayout.title}\r\n                graphDescription={dashboardLayout.description}\r\n                isDashboard\r\n              />\r\n            ) : null}\r\n            {data ? (\r\n              <>\r\n                <div\r\n                  style={{\r\n                    display: 'flex',\r\n                    gap: '1rem',\r\n                    flexWrap: 'wrap',\r\n                    alignItems: 'flex-start',\r\n                    width: '100%',\r\n                  }}\r\n                >\r\n                  <div\r\n                    style={{\r\n                      width: '100%',\r\n                      flexGrow: 1,\r\n                      flexShrink: 0,\r\n                      minWidth: '240px',\r\n                    }}\r\n                  >\r\n                    {dashboardLayout.dropdownLabel ? (\r\n                      <Label className='mb-2'>{dashboardLayout.dropdownLabel}</Label>\r\n                    ) : null}\r\n                    <DropdownSelect\r\n                      options={filterValues.map(d => ({\r\n                        value: d,\r\n                        label: d,\r\n                      }))}\r\n                      size='sm'\r\n                      variant={uiMode}\r\n                      isClearable={false}\r\n                      isSearchable\r\n                      controlShouldRenderValue\r\n                      filterOption={createFilter(filterConfig)}\r\n                      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n                      onChange={(el: any) => {\r\n                        setSelectedFilterValues(el?.value);\r\n                      }}\r\n                      defaultValue={{\r\n                        value: selectedFilterValues as string,\r\n                        label: selectedFilterValues as string,\r\n                      }}\r\n                    />\r\n                  </div>\r\n                </div>\r\n                {dashboardLayout.rows.map((d, i) => (\r\n                  <div\r\n                    key={i}\r\n                    style={{\r\n                      display: 'flex',\r\n                      gap: '1rem',\r\n                      alignItems: 'stretch',\r\n                      minHeight: `${d.height || 0}px`,\r\n                      height: 'auto',\r\n                      width: '100%',\r\n                      flexWrap: 'wrap',\r\n                    }}\r\n                  >\r\n                    {d.columns.map((el, j) => (\r\n                      <div\r\n                        key={j}\r\n                        className='flex bg-transparent h-inherit grow min-w-60'\r\n                        style={{\r\n                          width: `calc(${\r\n                            (100 * (el.columnWidth || 1)) / TotalWidth(d.columns)\r\n                          }% - ${\r\n                            (TotalWidth(d.columns) - (el.columnWidth || 1)) / TotalWidth(d.columns)\r\n                          }rem)`,\r\n                          minHeight: 'inherit',\r\n                        }}\r\n                      >\r\n                        <SingleGraphDashboard\r\n                          graphType={el.graphType}\r\n                          dataFilters={el.dataFilters}\r\n                          uiMode={uiMode}\r\n                          graphSettings={{\r\n                            ...(el.settings || {}),\r\n                            width: undefined,\r\n                            height: undefined,\r\n                            radius: el.graphType === 'donutChart' ? undefined : el.settings?.radius,\r\n                            size: el.graphType === 'unitChart' ? el.settings.size : undefined,\r\n                            language: el.settings?.language || dashboardLayout.language,\r\n                            theme: el.settings?.theme || theme,\r\n                            styles: el.settings?.styles || graphStyles,\r\n                            classNames: el.settings?.classNames || graphClassNames,\r\n                          }}\r\n                          dataSettings={{ data }}\r\n                          graphDataConfiguration={\r\n                            el.graphDataConfiguration\r\n                              ? el.graphDataConfiguration\r\n                              : el.graphType === 'unitChart'\r\n                                ? [\r\n                                    {\r\n                                      columnId: 'indicator',\r\n                                      chartConfigId: 'label',\r\n                                    },\r\n                                    { columnId: 'value', chartConfigId: 'value' },\r\n                                  ]\r\n                                : [\r\n                                    {\r\n                                      columnId: 'indicator',\r\n                                      chartConfigId: 'label',\r\n                                    },\r\n                                    { columnId: 'value', chartConfigId: 'size' },\r\n                                  ]\r\n                          }\r\n                          debugMode={debugMode}\r\n                          readableHeader={readableHeader || []}\r\n                        />\r\n                      </div>\r\n                    ))}\r\n                  </div>\r\n                ))}\r\n              </>\r\n            ) : (\r\n              <div className='w-full flex justify-center p-4'>\r\n                <Spinner />\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["wideToLongTransformation","data","keyColumn","readableHeader","debugMode","transformedData","row","key","value","obj","d","TotalWidth","columns","acc","cur","MultiGraphDashboardWideToLongFormat","props","dashboardID","dashboardLayout","dataSettings","theme","dataFilters","uiMode","graphStyles","graphClassNames","filterConfig","useMemo","setData","useState","filterValues","setFilterValues","selectedFilterValues","setSelectedFilterValues","dataFromFile","setDataFromFile","useEffect","filteredData","item","fetchDataHandler","useCallback","fetchAndParseJSON","fetchAndTransformDataFromAPI","fetchAndParseCSV","fetchAndParseMultipleDataSources","transformColumnsToArray","filterData","el","tempData","error","jsx","jsxs","GraphHeader","Fragment","Label","DropdownSelect","createFilter","i","SingleGraphDashboard","Spinner"],"mappings":"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"}