@undp/data-viz 1.5.7 → 1.5.9

package/dist/ButterflyChart.js

@@ -1,38 +1,38 @@
-import { j as e, m as et } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { j as e, m as et } from "./index-CHPV5EwG-DBWUSD9b.js";
 import { useRef as gt, useState as S, useEffect as yt } from "react";
-import { g as Nt, x as At } from "./getSliderMarks-9cNoRkDx.js";
+import { g as Nt, x as At } from "./getSliderMarks-_pYOWEtO.js";
 import { p as Ct, f as kt } from "./parse-DlCRUFh_.js";
 import { i as bt } from "./index-Bwrro8-q.js";
-import { X as Lt } from "./Modal-DVVwpKhP.js";
+import { G as Lt } from "./Modal-Cg8daIlV.js";
 import { n as vt } from "./numberFormattingFunction-14YCbkN2.js";
-import { T as Vt } from "./Tooltip-CVCGWyzw.js";
+import { T as Vt } from "./Tooltip-6LIdPQGC.js";
 import { s as Tt } from "./string2HTML-oFCROsus.js";
-import { X as wt } from "./XTicksAndGridLines-Bn9u5gOM.js";
-import { A as jt } from "./Axis-Ddg-seDi.js";
-import { Y as Ot } from "./YAxesLabels-DECkMgq8.js";
-import { a as Bt } from "./ReferenceLine-CfAW3vKJ.js";
+import { X as wt } from "./XTicksAndGridLines-DuydSnZ_.js";
+import { A as jt } from "./Axis-4gUOL8B7.js";
+import { Y as Ot } from "./YAxesLabels-DlDyLvhi.js";
+import { a as Bt } from "./ReferenceLine-CPMaAX0r.js";
 import { b as Dt } from "./band-BEjh2CHI.js";
 import { a as Mt } from "./linear-DUdu7l2G.js";
-import { u as It } from "./use-in-view-yS6jzJAp.js";
-import { m as I } from "./proxy-CkpFesk1.js";
-import { A as dt } from "./index-CNvov0eg.js";
+import { u as It } from "./use-in-view-DR-UTB96.js";
+import { m as I } from "./proxy-BYIC9BuT.js";
+import { A as dt } from "./index-Cwgh7i7X.js";
 import { GraphFooter as St } from "./GraphFooter.js";
 import { GraphHeader as Ft } from "./GraphHeader.js";
-import { ColorLegend as Ht } from "./ColorLegend.js";
+import { ColorLegend as Gt } from "./ColorLegend.js";
 import { Colors as $t } from "./Colors.js";
-import { E as Pt } from "./EmptyState-DdTp-Mdn.js";
-import { P as Rt, f as Xt } from "./index-BmCqpO1B.js";
+import { E as Ht } from "./EmptyState-36lXXyui.js";
+import { P as Pt, f as Rt } from "./index-zZjQEHlm.js";
 import { c as ut } from "./checkIfNullOrUndefined-DmfiKkNw.js";
 import { a as Et } from "./ensureCompleteData-DlmibgaI.js";
-import { u as Gt } from "./uniqBy-BHy4I8PK.js";
+import { u as Xt } from "./uniqBy-BHy4I8PK.js";
 import { s as Yt } from "./sort-DfK1b0F5.js";
 import { c as Wt } from "./init-BhZylTFx.js";
 function zt(z) {
   const {
-    data: c,
+    data: m,
     width: y,
     height: j,
-    barColors: m,
+    barColors: o,
     centerGap: d,
     refValues: s,
     maxValue: B,
@@ -46,10 +46,10 @@ function zt(z) {
     tooltip: J,
     onSeriesMouseOver: F,
     barPadding: mt,
-    truncateBy: H,
+    truncateBy: G,
     onSeriesMouseClick: k,
     showTicks: it,
-    suffix: X,
+    suffix: R,
     prefix: E,
     resetSelectionOnDoubleClick: at,
     detailsOnClick: $,
@@ -57,7 +57,7 @@ function zt(z) {
     classNames: l,
     noOfTicks: N,
     animate: x,
-    precision: G,
+    precision: X,
     customLayers: rt,
     minValueLeftBar: L,
     minValueRightBar: V,
@@ -65,12 +65,12 @@ function zt(z) {
   } = z, Q = gt(null), b = It(Q, {
     once: x.once,
     amount: x.amount
-  }), [st, v] = S(void 0), [T, P] = S(void 0), [lt, O] = S(void 0), [A, f] = S(void 0), h = {
+  }), [st, v] = S(void 0), [T, H] = S(void 0), [lt, O] = S(void 0), [A, f] = S(void 0), h = {
     top: _,
     bottom: ct,
     left: ot,
     right: nt
-  }, C = y - h.left - h.right, w = j - h.top - h.bottom, Y = c.map((t, r) => ({ ...t, id: `${r}` })), a = Dt().domain(Y.map((t) => `${t.id}`)).range([w, 0]).paddingInner(mt), o = Mt().domain([q, B]).range([0, (C - d) / 2]).nice(), D = o.ticks(N), n = Mt().domain([q, B]).range([(C - d) / 2, 0]).nice(), Z = n.ticks(N);
+  }, C = y - h.left - h.right, w = j - h.top - h.bottom, Y = m.map((t, r) => ({ ...t, id: `${r}` })), a = Dt().domain(Y.map((t) => `${t.id}`)).range([w, 0]).paddingInner(mt), c = Mt().domain([q, B]).range([0, (C - d) / 2]).nice(), D = c.ticks(N), n = Mt().domain([q, B]).range([(C - d) / 2, 0]).nice(), Z = n.ticks(N);
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       I.svg,
@@ -98,12 +98,12 @@ function zt(z) {
                   gridLines: l?.xAxis?.gridLines,
                   labels: l?.xAxis?.labels
                 },
-                suffix: X,
+                suffix: R,
                 prefix: E,
                 labelType: "secondary",
                 showGridLines: !0,
                 leftLabel: !0,
-                precision: G
+                precision: X
               }
             ) : null,
             /* @__PURE__ */ e.jsxs(dt, { children: [
@@ -116,7 +116,7 @@ function zt(z) {
                     v(t), f(p.clientY), O(p.clientX), F?.(t);
                   },
                   onClick: () => {
-                    (k || $) && (bt(T, t) && at ? (P(void 0), k?.(void 0)) : (P(t), k?.(t)));
+                    (k || $) && (bt(T, t) && at ? (H(void 0), k?.(void 0)) : (H(t), k?.(t)));
                   },
                   onMouseMove: (p) => {
                     v(t), f(p.clientY), O(p.clientX);
@@ -129,7 +129,7 @@ function zt(z) {
                       I.rect,
                       {
                         y: a(`${r}`),
-                        style: { fill: m[0] },
+                        style: { fill: o[0] },
                         height: a.bandwidth(),
                         variants: {
                           initial: {
@@ -156,7 +156,6 @@ function zt(z) {
                       {
                         y: a(`${r}`) + a.bandwidth() / 2,
                         style: {
-                          fill: m[0],
                           textAnchor: t.rightBar && t.rightBar > 0 ? "end" : "start",
                           ...u?.graphObjectValues || {}
                         },
@@ -170,17 +169,19 @@ function zt(z) {
                         variants: {
                           initial: {
                             x: n(0),
-                            opacity: 0
+                            opacity: 0,
+                            fill: o[0]
                           },
                           whileInView: {
                             x: t.leftBar ? n(t.leftBar) : n(L < 0 ? 0 : L),
                             opacity: 1,
+                            fill: o[0],
                             transition: { duration: x.duration }
                           }
                         },
                         initial: "initial",
                         animate: b ? "whileInView" : "initial",
-                        children: vt(t.rightBar, K, G, E, X)
+                        children: vt(t.rightBar, K, X, E, R)
                       }
                     ) : null
                   ]
@@ -221,7 +222,7 @@ function zt(z) {
               wt,
               {
                 values: D.filter((t) => t !== 0),
-                x: D.filter((t) => t !== 0).map((t) => o(t)),
+                x: D.filter((t) => t !== 0).map((t) => c(t)),
                 y1: 0 - _,
                 y2: w + h.bottom,
                 styles: {
@@ -232,11 +233,11 @@ function zt(z) {
                   gridLines: l?.xAxis?.gridLines,
                   labels: l?.xAxis?.labels
                 },
-                suffix: X,
+                suffix: R,
                 prefix: E,
                 labelType: "secondary",
                 showGridLines: !0,
-                precision: G
+                precision: X
               }
             ) : null,
             /* @__PURE__ */ e.jsxs(dt, { children: [
@@ -249,7 +250,7 @@ function zt(z) {
                     v(t), f(p.clientY), O(p.clientX), F?.(t);
                   },
                   onClick: () => {
-                    (k || $) && (bt(T, t) && at ? (P(void 0), k?.(void 0)) : (P(t), k?.(t)));
+                    (k || $) && (bt(T, t) && at ? (H(void 0), k?.(void 0)) : (H(t), k?.(t)));
                   },
                   onMouseMove: (p) => {
                     v(t), f(p.clientY), O(p.clientX);
@@ -262,21 +263,21 @@ function zt(z) {
                       I.rect,
                       {
                         y: a(`${r}`),
-                        style: { fill: m[1] },
+                        style: { fill: o[1] },
                         height: a.bandwidth(),
                         exit: {
-                          x: o(0),
+                          x: c(0),
                           width: 0,
                           transition: { duration: x.duration }
                         },
                         variants: {
                           initial: {
-                            x: o(0),
+                            x: c(0),
                             width: 0
                           },
                           whileInView: {
-                            x: t.rightBar >= 0 ? o(0) : o(t.rightBar),
-                            width: t.rightBar >= 0 ? o(t.rightBar) - o(0) : o(0) - o(t.rightBar),
+                            x: t.rightBar >= 0 ? c(0) : c(t.rightBar),
+                            width: t.rightBar >= 0 ? c(t.rightBar) - c(0) : c(0) - c(t.rightBar),
                             transition: { duration: x.duration }
                           }
                         },
@@ -289,7 +290,6 @@ function zt(z) {
                       {
                         y: a(`${r}`) + a.bandwidth() / 2,
                         style: {
-                          fill: m[1],
                           textAnchor: t.rightBar && t.rightBar < 0 ? "end" : "start",
                           ...u?.graphObjectValues || {}
                         },
@@ -302,18 +302,20 @@ function zt(z) {
                         },
                         variants: {
                           initial: {
-                            x: o(0),
-                            opacity: 0
+                            x: c(0),
+                            opacity: 0,
+                            fill: o[1]
                           },
                           whileInView: {
-                            x: t.rightBar ? o(t.rightBar) : o(V < 0 ? 0 : V),
+                            x: t.rightBar ? c(t.rightBar) : c(V < 0 ? 0 : V),
                             opacity: 1,
+                            fill: o[1],
                             transition: { duration: x.duration }
                           }
                         },
                         initial: "initial",
                         animate: b ? "whileInView" : "initial",
-                        children: vt(t.rightBar, K, G, E, X)
+                        children: vt(t.rightBar, K, X, E, R)
                       }
                     ) : null
                   ]
@@ -325,8 +327,8 @@ function zt(z) {
                 {
                   y1: -2.5,
                   y2: w + h.bottom,
-                  x1: o(V < 0 ? 0 : V),
-                  x2: o(V < 0 ? 0 : V),
+                  x1: c(V < 0 ? 0 : V),
+                  x2: c(V < 0 ? 0 : V),
                   classNames: { axis: l?.yAxis?.axis },
                   styles: { axis: u?.yAxis?.axis }
                 }
@@ -336,7 +338,7 @@ function zt(z) {
                 {
                   text: t.text,
                   color: t.color,
-                  x: o(t.value),
+                  x: c(t.value),
                   y1: 0 - h.top,
                   y2: w + h.bottom,
                   textSide: "right",
@@ -352,7 +354,7 @@ function zt(z) {
           /* @__PURE__ */ e.jsx(dt, { children: /* @__PURE__ */ e.jsx(I.g, { transform: `translate(${C / 2},0)`, children: Y.map((t, r) => /* @__PURE__ */ e.jsx(
             Ot,
             {
-              value: `${t.label}`.length < H ? `${t.label}` : `${`${t.label}`.substring(0, H)}...`,
+              value: `${t.label}`.length < G ? `${t.label}` : `${`${t.label}`.substring(0, G)}...`,
               y: a(`${t.id}`),
               x: 0 - d / 2,
               width: d,
@@ -370,7 +372,7 @@ function zt(z) {
               "text",
               {
                 style: {
-                  fill: m[0],
+                  fill: o[0],
                   textAnchor: "end",
                   ...u?.yAxis?.title
                 },
@@ -386,7 +388,7 @@ function zt(z) {
               "text",
               {
                 style: {
-                  fill: m[1],
+                  fill: o[1],
                   textAnchor: "start",
                   ...u?.yAxis?.title
                 },
@@ -419,7 +421,7 @@ function zt(z) {
       {
         open: T !== void 0,
         onClose: () => {
-          P(void 0);
+          H(void 0);
         },
         children: /* @__PURE__ */ e.jsx(
           "div",
@@ -433,16 +435,16 @@ function zt(z) {
     ) : null
   ] });
 }
-function W(z, c, y, j) {
-  const m = z.map((B) => B[c]).filter((B) => !ut(B)), d = ut(y) ? Math.min(...m) >= 0 ? 0 : Math.min(...m) : y, s = ut(j) ? Math.max(...m) < 0 ? 0 : Math.max(...m) : j;
+function W(z, m, y, j) {
+  const o = z.map((B) => B[m]).filter((B) => !ut(B)), d = ut(y) ? Math.min(...o) >= 0 ? 0 : Math.min(...o) : y, s = ut(j) ? Math.max(...o) < 0 ? 0 : Math.max(...o) : j;
   return { min: d, max: s };
 }
 function je(z) {
   const {
-    data: c,
+    data: m,
     graphTitle: y,
     sources: j,
-    graphDescription: m,
+    graphDescription: o,
     height: d,
     width: s,
     footNote: B,
@@ -459,10 +461,10 @@ function je(z) {
     rightBarTitle: J = "Right bar graph",
     leftBarTitle: F = "Left bar graph",
     tooltip: mt,
-    relativeHeight: H,
+    relativeHeight: G,
     onSeriesMouseOver: k,
     graphID: it,
-    barPadding: X = 0.25,
+    barPadding: R = 0.25,
     truncateBy: E = 999,
     onSeriesMouseClick: at,
     centerGap: $ = 100,
@@ -470,7 +472,7 @@ function je(z) {
     maxValue: l,
     minValue: N,
     refValues: x = [],
-    suffix: G = "",
+    suffix: X = "",
     prefix: rt = "",
     showTicks: L = !0,
     showColorScale: V = !1,
@@ -480,7 +482,7 @@ function je(z) {
     colorLegendTitle: st,
     minHeight: v = 0,
     theme: T = "light",
-    ariaLabel: P,
+    ariaLabel: H,
     resetSelectionOnDoubleClick: lt = !0,
     detailsOnClick: O,
     styles: A,
@@ -490,22 +492,22 @@ function je(z) {
     precision: w = 2,
     customLayers: Y = [],
     timeline: a = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 },
-    naLabel: o = "NA"
+    naLabel: c = "NA"
   } = z, [D, n] = S(0), [Z, t] = S(0), [r, p] = S(a.autoplay), g = Yt(
-    Gt(c, "date", !0).map(
+    Xt(m, "date", !0).map(
       (i) => Ct(`${i}`, a.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()
     ),
-    (i, R) => Wt(i, R)
+    (i, P) => Wt(i, P)
   ), [ht, xt] = S(a.autoplay ? 0 : g.length - 1), tt = gt(null), ft = gt(null);
   yt(() => {
-    const i = new ResizeObserver((R) => {
-      n(s || R[0].target.clientWidth || 620), t(d || R[0].target.clientHeight || 480);
+    const i = new ResizeObserver((P) => {
+      n(s || P[0].target.clientWidth || 620), t(d || P[0].target.clientHeight || 480);
     });
     return tt.current && (t(tt.current.clientHeight || 480), n(tt.current.clientWidth || 620), s || i.observe(tt.current)), () => i.disconnect();
   }, [s, d]), yt(() => {
     const i = setInterval(
       () => {
-        xt((R) => R < g.length - 1 ? R + 1 : 0);
+        xt((P) => P < g.length - 1 ? P + 1 : 0);
       },
       (a.speed || 2) * 1e3
     );
@@ -536,14 +538,14 @@ function je(z) {
           },
           id: it,
           ref: ft,
-          "aria-label": P || `${y ? `The graph shows ${y}. ` : ""}This is a diverging bar chart. ${m ? ` ${m}` : ""}`,
+          "aria-label": H || `${y ? `The graph shows ${y}. ` : ""}This is a diverging bar chart. ${o ? ` ${o}` : ""}`,
           children: /* @__PURE__ */ e.jsx(
             "div",
             {
               className: "flex grow",
               style: { padding: M ? q || "1rem" : q || 0 },
               children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                y || m || K || Q ? /* @__PURE__ */ e.jsx(
+                y || o || K || Q ? /* @__PURE__ */ e.jsx(
                   Ft,
                   {
                     styles: {
@@ -555,10 +557,10 @@ function je(z) {
                       description: f?.description
                     },
                     graphTitle: y,
-                    graphDescription: m,
+                    graphDescription: o,
                     width: s,
                     graphDownload: K ? ft.current : void 0,
-                    dataDownload: Q ? c.map((i) => i.data).filter((i) => i !== void 0).length > 0 ? c.map((i) => i.data).filter((i) => i !== void 0) : c.filter((i) => i !== void 0) : null
+                    dataDownload: Q ? m.map((i) => i.data).filter((i) => i !== void 0).length > 0 ? m.map((i) => i.data).filter((i) => i !== void 0) : m.filter((i) => i !== void 0) : null
                   }
                 ) : null,
                 a.enabled && g.length > 0 && pt ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
@@ -571,7 +573,7 @@ function je(z) {
                       },
                       className: "p-0 border-0 cursor-pointer bg-transparent",
                       "aria-label": r ? "Click to pause animation" : "Click to play animation",
-                      children: r ? /* @__PURE__ */ e.jsx(Rt, {}) : /* @__PURE__ */ e.jsx(Xt, {})
+                      children: r ? /* @__PURE__ */ e.jsx(Pt, {}) : /* @__PURE__ */ e.jsx(Rt, {})
                     }
                   ),
                   /* @__PURE__ */ e.jsx(
@@ -593,9 +595,9 @@ function je(z) {
                     }
                   )
                 ] }) : null,
-                /* @__PURE__ */ e.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: c.length === 0 ? /* @__PURE__ */ e.jsx(Pt, {}) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                /* @__PURE__ */ e.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: m.length === 0 ? /* @__PURE__ */ e.jsx(Ht, {}) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
                   V ? /* @__PURE__ */ e.jsx(
-                    Ht,
+                    Gt,
                     {
                       colorLegendTitle: st,
                       colorDomain: [F, J],
@@ -613,7 +615,7 @@ function je(z) {
                         zt,
                         {
                           data: Et(
-                            c,
+                            m,
                             a.dateFormat || "yyyy"
                           ).filter(
                             (i) => a.enabled ? i.date === kt(
@@ -626,7 +628,7 @@ function je(z) {
                           centerGap: $,
                           height: Math.max(
                             v,
-                            d || (H ? v ? (s || D) * H > v ? (s || D) * H : v : (s || D) * H : Z)
+                            d || (G ? v ? (s || D) * G > v ? (s || D) * G : v : (s || D) * G : Z)
                           ),
                           truncateBy: E,
                           leftMargin: nt,
@@ -636,22 +638,22 @@ function je(z) {
                           axisTitles: [F, J],
                           tooltip: mt,
                           onSeriesMouseOver: k,
-                          barPadding: X,
+                          barPadding: R,
                           refValues: x,
                           maxValue: Math.max(
-                            W(c, "leftBar", N, l).max,
-                            W(c, "rightBar", N, l).max
+                            W(m, "leftBar", N, l).max,
+                            W(m, "rightBar", N, l).max
                           ),
                           minValue: Math.min(
-                            W(c, "leftBar", N, l).min,
-                            W(c, "rightBar", N, l).min
+                            W(m, "leftBar", N, l).min,
+                            W(m, "rightBar", N, l).min
                           ),
-                          minValueLeftBar: W(c, "leftBar", N, l).min,
-                          minValueRightBar: W(c, "rightBar", N, l).min,
+                          minValueLeftBar: W(m, "leftBar", N, l).min,
+                          minValueRightBar: W(m, "rightBar", N, l).min,
                           showValues: u,
                           onSeriesMouseClick: at,
                           showTicks: L,
-                          suffix: G,
+                          suffix: X,
                           prefix: rt,
                           resetSelectionOnDoubleClick: lt,
                           detailsOnClick: O,
@@ -661,7 +663,7 @@ function je(z) {
                           animate: C === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : C || { duration: 0, once: !0, amount: 0 },
                           precision: w,
                           customLayers: Y,
-                          naLabel: o
+                          naLabel: c
                         }
                       ) : null
                     }