@undp/data-viz 1.3.0 → 1.4.0

package/dist/PerformanceIntensiveScrollStory.d.ts

@@ -0,0 +1,493 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare interface AnimateDataType {
+    duration: number;
+    once: boolean;
+    amount: 'some' | 'all' | number;
+}
+
+declare interface AnnotationSettingsDataType {
+    text: string;
+    maxWidth?: number;
+    xCoordinate?: number | string;
+    yCoordinate?: number | string;
+    xOffset?: number;
+    yOffset?: number;
+    align?: 'center' | 'left' | 'right';
+    color?: string;
+    fontWeight?: 'regular' | 'bold' | 'medium';
+    showConnector?: boolean | number;
+    connectorRadius?: number;
+    classNames?: {
+        connector?: string;
+        text?: string;
+    };
+    styles?: {
+        connector?: React.CSSProperties;
+        text?: React.CSSProperties;
+    };
+}
+
+declare interface AxesClassNameObject {
+    gridLines?: string;
+    labels?: string;
+    title?: string;
+    axis?: string;
+}
+
+declare interface AxesStyleObject {
+    gridLines?: React.CSSProperties;
+    labels?: React.CSSProperties;
+    title?: React.CSSProperties;
+    axis?: React.CSSProperties;
+}
+
+declare interface ClassNameObject {
+    title?: string;
+    footnote?: string;
+    source?: string;
+    description?: string;
+    tooltip?: string;
+    xAxis?: AxesClassNameObject;
+    yAxis?: AxesClassNameObject;
+    legend?: string;
+    graphContainer?: string;
+    graphObjectValues?: string;
+    dataConnectors?: string;
+    mouseOverLine?: string;
+    regLine?: string;
+    dataCards?: string;
+}
+
+declare interface ColumnConfigurationDataType {
+    column: string;
+    delimiter?: string;
+}
+
+declare type CurveTypes = 'linear' | 'curve' | 'step' | 'stepAfter' | 'stepBefore';
+
+declare interface CustomHighlightAreaSettingsDataType {
+    coordinates: (number | string)[];
+    closePath?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    color?: string;
+    strokeWidth?: number;
+}
+
+declare interface CustomLayerDataType {
+    position: 'before' | 'after';
+    layer: React.ReactNode;
+}
+
+declare interface 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 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 interface InfoBoxDataType {
+    title?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+}
+
+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 PerformanceIntensiveChaptersDataType {
+    dataSettings: DataSettingsDataType;
+    graphSettings: GraphSettingsDataType;
+    graphType: GraphType | GeoHubGraphType | ThreeDGraphType;
+    graphDataConfiguration?: GraphConfigurationDataType[];
+    sections: SectionsDataType[];
+}
+
+/** 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): JSX.Element;
+
+declare interface Props {
+    /** 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 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 SectionsDataType {
+    graphSettings?: GraphSettingsDataType;
+    graphDataConfiguration?: GraphConfigurationDataType[];
+    infoBox: InfoBoxDataType;
+}
+
+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/PerformanceIntensiveScrollStory.js

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

package/dist/PerformanceIntensiveScrollStory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceIntensiveScrollStory.js","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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"}

package/dist/RadarChart.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./index-CHPV5EwG-DDoeWRVt.cjs"),f=require("react"),xt=require("./index-CZbIGs8q.cjs"),wt=require("./index-BXns0-ng.cjs"),bt=require("./Modal-C_dl0EtQ.cjs"),Et=require("./Tooltip-n8z5bfav.cjs"),q=require("./Colors.cjs"),dt=require("./numberFormattingFunction-02t-wJta.cjs"),kt=require("./string2HTML-D2Avudmb.cjs"),N=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),Rt=require("./use-in-view-BCmzDU2O.cjs"),pt=require("./linear-BVckp9RD.cjs"),mt=require("./line-DHV4JwCR.cjs"),W=require("./proxy-PQd2AItT.cjs"),Ct=require("./index-DVOJ7vxH.cjs"),It=require("./GraphFooter.cjs"),St=require("./GraphHeader.cjs"),Nt=require("./EmptyState-d8_8SxeW.cjs"),Ot=require("./ColorLegendWithMouseOver.cjs");var Pt=gt(mt.curveLinear);function ft(t){this._curve=t}ft.prototype={areaStart:function(){this._curve.areaStart()},areaEnd:function(){this._curve.areaEnd()},lineStart:function(){this._curve.lineStart()},lineEnd:function(){this._curve.lineEnd()},point:function(t,e){this._curve.point(e*Math.sin(t),e*-Math.cos(t))}};function gt(t){function e(r){return new ft(t(r))}return e._curve=t,e}function Tt(t){var e=t.curve;return t.angle=t.x,delete t.x,t.radius=t.y,delete t.y,t.curve=function(r){return arguments.length?e(gt(r)):e()._curve},t}function $t(){return Tt(mt.line().curve(Pt))}function it(){}function ht(t,e,r){t._context.bezierCurveTo(t._x1+t._k*(t._x2-t._x0),t._y1+t._k*(t._y2-t._y0),t._x2+t._k*(t._x1-e),t._y2+t._k*(t._y1-r),t._x2,t._y2)}function _t(t,e){this._context=t,this._k=(1-e)/6}_t.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._x2=this._y0=this._y1=this._y2=NaN,this._point=0},lineEnd:function(){switch(this._point){case 2:this._context.lineTo(this._x2,this._y2);break;case 3:ht(this,this._x1,this._y1);break}(this._line||this._line!==0&&this._point===1)&&this._context.closePath(),this._line=1-this._line},point:function(t,e){switch(t=+t,e=+e,this._point){case 0:this._point=1,this._line?this._context.lineTo(t,e):this._context.moveTo(t,e);break;case 1:this._point=2,this._x1=t,this._y1=e;break;case 2:this._point=3;default:ht(this,t,e);break}this._x0=this._x1,this._x1=this._x2,this._x2=t,this._y0=this._y1,this._y1=this._y2,this._y2=e}};(function t(e){function r(c){return new _t(c,e)}return r.tension=function(c){return t(+c)},r})(0);function yt(t,e){this._context=t,this._k=(1-e)/6}yt.prototype={areaStart:it,areaEnd:it,lineStart:function(){this._x0=this._x1=this._x2=this._x3=this._x4=this._x5=this._y0=this._y1=this._y2=this._y3=this._y4=this._y5=NaN,this._point=0},lineEnd:function(){switch(this._point){case 1:{this._context.moveTo(this._x3,this._y3),this._context.closePath();break}case 2:{this._context.lineTo(this._x3,this._y3),this._context.closePath();break}case 3:{this.point(this._x3,this._y3),this.point(this._x4,this._y4),this.point(this._x5,this._y5);break}}},point:function(t,e){switch(t=+t,e=+e,this._point){case 0:this._point=1,this._x3=t,this._y3=e;break;case 1:this._point=2,this._context.moveTo(this._x4=t,this._y4=e);break;case 2:this._point=3,this._x5=t,this._y5=e;break;default:ht(this,t,e);break}this._x0=this._x1,this._x1=this._x2,this._x2=t,this._y0=this._y1,this._y1=this._y2,this._y2=e}};const qt=function t(e){function r(c){return new yt(c,e)}return r.tension=function(c){return t(+c)},r}(0);function vt(t){this._context=t}vt.prototype={areaStart:it,areaEnd:it,lineStart:function(){this._point=0},lineEnd:function(){this._point&&this._context.closePath()},point:function(t,e){t=+t,e=+e,this._point?this._context.lineTo(t,e):(this._point=1,this._context.moveTo(t,e))}};function Vt(t){return new vt(t)}function Dt(t){const{data:e,radius:r,lineColors:c,tooltip:k,onSeriesMouseOver:V,onSeriesMouseClick:M,colorDomain:u,detailsOnClick:j,styles:y,classNames:d,selectedColor:O,axisLabels:G,strokeWidth:et,showValues:nt,showDots:st,rightMargin:ot,topMargin:U,bottomMargin:rt,leftMargin:D,curveType:X,noOfTicks:Y,minValue:P,maxValue:T,resetSelectionOnDoubleClick:at,fillShape:h,highlightedLines:g,animate:x,dimmedOpacity:_,precision:R,customLayers:z}=t,B=f.useRef(null),$=Rt.useInView(B,{once:x.once,amount:x.amount}),w=X==="linear"?Vt:qt,b={top:U,left:D},v=Math.min((2*r-D-ot)/2,(2*r-U-rt)/2),[E,L]=f.useState(void 0),[C,A]=f.useState(void 0),[J,H]=f.useState(void 0),[K,F]=f.useState(void 0),l=pt.linear().domain([0,e[0].values.length]).range([0,2*Math.PI]),Q=N.checkIfNullOrUndefined(T)?Math.max(...e.map(i=>Math.max(...i.values.filter(s=>!N.checkIfNullOrUndefined(s)))))<0?0:Math.max(...e.map(i=>Math.max(...i.values.filter(s=>!N.checkIfNullOrUndefined(s))))):T,lt=N.checkIfNullOrUndefined(P)?Math.min(...e.map(i=>Math.min(...i.values.filter(s=>!N.checkIfNullOrUndefined(s)))))>=0?0:Math.min(...e.map(i=>Math.min(...i.values.filter(s=>!N.checkIfNullOrUndefined(s))))):P,p=pt.linear().domain([lt,Q]).range([0,v]).nice(),ct=p.ticks(Y),I=$t().radius(i=>p(i)).angle((i,s)=>l(s)).curve(w);return n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(W.motion.svg,{width:`${r*2}px`,height:`${r*2}px`,viewBox:`0 0 ${r*2} ${r*2}`,direction:"ltr",ref:B,children:n.jsxRuntimeExports.jsxs("g",{transform:`translate(${b.left},${b.top})`,children:[z.filter(i=>i.position==="before").map(i=>i.layer),n.jsxRuntimeExports.jsxs("g",{transform:`translate(${v},${v})`,children:[G.map((i,s)=>n.jsxRuntimeExports.jsxs("g",{children:[n.jsxRuntimeExports.jsx("line",{x1:0,y1:0,x2:Math.cos(l(s)-Math.PI/2)*v,y2:Math.sin(l(s)-Math.PI/2)*v,className:n.mo("stroke-1 stroke-primary-gray-500 dark:stroke-primary-gray-550",d?.xAxis?.axis),style:y?.xAxis?.axis},s),n.jsxRuntimeExports.jsx("text",{x:Math.cos(l(s)-Math.PI/2)*(v+6),y:Math.sin(l(s)-Math.PI/2)*(v+6),style:{textAnchor:Math.cos(l(s)-Math.PI/2)<0?"end":Math.cos(l(s)-Math.PI/2)<1e-5?"middle":"start",...y?.xAxis?.labels||""},dy:Math.sin(l(s)-Math.PI/2)<0?0:Math.sin(l(s)-Math.PI/2)<1e-5?5:10,className:n.mo("fill-primary-gray-700 dark:fill-primary-gray-300 text-xs",d?.xAxis?.labels),children:i})]},s)),ct.map((i,s)=>n.jsxRuntimeExports.jsxs("g",{children:[n.jsxRuntimeExports.jsx("path",{d:I(Array(G.length).fill(i))||"",className:n.mo("stroke-primary-gray-500 dark:stroke-primary-gray-550",d?.xAxis?.gridLines),style:{...y?.xAxis?.gridLines,fill:"none"}}),n.jsxRuntimeExports.jsx("foreignObject",{x:-25,y:Math.sin(-Math.PI/2)*p(i)>-1e-4?Math.sin(-Math.PI/2)*p(i)-7:Math.sin(-Math.PI/2)*p(i)-5,width:50,height:12,children:n.jsxRuntimeExports.jsx("div",{className:"flex justify-center",children:n.jsxRuntimeExports.jsx("p",{className:n.mo("fill-primary-gray-500 dark:fill-primary-gray-550 text-xs m-0 py-0 px-1.5 text-center leading-none bg-primary-white dark:bg-primary-gray-700",d?.xAxis?.labels),style:y?.xAxis?.labels,children:dt.numberFormattingFunction(i,"NA",R)})})})]},s)),n.jsxRuntimeExports.jsx(Ct.AnimatePresence,{children:e.map((i,s)=>n.jsxRuntimeExports.jsxs(W.motion.g,{variants:{initial:{opacity:E?i.label===E.label?1:_:O?i.color&&c[u.indexOf(i.color)]===O?1:_:g.length!==0?i.label&&g.indexOf(i.label)!==-1?1:.3:1},whileInView:{opacity:E?i.label===E.label?1:_:O?i.color&&c[u.indexOf(i.color)]===O?1:_:g.length!==0?i.label&&g.indexOf(i.label)!==-1?1:_:1,transition:{duration:x.duration}}},initial:"initial",animate:$?"whileInView":"initial",exit:{opacity:0,transition:{duration:x.duration}},onMouseEnter:a=>{L(i),F(a.clientY),H(a.clientX),V?.(i)},onMouseMove:a=>{L(i),F(a.clientY),H(a.clientX)},onMouseLeave:()=>{L(void 0),H(void 0),F(void 0),V?.(void 0)},onClick:()=>{(M||j)&&(wt.isEqual(C,i)&&at?(A(void 0),M?.(void 0)):(A(i),M?.(i)))},children:[n.jsxRuntimeExports.jsx(W.motion.path,{d:I(i.values)||"",variants:{initial:{d:I(i.values.map(a=>0))||""},whileInView:{d:I(i.values)||"",transition:{duration:x.duration}}},initial:"initial",animate:$?"whileInView":"initial",exit:{opacity:0,transition:{duration:x.duration}},style:{stroke:e.filter(a=>a.color).length===0?c[0]:i.color?c[u.indexOf(i.color)]:q.Colors.gray,fill:h?e.filter(a=>a.color).length===0?c[0]:i.color?c[u.indexOf(i.color)]:q.Colors.gray:"none",fillOpacity:.1,strokeWidth:et}}),n.jsxRuntimeExports.jsx("g",{children:i.values.map((a,m)=>n.jsxRuntimeExports.jsx("g",{children:N.checkIfNullOrUndefined(a)?null:n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[st?n.jsxRuntimeExports.jsx(W.motion.circle,{cx:Math.cos(l(m)-Math.PI/2)*p(a),cy:Math.sin(l(m)-Math.PI/2)*p(a),r:4,style:{fill:e.filter(Z=>Z.color).length===0?c[0]:i.color?c[u.indexOf(i.color)]:q.Colors.gray},variants:{initial:{cx:0,cy:0,opacity:0},whileInView:{cx:Math.cos(l(m)-Math.PI/2)*p(a),cy:Math.sin(l(m)-Math.PI/2)*p(a),opacity:1,transition:{duration:x.duration}}},initial:"initial",animate:$?"whileInView":"initial",exit:{opacity:0,transition:{duration:x.duration}}}):null,nt?n.jsxRuntimeExports.jsx(W.motion.text,{x:Math.cos(l(m)-Math.PI/2)*(p(a)+6),y:Math.sin(l(m)-Math.PI/2)*(p(a)+6),style:{fill:c[s],textAnchor:Math.cos(l(m)-Math.PI/2)<0?"end":Math.cos(l(m)-Math.PI/2)<1e-5?"middle":"start",...y?.graphObjectValues||{}},dy:Math.sin(l(m)-Math.PI/2)<0?10:(Math.sin(l(m)-Math.PI/2)<1e-5,0),className:n.mo("graph-value text-xs font-bold",d?.graphObjectValues),variants:{initial:{opacity:0},whileInView:{opacity:1,transition:{duration:x.duration}}},initial:"initial",animate:$?"whileInView":"initial",exit:{opacity:0,transition:{duration:x.duration}},children:dt.numberFormattingFunction(a,"NA",R)}):null]})},m))})]},i.label||s))})]}),z.filter(i=>i.position==="after").map(i=>i.layer)]})}),E&&k&&J&&K?n.jsxRuntimeExports.jsx(Et.Tooltip,{data:E,body:k,xPos:J,yPos:K,backgroundStyle:y?.tooltip,className:d?.tooltip}):null,j&&C!==void 0?n.jsxRuntimeExports.jsx(bt.X,{open:C!==void 0,onClose:()=>{A(void 0)},children:n.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof j=="string"?{__html:kt.string2HTML(j,C)}:void 0,children:typeof j=="function"?j(C):null})}):null]})}function Lt(t){const{graphTitle:e,colors:r,sources:c,graphDescription:k,footNote:V,radius:M,data:u,showColorScale:j=!0,padding:y,backgroundColor:d=!1,tooltip:O,onSeriesMouseOver:G,graphID:et,onSeriesMouseClick:nt,topMargin:st=75,bottomMargin:ot=75,leftMargin:U=75,rightMargin:rt=75,graphDownload:D=!1,dataDownload:X=!1,colorDomain:Y,language:P="en",theme:T="light",highlightedLines:at=[],width:h,height:g,minHeight:x=0,strokeWidth:_=2,relativeHeight:R,ariaLabel:z,colorLegendTitle:B,detailsOnClick:$,styles:w,classNames:b,showNAColor:v=!0,axisLabels:E,showDots:L=!0,showValues:C=!1,curveType:A="curve",noOfTicks:J=5,minValue:H,maxValue:K,fillShape:F=!1,resetSelectionOnDoubleClick:l=!0,animate:Q=!1,dimmedOpacity:lt=.3,precision:p=2,customLayers:ct=[]}=t,[I,i]=f.useState(0),[s,a]=f.useState(0),[m,Z]=f.useState(0),[Mt,jt]=f.useState(void 0),S=f.useRef(null),ut=f.useRef(null);return f.useEffect(()=>{const o=new ResizeObserver(tt=>{a(h||tt[0].target.clientWidth||420),Z(g||tt[0].target.clientHeight||420),i((Math.min(h||tt[0].target.clientWidth||620,g||tt[0].target.clientHeight||480)||420)/2)});return S.current&&(Z(S.current.clientHeight||420),a(S.current.clientWidth||420),i((Math.min(S.current.clientWidth,S.current.clientHeight)||420)/2),(!h||!M)&&o.observe(S.current)),()=>o.disconnect()},[h,g,M]),n.jsxRuntimeExports.jsx("div",{className:`${T||"light"} flex  ${h?"w-fit grow-0":"w-full grow"}`,dir:P==="he"||P==="ar"?"rtl":void 0,children:n.jsxRuntimeExports.jsx("div",{className:n.mo(`${d?d===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${P||"en"}`,b?.graphContainer),style:{...w?.graphContainer||{},minHeight:"inherit",...d&&d!==!0?{backgroundColor:d}:{}},id:et,ref:ut,"aria-label":z||`${e?`The graph shows ${e}. `:""}This is a donut or pie chart chart. ${k?` ${k}`:""}`,children:n.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:d?y||"1rem":y||0},children:n.jsxRuntimeExports.jsxs("div",{className:"flex flex-col gap-2 w-full grow justify-between",children:[e||k||D||X?n.jsxRuntimeExports.jsx(St.GraphHeader,{styles:{title:w?.title,description:w?.description},classNames:{title:b?.title,description:b?.description},graphTitle:e,graphDescription:k,width:h,graphDownload:D?ut.current:void 0,dataDownload:X?u.map(o=>o.data).filter(o=>o!==void 0).length>0?u.map(o=>o.data).filter(o=>o!==void 0):u.filter(o=>o!==void 0):null}):null,n.jsxRuntimeExports.jsx("div",{className:"flex grow flex-col justify-center items-stretch gap-8 flex-wrap",style:{width:h?`${h}px`:"100%"},children:u.length===0?n.jsxRuntimeExports.jsx(Nt.EmptyState,{}):n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[j&&u.filter(o=>o.color).length!==0?n.jsxRuntimeExports.jsx(Ot.ColorLegendWithMouseOver,{width:h,colorLegendTitle:B,colors:r||q.Colors[T].categoricalColors.colors,colorDomain:Y||xt.uniqBy(u.filter(o=>o.color),"color").map(o=>o.color),setSelectedColor:jt,showNAColor:v}):null,n.jsxRuntimeExports.jsx("div",{className:`flex ${h?"grow-0":"grow"} items-center justify-center leading-0`,style:{width:h?`${h}px`:"100%",height:g?`${Math.max(x,g||(R?x?(h||s)*R>x?(h||s)*R:x:(h||s)*R:m))}px`:"auto"},ref:S,"aria-label":"Graph area",children:n.jsxRuntimeExports.jsx("div",{className:"w-full flex justify-center leading-0",children:M||I?n.jsxRuntimeExports.jsx(Dt,{data:u,lineColors:u.filter(o=>o.color).length===0?r?[r]:[q.Colors.primaryColors["blue-600"]]:r||q.Colors[T].categoricalColors.colors,radius:M||I,tooltip:O,colorDomain:Y||xt.uniqBy(u.filter(o=>o.color),"color").map(o=>o.color),onSeriesMouseOver:G,onSeriesMouseClick:nt,styles:w,detailsOnClick:$,selectedColor:Mt,axisLabels:E,strokeWidth:_,showValues:C,showDots:L,topMargin:st,bottomMargin:ot,leftMargin:U,rightMargin:rt,curveType:A,noOfTicks:J,minValue:H,maxValue:K,fillShape:F,highlightedLines:at,resetSelectionOnDoubleClick:l,animate:Q===!0?{duration:.5,once:!0,amount:.5}:Q||{duration:0,once:!0,amount:0},dimmedOpacity:lt,precision:p,customLayers:ct}):null})})]})}),c||V?n.jsxRuntimeExports.jsx(It.GraphFooter,{styles:{footnote:w?.footnote,source:w?.source},classNames:{footnote:b?.footnote,source:b?.source},sources:c,footNote:V,width:h}):n.jsxRuntimeExports.jsx("div",{})]})})})})}exports.RadarChart=Lt;
+//# sourceMappingURL=RadarChart.cjs.map