@undp/data-viz 2.6.0 → 2.6.1

package/dist/ScrollStory.js

@@ -1,94 +1,76 @@
-import { c as V, j as h } from "./compiler-runtime-qHgugrLy.js";
-import { useState as W, useRef as _ } from "react";
-import { SingleGraphDashboard as z } from "./SingleGraphDashboard.js";
-import { m as G } from "./proxy-D31SA_aE.js";
-import { u as q } from "./use-in-view-Co5SmzfT.js";
-function O(B) {
-  const t = V.c(27), {
-    chapters: e,
-    visibilityThreshold: v,
-    mode: S,
-    infoWidth: x,
-    infoPosition: j,
-    infoBackgroundColor: p
-  } = B, f = v === void 0 ? 0.5 : v, n = S === void 0 ? "overlay" : S, c = x === void 0 ? "320px" : x, s = j === void 0 ? "left" : j, C = p === void 0 ? "rgba(255,255,255,0.8)" : p, [a, y] = W(0);
-  let i;
-  t[0] !== e ? (i = [], e.forEach((l, A) => {
-    l.sections.forEach((R, P) => {
-      i.push({
-        chapter: A,
-        dataSettings: l.dataSettings,
-        section: P,
-        graphType: l.graphType,
-        infoBox: R.infoBox,
-        graphSettings: {
-          ...l.graphSettings,
-          ...R.graphSettings || {},
-          animate: !0
-        },
-        graphDataConfiguration: R.graphDataConfiguration || l.graphDataConfiguration || []
-      });
-    });
-  }), t[0] = e, t[1] = i) : i = t[1];
-  const o = i[a];
-  let r, b, D;
-  t[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (r = {
-    opacity: 0
-  }, b = {
-    opacity: 1
-  }, D = {
-    duration: 0.5
-  }, t[2] = r, t[3] = b, t[4] = D) : (r = t[2], b = t[3], D = t[4]);
-  const T = n === "overlay" || s === "right" ? 0 : c, $ = n === "overlay" ? "100%" : `calc(100% - ${c})`;
-  let g;
-  t[5] !== $ || t[6] !== T ? (g = {
-    left: T,
-    width: $
-  }, t[5] = $, t[6] = T, t[7] = g) : g = t[7];
-  const I = i[a].graphType, k = i[a], E = i[a], N = i[a];
-  let d;
-  t[8] !== I || t[9] !== k.dataSettings || t[10] !== E.graphSettings || t[11] !== N.graphDataConfiguration ? (d = /* @__PURE__ */ h.jsx(z, { graphType: I, dataSettings: k.dataSettings, graphSettings: E.graphSettings, graphDataConfiguration: N.graphDataConfiguration }), t[8] = I, t[9] = k.dataSettings, t[10] = E.graphSettings, t[11] = N.graphDataConfiguration, t[12] = d) : d = t[12];
-  let u;
-  t[13] !== g || t[14] !== d || t[15] !== o.chapter ? (u = /* @__PURE__ */ h.jsx(G.div, { className: "fixed top-0 h-full -z-10", initial: r, animate: b, transition: D, style: g, children: d }, o.chapter), t[13] = g, t[14] = d, t[15] = o.chapter, t[16] = u) : u = t[16];
-  let m;
-  t[17] !== C || t[18] !== s || t[19] !== c || t[20] !== n || t[21] !== i || t[22] !== f ? (m = /* @__PURE__ */ h.jsx("div", { children: i.map((l, A) => /* @__PURE__ */ h.jsx(F, { width: c, index: A, infoBox: l.infoBox, setActiveIndex: y, position: s, mode: n, visibilityThreshold: f, backgroundColor: C }, `${l.chapter}-${l.section}`)) }), t[17] = C, t[18] = s, t[19] = c, t[20] = n, t[21] = i, t[22] = f, t[23] = m) : m = t[23];
-  let w;
-  return t[24] !== u || t[25] !== m ? (w = /* @__PURE__ */ h.jsxs("div", { className: "relative w-full h-full", children: [
-    u,
-    m
-  ] }), t[24] = u, t[25] = m, t[26] = w) : w = t[26], w;
+import { t as e } from "./jsx-runtime-C76bEyh7.js";
+import { t } from "./proxy-BiRrIImK.js";
+import { t as n } from "./use-in-view-CjlKdln1.js";
+import { SingleGraphDashboard as r } from "./SingleGraphDashboard.js";
+import { useRef as i, useState as a } from "react";
+//#region src/Components/Dashboard/ScrollStory.tsx
+var o = e();
+function s(e) {
+	let { chapters: n, visibilityThreshold: i = .5, mode: s = "overlay", infoWidth: l = "320px", infoPosition: u = "left", infoBackgroundColor: d = "rgba(255,255,255,0.8)" } = e, [f, p] = a(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 || []
+			});
+		});
+	}), /* @__PURE__ */ (0, o.jsxs)("div", {
+		className: "relative w-full h-full",
+		children: [/* @__PURE__ */ (0, o.jsx)(t.div, {
+			className: "fixed top-0 h-full -z-10",
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			transition: { duration: .5 },
+			style: {
+				left: s === "overlay" || u === "right" ? 0 : l,
+				width: s === "overlay" ? "100%" : `calc(100% - ${l})`
+			},
+			children: /* @__PURE__ */ (0, o.jsx)(r, {
+				graphType: m[f].graphType,
+				dataSettings: m[f].dataSettings,
+				graphSettings: m[f].graphSettings,
+				graphDataConfiguration: m[f].graphDataConfiguration
+			})
+		}, m[f].chapter), /* @__PURE__ */ (0, o.jsx)("div", { children: m.map((e, t) => /* @__PURE__ */ (0, o.jsx)(c, {
+			width: l,
+			index: t,
+			infoBox: e.infoBox,
+			setActiveIndex: p,
+			position: u,
+			mode: s,
+			visibilityThreshold: i,
+			backgroundColor: d
+		}, `${e.chapter}-${e.section}`)) })]
+	});
 }
-function F(B) {
-  const t = V.c(13), {
-    infoBox: e,
-    index: v,
-    setActiveIndex: S,
-    position: x,
-    mode: j,
-    visibilityThreshold: p,
-    backgroundColor: f,
-    width: n
-  } = B, c = _(null);
-  let s;
-  t[0] !== p ? (s = {
-    once: !1,
-    amount: p
-  }, t[0] = p, t[1] = s) : s = t[1], q(c, s) && S(v);
-  const a = `min-h-screen flex ${x === "center" ? "justify-center" : x === "right" ? "justify-end" : "justify-start"}`, y = `p-8 ${j === "overlay" ? "h-fit mx-10 " : ""}`;
-  let i;
-  t[2] !== f || t[3] !== n ? (i = {
-    backgroundColor: f,
-    width: n
-  }, t[2] = f, t[3] = n, t[4] = i) : i = t[4];
-  let o;
-  t[5] !== e.description || t[6] !== e.title || t[7] !== y || t[8] !== i ? (o = /* @__PURE__ */ h.jsxs("div", { className: y, style: i, children: [
-    e.title,
-    e.description
-  ] }), t[5] = e.description, t[6] = e.title, t[7] = y, t[8] = i, t[9] = o) : o = t[9];
-  let r;
-  return t[10] !== a || t[11] !== o ? (r = /* @__PURE__ */ h.jsx("section", { ref: c, className: a, children: o }), t[10] = a, t[11] = o, t[12] = r) : r = t[12], r;
+function c({ infoBox: e, index: t, setActiveIndex: r, position: a, mode: s, visibilityThreshold: c, backgroundColor: l, width: u }) {
+	let d = i(null);
+	return n(d, {
+		once: !1,
+		amount: c
+	}) && r(t), /* @__PURE__ */ (0, o.jsx)("section", {
+		ref: d,
+		className: `min-h-screen flex ${a === "center" ? "justify-center" : a === "right" ? "justify-end" : "justify-start"}`,
+		children: /* @__PURE__ */ (0, o.jsxs)("div", {
+			className: `p-8 ${s === "overlay" ? "h-fit mx-10 " : ""}`,
+			style: {
+				backgroundColor: l,
+				width: u
+			},
+			children: [e.title, e.description]
+		})
+	});
 }
-export {
-  O as ScrollStory
-};
-//# sourceMappingURL=ScrollStory.js.map
+//#endregion
+export { s as ScrollStory };
+
+//# sourceMappingURL=ScrollStory.js.map

package/dist/ScrollStory.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollStory.js","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.js","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":";;;;;;;AA2BA,SAAgB,EAAY,GAAc;CACxC,IAAM,EACJ,aACA,yBAAsB,IACtB,UAAO,WACP,eAAY,SACZ,kBAAe,QACf,yBAAsB,4BACpB,GACE,CAAC,GAAa,KAAkB,EAAS,CAAC,GAC1C,IAAqC,CAAC;CAc5C,OAbA,EAAS,SAAS,GAAG,MAAM;EACzB,EAAE,SAAS,SAAS,GAAG,MAAM;GAC3B,EAAY,KAAK;IACf,SAAS;IACT,cAAc,EAAE;IAChB,SAAS;IACT,WAAW,EAAE;IACb,SAAS,EAAE;IACX,eAAe;KAAE,GAAG,EAAE;KAAe,GAAI,EAAE,iBAAiB,CAAC;KAAI,SAAS;IAAK;IAC/E,wBAAwB,EAAE,0BAA0B,EAAE,0BAA0B,CAAC;GACnF,CAAC;EACH,CAAC;CACH,CAAC,GAEC,iBAAA,GAAA,EAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CAEE,iBAAA,GAAA,EAAA,KAAC,EAAO,KAAR;GAEE,WAAU;GACV,SAAS,EAAE,SAAS,EAAE;GACtB,SAAS,EAAE,SAAS,EAAE;GACtB,YAAY,EAAE,UAAU,GAAI;GAC5B,OAAO;IACL,MAAM,MAAS,aAAgB,MAAiB,UAArB,IAAmC;IAC9D,OAAO,MAAS,YAAY,SAAS,eAAe,EAAU;GAChE;aAEA,iBAAA,GAAA,EAAA,KAAC,GAAD;IACE,WAAW,EAAY,GAAa;IACpC,cAAc,EAAY,GAAa;IACvC,eAAe,EAAY,GAAa;IACxC,wBAAwB,EAAY,GAAa;GAClD,CAAA;EACS,GAhBL,EAAY,GAAa,OAgBpB,GACZ,iBAAA,GAAA,EAAA,KAAC,OAAD,EAAA,UACG,EAAY,KAAK,GAAS,MACzB,iBAAA,GAAA,EAAA,KAAC,GAAD;GACE,OAAO;GAEP,OAAO;GACP,SAAS,EAAQ;GACD;GAChB,UAAU;GACJ;GACe;GACrB,iBAAiB;EAClB,GARM,GAAG,EAAQ,QAAQ,GAAG,EAAQ,SAQpC,CACF,EACE,CAAA,CACF;;AAET;AAEA,SAAS,EAAe,EACtB,YACA,UACA,mBACA,aACA,SACA,wBACA,oBACA,YAUC;CACD,IAAM,IAAM,EAAO,IAAI;CAMvB,OALiB,EAAU,GAAK;EAC9B,MAAM;EACN,QAAQ;CACV,CACI,KAAU,EAAe,CAAK,GAEhC,iBAAA,GAAA,EAAA,KAAC,WAAD;EACO;EACL,WAAW,qBAAqB,MAAa,WAAW,mBAAmB,MAAa,UAAU,gBAAgB;YAElH,iBAAA,GAAA,EAAA,MAAC,OAAD;GACE,WAAW,OAAO,MAAS,YAAY,iBAAiB;GACxD,OAAO;IACL;IACA;GACF;aALF,CAOG,EAAQ,OACR,EAAQ,WACN;;CACE,CAAA;AAEb"}

package/dist/SimpleLineChart.cjs

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./compiler-runtime-oPPev21o.cjs"),O=require("react"),R=require("./parse-xYI9yrvL.cjs"),qe=require("./simple-statistics-xm8c0LQQ.cjs"),de=require("@undp/design-system-react/cn"),Fe=require("./index-Cno4Q0YE.cjs"),Te=require("./numberFormattingFunction-u2iNHL_c.cjs"),He=require("./Tooltip-DwUFLDrj.cjs"),ht=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),De=require("./customArea-BCGIYDQa.cjs"),Ge=require("./Axis-DY7jsk1Y.cjs"),We=require("./AxisTitle-CyFFbdNU.cjs"),Ye=require("./XTicksAndGridLines-BO6KJc8d.cjs"),Pe=require("./ReferenceLine-CxITVT1K.cjs"),Xe=require("./RegressionLine-BpcVBjL0.cjs"),Ue=require("./YTicksAndGridLines-C7glLI5b.cjs"),Ze=require("./index-BaXzoD4r.cjs"),Be=require("./time-CkcKbhwe.cjs"),ze=require("./linear-CgUCbw9F.cjs"),Ne=require("./line-DaEMhXmx.cjs"),he=require("./step-BZ3C8QFW.cjs"),Je=require("./select-Bnfk0lJx.cjs"),zt=require("./proxy-QMeVVqam.cjs"),Ke=require("./init-DU0ybBc_.cjs"),Qe=require("./pointer-Dkq5NV1q.cjs"),_e=require("./use-in-view-DjR_gqJP.cjs"),ti=require("./GraphFooter.cjs"),ei=require("./GraphHeader.cjs"),ii=require("./Colors.cjs"),ni=require("./EmptyState-BoaUUuo6.cjs"),$e=require("./GraphContainer-gaG9TSy4.cjs"),si=require("./getNoOfTicks-C_1CFXv_.cjs");function oi(i){const t=n.compilerRuntimeExports.c(112),{data:y,width:U,height:st,lineColor:S,suffix:E,prefix:D,dateFormat:s,highlightAreaSettings:Z,showValues:Jt,noOfXTicks:Kt,rightMargin:gt,leftMargin:C,topMargin:yt,bottomMargin:vt,tooltip:ot,onSeriesMouseOver:jt,refValues:Gt,minValue:Rt,maxValue:B,animate:o,rtl:rt,strokeWidth:at,showDots:Wt,annotations:Yt,customHighlightAreaSettings:lt,regressionLine:ct,yAxisTitle:ut,noOfYTicks:Qt,maxDate:Pt,minDate:Xt,curveType:V,styles:p,classNames:d,precision:I,customLayers:A,locale:k,padZeros:F}=i,wt=O.useRef(null);let xt;t[0]!==o.amount||t[1]!==o.once?(xt={once:o.once,amount:o.amount},t[0]=o.amount,t[1]=o.once,t[2]=xt):xt=t[2];const m=_e.useInView(wt,xt),[L,_t]=O.useState(!1);let u,x;t[3]!==o.duration||t[4]!==L||t[5]!==m?(u=()=>{if(m&&!L){const e=setTimeout(()=>{_t(!0)},(o.duration+.5)*1e3);return()=>clearTimeout(e)}},x=[m,L,o.duration],t[3]=o.duration,t[4]=L,t[5]=m,t[6]=u,t[7]=x):(u=t[6],x=t[7]),O.useEffect(u,x);const Ot=V==="linear"?Ne.curveLinear:V==="step"?he.curveStep:V==="stepAfter"?he.stepAfter:V==="stepBefore"?he.stepBefore:he.monotoneX,[l,bt]=O.useState(void 0),[z,Et]=O.useState(void 0),[J,Ct]=O.useState(void 0),ft=ut?C+30:C;let K;t[8]!==vt||t[9]!==gt||t[10]!==ft||t[11]!==yt?(K={top:yt,bottom:vt,left:ft,right:gt},t[8]=vt,t[9]=gt,t[10]=ft,t[11]=yt,t[12]=K):K=t[12];const v=K,H=O.useRef(null);let Q;t[13]!==s?(Q=e=>({...e,date:R.parse(`${e.date}`,s,new Date)}),t[13]=s,t[14]=Q):Q=t[14];const a=Fe.orderBy(y.map(Q),["date"],["asc"]);let G;if(t[15]!==s||t[16]!==Z){let e;t[18]!==s?(e=h=>({...h,coordinates:[h.coordinates[0]===null?null:R.parse(`${h.coordinates[0]}`,s,new Date),h.coordinates[1]===null?null:R.parse(`${h.coordinates[1]}`,s,new Date)]}),t[18]=s,t[19]=e):e=t[19],G=Z.map(e),t[15]=s,t[16]=Z,t[17]=G}else G=t[17];const _=G;let b;if(t[20]!==lt||t[21]!==s){let e;t[23]!==s?(e=h=>({...h,coordinates:h.coordinates.map((X,Ht)=>Ht%2===0?R.parse(`${X}`,s,new Date):X)}),t[23]=s,t[24]=e):e=t[24],b=lt.map(e),t[20]=lt,t[21]=s,t[22]=b}else b=t[22];const At=b,f=U-v.left-v.right,g=st-v.top-v.bottom,Ut=Xt?R.parse(`${Xt}`,s,new Date):a[0].date,Zt=Pt?R.parse(`${Pt}`,s,new Date):a[a.length-1].date,j=ht.checkIfNullOrUndefined(Rt)?Math.min(...a.map(Oi).filter(wi))!==1/0?Math.min(...a.map(Ri).filter(ji))>0?0:Math.min(...a.map(vi).filter(yi)):0:Rt,W=Math.max(...a.map(gi).filter(hi))!==1/0?Math.max(...a.map(di).filter(pi)):0,r=Be.time().domain([Ut,Zt]).range([0,f]);let tt;t[25]!==W||t[26]!==B?(tt=ht.checkIfNullOrUndefined(B)?W>0?W:0:B,t[25]=W,t[26]=B,t[27]=tt):tt=t[27];const c=ze.linear().domain([j,tt]).range([g,0]).nice(),kt=Ne.line().x(e=>r(e.date)).y(e=>c(e.y)).curve(Ot),Lt=c.ticks(Qt),St=r.ticks(Kt);O.useEffect(()=>{const e=X=>{const Ht=a[Ke.bisectCenter(a.map(mi),r.invert(Qe.pointer(X)[0]),0)];bt(Ht||a[a.length-1]),jt?.(Ht||a[a.length-1]),Ct(X.clientY),Et(X.clientX)},h=()=>{bt(void 0),Et(void 0),Ct(void 0),jt?.(void 0)};Je.select(H.current).on("mousemove",e).on("mouseout",h)},[r,a,jt]);const Dt=qe.linearRegression(a.filter(fi).map(e=>[r(e.date),c(e.y)])),qt=qe.linearRegressionLine(Dt);let q;t[28]!==o||t[29]!==g||t[30]!==f||t[31]!==_||t[32]!==m||t[33]!==r?(q=n.jsxRuntimeExports.jsx(Ze.HighlightArea,{areaSettings:_,width:f,height:g,scale:r,animate:o,isInView:m}),t[28]=o,t[29]=g,t[30]=f,t[31]=_,t[32]=m,t[33]=r,t[34]=q):q=t[34];const Bt=p?.yAxis?.gridLines,et=p?.yAxis?.labels;let Tt;t[35]!==Bt||t[36]!==et?(Tt={gridLines:Bt,labels:et},t[35]=Bt,t[36]=et,t[37]=Tt):Tt=t[37];const mt=d?.yAxis?.gridLines,Nt=d?.yAxis?.labels;let Y;t[38]!==mt||t[39]!==Nt?(Y={gridLines:mt,labels:Nt},t[38]=mt,t[39]=Nt,t[40]=Y):Y=t[40];const it=c(j<0?0:j),pt=c(j<0?0:j),dt=0-C,T=f+v.right,N=j<0?0:j;let w;t[41]!==k||t[42]!==F||t[43]!==I||t[44]!==D||t[45]!==E||t[46]!==N?(w=Te.numberFormattingFunction(N,void 0,I,D,E,k,F),t[41]=k,t[42]=F,t[43]=I,t[44]=D,t[45]=E,t[46]=N,t[47]=w):w=t[47];const $=0-C,M=c(j<0?0:j),nt=W<0?"1em":-5;let P;t[48]!==$||t[49]!==M||t[50]!==nt?(P={x:$,y:M,dx:0,dy:nt},t[48]=$,t[49]=M,t[50]=nt,t[51]=P):P=t[51];const $t=d?.xAxis?.axis,ge=d?.yAxis?.labels;let Mt;t[52]!==$t||t[53]!==ge?(Mt={axis:$t,label:ge},t[52]=$t,t[53]=ge,t[54]=Mt):Mt=t[54];const ye=p?.xAxis?.axis,ve=p?.yAxis?.labels;let Vt;t[55]!==ye||t[56]!==ve?(Vt={axis:ye,label:ve},t[55]=ye,t[56]=ve,t[57]=Vt):Vt=t[57];let te;t[58]!==it||t[59]!==pt||t[60]!==dt||t[61]!==T||t[62]!==w||t[63]!==P||t[64]!==Mt||t[65]!==Vt?(te=n.jsxRuntimeExports.jsx(Ge.Axis,{y1:it,y2:pt,x1:dt,x2:T,label:w,labelPos:P,classNames:Mt,styles:Vt}),t[58]=it,t[59]=pt,t[60]=dt,t[61]=T,t[62]=w,t[63]=P,t[64]=Mt,t[65]=Vt,t[66]=te):te=t[66];const je=0-C-15,Re=g/2,we=p?.yAxis?.title,Oe=d?.yAxis?.title;let ee;t[67]!==je||t[68]!==Re||t[69]!==we||t[70]!==Oe||t[71]!==ut?(ee=n.jsxRuntimeExports.jsx(We.AxisTitle,{x:je,y:Re,style:we,className:Oe,text:ut,rotate90:!0}),t[67]=je,t[68]=Re,t[69]=we,t[70]=Oe,t[71]=ut,t[72]=ee):ee=t[72];let ie;t[73]!==s?(ie=e=>R.format(e,s),t[73]=s,t[74]=ie):ie=t[74];const Me=St.map(ie),Ve=St.map(e=>r(e)),be=p?.xAxis?.gridLines,Ee=p?.xAxis?.labels;let ne;t[75]!==be||t[76]!==Ee?(ne={gridLines:be,labels:Ee},t[75]=be,t[76]=Ee,t[77]=ne):ne=t[77];const Ce=d?.xAxis?.gridLines;let It;t[78]!==Ce?(It=de.cn("opacity-0",Ce),t[78]=Ce,t[79]=It):It=t[79];const Ae=d?.xAxis?.labels;let Ft;t[80]!==Ae?(Ft=de.cn("fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs",Ae),t[80]=Ae,t[81]=Ft):Ft=t[81];let se;t[82]!==It||t[83]!==Ft?(se={gridLines:It,labels:Ft},t[82]=It,t[83]=Ft,t[84]=se):se=t[84];let oe;t[85]!==A?(oe=A.filter(ci).map(li),t[85]=A,t[86]=oe):oe=t[86];let re;t[87]!==S||t[88]!==at?(re={stroke:S,fill:"none",strokeWidth:at},t[87]=S,t[88]=at,t[89]=re):re=t[89];let ae;t[90]!==o.duration?(ae={opacity:0,transition:{duration:o.duration}},t[90]=o.duration,t[91]=ae):ae=t[91];const ke=a.map((e,h)=>n.jsxRuntimeExports.jsx(zt.motion.g,{children:ht.checkIfNullOrUndefined(e.y)?null:n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[Wt?n.jsxRuntimeExports.jsx(zt.motion.circle,{r:f/a.length<5?0:f/a.length<20?2:4,exit:{opacity:0,transition:{duration:o.duration}},variants:{initial:{opacity:0,cx:r(e.date),cy:c(e.y),fill:S},whileInView:{opacity:1,fill:S,transition:{duration:L?o.duration:.5,delay:L?0:o.duration},cx:r(e.date),cy:c(e.y)}},initial:"initial",animate:m?"whileInView":"initial"}):null,Jt?n.jsxRuntimeExports.jsx(zt.motion.text,{dy:-8,style:{textAnchor:"middle",...p?.graphObjectValues||{}},className:de.cn("graph-value text-xs font-bold",d?.graphObjectValues),exit:{opacity:0,transition:{duration:o.duration}},variants:{initial:{opacity:0,x:r(e.date),y:c(e.y)},whileInView:{opacity:1,x:r(e.date),y:c(e.y),transition:{duration:L?o.duration:.5,delay:L?0:o.duration}}},initial:"initial",animate:m?"whileInView":"initial",children:Te.numberFormattingFunction(e.y,void 0,I,D,E,k,F)}):null]})},h));let le;t[92]!==ke?(le=n.jsxRuntimeExports.jsx("g",{children:ke}),t[92]=ke,t[93]=le):le=t[93];const Le=Yt.map((e,h)=>{const X=De.getLineEndPoint({x:e.xCoordinate?r(R.parse(`${e.xCoordinate}`,s,new Date))+(e.xOffset||0):0+(e.xOffset||0),y:e.yCoordinate?c(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8},{x:e.xCoordinate?r(R.parse(`${e.xCoordinate}`,s,new Date)):0,y:e.yCoordinate?c(e.yCoordinate):0},ht.checkIfNullOrUndefined(e.connectorRadius)?3.5:e.connectorRadius),Ht=e.showConnector?{y1:X.y,x1:X.x,y2:e.yCoordinate?c(e.yCoordinate)+(e.yOffset||0):0+(e.yOffset||0),x2:e.xCoordinate?r(R.parse(`${e.xCoordinate}`,s,new Date))+(e.xOffset||0):0+(e.xOffset||0),cy:e.yCoordinate?c(e.yCoordinate):0,cx:e.xCoordinate?r(R.parse(`${e.xCoordinate}`,s,new Date)):0,circleRadius:ht.checkIfNullOrUndefined(e.connectorRadius)?3.5:e.connectorRadius,strokeWidth:e.showConnector===!0?2:Math.min(e.showConnector||0,1)}:void 0,Ie={y:e.yCoordinate?c(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8,x:rt?0:e.xCoordinate?r(R.parse(`${e.xCoordinate}`,s,new Date))+(e.xOffset||0):0+(e.xOffset||0),width:rt?e.xCoordinate?r(R.parse(`${e.xCoordinate}`,s,new Date))+(e.xOffset||0):0+(e.xOffset||0):f+v.right-(e.xCoordinate?r(R.parse(`${e.xCoordinate}`,s,new Date))+(e.xOffset||0):0+(e.xOffset||0)),maxWidth:e.maxWidth,fontWeight:e.fontWeight,align:e.align};return n.jsxRuntimeExports.jsx(De.Annotation,{color:e.color,connectorsSettings:Ht,labelSettings:Ie,text:e.text,classNames:e.classNames,styles:e.styles,animate:o,isInView:m},h)});let ce;t[94]!==Le?(ce=n.jsxRuntimeExports.jsx("g",{children:Le}),t[94]=Le,t[95]=ce):ce=t[95];const Se=ct?n.jsxRuntimeExports.jsx(Xe.RegressionLine,{x1:0,x2:f,y1:qt(0),y2:qt(f),graphHeight:g,graphWidth:f,className:d?.regLine,style:p?.regLine,color:typeof ct=="string"?ct:void 0,animate:o,isInView:m}):null;let ue;t[96]!==Se?(ue=n.jsxRuntimeExports.jsx("g",{children:Se}),t[96]=Se,t[97]=ue):ue=t[97];let xe;t[98]!==A?(xe=A.filter(ai).map(ri),t[98]=A,t[99]=xe):xe=t[99];let fe;t[100]===Symbol.for("react.memo_cache_sentinel")?(fe={fill:"none",pointerEvents:"all"},t[100]=fe):fe=t[100];let me;t[101]!==H||t[102]!==g||t[103]!==f?(me=n.jsxRuntimeExports.jsx("rect",{ref:H,style:fe,width:f,height:g}),t[101]=H,t[102]=g,t[103]=f,t[104]=me):me=t[104];let pe;return t[105]!==d?.tooltip||t[106]!==z||t[107]!==J||t[108]!==l||t[109]!==p?.tooltip||t[110]!==ot?(pe=l&&ot&&z&&J?n.jsxRuntimeExports.jsx(He.Tooltip,{data:l,body:ot,xPos:z,yPos:J,backgroundStyle:p?.tooltip,className:d?.tooltip}):null,t[105]=d?.tooltip,t[106]=z,t[107]=J,t[108]=l,t[109]=p?.tooltip,t[110]=ot,t[111]=pe):pe=t[111],n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(zt.motion.svg,{width:`${U}px`,height:`${st}px`,viewBox:`0 0 ${U} ${st}`,direction:"ltr",ref:wt,children:n.jsxRuntimeExports.jsxs("g",{transform:`translate(${v.left},${v.top})`,children:[q,n.jsxRuntimeExports.jsx(De.CustomArea,{areaSettings:At,scaleX:r,scaleY:c,animate:o,isInView:m}),n.jsxRuntimeExports.jsxs("g",{children:[n.jsxRuntimeExports.jsx(Ue.YTicksAndGridLines,{values:Lt.filter(xi),y:Lt.filter(ui).map(e=>c(e)),x1:0-C,x2:f+v.right,styles:Tt,classNames:Y,suffix:E,prefix:D,labelType:"secondary",showGridLines:!0,labelPos:"vertical",precision:I,locale:k,padZeros:F}),te,ee]}),n.jsxRuntimeExports.jsx(Ye.XTicksAndGridLines,{values:Me,x:Ve,y1:0,y2:g,styles:ne,classNames:se,suffix:E,prefix:D,labelType:"primary",showGridLines:!0,precision:I,locale:k,padZeros:F}),oe,n.jsxRuntimeExports.jsxs("g",{children:[n.jsxRuntimeExports.jsx(zt.motion.path,{style:re,exit:ae,variants:{initial:{pathLength:0,d:kt(a)||"",opacity:1},whileInView:{pathLength:1,d:kt(a)||"",opacity:1,transition:{duration:o.duration}}},initial:"initial",animate:m?"whileInView":"initial"}),l?n.jsxRuntimeExports.jsx("line",{y1:0,y2:g,x1:r(l.date),x2:r(l.date),className:de.cn("undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100",d?.mouseOverLine),style:p?.mouseOverLine}):null]}),le,Gt?n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{children:Gt.map((e,h)=>n.jsxRuntimeExports.jsx(Pe.RefLineY,{text:e.text,color:e.color,y:c(e.value),x1:0-C,x2:f+v.right,classNames:e.classNames,styles:e.styles,animate:o,isInView:m},h))}):null,ce,ue,xe,me]})}),pe]})}function ri(i){return i.layer}function ai(i){return i.position==="after"}function li(i){return i.layer}function ci(i){return i.position==="before"}function ui(i){return i!==0}function xi(i){return i!==0}function fi(i){return!ht.checkIfNullOrUndefined(i.date)&&!ht.checkIfNullOrUndefined(i.y)}function mi(i){return i.date}function pi(i){return i!=null}function di(i){return i.y}function hi(i){return i!=null}function gi(i){return i.y}function yi(i){return i!=null}function vi(i){return i.y}function ji(i){return i!=null}function Ri(i){return i.y}function wi(i){return i!=null}function Oi(i){return i.y}function bi(i){const t=n.compilerRuntimeExports.c(90),{data:y,graphTitle:U,lineColor:st,sources:S,graphDescription:E,height:D,width:s,footNote:Z,noOfXTicks:Jt,dateFormat:Kt,showValues:gt,padding:C,backgroundColor:yt,leftMargin:vt,rightMargin:ot,topMargin:jt,bottomMargin:Gt,relativeHeight:Rt,tooltip:B,onSeriesMouseOver:o,highlightAreaSettings:rt,graphID:at,minValue:Wt,maxValue:Yt,maxDate:lt,minDate:ct,graphDownload:ut,dataDownload:Qt,animate:Pt,language:Xt,refValues:V,minHeight:p,strokeWidth:d,showDots:I,annotations:A,customHighlightAreaSettings:k,theme:F,ariaLabel:wt,regressionLine:xt,yAxisTitle:m,noOfYTicks:L,curveType:_t,styles:u,classNames:x,customLayers:Ot,numberDisplayOptions:l}=i,bt=Jt===void 0?10:Jt,z=Kt===void 0?"yyyy":Kt,Et=gt===void 0?!1:gt,J=yt===void 0?!1:yt,Ct=vt===void 0?30:vt,ft=ot===void 0?30:ot,K=jt===void 0?20:jt,v=Gt===void 0?25:Gt;let H;t[0]!==rt?(H=rt===void 0?[]:rt,t[0]=rt,t[1]=H):H=t[1];const Q=H,a=ut===void 0?!1:ut,G=Qt===void 0?!1:Qt,_=Pt===void 0?!1:Pt,b=Xt===void 0?"en":Xt;let At;t[2]!==V?(At=V===void 0?[]:V,t[2]=V,t[3]=At):At=t[3];const f=At,g=p===void 0?0:p,Ut=d===void 0?2:d,Zt=I===void 0?!0:I;let j;t[4]!==A?(j=A===void 0?[]:A,t[4]=A,t[5]=j):j=t[5];const W=j;let r;t[6]!==k?(r=k===void 0?[]:k,t[6]=k,t[7]=r):r=t[7];const tt=r,c=F===void 0?"light":F,kt=xt===void 0?!1:xt,Lt=L===void 0?5:L,St=_t===void 0?"curve":_t;let Dt;t[8]!==Ot?(Dt=Ot===void 0?[]:Ot,t[8]=Ot,t[9]=Dt):Dt=t[9];const qt=Dt,[q,Bt]=O.useState(0),[et,Tt]=O.useState(0),mt=O.useRef(null),Nt=O.useRef(null);let Y,it;t[10]===Symbol.for("react.memo_cache_sentinel")?(Y=()=>{const P=new ResizeObserver($t=>{Bt($t[0].target.clientWidth||620),Tt($t[0].target.clientHeight||480)});return mt.current&&P.observe(mt.current),()=>P.disconnect()},it=[],t[10]=Y,t[11]=it):(Y=t[10],it=t[11]),O.useEffect(Y,it);const pt=x?.graphContainer,dt=u?.graphContainer;let T;t[12]!==x?.description||t[13]!==x?.title||t[14]!==y||t[15]!==G||t[16]!==E||t[17]!==a||t[18]!==U||t[19]!==u?.description||t[20]!==u?.title||t[21]!==s?(T=U||E||a||G?n.jsxRuntimeExports.jsx(ei.GraphHeader,{styles:{title:u?.title,description:u?.description},classNames:{title:x?.title,description:x?.description},graphTitle:U,graphDescription:E,width:s,graphDownload:a?Nt:void 0,dataDownload:G?y.map(Li).filter(ki).length>0?y.map(Ai).filter(Ci):y.filter(Ei):null}):null,t[12]=x?.description,t[13]=x?.title,t[14]=y,t[15]=G,t[16]=E,t[17]=a,t[18]=U,t[19]=u?.description,t[20]=u?.title,t[21]=s,t[22]=T):T=t[22];let N;t[23]!==y.length?(N=y.length===0&&n.jsxRuntimeExports.jsx(ni.EmptyState,{}),t[23]=y.length,t[24]=N):N=t[24];let w;t[25]!==_||t[26]!==W||t[27]!==v||t[28]!==x||t[29]!==St||t[30]!==tt||t[31]!==qt||t[32]!==y||t[33]!==z||t[34]!==Q||t[35]!==b||t[36]!==Ct||t[37]!==st||t[38]!==lt||t[39]!==Yt||t[40]!==ct||t[41]!==Wt||t[42]!==bt||t[43]!==Lt||t[44]!==l?.locale||t[45]!==l?.padZeros||t[46]!==l?.precision||t[47]!==l?.prefix||t[48]!==l?.suffix||t[49]!==o||t[50]!==f||t[51]!==kt||t[52]!==ft||t[53]!==Zt||t[54]!==Et||t[55]!==Ut||t[56]!==u||t[57]!==et||t[58]!==q||t[59]!==B||t[60]!==K||t[61]!==m?(w=q&&et&&y.length>0?n.jsxRuntimeExports.jsx(oi,{data:y,lineColor:st||ii.Colors.primaryColors["blue-600"],width:q,height:et,dateFormat:z,showValues:Et,noOfXTicks:bt??si.getNoOfTicks(q),leftMargin:Ct,rightMargin:ft,topMargin:K,bottomMargin:v,tooltip:B,highlightAreaSettings:Q,onSeriesMouseOver:o,refValues:f,minValue:Wt,maxValue:Yt,animate:_===!0?{duration:.5,once:!0,amount:.5}:_||{duration:0,once:!0,amount:0},rtl:b==="he"||b==="ar",strokeWidth:Ut,showDots:Zt,annotations:W,customHighlightAreaSettings:tt,regressionLine:kt,yAxisTitle:m,noOfYTicks:Lt,maxDate:lt,minDate:ct,curveType:St,styles:u,classNames:x,customLayers:qt,locale:l?.locale||"en",padZeros:l?.padZeros||!1,suffix:l?.suffix||"",prefix:l?.prefix||"",precision:l?.precision??2}):null,t[25]=_,t[26]=W,t[27]=v,t[28]=x,t[29]=St,t[30]=tt,t[31]=qt,t[32]=y,t[33]=z,t[34]=Q,t[35]=b,t[36]=Ct,t[37]=st,t[38]=lt,t[39]=Yt,t[40]=ct,t[41]=Wt,t[42]=bt,t[43]=Lt,t[44]=l?.locale,t[45]=l?.padZeros,t[46]=l?.precision,t[47]=l?.prefix,t[48]=l?.suffix,t[49]=o,t[50]=f,t[51]=kt,t[52]=ft,t[53]=Zt,t[54]=Et,t[55]=Ut,t[56]=u,t[57]=et,t[58]=q,t[59]=B,t[60]=K,t[61]=m,t[62]=w):w=t[62];let $;t[63]!==N||t[64]!==w?($=n.jsxRuntimeExports.jsxs($e.GraphArea,{ref:mt,children:[N,w]}),t[63]=N,t[64]=w,t[65]=$):$=t[65];let M;t[66]!==x?.footnote||t[67]!==x?.source||t[68]!==Z||t[69]!==S||t[70]!==u?.footnote||t[71]!==u?.source||t[72]!==s?(M=S||Z?n.jsxRuntimeExports.jsx(ti.GraphFooter,{styles:{footnote:u?.footnote,source:u?.source},classNames:{footnote:x?.footnote,source:x?.source},sources:S,footNote:Z,width:s}):null,t[66]=x?.footnote,t[67]=x?.source,t[68]=Z,t[69]=S,t[70]=u?.footnote,t[71]=u?.source,t[72]=s,t[73]=M):M=t[73];let nt;return t[74]!==wt||t[75]!==J||t[76]!==at||t[77]!==D||t[78]!==b||t[79]!==g||t[80]!==C||t[81]!==Rt||t[82]!==pt||t[83]!==dt||t[84]!==T||t[85]!==$||t[86]!==M||t[87]!==c||t[88]!==s?(nt=n.jsxRuntimeExports.jsxs($e.GraphContainer,{className:pt,style:dt,id:at,ref:Nt,"aria-label":wt,backgroundColor:J,theme:c,language:b,minHeight:g,width:s,height:D,relativeHeight:Rt,padding:C,children:[T,$,M]}),t[74]=wt,t[75]=J,t[76]=at,t[77]=D,t[78]=b,t[79]=g,t[80]=C,t[81]=Rt,t[82]=pt,t[83]=dt,t[84]=T,t[85]=$,t[86]=M,t[87]=c,t[88]=s,t[89]=nt):nt=t[89],nt}function Ei(i){return i!==void 0}function Ci(i){return i!==void 0}function Ai(i){return i.data}function ki(i){return i!==void 0}function Li(i){return i.data}exports.SimpleLineChart=bi;
-//# sourceMappingURL=SimpleLineChart.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-gGpyby2o.cjs`);const e=require(`./LineChart-Do_hKdIv.cjs`);exports.SimpleLineChart=e.t;

package/dist/SimpleLineChart.d.ts

@@ -1,237 +1,2 @@
-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;
-    colorLegend?: string;
-    modal?: 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 HighlightAreaSettingsDataType {
-    coordinates: [number | string | null, number | string | null];
-    style?: React.CSSProperties;
-    className?: string;
-    color?: string;
-    strokeWidth?: number;
-}
-
-declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'ja' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
-
-declare interface LineChartDataType {
-    date: number | string;
-    y: number;
-    data?: object;
-}
-
-declare interface NumberFormatOptions {
-    locale?: string;
-    precision?: number;
-    prefix?: string;
-    suffix?: string;
-    padZeros?: boolean;
-}
-
-declare interface Props {
-    /** Array of data objects */
-    data: LineChartDataType[];
-    /** Title of the graph */
-    graphTitle?: string | React.ReactNode;
-    /** Description of the graph */
-    graphDescription?: string | React.ReactNode;
-    /** Footnote for the graph */
-    footNote?: string | React.ReactNode;
-    /** Source data for the graph */
-    sources?: SourcesDataType[];
-    /** Accessibility label */
-    ariaLabel?: string;
-    /** Colors of the lines */
-    lineColor?: string;
-    /** Background color of the graph */
-    backgroundColor?: string | boolean;
-    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
-    styles?: StyleObject;
-    /** Custom class names */
-    classNames?: ClassNameObject;
-    /** Width of the graph */
-    width?: number;
-    /** Height of the graph */
-    height?: number;
-    /** Minimum height of the graph */
-    minHeight?: number;
-    /** Relative height scaling factor. This overwrites the height props */
-    relativeHeight?: number;
-    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
-    padding?: string;
-    /** Left margin of the graph */
-    leftMargin?: number;
-    /** Right margin of the graph */
-    rightMargin?: number;
-    /** Top margin of the graph */
-    topMargin?: number;
-    /** Bottom margin of the graph */
-    bottomMargin?: number;
-    /** Maximum value for the chart */
-    maxValue?: number;
-    /** Minimum value for the chart */
-    minValue?: number;
-    /** Reference values for comparison */
-    refValues?: ReferenceDataType[];
-    /** Maximum value of the date for the chart */
-    maxDate?: string | number;
-    /** Minimum value of the date for the chart */
-    minDate?: string | number;
-    /** No. of ticks on the x-axis  */
-    noOfXTicks?: number;
-    /** No. of ticks on the y-axis  */
-    noOfYTicks?: number;
-    /** Toggle visibility of values */
-    showValues?: boolean;
-    /** Toggle visibility of dots on the line */
-    showDots?: boolean;
-    /** Stroke width of the line */
-    strokeWidth?: number;
-    /** Toggle the initial animation of the line. If the type is number then it uses the number as the time in seconds for animation. */
-    animate?: boolean | AnimateDataType;
-    /** Format of the date in the data object. Available formats can be found [here](https://date-fns.org/docs/format)  */
-    dateFormat?: string;
-    /** Title for the Y-axis */
-    yAxisTitle?: string;
-    /** Annotations on the chart */
-    annotations?: AnnotationSettingsDataType[];
-    /** Highlighted area(square) on the chart  */
-    highlightAreaSettings?: HighlightAreaSettingsDataType[];
-    /** Highlighted area(custom shape) on the chart  */
-    customHighlightAreaSettings?: CustomHighlightAreaSettingsDataType[];
-    /** Toggles the visibility of the regression line for the data. If the type is string then string is use to define the color of the line. */
-    regressionLine?: boolean | string;
-    /** Curve type for the line */
-    curveType?: CurveTypes;
-    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
-    numberDisplayOptions?: NumberFormatOptions;
-    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
-    customLayers?: CustomLayerDataType[];
-    /** Enable graph download option as png */
-    graphDownload?: boolean;
-    /** Enable data download option as a csv */
-    dataDownload?: boolean;
-    /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
-    tooltip?: string | ((_d: any) => React.ReactNode);
-    /** Callback for mouse over event */
-    onSeriesMouseOver?: (_d: any) => void;
-    /** Language setting  */
-    language?: Languages;
-    /** Color theme */
-    theme?: 'light' | 'dark';
-    /** Unique ID for the graph */
-    graphID?: string;
-}
-
-declare interface ReferenceDataType {
-    value: number | null;
-    text: string;
-    color?: string;
-    styles?: {
-        line?: React.CSSProperties;
-        text?: React.CSSProperties;
-    };
-    classNames?: {
-        line?: string;
-        text?: string;
-    };
-}
-
-export declare function SimpleLineChart(props: Props): JSX.Element;
-
-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;
-    modal?: React.CSSProperties;
-}
-
-export { }
+export * from './Components/Graphs/LineCharts/LineChart/index'
+export {}