@undp/data-viz 2.0.5 → 2.0.7

package/dist/index.d.ts

@@ -68,7 +68,7 @@ declare interface AnnotationSettingsDataType {
     };
 }
 
-export declare function AreaChart(props: Props_23): JSX.Element;
+export declare function AreaChart(props: Props_24): JSX.Element;
 
 declare interface AreaChartDataType {
     date: number | string;
@@ -104,7 +104,7 @@ declare interface BaseLightConfig {
     intensity: number;
 }
 
-export declare function BasicStatCard(props: Props_24): JSX.Element;
+export declare function BasicStatCard(props: Props_25): JSX.Element;
 
 export declare function BeeSwarmChart(props: Props_5): JSX.Element;
 
@@ -126,7 +126,7 @@ declare interface BivariateMapDataType {
     data?: object;
 }
 
-export declare function BulletChart(props: Props_22): JSX.Element;
+export declare function BulletChart(props: Props_23): JSX.Element;
 
 declare interface BulletChartDataType {
     label: string | number;
@@ -136,7 +136,7 @@ declare interface BulletChartDataType {
     data?: object;
 }
 
-export declare function ButterflyChart(props: Props_33): JSX.Element;
+export declare function ButterflyChart(props: Props_34): JSX.Element;
 
 declare interface ButterflyChartDataType {
     label: string | number;
@@ -197,9 +197,9 @@ declare interface ClassNameObject {
     colorLegend?: string;
 }
 
-export declare function ColorLegend(props: Props_58): JSX.Element;
+export declare function ColorLegend(props: Props_59): JSX.Element;
 
-export declare function ColorLegendWithMouseOver(props: Props_59): JSX.Element;
+export declare function ColorLegendWithMouseOver(props: Props_60): JSX.Element;
 
 export declare const Colors: {
     gray: string;
@@ -514,9 +514,9 @@ declare interface ConfigObject_7 {
     theme?: 'dark' | 'light';
 }
 
-export declare function CopyTextButton(props: Props_57): JSX.Element;
+export declare function CopyTextButton(props: Props_58): JSX.Element;
 
-export declare function CsvDownloadButton(props: Props_56): JSX.Element;
+export declare function CsvDownloadButton(props: Props_57): JSX.Element;
 
 declare type CurveTypes = 'linear' | 'curve' | 'step' | 'stepAfter' | 'stepBefore';
 
@@ -597,7 +597,7 @@ declare interface DashboardLayoutDataWithoutRowsType {
     language?: Languages;
 }
 
-export declare function DataCards(props: Props_30): JSX.Element;
+export declare function DataCards(props: Props_31): JSX.Element;
 
 declare interface DataFilterDataType {
     column: string;
@@ -639,7 +639,7 @@ declare interface DataSettingsWideToLongDataType {
     apiHeaders?: any;
 }
 
-export declare function DataTable(props: Props_29): JSX.Element;
+export declare function DataTable(props: Props_30): JSX.Element;
 
 declare interface DataTableColumnDataType {
     columnTitle?: string;
@@ -740,7 +740,7 @@ export declare const excelDownload: (csvData: any, fileName: string, headers: st
     [key: string]: string;
 }, wscols: WsColInterface_2[]) => void;
 
-export declare function ExcelDownloadButton(props: Props_53): JSX.Element;
+export declare function ExcelDownloadButton(props: Props_54): JSX.Element;
 
 /**
  * Fetches a CSV file from a URL, parses it, and applies transformations based on the provided configuration.
@@ -845,7 +845,7 @@ declare interface FogDataType {
     far: number;
 }
 
-export declare function FootNote(props: Props_64): JSX.Element | null;
+export declare function FootNote(props: Props_65): JSX.Element | null;
 
 /**
  * Generates an embed link with custom query parameters.
@@ -864,15 +864,15 @@ export declare function generateEmbedLink(link: string, params: ParamsProps[]):
 export declare function generateIframeCode(link: string, params: ParamsProps[]): string;
 
 /** For using these maps you will have to install [`maplibre`](https://maplibre.org/maplibre-gl-js/docs/#npm), [pmtiles](https://www.npmjs.com/package/pmtiles), [dnd-kit/core](https://www.npmjs.com/package/@dnd-kit/core), and [dnd-kit/modifier](https://www.npmjs.com/package/@dnd-kit/modifiers) package to your project */
-export declare function GeoHubCompareMaps(props: Props_18): JSX.Element;
+export declare function GeoHubCompareMaps(props: Props_19): JSX.Element;
 
 export declare type GeoHubGraphType = 'geoHubCompareMap' | 'geoHubMap' | 'geoHubMapWithLayerSelection';
 
 /** For using these maps you will have to install [`maplibre`](https://maplibre.org/maplibre-gl-js/docs/#npm) and [pmtiles](https://www.npmjs.com/package/pmtiles) package to your project */
-export declare function GeoHubMap(props: Props_17): JSX.Element;
+export declare function GeoHubMap(props: Props_18): JSX.Element;
 
 /** For using these maps you will have to install [`maplibre`](https://maplibre.org/maplibre-gl-js/docs/#npm) and [pmtiles](https://www.npmjs.com/package/pmtiles) package to your project */
-export declare function GeoHubMapWithLayerSelection(props: Props_19): JSX.Element;
+export declare function GeoHubMapWithLayerSelection(props: Props_20): JSX.Element;
 
 export declare function getCentroidCoordinates(multiPolygonFeature: Feature<Polygon | MultiPolygon, GeoJsonProperties>, centerLargestPolygon?: boolean): Position_2;
 
@@ -4055,11 +4055,11 @@ declare interface GraphConfigurationDataType {
     chartConfigId: string;
 }
 
-export declare function GraphDescription(props: Props_65): JSX.Element | null;
+export declare function GraphDescription(props: Props_66): JSX.Element | null;
 
-export declare function GraphFooter(props: Props_62): JSX.Element | null;
+export declare function GraphFooter(props: Props_63): JSX.Element | null;
 
-export declare function GraphHeader(props: Props_63): JSX.Element;
+export declare function GraphHeader(props: Props_64): JSX.Element;
 
 export declare const graphList: {
     graphName: string;
@@ -4317,17 +4317,22 @@ declare interface GraphSettingsDataType {
     highlightedAltitude?: number;
     selectedId?: string;
     collapseColorScaleByDefault?: boolean;
+    dotLegendTitle?: string;
+    dotColor?: string;
+    dotBorderColor?: string;
+    mapColorLegendTitle?: string;
+    choroplethScaleType?: Exclude<ScaleDataType, 'linear'>;
 }
 
-export declare function GraphTitle(props: Props_66): JSX.Element | null;
+export declare function GraphTitle(props: Props_67): JSX.Element | null;
 
 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';
+export declare type GraphTypeForGriddedGraph = 'barChart' | 'stackedBarChart' | 'groupedBarChart' | 'lineChart' | 'dualAxisLineChart' | 'multiLineChart' | 'multiLineAltChart' | 'differenceLineChart' | 'stackedAreaChart' | 'choroplethMap' | 'biVariateChoroplethMap' | 'hybridMap' | '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_43): JSX.Element;
+export declare function GriddedGraphs(props: Props_44): JSX.Element;
 
-export declare function GriddedGraphsFromConfig(props: Props_52): JSX.Element;
+export declare function GriddedGraphsFromConfig(props: Props_53): JSX.Element;
 
 declare interface GroupedBarChartProps {
     /** Array of data objects */
@@ -4458,7 +4463,7 @@ declare interface HeaderProps {
     key: string;
 }
 
-export declare function HeatMap(props: Props_28): JSX.Element;
+export declare function HeatMap(props: Props_29): JSX.Element;
 
 declare interface HeatMapDataType {
     row: string;
@@ -4491,13 +4496,26 @@ declare type HighlightDataPointSettingsDataType = {
     width?: string;
 };
 
-export declare function Histogram(props: Props_34): JSX.Element;
+export declare function Histogram(props: Props_35): JSX.Element;
 
 declare interface HistogramDataType {
     value: number;
     data?: object;
 }
 
+export declare function HybridMap(props: Props_16): JSX.Element;
+
+declare interface HybridMapDataType {
+    lat?: number;
+    long?: number;
+    x?: number | string | null;
+    id?: string;
+    radius?: number;
+    label?: string | number;
+    date?: string | number;
+    data?: object;
+}
+
 /**
  * Downloads an image of a specified HTML element as a PNG file.
  *
@@ -4513,7 +4531,7 @@ declare interface HistogramDataType {
  */
 export declare function imageDownload(node: HTMLElement, filename: string): void;
 
-export declare function ImageDownloadButton(props: Props_54): JSX.Element;
+export declare function ImageDownloadButton(props: Props_55): JSX.Element;
 
 declare interface InfoBoxDataType {
     title?: string | React.ReactNode;
@@ -4524,7 +4542,7 @@ declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'jp' |
 
 declare type LightConfig = AmbientLightConfig | DirectionalLightConfig | PointLightConfig | SpotLightConfig;
 
-export declare function LinearColorLegend(props: Props_60): JSX.Element;
+export declare function LinearColorLegend(props: Props_61): JSX.Element;
 
 declare interface LineChartDataType {
     date: number | string;
@@ -4549,13 +4567,13 @@ declare interface MapLegendDataType {
 
 declare type MapProjectionTypes = 'mercator' | 'equalEarth' | 'naturalEarth' | 'orthographic' | 'albersUSA';
 
-export declare function MultiGraphDashboard(props: Props_37): JSX.Element;
+export declare function MultiGraphDashboard(props: Props_38): JSX.Element;
 
-export declare function MultiGraphDashboardFromConfig(props: Props_46): JSX.Element;
+export declare function MultiGraphDashboardFromConfig(props: Props_47): JSX.Element;
 
-export declare function MultiGraphDashboardWideToLongFormat(props: Props_39): JSX.Element;
+export declare function MultiGraphDashboardWideToLongFormat(props: Props_40): JSX.Element;
 
-export declare function MultiGraphDashboardWideToLongFormatFromConfig(props: Props_48): JSX.Element;
+export declare function MultiGraphDashboardWideToLongFormatFromConfig(props: Props_49): JSX.Element;
 
 export declare function MultiLineAltChart(props: Props_10): JSX.Element;
 
@@ -4604,7 +4622,7 @@ declare interface ParamsProps {
     value: string | boolean | number | string[] | number[];
 }
 
-export declare function ParetoChart(props: Props_32): JSX.Element;
+export declare function ParetoChart(props: Props_33): JSX.Element;
 
 declare interface ParetoChartDataType {
     label: number | string;
@@ -4632,12 +4650,12 @@ declare interface PerformanceIntensiveDashboardLayoutDataType extends DashboardL
     }[];
 }
 
-export declare function PerformanceIntensiveMultiGraphDashboard(props: Props_38): JSX.Element;
+export declare function PerformanceIntensiveMultiGraphDashboard(props: Props_39): JSX.Element;
 
-export declare function PerformanceIntensiveMultiGraphDashboardFromConfig(props: Props_47): JSX.Element;
+export declare function PerformanceIntensiveMultiGraphDashboardFromConfig(props: Props_48): 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;
+export declare function PerformanceIntensiveScrollStory(props: Props_46): JSX.Element;
 
 declare interface PointLightConfig extends BaseLightConfig {
     type: 'point';
@@ -5360,6 +5378,121 @@ declare interface Props_15 {
 }
 
 declare interface Props_16 {
+    /** Array of data objects for dot density map*/
+    data: HybridMapDataType[];
+    /** Title of the graph */
+    graphTitle?: string | React.ReactNode;
+    /** Description of the graph */
+    graphDescription?: string | React.ReactNode;
+    /** Footnote for the graph */
+    footNote?: string | React.ReactNode;
+    /** Source data for the graph */
+    sources?: SourcesDataType[];
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Color or array of colors for the circle */
+    colors?: string[];
+    /** Domain of colors for the graph for the choropleth map */
+    colorDomain?: number[] | string[];
+    /** Title for the legend for the dot density scale */
+    dotLegendTitle?: string;
+    /** Title for the color legend for the color scale */
+    mapColorLegendTitle?: string;
+    /** Color for the areas where data is no available */
+    mapNoDataColor?: string;
+    /** Background color of the graph */
+    backgroundColor?: string | boolean;
+    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
+    styles?: StyleObject;
+    /** Custom class names */
+    classNames?: ClassNameObject;
+    /** Width of the graph */
+    width?: number;
+    /** Height of the graph */
+    height?: number;
+    /** Minimum height of the graph */
+    minHeight?: number;
+    /** Relative height scaling factor. This overwrites the height props */
+    relativeHeight?: number;
+    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
+    padding?: string;
+    /** Maximum radius of the circle */
+    radius?: number;
+    /** Map data as an object in geoJson format or a url for geoJson */
+    mapData?: any;
+    /** Scaling factor for the map. Multiplies the scale number to scale. */
+    scale?: number;
+    /** Center point of the map */
+    centerPoint?: [number, number];
+    /** Defines the zoom mode for the map */
+    zoomInteraction?: ZoomInteractionTypes;
+    /** Stroke width of the regions in the map */
+    mapBorderWidth?: number;
+    /** Stroke color of the regions in the map */
+    mapBorderColor?: string;
+    /** Color of the dots in the dot density map */
+    dotColor?: string;
+    /** Border color of the dots in the dot density map */
+    dotBorderColor?: string;
+    /** Color of the labels */
+    labelColor?: string;
+    /** Toggle if the map is a world map */
+    isWorldMap?: boolean;
+    /** Scale for the colors of the choropleth map */
+    choroplethScaleType?: Exclude<ScaleDataType, 'linear'>;
+    /** Map projection type */
+    mapProjection?: MapProjectionTypes;
+    /** Extend of the allowed zoom in the map */
+    zoomScaleExtend?: [number, number];
+    /** Extend of the allowed panning in the map */
+    zoomTranslateExtend?: [[number, number], [number, number]];
+    /** Toggle visibility of labels */
+    showLabels?: boolean;
+    /** Maximum value mapped to the radius chart */
+    maxRadiusValue?: number;
+    /** Countries or regions to be highlighted */
+    highlightedIds?: string[];
+    /** Data points to highlight. Use the label value from data to highlight the data point */
+    highlightedDataPoints?: (string | number)[];
+    /** Defines the opacity of the non-highlighted data */
+    dimmedOpacity?: number;
+    /** Toggles if the graph animates in when loaded.  */
+    animate?: boolean | AnimateDataType;
+    /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */
+    showColorScale?: boolean;
+    /** Toggle if color scale is collapsed by default. */
+    collapseColorScaleByDefault?: boolean;
+    /** Toggles the visibility of Antarctica in the default map. Only applicable for the default map. */
+    showAntarctica?: boolean;
+    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
+    customLayers?: CustomLayerDataType[];
+    /** Property in the property object in mapData geoJson object is used to match to the id in the data object */
+    mapProperty?: string;
+    /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
+    timeline?: TimelineDataType;
+    /** Enable graph download option as png */
+    graphDownload?: boolean;
+    /** Enable data download option as a csv */
+    dataDownload?: boolean;
+    /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
+    resetSelectionOnDoubleClick?: boolean;
+    /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
+    tooltip?: string | ((_d: any) => React.ReactNode);
+    /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
+    detailsOnClick?: string | ((_d: any) => React.ReactNode);
+    /** Callback for mouse over event */
+    onSeriesMouseOver?: (_d: any) => void;
+    /** Callback for mouse click event */
+    onSeriesMouseClick?: (_d: any) => void;
+    /** Language setting  */
+    language?: Languages;
+    /** Color theme */
+    theme?: 'light' | 'dark';
+    /** Unique ID for the graph */
+    graphID?: string;
+}
+
+declare interface Props_17 {
     /** Array of data objects */
     data: ChoroplethMapDataType[];
     /** Title of the graph */
@@ -5372,7 +5505,7 @@ declare interface Props_16 {
     sources?: SourcesDataType[];
     /** Accessibility label */
     ariaLabel?: string;
-    /** Colors for the choropleth map */
+    /** Colors for the choropleth map. Make sure the the colors are in hex code, any other format can cause issues. */
     colors?: string[];
     /** Domain of colors for the graph */
     colorDomain?: number[] | string[];
@@ -5460,7 +5593,7 @@ declare interface Props_16 {
     graphID?: string;
 }
 
-declare interface Props_17 {
+declare interface Props_18 {
     /** Title of the graph */
     graphTitle?: string | default_2.ReactNode;
     /** Description of the graph */
@@ -5512,7 +5645,7 @@ declare interface Props_17 {
     graphID?: string;
 }
 
-declare interface Props_18 {
+declare interface Props_19 {
     /** Title of the graph */
     graphTitle?: string | React.ReactNode;
     /** Description of the graph */
@@ -5555,58 +5688,6 @@ declare interface Props_18 {
     graphID?: string;
 }
 
-declare interface Props_19 {
-    /** Title of the graph */
-    graphTitle?: string | React.ReactNode;
-    /** Description of the graph */
-    graphDescription?: string | React.ReactNode;
-    /** Footnote for the graph */
-    footNote?: string | React.ReactNode;
-    /** Source data for the graph */
-    sources?: SourcesDataType[];
-    /** Accessibility label */
-    ariaLabel?: string;
-    /** Background color of the graph */
-    backgroundColor?: string | boolean;
-    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
-    styles?: StyleObject;
-    /** Custom class names */
-    classNames?: ClassNameObject;
-    /** Width of the graph */
-    width?: number;
-    /** Height of the graph */
-    height?: number;
-    /** Minimum height of the graph */
-    minHeight?: number;
-    /** Relative height scaling factor. This overwrites the height props */
-    relativeHeight?: number;
-    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
-    padding?: string;
-    /** URL for mapStyle JSON  */
-    mapStyle: string;
-    /** Starting center point of the map */
-    center?: [number, number];
-    /** Starting zoom level of the map */
-    zoomLevel?: number;
-    /** List of the layers that the user select and switch between sing a drop down */
-    layerSelection: {
-        layerID: string[];
-        name: string;
-    }[];
-    /** Defines the legend for the map. mapLegend is of type { mapStyleName: string; legend: string | React.ReactNode }[] where mapStyleName corresponds to the each name in the layerSelection. */
-    mapLegend?: MapLegendDataType[];
-    /** List of layer IDs to be excluded from the visualization */
-    excludeLayers?: string[];
-    /** Language setting  */
-    language?: Languages;
-    /** Color theme */
-    theme?: 'light' | 'dark';
-    /** Theme for the UI elements */
-    uiMode?: 'light' | 'normal';
-    /** Unique ID for the graph */
-    graphID?: string;
-}
-
 declare interface Props_2 {
     /** Array of data objects */
     data: TreeMapDataType[];
@@ -5695,6 +5776,58 @@ declare interface Props_2 {
 }
 
 declare interface Props_20 {
+    /** Title of the graph */
+    graphTitle?: string | React.ReactNode;
+    /** Description of the graph */
+    graphDescription?: string | React.ReactNode;
+    /** Footnote for the graph */
+    footNote?: string | React.ReactNode;
+    /** Source data for the graph */
+    sources?: SourcesDataType[];
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Background color of the graph */
+    backgroundColor?: string | boolean;
+    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
+    styles?: StyleObject;
+    /** Custom class names */
+    classNames?: ClassNameObject;
+    /** Width of the graph */
+    width?: number;
+    /** Height of the graph */
+    height?: number;
+    /** Minimum height of the graph */
+    minHeight?: number;
+    /** Relative height scaling factor. This overwrites the height props */
+    relativeHeight?: number;
+    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
+    padding?: string;
+    /** URL for mapStyle JSON  */
+    mapStyle: string;
+    /** Starting center point of the map */
+    center?: [number, number];
+    /** Starting zoom level of the map */
+    zoomLevel?: number;
+    /** List of the layers that the user select and switch between sing a drop down */
+    layerSelection: {
+        layerID: string[];
+        name: string;
+    }[];
+    /** Defines the legend for the map. mapLegend is of type { mapStyleName: string; legend: string | React.ReactNode }[] where mapStyleName corresponds to the each name in the layerSelection. */
+    mapLegend?: MapLegendDataType[];
+    /** List of layer IDs to be excluded from the visualization */
+    excludeLayers?: string[];
+    /** Language setting  */
+    language?: Languages;
+    /** Color theme */
+    theme?: 'light' | 'dark';
+    /** Theme for the UI elements */
+    uiMode?: 'light' | 'normal';
+    /** Unique ID for the graph */
+    graphID?: string;
+}
+
+declare interface Props_21 {
     /** Array of data objects */
     data: ScatterPlotDataType[];
     /** Title of the graph */
@@ -5819,7 +5952,7 @@ declare interface Props_20 {
     graphID?: string;
 }
 
-declare interface Props_21 {
+declare interface Props_22 {
     /** Array of data objects */
     data: SlopeChartDataType[];
     /** Title of the graph */
@@ -5908,7 +6041,7 @@ declare interface Props_21 {
     graphID?: string;
 }
 
-declare interface Props_22 {
+declare interface Props_23 {
     /** Array of data objects */
     data: BulletChartDataType[];
     /** Orientation of the graph */
@@ -5987,6 +6120,8 @@ declare interface Props_22 {
     targetStyle?: 'background' | 'line';
     /** Defines the color of the target bar */
     targetColor?: string;
+    /** Defines the thickness if the target is of style line */
+    targetLineThickness?: number;
     /** Defines the width of the measure bar in relation with available width */
     measureBarWidthFactor?: number;
     /** Custom order for labels */
@@ -6035,7 +6170,7 @@ declare interface Props_22 {
     graphID?: string;
 }
 
-declare interface Props_23 {
+declare interface Props_24 {
     /** Array of data objects */
     data: AreaChartDataType[];
     /** Title of the graph */
@@ -6128,7 +6263,7 @@ declare interface Props_23 {
     graphID?: string;
 }
 
-declare interface Props_24 {
+declare interface Props_25 {
     /** Title of the graph */
     graphTitle?: string | React.ReactNode;
     /** Description of the graph */
@@ -6175,7 +6310,7 @@ declare interface Props_24 {
     graphID?: string;
 }
 
-declare interface Props_25 {
+declare interface Props_26 {
     /** Array of data objects */
     data: StatCardsFromDataSheetDataType[];
     /** Title of the graph */
@@ -6226,7 +6361,7 @@ declare interface Props_25 {
     graphID?: string;
 }
 
-declare interface Props_26 {
+declare interface Props_27 {
     /** Array of data objects */
     data: TreeMapDataType[];
     /** Title of the graph */
@@ -6312,7 +6447,7 @@ declare interface Props_26 {
     graphID?: string;
 }
 
-declare interface Props_27 {
+declare interface Props_28 {
     /** Array of data objects */
     data: UnitChartDataType[];
     /** Title of the graph */
@@ -6373,7 +6508,7 @@ declare interface Props_27 {
     graphID?: string;
 }
 
-declare interface Props_28 {
+declare interface Props_29 {
     /** Array of data objects */
     data: HeatMapDataType[];
     /** Title of the graph */
@@ -6465,51 +6600,6 @@ declare interface Props_28 {
     graphID?: string;
 }
 
-declare interface Props_29 {
-    /** Array of data objects. If the data have a object for ket `rowStyle` then that is use to style the row of the table. */
-    data: object[];
-    /** Title of the graph */
-    graphTitle?: string | React.ReactNode;
-    /** Description of the graph */
-    graphDescription?: string | React.ReactNode;
-    /** Footnote for the graph */
-    footNote?: string | React.ReactNode;
-    /** Source data for the graph */
-    sources?: SourcesDataType[];
-    /** Accessibility label */
-    ariaLabel?: string;
-    /** Background color of the graph */
-    backgroundColor?: string | boolean;
-    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
-    styles?: StyleObject;
-    /** Custom class names */
-    classNames?: ClassNameObject;
-    /** Width of the graph */
-    width?: number;
-    /** Minimum width of the table as string in px */
-    minWidth?: string;
-    /** Height of the graph */
-    height?: number;
-    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
-    padding?: string;
-    /** Column settings for each column shown in the table. */
-    columnData: DataTableColumnDataType[];
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Defines how “NA” values should be displayed/labelled in the graph */
-    naLabel?: string;
-    /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
-    resetSelectionOnDoubleClick?: boolean;
-    /** Callback for mouse click event */
-    onSeriesMouseClick?: (_d: any) => void;
-    /** Language setting  */
-    language?: Languages;
-    /** Color theme */
-    theme?: 'light' | 'dark';
-    /** Unique ID for the graph */
-    graphID?: string;
-}
-
 declare interface Props_3 {
     /** Array of data objects */
     data: DonutChartDataType[];
@@ -6590,6 +6680,51 @@ declare interface Props_3 {
 }
 
 declare interface Props_30 {
+    /** Array of data objects. If the data have a object for ket `rowStyle` then that is use to style the row of the table. */
+    data: object[];
+    /** Title of the graph */
+    graphTitle?: string | React.ReactNode;
+    /** Description of the graph */
+    graphDescription?: string | React.ReactNode;
+    /** Footnote for the graph */
+    footNote?: string | React.ReactNode;
+    /** Source data for the graph */
+    sources?: SourcesDataType[];
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Background color of the graph */
+    backgroundColor?: string | boolean;
+    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
+    styles?: StyleObject;
+    /** Custom class names */
+    classNames?: ClassNameObject;
+    /** Width of the graph */
+    width?: number;
+    /** Minimum width of the table as string in px */
+    minWidth?: string;
+    /** Height of the graph */
+    height?: number;
+    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
+    padding?: string;
+    /** Column settings for each column shown in the table. */
+    columnData: DataTableColumnDataType[];
+    /** Specifies the number of decimal places to display in the value. */
+    precision?: number;
+    /** Defines how “NA” values should be displayed/labelled in the graph */
+    naLabel?: string;
+    /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
+    resetSelectionOnDoubleClick?: boolean;
+    /** Callback for mouse click event */
+    onSeriesMouseClick?: (_d: any) => void;
+    /** Language setting  */
+    language?: Languages;
+    /** Color theme */
+    theme?: 'light' | 'dark';
+    /** Unique ID for the graph */
+    graphID?: string;
+}
+
+declare interface Props_31 {
     /** Array of data objects */
     data: object[];
     /** Title of the graph */
@@ -6652,7 +6787,7 @@ declare interface Props_30 {
     graphID?: string;
 }
 
-declare interface Props_31 {
+declare interface Props_32 {
     /** Array of data objects */
     data: StripChartDataType[];
     /** Orientation of the graph */
@@ -6753,7 +6888,7 @@ declare interface Props_31 {
     graphID?: string;
 }
 
-declare interface Props_32 {
+declare interface Props_33 {
     /** Array of data objects */
     data: ParetoChartDataType[];
     /** Title of the graph */
@@ -6856,7 +6991,7 @@ declare interface Props_32 {
     graphID?: string;
 }
 
-declare interface Props_33 {
+declare interface Props_34 {
     /** Array of data objects */
     data: ButterflyChartDataType[];
     /** Title of the graph */
@@ -6957,7 +7092,7 @@ declare interface Props_33 {
     graphID?: string;
 }
 
-declare interface Props_34 {
+declare interface Props_35 {
     /** Array of data objects */
     data: HistogramDataType[];
     /** Type of the graph for histogram */
@@ -7044,7 +7179,7 @@ declare interface Props_34 {
     graphID?: string;
 }
 
-declare interface Props_35 {
+declare interface Props_36 {
     /** Array of data objects */
     data: SankeyDataType[];
     /** Title of the graph */
@@ -7145,7 +7280,7 @@ declare interface Props_35 {
     graphID?: string;
 }
 
-declare interface Props_36 {
+declare interface Props_37 {
     /** Array of data objects */
     data: RadarChartDataType[];
     /** Title of the graph */
@@ -7244,7 +7379,7 @@ declare interface Props_36 {
     graphID?: string;
 }
 
-declare interface Props_37 {
+declare interface Props_38 {
     dashboardID?: string;
     dashboardLayout: DashboardLayoutDataType;
     dataSettings: DataSettingsDataType;
@@ -7263,7 +7398,7 @@ declare interface Props_37 {
     graphClassNames?: ClassNameObject;
 }
 
-declare interface Props_38 {
+declare interface Props_39 {
     dashboardID?: string;
     dashboardLayout: PerformanceIntensiveDashboardLayoutDataType;
     dataSettings: DataSettingsDataType;
@@ -7282,22 +7417,6 @@ declare interface Props_38 {
     graphClassNames?: ClassNameObject;
 }
 
-declare interface Props_39 {
-    dashboardID?: string;
-    dashboardLayout: DashboardFromWideToLongFormatLayoutDataType;
-    dataSettings: DataSettingsWideToLongDataType;
-    debugMode?: boolean;
-    theme?: 'dark' | 'light';
-    readableHeader?: {
-        value: string;
-        label: string;
-    }[];
-    dataFilters?: DataFilterDataType[];
-    uiMode?: 'light' | 'normal';
-    graphStyles?: StyleObject;
-    graphClassNames?: ClassNameObject;
-}
-
 declare interface Props_4 {
     /** Array of data objects */
     data: DumbbellChartDataType[];
@@ -7426,6 +7545,22 @@ declare interface Props_4 {
 }
 
 declare interface Props_40 {
+    dashboardID?: string;
+    dashboardLayout: DashboardFromWideToLongFormatLayoutDataType;
+    dataSettings: DataSettingsWideToLongDataType;
+    debugMode?: boolean;
+    theme?: 'dark' | 'light';
+    readableHeader?: {
+        value: string;
+        label: string;
+    }[];
+    dataFilters?: DataFilterDataType[];
+    uiMode?: 'light' | 'normal';
+    graphStyles?: StyleObject;
+    graphClassNames?: ClassNameObject;
+}
+
+declare interface Props_41 {
     graphSettings?: GraphSettingsDataType;
     readableHeader?: {
         value: string;
@@ -7449,14 +7584,14 @@ declare interface Props_40 {
     updateFilters?: (_d: string) => void;
 }
 
-declare interface Props_41 {
+declare interface Props_42 {
     graphSettings?: GraphSettingsDataType;
     graphType: GeoHubGraphType;
     debugMode?: boolean;
     uiMode?: 'light' | 'normal';
 }
 
-declare interface Props_42 {
+declare interface Props_43 {
     graphSettings?: GraphSettingsDataType;
     readableHeader?: {
         value: string;
@@ -7480,7 +7615,7 @@ declare interface Props_42 {
     updateFilters?: (_d: string) => void;
 }
 
-declare interface Props_43 {
+declare interface Props_44 {
     noOfColumns?: number;
     columnGridBy: string;
     graphSettings?: GraphSettingsDataType;
@@ -7508,7 +7643,7 @@ declare interface Props_43 {
     theme?: 'dark' | 'light';
 }
 
-declare interface Props_44 {
+declare interface Props_45 {
     /** Defines if the information is shown as overlay or on the side */
     mode?: 'overlay' | 'side';
     /** Defines the width of the info section */
@@ -7523,7 +7658,7 @@ declare interface Props_44 {
     infoBackgroundColor?: string;
 }
 
-declare interface Props_45 {
+declare interface Props_46 {
     /** Defines if the information is shown as overlay or on the side */
     mode?: 'overlay' | 'side';
     /** Defines the width of the info section */
@@ -7538,20 +7673,16 @@ declare interface Props_45 {
     infoBackgroundColor?: string;
 }
 
-declare interface Props_46 {
-    config: string | ConfigObject;
-}
-
 declare interface Props_47 {
-    config: string | ConfigObject_2;
+    config: string | ConfigObject;
 }
 
 declare interface Props_48 {
-    config: string | ConfigObject_3;
+    config: string | ConfigObject_2;
 }
 
 declare interface Props_49 {
-    config: string | ConfigObject_4;
+    config: string | ConfigObject_3;
 }
 
 declare interface Props_5 {
@@ -7654,18 +7785,22 @@ declare interface Props_5 {
 }
 
 declare interface Props_50 {
-    config: string | ConfigObject_5;
+    config: string | ConfigObject_4;
 }
 
 declare interface Props_51 {
-    config: string | ConfigObject_6;
+    config: string | ConfigObject_5;
 }
 
 declare interface Props_52 {
-    config: string | ConfigObject_7;
+    config: string | ConfigObject_6;
 }
 
 declare interface Props_53 {
+    config: string | ConfigObject_7;
+}
+
+declare interface Props_54 {
     buttonContent?: string | JSX_2.Element;
     buttonType?: 'primary' | 'primary-without-icon' | 'secondary' | 'secondary-without-icon' | 'tertiary';
     csvData: any;
@@ -7677,7 +7812,7 @@ declare interface Props_53 {
     className?: string;
 }
 
-declare interface Props_54 {
+declare interface Props_55 {
     buttonContent?: string | JSX_2.Element;
     buttonType?: 'primary' | 'primary-without-icon' | 'secondary' | 'secondary-without-icon' | 'tertiary';
     nodeID: string | RefObject<HTMLDivElement | null>;
@@ -7686,7 +7821,7 @@ declare interface Props_54 {
     className?: string;
 }
 
-declare interface Props_55 {
+declare interface Props_56 {
     buttonContent?: string | JSX_2.Element;
     buttonType?: 'primary' | 'primary-without-icon' | 'secondary' | 'secondary-without-icon' | 'tertiary';
     nodeID: string | HTMLElement;
@@ -7695,7 +7830,7 @@ declare interface Props_55 {
     className?: string;
 }
 
-declare interface Props_56 {
+declare interface Props_57 {
     buttonContent?: string | JSX_2.Element;
     buttonType?: 'primary' | 'primary-without-icon' | 'secondary' | 'secondary-without-icon' | 'tertiary';
     csvData: any;
@@ -7706,7 +7841,7 @@ declare interface Props_56 {
     className?: string;
 }
 
-declare interface Props_57 {
+declare interface Props_58 {
     text: string;
     successMessage?: string;
     buttonText?: string;
@@ -7714,7 +7849,7 @@ declare interface Props_57 {
     className?: string;
 }
 
-declare interface Props_58 {
+declare interface Props_59 {
     colors: string[];
     colorDomain: (string | number)[];
     dashedLines?: (string | number)[];
@@ -7726,17 +7861,6 @@ declare interface Props_58 {
     className?: string;
 }
 
-declare interface Props_59 {
-    colors: string[];
-    colorDomain: (string | number)[];
-    colorLegendTitle?: string;
-    showNAColor: boolean;
-    setSelectedColor: (_d?: string) => void;
-    width?: number;
-    isCenter?: boolean;
-    className?: string;
-}
-
 declare interface Props_6 {
     /** Array of data objects */
     data: DualAxisLineChartDataType[];
@@ -7834,13 +7958,24 @@ declare interface Props_6 {
 
 declare interface Props_60 {
     colors: string[];
-    colorDomain: number[];
+    colorDomain: (string | number)[];
     colorLegendTitle?: string;
+    showNAColor: boolean;
+    setSelectedColor: (_d?: string) => void;
     width?: number;
+    isCenter?: boolean;
     className?: string;
 }
 
 declare interface Props_61 {
+    colors: string[];
+    colorDomain: number[];
+    colorLegendTitle?: string;
+    width?: number;
+    className?: string;
+}
+
+declare interface Props_62 {
     colors: string[];
     colorDomain: number[];
     colorLegendTitle?: string;
@@ -7851,7 +7986,7 @@ declare interface Props_61 {
     showNAColor: boolean;
 }
 
-declare interface Props_62 {
+declare interface Props_63 {
     footNote?: string | React.ReactNode;
     sources?: SourcesDataType[];
     width?: number;
@@ -7865,7 +8000,7 @@ declare interface Props_62 {
     };
 }
 
-declare interface Props_63 {
+declare interface Props_64 {
     graphTitle?: string | React.ReactNode;
     graphDescription?: string | React.ReactNode;
     width?: number;
@@ -7882,19 +8017,19 @@ declare interface Props_63 {
     };
 }
 
-declare interface Props_64 {
+declare interface Props_65 {
     text: string | default_2.ReactNode;
     style?: default_2.CSSProperties;
     className?: string;
 }
 
-declare interface Props_65 {
+declare interface Props_66 {
     text: string | default_2.ReactNode;
     style?: default_2.CSSProperties;
     className?: string;
 }
 
-declare interface Props_66 {
+declare interface Props_67 {
     text: string | default_2.ReactNode;
     isDashboard?: boolean;
     style?: default_2.CSSProperties;
@@ -8232,7 +8367,7 @@ declare interface Props_9 {
     graphID?: string;
 }
 
-export declare function RadarChart(props: Props_36): JSX.Element;
+export declare function RadarChart(props: Props_37): JSX.Element;
 
 declare interface RadarChartDataType {
     values: number[];
@@ -8270,7 +8405,7 @@ declare interface ReferenceDataType {
  */
 export declare function removeOutliers(data: number[], outlierThreshold?: number): number[];
 
-export declare function SankeyChart(props: Props_35): JSX.Element;
+export declare function SankeyChart(props: Props_36): JSX.Element;
 
 declare interface SankeyDataType {
     source: string | number;
@@ -8281,7 +8416,7 @@ declare interface SankeyDataType {
 
 declare type ScaleDataType = 'categorical' | 'linear' | 'threshold';
 
-export declare function ScatterPlot(props: Props_20): JSX.Element;
+export declare function ScatterPlot(props: Props_21): JSX.Element;
 
 declare interface ScatterPlotDataType {
     x?: number | null;
@@ -8294,7 +8429,7 @@ declare interface ScatterPlotDataType {
 }
 
 /** 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;
+export declare function ScrollStory(props: Props_45): JSX.Element;
 
 declare interface SectionsDataType {
     graphSettings?: GraphSettingsDataType;
@@ -8317,19 +8452,19 @@ export declare function SimpleBarGraph(props: Props): JSX.Element;
 
 export declare function SimpleLineChart(props: Props_8): JSX.Element;
 
-export declare function SingleGraphDashboard(props: Props_40): JSX.Element;
+export declare function SingleGraphDashboard(props: Props_41): JSX.Element;
 
-export declare function SingleGraphDashboardFromConfig(props: Props_49): JSX.Element;
+export declare function SingleGraphDashboardFromConfig(props: Props_50): JSX.Element;
 
-export declare function SingleGraphDashboardGeoHubMaps(props: Props_41): JSX.Element;
+export declare function SingleGraphDashboardGeoHubMaps(props: Props_42): JSX.Element;
 
-export declare function SingleGraphDashboardGeoHubMapsFromConfig(props: Props_50): JSX.Element;
+export declare function SingleGraphDashboardGeoHubMapsFromConfig(props: Props_51): JSX.Element;
 
-export declare function SingleGraphDashboardThreeDGraphs(props: Props_42): JSX.Element;
+export declare function SingleGraphDashboardThreeDGraphs(props: Props_43): JSX.Element;
 
-export declare function SingleGraphDashboardThreeDGraphsFromConfig(props: Props_51): JSX.Element;
+export declare function SingleGraphDashboardThreeDGraphsFromConfig(props: Props_52): JSX.Element;
 
-export declare function SlopeChart(props: Props_21): JSX.Element;
+export declare function SlopeChart(props: Props_22): JSX.Element;
 
 declare interface SlopeChartDataType {
     y1: number;
@@ -8485,14 +8620,14 @@ declare interface StackedBarChartProps {
 
 export declare function StackedBarGraph(props: StackedBarChartProps): JSX.Element;
 
-export declare function StatCardFromData(props: Props_25): JSX.Element;
+export declare function StatCardFromData(props: Props_26): JSX.Element;
 
 declare type StatCardsFromDataSheetDataType = {
     value: number | string;
     data?: object;
 };
 
-export declare function StripChart(props: Props_31): JSX.Element;
+export declare function StripChart(props: Props_32): JSX.Element;
 
 declare interface StripChartDataType {
     label: string | number;
@@ -8532,14 +8667,14 @@ declare interface StyleObject {
  */
 export declare function svgDownload(node: HTMLElement, filename: string): void;
 
-export declare function SVGDownloadButton(props: Props_55): JSX.Element;
+export declare function SVGDownloadButton(props: Props_56): 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 ThreeDGlobe(props: Props_17): JSX.Element;
 
 declare type ThreeDGraphType = 'threeDGlobe';
 
-export declare function ThresholdColorLegendWithMouseOver(props: Props_61): JSX.Element;
+export declare function ThresholdColorLegendWithMouseOver(props: Props_62): JSX.Element;
 
 declare interface TimelineDataType {
     autoplay: boolean;
@@ -8694,9 +8829,9 @@ declare interface TreeMapDataType {
     data?: object;
 }
 
-export declare function TreeMapGraph(props: Props_26): JSX.Element;
+export declare function TreeMapGraph(props: Props_27): JSX.Element;
 
-export declare function UnitChart(props: Props_27): JSX.Element | null;
+export declare function UnitChart(props: Props_28): JSX.Element | null;
 
 declare interface UnitChartDataType {
     label: number | string;