@undp/data-viz 1.5.9 → 2.0.1

package/dist/ButterflyChart.js

@@ -1,696 +1,486 @@
-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-_pYOWEtO.js";
-import { p as Ct, f as kt } from "./parse-DlCRUFh_.js";
-import { i as bt } from "./index-Bwrro8-q.js";
-import { G as Lt } from "./Modal-Cg8daIlV.js";
-import { n as vt } from "./numberFormattingFunction-14YCbkN2.js";
-import { T as Vt } from "./Tooltip-6LIdPQGC.js";
-import { s as Tt } from "./string2HTML-oFCROsus.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-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 Gt } from "./ColorLegend.js";
-import { Colors as $t } from "./Colors.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 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: m,
-    width: y,
-    height: j,
-    barColors: o,
-    centerGap: d,
-    refValues: s,
-    maxValue: B,
-    minValue: q,
-    showValues: U,
-    axisTitles: M,
-    rightMargin: nt,
-    leftMargin: ot,
-    topMargin: _,
-    bottomMargin: ct,
-    tooltip: J,
-    onSeriesMouseOver: F,
-    barPadding: mt,
-    truncateBy: G,
-    onSeriesMouseClick: k,
-    showTicks: it,
-    suffix: R,
-    prefix: E,
-    resetSelectionOnDoubleClick: at,
-    detailsOnClick: $,
-    styles: u,
-    classNames: l,
-    noOfTicks: N,
-    animate: x,
-    precision: X,
-    customLayers: rt,
-    minValueLeftBar: L,
-    minValueRightBar: V,
-    naLabel: K
-  } = z, Q = gt(null), b = It(Q, {
-    once: x.once,
-    amount: x.amount
-  }), [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 = 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,
-      {
-        width: `${y}px`,
-        height: `${j}px`,
-        viewBox: `0 0 ${y} ${j}`,
-        direction: "ltr",
-        ref: Q,
-        children: /* @__PURE__ */ e.jsxs("g", { transform: `translate(${h.left},${h.top})`, children: [
-          rt.filter((t) => t.position === "before").map((t) => t.layer),
-          /* @__PURE__ */ e.jsxs("g", { transform: "translate(0,0)", children: [
-            it ? /* @__PURE__ */ e.jsx(
-              wt,
-              {
-                values: Z.filter((t) => t !== 0),
-                x: Z.filter((t) => t !== 0).map((t) => n(t)),
-                y1: 0 - _,
-                y2: w + h.bottom,
-                styles: {
-                  gridLines: u?.xAxis?.gridLines,
-                  labels: u?.xAxis?.labels
-                },
-                classNames: {
-                  gridLines: l?.xAxis?.gridLines,
-                  labels: l?.xAxis?.labels
-                },
-                suffix: R,
-                prefix: E,
-                labelType: "secondary",
-                showGridLines: !0,
-                leftLabel: !0,
-                precision: X
+import { c as he, j as i, m as se } from "./index-CHPV5EwG-Curnpaqc.js";
+import { useRef as ne, useState as Ct, useEffect as re } from "react";
+import { g as pe, N as ge } from "./getSliderMarks-HIDJ0_Cd.js";
+import { p as ye, f as ve } from "./parse-DlCRUFh_.js";
+import { i as le } from "./index-Bwrro8-q.js";
+import { l as be } from "./Modal-DGcuAHyK.js";
+import { n as ce } from "./numberFormattingFunction-14YCbkN2.js";
+import { T as we } from "./Tooltip-CwWUegPB.js";
+import { s as je } from "./string2HTML-DhG75NqA.js";
+import { X as me } from "./XTicksAndGridLines-CObVFSm4.js";
+import { A as ue } from "./Axis-CRyfcLjc.js";
+import { Y as Ae } from "./YAxesLabels-Dnnng49-.js";
+import { R as de } from "./ReferenceLine-2XCwHXQ4.js";
+import { b as Be } from "./band-CyHaVft5.js";
+import { a as fe } from "./linear-BwnDd9KF.js";
+import { u as Le } from "./use-in-view-Cxa7y1TH.js";
+import { m as Mt } from "./proxy-BxkFHwUw.js";
+import { A as ae } from "./index-BqfRwk1n.js";
+import { GraphFooter as Me } from "./GraphFooter.js";
+import { GraphHeader as Ce } from "./GraphHeader.js";
+import { ColorLegend as ke } from "./ColorLegend.js";
+import { Colors as xe } from "./Colors.js";
+import { E as Ve } from "./EmptyState-BZo1BbAn.js";
+import { P as $e, e as Ne } from "./index-D491FEn1.js";
+import { c as oe } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { b as Te } from "./ensureCompleteData-DNKEGRiP.js";
+import { u as Oe } from "./uniqBy-BHy4I8PK.js";
+import { a as De, G as Se } from "./GraphContainer-CRqzdKu2.js";
+import { s as Ie } from "./sort-BIvMlUH1.js";
+import { a as Fe } from "./init-BJFW6EwE.js";
+function Ge(s) {
+  const t = he.c(139), {
+    data: c,
+    width: L,
+    height: v,
+    barColors: r,
+    centerGap: b,
+    refValues: u,
+    maxValue: X,
+    minValue: st,
+    showValues: Y,
+    axisTitles: W,
+    rightMargin: Gt,
+    leftMargin: Rt,
+    topMargin: G,
+    bottomMargin: Pt,
+    tooltip: kt,
+    onSeriesMouseOver: z,
+    barPadding: Jt,
+    truncateBy: at,
+    onSeriesMouseClick: R,
+    showTicks: ot,
+    suffix: q,
+    prefix: U,
+    resetSelectionOnDoubleClick: Et,
+    detailsOnClick: j,
+    styles: o,
+    classNames: a,
+    noOfTicks: k,
+    animate: n,
+    precision: J,
+    customLayers: V,
+    minValueLeftBar: $,
+    minValueRightBar: N,
+    naLabel: Vt
+  } = s, Kt = ne(null);
+  let $t;
+  t[0] !== n.amount || t[1] !== n.once ? ($t = {
+    once: n.once,
+    amount: n.amount
+  }, t[0] = n.amount, t[1] = n.once, t[2] = $t) : $t = t[2];
+  const T = Le(Kt, $t), [Nt, K] = Ct(void 0), [A, nt] = Ct(void 0), [Ht, m] = Ct(void 0), [d, Q] = Ct(void 0);
+  let Tt;
+  t[3] !== Pt || t[4] !== Rt || t[5] !== Gt || t[6] !== G ? (Tt = {
+    top: G,
+    bottom: Pt,
+    left: Rt,
+    right: Gt
+  }, t[3] = Pt, t[4] = Rt, t[5] = Gt, t[6] = G, t[7] = Tt) : Tt = t[7];
+  const l = Tt, M = L - l.left - l.right, C = v - l.top - l.bottom;
+  let Z, O, _, P, rt, lt, ct, mt, tt, D, ut, dt, ft, xt;
+  if (t[8] !== n || t[9] !== r[0] || t[10] !== r[1] || t[11] !== Jt || t[12] !== b || t[13] !== a?.graphObjectValues || t[14] !== a?.xAxis?.gridLines || t[15] !== a?.xAxis?.labels || t[16] !== a?.yAxis?.axis || t[17] !== a?.yAxis?.labels || t[18] !== V || t[19] !== c || t[20] !== j || t[21] !== C || t[22] !== M || t[23] !== v || t[24] !== T || t[25] !== l.bottom || t[26] !== l.left || t[27] !== l.top || t[28] !== X || t[29] !== st || t[30] !== $ || t[31] !== N || t[32] !== A || t[33] !== Vt || t[34] !== k || t[35] !== R || t[36] !== z || t[37] !== J || t[38] !== U || t[39] !== u || t[40] !== Et || t[41] !== ot || t[42] !== Y || t[43] !== o?.graphObjectValues || t[44] !== o?.xAxis?.gridLines || t[45] !== o?.xAxis?.labels || t[46] !== o?.yAxis?.axis || t[47] !== o?.yAxis?.labels || t[48] !== q || t[49] !== G || t[50] !== at || t[51] !== L) {
+    const Yt = c.map(Ue), g = Be().domain(Yt.map(qe)).range([C, 0]).paddingInner(Jt), h = fe().domain([st, X]).range([0, (M - b) / 2]).nice(), p = h.ticks(k), f = fe().domain([st, X]).range([(M - b) / 2, 0]).nice(), Wt = f.ticks(k);
+    _ = Mt.svg, ft = `${L}px`, xt = `${v}px`, P = `0 0 ${L} ${v}`, rt = "ltr", lt = Kt, tt = `translate(${l.left},${l.top})`, t[66] !== V ? (D = V.filter(ze).map(We), t[66] = V, t[67] = D) : D = t[67];
+    const St = a?.yAxis?.axis;
+    let It;
+    t[68] !== St ? (It = {
+      axis: St
+    }, t[68] = St, t[69] = It) : It = t[69];
+    const At = o?.yAxis?.axis;
+    let it;
+    t[70] !== At ? (it = {
+      axis: At
+    }, t[70] = At, t[71] = it) : it = t[71], ut = /* @__PURE__ */ i.jsxs("g", { transform: "translate(0,0)", children: [
+      ot ? /* @__PURE__ */ i.jsx(me, { values: Wt.filter(Ye), x: Wt.filter(Xe).map((e) => f(e)), y1: 0 - G, y2: C + l.bottom, styles: {
+        gridLines: o?.xAxis?.gridLines,
+        labels: o?.xAxis?.labels
+      }, classNames: {
+        gridLines: a?.xAxis?.gridLines,
+        labels: a?.xAxis?.labels
+      }, suffix: q, prefix: U, labelType: "secondary", showGridLines: !0, leftLabel: !0, precision: J }) : null,
+      /* @__PURE__ */ i.jsxs(ae, { children: [
+        Yt.map((e, y) => /* @__PURE__ */ i.jsxs(Mt.g, { className: "undp-viz-g-with-hover", opacity: 0.85, onMouseEnter: (w) => {
+          K(e), Q(w.clientY), m(w.clientX), z?.(e);
+        }, onClick: () => {
+          (R || j) && (le(A, e) && Et ? (nt(void 0), R?.(void 0)) : (nt(e), R?.(e)));
+        }, onMouseMove: (w) => {
+          K(e), Q(w.clientY), m(w.clientX);
+        }, onMouseLeave: () => {
+          K(void 0), m(void 0), Q(void 0), z?.(void 0);
+        }, children: [
+          e.leftBar ? /* @__PURE__ */ i.jsx(Mt.rect, { y: g(`${y}`), style: {
+            fill: r[0]
+          }, height: g.bandwidth(), variants: {
+            initial: {
+              x: f(0),
+              width: 0
+            },
+            whileInView: {
+              x: e.leftBar < 0 ? f(0) : f(e.leftBar),
+              width: e.leftBar < 0 ? f(e.leftBar) - f(0) : f(0) - f(e.leftBar),
+              transition: {
+                duration: n.duration
               }
-            ) : null,
-            /* @__PURE__ */ e.jsxs(dt, { children: [
-              Y.map((t, r) => /* @__PURE__ */ e.jsxs(
-                I.g,
-                {
-                  className: "undp-viz-g-with-hover",
-                  opacity: 0.85,
-                  onMouseEnter: (p) => {
-                    v(t), f(p.clientY), O(p.clientX), F?.(t);
-                  },
-                  onClick: () => {
-                    (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);
-                  },
-                  onMouseLeave: () => {
-                    v(void 0), O(void 0), f(void 0), F?.(void 0);
-                  },
-                  children: [
-                    t.leftBar ? /* @__PURE__ */ e.jsx(
-                      I.rect,
-                      {
-                        y: a(`${r}`),
-                        style: { fill: o[0] },
-                        height: a.bandwidth(),
-                        variants: {
-                          initial: {
-                            x: n(0),
-                            width: 0
-                          },
-                          whileInView: {
-                            x: t.leftBar < 0 ? n(0) : n(t.leftBar),
-                            width: t.leftBar < 0 ? n(t.leftBar) - n(0) : n(0) - n(t.leftBar),
-                            transition: { duration: x.duration }
-                          }
-                        },
-                        initial: "initial",
-                        animate: b ? "whileInView" : "initial",
-                        exit: {
-                          x: n(0),
-                          width: 0,
-                          transition: { duration: x.duration }
-                        }
-                      }
-                    ) : null,
-                    U ? /* @__PURE__ */ e.jsx(
-                      I.text,
-                      {
-                        y: a(`${r}`) + a.bandwidth() / 2,
-                        style: {
-                          textAnchor: t.rightBar && t.rightBar > 0 ? "end" : "start",
-                          ...u?.graphObjectValues || {}
-                        },
-                        dx: t.rightBar && t.rightBar > 0 ? -5 : 5,
-                        dy: "0.33em",
-                        className: et("graph-value text-sm", l?.graphObjectValues),
-                        exit: {
-                          opacity: 0,
-                          transition: { duration: x.duration }
-                        },
-                        variants: {
-                          initial: {
-                            x: n(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, X, E, R)
-                      }
-                    ) : null
-                  ]
-                },
-                t.label
-              )),
-              /* @__PURE__ */ e.jsx(
-                jt,
-                {
-                  y1: -2.5,
-                  y2: w + h.bottom,
-                  x1: n(L < 0 ? 0 : L),
-                  x2: n(L < 0 ? 0 : L),
-                  classNames: { axis: l?.yAxis?.axis },
-                  styles: { axis: u?.yAxis?.axis }
-                }
-              ),
-              s ? /* @__PURE__ */ e.jsx(e.Fragment, { children: s.map((t, r) => /* @__PURE__ */ e.jsx(
-                Bt,
-                {
-                  text: t.text,
-                  color: t.color,
-                  x: n(t.value),
-                  y1: 0 - h.top,
-                  y2: w + h.bottom,
-                  textSide: "left",
-                  classNames: t.classNames,
-                  styles: t.styles,
-                  animate: x,
-                  isInView: b
-                },
-                r
-              )) }) : null
-            ] })
-          ] }),
-          /* @__PURE__ */ e.jsxs("g", { transform: `translate(${(C + d) / 2},0)`, children: [
-            it ? /* @__PURE__ */ e.jsx(
-              wt,
-              {
-                values: D.filter((t) => t !== 0),
-                x: D.filter((t) => t !== 0).map((t) => c(t)),
-                y1: 0 - _,
-                y2: w + h.bottom,
-                styles: {
-                  gridLines: u?.xAxis?.gridLines,
-                  labels: u?.xAxis?.labels
-                },
-                classNames: {
-                  gridLines: l?.xAxis?.gridLines,
-                  labels: l?.xAxis?.labels
-                },
-                suffix: R,
-                prefix: E,
-                labelType: "secondary",
-                showGridLines: !0,
-                precision: X
+            }
+          }, initial: "initial", animate: T ? "whileInView" : "initial", exit: {
+            x: f(0),
+            width: 0,
+            transition: {
+              duration: n.duration
+            }
+          } }) : null,
+          Y ? /* @__PURE__ */ i.jsx(Mt.text, { y: g(`${y}`) + g.bandwidth() / 2, style: {
+            textAnchor: e.rightBar && e.rightBar > 0 ? "end" : "start",
+            ...o?.graphObjectValues || {}
+          }, dx: e.rightBar && e.rightBar > 0 ? -5 : 5, dy: "0.33em", className: se("graph-value text-sm", a?.graphObjectValues), exit: {
+            opacity: 0,
+            transition: {
+              duration: n.duration
+            }
+          }, variants: {
+            initial: {
+              x: f(0),
+              opacity: 0,
+              fill: r[0]
+            },
+            whileInView: {
+              x: e.leftBar ? f(e.leftBar) : f($ < 0 ? 0 : $),
+              opacity: 1,
+              fill: r[0],
+              transition: {
+                duration: n.duration
               }
-            ) : null,
-            /* @__PURE__ */ e.jsxs(dt, { children: [
-              Y.map((t, r) => /* @__PURE__ */ e.jsxs(
-                I.g,
-                {
-                  className: "undp-viz-g-with-hover",
-                  opacity: 0.85,
-                  onMouseEnter: (p) => {
-                    v(t), f(p.clientY), O(p.clientX), F?.(t);
-                  },
-                  onClick: () => {
-                    (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);
-                  },
-                  onMouseLeave: () => {
-                    v(void 0), O(void 0), f(void 0), F?.(void 0);
-                  },
-                  children: [
-                    t.rightBar ? /* @__PURE__ */ e.jsx(
-                      I.rect,
-                      {
-                        y: a(`${r}`),
-                        style: { fill: o[1] },
-                        height: a.bandwidth(),
-                        exit: {
-                          x: c(0),
-                          width: 0,
-                          transition: { duration: x.duration }
-                        },
-                        variants: {
-                          initial: {
-                            x: c(0),
-                            width: 0
-                          },
-                          whileInView: {
-                            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 }
-                          }
-                        },
-                        initial: "initial",
-                        animate: b ? "whileInView" : "initial"
-                      }
-                    ) : null,
-                    U ? /* @__PURE__ */ e.jsx(
-                      I.text,
-                      {
-                        y: a(`${r}`) + a.bandwidth() / 2,
-                        style: {
-                          textAnchor: t.rightBar && t.rightBar < 0 ? "end" : "start",
-                          ...u?.graphObjectValues || {}
-                        },
-                        className: et("graph-value text-sm", l?.graphObjectValues),
-                        dx: t.rightBar && t.rightBar < 0 ? -5 : 5,
-                        dy: "0.33em",
-                        exit: {
-                          opacity: 0,
-                          transition: { duration: x.duration }
-                        },
-                        variants: {
-                          initial: {
-                            x: c(0),
-                            opacity: 0,
-                            fill: o[1]
-                          },
-                          whileInView: {
-                            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, X, E, R)
-                      }
-                    ) : null
-                  ]
-                },
-                r
-              )),
-              /* @__PURE__ */ e.jsx(
-                jt,
-                {
-                  y1: -2.5,
-                  y2: w + h.bottom,
-                  x1: c(V < 0 ? 0 : V),
-                  x2: c(V < 0 ? 0 : V),
-                  classNames: { axis: l?.yAxis?.axis },
-                  styles: { axis: u?.yAxis?.axis }
-                }
-              ),
-              s ? /* @__PURE__ */ e.jsx(e.Fragment, { children: s.map((t, r) => /* @__PURE__ */ e.jsx(
-                Bt,
-                {
-                  text: t.text,
-                  color: t.color,
-                  x: c(t.value),
-                  y1: 0 - h.top,
-                  y2: w + h.bottom,
-                  textSide: "right",
-                  classNames: t.classNames,
-                  styles: t.styles,
-                  animate: x,
-                  isInView: b
-                },
-                r
-              )) }) : null
-            ] })
-          ] }),
-          /* @__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 < G ? `${t.label}` : `${`${t.label}`.substring(0, G)}...`,
-              y: a(`${t.id}`),
-              x: 0 - d / 2,
-              width: d,
-              height: a.bandwidth(),
-              alignment: "center",
-              style: u?.yAxis?.labels,
-              className: l?.yAxis?.labels,
-              animate: x,
-              isInView: b
+            }
+          }, initial: "initial", animate: T ? "whileInView" : "initial", children: ce(e.rightBar, Vt, J, U, q) }) : null
+        ] }, e.label)),
+        /* @__PURE__ */ i.jsx(ue, { y1: -2.5, y2: C + l.bottom, x1: f($ < 0 ? 0 : $), x2: f($ < 0 ? 0 : $), classNames: It, styles: it }),
+        u ? /* @__PURE__ */ i.jsx(i.Fragment, { children: u.map((e, y) => /* @__PURE__ */ i.jsx(de, { text: e.text, color: e.color, x: f(e.value), y1: 0 - l.top, y2: C + l.bottom, textSide: "left", classNames: e.classNames, styles: e.styles, animate: n, isInView: T }, y)) }) : null
+      ] })
+    ] });
+    const zt = a?.yAxis?.axis;
+    let Bt;
+    t[72] !== zt ? (Bt = {
+      axis: zt
+    }, t[72] = zt, t[73] = Bt) : Bt = t[73];
+    const Ft = o?.yAxis?.axis;
+    let Lt;
+    t[74] !== Ft ? (Lt = {
+      axis: Ft
+    }, t[74] = Ft, t[75] = Lt) : Lt = t[75], dt = /* @__PURE__ */ i.jsxs("g", { transform: `translate(${(M + b) / 2},0)`, children: [
+      ot ? /* @__PURE__ */ i.jsx(me, { values: p.filter(He), x: p.filter(Ee).map((e) => h(e)), y1: 0 - G, y2: C + l.bottom, styles: {
+        gridLines: o?.xAxis?.gridLines,
+        labels: o?.xAxis?.labels
+      }, classNames: {
+        gridLines: a?.xAxis?.gridLines,
+        labels: a?.xAxis?.labels
+      }, suffix: q, prefix: U, labelType: "secondary", showGridLines: !0, precision: J }) : null,
+      /* @__PURE__ */ i.jsxs(ae, { children: [
+        Yt.map((e, y) => /* @__PURE__ */ i.jsxs(Mt.g, { className: "undp-viz-g-with-hover", opacity: 0.85, onMouseEnter: (w) => {
+          K(e), Q(w.clientY), m(w.clientX), z?.(e);
+        }, onClick: () => {
+          (R || j) && (le(A, e) && Et ? (nt(void 0), R?.(void 0)) : (nt(e), R?.(e)));
+        }, onMouseMove: (w) => {
+          K(e), Q(w.clientY), m(w.clientX);
+        }, onMouseLeave: () => {
+          K(void 0), m(void 0), Q(void 0), z?.(void 0);
+        }, children: [
+          e.rightBar ? /* @__PURE__ */ i.jsx(Mt.rect, { y: g(`${y}`), style: {
+            fill: r[1]
+          }, height: g.bandwidth(), exit: {
+            x: h(0),
+            width: 0,
+            transition: {
+              duration: n.duration
+            }
+          }, variants: {
+            initial: {
+              x: h(0),
+              width: 0
             },
-            r
-          )) }) }),
-          /* @__PURE__ */ e.jsxs("g", { transform: `translate(0,${w})`, children: [
-            /* @__PURE__ */ e.jsx(
-              "text",
-              {
-                style: {
-                  fill: o[0],
-                  textAnchor: "end",
-                  ...u?.yAxis?.title
-                },
-                className: et("text-base", l?.yAxis?.title),
-                x: C / 2 - d / 2,
-                y: 0,
-                dx: -5,
-                dy: 20,
-                children: M[0]
+            whileInView: {
+              x: e.rightBar >= 0 ? h(0) : h(e.rightBar),
+              width: e.rightBar >= 0 ? h(e.rightBar) - h(0) : h(0) - h(e.rightBar),
+              transition: {
+                duration: n.duration
               }
-            ),
-            /* @__PURE__ */ e.jsx(
-              "text",
-              {
-                style: {
-                  fill: o[1],
-                  textAnchor: "start",
-                  ...u?.yAxis?.title
-                },
-                className: et("text-base", l?.yAxis?.title),
-                x: C / 2 + d / 2,
-                y: 0,
-                dx: 5,
-                dy: 20,
-                children: M[1]
+            }
+          }, initial: "initial", animate: T ? "whileInView" : "initial" }) : null,
+          Y ? /* @__PURE__ */ i.jsx(Mt.text, { y: g(`${y}`) + g.bandwidth() / 2, style: {
+            textAnchor: e.rightBar && e.rightBar < 0 ? "end" : "start",
+            ...o?.graphObjectValues || {}
+          }, className: se("graph-value text-sm", a?.graphObjectValues), dx: e.rightBar && e.rightBar < 0 ? -5 : 5, dy: "0.33em", exit: {
+            opacity: 0,
+            transition: {
+              duration: n.duration
+            }
+          }, variants: {
+            initial: {
+              x: h(0),
+              opacity: 0,
+              fill: r[1]
+            },
+            whileInView: {
+              x: e.rightBar ? h(e.rightBar) : h(N < 0 ? 0 : N),
+              opacity: 1,
+              fill: r[1],
+              transition: {
+                duration: n.duration
               }
-            )
-          ] }),
-          rt.filter((t) => t.position === "after").map((t) => t.layer)
-        ] })
-      }
-    ),
-    st && J && lt && A ? /* @__PURE__ */ e.jsx(
-      Vt,
-      {
-        data: st,
-        body: J,
-        xPos: lt,
-        yPos: A,
-        backgroundStyle: u?.tooltip,
-        className: l?.tooltip
-      }
-    ) : null,
-    $ && T !== void 0 ? /* @__PURE__ */ e.jsx(
-      Lt,
-      {
-        open: T !== void 0,
-        onClose: () => {
-          H(void 0);
-        },
-        children: /* @__PURE__ */ e.jsx(
-          "div",
-          {
-            className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof $ == "string" ? { __html: Tt($, T) } : void 0,
-            children: typeof $ == "function" ? $(T) : null
-          }
-        )
-      }
-    ) : null
-  ] });
+            }
+          }, initial: "initial", animate: T ? "whileInView" : "initial", children: ce(e.rightBar, Vt, J, U, q) }) : null
+        ] }, y)),
+        /* @__PURE__ */ i.jsx(ue, { y1: -2.5, y2: C + l.bottom, x1: h(N < 0 ? 0 : N), x2: h(N < 0 ? 0 : N), classNames: Bt, styles: Lt }),
+        u ? /* @__PURE__ */ i.jsx(i.Fragment, { children: u.map((e, y) => /* @__PURE__ */ i.jsx(de, { text: e.text, color: e.color, x: h(e.value), y1: 0 - l.top, y2: C + l.bottom, textSide: "right", classNames: e.classNames, styles: e.styles, animate: n, isInView: T }, y)) }) : null
+      ] })
+    ] }), O = ae, Z = Mt.g, ct = `translate(${M / 2},0)`, mt = Yt.map((e, y) => /* @__PURE__ */ i.jsx(Ae, { value: `${e.label}`.length < at ? `${e.label}` : `${`${e.label}`.substring(0, at)}...`, y: g(`${e.id}`), x: 0 - b / 2, width: b, height: g.bandwidth(), alignment: "center", style: o?.yAxis?.labels, className: a?.yAxis?.labels, animate: n, isInView: T }, y)), t[8] = n, t[9] = r[0], t[10] = r[1], t[11] = Jt, t[12] = b, t[13] = a?.graphObjectValues, t[14] = a?.xAxis?.gridLines, t[15] = a?.xAxis?.labels, t[16] = a?.yAxis?.axis, t[17] = a?.yAxis?.labels, t[18] = V, t[19] = c, t[20] = j, t[21] = C, t[22] = M, t[23] = v, t[24] = T, t[25] = l.bottom, t[26] = l.left, t[27] = l.top, t[28] = X, t[29] = st, t[30] = $, t[31] = N, t[32] = A, t[33] = Vt, t[34] = k, t[35] = R, t[36] = z, t[37] = J, t[38] = U, t[39] = u, t[40] = Et, t[41] = ot, t[42] = Y, t[43] = o?.graphObjectValues, t[44] = o?.xAxis?.gridLines, t[45] = o?.xAxis?.labels, t[46] = o?.yAxis?.axis, t[47] = o?.yAxis?.labels, t[48] = q, t[49] = G, t[50] = at, t[51] = L, t[52] = Z, t[53] = O, t[54] = _, t[55] = P, t[56] = rt, t[57] = lt, t[58] = ct, t[59] = mt, t[60] = tt, t[61] = D, t[62] = ut, t[63] = dt, t[64] = ft, t[65] = xt;
+  } else
+    Z = t[52], O = t[53], _ = t[54], P = t[55], rt = t[56], lt = t[57], ct = t[58], mt = t[59], tt = t[60], D = t[61], ut = t[62], dt = t[63], ft = t[64], xt = t[65];
+  let S;
+  t[76] !== Z || t[77] !== ct || t[78] !== mt ? (S = /* @__PURE__ */ i.jsx(Z, { transform: ct, children: mt }), t[76] = Z, t[77] = ct, t[78] = mt, t[79] = S) : S = t[79];
+  let ht;
+  t[80] !== O || t[81] !== S ? (ht = /* @__PURE__ */ i.jsx(O, { children: S }), t[80] = O, t[81] = S, t[82] = ht) : ht = t[82];
+  const Qt = `translate(0,${C})`, Zt = o?.yAxis?.title;
+  let pt;
+  t[83] !== r[0] || t[84] !== Zt ? (pt = {
+    fill: r[0],
+    textAnchor: "end",
+    ...Zt
+  }, t[83] = r[0], t[84] = Zt, t[85] = pt) : pt = t[85];
+  const _t = a?.yAxis?.title;
+  let I;
+  t[86] !== _t ? (I = se("text-base", _t), t[86] = _t, t[87] = I) : I = t[87];
+  const gt = M / 2 - b / 2;
+  let E;
+  t[88] !== W[0] || t[89] !== pt || t[90] !== I || t[91] !== gt ? (E = /* @__PURE__ */ i.jsx("text", { style: pt, className: I, x: gt, y: 0, dx: -5, dy: 20, children: W[0] }), t[88] = W[0], t[89] = pt, t[90] = I, t[91] = gt, t[92] = E) : E = t[92];
+  const Ot = o?.yAxis?.title;
+  let H;
+  t[93] !== r[1] || t[94] !== Ot ? (H = {
+    fill: r[1],
+    textAnchor: "start",
+    ...Ot
+  }, t[93] = r[1], t[94] = Ot, t[95] = H) : H = t[95];
+  const te = a?.yAxis?.title;
+  let yt;
+  t[96] !== te ? (yt = se("text-base", te), t[96] = te, t[97] = yt) : yt = t[97];
+  const Xt = M / 2 + b / 2;
+  let vt;
+  t[98] !== W[1] || t[99] !== H || t[100] !== yt || t[101] !== Xt ? (vt = /* @__PURE__ */ i.jsx("text", { style: H, className: yt, x: Xt, y: 0, dx: 5, dy: 20, children: W[1] }), t[98] = W[1], t[99] = H, t[100] = yt, t[101] = Xt, t[102] = vt) : vt = t[102];
+  let F;
+  t[103] !== Qt || t[104] !== E || t[105] !== vt ? (F = /* @__PURE__ */ i.jsxs("g", { transform: Qt, children: [
+    E,
+    vt
+  ] }), t[103] = Qt, t[104] = E, t[105] = vt, t[106] = F) : F = t[106];
+  let bt;
+  t[107] !== V ? (bt = V.filter(Pe).map(Re), t[107] = V, t[108] = bt) : bt = t[108];
+  let x;
+  t[109] !== ht || t[110] !== F || t[111] !== bt || t[112] !== tt || t[113] !== D || t[114] !== ut || t[115] !== dt ? (x = /* @__PURE__ */ i.jsxs("g", { transform: tt, children: [
+    D,
+    ut,
+    dt,
+    ht,
+    F,
+    bt
+  ] }), t[109] = ht, t[110] = F, t[111] = bt, t[112] = tt, t[113] = D, t[114] = ut, t[115] = dt, t[116] = x) : x = t[116];
+  let wt;
+  t[117] !== _ || t[118] !== P || t[119] !== rt || t[120] !== lt || t[121] !== x || t[122] !== ft || t[123] !== xt ? (wt = /* @__PURE__ */ i.jsx(_, { width: ft, height: xt, viewBox: P, direction: rt, ref: lt, children: x }), t[117] = _, t[118] = P, t[119] = rt, t[120] = lt, t[121] = x, t[122] = ft, t[123] = xt, t[124] = wt) : wt = t[124];
+  let et;
+  t[125] !== a?.tooltip || t[126] !== Ht || t[127] !== d || t[128] !== Nt || t[129] !== o?.tooltip || t[130] !== kt ? (et = Nt && kt && Ht && d ? /* @__PURE__ */ i.jsx(we, { data: Nt, body: kt, xPos: Ht, yPos: d, backgroundStyle: o?.tooltip, className: a?.tooltip }) : null, t[125] = a?.tooltip, t[126] = Ht, t[127] = d, t[128] = Nt, t[129] = o?.tooltip, t[130] = kt, t[131] = et) : et = t[131];
+  let jt;
+  t[132] !== j || t[133] !== A ? (jt = j && A !== void 0 ? /* @__PURE__ */ i.jsx(be, { open: A !== void 0, onClose: () => {
+    nt(void 0);
+  }, children: /* @__PURE__ */ i.jsx("div", { className: "graph-modal-content m-0", dangerouslySetInnerHTML: typeof j == "string" ? {
+    __html: je(j, A)
+  } : void 0, children: typeof j == "function" ? j(A) : null }) }) : null, t[132] = j, t[133] = A, t[134] = jt) : jt = t[134];
+  let Dt;
+  return t[135] !== wt || t[136] !== et || t[137] !== jt ? (Dt = /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+    wt,
+    et,
+    jt
+  ] }), t[135] = wt, t[136] = et, t[137] = jt, t[138] = Dt) : Dt = t[138], Dt;
+}
+function Re(s) {
+  return s.layer;
+}
+function Pe(s) {
+  return s.position === "after";
+}
+function Ee(s) {
+  return s !== 0;
 }
-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 He(s) {
+  return s !== 0;
 }
-function je(z) {
-  const {
-    data: m,
-    graphTitle: y,
-    sources: j,
-    graphDescription: o,
-    height: d,
-    width: s,
-    footNote: B,
-    padding: q,
-    barColors: U = [
-      $t.light.categoricalColors.colors[0],
-      $t.light.categoricalColors.colors[1]
-    ],
-    backgroundColor: M = !1,
-    leftMargin: nt = 20,
-    rightMargin: ot = 20,
-    topMargin: _ = 25,
-    bottomMargin: ct = 30,
-    rightBarTitle: J = "Right bar graph",
-    leftBarTitle: F = "Left bar graph",
-    tooltip: mt,
-    relativeHeight: G,
-    onSeriesMouseOver: k,
-    graphID: it,
-    barPadding: R = 0.25,
-    truncateBy: E = 999,
-    onSeriesMouseClick: at,
-    centerGap: $ = 100,
-    showValues: u = !0,
-    maxValue: l,
-    minValue: N,
-    refValues: x = [],
-    suffix: X = "",
-    prefix: rt = "",
-    showTicks: L = !0,
-    showColorScale: V = !1,
-    graphDownload: K = !1,
-    dataDownload: Q = !1,
-    language: b = "en",
-    colorLegendTitle: st,
-    minHeight: v = 0,
-    theme: T = "light",
-    ariaLabel: H,
-    resetSelectionOnDoubleClick: lt = !0,
-    detailsOnClick: O,
-    styles: A,
-    classNames: f,
-    noOfTicks: h = 5,
-    animate: C = !1,
-    precision: w = 2,
-    customLayers: Y = [],
-    timeline: a = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 },
-    naLabel: c = "NA"
-  } = z, [D, n] = S(0), [Z, t] = S(0), [r, p] = S(a.autoplay), g = Yt(
-    Xt(m, "date", !0).map(
-      (i) => Ct(`${i}`, a.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()
-    ),
-    (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((P) => {
-      n(s || P[0].target.clientWidth || 620), t(d || P[0].target.clientHeight || 480);
+function Xe(s) {
+  return s !== 0;
+}
+function Ye(s) {
+  return s !== 0;
+}
+function We(s) {
+  return s.layer;
+}
+function ze(s) {
+  return s.position === "before";
+}
+function qe(s) {
+  return `${s.id}`;
+}
+function Ue(s, t) {
+  return {
+    ...s,
+    id: `${t}`
+  };
+}
+function Ut(s, t, c, L) {
+  const v = s.map((u) => u[t]).filter((u) => !oe(u)), r = oe(c) ? Math.min(...v) >= 0 ? 0 : Math.min(...v) : c, b = oe(L) ? Math.max(...v) < 0 ? 0 : Math.max(...v) : L;
+  return {
+    min: r,
+    max: b
+  };
+}
+function Ni(s) {
+  const t = he.c(45), {
+    data: c,
+    graphTitle: L,
+    sources: v,
+    graphDescription: r,
+    height: b,
+    width: u,
+    footNote: X,
+    padding: st,
+    barColors: Y,
+    backgroundColor: W,
+    leftMargin: Gt,
+    rightMargin: Rt,
+    topMargin: G,
+    bottomMargin: Pt,
+    rightBarTitle: kt,
+    leftBarTitle: z,
+    tooltip: Jt,
+    relativeHeight: at,
+    onSeriesMouseOver: R,
+    graphID: ot,
+    barPadding: q,
+    truncateBy: U,
+    onSeriesMouseClick: Et,
+    centerGap: j,
+    showValues: o,
+    maxValue: a,
+    minValue: k,
+    refValues: n,
+    suffix: J,
+    prefix: V,
+    showTicks: $,
+    showColorScale: N,
+    graphDownload: Vt,
+    dataDownload: Kt,
+    language: $t,
+    colorLegendTitle: T,
+    minHeight: Nt,
+    theme: K,
+    ariaLabel: A,
+    resetSelectionOnDoubleClick: nt,
+    detailsOnClick: Ht,
+    styles: m,
+    classNames: d,
+    noOfTicks: Q,
+    animate: Tt,
+    precision: l,
+    customLayers: M,
+    timeline: C,
+    naLabel: Z
+  } = s;
+  let O;
+  t[0] !== Y ? (O = Y === void 0 ? [xe.light.categoricalColors.colors[0], xe.light.categoricalColors.colors[1]] : Y, t[0] = Y, t[1] = O) : O = t[1];
+  const _ = O, P = W === void 0 ? !1 : W, rt = Gt === void 0 ? 20 : Gt, lt = Rt === void 0 ? 20 : Rt, ct = G === void 0 ? 25 : G, mt = Pt === void 0 ? 30 : Pt, tt = kt === void 0 ? "Right bar graph" : kt, D = z === void 0 ? "Left bar graph" : z, ut = q === void 0 ? 0.25 : q, dt = U === void 0 ? 999 : U, ft = j === void 0 ? 100 : j, xt = o === void 0 ? !0 : o;
+  let S;
+  t[2] !== n ? (S = n === void 0 ? [] : n, t[2] = n, t[3] = S) : S = t[3];
+  const ht = S, Qt = J === void 0 ? "" : J, Zt = V === void 0 ? "" : V, pt = $ === void 0 ? !0 : $, _t = N === void 0 ? !1 : N, I = Vt === void 0 ? !1 : Vt, gt = Kt === void 0 ? !1 : Kt, E = $t === void 0 ? "en" : $t, Ot = Nt === void 0 ? 0 : Nt, H = K === void 0 ? "light" : K, te = nt === void 0 ? !0 : nt, yt = Q === void 0 ? 5 : Q, Xt = Tt === void 0 ? !1 : Tt, vt = l === void 0 ? 2 : l;
+  let F;
+  t[4] !== M ? (F = M === void 0 ? [] : M, t[4] = M, t[5] = F) : F = t[5];
+  const bt = F, x = C === void 0 ? {
+    enabled: !1,
+    autoplay: !1,
+    showOnlyActiveDate: !0
+  } : C, wt = Z === void 0 ? "NA" : Z, [et, jt] = Ct(0), [Dt, Yt] = Ct(0), [g, h] = Ct(x.autoplay), p = Ie(Oe(c, "date", !0).map((B) => ye(`${B}`, x.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()), ti), [f, Wt] = Ct(x.autoplay ? 0 : p.length - 1), St = ne(null), It = ne(null);
+  let At, it;
+  t[6] === Symbol.for("react.memo_cache_sentinel") ? (At = () => {
+    const B = new ResizeObserver((ee) => {
+      jt(ee[0].target.clientWidth || 620), Yt(ee[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((P) => P < g.length - 1 ? P + 1 : 0);
-      },
-      (a.speed || 2) * 1e3
-    );
-    return r || clearInterval(i), () => clearInterval(i);
-  }, [g, r, a.speed]);
-  const pt = Nt(
-    g,
-    ht,
-    a.showOnlyActiveDate,
-    a.dateFormat || "yyyy"
-  );
-  return /* @__PURE__ */ e.jsx(
-    "div",
-    {
-      className: `${T || "light"} flex  ${s ? "w-fit grow-0" : "w-full grow"}`,
-      dir: b === "he" || b === "ar" ? "rtl" : void 0,
-      children: /* @__PURE__ */ e.jsx(
-        "div",
-        {
-          className: et(
-            `${M ? M === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${b || "en"}`,
-            s ? "w-fit" : "w-full",
-            f?.graphContainer
-          ),
-          style: {
-            ...A?.graphContainer || {},
-            ...M && M !== !0 ? { backgroundColor: M } : {}
-          },
-          id: it,
-          ref: ft,
-          "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 || o || K || Q ? /* @__PURE__ */ e.jsx(
-                  Ft,
-                  {
-                    styles: {
-                      title: A?.title,
-                      description: A?.description
-                    },
-                    classNames: {
-                      title: f?.title,
-                      description: f?.description
-                    },
-                    graphTitle: y,
-                    graphDescription: o,
-                    width: s,
-                    graphDownload: K ? ft.current : void 0,
-                    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: [
-                  /* @__PURE__ */ e.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => {
-                        p(!r);
-                      },
-                      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(Pt, {}) : /* @__PURE__ */ e.jsx(Rt, {})
-                    }
-                  ),
-                  /* @__PURE__ */ e.jsx(
-                    At,
-                    {
-                      min: g[0],
-                      max: g[g.length - 1],
-                      marks: pt,
-                      step: null,
-                      defaultValue: g[g.length - 1],
-                      value: g[ht],
-                      onChangeComplete: (i) => {
-                        xt(g.indexOf(i));
-                      },
-                      onChange: (i) => {
-                        xt(g.indexOf(i));
-                      },
-                      "aria-label": "Time slider. Use arrow keys to adjust selected time period."
-                    }
-                  )
-                ] }) : null,
-                /* @__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(
-                    Gt,
-                    {
-                      colorLegendTitle: st,
-                      colorDomain: [F, J],
-                      colors: U,
-                      showNAColor: !1
-                    }
-                  ) : null,
-                  /* @__PURE__ */ e.jsx(
-                    "div",
-                    {
-                      className: "flex flex-col grow justify-center leading-0",
-                      ref: tt,
-                      "aria-label": "Graph area",
-                      children: (s || D) && (d || Z) ? /* @__PURE__ */ e.jsx(
-                        zt,
-                        {
-                          data: Et(
-                            m,
-                            a.dateFormat || "yyyy"
-                          ).filter(
-                            (i) => a.enabled ? i.date === kt(
-                              new Date(g[ht]),
-                              a.dateFormat || "yyyy"
-                            ) : i
-                          ),
-                          barColors: U,
-                          width: s || D,
-                          centerGap: $,
-                          height: Math.max(
-                            v,
-                            d || (G ? v ? (s || D) * G > v ? (s || D) * G : v : (s || D) * G : Z)
-                          ),
-                          truncateBy: E,
-                          leftMargin: nt,
-                          rightMargin: ot,
-                          topMargin: _,
-                          bottomMargin: ct,
-                          axisTitles: [F, J],
-                          tooltip: mt,
-                          onSeriesMouseOver: k,
-                          barPadding: R,
-                          refValues: x,
-                          maxValue: Math.max(
-                            W(m, "leftBar", N, l).max,
-                            W(m, "rightBar", N, l).max
-                          ),
-                          minValue: Math.min(
-                            W(m, "leftBar", N, l).min,
-                            W(m, "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: X,
-                          prefix: rt,
-                          resetSelectionOnDoubleClick: lt,
-                          detailsOnClick: O,
-                          styles: A,
-                          classNames: f,
-                          noOfTicks: h,
-                          animate: C === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : C || { duration: 0, once: !0, amount: 0 },
-                          precision: w,
-                          customLayers: Y,
-                          naLabel: c
-                        }
-                      ) : null
-                    }
-                  )
-                ] }) }),
-                j || B ? /* @__PURE__ */ e.jsx(
-                  St,
-                  {
-                    styles: { footnote: A?.footnote, source: A?.source },
-                    classNames: {
-                      footnote: f?.footnote,
-                      source: f?.source
-                    },
-                    sources: j,
-                    footNote: B,
-                    width: s
-                  }
-                ) : null
-              ] })
-            }
-          )
-        }
-      )
-    }
-  );
+    return St.current && B.observe(St.current), () => B.disconnect();
+  }, it = [], t[6] = At, t[7] = it) : (At = t[6], it = t[7]), re(At, it), re(() => {
+    const B = setInterval(() => {
+      Wt((ee) => ee < p.length - 1 ? ee + 1 : 0);
+    }, (x.speed || 2) * 1e3);
+    return g || clearInterval(B), () => clearInterval(B);
+  }, [p, g, x.speed]);
+  const zt = pe(p, f, x.showOnlyActiveDate, x.dateFormat || "yyyy"), Bt = Se, Ft = d?.graphContainer, Lt = m?.graphContainer;
+  let e;
+  t[8] !== d?.description || t[9] !== d?.title || t[10] !== c || t[11] !== gt || t[12] !== r || t[13] !== I || t[14] !== L || t[15] !== m?.description || t[16] !== m?.title || t[17] !== u ? (e = L || r || I || gt ? /* @__PURE__ */ i.jsx(Ce, { styles: {
+    title: m?.title,
+    description: m?.description
+  }, classNames: {
+    title: d?.title,
+    description: d?.description
+  }, graphTitle: L, graphDescription: r, width: u, graphDownload: I ? It : void 0, dataDownload: gt ? c.map(_e).filter(Ze).length > 0 ? c.map(Qe).filter(Ke) : c.filter(Je) : null }) : null, t[8] = d?.description, t[9] = d?.title, t[10] = c, t[11] = gt, t[12] = r, t[13] = I, t[14] = L, t[15] = m?.description, t[16] = m?.title, t[17] = u, t[18] = e) : e = t[18];
+  const y = x.enabled && p.length > 0 && zt ? /* @__PURE__ */ i.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+    /* @__PURE__ */ i.jsx("button", { type: "button", onClick: () => {
+      h(!g);
+    }, className: "p-0 border-0 cursor-pointer bg-transparent", "aria-label": g ? "Click to pause animation" : "Click to play animation", children: g ? /* @__PURE__ */ i.jsx($e, {}) : /* @__PURE__ */ i.jsx(Ne, {}) }),
+    /* @__PURE__ */ i.jsx(ge, { min: p[0], max: p[p.length - 1], marks: zt, step: null, defaultValue: p[p.length - 1], value: p[f], onChangeComplete: (B) => {
+      Wt(p.indexOf(B));
+    }, onChange: (B) => {
+      Wt(p.indexOf(B));
+    }, "aria-label": "Time slider. Use arrow keys to adjust selected time period." })
+  ] }) : null, w = c.length === 0 ? /* @__PURE__ */ i.jsx(Ve, {}) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+    _t ? /* @__PURE__ */ i.jsx(ke, { colorLegendTitle: T, colorDomain: [D, tt], colors: _, showNAColor: !1, className: d?.colorLegend }) : null,
+    /* @__PURE__ */ i.jsx(De, { ref: St, children: et && Dt ? /* @__PURE__ */ i.jsx(Ge, { data: Te(c, x.dateFormat || "yyyy").filter((B) => x.enabled ? B.date === ve(new Date(p[f]), x.dateFormat || "yyyy") : B), barColors: _, width: et, centerGap: ft, height: Dt, truncateBy: dt, leftMargin: rt, rightMargin: lt, topMargin: ct, bottomMargin: mt, axisTitles: [D, tt], tooltip: Jt, onSeriesMouseOver: R, barPadding: ut, refValues: ht, maxValue: Math.max(Ut(c, "leftBar", k, a).max, Ut(c, "rightBar", k, a).max), minValue: Math.min(Ut(c, "leftBar", k, a).min, Ut(c, "rightBar", k, a).min), minValueLeftBar: Ut(c, "leftBar", k, a).min, minValueRightBar: Ut(c, "rightBar", k, a).min, showValues: xt, onSeriesMouseClick: Et, showTicks: pt, suffix: Qt, prefix: Zt, resetSelectionOnDoubleClick: te, detailsOnClick: Ht, styles: m, classNames: d, noOfTicks: yt, animate: Xt === !0 ? {
+      duration: 0.5,
+      once: !0,
+      amount: 0.5
+    } : Xt || {
+      duration: 0,
+      once: !0,
+      amount: 0
+    }, precision: vt, customLayers: bt, naLabel: wt }) : null })
+  ] });
+  let qt;
+  t[19] !== d?.footnote || t[20] !== d?.source || t[21] !== X || t[22] !== v || t[23] !== m?.footnote || t[24] !== m?.source || t[25] !== u ? (qt = v || X ? /* @__PURE__ */ i.jsx(Me, { styles: {
+    footnote: m?.footnote,
+    source: m?.source
+  }, classNames: {
+    footnote: d?.footnote,
+    source: d?.source
+  }, sources: v, footNote: X, width: u }) : null, t[19] = d?.footnote, t[20] = d?.source, t[21] = X, t[22] = v, t[23] = m?.footnote, t[24] = m?.source, t[25] = u, t[26] = qt) : qt = t[26];
+  let ie;
+  return t[27] !== Bt || t[28] !== A || t[29] !== P || t[30] !== ot || t[31] !== b || t[32] !== E || t[33] !== Ot || t[34] !== st || t[35] !== at || t[36] !== Ft || t[37] !== Lt || t[38] !== e || t[39] !== y || t[40] !== w || t[41] !== qt || t[42] !== H || t[43] !== u ? (ie = /* @__PURE__ */ i.jsxs(Bt, { className: Ft, style: Lt, id: ot, ref: It, "aria-label": A, backgroundColor: P, theme: H, language: E, minHeight: Ot, width: u, height: b, relativeHeight: at, padding: st, children: [
+    e,
+    y,
+    w,
+    qt
+  ] }), t[27] = Bt, t[28] = A, t[29] = P, t[30] = ot, t[31] = b, t[32] = E, t[33] = Ot, t[34] = st, t[35] = at, t[36] = Ft, t[37] = Lt, t[38] = e, t[39] = y, t[40] = w, t[41] = qt, t[42] = H, t[43] = u, t[44] = ie) : ie = t[44], ie;
+}
+function Je(s) {
+  return s !== void 0;
+}
+function Ke(s) {
+  return s !== void 0;
+}
+function Qe(s) {
+  return s.data;
+}
+function Ze(s) {
+  return s !== void 0;
+}
+function _e(s) {
+  return s.data;
+}
+function ti(s, t) {
+  return Fe(s, t);
 }
 export {
-  je as ButterflyChart
+  Ni as ButterflyChart
 };
 //# sourceMappingURL=ButterflyChart.js.map