@undp/data-viz 1.4.13 → 1.4.15

package/dist/DualAxisLineChart.js

@@ -30,7 +30,7 @@ function qt(ct) {
     height: V,
     lineColors: s,
     labels: u,
-    sameAxes: m,
+    sameAxes: o,
     dateFormat: f,
     showValues: R,
     noOfXTicks: mt,
@@ -50,7 +50,7 @@ function qt(ct) {
     minDate: J,
     maxDate: D,
     curveType: C,
-    styles: o,
+    styles: l,
     classNames: n,
     precision: b,
     customLayers: E,
@@ -87,18 +87,18 @@ function qt(ct) {
       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 - 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, 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, rt = $ > l ? $ : l, c = St().domain([st, nt]).range([0, x]), I = bt().domain([
-    m ? Y : H,
-    m ? rt > 0 ? rt : 0 : $ > 0 ? $ : 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([
-    m ? Y : j,
-    m ? rt > 0 ? rt : 0 : l > 0 ? l : 0
-  ]).range([r, 0]).nice(), vt = Nt().defined((t) => !g(t.y1)).x((t) => c(t.date)).y((t) => I(t.y1)).curve(Z), ut = Nt().defined((t) => !g(t.y2)).x((t) => c(t.date)).y((t) => p(t.y2)).curve(Z), Lt = I.ticks(q), Dt = p.ticks(q), wt = c.ticks(mt);
+    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),
-        c.invert(Yt(pt)[0]),
+        m.invert(Yt(pt)[0]),
         0
       )];
       _(jt || e[e.length - 1]), W?.(jt || e[e.length - 1]), at(pt.clientY), it(pt.clientX);
@@ -106,7 +106,7 @@ function qt(ct) {
       _(void 0), it(void 0), at(void 0), W?.(void 0);
     };
     Xt(w.current).on("mousemove", t).on("mouseout", T);
-  }, [c, e, W]), /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+  }, [m, e, W]), /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
     /* @__PURE__ */ i.jsx(
       N.svg,
       {
@@ -122,7 +122,7 @@ function qt(ct) {
               areaSettings: dt,
               width: x,
               height: r,
-              scale: c,
+              scale: m,
               animate: a,
               isInView: y
             }
@@ -139,7 +139,7 @@ function qt(ct) {
                   style: {
                     stroke: s[0],
                     strokeWidth: 1,
-                    ...o?.yAxis?.gridLines || {}
+                    ...l?.yAxis?.gridLines || {}
                   },
                   className: n?.yAxis?.gridLines
                 }
@@ -154,7 +154,7 @@ function qt(ct) {
                   style: {
                     textAnchor: "end",
                     fill: s[0],
-                    ...o?.yAxis?.labels || {}
+                    ...l?.yAxis?.labels || {}
                   },
                   children: ot(t, "NA", b, S[0], O[0])
                 }
@@ -168,7 +168,7 @@ function qt(ct) {
                 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 || {} } }
               }
             ),
             K ? /* @__PURE__ */ i.jsx(
@@ -176,7 +176,7 @@ function qt(ct) {
               {
                 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: u[0].length > 100 ? `${u[0].substring(0, 100)}...` : u[0],
                 rotate90: !0
@@ -195,7 +195,7 @@ function qt(ct) {
                   style: {
                     stroke: s[1],
                     strokeWidth: 1,
-                    ...o?.yAxis?.gridLines || {}
+                    ...l?.yAxis?.gridLines || {}
                   },
                   className: n?.yAxis?.gridLines
                 }
@@ -210,7 +210,7 @@ function qt(ct) {
                   style: {
                     textAnchor: "start",
                     fill: s[1],
-                    ...o?.yAxis?.labels || {}
+                    ...l?.yAxis?.labels || {}
                   },
                   className: k("text-xs", n?.yAxis?.labels),
                   children: ot(t, "NA", b, S[1], O[1])
@@ -225,7 +225,7 @@ function qt(ct) {
                 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 || {} } }
               }
             ),
             K ? /* @__PURE__ */ i.jsx(
@@ -233,7 +233,7 @@ function qt(ct) {
               {
                 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: u[1].length > 100 ? `${u[1].substring(0, 100)}...` : u[1],
                 rotate90: !0
@@ -249,19 +249,19 @@ function qt(ct) {
                 x1: -15,
                 x2: x + 15,
                 classNames: { axis: n?.xAxis?.axis },
-                styles: { axis: o?.xAxis?.axis }
+                styles: { axis: l?.xAxis?.axis }
               }
             ),
             /* @__PURE__ */ i.jsx(
               Vt,
               {
                 values: wt.map((t) => $t(t, f)),
-                x: wt.map((t) => c(t)),
+                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),
@@ -356,13 +356,13 @@ function qt(ct) {
               {
                 y1: 0,
                 y2: r,
-                x1: c(M.date),
-                x2: c(M.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
           ] }),
@@ -375,14 +375,14 @@ function qt(ct) {
                   style: { fill: s[0] },
                   exit: { opacity: 0, transition: { duration: a.duration } },
                   variants: {
-                    initial: { opacity: 0, cx: c(t.date), cy: I(t.y1) },
+                    initial: { opacity: 0, cx: m(t.date), cy: I(t.y1) },
                     whileInView: {
                       opacity: 1,
                       transition: {
                         duration: d ? a.duration : 0.5,
                         delay: d ? 0 : a.duration
                       },
-                      cx: c(t.date),
+                      cx: m(t.date),
                       cy: I(t.y1)
                     }
                   },
@@ -397,7 +397,7 @@ function qt(ct) {
                   style: {
                     fill: s[0],
                     textAnchor: "middle",
-                    ...o?.graphObjectValues || {}
+                    ...l?.graphObjectValues || {}
                   },
                   className: k(
                     "graph-value graph-value-line-1 text-xs font-bold",
@@ -405,10 +405,10 @@ function qt(ct) {
                   ),
                   exit: { opacity: 0, transition: { duration: a.duration } },
                   variants: {
-                    initial: { opacity: 0, x: c(t.date), y: p(t.y1) },
+                    initial: { opacity: 0, x: m(t.date), y: p(t.y1) },
                     whileInView: {
                       opacity: 1,
-                      x: c(t.date),
+                      x: m(t.date),
                       y: p(t.y1),
                       transition: {
                         duration: d ? a.duration : 0.5,
@@ -436,14 +436,14 @@ function qt(ct) {
                   style: { fill: s[1] },
                   exit: { opacity: 0, transition: { duration: a.duration } },
                   variants: {
-                    initial: { opacity: 0, cx: c(t.date), cy: p(t.y2) },
+                    initial: { opacity: 0, cx: m(t.date), cy: p(t.y2) },
                     whileInView: {
                       opacity: 1,
                       transition: {
                         duration: d ? a.duration : 0.5,
                         delay: d ? 0 : a.duration
                       },
-                      cx: c(t.date),
+                      cx: m(t.date),
                       cy: p(t.y2)
                     }
                   },
@@ -458,7 +458,7 @@ function qt(ct) {
                   style: {
                     fill: s[1],
                     textAnchor: "middle",
-                    ...o?.graphObjectValues || {}
+                    ...l?.graphObjectValues || {}
                   },
                   className: k(
                     "graph-value graph-value-line-2 text-xs font-bold",
@@ -466,10 +466,10 @@ function qt(ct) {
                   ),
                   exit: { opacity: 0, transition: { duration: a.duration } },
                   variants: {
-                    initial: { opacity: 0, x: c(t.date), y: p(t.y2) },
+                    initial: { opacity: 0, x: m(t.date), y: p(t.y2) },
                     whileInView: {
                       opacity: 1,
-                      x: c(t.date),
+                      x: m(t.date),
                       y: p(t.y2),
                       transition: {
                         duration: d ? a.duration : 0.5,
@@ -513,7 +513,7 @@ function qt(ct) {
         body: v,
         xPos: tt,
         yPos: et,
-        backgroundStyle: o?.tooltip,
+        backgroundStyle: l?.tooltip,
         className: n?.tooltip
       }
     ) : null
@@ -526,7 +526,7 @@ function wi(ct) {
     sources: V,
     graphDescription: s,
     height: u,
-    width: m,
+    width: o,
     footNote: f,
     noOfXTicks: R = 10,
     dateFormat: mt = "yyyy",
@@ -549,7 +549,7 @@ function wi(ct) {
     highlightAreaSettings: J = [],
     relativeHeight: D,
     onSeriesMouseOver: C,
-    graphID: o,
+    graphID: l,
     graphDownload: n = !1,
     dataDownload: b = !1,
     animate: E = !1,
@@ -572,27 +572,28 @@ function wi(ct) {
     showAxisLabels: x = !0
   } = ct, [r, st] = P(0), [nt, H] = P(0), j = lt(null), $ = lt(null);
   return ft(() => {
-    const l = new ResizeObserver((Y) => {
-      st(m || Y[0].target.clientWidth || 620), H(u || Y[0].target.clientHeight || 480);
+    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), st(j.current.clientWidth || 620), m || l.observe(j.current)), () => l.disconnect();
-  }, [m, u]), /* @__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: `${M || "light"} flex  ${m ? "w-fit grow-0" : "w-full grow"}`,
+      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 ${y || "en"}`,
+            o ? "w-fit" : "w-full",
             w?.graphContainer
           ),
           style: {
             ...h?.graphContainer || {},
             ...v && v !== !0 ? { backgroundColor: v } : {}
           },
-          id: o,
+          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(
@@ -614,13 +615,13 @@ function wi(ct) {
                     },
                     graphTitle: A,
                     graphDescription: s,
-                    width: m,
+                    width: o,
                     graphDownload: n ? $.current : void 0,
-                    dataDownload: b ? L.map((l) => l.data).filter((l) => l !== void 0).length > 0 ? L.map((l) => l.data).filter((l) => l !== void 0) : L.filter((l) => l !== void 0) : null
+                    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: L.length === 0 ? /* @__PURE__ */ i.jsx(Ut, {}) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-                  d ? null : /* @__PURE__ */ i.jsx(
+                  d ? /* @__PURE__ */ i.jsx(
                     zt,
                     {
                       colorDomain: X,
@@ -628,23 +629,23 @@ function wi(ct) {
                       colors: z,
                       showNAColor: !1
                     }
-                  ),
+                  ) : null,
                   /* @__PURE__ */ i.jsx(
                     "div",
                     {
                       className: "flex flex-col grow justify-center leading-0",
                       ref: j,
                       "aria-label": "Graph area",
-                      children: (m || r) && (u || nt) ? /* @__PURE__ */ i.jsx(
+                      children: (o || r) && (u || nt) ? /* @__PURE__ */ i.jsx(
                         qt,
                         {
                           data: L,
                           sameAxes: ht,
                           lineColors: z,
-                          width: m || r,
+                          width: o || r,
                           height: Math.max(
                             F,
-                            u || (D ? F ? (m || r) * D > F ? (m || r) * D : F : (m || r) * D : nt)
+                            u || (D ? F ? (o || r) * D > F ? (o || r) * D : F : (o || r) * D : nt)
                           ),
                           dateFormat: mt,
                           showValues: xt,
@@ -686,7 +687,7 @@ function wi(ct) {
                     },
                     sources: V,
                     footNote: f,
-                    width: m
+                    width: o
                   }
                 ) : null
               ] })