@undp/data-viz 1.3.0 → 1.4.0

package/dist/PerformanceIntensiveMultiGraphDashboardFromConfig.d.ts

@@ -0,0 +1,570 @@
+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: PerformanceIntensiveDashboardLayoutDataType;
+    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 interface DashboardColumnDataWithoutGraphType {
+    attachedFilter?: string;
+    columnWidth?: number;
+    dataTransform?: {
+        keyColumn: string;
+        aggregationColumnsSetting?: AggregationSettingsDataType[];
+    };
+    dataFilters?: DataFilterDataType[];
+    graphDataConfiguration?: GraphConfigurationDataType[];
+    dataSelectionOptions?: DataSelectionDataType[];
+    advancedDataSelectionOptions?: AdvancedDataSelectionDataType[];
+    settings?: GraphSettingsDataType;
+}
+
+declare interface DashboardLayoutDataWithoutRowsType {
+    title?: string;
+    description?: string;
+    padding?: string;
+    backgroundColor?: string | boolean;
+    language?: Languages;
+}
+
+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;
+
+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';
+
+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 PerformanceIntensiveDashboardColumnDataType extends DashboardColumnDataWithoutGraphType {
+    graphType: GraphType | ThreeDGraphType | GeoHubGraphType;
+}
+
+declare interface PerformanceIntensiveDashboardLayoutDataType extends DashboardLayoutDataWithoutRowsType {
+    rows: {
+        columns: PerformanceIntensiveDashboardColumnDataType[];
+        height?: number;
+    }[];
+}
+
+export declare function PerformanceIntensiveMultiGraphDashboardFromConfig(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 type ThreeDGraphType = 'threeDGlobe';
+
+declare interface TimelineDataType {
+    autoplay: boolean;
+    enabled: boolean;
+    showOnlyActiveDate: boolean;
+    speed?: number;
+    dateFormat?: string;
+}
+
+declare type ZoomInteractionTypes = 'scroll' | 'ctrlScroll' | 'button' | 'noZoom';
+
+export { }

package/dist/PerformanceIntensiveMultiGraphDashboardFromConfig.js

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

package/dist/PerformanceIntensiveMultiGraphDashboardFromConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceIntensiveMultiGraphDashboardFromConfig.js","sources":["../src/Components/Dashboard/PerformanceIntensive/MultiGraphDashboardFromConfig.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { PerformanceIntensiveMultiGraphDashboard } from './MultiGraphDashboard';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DataFilterDataType,\r\n  DataSettingsDataType,\r\n  FilterUiSettingsDataType,\r\n  PerformanceIntensiveDashboardLayoutDataType,\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: PerformanceIntensiveDashboardLayoutDataType;\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 PerformanceIntensiveMultiGraphDashboardFromConfig(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    <PerformanceIntensiveMultiGraphDashboard\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":["PerformanceIntensiveMultiGraphDashboardFromConfig","props","config","configSettings","setConfigSettings","useState","useEffect","data","fetchAndParseJSON","jsx","PerformanceIntensiveMultiGraphDashboard","Spinner"],"mappings":";;;;;AAsCO,SAASA,EAAkDC,GAAc;AAC9E,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/PerformanceIntensiveScrollStory.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-CHPV5EwG-DDoeWRVt.cjs"),d=require("react"),y=require("./SingleGraphDashboard.cjs"),m=require("./SingleGraphDashboardThreeDGraphs.cjs"),j=require("./SingleGraphDashboardGeoHubMaps.cjs"),b=require("./proxy-PQd2AItT.cjs"),D=require("./use-in-view-BCmzDU2O.cjs");function v(s){const{chapters:h,visibilityThreshold:g=.5,mode:i="overlay",infoWidth:n="320px",infoPosition:o="left",infoBackgroundColor:c="rgba(255,255,255,0.8)"}=s,[e,p]=d.useState(0),x=["threeDGlobe"],f=["geoHubCompareMap","geoHubMap","geoHubMapWithLayerSelection"],t=[];return h.forEach((a,u)=>{a.sections.forEach((l,S)=>{t.push({chapter:u,dataSettings:a.dataSettings,section:S,graphType:a.graphType,infoBox:l.infoBox,graphSettings:{...a.graphSettings,...l.graphSettings||{},animate:!0},graphDataConfiguration:l.graphDataConfiguration||a.graphDataConfiguration||[]})})}),r.jsxRuntimeExports.jsxs("div",{className:"relative w-full h-full",children:[r.jsxRuntimeExports.jsx(b.motion.div,{className:"fixed top-0 h-full -z-10",initial:{opacity:0},animate:{opacity:1},transition:{duration:.5},style:{left:i==="overlay"||o==="right"?0:n,width:i==="overlay"?"100%":`calc(100% - ${n})`},children:x.includes(t[e].graphType)?r.jsxRuntimeExports.jsx(m.SingleGraphDashboardThreeDGraphs,{graphType:t[e].graphType,dataSettings:t[e].dataSettings,graphSettings:t[e].graphSettings,graphDataConfiguration:t[e].graphDataConfiguration}):f.includes(t[e].graphType)?r.jsxRuntimeExports.jsx(j.SingleGraphDashboardGeoHubMaps,{graphType:t[e].graphType,graphSettings:t[e].graphSettings}):r.jsxRuntimeExports.jsx(y.SingleGraphDashboard,{graphType:t[e].graphType,dataSettings:t[e].dataSettings,graphSettings:t[e].graphSettings,graphDataConfiguration:t[e].graphDataConfiguration})},t[e].chapter),r.jsxRuntimeExports.jsx("div",{children:t.map((a,u)=>r.jsxRuntimeExports.jsx(T,{width:n,index:u,infoBox:a.infoBox,setActiveIndex:p,position:o,mode:i,visibilityThreshold:g,backgroundColor:c},`${a.chapter}-${a.section}`))})]})}function T({infoBox:s,index:h,setActiveIndex:g,position:i,mode:n,visibilityThreshold:o,backgroundColor:c,width:e}){const p=d.useRef(null);return D.useInView(p,{once:!1,amount:o})&&g(h),r.jsxRuntimeExports.jsx("section",{ref:p,className:`min-h-screen flex ${i==="center"?"justify-center":i==="right"?"justify-end":"justify-start"}`,children:r.jsxRuntimeExports.jsxs("div",{className:`p-8 ${n==="overlay"?"h-fit mx-10 ":""}`,style:{backgroundColor:c,width:e},children:[s.title,s.description]})})}exports.PerformanceIntensiveScrollStory=v;
+//# sourceMappingURL=PerformanceIntensiveScrollStory.cjs.map

package/dist/PerformanceIntensiveScrollStory.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceIntensiveScrollStory.cjs","sources":["../src/Components/Dashboard/PerformanceIntensive/ScrollStory.tsx"],"sourcesContent":["// Scrollytelling.tsx\r\nimport { motion, useInView } from 'motion/react';\r\nimport { useRef, useState } from 'react';\r\n\r\nimport { SingleGraphDashboard } from '../SingleGraphDashboard';\r\n\r\nimport { SingleGraphDashboardThreeDGraphs } from './SingleGraphDashboardThreeDGraphs';\r\nimport { SingleGraphDashboardGeoHubMaps } from './SingleGraphDashboardGeoHubMaps';\r\n\r\nimport {\r\n  PerformanceIntensiveChaptersDataType,\r\n  InfoBoxDataType,\r\n  SectionsArrDataType,\r\n  ThreeDGraphType,\r\n  GeoHubGraphType,\r\n  GraphType,\r\n} from '@/Types';\r\n\r\ninterface Props {\r\n  /** Defines if the information is shown as overlay or on the side */\r\n  mode?: 'overlay' | 'side';\r\n  /** Defines the width of the info section */\r\n  infoWidth?: string;\r\n  /** Defined the different chapters for the story and different sections within the story  */\r\n  chapters: PerformanceIntensiveChaptersDataType[];\r\n  /** Position of info on the page */\r\n  infoPosition?: 'left' | 'right' | 'center';\r\n  /** Sets how much of the element (from 0 to 1) must be visible before it's considered in view and it trigger the animation in the scrollytelling */\r\n  visibilityThreshold?: number;\r\n  /** Sets background color of the info box. */\r\n  infoBackgroundColor?: string;\r\n}\r\n\r\n/** ScrollStory is a scrollytelling container component that reveals content step-by-step as the user scrolls through the page. */\r\nexport function PerformanceIntensiveScrollStory(props: Props) {\r\n  const {\r\n    chapters,\r\n    visibilityThreshold = 0.5,\r\n    mode = 'overlay',\r\n    infoWidth = '320px',\r\n    infoPosition = 'left',\r\n    infoBackgroundColor = 'rgba(255,255,255,0.8)',\r\n  } = props;\r\n  const [activeIndex, setActiveIndex] = useState(0);\r\n  const threeDGraphs = ['threeDGlobe'];\r\n  const geoHubMaps = ['geoHubCompareMap', 'geoHubMap', 'geoHubMapWithLayerSelection'];\r\n  const sectionsArr: SectionsArrDataType[] = [];\r\n  chapters.forEach((d, i) => {\r\n    d.sections.forEach((s, j) => {\r\n      sectionsArr.push({\r\n        chapter: i,\r\n        dataSettings: d.dataSettings,\r\n        section: j,\r\n        graphType: d.graphType,\r\n        infoBox: s.infoBox,\r\n        graphSettings: { ...d.graphSettings, ...(s.graphSettings || {}), animate: true },\r\n        graphDataConfiguration: s.graphDataConfiguration || d.graphDataConfiguration || [],\r\n      });\r\n    });\r\n  });\r\n  return (\r\n    <div className='relative w-full h-full'>\r\n      {/* Background Layer */}\r\n      <motion.div\r\n        key={sectionsArr[activeIndex].chapter}\r\n        className='fixed top-0 h-full -z-10'\r\n        initial={{ opacity: 0 }}\r\n        animate={{ opacity: 1 }}\r\n        transition={{ duration: 0.5 }}\r\n        style={{\r\n          left: mode === 'overlay' ? 0 : infoPosition === 'right' ? 0 : infoWidth,\r\n          width: mode === 'overlay' ? '100%' : `calc(100% - ${infoWidth})`,\r\n        }}\r\n      >\r\n        {threeDGraphs.includes(sectionsArr[activeIndex].graphType) ? (\r\n          <SingleGraphDashboardThreeDGraphs\r\n            graphType={sectionsArr[activeIndex].graphType as ThreeDGraphType}\r\n            dataSettings={sectionsArr[activeIndex].dataSettings}\r\n            graphSettings={sectionsArr[activeIndex].graphSettings}\r\n            graphDataConfiguration={sectionsArr[activeIndex].graphDataConfiguration}\r\n          />\r\n        ) : geoHubMaps.includes(sectionsArr[activeIndex].graphType) ? (\r\n          <SingleGraphDashboardGeoHubMaps\r\n            graphType={sectionsArr[activeIndex].graphType as GeoHubGraphType}\r\n            graphSettings={sectionsArr[activeIndex].graphSettings}\r\n          />\r\n        ) : (\r\n          <SingleGraphDashboard\r\n            graphType={sectionsArr[activeIndex].graphType as GraphType}\r\n            dataSettings={sectionsArr[activeIndex].dataSettings}\r\n            graphSettings={sectionsArr[activeIndex].graphSettings}\r\n            graphDataConfiguration={sectionsArr[activeIndex].graphDataConfiguration}\r\n          />\r\n        )}\r\n      </motion.div>\r\n      <div>\r\n        {sectionsArr.map((section, idx) => (\r\n          <ScrollySection\r\n            width={infoWidth}\r\n            key={`${section.chapter}-${section.section}`}\r\n            index={idx}\r\n            infoBox={section.infoBox}\r\n            setActiveIndex={setActiveIndex}\r\n            position={infoPosition}\r\n            mode={mode}\r\n            visibilityThreshold={visibilityThreshold}\r\n            backgroundColor={infoBackgroundColor}\r\n          />\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction ScrollySection({\r\n  infoBox,\r\n  index,\r\n  setActiveIndex,\r\n  position,\r\n  mode,\r\n  visibilityThreshold,\r\n  backgroundColor,\r\n  width,\r\n}: {\r\n  infoBox: InfoBoxDataType;\r\n  index: number;\r\n  setActiveIndex: (idx: number) => void;\r\n  position: 'left' | 'right' | 'center';\r\n  mode: 'overlay' | 'side';\r\n  visibilityThreshold: number;\r\n  backgroundColor: string;\r\n  width: string;\r\n}) {\r\n  const ref = useRef(null);\r\n  const isInView = useInView(ref, {\r\n    once: false,\r\n    amount: visibilityThreshold,\r\n  });\r\n  if (isInView) setActiveIndex(index);\r\n  return (\r\n    <section\r\n      ref={ref}\r\n      className={`min-h-screen flex ${position === 'center' ? 'justify-center' : position === 'right' ? 'justify-end' : 'justify-start'}`}\r\n    >\r\n      <div\r\n        className={`p-8 ${mode === 'overlay' ? 'h-fit mx-10 ' : ''}`}\r\n        style={{\r\n          backgroundColor,\r\n          width,\r\n        }}\r\n      >\r\n        {infoBox.title}\r\n        {infoBox.description}\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n"],"names":["PerformanceIntensiveScrollStory","props","chapters","visibilityThreshold","mode","infoWidth","infoPosition","infoBackgroundColor","activeIndex","setActiveIndex","useState","threeDGraphs","geoHubMaps","sectionsArr","d","i","s","j","jsxs","jsx","motion","SingleGraphDashboardThreeDGraphs","SingleGraphDashboardGeoHubMaps","SingleGraphDashboard","section","idx","ScrollySection","infoBox","index","position","backgroundColor","width","ref","useRef","useInView"],"mappings":"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"}