@undp/data-viz 2.6.0 → 2.6.1

package/dist/PerformanceIntensiveMultiGraphDashboardFromConfig.js

@@ -1,29 +1,36 @@
-import { c as h, j as d } from "./compiler-runtime-qHgugrLy.js";
-import { useState as m, useEffect as c } from "react";
-import { Spinner as g } from "@undp/design-system-react/Spinner";
-import { PerformanceIntensiveMultiGraphDashboard as u } from "./PerformanceIntensiveMultiGraphDashboard.js";
-import { b as p } from "./fetchAndParseData-CDjQZ1fL.js";
-function F(n) {
-  const t = h.c(18), {
-    config: a
-  } = n, [e, l] = m(void 0);
-  let s, o;
-  if (t[0] !== a ? (s = () => {
-    (async () => {
-      if (typeof a == "string") {
-        const f = await p(a);
-        l(f);
-      } else
-        l(a);
-    })();
-  }, o = [a], t[0] = a, t[1] = s, t[2] = o) : (s = t[1], o = t[2]), c(s, o), !e) {
-    let r;
-    return t[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (r = /* @__PURE__ */ d.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ d.jsx(g, {}) }), t[3] = r) : r = t[3], r;
-  }
-  let i;
-  return t[4] !== e.dashboardID || t[5] !== e.dashboardLayout || t[6] !== e.dataFilters || t[7] !== e.dataSettings || t[8] !== e.debugMode || t[9] !== e.filterPosition || t[10] !== e.filters || t[11] !== e.graphClassNames || t[12] !== e.graphStyles || t[13] !== e.noOfFiltersPerRow || t[14] !== e.readableHeader || t[15] !== e.theme || t[16] !== e.uiMode ? (i = /* @__PURE__ */ d.jsx(u, { dashboardID: e.dashboardID, dashboardLayout: e.dashboardLayout, dataSettings: e.dataSettings, filters: e.filters, debugMode: e.debugMode, theme: e.theme, readableHeader: e.readableHeader, dataFilters: e.dataFilters, noOfFiltersPerRow: e.noOfFiltersPerRow, filterPosition: e.filterPosition, uiMode: e.uiMode, graphStyles: e.graphStyles, graphClassNames: e.graphClassNames }), t[4] = e.dashboardID, t[5] = e.dashboardLayout, t[6] = e.dataFilters, t[7] = e.dataSettings, t[8] = e.debugMode, t[9] = e.filterPosition, t[10] = e.filters, t[11] = e.graphClassNames, t[12] = e.graphStyles, t[13] = e.noOfFiltersPerRow, t[14] = e.readableHeader, t[15] = e.theme, t[16] = e.uiMode, t[17] = i) : i = t[17], i;
+import { t as e } from "./jsx-runtime-C76bEyh7.js";
+import { r as t } from "./fetchAndParseData-C50SqMPu.js";
+import { PerformanceIntensiveMultiGraphDashboard as n } from "./PerformanceIntensiveMultiGraphDashboard.js";
+import { useEffect as r, useState as i } from "react";
+import { Spinner as a } from "@undp/design-system-react/Spinner";
+//#region src/Components/Dashboard/PerformanceIntensive/MultiGraphDashboardFromConfig.tsx
+var o = e();
+function s(e) {
+	let { config: s } = e, [c, l] = i(void 0);
+	return r(() => {
+		(async () => {
+			l(typeof s == "string" ? await t(s) : s);
+		})();
+	}, [s]), c ? /* @__PURE__ */ (0, o.jsx)(n, {
+		dashboardID: c.dashboardID,
+		dashboardLayout: c.dashboardLayout,
+		dataSettings: c.dataSettings,
+		filters: c.filters,
+		debugMode: c.debugMode,
+		theme: c.theme,
+		readableHeader: c.readableHeader,
+		dataFilters: c.dataFilters,
+		noOfFiltersPerRow: c.noOfFiltersPerRow,
+		filterPosition: c.filterPosition,
+		uiMode: c.uiMode,
+		graphStyles: c.graphStyles,
+		graphClassNames: c.graphClassNames
+	}) : /* @__PURE__ */ (0, o.jsx)("div", {
+		className: "w-full flex justify-center p-4",
+		children: /* @__PURE__ */ (0, o.jsx)(a, {})
+	});
 }
-export {
-  F as PerformanceIntensiveMultiGraphDashboardFromConfig
-};
-//# sourceMappingURL=PerformanceIntensiveMultiGraphDashboardFromConfig.js.map
+//#endregion
+export { s as PerformanceIntensiveMultiGraphDashboardFromConfig };
+
+//# sourceMappingURL=PerformanceIntensiveMultiGraphDashboardFromConfig.js.map

package/dist/PerformanceIntensiveMultiGraphDashboardFromConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"PerformanceIntensiveMultiGraphDashboardFromConfig.js","sources":["../src/Components/Dashboard/PerformanceIntensive/MultiGraphDashboardFromConfig.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { PerformanceIntensiveMultiGraphDashboard } from './MultiGraphDashboard';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DataFilterDataType,\r\n  DataSettingsDataType,\r\n  FilterUiSettingsDataType,\r\n  PerformanceIntensiveDashboardLayoutDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\n\r\ninterface ConfigObject {\r\n  dashboardID?: string;\r\n  dashboardLayout: PerformanceIntensiveDashboardLayoutDataType;\r\n  dataSettings: DataSettingsDataType;\r\n  filters?: FilterUiSettingsDataType[];\r\n  noOfFiltersPerRow?: number;\r\n  filterPosition?: 'top' | 'side';\r\n  debugMode?: boolean;\r\n  theme?: 'dark' | 'light';\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  dataFilters?: DataFilterDataType[];\r\n  uiMode?: 'light' | 'normal';\r\n  graphStyles?: StyleObject;\r\n  graphClassNames?: ClassNameObject;\r\n}\r\n\r\ninterface Props {\r\n  config: string | ConfigObject;\r\n}\r\n\r\nexport function PerformanceIntensiveMultiGraphDashboardFromConfig(props: Props) {\r\n  const { config } = props;\r\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\r\n  useEffect(() => {\r\n    const fetchData = async () => {\r\n      if (typeof config === 'string') {\r\n        const data = await fetchAndParseJSON(config);\r\n        setConfigSettings(data);\r\n      } else {\r\n        setConfigSettings(config);\r\n      }\r\n    };\r\n    fetchData();\r\n  }, [config]);\r\n  if (!configSettings)\r\n    return (\r\n      <div className='w-full flex justify-center p-4'>\r\n        <Spinner />\r\n      </div>\r\n    );\r\n  return (\r\n    <PerformanceIntensiveMultiGraphDashboard\r\n      dashboardID={configSettings.dashboardID}\r\n      dashboardLayout={configSettings.dashboardLayout}\r\n      dataSettings={configSettings.dataSettings}\r\n      filters={configSettings.filters}\r\n      debugMode={configSettings.debugMode}\r\n      theme={configSettings.theme}\r\n      readableHeader={configSettings.readableHeader}\r\n      dataFilters={configSettings.dataFilters}\r\n      noOfFiltersPerRow={configSettings.noOfFiltersPerRow}\r\n      filterPosition={configSettings.filterPosition}\r\n      uiMode={configSettings.uiMode}\r\n      graphStyles={configSettings.graphStyles}\r\n      graphClassNames={configSettings.graphClassNames}\r\n    />\r\n  );\r\n}\r\n"],"names":["PerformanceIntensiveMultiGraphDashboardFromConfig","props","$","_c","config","configSettings","setConfigSettings","useState","undefined","t0","t1","fetchData","data","fetchAndParseJSON","useEffect","t2","Symbol","for","jsx","Spinner","dashboardID","dashboardLayout","dataFilters","dataSettings","debugMode","filterPosition","filters","graphClassNames","graphStyles","noOfFiltersPerRow","readableHeader","theme","uiMode","PerformanceIntensiveMultiGraphDashboard"],"mappings":";;;;;AAsCO,SAAAA,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAAA,EAAA,EAAA,GACL;AAAA,IAAAC,QAAAA;AAAAA,EAAAA,IAAmBH,GACnB,CAAAI,GAAAC,CAAA,IAA4CC,EAAmCC,MAAS;AAAE,MAAAC,GAAAC;AAY1F,MAZ0FR,SAAAE,KAChFK,IAAAA,MAAA;AASRE,KARkB,YAAA;AAChB,UAAI,OAAOP,KAAW,UAAQ;AAC5B,cAAAQ,IAAa,MAAMC,EAAkBT,CAAM;AAC3CE,QAAAA,EAAkBM,CAAI;AAAA,MAAC;AAEvBN,QAAAA,EAAkBF,CAAM;AAAA,IACzB,GAEHO;AAAAA,EAAW,GACVD,IAAA,CAACN,CAAM,GAACF,OAAAE,GAAAF,OAAAO,GAAAP,OAAAQ,MAAAD,IAAAP,EAAA,CAAA,GAAAQ,IAAAR,EAAA,CAAA,IAVXY,EAAUL,GAUPC,CAAQ,GACP,CAACL,GAAc;AAAA,QAAAU;AAAA,WAAAb,EAAA,CAAA,MAAAc,uBAAAC,IAAA,2BAAA,KAEfF,IAAAG,gBAAAA,EAAAA,IAAA,OAAA,EAAe,WAAA,kCACb,UAAAA,gBAAAA,MAACC,KAAO,GACV,GAAMjB,OAAAa,KAAAA,IAAAb,EAAA,CAAA,GAFNa;AAAAA,EAEM;AACN,MAAAA;AAAA,SAAAb,EAAA,CAAA,MAAAG,EAAAe,eAAAlB,EAAA,CAAA,MAAAG,EAAAgB,mBAAAnB,EAAA,CAAA,MAAAG,EAAAiB,eAAApB,EAAA,CAAA,MAAAG,EAAAkB,gBAAArB,SAAAG,EAAAmB,aAAAtB,EAAA,CAAA,MAAAG,EAAAoB,kBAAAvB,EAAA,EAAA,MAAAG,EAAAqB,WAAAxB,EAAA,EAAA,MAAAG,EAAAsB,mBAAAzB,EAAA,EAAA,MAAAG,EAAAuB,eAAA1B,UAAAG,EAAAwB,qBAAA3B,EAAA,EAAA,MAAAG,EAAAyB,kBAAA5B,EAAA,EAAA,MAAAG,EAAA0B,SAAA7B,EAAA,EAAA,MAAAG,EAAA2B,UAEFjB,0BAACkB,GAAA,EACc,aAAA5B,EAAce,aACV,iBAAAf,EAAcgB,iBACjB,cAAAhB,EAAckB,cACnB,SAAAlB,EAAcqB,SACZ,WAAArB,EAAcmB,WAClB,OAAAnB,EAAc0B,OACL,gBAAA1B,EAAcyB,gBACjB,aAAAzB,EAAciB,aACR,mBAAAjB,EAAcwB,mBACjB,gBAAAxB,EAAcoB,gBACtB,QAAApB,EAAc2B,QACT,aAAA3B,EAAcuB,aACV,iBAAAvB,EAAcsB,iBAAgB,GAC/CzB,EAAA,CAAA,IAAAG,EAAAe,aAAAlB,EAAA,CAAA,IAAAG,EAAAgB,iBAAAnB,EAAA,CAAA,IAAAG,EAAAiB,aAAApB,EAAA,CAAA,IAAAG,EAAAkB,cAAArB,EAAA,CAAA,IAAAG,EAAAmB,WAAAtB,EAAA,CAAA,IAAAG,EAAAoB,gBAAAvB,EAAA,EAAA,IAAAG,EAAAqB,SAAAxB,EAAA,EAAA,IAAAG,EAAAsB,iBAAAzB,EAAA,EAAA,IAAAG,EAAAuB,aAAA1B,EAAA,EAAA,IAAAG,EAAAwB,mBAAA3B,EAAA,EAAA,IAAAG,EAAAyB,gBAAA5B,EAAA,EAAA,IAAAG,EAAA0B,OAAA7B,EAAA,EAAA,IAAAG,EAAA2B,QAAA9B,QAAAa,KAAAA,IAAAb,EAAA,EAAA,GAdFa;AAcE;"}
+{"version":3,"file":"PerformanceIntensiveMultiGraphDashboardFromConfig.js","names":[],"sources":["../src/Components/Dashboard/PerformanceIntensive/MultiGraphDashboardFromConfig.tsx"],"sourcesContent":["import { Spinner } from '@undp/design-system-react/Spinner';\nimport { useEffect, useState } from 'react';\nimport type {\n  ClassNameObject,\n  DataFilterDataType,\n  DataSettingsDataType,\n  FilterUiSettingsDataType,\n  PerformanceIntensiveDashboardLayoutDataType,\n  StyleObject,\n} from '@/Types';\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\nimport { PerformanceIntensiveMultiGraphDashboard } from './MultiGraphDashboard';\n\ninterface ConfigObject {\n  dashboardID?: string;\n  dashboardLayout: PerformanceIntensiveDashboardLayoutDataType;\n  dataSettings: DataSettingsDataType;\n  filters?: FilterUiSettingsDataType[];\n  noOfFiltersPerRow?: number;\n  filterPosition?: 'top' | 'side';\n  debugMode?: boolean;\n  theme?: 'dark' | 'light';\n  readableHeader?: {\n    value: string;\n    label: string;\n  }[];\n  dataFilters?: DataFilterDataType[];\n  uiMode?: 'light' | 'normal';\n  graphStyles?: StyleObject;\n  graphClassNames?: ClassNameObject;\n}\n\ninterface Props {\n  config: string | ConfigObject;\n}\n\nexport function PerformanceIntensiveMultiGraphDashboardFromConfig(props: Props) {\n  const { config } = props;\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\n  useEffect(() => {\n    const fetchData = async () => {\n      if (typeof config === 'string') {\n        const data = await fetchAndParseJSON(config);\n        setConfigSettings(data);\n      } else {\n        setConfigSettings(config);\n      }\n    };\n    fetchData();\n  }, [config]);\n  if (!configSettings)\n    return (\n      <div className='w-full flex justify-center p-4'>\n        <Spinner />\n      </div>\n    );\n  return (\n    <PerformanceIntensiveMultiGraphDashboard\n      dashboardID={configSettings.dashboardID}\n      dashboardLayout={configSettings.dashboardLayout}\n      dataSettings={configSettings.dataSettings}\n      filters={configSettings.filters}\n      debugMode={configSettings.debugMode}\n      theme={configSettings.theme}\n      readableHeader={configSettings.readableHeader}\n      dataFilters={configSettings.dataFilters}\n      noOfFiltersPerRow={configSettings.noOfFiltersPerRow}\n      filterPosition={configSettings.filterPosition}\n      uiMode={configSettings.uiMode}\n      graphStyles={configSettings.graphStyles}\n      graphClassNames={configSettings.graphClassNames}\n    />\n  );\n}\n"],"mappings":";;;;;;;AAoCA,SAAgB,EAAkD,GAAc;CAC9E,IAAM,EAAE,cAAW,GACb,CAAC,GAAgB,KAAqB,EAAmC,KAAA,CAAS;CAkBxF,OAjBA,QAAgB;EASd,aAR8B;GAC5B,AAEE,EAFE,OAAO,KAAW,WAEF,MADC,EAAkB,CAAM,IAGzB,CAAM;EAE5B,GACU;CACZ,GAAG,CAAC,CAAM,CAAC,GACN,IAOH,iBAAA,GAAA,EAAA,KAAC,GAAD;EACE,aAAa,EAAe;EAC5B,iBAAiB,EAAe;EAChC,cAAc,EAAe;EAC7B,SAAS,EAAe;EACxB,WAAW,EAAe;EAC1B,OAAO,EAAe;EACtB,gBAAgB,EAAe;EAC/B,aAAa,EAAe;EAC5B,mBAAmB,EAAe;EAClC,gBAAgB,EAAe;EAC/B,QAAQ,EAAe;EACvB,aAAa,EAAe;EAC5B,iBAAiB,EAAe;CACjC,CAAA,IAnBC,iBAAA,GAAA,EAAA,KAAC,OAAD;EAAK,WAAU;YACb,iBAAA,GAAA,EAAA,KAAC,GAAD,CAAU,CAAA;CACP,CAAA;AAmBX"}

package/dist/PerformanceIntensiveScrollStory.cjs

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

package/dist/PerformanceIntensiveScrollStory.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PerformanceIntensiveScrollStory.cjs","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","$","_c","chapters","visibilityThreshold","t0","mode","t1","infoWidth","t2","infoPosition","t3","infoBackgroundColor","t4","undefined","activeIndex","setActiveIndex","useState","t5","Symbol","for","threeDGraphs","t6","geoHubMaps","sectionsArr","forEach","d","i","sections","s","j","push","chapter","dataSettings","section","graphType","infoBox","graphSettings","animate","graphDataConfiguration","t7","t10","t8","t9","opacity","duration","t11","t12","t13","left","width","t14","includes","jsx","SingleGraphDashboardThreeDGraphs","SingleGraphDashboardGeoHubMaps","SingleGraphDashboard","t15","t16","map","idx","ScrollySection","t17","jsxs","index","position","backgroundColor","ref","useRef","once","amount","useInView","description","title"],"mappings":"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"}
+{"version":3,"file":"PerformanceIntensiveScrollStory.cjs","names":[],"sources":["../src/Components/Dashboard/PerformanceIntensive/ScrollStory.tsx"],"sourcesContent":["// Scrollytelling.tsx\nimport { motion, useInView } from 'motion/react';\nimport { useRef, useState } from 'react';\nimport type {\n  GeoHubGraphType,\n  GraphType,\n  InfoBoxDataType,\n  PerformanceIntensiveChaptersDataType,\n  SectionsArrDataType,\n  ThreeDGraphType,\n} from '@/Types';\nimport { SingleGraphDashboard } from '../SingleGraphDashboard';\nimport { SingleGraphDashboardGeoHubMaps } from './SingleGraphDashboardGeoHubMaps';\nimport { SingleGraphDashboardThreeDGraphs } from './SingleGraphDashboardThreeDGraphs';\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: PerformanceIntensiveChaptersDataType[];\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. */\nexport function PerformanceIntensiveScrollStory(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 threeDGraphs = ['threeDGlobe'];\n  const geoHubMaps = ['geoHubCompareMap', 'geoHubMap', 'geoHubMapWithLayerSelection'];\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        {threeDGraphs.includes(sectionsArr[activeIndex].graphType) ? (\n          <SingleGraphDashboardThreeDGraphs\n            graphType={sectionsArr[activeIndex].graphType as ThreeDGraphType}\n            dataSettings={sectionsArr[activeIndex].dataSettings}\n            graphSettings={sectionsArr[activeIndex].graphSettings}\n            graphDataConfiguration={sectionsArr[activeIndex].graphDataConfiguration}\n          />\n        ) : geoHubMaps.includes(sectionsArr[activeIndex].graphType) ? (\n          <SingleGraphDashboardGeoHubMaps\n            graphType={sectionsArr[activeIndex].graphType as GeoHubGraphType}\n            graphSettings={sectionsArr[activeIndex].graphSettings}\n          />\n        ) : (\n          <SingleGraphDashboard\n            graphType={sectionsArr[activeIndex].graphType as GraphType}\n            dataSettings={sectionsArr[activeIndex].dataSettings}\n            graphSettings={sectionsArr[activeIndex].graphSettings}\n            graphDataConfiguration={sectionsArr[activeIndex].graphDataConfiguration}\n          />\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":"8ZA+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"}