@undp/data-viz 1.5.7 → 1.5.8

package/dist/DualAxisLineChart.js

@@ -1,12 +1,12 @@
 import { j as i, m as k } from "./index-CHPV5EwG-BPSP-7Jg.js";
-import { useRef as lt, useState as P, useEffect as ft } from "react";
+import { useRef as ot, useState as P, useEffect as gt } from "react";
 import { p as G, f as $t } from "./parse-DlCRUFh_.js";
 import { o as It } from "./index-DvVprvy6.js";
-import { n as ot } from "./numberFormattingFunction-14YCbkN2.js";
+import { n as lt } from "./numberFormattingFunction-14YCbkN2.js";
 import { T as Tt } from "./Tooltip-CVCGWyzw.js";
-import { c as g } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { c as f } from "./checkIfNullOrUndefined-DmfiKkNw.js";
 import { X as Vt } from "./XTicksAndGridLines-Bn9u5gOM.js";
-import { A as gt } from "./Axis-Ddg-seDi.js";
+import { A as ft } from "./Axis-Ddg-seDi.js";
 import { A as At } from "./AxisTitle-BmHLMRJZ.js";
 import { H as Ot } from "./index-DKCxu1Gh.js";
 import { t as St } from "./time-BzJP5SPC.js";
@@ -28,10 +28,10 @@ function qt(ct) {
     data: L,
     width: A,
     height: V,
-    lineColors: s,
+    lineColors: a,
     labels: u,
-    sameAxes: o,
-    dateFormat: f,
+    sameAxes: l,
+    dateFormat: g,
     showValues: R,
     noOfXTicks: mt,
     rightMargin: xt,
@@ -41,7 +41,7 @@ function qt(ct) {
     tooltip: v,
     highlightAreaSettings: yt,
     onSeriesMouseOver: W,
-    animate: a,
+    animate: s,
     strokeWidth: U,
     showDots: X,
     noOfYTicks: q,
@@ -50,52 +50,52 @@ function qt(ct) {
     minDate: J,
     maxDate: D,
     curveType: C,
-    styles: l,
+    styles: o,
     classNames: n,
     precision: b,
     customLayers: E,
     showAxisLabels: K
-  } = ct, Q = lt(null), y = Gt(Q, {
-    once: a.once,
-    amount: a.amount
+  } = ct, Q = ot(null), y = Gt(Q, {
+    once: s.once,
+    amount: s.amount
   }), [d, F] = P(!1);
-  ft(() => {
+  gt(() => {
     if (y && !d) {
       const t = setTimeout(
         () => {
           F(!0);
         },
-        (a.duration + 0.5) * 1e3
+        (s.duration + 0.5) * 1e3
       );
       return () => clearTimeout(t);
     }
-  }, [y, d, a.duration]);
+  }, [y, d, s.duration]);
   const Z = C === "linear" ? Ct : C === "step" ? Ft : C === "stepAfter" ? Ht : C === "stepBefore" ? Pt : Wt, [M, _] = P(void 0), [tt, it] = P(void 0), [et, at] = P(void 0), h = {
     top: z,
     bottom: ht,
     left: B + 50,
     right: xt + 65
-  }, w = lt(null), e = It(
+  }, w = ot(null), e = It(
     L.map((t) => ({
       ...t,
-      date: G(`${t.date}`, f, /* @__PURE__ */ new Date())
+      date: G(`${t.date}`, g, /* @__PURE__ */ new Date())
     })),
     ["date"],
     ["asc"]
   ), dt = yt.map((t) => ({
     ...t,
     coordinates: [
-      t.coordinates[0] === null ? null : G(`${t.coordinates[0]}`, f, /* @__PURE__ */ new Date()),
-      t.coordinates[1] === null ? null : G(`${t.coordinates[1]}`, f, /* @__PURE__ */ new Date())
+      t.coordinates[0] === null ? null : G(`${t.coordinates[0]}`, g, /* @__PURE__ */ new Date()),
+      t.coordinates[1] === null ? null : G(`${t.coordinates[1]}`, g, /* @__PURE__ */ new Date())
     ]
-  })), x = A - h.left - h.right, r = V - h.top - h.bottom, st = J ? G(`${J}`, f, /* @__PURE__ */ new Date()) : e[0].date, nt = D ? G(`${D}`, f, /* @__PURE__ */ new Date()) : e[e.length - 1].date, H = Math.min(...e.map((t) => t.y1).filter((t) => t != null)) !== 1 / 0 ? Math.min(...e.map((t) => t.y2).filter((t) => t != null)) > 0 ? 0 : Math.min(...e.map((t) => t.y1).filter((t) => t != null)) : 0, j = Math.min(...e.map((t) => t.y2).filter((t) => t != null)) !== 1 / 0 ? Math.min(...e.map((t) => t.y2).filter((t) => t != null)) > 0 ? 0 : Math.min(...e.map((t) => t.y2).filter((t) => t != null)) : 0, $ = Math.max(...e.map((t) => t.y1).filter((t) => t != null)) !== 1 / 0 ? Math.max(...e.map((t) => t.y1).filter((t) => t != null)) : 0, c = Math.max(...e.map((t) => t.y2).filter((t) => t != null)) !== 1 / 0 ? Math.max(...e.map((t) => t.y2).filter((t) => t != null)) : 0, Y = H < j ? H : j, rt = $ > c ? $ : c, m = St().domain([st, nt]).range([0, x]), I = bt().domain([
-    o ? Y : H,
-    o ? rt > 0 ? rt : 0 : $ > 0 ? $ : 0
+  })), x = A - h.left - h.right, r = V - h.top - h.bottom, st = J ? G(`${J}`, g, /* @__PURE__ */ new Date()) : e[0].date, nt = D ? G(`${D}`, g, /* @__PURE__ */ new Date()) : e[e.length - 1].date, H = Math.min(...e.map((t) => t.y1).filter((t) => t != null)) !== 1 / 0 ? Math.min(...e.map((t) => t.y2).filter((t) => t != null)) > 0 ? 0 : Math.min(...e.map((t) => t.y1).filter((t) => t != null)) : 0, j = Math.min(...e.map((t) => t.y2).filter((t) => t != null)) !== 1 / 0 ? Math.min(...e.map((t) => t.y2).filter((t) => t != null)) > 0 ? 0 : Math.min(...e.map((t) => t.y2).filter((t) => t != null)) : 0, $ = Math.max(...e.map((t) => t.y1).filter((t) => t != null)) !== 1 / 0 ? Math.max(...e.map((t) => t.y1).filter((t) => t != null)) : 0, c = Math.max(...e.map((t) => t.y2).filter((t) => t != null)) !== 1 / 0 ? Math.max(...e.map((t) => t.y2).filter((t) => t != null)) : 0, Y = H < j ? H : j, rt = $ > c ? $ : c, m = St().domain([st, nt]).range([0, x]), I = bt().domain([
+    l ? Y : H,
+    l ? rt > 0 ? rt : 0 : $ > 0 ? $ : 0
   ]).range([r, 0]).nice(), p = bt().domain([
-    o ? Y : j,
-    o ? rt > 0 ? rt : 0 : c > 0 ? c : 0
-  ]).range([r, 0]).nice(), vt = Nt().defined((t) => !g(t.y1)).x((t) => m(t.date)).y((t) => I(t.y1)).curve(Z), ut = Nt().defined((t) => !g(t.y2)).x((t) => m(t.date)).y((t) => p(t.y2)).curve(Z), Lt = I.ticks(q), Dt = p.ticks(q), wt = m.ticks(mt);
-  return ft(() => {
+    l ? Y : j,
+    l ? rt > 0 ? rt : 0 : c > 0 ? c : 0
+  ]).range([r, 0]).nice(), vt = Nt().defined((t) => !f(t.y1)).x((t) => m(t.date)).y((t) => I(t.y1)).curve(Z), ut = Nt().defined((t) => !f(t.y2)).x((t) => m(t.date)).y((t) => p(t.y2)).curve(Z), Lt = I.ticks(q), Dt = p.ticks(q), wt = m.ticks(mt);
+  return gt(() => {
     const t = (pt) => {
       const jt = e[Et(
         e.map((Mt) => Mt.date),
@@ -124,7 +124,7 @@ function qt(ct) {
               width: x,
               height: r,
               scale: m,
-              animate: a,
+              animate: s,
               isInView: y
             }
           ),
@@ -138,9 +138,9 @@ function qt(ct) {
                   x1: -15,
                   x2: -20,
                   style: {
-                    stroke: s[0],
+                    stroke: a[0],
                     strokeWidth: 1,
-                    ...l?.yAxis?.gridLines || {}
+                    ...o?.yAxis?.gridLines || {}
                   },
                   className: n?.yAxis?.gridLines
                 }
@@ -154,22 +154,22 @@ function qt(ct) {
                   className: k("text-xs", n?.yAxis?.labels),
                   style: {
                     textAnchor: "end",
-                    fill: s[0],
-                    ...l?.yAxis?.labels || {}
+                    fill: a[0],
+                    ...o?.yAxis?.labels || {}
                   },
-                  children: ot(t, "NA", b, S[0], O[0])
+                  children: lt(t, "NA", b, S[0], O[0])
                 }
               )
             ] }, T)),
             /* @__PURE__ */ i.jsx(
-              gt,
+              ft,
               {
                 y1: 0,
                 y2: r,
                 x1: -15,
                 x2: -15,
                 classNames: { axis: n?.xAxis?.axis },
-                styles: { axis: { stroke: s[0], ...l?.xAxis?.axis || {} } }
+                styles: { axis: { stroke: a[0], ...o?.xAxis?.axis || {} } }
               }
             ),
             K ? /* @__PURE__ */ i.jsx(
@@ -177,7 +177,7 @@ function qt(ct) {
               {
                 x: 10 - h.left,
                 y: r / 2,
-                style: { fill: s[0], ...l?.yAxis?.title || {} },
+                style: { fill: a[0], ...o?.yAxis?.title || {} },
                 className: n?.yAxis?.title,
                 text: u[0].length > 100 ? `${u[0].substring(0, 100)}...` : u[0],
                 rotate90: !0
@@ -194,9 +194,9 @@ function qt(ct) {
                   x1: x + 15,
                   x2: x + 20,
                   style: {
-                    stroke: s[1],
+                    stroke: a[1],
                     strokeWidth: 1,
-                    ...l?.yAxis?.gridLines || {}
+                    ...o?.yAxis?.gridLines || {}
                   },
                   className: n?.yAxis?.gridLines
                 }
@@ -210,23 +210,23 @@ function qt(ct) {
                   dx: -2,
                   style: {
                     textAnchor: "start",
-                    fill: s[1],
-                    ...l?.yAxis?.labels || {}
+                    fill: a[1],
+                    ...o?.yAxis?.labels || {}
                   },
                   className: k("text-xs", n?.yAxis?.labels),
-                  children: ot(t, "NA", b, S[1], O[1])
+                  children: lt(t, "NA", b, S[1], O[1])
                 }
               )
             ] }, T)),
             /* @__PURE__ */ i.jsx(
-              gt,
+              ft,
               {
                 y1: 0,
                 y2: r,
                 x1: x + 15,
                 x2: x + 15,
                 classNames: { axis: n?.xAxis?.axis },
-                styles: { axis: { stroke: s[1], ...l?.xAxis?.axis || {} } }
+                styles: { axis: { stroke: a[1], ...o?.xAxis?.axis || {} } }
               }
             ),
             K ? /* @__PURE__ */ i.jsx(
@@ -234,7 +234,7 @@ function qt(ct) {
               {
                 x: x + h.right - 15,
                 y: r / 2,
-                style: { fill: s[1], ...l?.yAxis?.title || {} },
+                style: { fill: a[1], ...o?.yAxis?.title || {} },
                 className: n?.yAxis?.title,
                 text: u[1].length > 100 ? `${u[1].substring(0, 100)}...` : u[1],
                 rotate90: !0
@@ -243,26 +243,26 @@ function qt(ct) {
           ] }),
           /* @__PURE__ */ i.jsxs("g", { children: [
             /* @__PURE__ */ i.jsx(
-              gt,
+              ft,
               {
                 y1: r,
                 y2: r,
                 x1: -15,
                 x2: x + 15,
                 classNames: { axis: n?.xAxis?.axis },
-                styles: { axis: l?.xAxis?.axis }
+                styles: { axis: o?.xAxis?.axis }
               }
             ),
             /* @__PURE__ */ i.jsx(
               Vt,
               {
-                values: wt.map((t) => $t(t, f)),
+                values: wt.map((t) => $t(t, g)),
                 x: wt.map((t) => m(t)),
                 y1: 0,
                 y2: r,
                 styles: {
-                  gridLines: l?.xAxis?.gridLines,
-                  labels: l?.xAxis?.labels
+                  gridLines: o?.xAxis?.gridLines,
+                  labels: o?.xAxis?.labels
                 },
                 classNames: {
                   gridLines: k("opacity-0", n?.xAxis?.gridLines),
@@ -283,17 +283,17 @@ function qt(ct) {
               N.path,
               {
                 style: {
-                  stroke: s[0],
+                  stroke: a[0],
                   strokeWidth: U,
                   fill: "none"
                 },
-                exit: { opacity: 0, transition: { duration: a.duration } },
+                exit: { opacity: 0, transition: { duration: s.duration } },
                 variants: {
                   initial: {
                     pathLength: 0,
                     d: vt(
                       e.filter(
-                        (t) => !g(t.y1)
+                        (t) => !f(t.y1)
                       )
                     ) || "",
                     opacity: 1
@@ -302,11 +302,11 @@ function qt(ct) {
                     pathLength: 1,
                     d: vt(
                       e.filter(
-                        (t) => !g(t.y1)
+                        (t) => !f(t.y1)
                       )
                     ) || "",
                     opacity: 1,
-                    transition: { duration: a.duration }
+                    transition: { duration: s.duration }
                   }
                 },
                 initial: "initial",
@@ -318,21 +318,21 @@ function qt(ct) {
               {
                 d: ut(
                   e.filter(
-                    (t) => !g(t.y2)
+                    (t) => !f(t.y2)
                   )
                 ) || "",
                 style: {
-                  stroke: s[1],
+                  stroke: a[1],
                   strokeWidth: U,
                   fill: "none"
                 },
-                exit: { opacity: 0, transition: { duration: a.duration } },
+                exit: { opacity: 0, transition: { duration: s.duration } },
                 variants: {
                   initial: {
                     pathLength: 0,
                     d: ut(
                       e.filter(
-                        (t) => !g(t.y2)
+                        (t) => !f(t.y2)
                       )
                     ) || "",
                     opacity: 1
@@ -341,11 +341,11 @@ function qt(ct) {
                     pathLength: 1,
                     d: ut(
                       e.filter(
-                        (t) => !g(t.y2)
+                        (t) => !f(t.y2)
                       )
                     ) || "",
                     opacity: 1,
-                    transition: { duration: a.duration }
+                    transition: { duration: s.duration }
                   }
                 },
                 initial: "initial",
@@ -363,25 +363,30 @@ function qt(ct) {
                   "undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100",
                   n?.mouseOverLine
                 ),
-                style: l?.mouseOverLine
+                style: o?.mouseOverLine
               }
             ) : null
           ] }),
           /* @__PURE__ */ i.jsx("g", { children: e.map((t, T) => /* @__PURE__ */ i.jsxs(N.g, { children: [
-            g(t.y1) ? null : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+            f(t.y1) ? null : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
               X ? /* @__PURE__ */ i.jsx(
                 N.circle,
                 {
                   r: x / e.length < 5 ? 0 : x / e.length < 20 ? 2 : 4,
-                  style: { fill: s[0] },
-                  exit: { opacity: 0, transition: { duration: a.duration } },
+                  exit: { opacity: 0, transition: { duration: s.duration } },
                   variants: {
-                    initial: { opacity: 0, cx: m(t.date), cy: I(t.y1) },
+                    initial: {
+                      opacity: 0,
+                      cx: m(t.date),
+                      cy: I(t.y1),
+                      fill: a[0]
+                    },
                     whileInView: {
                       opacity: 1,
+                      fill: a[0],
                       transition: {
-                        duration: d ? a.duration : 0.5,
-                        delay: d ? 0 : a.duration
+                        duration: d ? s.duration : 0.5,
+                        delay: d ? 0 : s.duration
                       },
                       cx: m(t.date),
                       cy: I(t.y1)
@@ -394,32 +399,37 @@ function qt(ct) {
               R ? /* @__PURE__ */ i.jsx(
                 N.text,
                 {
-                  dy: g(t.y2) || t.y2 < t.y1 ? -8 : "1em",
+                  dy: f(t.y2) || t.y2 < t.y1 ? -8 : "1em",
                   style: {
-                    fill: s[0],
                     textAnchor: "middle",
-                    ...l?.graphObjectValues || {}
+                    ...o?.graphObjectValues || {}
                   },
                   className: k(
                     "graph-value graph-value-line-1 text-xs font-bold",
                     n?.graphObjectValues
                   ),
-                  exit: { opacity: 0, transition: { duration: a.duration } },
+                  exit: { opacity: 0, transition: { duration: s.duration } },
                   variants: {
-                    initial: { opacity: 0, x: m(t.date), y: p(t.y1) },
+                    initial: {
+                      opacity: 0,
+                      x: m(t.date),
+                      y: p(t.y1),
+                      fill: a[0]
+                    },
                     whileInView: {
                       opacity: 1,
                       x: m(t.date),
+                      fill: a[0],
                       y: p(t.y1),
                       transition: {
-                        duration: d ? a.duration : 0.5,
-                        delay: d ? 0 : a.duration
+                        duration: d ? s.duration : 0.5,
+                        delay: d ? 0 : s.duration
                       }
                     }
                   },
                   initial: "initial",
                   animate: y ? "whileInView" : "initial",
-                  children: ot(
+                  children: lt(
                     t.y1,
                     "NA",
                     b,
@@ -429,21 +439,26 @@ function qt(ct) {
                 }
               ) : null
             ] }),
-            g(t.y2) ? null : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+            f(t.y2) ? null : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
               X ? /* @__PURE__ */ i.jsx(
                 N.circle,
                 {
                   r: x / e.length < 5 ? 0 : x / e.length < 20 ? 2 : 4,
-                  style: { fill: s[1] },
-                  exit: { opacity: 0, transition: { duration: a.duration } },
+                  exit: { opacity: 0, transition: { duration: s.duration } },
                   variants: {
-                    initial: { opacity: 0, cx: m(t.date), cy: p(t.y2) },
+                    initial: {
+                      opacity: 0,
+                      cx: m(t.date),
+                      cy: p(t.y2),
+                      fill: a[1]
+                    },
                     whileInView: {
                       opacity: 1,
                       transition: {
-                        duration: d ? a.duration : 0.5,
-                        delay: d ? 0 : a.duration
+                        duration: d ? s.duration : 0.5,
+                        delay: d ? 0 : s.duration
                       },
+                      fill: a[1],
                       cx: m(t.date),
                       cy: p(t.y2)
                     }
@@ -455,32 +470,37 @@ function qt(ct) {
               R ? /* @__PURE__ */ i.jsx(
                 N.text,
                 {
-                  dy: g(t.y1) || t.y1 < t.y2 ? -8 : "1em",
+                  dy: f(t.y1) || t.y1 < t.y2 ? -8 : "1em",
                   style: {
-                    fill: s[1],
                     textAnchor: "middle",
-                    ...l?.graphObjectValues || {}
+                    ...o?.graphObjectValues || {}
                   },
                   className: k(
                     "graph-value graph-value-line-2 text-xs font-bold",
                     n?.graphObjectValues
                   ),
-                  exit: { opacity: 0, transition: { duration: a.duration } },
+                  exit: { opacity: 0, transition: { duration: s.duration } },
                   variants: {
-                    initial: { opacity: 0, x: m(t.date), y: p(t.y2) },
+                    initial: {
+                      opacity: 0,
+                      x: m(t.date),
+                      y: p(t.y2),
+                      fill: a[1]
+                    },
                     whileInView: {
                       opacity: 1,
                       x: m(t.date),
                       y: p(t.y2),
+                      fill: a[1],
                       transition: {
-                        duration: d ? a.duration : 0.5,
-                        delay: d ? 0 : a.duration
+                        duration: d ? s.duration : 0.5,
+                        delay: d ? 0 : s.duration
                       }
                     }
                   },
                   initial: "initial",
                   animate: y ? "whileInView" : "initial",
-                  children: ot(
+                  children: lt(
                     t.y2,
                     "NA",
                     b,
@@ -514,7 +534,7 @@ function qt(ct) {
         body: v,
         xPos: tt,
         yPos: et,
-        backgroundStyle: l?.tooltip,
+        backgroundStyle: o?.tooltip,
         className: n?.tooltip
       }
     ) : null
@@ -525,10 +545,10 @@ function wi(ct) {
     data: L,
     graphTitle: A,
     sources: V,
-    graphDescription: s,
+    graphDescription: a,
     height: u,
-    width: o,
-    footNote: f,
+    width: l,
+    footNote: g,
     noOfXTicks: R = 10,
     dateFormat: mt = "yyyy",
     showValues: xt = !1,
@@ -541,7 +561,7 @@ function wi(ct) {
     backgroundColor: v = !1,
     leftMargin: yt = 80,
     rightMargin: W = 80,
-    topMargin: a = 20,
+    topMargin: s = 20,
     bottomMargin: U = 25,
     labels: X,
     lineSuffixes: q = ["", ""],
@@ -550,7 +570,7 @@ function wi(ct) {
     highlightAreaSettings: J = [],
     relativeHeight: D,
     onSeriesMouseOver: C,
-    graphID: l,
+    graphID: o,
     graphDownload: n = !1,
     dataDownload: b = !1,
     animate: E = !1,
@@ -571,39 +591,39 @@ function wi(ct) {
     precision: e = 2,
     customLayers: dt = [],
     showAxisLabels: x = !0
-  } = ct, [r, st] = P(0), [nt, H] = P(0), j = lt(null), $ = lt(null);
-  return ft(() => {
+  } = ct, [r, st] = P(0), [nt, H] = P(0), j = ot(null), $ = ot(null);
+  return gt(() => {
     const c = new ResizeObserver((Y) => {
-      st(o || Y[0].target.clientWidth || 620), H(u || Y[0].target.clientHeight || 480);
+      st(l || Y[0].target.clientWidth || 620), H(u || Y[0].target.clientHeight || 480);
     });
-    return j.current && (H(j.current.clientHeight || 480), st(j.current.clientWidth || 620), o || c.observe(j.current)), () => c.disconnect();
-  }, [o, u]), /* @__PURE__ */ i.jsx(
+    return j.current && (H(j.current.clientHeight || 480), st(j.current.clientWidth || 620), l || c.observe(j.current)), () => c.disconnect();
+  }, [l, u]), /* @__PURE__ */ i.jsx(
     "div",
     {
-      className: `${M || "light"} flex  ${o ? "w-fit grow-0" : "w-full grow"}`,
+      className: `${M || "light"} flex  ${l ? "w-fit grow-0" : "w-full grow"}`,
       dir: y === "he" || y === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ i.jsx(
         "div",
         {
           className: k(
             `${v ? v === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${y || "en"}`,
-            o ? "w-fit" : "w-full",
+            l ? "w-fit" : "w-full",
             w?.graphContainer
           ),
           style: {
             ...h?.graphContainer || {},
             ...v && v !== !0 ? { backgroundColor: v } : {}
           },
-          id: l,
+          id: o,
           ref: $,
-          "aria-label": _ || `${A ? `The graph shows ${A}. ` : ""}This is a line chart that show trends for two datasets over time.${s ? ` ${s}` : ""}`,
+          "aria-label": _ || `${A ? `The graph shows ${A}. ` : ""}This is a line chart that show trends for two datasets over time.${a ? ` ${a}` : ""}`,
           children: /* @__PURE__ */ i.jsx(
             "div",
             {
               className: "flex grow",
               style: { padding: v ? B || "1rem" : B || 0 },
               children: /* @__PURE__ */ i.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                A || s || n || b ? /* @__PURE__ */ i.jsx(
+                A || a || n || b ? /* @__PURE__ */ i.jsx(
                   Bt,
                   {
                     styles: {
@@ -615,8 +635,8 @@ function wi(ct) {
                       description: w?.description
                     },
                     graphTitle: A,
-                    graphDescription: s,
-                    width: o,
+                    graphDescription: a,
+                    width: l,
                     graphDownload: n ? $.current : void 0,
                     dataDownload: b ? L.map((c) => c.data).filter((c) => c !== void 0).length > 0 ? L.map((c) => c.data).filter((c) => c !== void 0) : L.filter((c) => c !== void 0) : null
                   }
@@ -637,23 +657,23 @@ function wi(ct) {
                       className: "flex flex-col grow justify-center leading-0",
                       ref: j,
                       "aria-label": "Graph area",
-                      children: (o || r) && (u || nt) ? /* @__PURE__ */ i.jsx(
+                      children: (l || r) && (u || nt) ? /* @__PURE__ */ i.jsx(
                         qt,
                         {
                           data: L,
                           sameAxes: ht,
                           lineColors: z,
-                          width: o || r,
+                          width: l || r,
                           height: Math.max(
                             F,
-                            u || (D ? F ? (o || r) * D > F ? (o || r) * D : F : (o || r) * D : nt)
+                            u || (D ? F ? (l || r) * D > F ? (l || r) * D : F : (l || r) * D : nt)
                           ),
                           dateFormat: mt,
                           showValues: xt,
                           noOfXTicks: R,
                           leftMargin: yt,
                           rightMargin: W,
-                          topMargin: a,
+                          topMargin: s,
                           bottomMargin: U,
                           labels: X,
                           highlightAreaSettings: J,
@@ -678,7 +698,7 @@ function wi(ct) {
                     }
                   )
                 ] }) }),
-                V || f ? /* @__PURE__ */ i.jsx(
+                V || g ? /* @__PURE__ */ i.jsx(
                   Rt,
                   {
                     styles: { footnote: h?.footnote, source: h?.source },
@@ -687,8 +707,8 @@ function wi(ct) {
                       source: w?.source
                     },
                     sources: V,
-                    footNote: f,
-                    width: o
+                    footNote: g,
+                    width: l
                   }
                 ) : null
               ] })