@undp/data-viz 1.2.7 → 1.3.0

package/dist/SingleGraphDashboard.d.ts

@@ -0,0 +1,545 @@
+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 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 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 HighlightDataPointSettingsDataType = {
+    column: string;
+    label?: string;
+    defaultValues?: (string | number)[];
+    excludeValues?: (string | number)[];
+    width?: string;
+};
+
+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;
+    readableHeader?: {
+        value: string;
+        label: string;
+    }[];
+    dataSettings?: DataSettingsDataType;
+    filters?: FilterUiSettingsDataType[];
+    highlightDataPointSettings?: HighlightDataPointSettingsDataType;
+    noOfFiltersPerRow?: number;
+    graphType: GraphType;
+    dataTransform?: {
+        keyColumn: string;
+        aggregationColumnsSetting?: AggregationSettingsDataType[];
+    };
+    dataFilters?: DataFilterDataType[];
+    graphDataConfiguration?: GraphConfigurationDataType[];
+    dataSelectionOptions?: DataSelectionDataType[];
+    advancedDataSelectionOptions?: AdvancedDataSelectionDataType[];
+    debugMode?: boolean;
+    uiMode?: 'light' | 'normal';
+    updateFilters?: (_d: string) => void;
+    theme?: 'dark' | 'light';
+}
+
+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 SingleGraphDashboard(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/SingleGraphDashboard.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./index-BHm2KTjD-D8FylaKc.cjs"),s=require("react"),te=require("./index-Ds0uHjK9.cjs"),H=require("./index-B0rbzOoC.cjs"),re=require("./index-BXns0-ng.cjs"),C=require("./DropdownSelect-CuzV7gdj.cjs"),U=require("./Typography-CDR-DAHH.cjs"),p=require("./checkIfMultiple-D3h8to1T.cjs"),le=require("./Spinner-UmN-KPe9.cjs"),T=require("./fetchAndParseData.js"),oe=require("./transformDataForGraph.js"),z=require("./getUniqValue.js"),ne=require("./transformDataForAggregation.js"),ie=require("./GraphHeader.js"),B=require("./filterData-DN6py7y_.cjs"),se=require("./transformColumnsToArray.js"),ue=require("./graphList.js"),J=require("./index-BGMGC-HN.cjs"),de=u=>{if(u.findIndex(o=>o.chartConfigId==="yMin")!==-1&&u.findIndex(o=>o.chartConfigId==="yMax")!==-1)return u;const r=[...u];return u.findIndex(o=>o.chartConfigId==="yMin")===-1&&r.push({chartConfigId:"yMin",columnId:`${u[u.findIndex(o=>o.chartConfigId==="y")].columnId}Min`}),u.findIndex(o=>o.chartConfigId==="yMax")===-1&&r.push({chartConfigId:"yMax",columnId:`${u[u.findIndex(o=>o.chartConfigId==="y")].columnId}Max`}),r},L=(u,r)=>{const o=r?.map(D=>{const i=u?.findIndex(n=>n.chartConfigId===D.chartConfigId);if(i===-1)return{};const v=u[i]?.allowedColumnIds?.findIndex(n=>n.value===D.columnId);return v===-1?{}:u[i].allowedColumnIds[v].graphSettings||{}})||[];return Object.assign({},...o)};function ce(u){const{graphSettings:r,dataSettings:o,filters:D,graphType:i,dataTransform:v,graphDataConfiguration:n,dataFilters:q,debugMode:E,dataSelectionOptions:w,advancedDataSelectionOptions:F,readableHeader:K,noOfFiltersPerRow:g=4,updateFilters:Q,uiMode:x="normal",theme:A="light",highlightDataPointSettings:b}=u,[I,X]=s.useState(void 0),[S,Y]=s.useState(void 0),[f,j]=s.useState(n),[m,R]=s.useState({}),[y,Z]=s.useState(void 0),[_,ee]=s.useState([]),N=s.useRef(null),P=s.useRef(n),[V,O]=s.useState([]),M=s.useMemo(()=>({ignoreCase:!0,ignoreAccents:!0,trim:!0}),[]),W=s.useCallback(async()=>{if(i!=="geoHubMap"&&i!=="geoHubCompareMap"&&i!=="geoHubMapWithLayerSelection"&&o)try{const c=await(o.dataURL?typeof o.dataURL=="string"?o.fileType==="json"?T.fetchAndParseJSON(o.dataURL,o.columnsToArray,o.dataTransformation,E):o.fileType==="api"?T.fetchAndTransformDataFromAPI(o.dataURL,o.apiHeaders,o.columnsToArray,o.dataTransformation,E):T.fetchAndParseCSV(o.dataURL,o.dataTransformation,o.columnsToArray,E,o.delimiter,!0):T.fetchAndParseMultipleDataSources(o.dataURL,o.idColumnTitle):se.transformColumnsToArray(o.data,o.columnsToArray));Y(c);const a=(D||[]).map(t=>({filter:t.column,label:t.label||`Filter by ${t.column}`,singleSelect:t.singleSelect,clearable:t.clearable,defaultValue:J.transformDefaultValue(t.defaultValue),value:J.transformDefaultValue(t.defaultValue),availableValues:z.getUniqValue(c,t.column).filter(d=>!t.excludeValues?.includes(`${d}`)).map(d=>({value:d,label:d})),allowSelectAll:t.allowSelectAll,width:t.width}));O(a)}catch(e){console.error("Data fetching error:",e)}},[o,i,D,E]);s.useEffect(()=>{W()},[W]);const G=s.useMemo(()=>!S||V.length===0?S:S.filter(c=>V.every(a=>a.value&&H.flattenDeep([a.value]).length>0?te.intersection(H.flattenDeep([c[a.filter]]),H.flattenDeep([a.value]).map(t=>t.value)).length>0:!0)),[V,S]);s.useEffect(()=>{w&&R(L(w,n))},[w,n]),s.useEffect(()=>{i!=="geoHubMap"&&i!=="geoHubCompareMap"&&i!=="geoHubMapWithLayerSelection"&&S&&X(G)},[G,i,S]),s.useEffect(()=>{b?.column&&G&&ee(z.getUniqValue(G,b.column).filter(e=>!b?.excludeValues?.includes(`${e}`)).map(e=>({value:e,label:e})))},[G,b]),s.useEffect(()=>{re.isEqual(P.current,n)||(j(n),P.current=n)},[n]);const k=s.useCallback((e,c)=>{O(a=>a.map(t=>t.filter===e?{...t,value:c}:t))},[]),ae=s.useMemo(()=>{if(!I)return;const e=i==="lineChartWithConfidenceInterval"&&f?de(f):f;return i!=="geoHubMap"&&i!=="geoHubCompareMap"&&i!=="geoHubMapWithLayerSelection"?oe.transformDataForGraph(v?ne.transformDataForAggregation(B.filterData(I,q||[]),v.keyColumn,v.aggregationColumnsSetting):B.filterData(I,q||[]),i,e):void 0},[i,f,I,q,v]);return!o&&i!=="geoHubMap"&&i!=="geoHubCompareMap"&&i!=="geoHubMapWithLayerSelection"?l.jsxRuntimeExports.jsx(U.TypographyExports.P,{size:"xs",className:"text-center text-accent-dark-red dark:text-accent-red p-2",children:"Please make sure either `dataSettings` props are present as they are required for data."}):l.jsxRuntimeExports.jsx("div",{className:`${A||r?.theme||"light"} flex ${r?.width?"w-fit grow-0":"w-full grow"}${r?.height?"":" h-full"}`,dir:r?.language==="he"||r?.language==="ar"?"rtl":void 0,children:l.jsxRuntimeExports.jsx("div",{className:U.cnExports.cn(`${r?.backgroundColor?r?.backgroundColor===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${r?.language||"en"}`,r?.classNames?.graphContainer),style:{...r?.styles?.graphContainer||{},...r?.backgroundColor&&r?.backgroundColor!==!0?{backgroundColor:r?.backgroundColor}:{}},id:r?.graphID,ref:N,children:l.jsxRuntimeExports.jsx("div",{style:{padding:r?.backgroundColor?r?.padding||"1rem":r?.padding||0,flexGrow:1,display:"flex"},children:l.jsxRuntimeExports.jsx("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:I||ue.GraphList.filter(e=>e.geoHubMapPresentation).map(e=>e.graphID).indexOf(i)!==-1?l.jsxRuntimeExports.jsxs(l.jsxRuntimeExports.Fragment,{children:[m?.graphTitle||m?.graphDescription||r?.graphTitle||r?.graphDescription||r?.graphDownload||r?.dataDownload?l.jsxRuntimeExports.jsx(ie.GraphHeader,{styles:{title:m?.styles?.title||r?.styles?.title,description:m?.styles?.description||r?.styles?.description},classNames:{title:m?.classNames?.title||r?.classNames?.title,description:m?.classNames?.description||r?.classNames?.description},graphTitle:m?.graphTitle||r?.graphTitle,graphDescription:m?.graphDescription||r?.graphDescription,width:m?.width||r?.width,graphDownload:r?.graphDownload?N.current:void 0,dataDownload:r?.dataDownload&&I&&I.length>0?I:null}):null,V.length!==0||(w||[]).length!==0||(F||[]).length!==0||b?l.jsxRuntimeExports.jsxs("div",{style:{display:"flex",gap:"1rem",flexWrap:"wrap",alignItems:"flex-start",width:"100%"},children:[F?.map((e,c)=>l.jsxRuntimeExports.jsxs("div",{style:{width:e.width||`calc(${100/g}% - ${(g-1)/g}rem)`,flexGrow:1,flexShrink:e.ui!=="radio"?0:1,minWidth:"240px"},children:[l.jsxRuntimeExports.jsx(p.LabelExports.Label,{className:"mb-2",children:e.label||"Graph by"}),e.ui!=="radio"?l.jsxRuntimeExports.jsx(C.DropdownSelectExports.DropdownSelect,{options:e.options.map(a=>({...a,value:a.label})),size:"sm",isClearable:!1,isSearchable:!0,variant:x,controlShouldRenderValue:!0,defaultValue:e.defaultValue?{...e.defaultValue,value:e.defaultValue?.label}:{...e.options[0],value:e.options[0].label},onChange:a=>{R(a?.graphSettings||{}),j(a?.dataConfiguration)}}):l.jsxRuntimeExports.jsx(p.RadioGroupExports.RadioGroup,{defaultValue:e.defaultValue?.label||e.options[0].label,variant:x,onValueChange:a=>{const t=e.options[e.options.findIndex(d=>d.label===a)];R(t.graphSettings||{}),j(t.dataConfiguration)},children:e.options.map((a,t)=>l.jsxRuntimeExports.jsx(p.RadioGroupExports.RadioGroupItem,{label:a.label,value:a.label},t))})]},c)),w?.map((e,c)=>l.jsxRuntimeExports.jsxs("div",{style:{width:e.width||`calc(${100/g}% - ${(g-1)/g}rem)`,flexGrow:1,flexShrink:e.ui!=="radio"?0:1,minWidth:"240px"},children:[l.jsxRuntimeExports.jsx(p.LabelExports.Label,{className:"mb-2",children:e.label||`Visualize ${e.chartConfigId} by`}),p.checkIfMultiple(e.chartConfigId,f||[])?e.ui!=="radio"?l.jsxRuntimeExports.jsx(C.DropdownSelectExports.DropdownSelect,{options:e.allowedColumnIds,size:"sm",isMulti:!0,isSearchable:!0,variant:x,controlShouldRenderValue:!0,defaultValue:n?n[n.findIndex(a=>a.chartConfigId===e.chartConfigId)].columnId.map(a=>e.allowedColumnIds[e.allowedColumnIds.findIndex(t=>t.value===a)]):void 0,filterOption:C.DropdownSelectExports.createFilter(M),onChange:a=>{const t={columnId:(a||[]).map(h=>h.value),chartConfigId:e.chartConfigId},d=f?.map(h=>h.chartConfigId===t.chartConfigId?t:h);j(d)}}):l.jsxRuntimeExports.jsx(p.CheckboxGroupExports.CheckboxGroup,{variant:x,defaultValue:n?n[n.findIndex(a=>a.chartConfigId===e.chartConfigId)].columnId.map(a=>e.allowedColumnIds[e.allowedColumnIds.findIndex(t=>t.value===a)]).map(a=>a.value):[],onValueChange:a=>{const t={columnId:a||[],chartConfigId:e.chartConfigId},d=f?.map(h=>h.chartConfigId===t.chartConfigId?t:h);j(d)},children:e.allowedColumnIds.map((a,t)=>l.jsxRuntimeExports.jsx(p.CheckboxGroupExports.CheckboxGroupItem,{label:a.label,value:a.label},t))}):e.ui!=="radio"?l.jsxRuntimeExports.jsx(C.DropdownSelectExports.DropdownSelect,{options:e.allowedColumnIds,size:"sm",isClearable:!1,isSearchable:!0,variant:x,controlShouldRenderValue:!0,defaultValue:n?e.allowedColumnIds[e.allowedColumnIds.findIndex(a=>a.value===n[n.findIndex(t=>t.chartConfigId===e.chartConfigId)].columnId)]:void 0,onChange:a=>{const t={columnId:a?.value,chartConfigId:e.chartConfigId},d=f?.map(h=>h.chartConfigId===t.chartConfigId?t:h);R(L(w,d)),j(d)}}):l.jsxRuntimeExports.jsx(p.RadioGroupExports.RadioGroup,{variant:x,defaultValue:n?e.allowedColumnIds[e.allowedColumnIds.findIndex(a=>a.value===n[n.findIndex(t=>t.chartConfigId===e.chartConfigId)].columnId)].label:"",onValueChange:a=>{const d={columnId:e.allowedColumnIds[e.allowedColumnIds.findIndex($=>$.label===a)].value,chartConfigId:e.chartConfigId},h=f?.map($=>$.chartConfigId===d.chartConfigId?d:$);R(L(w,h)),j(h)},children:e.allowedColumnIds.map((a,t)=>l.jsxRuntimeExports.jsx(p.RadioGroupExports.RadioGroupItem,{label:a.label,value:a.label},t))})]},c)),V?.map((e,c)=>l.jsxRuntimeExports.jsxs("div",{style:{width:e.width||`calc(${100/g}% - ${(g-1)/g}rem)`,flexGrow:1,flexShrink:0,minWidth:"240px"},children:[l.jsxRuntimeExports.jsx(p.LabelExports.Label,{className:"mb-2",children:e.label}),e.singleSelect?l.jsxRuntimeExports.jsx(C.DropdownSelectExports.DropdownSelect,{options:e.availableValues,variant:x,isClearable:e.clearable===void 0?!0:e.clearable,isSearchable:!0,controlShouldRenderValue:!0,filterOption:C.DropdownSelectExports.createFilter(M),onChange:a=>{k(e.filter,a)},value:e.value,defaultValue:e.defaultValue}):l.jsxRuntimeExports.jsxs(l.jsxRuntimeExports.Fragment,{children:[e.ui!=="radio"?l.jsxRuntimeExports.jsx(C.DropdownSelectExports.DropdownSelect,{options:e.availableValues,variant:x,size:"sm",isMulti:!0,isClearable:e.clearable===void 0?!0:e.clearable,isSearchable:!0,controlShouldRenderValue:!0,filterOption:C.DropdownSelectExports.createFilter(M),onChange:a=>{k(e.filter,a)},value:e.value,defaultValue:e.defaultValue}):l.jsxRuntimeExports.jsx(p.CheckboxGroupExports.CheckboxGroup,{variant:x,defaultValue:e.defaultValue?e.defaultValue.map(a=>`${a.value}`):[],value:e.value?e.value.map(a=>`${a.value}`):void 0,onValueChange:a=>{k(e.filter,e.availableValues.filter(t=>a.indexOf(`${t.value}`)!==-1))},children:e.availableValues.map((a,t)=>l.jsxRuntimeExports.jsx(p.CheckboxGroupExports.CheckboxGroupItem,{label:`${a.label}`,value:`${a.value}`},t))}),e.allowSelectAll?l.jsxRuntimeExports.jsx("button",{type:"button",className:"bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400",onClick:()=>{k(e.filter,e.availableValues)},children:"Select all options"}):null]})]},c)),b?l.jsxRuntimeExports.jsxs("div",{style:{width:b.width||`calc(${100/g}% - ${(g-1)/g}rem)`,flexGrow:1,flexShrink:0,minWidth:"240px"},children:[l.jsxRuntimeExports.jsx(p.LabelExports.Label,{className:"mb-2",children:b.label||"Highlight data"}),l.jsxRuntimeExports.jsx(C.DropdownSelectExports.DropdownSelect,{options:_,variant:x,size:"sm",isMulti:!0,isClearable:!0,isSearchable:!0,controlShouldRenderValue:!0,filterOption:C.DropdownSelectExports.createFilter(M),onChange:e=>{Z(e?.map(c=>c.value))},value:y?.map(e=>({label:e,value:e})),defaultValue:b.defaultValues?.map(e=>({label:e,value:e}))})]}):null]}):null,l.jsxRuntimeExports.jsx(p.GraphEl,{graph:i,graphData:ae,graphDataConfiguration:f,debugMode:E,readableHeader:K||[],updateFilters:Q,settings:{...r||{},...m,graphTitle:void 0,graphDescription:void 0,graphDownload:!1,dataDownload:!1,backgroundColor:void 0,padding:"0",theme:r?.theme||A,...y?{highlightedDataPoints:y,highlightedIds:y?.map(e=>`${e}`),highlightedLines:y?.map(e=>e)}:{}}})]}):l.jsxRuntimeExports.jsx("div",{className:"w-full flex justify-center p-4",children:l.jsxRuntimeExports.jsx(le.SpinnerExports.Spinner,{})})})})})})}exports.SingleGraphDashboard=ce;
+//# sourceMappingURL=SingleGraphDashboard.js.map