@undp/data-viz 2.5.4 → 2.6.1

package/dist/ScrollStory.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./index-CHPV5EwG-D4pAp7u0.cjs"),N=require("react"),A=require("./SingleGraphDashboard.cjs"),G=require("./proxy-CqH8m8IQ.cjs"),W=require("./use-in-view-dnRv_qqF.cjs");function _(w){const t=c.compilerRuntimeExports.c(27),{chapters:i,visibilityThreshold:S,mode:v,infoWidth:m,infoPosition:j,infoBackgroundColor:f}=w,h=S===void 0?.5:S,n=v===void 0?"overlay":v,p=m===void 0?"320px":m,s=j===void 0?"left":j,C=f===void 0?"rgba(255,255,255,0.8)":f,[r,y]=N.useState(0);let e;t[0]!==i?(e=[],i.forEach((l,V)=>{l.sections.forEach((k,P)=>{e.push({chapter:V,dataSettings:l.dataSettings,section:P,graphType:l.graphType,infoBox:k.infoBox,graphSettings:{...l.graphSettings,...k.graphSettings||{},animate:!0},graphDataConfiguration:k.graphDataConfiguration||l.graphDataConfiguration||[]})})}),t[0]=i,t[1]=e):e=t[1];const o=e[r];let a,E,b;t[2]===Symbol.for("react.memo_cache_sentinel")?(a={opacity:0},E={opacity:1},b={duration:.5},t[2]=a,t[3]=E,t[4]=b):(a=t[2],E=t[3],b=t[4]);const D=n==="overlay"||s==="right"?0:p,T=n==="overlay"?"100%":`calc(100% - ${p})`;let g;t[5]!==T||t[6]!==D?(g={left:D,width:T},t[5]=T,t[6]=D,t[7]=g):g=t[7];const B=e[r].graphType,I=e[r],$=e[r],q=e[r];let d;t[8]!==B||t[9]!==I.dataSettings||t[10]!==$.graphSettings||t[11]!==q.graphDataConfiguration?(d=c.jsxRuntimeExports.jsx(A.SingleGraphDashboard,{graphType:B,dataSettings:I.dataSettings,graphSettings:$.graphSettings,graphDataConfiguration:q.graphDataConfiguration}),t[8]=B,t[9]=I.dataSettings,t[10]=$.graphSettings,t[11]=q.graphDataConfiguration,t[12]=d):d=t[12];let u;t[13]!==g||t[14]!==d||t[15]!==o.chapter?(u=c.jsxRuntimeExports.jsx(G.motion.div,{className:"fixed top-0 h-full -z-10",initial:a,animate:E,transition:b,style:g,children:d},o.chapter),t[13]=g,t[14]=d,t[15]=o.chapter,t[16]=u):u=t[16];let x;t[17]!==C||t[18]!==s||t[19]!==p||t[20]!==n||t[21]!==e||t[22]!==h?(x=c.jsxRuntimeExports.jsx("div",{children:e.map((l,V)=>c.jsxRuntimeExports.jsx(z,{width:p,index:V,infoBox:l.infoBox,setActiveIndex:y,position:s,mode:n,visibilityThreshold:h,backgroundColor:C},`${l.chapter}-${l.section}`))}),t[17]=C,t[18]=s,t[19]=p,t[20]=n,t[21]=e,t[22]=h,t[23]=x):x=t[23];let R;return t[24]!==u||t[25]!==x?(R=c.jsxRuntimeExports.jsxs("div",{className:"relative w-full h-full",children:[u,x]}),t[24]=u,t[25]=x,t[26]=R):R=t[26],R}function z(w){const t=c.compilerRuntimeExports.c(13),{infoBox:i,index:S,setActiveIndex:v,position:m,mode:j,visibilityThreshold:f,backgroundColor:h,width:n}=w,p=N.useRef(null);let s;t[0]!==f?(s={once:!1,amount:f},t[0]=f,t[1]=s):s=t[1],W.useInView(p,s)&&v(S);const r=`min-h-screen flex ${m==="center"?"justify-center":m==="right"?"justify-end":"justify-start"}`,y=`p-8 ${j==="overlay"?"h-fit mx-10 ":""}`;let e;t[2]!==h||t[3]!==n?(e={backgroundColor:h,width:n},t[2]=h,t[3]=n,t[4]=e):e=t[4];let o;t[5]!==i.description||t[6]!==i.title||t[7]!==y||t[8]!==e?(o=c.jsxRuntimeExports.jsxs("div",{className:y,style:e,children:[i.title,i.description]}),t[5]=i.description,t[6]=i.title,t[7]=y,t[8]=e,t[9]=o):o=t[9];let a;return t[10]!==r||t[11]!==o?(a=c.jsxRuntimeExports.jsx("section",{ref:p,className:r,children:o}),t[10]=r,t[11]=o,t[12]=a):a=t[12],a}exports.ScrollStory=_;
-//# sourceMappingURL=ScrollStory.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-gGpyby2o.cjs`);const e=require(`./jsx-runtime-Cd1vCQjn.cjs`),t=require(`./proxy-DaRMphjR.cjs`),n=require(`./use-in-view-C4EPQfwM.cjs`),r=require(`./SingleGraphDashboard.cjs`);let i=require(`react`);var a=e.t();function o(e){let{chapters:n,visibilityThreshold:o=.5,mode:c=`overlay`,infoWidth:l=`320px`,infoPosition:u=`left`,infoBackgroundColor:d=`rgba(255,255,255,0.8)`}=e,[f,p]=(0,i.useState)(0),m=[];return n.forEach((e,t)=>{e.sections.forEach((n,r)=>{m.push({chapter:t,dataSettings:e.dataSettings,section:r,graphType:e.graphType,infoBox:n.infoBox,graphSettings:{...e.graphSettings,...n.graphSettings||{},animate:!0},graphDataConfiguration:n.graphDataConfiguration||e.graphDataConfiguration||[]})})}),(0,a.jsxs)(`div`,{className:`relative w-full h-full`,children:[(0,a.jsx)(t.t.div,{className:`fixed top-0 h-full -z-10`,initial:{opacity:0},animate:{opacity:1},transition:{duration:.5},style:{left:c===`overlay`||u===`right`?0:l,width:c===`overlay`?`100%`:`calc(100% - ${l})`},children:(0,a.jsx)(r.SingleGraphDashboard,{graphType:m[f].graphType,dataSettings:m[f].dataSettings,graphSettings:m[f].graphSettings,graphDataConfiguration:m[f].graphDataConfiguration})},m[f].chapter),(0,a.jsx)(`div`,{children:m.map((e,t)=>(0,a.jsx)(s,{width:l,index:t,infoBox:e.infoBox,setActiveIndex:p,position:u,mode:c,visibilityThreshold:o,backgroundColor:d},`${e.chapter}-${e.section}`))})]})}function s({infoBox:e,index:t,setActiveIndex:r,position:o,mode:s,visibilityThreshold:c,backgroundColor:l,width:u}){let d=(0,i.useRef)(null);return n.t(d,{once:!1,amount:c})&&r(t),(0,a.jsx)(`section`,{ref:d,className:`min-h-screen flex ${o===`center`?`justify-center`:o===`right`?`justify-end`:`justify-start`}`,children:(0,a.jsxs)(`div`,{className:`p-8 ${s===`overlay`?`h-fit mx-10 `:``}`,style:{backgroundColor:l,width:u},children:[e.title,e.description]})})}exports.ScrollStory=o;
+//# sourceMappingURL=ScrollStory.cjs.map

package/dist/ScrollStory.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollStory.cjs","sources":["../src/Components/Dashboard/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 {\r\n  ChaptersDataType,\r\n  GraphTypeForGriddedGraph,\r\n  InfoBoxDataType,\r\n  SectionsArrDataType,\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: ChaptersDataType[];\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. This does not include GeoHub maps and 3-D graph; for those please use `PerformanceIntensiveScrollStory`. */\r\nexport function ScrollStory(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 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        <SingleGraphDashboard\r\n          graphType={sectionsArr[activeIndex].graphType as GraphTypeForGriddedGraph}\r\n          dataSettings={sectionsArr[activeIndex].dataSettings}\r\n          graphSettings={sectionsArr[activeIndex].graphSettings}\r\n          graphDataConfiguration={sectionsArr[activeIndex].graphDataConfiguration}\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":["ScrollStory","props","$","_c","chapters","visibilityThreshold","t0","mode","t1","infoWidth","t2","infoPosition","t3","infoBackgroundColor","t4","undefined","activeIndex","setActiveIndex","useState","sectionsArr","forEach","d","i","sections","s","j","push","chapter","dataSettings","section","graphType","infoBox","graphSettings","animate","graphDataConfiguration","t5","t6","t7","t8","Symbol","for","opacity","duration","t9","t10","t11","left","width","t12","t13","t14","t15","t16","jsx","SingleGraphDashboard","t17","t18","map","idx","ScrollySection","t19","jsxs","index","position","backgroundColor","ref","useRef","once","amount","useInView","description","title"],"mappings":"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"}
+{"version":3,"file":"ScrollStory.cjs","names":[],"sources":["../src/Components/Dashboard/ScrollStory.tsx"],"sourcesContent":["// Scrollytelling.tsx\nimport { motion, useInView } from 'motion/react';\nimport { useRef, useState } from 'react';\nimport type {\n  ChaptersDataType,\n  GraphTypeForGriddedGraph,\n  InfoBoxDataType,\n  SectionsArrDataType,\n} from '@/Types';\nimport { SingleGraphDashboard } from './SingleGraphDashboard';\n\ninterface Props {\n  /** Defines if the information is shown as overlay or on the side */\n  mode?: 'overlay' | 'side';\n  /** Defines the width of the info section */\n  infoWidth?: string;\n  /** Defined the different chapters for the story and different sections within the story  */\n  chapters: ChaptersDataType[];\n  /** Position of info on the page */\n  infoPosition?: 'left' | 'right' | 'center';\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 */\n  visibilityThreshold?: number;\n  /** Sets background color of the info box. */\n  infoBackgroundColor?: string;\n}\n\n/** 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`. */\nexport function ScrollStory(props: Props) {\n  const {\n    chapters,\n    visibilityThreshold = 0.5,\n    mode = 'overlay',\n    infoWidth = '320px',\n    infoPosition = 'left',\n    infoBackgroundColor = 'rgba(255,255,255,0.8)',\n  } = props;\n  const [activeIndex, setActiveIndex] = useState(0);\n  const sectionsArr: SectionsArrDataType[] = [];\n  chapters.forEach((d, i) => {\n    d.sections.forEach((s, j) => {\n      sectionsArr.push({\n        chapter: i,\n        dataSettings: d.dataSettings,\n        section: j,\n        graphType: d.graphType,\n        infoBox: s.infoBox,\n        graphSettings: { ...d.graphSettings, ...(s.graphSettings || {}), animate: true },\n        graphDataConfiguration: s.graphDataConfiguration || d.graphDataConfiguration || [],\n      });\n    });\n  });\n  return (\n    <div className='relative w-full h-full'>\n      {/* Background Layer */}\n      <motion.div\n        key={sectionsArr[activeIndex].chapter}\n        className='fixed top-0 h-full -z-10'\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        transition={{ duration: 0.5 }}\n        style={{\n          left: mode === 'overlay' ? 0 : infoPosition === 'right' ? 0 : infoWidth,\n          width: mode === 'overlay' ? '100%' : `calc(100% - ${infoWidth})`,\n        }}\n      >\n        <SingleGraphDashboard\n          graphType={sectionsArr[activeIndex].graphType as GraphTypeForGriddedGraph}\n          dataSettings={sectionsArr[activeIndex].dataSettings}\n          graphSettings={sectionsArr[activeIndex].graphSettings}\n          graphDataConfiguration={sectionsArr[activeIndex].graphDataConfiguration}\n        />\n      </motion.div>\n      <div>\n        {sectionsArr.map((section, idx) => (\n          <ScrollySection\n            width={infoWidth}\n            key={`${section.chapter}-${section.section}`}\n            index={idx}\n            infoBox={section.infoBox}\n            setActiveIndex={setActiveIndex}\n            position={infoPosition}\n            mode={mode}\n            visibilityThreshold={visibilityThreshold}\n            backgroundColor={infoBackgroundColor}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction ScrollySection({\n  infoBox,\n  index,\n  setActiveIndex,\n  position,\n  mode,\n  visibilityThreshold,\n  backgroundColor,\n  width,\n}: {\n  infoBox: InfoBoxDataType;\n  index: number;\n  setActiveIndex: (idx: number) => void;\n  position: 'left' | 'right' | 'center';\n  mode: 'overlay' | 'side';\n  visibilityThreshold: number;\n  backgroundColor: string;\n  width: string;\n}) {\n  const ref = useRef(null);\n  const isInView = useInView(ref, {\n    once: false,\n    amount: visibilityThreshold,\n  });\n  if (isInView) setActiveIndex(index);\n  return (\n    <section\n      ref={ref}\n      className={`min-h-screen flex ${position === 'center' ? 'justify-center' : position === 'right' ? 'justify-end' : 'justify-start'}`}\n    >\n      <div\n        className={`p-8 ${mode === 'overlay' ? 'h-fit mx-10 ' : ''}`}\n        style={{\n          backgroundColor,\n          width,\n        }}\n      >\n        {infoBox.title}\n        {infoBox.description}\n      </div>\n    </section>\n  );\n}\n"],"mappings":"sSA2BA,SAAgB,EAAY,EAAc,CACxC,GAAM,CACJ,WACA,sBAAsB,GACtB,OAAO,UACP,YAAY,QACZ,eAAe,OACf,sBAAsB,yBACpB,EACE,CAAC,EAAa,IAAA,EAAA,EAAA,UAA2B,CAAC,EAC1C,EAAqC,CAAC,EAc5C,OAbA,EAAS,SAAS,EAAG,IAAM,CACzB,EAAE,SAAS,SAAS,EAAG,IAAM,CAC3B,EAAY,KAAK,CACf,QAAS,EACT,aAAc,EAAE,aAChB,QAAS,EACT,UAAW,EAAE,UACb,QAAS,EAAE,QACX,cAAe,CAAE,GAAG,EAAE,cAAe,GAAI,EAAE,eAAiB,CAAC,EAAI,QAAS,EAAK,EAC/E,uBAAwB,EAAE,wBAA0B,EAAE,wBAA0B,CAAC,CACnF,CAAC,CACH,CAAC,CACH,CAAC,GAEC,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kCAAf,EAEE,EAAA,EAAA,KAAC,EAAA,EAAO,IAAR,CAEE,UAAU,2BACV,QAAS,CAAE,QAAS,CAAE,EACtB,QAAS,CAAE,QAAS,CAAE,EACtB,WAAY,CAAE,SAAU,EAAI,EAC5B,MAAO,CACL,KAAM,IAAS,WAAgB,IAAiB,QAArB,EAAmC,EAC9D,MAAO,IAAS,UAAY,OAAS,eAAe,EAAU,EAChE,YAEA,EAAA,EAAA,KAAC,EAAA,qBAAD,CACE,UAAW,EAAY,GAAa,UACpC,aAAc,EAAY,GAAa,aACvC,cAAe,EAAY,GAAa,cACxC,uBAAwB,EAAY,GAAa,sBAClD,CAAA,CACS,EAhBL,EAAY,GAAa,OAgBpB,GACZ,EAAA,EAAA,KAAC,MAAD,CAAA,SACG,EAAY,KAAK,EAAS,KACzB,EAAA,EAAA,KAAC,EAAD,CACE,MAAO,EAEP,MAAO,EACP,QAAS,EAAQ,QACD,iBAChB,SAAU,EACJ,OACe,sBACrB,gBAAiB,CAClB,EARM,GAAG,EAAQ,QAAQ,GAAG,EAAQ,SAQpC,CACF,CACE,CAAA,CACF,GAET,CAEA,SAAS,EAAe,CACtB,UACA,QACA,iBACA,WACA,OACA,sBACA,kBACA,SAUC,CACD,IAAM,GAAA,EAAA,EAAA,QAAa,IAAI,EAMvB,OALiB,EAAA,EAAU,EAAK,CAC9B,KAAM,GACN,OAAQ,CACV,CACI,GAAU,EAAe,CAAK,GAEhC,EAAA,EAAA,KAAC,UAAD,CACO,MACL,UAAW,qBAAqB,IAAa,SAAW,iBAAmB,IAAa,QAAU,cAAgB,4BAElH,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,OAAO,IAAS,UAAY,eAAiB,KACxD,MAAO,CACL,kBACA,OACF,WALF,CAOG,EAAQ,MACR,EAAQ,WACN,GACE,CAAA,CAEb"}

package/dist/ScrollStory.d.ts

@@ -1,591 +1,2 @@
-import { FeatureCollection } from 'geojson';
-import { JSX } from 'react/jsx-runtime';
-import { ReactElement } from 'react';
-
-declare interface AmbientLightConfig extends BaseLightConfig {
-    type: 'ambient';
-}
-
-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 BaseLightConfig {
-    type: string;
-    color: number;
-    intensity: number;
-}
-
-declare interface ChaptersDataType {
-    dataSettings: DataSettingsDataType;
-    graphSettings: GraphSettingsDataType;
-    graphType: GraphType;
-    graphDataConfiguration?: GraphConfigurationDataType[];
-    sections: SectionsDataType[];
-}
-
-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;
-    colorLegend?: string;
-    modal?: 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;
-    locale?: string;
-    precision?: number;
-    padZeros?: boolean;
-    columnWidth?: number;
-}
-
-declare interface DirectionalLightConfig extends BaseLightConfig {
-    type: 'directional';
-    target?: Position;
-    castShadow?: boolean;
-    shadow?: ShadowConfig;
-    position?: Position | 'camera';
-}
-
-declare interface FileSettingsDataType {
-    dataURL: string;
-    idColumnName: string;
-    fileType?: 'csv' | 'json' | 'api';
-    delimiter?: string;
-    columnsToArray?: ColumnConfigurationDataType[];
-    apiHeaders?: any;
-    dataTransformation?: string;
-}
-
-declare interface FogDataType {
-    color: string;
-    near: number;
-    far: number;
-}
-
-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;
-    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 | {
-        label: string;
-        suffix?: string;
-        prefix?: string;
-        locale?: string;
-        padZeros?: boolean;
-        precision?: number;
-    } | ReactElement;
-    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?: FeatureCollection | string;
-    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;
-    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;
-    customLayers?: CustomLayerDataType[];
-    dashedLines?: (string | number)[];
-    dashSettings?: string[];
-    labelsToBeHidden?: (string | number)[];
-    autoRotate?: boolean;
-    enableZoom?: boolean;
-    globeMaterial?: any;
-    atmosphereColor?: string;
-    lineAxisTitle?: string;
-    timeline?: TimelineDataType;
-    naLabel?: string;
-    globeOffset?: [number, number];
-    polygonAltitude?: number;
-    atmosphereAltitude?: number;
-    globeCurvatureResolution?: number;
-    lights?: LightConfig[];
-    fogSetting?: FogDataType;
-    showAxisLabels?: boolean;
-    highlightedAltitude?: number;
-    selectedId?: string;
-    collapseColorScaleByDefault?: boolean;
-    dotLegendTitle?: string;
-    dotColor?: string;
-    dotBorderColor?: string;
-    mapColorLegendTitle?: string;
-    choroplethScaleType?: Exclude<ScaleDataType, 'linear'>;
-    trackColor?: string;
-    zoomAndCenterByHighlightedIds?: boolean;
-    hideAxisLine?: boolean;
-    projectionRotate?: [number, number] | [number, number, number];
-    rewindCoordinatesInMapData?: boolean;
-    circularBoundary?: boolean;
-    showDataMinMax?: boolean;
-    showVoronoiTesselation?: boolean;
-    mapOverlay?: MapOverlayDataType;
-    useVoronoiInteraction?: boolean;
-    numberDisplayOptions?: NumberFormatOptions;
-    leftLineNumberDisplayOptions?: NumberFormatOptions;
-    rightLineNumberDisplayOptions?: NumberFormatOptions;
-    barNumberDisplayOptions?: NumberFormatOptions;
-    lineNumberDisplayOptions?: NumberFormatOptions;
-    xNumberDisplayOptions?: NumberFormatOptions;
-    yNumberDisplayOptions?: NumberFormatOptions;
-    defaultColor?: string;
-}
-
-declare type GraphType = GraphTypeForGriddedGraph;
-
-declare type GraphTypeForGriddedGraph = 'barChart' | 'waterfallChart' | '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';
-
-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' | 'ja' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
-
-declare type LightConfig = AmbientLightConfig | DirectionalLightConfig | PointLightConfig | SpotLightConfig;
-
-declare interface MapLegendDataType {
-    mapStyleName: string;
-    legend: string | React.ReactNode;
-}
-
-declare interface MapOverlayDataType {
-    mapData: FeatureCollection | string;
-    mapBorderWidth?: number;
-    mapBorderColor?: string;
-}
-
-declare type MapProjectionTypes = 'mercator' | 'equalEarth' | 'naturalEarth' | 'orthographic' | 'albersUSA';
-
-declare interface NumberFormatOptions {
-    locale?: string;
-    precision?: number;
-    prefix?: string;
-    suffix?: string;
-    padZeros?: boolean;
-}
-
-declare interface PointLightConfig extends BaseLightConfig {
-    type: 'point';
-    distance?: number;
-    decay?: number;
-    position?: Position | 'camera';
-}
-
-declare interface Position {
-    x: number;
-    y: number;
-    z: number;
-}
-
-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: ChaptersDataType[];
-    /** 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';
-
-/** 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): JSX.Element;
-
-declare interface SectionsDataType {
-    graphSettings?: GraphSettingsDataType;
-    graphDataConfiguration?: GraphConfigurationDataType[];
-    infoBox: InfoBoxDataType;
-}
-
-declare interface ShadowConfig {
-    mapSize: {
-        width: number;
-        height: number;
-    };
-    camera: {
-        near: number;
-        far: number;
-    };
-}
-
-declare interface SourcesDataType {
-    source: string;
-    link?: string;
-}
-
-declare interface SpotLightConfig extends BaseLightConfig {
-    type: 'spot';
-    target?: Position;
-    distance?: number;
-    angle?: number;
-    penumbra?: number;
-    decay?: number;
-    castShadow?: boolean;
-    shadow?: ShadowConfig;
-    position?: Position | 'camera';
-}
-
-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;
-    modal?: React.CSSProperties;
-}
-
-declare interface TimelineDataType {
-    autoplay: boolean;
-    enabled: boolean;
-    showOnlyActiveDate: boolean;
-    speed?: number;
-    dateFormat?: string;
-}
-
-declare type ZoomInteractionTypes = 'scroll' | 'ctrlScroll' | 'button' | 'noZoom';
-
-export { }
+export * from './Components/Dashboard/ScrollStory'
+export {}