@undp/data-viz 1.4.12 → 1.4.14

package/dist/DualAxisLineChart.js

@@ -1,144 +1,145 @@
 import { j as i, m as k } from "./index-CHPV5EwG-BPSP-7Jg.js";
-import { useRef as rt, useState as P, useEffect as gt } from "react";
-import { p as G, f as Mt } from "./parse-DlCRUFh_.js";
-import { s as $t } from "./index-DxagiOHo.js";
-import { n as nt } from "./numberFormattingFunction-14YCbkN2.js";
-import { T as It } from "./Tooltip-DyM5snqx.js";
-import { c as p } from "./checkIfNullOrUndefined-DmfiKkNw.js";
-import { X as Tt } from "./XTicksAndGridLines-Bn9u5gOM.js";
-import { A as pt } from "./Axis-Ddg-seDi.js";
-import { A as jt } from "./AxisTitle-BmHLMRJZ.js";
-import { H as Vt } from "./index-Cdcfp4nk.js";
-import { t as Ot } from "./time-BzJP5SPC.js";
-import { a as At } from "./linear-DUdu7l2G.js";
-import { l as bt, c as St } from "./line-CPfhohvF.js";
-import { c as Ct, s as Ft, a as Ht, m as Pt } from "./step-BrDul-H4.js";
-import { s as Wt } from "./select-DKy99ogv.js";
-import { a as Xt } from "./init-BhZylTFx.js";
-import { p as Et } from "./pointer-CWRWOsrb.js";
-import { u as Yt } from "./use-in-view-yS6jzJAp.js";
+import { useRef as lt, useState as P, useEffect as ft } from "react";
+import { p as G, f as $t } from "./parse-DlCRUFh_.js";
+import { s as It } from "./index-DxagiOHo.js";
+import { n as ot } from "./numberFormattingFunction-14YCbkN2.js";
+import { T as Tt } from "./Tooltip-DyM5snqx.js";
+import { c as g } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { X as Vt } from "./XTicksAndGridLines-Bn9u5gOM.js";
+import { A as gt } from "./Axis-Ddg-seDi.js";
+import { A as At } from "./AxisTitle-BmHLMRJZ.js";
+import { H as Ot } from "./index-Cdcfp4nk.js";
+import { t as St } from "./time-BzJP5SPC.js";
+import { a as bt } from "./linear-DUdu7l2G.js";
+import { l as Nt, c as Ct } from "./line-CPfhohvF.js";
+import { c as Ft, s as Ht, a as Pt, m as Wt } from "./step-BrDul-H4.js";
+import { s as Xt } from "./select-DKy99ogv.js";
+import { a as Et } from "./init-BhZylTFx.js";
+import { p as Yt } from "./pointer-CWRWOsrb.js";
+import { u as Gt } from "./use-in-view-yS6jzJAp.js";
 import { m as N } from "./proxy-CkpFesk1.js";
-import { GraphFooter as Gt } from "./GraphFooter.js";
-import { GraphHeader as Rt } from "./GraphHeader.js";
-import { ColorLegend as Bt } from "./ColorLegend.js";
-import { Colors as Nt } from "./Colors.js";
-import { E as zt } from "./EmptyState-DdTp-Mdn.js";
-function Ut(ot) {
+import { GraphFooter as Rt } from "./GraphFooter.js";
+import { GraphHeader as Bt } from "./GraphHeader.js";
+import { ColorLegend as zt } from "./ColorLegend.js";
+import { Colors as kt } from "./Colors.js";
+import { E as Ut } from "./EmptyState-DdTp-Mdn.js";
+function qt(ct) {
   const {
-    data: D,
+    data: L,
     width: A,
-    height: O,
+    height: V,
     lineColors: s,
-    labels: y,
-    sameAxes: m,
+    labels: u,
+    sameAxes: o,
     dateFormat: f,
     showValues: R,
-    noOfXTicks: lt,
-    rightMargin: ct,
+    noOfXTicks: mt,
+    rightMargin: xt,
     leftMargin: B,
     topMargin: z,
-    bottomMargin: mt,
+    bottomMargin: ht,
     tooltip: v,
-    highlightAreaSettings: xt,
+    highlightAreaSettings: yt,
     onSeriesMouseOver: W,
     animate: a,
     strokeWidth: U,
     showDots: X,
     noOfYTicks: q,
-    lineSuffixes: S,
-    linePrefixes: C,
+    lineSuffixes: O,
+    linePrefixes: S,
     minDate: J,
-    maxDate: L,
-    curveType: F,
-    styles: o,
+    maxDate: D,
+    curveType: C,
+    styles: l,
     classNames: n,
     precision: b,
-    customLayers: E
-  } = ot, K = rt(null), d = Yt(K, {
+    customLayers: E,
+    showAxisLabels: K
+  } = ct, Q = lt(null), y = Gt(Q, {
     once: a.once,
     amount: a.amount
-  }), [h, ht] = P(!1);
-  gt(() => {
-    if (d && !h) {
+  }), [d, F] = P(!1);
+  ft(() => {
+    if (y && !d) {
       const t = setTimeout(
         () => {
-          ht(!0);
+          F(!0);
         },
         (a.duration + 0.5) * 1e3
       );
       return () => clearTimeout(t);
     }
-  }, [d, h, a.duration]);
-  const M = F === "linear" ? St : F === "step" ? Ct : F === "stepAfter" ? Ft : F === "stepBefore" ? Ht : Pt, [$, Q] = P(void 0), [Z, _] = P(void 0), [tt, it] = P(void 0), g = {
+  }, [y, d, a.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: mt,
+    bottom: ht,
     left: B + 50,
-    right: ct + 65
-  }, w = rt(null), e = $t(
-    D.map((t) => ({
+    right: xt + 65
+  }, w = lt(null), e = It(
+    L.map((t) => ({
       ...t,
       date: G(`${t.date}`, f, /* @__PURE__ */ new Date())
     })),
     "date"
-  ), yt = xt.map((t) => ({
+  ), 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())
     ]
-  })), x = A - g.left - g.right, r = O - g.top - g.bottom, et = J ? G(`${J}`, f, /* @__PURE__ */ new Date()) : e[0].date, at = L ? G(`${L}`, 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, I = 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, l = 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, st = I > l ? I : l, c = Ot().domain([et, at]).range([0, x]), T = At().domain([
-    m ? Y : H,
-    m ? st > 0 ? st : 0 : I > 0 ? I : 0
-  ]).range([r, 0]).nice(), u = At().domain([
-    m ? Y : j,
-    m ? st > 0 ? st : 0 : l > 0 ? l : 0
-  ]).range([r, 0]).nice(), ft = bt().defined((t) => !p(t.y1)).x((t) => c(t.date)).y((t) => T(t.y1)).curve(M), dt = bt().defined((t) => !p(t.y2)).x((t) => c(t.date)).y((t) => u(t.y2)).curve(M), kt = T.ticks(q), Dt = u.ticks(q), vt = c.ticks(lt);
-  return gt(() => {
-    const t = (ut) => {
-      const wt = e[Xt(
-        e.map((Lt) => Lt.date),
-        c.invert(Et(ut)[0]),
+  })), 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
+  ]).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(() => {
+    const t = (pt) => {
+      const jt = e[Et(
+        e.map((Mt) => Mt.date),
+        m.invert(Yt(pt)[0]),
         0
       )];
-      Q(wt || e[e.length - 1]), W?.(wt || e[e.length - 1]), it(ut.clientY), _(ut.clientX);
-    }, V = () => {
-      Q(void 0), _(void 0), it(void 0), W?.(void 0);
+      _(jt || e[e.length - 1]), W?.(jt || e[e.length - 1]), at(pt.clientY), it(pt.clientX);
+    }, T = () => {
+      _(void 0), it(void 0), at(void 0), W?.(void 0);
     };
-    Wt(w.current).on("mousemove", t).on("mouseout", V);
-  }, [c, e, W]), /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+    Xt(w.current).on("mousemove", t).on("mouseout", T);
+  }, [m, e, W]), /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
     /* @__PURE__ */ i.jsx(
       N.svg,
       {
         width: `${A}px`,
-        height: `${O}px`,
-        viewBox: `0 0 ${A} ${O}`,
+        height: `${V}px`,
+        viewBox: `0 0 ${A} ${V}`,
         direction: "ltr",
-        ref: K,
-        children: /* @__PURE__ */ i.jsxs("g", { transform: `translate(${g.left},${g.top})`, children: [
+        ref: Q,
+        children: /* @__PURE__ */ i.jsxs("g", { transform: `translate(${h.left},${h.top})`, children: [
           /* @__PURE__ */ i.jsx(
-            Vt,
+            Ot,
             {
-              areaSettings: yt,
+              areaSettings: dt,
               width: x,
               height: r,
-              scale: c,
+              scale: m,
               animate: a,
-              isInView: d
+              isInView: y
             }
           ),
           /* @__PURE__ */ i.jsxs("g", { children: [
-            kt.map((t, V) => /* @__PURE__ */ i.jsxs("g", { children: [
+            Lt.map((t, T) => /* @__PURE__ */ i.jsxs("g", { children: [
               /* @__PURE__ */ i.jsx(
                 "line",
                 {
-                  y1: T(t),
-                  y2: T(t),
+                  y1: I(t),
+                  y2: I(t),
                   x1: -15,
                   x2: -20,
                   style: {
                     stroke: s[0],
                     strokeWidth: 1,
-                    ...o?.yAxis?.gridLines || {}
+                    ...l?.yAxis?.gridLines || {}
                   },
                   className: n?.yAxis?.gridLines
                 }
@@ -147,54 +148,54 @@ function Ut(ot) {
                 "text",
                 {
                   x: -25,
-                  y: T(t),
+                  y: I(t),
                   dy: "0.33em",
                   className: k("text-xs", n?.yAxis?.labels),
                   style: {
                     textAnchor: "end",
                     fill: s[0],
-                    ...o?.yAxis?.labels || {}
+                    ...l?.yAxis?.labels || {}
                   },
-                  children: nt(t, "NA", b, C[0], S[0])
+                  children: ot(t, "NA", b, S[0], O[0])
                 }
               )
-            ] }, V)),
+            ] }, T)),
             /* @__PURE__ */ i.jsx(
-              pt,
+              gt,
               {
                 y1: 0,
                 y2: r,
                 x1: -15,
                 x2: -15,
                 classNames: { axis: n?.xAxis?.axis },
-                styles: { axis: { stroke: s[0], ...o?.xAxis?.axis || {} } }
+                styles: { axis: { stroke: s[0], ...l?.xAxis?.axis || {} } }
               }
             ),
-            /* @__PURE__ */ i.jsx(
-              jt,
+            K ? /* @__PURE__ */ i.jsx(
+              At,
               {
-                x: 10 - g.left,
+                x: 10 - h.left,
                 y: r / 2,
-                style: { fill: s[0], ...o?.yAxis?.title || {} },
+                style: { fill: s[0], ...l?.yAxis?.title || {} },
                 className: n?.yAxis?.title,
-                text: y[0].length > 100 ? `${y[0].substring(0, 100)}...` : y[0],
+                text: u[0].length > 100 ? `${u[0].substring(0, 100)}...` : u[0],
                 rotate90: !0
               }
-            )
+            ) : null
           ] }),
           /* @__PURE__ */ i.jsxs("g", { children: [
-            Dt.map((t, V) => /* @__PURE__ */ i.jsxs("g", { children: [
+            Dt.map((t, T) => /* @__PURE__ */ i.jsxs("g", { children: [
               /* @__PURE__ */ i.jsx(
                 "line",
                 {
-                  y1: u(t),
-                  y2: u(t),
+                  y1: p(t),
+                  y2: p(t),
                   x1: x + 15,
                   x2: x + 20,
                   style: {
                     stroke: s[1],
                     strokeWidth: 1,
-                    ...o?.yAxis?.gridLines || {}
+                    ...l?.yAxis?.gridLines || {}
                   },
                   className: n?.yAxis?.gridLines
                 }
@@ -203,64 +204,64 @@ function Ut(ot) {
                 "text",
                 {
                   x: x + 25,
-                  y: u(t),
+                  y: p(t),
                   dy: "0.33em",
                   dx: -2,
                   style: {
                     textAnchor: "start",
                     fill: s[1],
-                    ...o?.yAxis?.labels || {}
+                    ...l?.yAxis?.labels || {}
                   },
                   className: k("text-xs", n?.yAxis?.labels),
-                  children: nt(t, "NA", b, C[1], S[1])
+                  children: ot(t, "NA", b, S[1], O[1])
                 }
               )
-            ] }, V)),
+            ] }, T)),
             /* @__PURE__ */ i.jsx(
-              pt,
+              gt,
               {
                 y1: 0,
                 y2: r,
                 x1: x + 15,
                 x2: x + 15,
                 classNames: { axis: n?.xAxis?.axis },
-                styles: { axis: { stroke: s[1], ...o?.xAxis?.axis || {} } }
+                styles: { axis: { stroke: s[1], ...l?.xAxis?.axis || {} } }
               }
             ),
-            /* @__PURE__ */ i.jsx(
-              jt,
+            K ? /* @__PURE__ */ i.jsx(
+              At,
               {
-                x: x + g.right - 15,
+                x: x + h.right - 15,
                 y: r / 2,
-                style: { fill: s[1], ...o?.yAxis?.title || {} },
+                style: { fill: s[1], ...l?.yAxis?.title || {} },
                 className: n?.yAxis?.title,
-                text: y[1].length > 100 ? `${y[1].substring(0, 100)}...` : y[1],
+                text: u[1].length > 100 ? `${u[1].substring(0, 100)}...` : u[1],
                 rotate90: !0
               }
-            )
+            ) : null
           ] }),
           /* @__PURE__ */ i.jsxs("g", { children: [
             /* @__PURE__ */ i.jsx(
-              pt,
+              gt,
               {
                 y1: r,
                 y2: r,
                 x1: -15,
                 x2: x + 15,
                 classNames: { axis: n?.xAxis?.axis },
-                styles: { axis: o?.xAxis?.axis }
+                styles: { axis: l?.xAxis?.axis }
               }
             ),
             /* @__PURE__ */ i.jsx(
-              Tt,
+              Vt,
               {
-                values: vt.map((t) => Mt(t, f)),
-                x: vt.map((t) => c(t)),
+                values: wt.map((t) => $t(t, f)),
+                x: wt.map((t) => m(t)),
                 y1: 0,
                 y2: r,
                 styles: {
-                  gridLines: o?.xAxis?.gridLines,
-                  labels: o?.xAxis?.labels
+                  gridLines: l?.xAxis?.gridLines,
+                  labels: l?.xAxis?.labels
                 },
                 classNames: {
                   gridLines: k("opacity-0", n?.xAxis?.gridLines),
@@ -289,18 +290,18 @@ function Ut(ot) {
                 variants: {
                   initial: {
                     pathLength: 0,
-                    d: ft(
+                    d: vt(
                       e.filter(
-                        (t) => !p(t.y1)
+                        (t) => !g(t.y1)
                       )
                     ) || "",
                     opacity: 1
                   },
                   whileInView: {
                     pathLength: 1,
-                    d: ft(
+                    d: vt(
                       e.filter(
-                        (t) => !p(t.y1)
+                        (t) => !g(t.y1)
                       )
                     ) || "",
                     opacity: 1,
@@ -308,15 +309,15 @@ function Ut(ot) {
                   }
                 },
                 initial: "initial",
-                animate: d ? "whileInView" : "initial"
+                animate: y ? "whileInView" : "initial"
               }
             ),
             /* @__PURE__ */ i.jsx(
               N.path,
               {
-                d: dt(
+                d: ut(
                   e.filter(
-                    (t) => !p(t.y2)
+                    (t) => !g(t.y2)
                   )
                 ) || "",
                 style: {
@@ -328,18 +329,18 @@ function Ut(ot) {
                 variants: {
                   initial: {
                     pathLength: 0,
-                    d: dt(
+                    d: ut(
                       e.filter(
-                        (t) => !p(t.y2)
+                        (t) => !g(t.y2)
                       )
                     ) || "",
                     opacity: 1
                   },
                   whileInView: {
                     pathLength: 1,
-                    d: dt(
+                    d: ut(
                       e.filter(
-                        (t) => !p(t.y2)
+                        (t) => !g(t.y2)
                       )
                     ) || "",
                     opacity: 1,
@@ -347,26 +348,26 @@ function Ut(ot) {
                   }
                 },
                 initial: "initial",
-                animate: d ? "whileInView" : "initial"
+                animate: y ? "whileInView" : "initial"
               }
             ),
-            $ ? /* @__PURE__ */ i.jsx(
+            M ? /* @__PURE__ */ i.jsx(
               "line",
               {
                 y1: 0,
                 y2: r,
-                x1: c($.date),
-                x2: c($.date),
+                x1: m(M.date),
+                x2: m(M.date),
                 className: k(
                   "undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100",
                   n?.mouseOverLine
                 ),
-                style: o?.mouseOverLine
+                style: l?.mouseOverLine
               }
             ) : null
           ] }),
-          /* @__PURE__ */ i.jsx("g", { children: e.map((t, V) => /* @__PURE__ */ i.jsxs(N.g, { children: [
-            p(t.y1) ? null : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+          /* @__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: [
               X ? /* @__PURE__ */ i.jsx(
                 N.circle,
                 {
@@ -374,29 +375,29 @@ function Ut(ot) {
                   style: { fill: s[0] },
                   exit: { opacity: 0, transition: { duration: a.duration } },
                   variants: {
-                    initial: { opacity: 0, cx: c(t.date), cy: T(t.y1) },
+                    initial: { opacity: 0, cx: m(t.date), cy: I(t.y1) },
                     whileInView: {
                       opacity: 1,
                       transition: {
-                        duration: h ? a.duration : 0.5,
-                        delay: h ? 0 : a.duration
+                        duration: d ? a.duration : 0.5,
+                        delay: d ? 0 : a.duration
                       },
-                      cx: c(t.date),
-                      cy: T(t.y1)
+                      cx: m(t.date),
+                      cy: I(t.y1)
                     }
                   },
                   initial: "initial",
-                  animate: d ? "whileInView" : "initial"
+                  animate: y ? "whileInView" : "initial"
                 }
               ) : null,
               R ? /* @__PURE__ */ i.jsx(
                 N.text,
                 {
-                  dy: p(t.y2) || t.y2 < t.y1 ? -8 : "1em",
+                  dy: g(t.y2) || t.y2 < t.y1 ? -8 : "1em",
                   style: {
                     fill: s[0],
                     textAnchor: "middle",
-                    ...o?.graphObjectValues || {}
+                    ...l?.graphObjectValues || {}
                   },
                   className: k(
                     "graph-value graph-value-line-1 text-xs font-bold",
@@ -404,30 +405,30 @@ function Ut(ot) {
                   ),
                   exit: { opacity: 0, transition: { duration: a.duration } },
                   variants: {
-                    initial: { opacity: 0, x: c(t.date), y: u(t.y1) },
+                    initial: { opacity: 0, x: m(t.date), y: p(t.y1) },
                     whileInView: {
                       opacity: 1,
-                      x: c(t.date),
-                      y: u(t.y1),
+                      x: m(t.date),
+                      y: p(t.y1),
                       transition: {
-                        duration: h ? a.duration : 0.5,
-                        delay: h ? 0 : a.duration
+                        duration: d ? a.duration : 0.5,
+                        delay: d ? 0 : a.duration
                       }
                     }
                   },
                   initial: "initial",
-                  animate: d ? "whileInView" : "initial",
-                  children: nt(
+                  animate: y ? "whileInView" : "initial",
+                  children: ot(
                     t.y1,
                     "NA",
                     b,
-                    C[0],
-                    S[0]
+                    S[0],
+                    O[0]
                   )
                 }
               ) : null
             ] }),
-            p(t.y2) ? null : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+            g(t.y2) ? null : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
               X ? /* @__PURE__ */ i.jsx(
                 N.circle,
                 {
@@ -435,29 +436,29 @@ function Ut(ot) {
                   style: { fill: s[1] },
                   exit: { opacity: 0, transition: { duration: a.duration } },
                   variants: {
-                    initial: { opacity: 0, cx: c(t.date), cy: u(t.y2) },
+                    initial: { opacity: 0, cx: m(t.date), cy: p(t.y2) },
                     whileInView: {
                       opacity: 1,
                       transition: {
-                        duration: h ? a.duration : 0.5,
-                        delay: h ? 0 : a.duration
+                        duration: d ? a.duration : 0.5,
+                        delay: d ? 0 : a.duration
                       },
-                      cx: c(t.date),
-                      cy: u(t.y2)
+                      cx: m(t.date),
+                      cy: p(t.y2)
                     }
                   },
                   initial: "initial",
-                  animate: d ? "whileInView" : "initial"
+                  animate: y ? "whileInView" : "initial"
                 }
               ) : null,
               R ? /* @__PURE__ */ i.jsx(
                 N.text,
                 {
-                  dy: p(t.y1) || t.y1 < t.y2 ? -8 : "1em",
+                  dy: g(t.y1) || t.y1 < t.y2 ? -8 : "1em",
                   style: {
                     fill: s[1],
                     textAnchor: "middle",
-                    ...o?.graphObjectValues || {}
+                    ...l?.graphObjectValues || {}
                   },
                   className: k(
                     "graph-value graph-value-line-2 text-xs font-bold",
@@ -465,30 +466,30 @@ function Ut(ot) {
                   ),
                   exit: { opacity: 0, transition: { duration: a.duration } },
                   variants: {
-                    initial: { opacity: 0, x: c(t.date), y: u(t.y2) },
+                    initial: { opacity: 0, x: m(t.date), y: p(t.y2) },
                     whileInView: {
                       opacity: 1,
-                      x: c(t.date),
-                      y: u(t.y2),
+                      x: m(t.date),
+                      y: p(t.y2),
                       transition: {
-                        duration: h ? a.duration : 0.5,
-                        delay: h ? 0 : a.duration
+                        duration: d ? a.duration : 0.5,
+                        delay: d ? 0 : a.duration
                       }
                     }
                   },
                   initial: "initial",
-                  animate: d ? "whileInView" : "initial",
-                  children: nt(
+                  animate: y ? "whileInView" : "initial",
+                  children: ot(
                     t.y2,
                     "NA",
                     b,
-                    C[1],
-                    S[1]
+                    S[1],
+                    O[1]
                   )
                 }
               ) : null
             ] })
-          ] }, V)) }),
+          ] }, T)) }),
           E.filter((t) => t.position === "after").map((t) => t.layer),
           /* @__PURE__ */ i.jsx(
             "rect",
@@ -505,94 +506,96 @@ function Ut(ot) {
         ] })
       }
     ),
-    $ && v && Z && tt ? /* @__PURE__ */ i.jsx(
-      It,
+    M && v && tt && et ? /* @__PURE__ */ i.jsx(
+      Tt,
       {
-        data: $,
+        data: M,
         body: v,
-        xPos: Z,
-        yPos: tt,
-        backgroundStyle: o?.tooltip,
+        xPos: tt,
+        yPos: et,
+        backgroundStyle: l?.tooltip,
         className: n?.tooltip
       }
     ) : null
   ] });
 }
-function vi(ot) {
+function wi(ct) {
   const {
-    data: D,
+    data: L,
     graphTitle: A,
-    sources: O,
+    sources: V,
     graphDescription: s,
-    height: y,
-    width: m,
+    height: u,
+    width: o,
     footNote: f,
     noOfXTicks: R = 10,
-    dateFormat: lt = "yyyy",
-    showValues: ct = !1,
+    dateFormat: mt = "yyyy",
+    showValues: xt = !1,
     padding: B,
     lineColors: z = [
-      Nt.light.categoricalColors.colors[0],
-      Nt.light.categoricalColors.colors[1]
+      kt.light.categoricalColors.colors[0],
+      kt.light.categoricalColors.colors[1]
     ],
-    sameAxes: mt = !1,
+    sameAxes: ht = !1,
     backgroundColor: v = !1,
-    leftMargin: xt = 80,
+    leftMargin: yt = 80,
     rightMargin: W = 80,
     topMargin: a = 20,
     bottomMargin: U = 25,
     labels: X,
     lineSuffixes: q = ["", ""],
-    linePrefixes: S = ["", ""],
-    tooltip: C,
+    linePrefixes: O = ["", ""],
+    tooltip: S,
     highlightAreaSettings: J = [],
-    relativeHeight: L,
-    onSeriesMouseOver: F,
-    graphID: o,
+    relativeHeight: D,
+    onSeriesMouseOver: C,
+    graphID: l,
     graphDownload: n = !1,
     dataDownload: b = !1,
     animate: E = !1,
     strokeWidth: K = 2,
-    showDots: d = !0,
-    language: h = "en",
-    showColorScale: ht = !0,
-    minHeight: M = 0,
-    colorLegendTitle: $,
-    theme: Q = "light",
-    ariaLabel: Z,
-    noOfYTicks: _ = 5,
-    maxDate: tt,
-    minDate: it,
-    curveType: g = "curve",
-    styles: w,
-    classNames: e,
-    precision: yt = 2,
-    customLayers: x = []
-  } = ot, [r, et] = P(0), [at, H] = P(0), j = rt(null), I = rt(null);
-  return gt(() => {
-    const l = new ResizeObserver((Y) => {
-      et(m || Y[0].target.clientWidth || 620), H(y || Y[0].target.clientHeight || 480);
+    showDots: Q = !0,
+    language: y = "en",
+    showColorScale: d = !0,
+    minHeight: F = 0,
+    colorLegendTitle: Z,
+    theme: M = "light",
+    ariaLabel: _,
+    noOfYTicks: tt = 5,
+    maxDate: it,
+    minDate: et,
+    curveType: at = "curve",
+    styles: h,
+    classNames: w,
+    precision: e = 2,
+    customLayers: dt = [],
+    showAxisLabels: x = !0
+  } = ct, [r, st] = P(0), [nt, H] = P(0), j = lt(null), $ = lt(null);
+  return ft(() => {
+    const c = new ResizeObserver((Y) => {
+      st(o || Y[0].target.clientWidth || 620), H(u || Y[0].target.clientHeight || 480);
     });
-    return j.current && (H(j.current.clientHeight || 480), et(j.current.clientWidth || 620), m || l.observe(j.current)), () => l.disconnect();
-  }, [m, y]), /* @__PURE__ */ i.jsx(
+    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(
     "div",
     {
-      className: `${Q || "light"} flex  ${m ? "w-fit grow-0" : "w-full grow"}`,
-      dir: h === "he" || h === "ar" ? "rtl" : void 0,
+      className: `${M || "light"} flex  ${o ? "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 ${h || "en"}`,
-            e?.graphContainer
+            `${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",
+            w?.graphContainer
           ),
           style: {
-            ...w?.graphContainer || {},
+            ...h?.graphContainer || {},
             ...v && v !== !0 ? { backgroundColor: v } : {}
           },
-          id: o,
-          ref: I,
-          "aria-label": Z || `${A ? `The graph shows ${A}. ` : ""}This is a line chart that show trends for two datasets over time.${s ? ` ${s}` : ""}`,
+          id: l,
+          ref: $,
+          "aria-label": _ || `${A ? `The graph shows ${A}. ` : ""}This is a line chart that show trends for two datasets over time.${s ? ` ${s}` : ""}`,
           children: /* @__PURE__ */ i.jsx(
             "div",
             {
@@ -600,29 +603,29 @@ function vi(ot) {
               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(
-                  Rt,
+                  Bt,
                   {
                     styles: {
-                      title: w?.title,
-                      description: w?.description
+                      title: h?.title,
+                      description: h?.description
                     },
                     classNames: {
-                      title: e?.title,
-                      description: e?.description
+                      title: w?.title,
+                      description: w?.description
                     },
                     graphTitle: A,
                     graphDescription: s,
-                    width: m,
-                    graphDownload: n ? I.current : void 0,
-                    dataDownload: b ? D.map((l) => l.data).filter((l) => l !== void 0).length > 0 ? D.map((l) => l.data).filter((l) => l !== void 0) : D.filter((l) => l !== void 0) : null
+                    width: o,
+                    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
                   }
                 ) : null,
-                /* @__PURE__ */ i.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: D.length === 0 ? /* @__PURE__ */ i.jsx(zt, {}) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-                  ht ? null : /* @__PURE__ */ i.jsx(
-                    Bt,
+                /* @__PURE__ */ i.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: L.length === 0 ? /* @__PURE__ */ i.jsx(Ut, {}) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+                  d ? null : /* @__PURE__ */ i.jsx(
+                    zt,
                     {
                       colorDomain: X,
-                      colorLegendTitle: $,
+                      colorLegendTitle: Z,
                       colors: z,
                       showNAColor: !1
                     }
@@ -633,57 +636,58 @@ function vi(ot) {
                       className: "flex flex-col grow justify-center leading-0",
                       ref: j,
                       "aria-label": "Graph area",
-                      children: (m || r) && (y || at) ? /* @__PURE__ */ i.jsx(
-                        Ut,
+                      children: (o || r) && (u || nt) ? /* @__PURE__ */ i.jsx(
+                        qt,
                         {
-                          data: D,
-                          sameAxes: mt,
+                          data: L,
+                          sameAxes: ht,
                           lineColors: z,
-                          width: m || r,
+                          width: o || r,
                           height: Math.max(
-                            M,
-                            y || (L ? M ? (m || r) * L > M ? (m || r) * L : M : (m || r) * L : at)
+                            F,
+                            u || (D ? F ? (o || r) * D > F ? (o || r) * D : F : (o || r) * D : nt)
                           ),
-                          dateFormat: lt,
-                          showValues: ct,
+                          dateFormat: mt,
+                          showValues: xt,
                           noOfXTicks: R,
-                          leftMargin: xt,
+                          leftMargin: yt,
                           rightMargin: W,
                           topMargin: a,
                           bottomMargin: U,
                           labels: X,
                           highlightAreaSettings: J,
-                          tooltip: C,
-                          onSeriesMouseOver: F,
+                          tooltip: S,
+                          onSeriesMouseOver: C,
                           animate: E === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : E || { duration: 0, once: !0, amount: 0 },
                           strokeWidth: K,
-                          showDots: d,
-                          noOfYTicks: _,
+                          showDots: Q,
+                          noOfYTicks: tt,
                           lineSuffixes: q,
-                          linePrefixes: S,
-                          minDate: it,
-                          maxDate: tt,
-                          curveType: g,
-                          styles: w,
-                          classNames: e,
-                          precision: yt,
-                          customLayers: x
+                          linePrefixes: O,
+                          minDate: et,
+                          maxDate: it,
+                          curveType: at,
+                          styles: h,
+                          classNames: w,
+                          precision: e,
+                          customLayers: dt,
+                          showAxisLabels: x
                         }
                       ) : null
                     }
                   )
                 ] }) }),
-                O || f ? /* @__PURE__ */ i.jsx(
-                  Gt,
+                V || f ? /* @__PURE__ */ i.jsx(
+                  Rt,
                   {
-                    styles: { footnote: w?.footnote, source: w?.source },
+                    styles: { footnote: h?.footnote, source: h?.source },
                     classNames: {
-                      footnote: e?.footnote,
-                      source: e?.source
+                      footnote: w?.footnote,
+                      source: w?.source
                     },
-                    sources: O,
+                    sources: V,
                     footNote: f,
-                    width: m
+                    width: o
                   }
                 ) : null
               ] })
@@ -695,6 +699,6 @@ function vi(ot) {
   );
 }
 export {
-  vi as DualAxisLineChart
+  wi as DualAxisLineChart
 };
 //# sourceMappingURL=DualAxisLineChart.js.map