@undp/data-viz 1.3.1 → 1.4.1

package/dist/index.d.ts

@@ -180,9 +180,9 @@ declare interface ClassNameObject {
     dataCards?: string;
 }
 
-export declare function ColorLegend(props: Props_51): JSX.Element;
+export declare function ColorLegend(props: Props_58): JSX.Element;
 
-export declare function ColorLegendWithMouseOver(props: Props_52): JSX.Element;
+export declare function ColorLegendWithMouseOver(props: Props_59): JSX.Element;
 
 export declare const Colors: {
     gray: string;
@@ -382,6 +382,25 @@ declare interface ConfigObject {
 }
 
 declare interface ConfigObject_2 {
+    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 interface ConfigObject_3 {
     validateDataAndSettings?: boolean;
     dashboardID?: string;
     dashboardLayout: DashboardFromWideToLongFormatLayoutDataType;
@@ -398,7 +417,7 @@ declare interface ConfigObject_2 {
     graphClassNames?: ClassNameObject;
 }
 
-declare interface ConfigObject_3 {
+declare interface ConfigObject_4 {
     graphSettings?: GraphSettingsDataType;
     dataSettings?: DataSettingsDataType;
     filters?: FilterUiSettingsDataType[];
@@ -421,7 +440,37 @@ declare interface ConfigObject_3 {
     uiMode?: 'light' | 'normal';
 }
 
-declare interface ConfigObject_4 {
+declare interface ConfigObject_5 {
+    graphSettings?: GraphSettingsDataType;
+    graphType: GeoHubGraphType;
+    debugMode?: boolean;
+    uiMode?: 'light' | 'normal';
+}
+
+declare interface ConfigObject_6 {
+    graphSettings?: GraphSettingsDataType;
+    dataSettings: DataSettingsDataType;
+    filters?: FilterUiSettingsDataType[];
+    graphType: ThreeDGraphType;
+    noOfFiltersPerRow?: number;
+    dataTransform?: {
+        keyColumn: string;
+        aggregationColumnsSetting?: AggregationSettingsDataType[];
+    };
+    dataFilters?: DataFilterDataType[];
+    graphDataConfiguration?: GraphConfigurationDataType[];
+    debugMode?: boolean;
+    dataSelectionOptions?: DataSelectionDataType[];
+    advancedDataSelectionOptions?: AdvancedDataSelectionDataType[];
+    highlightDataPointSettings?: HighlightDataPointSettingsDataType;
+    readableHeader?: {
+        value: string;
+        label: string;
+    }[];
+    uiMode?: 'light' | 'normal';
+}
+
+declare interface ConfigObject_7 {
     noOfColumns?: number;
     columnGridBy: string;
     graphSettings?: GraphSettingsDataType;
@@ -448,9 +497,9 @@ declare interface ConfigObject_4 {
     theme?: 'dark' | 'light';
 }
 
-export declare function CopyTextButton(props: Props_50): JSX.Element;
+export declare function CopyTextButton(props: Props_57): JSX.Element;
 
-export declare function CsvDownloadButton(props: Props_49): JSX.Element;
+export declare function CsvDownloadButton(props: Props_56): JSX.Element;
 
 declare type CurveTypes = 'linear' | 'curve' | 'step' | 'stepAfter' | 'stepBefore';
 
@@ -477,8 +526,11 @@ declare interface CustomLayerDataType {
     layer: React.ReactNode;
 }
 
-declare type DashboardColumnDataType = {
+declare interface DashboardColumnDataType extends DashboardColumnDataWithoutGraphType {
     graphType: GraphType;
+}
+
+declare interface DashboardColumnDataWithoutGraphType {
     attachedFilter?: string;
     columnWidth?: number;
     dataTransform?: {
@@ -490,7 +542,7 @@ declare type DashboardColumnDataType = {
     dataSelectionOptions?: DataSelectionDataType[];
     advancedDataSelectionOptions?: AdvancedDataSelectionDataType[];
     settings?: GraphSettingsDataType;
-};
+}
 
 declare type DashboardFromWideToLongFormatColumnDataType = {
     graphType: 'donutChart' | 'barChart' | 'unitChart' | 'treeMap' | 'circlePacking';
@@ -513,17 +565,20 @@ declare type DashboardFromWideToLongFormatLayoutDataType = {
     }[];
 };
 
-declare type DashboardLayoutDataType = {
+declare interface DashboardLayoutDataType extends DashboardLayoutDataWithoutRowsType {
+    rows: {
+        columns: DashboardColumnDataType[];
+        height?: number;
+    }[];
+}
+
+declare interface DashboardLayoutDataWithoutRowsType {
     title?: string;
     description?: string;
     padding?: string;
     backgroundColor?: string | boolean;
     language?: Languages;
-    rows: {
-        columns: DashboardColumnDataType[];
-        height?: number;
-    }[];
-};
+}
 
 export declare function DataCards(props: Props_30): JSX.Element;
 
@@ -660,7 +715,7 @@ export declare const excelDownload: (csvData: any, fileName: string, headers: st
     [key: string]: string;
 }, wscols: WsColInterface_2[]) => void;
 
-export declare function ExcelDownloadButton(props: Props_46): JSX.Element;
+export declare function ExcelDownloadButton(props: Props_53): JSX.Element;
 
 /**
  * Fetches a CSV file from a URL, parses it, and applies transformations based on the provided configuration.
@@ -759,7 +814,7 @@ declare type FilterUiSettingsDataType = {
     width?: string;
 };
 
-export declare function FootNote(props: Props_57): JSX.Element | null;
+export declare function FootNote(props: Props_64): JSX.Element | null;
 
 /**
  * Generates an embed link with custom query parameters.
@@ -3967,11 +4022,11 @@ declare interface GraphConfigurationDataType {
     chartConfigId: string;
 }
 
-export declare function GraphDescription(props: Props_58): JSX.Element | null;
+export declare function GraphDescription(props: Props_65): JSX.Element | null;
 
-export declare function GraphFooter(props: Props_55): JSX.Element | null;
+export declare function GraphFooter(props: Props_62): JSX.Element | null;
 
-export declare function GraphHeader(props: Props_56): JSX.Element;
+export declare function GraphHeader(props: Props_63): JSX.Element;
 
 export declare const graphList: {
     graphName: string;
@@ -4224,15 +4279,15 @@ declare interface GraphSettingsDataType {
     polygonAltitude?: number;
 }
 
-export declare function GraphTitle(props: Props_59): JSX.Element | null;
+export declare function GraphTitle(props: Props_66): JSX.Element | null;
 
-export declare type GraphType = GraphTypeForGriddedGraph | GeoHubGraphType;
+export declare type GraphType = GraphTypeForGriddedGraph;
 
-export 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';
+export 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';
 
-export declare function GriddedGraphs(props: Props_40): JSX.Element;
+export declare function GriddedGraphs(props: Props_43): JSX.Element;
 
-export declare function GriddedGraphsFromConfig(props: Props_45): JSX.Element;
+export declare function GriddedGraphsFromConfig(props: Props_52): JSX.Element;
 
 declare interface GroupedBarChartProps {
     /** Array of data objects */
@@ -4414,7 +4469,7 @@ declare interface HistogramDataType {
  */
 export declare function imageDownload(node: HTMLElement, filename: string): void;
 
-export declare function ImageDownloadButton(props: Props_47): JSX.Element;
+export declare function ImageDownloadButton(props: Props_54): JSX.Element;
 
 declare interface InfoBoxDataType {
     title?: string | React.ReactNode;
@@ -4423,7 +4478,7 @@ declare interface InfoBoxDataType {
 
 declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'jp' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
 
-export declare function LinearColorLegend(props: Props_53): JSX.Element;
+export declare function LinearColorLegend(props: Props_60): JSX.Element;
 
 declare interface LineChartDataType {
     date: number | string;
@@ -4456,11 +4511,11 @@ declare interface MaterialDataType {
 
 export declare function MultiGraphDashboard(props: Props_37): JSX.Element;
 
-export declare function MultiGraphDashboardFromConfig(props: Props_42): JSX.Element;
+export declare function MultiGraphDashboardFromConfig(props: Props_46): JSX.Element;
 
-export declare function MultiGraphDashboardWideToLongFormat(props: Props_38): JSX.Element;
+export declare function MultiGraphDashboardWideToLongFormat(props: Props_39): JSX.Element;
 
-export declare function MultiGraphDashboardWideToLongFormatFromConfig(props: Props_43): JSX.Element;
+export declare function MultiGraphDashboardWideToLongFormatFromConfig(props: Props_48): JSX.Element;
 
 export declare function MultiLineAltChart(props: Props_10): JSX.Element;
 
@@ -4518,6 +4573,32 @@ declare interface ParetoChartDataType {
     data?: object;
 }
 
+declare interface PerformanceIntensiveChaptersDataType {
+    dataSettings: DataSettingsDataType;
+    graphSettings: GraphSettingsDataType;
+    graphType: GraphType | GeoHubGraphType | ThreeDGraphType;
+    graphDataConfiguration?: GraphConfigurationDataType[];
+    sections: SectionsDataType[];
+}
+
+declare interface PerformanceIntensiveDashboardColumnDataType extends DashboardColumnDataWithoutGraphType {
+    graphType: GraphType | ThreeDGraphType | GeoHubGraphType;
+}
+
+declare interface PerformanceIntensiveDashboardLayoutDataType extends DashboardLayoutDataWithoutRowsType {
+    rows: {
+        columns: PerformanceIntensiveDashboardColumnDataType[];
+        height?: number;
+    }[];
+}
+
+export declare function PerformanceIntensiveMultiGraphDashboard(props: Props_38): JSX.Element;
+
+export declare function PerformanceIntensiveMultiGraphDashboardFromConfig(props: Props_47): JSX.Element;
+
+/** ScrollStory is a scrollytelling container component that reveals content step-by-step as the user scrolls through the page. */
+export declare function PerformanceIntensiveScrollStory(props: Props_45): JSX.Element;
+
 declare interface Props {
     /** Array of data objects */
     data: BarGraphDataType[];
@@ -7113,43 +7194,37 @@ declare interface Props_37 {
 
 declare interface Props_38 {
     dashboardID?: string;
-    dashboardLayout: DashboardFromWideToLongFormatLayoutDataType;
-    dataSettings: DataSettingsWideToLongDataType;
+    dashboardLayout: PerformanceIntensiveDashboardLayoutDataType;
+    dataSettings: DataSettingsDataType;
+    filters?: FilterUiSettingsDataType[];
+    noOfFiltersPerRow?: number;
+    dataFilters?: DataFilterDataType[];
     debugMode?: boolean;
     theme?: 'dark' | 'light';
+    filterPosition?: 'top' | 'side';
     readableHeader?: {
         value: string;
         label: string;
     }[];
-    dataFilters?: DataFilterDataType[];
     uiMode?: 'light' | 'normal';
     graphStyles?: StyleObject;
     graphClassNames?: ClassNameObject;
 }
 
 declare interface Props_39 {
-    graphSettings?: GraphSettingsDataType;
+    dashboardID?: string;
+    dashboardLayout: DashboardFromWideToLongFormatLayoutDataType;
+    dataSettings: DataSettingsWideToLongDataType;
+    debugMode?: boolean;
+    theme?: 'dark' | 'light';
     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';
+    graphStyles?: StyleObject;
+    graphClassNames?: ClassNameObject;
 }
 
 declare interface Props_4 {
@@ -7278,6 +7353,61 @@ declare interface Props_4 {
 }
 
 declare interface Props_40 {
+    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;
+}
+
+declare interface Props_41 {
+    graphSettings?: GraphSettingsDataType;
+    graphType: GeoHubGraphType;
+    debugMode?: boolean;
+    uiMode?: 'light' | 'normal';
+}
+
+declare interface Props_42 {
+    graphSettings?: GraphSettingsDataType;
+    readableHeader?: {
+        value: string;
+        label: string;
+    }[];
+    dataSettings: DataSettingsDataType;
+    filters?: FilterUiSettingsDataType[];
+    highlightDataPointSettings?: HighlightDataPointSettingsDataType;
+    noOfFiltersPerRow?: number;
+    graphType: ThreeDGraphType;
+    dataTransform?: {
+        keyColumn: string;
+        aggregationColumnsSetting?: AggregationSettingsDataType[];
+    };
+    dataFilters?: DataFilterDataType[];
+    graphDataConfiguration?: GraphConfigurationDataType[];
+    dataSelectionOptions?: DataSelectionDataType[];
+    advancedDataSelectionOptions?: AdvancedDataSelectionDataType[];
+    debugMode?: boolean;
+    uiMode?: 'light' | 'normal';
+    updateFilters?: (_d: string) => void;
+}
+
+declare interface Props_43 {
     noOfColumns?: number;
     columnGridBy: string;
     graphSettings?: GraphSettingsDataType;
@@ -7305,7 +7435,7 @@ declare interface Props_40 {
     theme?: 'dark' | 'light';
 }
 
-declare interface Props_41 {
+declare interface Props_44 {
     /** Defines if the information is shown as overlay or on the side */
     mode?: 'overlay' | 'side';
     /** Defines the width of the info section */
@@ -7320,61 +7450,35 @@ declare interface Props_41 {
     infoBackgroundColor?: string;
 }
 
-declare interface Props_42 {
-    config: string | ConfigObject;
-}
-
-declare interface Props_43 {
-    config: string | ConfigObject_2;
-}
-
-declare interface Props_44 {
-    config: string | ConfigObject_3;
-}
-
 declare interface Props_45 {
-    config: string | ConfigObject_4;
+    /** Defines if the information is shown as overlay or on the side */
+    mode?: 'overlay' | 'side';
+    /** Defines the width of the info section */
+    infoWidth?: string;
+    /** Defined the different chapters for the story and different sections within the story  */
+    chapters: PerformanceIntensiveChaptersDataType[];
+    /** Position of info on the page */
+    infoPosition?: 'left' | 'right' | 'center';
+    /** 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 */
+    visibilityThreshold?: number;
+    /** Sets background color of the info box. */
+    infoBackgroundColor?: string;
 }
 
 declare interface Props_46 {
-    buttonContent?: string | JSX_2.Element;
-    buttonType?: 'primary' | 'primary-without-icon' | 'secondary' | 'secondary-without-icon' | 'tertiary';
-    csvData: any;
-    fileName?: string;
-    headers: string[];
-    xlsxHeader: any;
-    wscols: WsColInterface[];
-    buttonSmall?: boolean;
-    className?: string;
+    config: string | ConfigObject;
 }
 
 declare interface Props_47 {
-    buttonContent?: string | JSX_2.Element;
-    buttonType?: 'primary' | 'primary-without-icon' | 'secondary' | 'secondary-without-icon' | 'tertiary';
-    nodeID: string | HTMLElement;
-    filename?: string;
-    buttonSmall?: boolean;
-    className?: string;
+    config: string | ConfigObject_2;
 }
 
 declare interface Props_48 {
-    buttonContent?: string | JSX_2.Element;
-    buttonType?: 'primary' | 'primary-without-icon' | 'secondary' | 'secondary-without-icon' | 'tertiary';
-    nodeID: string | HTMLElement;
-    filename?: string;
-    buttonSmall?: boolean;
-    className?: string;
+    config: string | ConfigObject_3;
 }
 
 declare interface Props_49 {
-    buttonContent?: string | JSX_2.Element;
-    buttonType?: 'primary' | 'primary-without-icon' | 'secondary' | 'secondary-without-icon' | 'tertiary';
-    csvData: any;
-    fileName?: string;
-    headers: HeaderProps[];
-    separator?: ',' | ';';
-    buttonSmall?: boolean;
-    className?: string;
+    config: string | ConfigObject_4;
 }
 
 declare interface Props_5 {
@@ -7473,102 +7577,86 @@ declare interface Props_5 {
 }
 
 declare interface Props_50 {
-    text: string;
-    successMessage?: string;
-    buttonText?: string;
-    buttonSmall?: boolean;
-    className?: string;
+    config: string | ConfigObject_5;
 }
 
 declare interface Props_51 {
-    colors: string[];
-    colorDomain: (string | number)[];
-    dashedLines?: (string | number)[];
-    labelsToBeHidden?: (string | number)[];
-    colorLegendTitle?: string;
-    showNAColor: boolean;
-    width?: number;
-    isCenter?: boolean;
-    className?: string;
+    config: string | ConfigObject_6;
 }
 
 declare interface Props_52 {
-    colors: string[];
-    colorDomain: (string | number)[];
-    colorLegendTitle?: string;
-    showNAColor: boolean;
-    setSelectedColor: (_d?: string) => void;
-    width?: number;
-    isCenter?: boolean;
-    className?: string;
+    config: string | ConfigObject_7;
 }
 
 declare interface Props_53 {
-    colors: string[];
-    colorDomain: number[];
-    colorLegendTitle?: string;
-    width?: number;
+    buttonContent?: string | JSX_2.Element;
+    buttonType?: 'primary' | 'primary-without-icon' | 'secondary' | 'secondary-without-icon' | 'tertiary';
+    csvData: any;
+    fileName?: string;
+    headers: string[];
+    xlsxHeader: any;
+    wscols: WsColInterface[];
+    buttonSmall?: boolean;
     className?: string;
 }
 
 declare interface Props_54 {
-    colors: string[];
-    colorDomain: number[];
-    colorLegendTitle?: string;
-    setSelectedColor: (_d?: string) => void;
-    width?: number;
-    naColor?: string;
+    buttonContent?: string | JSX_2.Element;
+    buttonType?: 'primary' | 'primary-without-icon' | 'secondary' | 'secondary-without-icon' | 'tertiary';
+    nodeID: string | HTMLElement;
+    filename?: string;
+    buttonSmall?: boolean;
     className?: string;
-    showNAColor: boolean;
 }
 
 declare interface Props_55 {
-    footNote?: string | React.ReactNode;
-    sources?: SourcesDataType[];
-    width?: number;
-    styles?: {
-        footnote?: React.CSSProperties;
-        source?: React.CSSProperties;
-    };
-    classNames?: {
-        footnote?: string;
-        source?: string;
-    };
+    buttonContent?: string | JSX_2.Element;
+    buttonType?: 'primary' | 'primary-without-icon' | 'secondary' | 'secondary-without-icon' | 'tertiary';
+    nodeID: string | HTMLElement;
+    filename?: string;
+    buttonSmall?: boolean;
+    className?: string;
 }
 
 declare interface Props_56 {
-    graphTitle?: string | React.ReactNode;
-    graphDescription?: string | React.ReactNode;
-    width?: number;
-    graphDownload?: HTMLDivElement | null;
-    dataDownload?: any;
-    isDashboard?: boolean;
-    styles?: {
-        title?: React.CSSProperties;
-        description?: React.CSSProperties;
-    };
-    classNames?: {
-        title?: string;
-        description?: string;
-    };
+    buttonContent?: string | JSX_2.Element;
+    buttonType?: 'primary' | 'primary-without-icon' | 'secondary' | 'secondary-without-icon' | 'tertiary';
+    csvData: any;
+    fileName?: string;
+    headers: HeaderProps[];
+    separator?: ',' | ';';
+    buttonSmall?: boolean;
+    className?: string;
 }
 
 declare interface Props_57 {
-    text: string | default_2.ReactNode;
-    style?: default_2.CSSProperties;
+    text: string;
+    successMessage?: string;
+    buttonText?: string;
+    buttonSmall?: boolean;
     className?: string;
 }
 
 declare interface Props_58 {
-    text: string | default_2.ReactNode;
-    style?: default_2.CSSProperties;
+    colors: string[];
+    colorDomain: (string | number)[];
+    dashedLines?: (string | number)[];
+    labelsToBeHidden?: (string | number)[];
+    colorLegendTitle?: string;
+    showNAColor: boolean;
+    width?: number;
+    isCenter?: boolean;
     className?: string;
 }
 
 declare interface Props_59 {
-    text: string | default_2.ReactNode;
-    isDashboard?: boolean;
-    style?: default_2.CSSProperties;
+    colors: string[];
+    colorDomain: (string | number)[];
+    colorLegendTitle?: string;
+    showNAColor: boolean;
+    setSelectedColor: (_d?: string) => void;
+    width?: number;
+    isCenter?: boolean;
     className?: string;
 }
 
@@ -7665,6 +7753,75 @@ declare interface Props_6 {
     graphID?: string;
 }
 
+declare interface Props_60 {
+    colors: string[];
+    colorDomain: number[];
+    colorLegendTitle?: string;
+    width?: number;
+    className?: string;
+}
+
+declare interface Props_61 {
+    colors: string[];
+    colorDomain: number[];
+    colorLegendTitle?: string;
+    setSelectedColor: (_d?: string) => void;
+    width?: number;
+    naColor?: string;
+    className?: string;
+    showNAColor: boolean;
+}
+
+declare interface Props_62 {
+    footNote?: string | React.ReactNode;
+    sources?: SourcesDataType[];
+    width?: number;
+    styles?: {
+        footnote?: React.CSSProperties;
+        source?: React.CSSProperties;
+    };
+    classNames?: {
+        footnote?: string;
+        source?: string;
+    };
+}
+
+declare interface Props_63 {
+    graphTitle?: string | React.ReactNode;
+    graphDescription?: string | React.ReactNode;
+    width?: number;
+    graphDownload?: HTMLDivElement | null;
+    dataDownload?: any;
+    isDashboard?: boolean;
+    styles?: {
+        title?: React.CSSProperties;
+        description?: React.CSSProperties;
+    };
+    classNames?: {
+        title?: string;
+        description?: string;
+    };
+}
+
+declare interface Props_64 {
+    text: string | default_2.ReactNode;
+    style?: default_2.CSSProperties;
+    className?: string;
+}
+
+declare interface Props_65 {
+    text: string | default_2.ReactNode;
+    style?: default_2.CSSProperties;
+    className?: string;
+}
+
+declare interface Props_66 {
+    text: string | default_2.ReactNode;
+    isDashboard?: boolean;
+    style?: default_2.CSSProperties;
+    className?: string;
+}
+
 declare interface Props_7 {
     /** Array of data objects */
     data: LineChartWithConfidenceIntervalDataType[];
@@ -8057,8 +8214,8 @@ declare interface ScatterPlotDataType {
     data?: object;
 }
 
-/** ScrollStory is a scrollytelling container component that reveals content step-by-step as the user scrolls through the page. */
-export declare function ScrollStory(props: Props_41): JSX.Element;
+/** ScrollStory is a scrollytelling container component that reveals content step-by-step as the user scrolls through the page. This does not include GeoHub maps and 3-D graph; for those please use `PerformanceIntensiveScrollStory`. */
+export declare function ScrollStory(props: Props_44): JSX.Element;
 
 declare interface SectionsDataType {
     graphSettings?: GraphSettingsDataType;
@@ -8070,9 +8227,17 @@ export declare function SimpleBarGraph(props: Props): JSX.Element;
 
 export declare function SimpleLineChart(props: Props_8): JSX.Element;
 
-export declare function SingleGraphDashboard(props: Props_39): JSX.Element;
+export declare function SingleGraphDashboard(props: Props_40): JSX.Element;
+
+export declare function SingleGraphDashboardFromConfig(props: Props_49): JSX.Element;
+
+export declare function SingleGraphDashboardGeoHubMaps(props: Props_41): JSX.Element;
 
-export declare function SingleGraphDashboardFromConfig(props: Props_44): JSX.Element;
+export declare function SingleGraphDashboardGeoHubMapsFromConfig(props: Props_50): JSX.Element;
+
+export declare function SingleGraphDashboardThreeDGraphs(props: Props_42): JSX.Element;
+
+export declare function SingleGraphDashboardThreeDGraphsFromConfig(props: Props_51): JSX.Element;
 
 export declare function SlopeChart(props: Props_21): JSX.Element;
 
@@ -8263,12 +8428,14 @@ declare interface StyleObject {
  */
 export declare function svgDownload(node: HTMLElement, filename: string): void;
 
-export declare function SVGDownloadButton(props: Props_48): JSX.Element;
+export declare function SVGDownloadButton(props: Props_55): JSX.Element;
 
 /** For using these maps you will have to install [`three`](https://threejs.org/manual/) and [react-globe.gl](https://www.npmjs.com/package/react-globe.gl) package to your project */
 export declare function ThreeDGlobe(props: Props_16): JSX.Element;
 
-export declare function ThresholdColorLegendWithMouseOver(props: Props_54): JSX.Element;
+declare type ThreeDGraphType = 'threeDGlobe';
+
+export declare function ThresholdColorLegendWithMouseOver(props: Props_61): JSX.Element;
 
 declare interface TimelineDataType {
     autoplay: boolean;
@@ -8375,7 +8542,7 @@ export declare function transformDataForAggregation(data: any, keyColumn: string
  * const transformedData = transformDataForGraph(graphData, graph, config);
  * console.log(transformedData);
  */
-export declare function transformDataForGraph(data: any, graph: GraphType, config?: GraphConfigurationDataType[]): any;
+export declare function transformDataForGraph(data: any, graph: GraphType | ThreeDGraphType, config?: GraphConfigurationDataType[]): any;
 
 /**
  * Fetches data from a given URL or multiple data sources, processes it according to the specified graph configuration,