{"version":3,"file":"PerformanceIntensiveScrollStory.cjs","names":[],"sources":["../src/Components/Dashboard/PerformanceIntensive/ScrollStory.tsx"],"sourcesContent":["// Scrollytelling.tsx\r\nimport { motion, useInView } from 'motion/react';\r\nimport { useRef, useState } from 'react';\r\nimport type {\r\n  GeoHubGraphType,\r\n  GraphType,\r\n  InfoBoxDataType,\r\n  PerformanceIntensiveChaptersDataType,\r\n  SectionsArrDataType,\r\n  ThreeDGraphType,\r\n} from '@/Types';\r\nimport { SingleGraphDashboard } from '../SingleGraphDashboard';\r\nimport { SingleGraphDashboardGeoHubMaps } from './SingleGraphDashboardGeoHubMaps';\r\nimport { SingleGraphDashboardThreeDGraphs } from './SingleGraphDashboardThreeDGraphs';\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"],"mappings":"yYA+BA,SAAgB,EAAgC,EAAc,CAC5D,GAAM,CACJ,WACA,sBAAsB,GACtB,OAAO,UACP,YAAY,QACZ,eAAe,OACf,sBAAsB,yBACpB,EACE,CAAC,EAAa,IAAA,EAAA,EAAA,UAA2B,CAAC,EAC1C,EAAe,CAAC,aAAa,EAC7B,EAAa,CAAC,mBAAoB,YAAa,6BAA6B,EAC5E,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,WAEC,EAAa,SAAS,EAAY,GAAa,SAAS,GACvD,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,UAAW,EAAY,GAAa,UACpC,aAAc,EAAY,GAAa,aACvC,cAAe,EAAY,GAAa,cACxC,uBAAwB,EAAY,GAAa,sBAClD,CAAA,EACC,EAAW,SAAS,EAAY,GAAa,SAAS,GACxD,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,UAAW,EAAY,GAAa,UACpC,cAAe,EAAY,GAAa,aACzC,CAAA,GAED,EAAA,EAAA,KAAC,EAAA,qBAAD,CACE,UAAW,EAAY,GAAa,UACpC,aAAc,EAAY,GAAa,aACvC,cAAe,EAAY,GAAa,cACxC,uBAAwB,EAAY,GAAa,sBAClD,CAAA,CAEO,EA9BL,EAAY,GAAa,OA8BpB,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"}