@undp/data-viz 1.4.12 → 1.4.14

package/dist/DumbbellChart.js

@@ -26,7 +26,7 @@ import { ColorLegendWithMouseOver as Qe } from "./ColorLegendWithMouseOver.js";
 import { Colors as Ze } from "./Colors.js";
 import { E as et } from "./EmptyState-DdTp-Mdn.js";
 import { P as tt, f as it } from "./index-BmCqpO1B.js";
-import { b as we } from "./ensureCompleteData-BBDZbDCE.js";
+import { b as ve } from "./ensureCompleteData-BBDZbDCE.js";
 import { c as at } from "./init-BhZylTFx.js";
 import { A as st } from "./Axis-Ddg-seDi.js";
 import { X as ct } from "./XAxesLabels-CaV2q-6H.js";
@@ -36,7 +36,7 @@ function dt(ye) {
     dotColors: g,
     suffix: q,
     prefix: U,
-    barPadding: b,
+    barPadding: w,
     showValues: ce,
     showTicks: Z,
     leftMargin: ee,
@@ -58,36 +58,36 @@ function dt(ye) {
     connectorStrokeWidth: ge,
     maxBarThickness: re,
     minBarThickness: le,
-    resetSelectionOnDoubleClick: pe,
-    detailsOnClick: v,
+    resetSelectionOnDoubleClick: fe,
+    detailsOnClick: b,
     axisTitle: _,
-    noOfTicks: fe,
+    noOfTicks: pe,
     valueColor: ne,
     styles: m,
-    classNames: u,
+    classNames: h,
     labelOrder: V,
     refValues: oe,
-    rtl: f,
+    rtl: p,
     animate: c,
     precision: N,
     customLayers: G,
     highlightedDataPoints: z,
     dimmedOpacity: A
-  } = ye, w = Ce(null), x = qe(w, {
+  } = ye, v = Ce(null), x = qe(v, {
     once: c.once,
     amount: c.amount
-  }), h = {
+  }), u = {
     top: _ ? D + 25 : D,
     bottom: n,
     left: ee,
     right: J
-  }, Y = te - h.left - h.right, E = ie - h.top - h.bottom, [K, H] = L(void 0), [j, y] = L(void 0), [T, Q] = L(void 0), [S, P] = L(void 0), R = s.map((t, l) => ({
+  }, Y = te - u.left - u.right, E = ie - u.top - u.bottom, [K, H] = L(void 0), [j, y] = L(void 0), [T, Q] = L(void 0), [S, P] = L(void 0), R = s.map((t, l) => ({
     ...t,
     id: V ? `${t.label}` : `${l}`
-  })), k = V || R.map((t) => `${t.id}`), p = ze().domain([ae, C]).range([0, Y]).nice(), $ = Re().domain(k).range([
+  })), k = V || R.map((t) => `${t.id}`), f = ze().domain([ae, C]).range([0, Y]).nice(), $ = Re().domain(k).range([
     0,
     le ? Math.max(E, le * R.length) : re ? Math.min(E, re * R.length) : E
-  ]).paddingInner(b), a = p.ticks(fe);
+  ]).paddingInner(w), a = f.ticks(pe);
   return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
     /* @__PURE__ */ i.jsxs(
       se.svg,
@@ -96,7 +96,7 @@ function dt(ye) {
         height: `${ie}px`,
         viewBox: `0 0 ${te} ${ie}`,
         direction: "ltr",
-        ref: w,
+        ref: v,
         children: [
           M ? /* @__PURE__ */ i.jsx("defs", { children: /* @__PURE__ */ i.jsx(
             "marker",
@@ -117,21 +117,21 @@ function dt(ye) {
               )
             }
           ) }) : null,
-          /* @__PURE__ */ i.jsxs("g", { transform: `translate(${h.left},${h.top})`, children: [
+          /* @__PURE__ */ i.jsxs("g", { transform: `translate(${u.left},${u.top})`, children: [
             Z ? /* @__PURE__ */ i.jsx(
               rt,
               {
                 values: a.filter((t, l) => l !== 0),
-                x: a.filter((t, l) => l !== 0).map((t) => p(t)),
+                x: a.filter((t, l) => l !== 0).map((t) => f(t)),
                 y1: 0 - D,
-                y2: E + h.bottom,
+                y2: E + u.bottom,
                 styles: {
                   gridLines: m?.xAxis?.gridLines,
                   labels: m?.xAxis?.labels
                 },
                 classNames: {
-                  gridLines: u?.xAxis?.gridLines,
-                  labels: u?.xAxis?.labels
+                  gridLines: h?.xAxis?.gridLines,
+                  labels: h?.xAxis?.labels
                 },
                 suffix: q,
                 prefix: U,
@@ -144,9 +144,9 @@ function dt(ye) {
               _e,
               {
                 x: Y / 2,
-                y: 0 - h.top + 15,
+                y: 0 - u.top + 15,
                 style: m?.xAxis?.title,
-                className: u?.xAxis?.title,
+                className: h?.xAxis?.title,
                 text: _
               }
             ),
@@ -157,7 +157,7 @@ function dt(ye) {
                 x1: 0,
                 x2: Y,
                 styles: { gridLines: m?.yAxis?.gridLines },
-                classNames: { gridLines: u?.yAxis?.gridLines },
+                classNames: { gridLines: h?.yAxis?.gridLines },
                 labelType: "secondary",
                 showGridLines: !0,
                 labelPos: "vertical",
@@ -192,12 +192,12 @@ function dt(ye) {
                       {
                         value: `${t.label}`.length < de ? `${t.label}` : `${`${t.label}`.substring(0, de)}...`,
                         y: 0 - $.bandwidth() / 2,
-                        x: 0 - h.left,
-                        width: h.left,
+                        x: 0 - u.left,
+                        width: u.left,
                         height: $.bandwidth(),
                         alignment: "right",
                         style: m?.yAxis?.labels,
-                        className: u?.yAxis?.labels,
+                        className: h?.yAxis?.labels,
                         animate: c,
                         isInView: x
                       }
@@ -214,7 +214,7 @@ function dt(ye) {
                         },
                         className: ke(
                           "stroke-primary-gray-600 dark:stroke-primary-gray-300",
-                          u?.dataConnectors
+                          h?.dataConnectors
                         ),
                         markerEnd: M && t.x.indexOf(Math.min(...t.x.filter((l) => l !== null))) === 0 ? "url(#arrow)" : "",
                         markerStart: M && t.x.indexOf(Math.min(...t.x.filter((l) => l !== null))) === t.x.length - 1 ? "url(#arrow)" : "",
@@ -225,8 +225,8 @@ function dt(ye) {
                             x2: 0
                           },
                           whileInView: {
-                            x1: p(Math.min(...t.x.filter((l) => l !== null))) + B,
-                            x2: p(Math.max(...t.x.filter((l) => l !== null))) - B,
+                            x1: f(Math.min(...t.x.filter((l) => l !== null))) + B,
+                            x2: f(Math.max(...t.x.filter((l) => l !== null))) - B,
                             transition: { duration: c.duration }
                           }
                         },
@@ -237,14 +237,14 @@ function dt(ye) {
                     t.x.map((l, o) => /* @__PURE__ */ i.jsx(
                       se.g,
                       {
-                        onMouseEnter: (he) => {
-                          H({ ...t, xIndex: o }), P(he.clientY), Q(he.clientX), W?.({ ...t, xIndex: o });
+                        onMouseEnter: (ue) => {
+                          H({ ...t, xIndex: o }), P(ue.clientY), Q(ue.clientX), W?.({ ...t, xIndex: o });
                         },
                         onClick: () => {
-                          (X || v) && (He(j, { ...t, xIndex: o }) && pe ? (y(void 0), X?.(void 0)) : (y({ ...t, xIndex: o }), X && X({ ...t, xIndex: o })));
+                          (X || b) && (He(j, { ...t, xIndex: o }) && fe ? (y(void 0), X?.(void 0)) : (y({ ...t, xIndex: o }), X && X({ ...t, xIndex: o })));
                         },
-                        onMouseMove: (he) => {
-                          H({ ...t, xIndex: o }), P(he.clientY), Q(he.clientX);
+                        onMouseMove: (ue) => {
+                          H({ ...t, xIndex: o }), P(ue.clientY), Q(ue.clientX);
                         },
                         onMouseLeave: () => {
                           H(void 0), Q(void 0), P(void 0), W?.(void 0);
@@ -276,9 +276,9 @@ function dt(ye) {
                               },
                               exit: { opacity: 0, transition: { duration: c.duration } },
                               variants: {
-                                initial: { cx: p(0), opacity: 0 },
+                                initial: { cx: f(0), opacity: 0 },
                                 whileInView: {
-                                  cx: p(l || 0),
+                                  cx: f(l || 0),
                                   opacity: F(l) ? 0 : 1,
                                   transition: { duration: c.duration }
                                 }
@@ -301,13 +301,13 @@ function dt(ye) {
                               className: ke(
                                 "graph-value text-sm font-bold",
                                 F(l) ? "0opacity-0" : "opacity-100",
-                                u?.graphObjectValues
+                                h?.graphObjectValues
                               ),
                               exit: { opacity: 0, transition: { duration: c.duration } },
                               variants: {
-                                initial: { x: p(0), opacity: 0 },
+                                initial: { x: f(0), opacity: 0 },
                                 whileInView: {
-                                  x: p(l || 0),
+                                  x: f(l || 0),
                                   opacity: 1,
                                   transition: { duration: c.duration }
                                 }
@@ -330,10 +330,10 @@ function dt(ye) {
                 {
                   text: t.text,
                   color: t.color,
-                  x: p(t.value),
-                  y1: 0 - h.top,
-                  y2: E + h.bottom,
-                  textSide: p(t.value) > Y * 0.75 || f ? "left" : "right",
+                  x: f(t.value),
+                  y1: 0 - u.top,
+                  y2: E + u.bottom,
+                  textSide: f(t.value) > Y * 0.75 || p ? "left" : "right",
                   classNames: t.classNames,
                   styles: t.styles,
                   animate: c,
@@ -355,10 +355,10 @@ function dt(ye) {
         xPos: T,
         yPos: S,
         backgroundStyle: m?.tooltip,
-        className: u?.tooltip
+        className: h?.tooltip
       }
     ) : null,
-    v && j !== void 0 ? /* @__PURE__ */ i.jsx(
+    b && j !== void 0 ? /* @__PURE__ */ i.jsx(
       Xe,
       {
         open: j !== void 0,
@@ -369,8 +369,8 @@ function dt(ye) {
           "div",
           {
             className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof v == "string" ? { __html: Ee(v, j) } : void 0,
-            children: typeof v == "function" ? v(j) : null
+            dangerouslySetInnerHTML: typeof b == "string" ? { __html: Ee(b, j) } : void 0,
+            children: typeof b == "function" ? b(j) : null
           }
         )
       }
@@ -383,7 +383,7 @@ function mt(ye) {
     graphTitle: g,
     colors: q = Ze.light.categoricalColors.colors,
     sources: U,
-    graphDescription: b,
+    graphDescription: w,
     barPadding: ce = 0.25,
     showTicks: Z = !0,
     leftMargin: ee = 100,
@@ -405,24 +405,24 @@ function mt(ye) {
     onSeriesMouseOver: ge,
     graphID: re,
     suffix: le = "",
-    prefix: pe = "",
-    maxValue: v,
+    prefix: fe = "",
+    maxValue: b,
     minValue: _,
-    onSeriesMouseClick: fe,
+    onSeriesMouseClick: pe,
     graphDownload: ne = !1,
     dataDownload: m = !1,
-    showValues: u = !0,
+    showValues: h = !0,
     sortParameter: V,
     arrowConnector: oe = !1,
-    connectorStrokeWidth: f = 2,
+    connectorStrokeWidth: p = 2,
     language: c = "en",
     minHeight: N = 0,
     theme: G = "light",
     labelOrder: z,
     maxBarThickness: A,
-    maxNumberOfBars: w,
+    maxNumberOfBars: v,
     minBarThickness: x,
-    ariaLabel: h,
+    ariaLabel: u,
     resetSelectionOnDoubleClick: Y = !0,
     detailsOnClick: E,
     axisTitle: K,
@@ -435,35 +435,35 @@ function mt(ye) {
     animate: P = !1,
     precision: R = 2,
     customLayers: k = [],
-    showColorScale: p = !0,
+    showColorScale: f = !0,
     highlightedDataPoints: $ = [],
     dimmedOpacity: a = 0.3,
     timeline: t = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 },
     sortData: l
-  } = ye, [o, he] = L(0), [Me, je] = L(0), [ue, Te] = L(t.autoplay), d = Pe(
+  } = ye, [o, ue] = L(0), [Me, je] = L(0), [he, Te] = L(t.autoplay), d = Pe(
     We(
       s.filter((e) => e.date !== void 0 && e.date !== null),
       (e) => e.date
     ).map((e) => Se(`${e.date}`, t.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()),
     (e, r) => at(e, r)
-  ), [be, ve] = L(t.autoplay ? 0 : d.length - 1), [$e, Le] = L(void 0), xe = Ce(null), Oe = Ce(null);
+  ), [we, be] = L(t.autoplay ? 0 : d.length - 1), [$e, Le] = L(void 0), xe = Ce(null), Oe = Ce(null);
   De(() => {
     const e = new ResizeObserver((r) => {
-      he(n || r[0].target.clientWidth || 620), je(D || r[0].target.clientHeight || 480);
+      ue(n || r[0].target.clientWidth || 620), je(D || r[0].target.clientHeight || 480);
     });
-    return xe.current && (je(xe.current.clientHeight || 480), he(xe.current.clientWidth || 620), n || e.observe(xe.current)), () => e.disconnect();
+    return xe.current && (je(xe.current.clientHeight || 480), ue(xe.current.clientWidth || 620), n || e.observe(xe.current)), () => e.disconnect();
   }, [n, D]), De(() => {
     const e = setInterval(
       () => {
-        ve((r) => r < d.length - 1 ? r + 1 : 0);
+        be((r) => r < d.length - 1 ? r + 1 : 0);
       },
       (t.speed || 2) * 1e3
     );
-    return ue || clearInterval(e), () => clearInterval(e);
-  }, [d, ue, t.speed]);
+    return he || clearInterval(e), () => clearInterval(e);
+  }, [d, he, t.speed]);
   const Ne = Fe(
     d,
-    be,
+    we,
     t.showOnlyActiveDate,
     t.dateFormat || "yyyy"
   );
@@ -477,6 +477,7 @@ function mt(ye) {
         {
           className: ke(
             `${C ? C === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${c || "en"}`,
+            n ? "w-fit" : "w-full",
             T?.graphContainer
           ),
           style: {
@@ -485,14 +486,14 @@ function mt(ye) {
           },
           id: re,
           ref: Oe,
-          "aria-label": h || `${g ? `The graph shows ${g}. ` : ""}This is a dumbbell chart that shows comparisons between two or more data points across categories. ${b ? ` ${b}` : ""}`,
+          "aria-label": u || `${g ? `The graph shows ${g}. ` : ""}This is a dumbbell chart that shows comparisons between two or more data points across categories. ${w ? ` ${w}` : ""}`,
           children: /* @__PURE__ */ i.jsx(
             "div",
             {
               className: "flex grow",
               style: { padding: C ? W || "1rem" : W || 0 },
               children: /* @__PURE__ */ i.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                g || b || ne || m ? /* @__PURE__ */ i.jsx(
+                g || w || ne || m ? /* @__PURE__ */ i.jsx(
                   Je,
                   {
                     styles: {
@@ -504,7 +505,7 @@ function mt(ye) {
                       description: T?.description
                     },
                     graphTitle: g,
-                    graphDescription: b,
+                    graphDescription: w,
                     width: n,
                     graphDownload: ne ? Oe.current : void 0,
                     dataDownload: m ? s.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? s.map((e) => e.data).filter((e) => e !== void 0) : s.filter((e) => e !== void 0) : null
@@ -516,11 +517,11 @@ function mt(ye) {
                     {
                       type: "button",
                       onClick: () => {
-                        Te(!ue);
+                        Te(!he);
                       },
                       className: "p-0 border-0 cursor-pointer bg-transparent",
-                      "aria-label": ue ? "Click to pause animation" : "Click to play animation",
-                      children: ue ? /* @__PURE__ */ i.jsx(tt, {}) : /* @__PURE__ */ i.jsx(it, {})
+                      "aria-label": he ? "Click to pause animation" : "Click to play animation",
+                      children: he ? /* @__PURE__ */ i.jsx(tt, {}) : /* @__PURE__ */ i.jsx(it, {})
                     }
                   ),
                   /* @__PURE__ */ i.jsx(
@@ -531,19 +532,19 @@ function mt(ye) {
                       marks: Ne,
                       step: null,
                       defaultValue: d[d.length - 1],
-                      value: d[be],
+                      value: d[we],
                       onChangeComplete: (e) => {
-                        ve(d.indexOf(e));
+                        be(d.indexOf(e));
                       },
                       onChange: (e) => {
-                        ve(d.indexOf(e));
+                        be(d.indexOf(e));
                       },
                       "aria-label": "Time slider. Use arrow keys to adjust selected time period."
                     }
                   )
                 ] }) : null,
                 /* @__PURE__ */ i.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: s.length === 0 ? /* @__PURE__ */ i.jsx(et, {}) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-                  p ? /* @__PURE__ */ i.jsx(
+                  f ? /* @__PURE__ */ i.jsx(
                     Qe,
                     {
                       width: n,
@@ -564,33 +565,33 @@ function mt(ye) {
                         dt,
                         {
                           data: V !== void 0 ? V === "diff" ? Ve(
-                            we(
+                            ve(
                               s,
                               t.dateFormat || "yyyy"
                             ).filter(
                               (e) => t.enabled ? e.date === Ie(
-                                new Date(d[be]),
+                                new Date(d[we]),
                                 t.dateFormat || "yyyy"
                               ) : e
                             ).filter((e) => S ? !e.x.every((r) => r == null) : e),
                             (e) => F(e.x[e.x.length - 1]) || F(e.x[0]) ? -1 / 0 : e.x[e.x.length - 1] - e.x[0],
                             [l || "asc"]
-                          ).filter((e, r) => w ? r < w : !0) : Ve(
-                            we(
+                          ).filter((e, r) => v ? r < v : !0) : Ve(
+                            ve(
                               s,
                               t.dateFormat || "yyyy"
                             ).filter(
                               (e) => t.enabled ? e.date === Ie(
-                                new Date(d[be]),
+                                new Date(d[we]),
                                 t.dateFormat || "yyyy"
                               ) : e
                             ).filter((e) => S ? !e.x.every((r) => r == null) : e),
                             (e) => F(e.x[V]) ? -1 / 0 : e.x[V],
                             [l || "asc"]
-                          ).filter((e, r) => w ? r < w : !0) : we(
+                          ).filter((e, r) => v ? r < v : !0) : ve(
                             s,
                             t.dateFormat || "yyyy"
-                          ).filter((e) => S ? !e.x.every((r) => r == null) : e).filter((e, r) => w ? r < w : !0),
+                          ).filter((e) => S ? !e.x.every((r) => r == null) : e).filter((e, r) => v ? r < v : !0),
                           dotColors: q,
                           width: n || o,
                           height: Math.max(
@@ -598,7 +599,7 @@ function mt(ye) {
                             D || (M ? N ? (n || o) * M > N ? (n || o) * M : N : (n || o) * M : Me)
                           ),
                           suffix: le,
-                          prefix: pe,
+                          prefix: fe,
                           radius: ae,
                           barPadding: ce,
                           showTicks: Z,
@@ -608,23 +609,23 @@ function mt(ye) {
                           bottomMargin: ie,
                           truncateBy: J,
                           showLabels: X,
-                          showValues: u,
+                          showValues: h,
                           tooltip: I,
                           onSeriesMouseOver: ge,
-                          maxValue: F(v) ? Math.max(
+                          maxValue: F(b) ? Math.max(
                             ...s.map((e) => Math.max(...e.x.filter((r) => r !== null)))
                           ) < 0 ? 0 : Math.max(
                             ...s.map((e) => Math.max(...e.x.filter((r) => r !== null)))
-                          ) : v,
+                          ) : b,
                           minValue: F(_) ? Math.min(
                             ...s.map((e) => Math.min(...e.x.filter((r) => r !== null)))
                           ) > 0 ? 0 : Math.min(
                             ...s.map((e) => Math.min(...e.x.filter((r) => r !== null)))
                           ) : _,
-                          onSeriesMouseClick: fe,
+                          onSeriesMouseClick: pe,
                           selectedColor: $e,
                           arrowConnector: oe,
-                          connectorStrokeWidth: f,
+                          connectorStrokeWidth: p,
                           maxBarThickness: A,
                           minBarThickness: x,
                           resetSelectionOnDoubleClick: Y,
@@ -668,13 +669,13 @@ function mt(ye) {
     }
   );
 }
-function ht(ye) {
+function ut(ye) {
   const {
     data: s,
     dotColors: g,
     barPadding: q,
     showTicks: U,
-    leftMargin: b,
+    leftMargin: w,
     truncateBy: ce,
     width: Z,
     height: ee,
@@ -696,35 +697,35 @@ function ht(ye) {
     connectorStrokeWidth: ge,
     maxBarThickness: re,
     minBarThickness: le,
-    resetSelectionOnDoubleClick: pe,
-    detailsOnClick: v,
+    resetSelectionOnDoubleClick: fe,
+    detailsOnClick: b,
     axisTitle: _,
-    noOfTicks: fe,
+    noOfTicks: pe,
     valueColor: ne,
     styles: m,
-    classNames: u,
+    classNames: h,
     labelOrder: V,
     refValues: oe,
-    animate: f,
+    animate: p,
     precision: c,
     customLayers: N,
     highlightedDataPoints: G,
     dimmedOpacity: z
-  } = ye, A = Ce(null), w = qe(A, {
-    once: f.once,
-    amount: f.amount
+  } = ye, A = Ce(null), v = qe(A, {
+    once: p.once,
+    amount: p.amount
   }), x = {
     top: te,
     bottom: ie,
-    left: _ ? b + 30 : b,
+    left: _ ? w + 30 : w,
     right: de
-  }, h = Z - x.left - x.right, Y = ee - x.top - x.bottom, [E, K] = L(void 0), [H, j] = L(void 0), [y, T] = L(void 0), [Q, S] = L(void 0), P = s.map((a, t) => ({
+  }, u = Z - x.left - x.right, Y = ee - x.top - x.bottom, [E, K] = L(void 0), [H, j] = L(void 0), [y, T] = L(void 0), [Q, S] = L(void 0), P = s.map((a, t) => ({
     ...a,
     id: V ? `${a.label}` : `${t}`
-  })), R = V || P.map((a) => `${a.id}`), k = ze().domain([O, me]).range([Y, 0]).nice(), p = Re().domain(R).range([
+  })), R = V || P.map((a) => `${a.id}`), k = ze().domain([O, me]).range([Y, 0]).nice(), f = Re().domain(R).range([
     0,
-    le ? Math.max(h, le * P.length) : re ? Math.min(h, re * P.length) : h
-  ]).paddingInner(q), $ = k.ticks(fe);
+    le ? Math.max(u, le * P.length) : re ? Math.min(u, re * P.length) : u
+  ]).paddingInner(q), $ = k.ticks(pe);
   return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
     /* @__PURE__ */ i.jsxs(
       se.svg,
@@ -760,8 +761,8 @@ function ht(ye) {
               {
                 y1: k(O < 0 ? 0 : O),
                 y2: k(O < 0 ? 0 : O),
-                x1: 0 - b,
-                x2: h + x.right,
+                x1: 0 - w,
+                x2: u + x.right,
                 label: Ae(
                   O < 0 ? 0 : O,
                   "NA",
@@ -770,14 +771,14 @@ function ht(ye) {
                   ae
                 ),
                 labelPos: {
-                  x: 0 - b,
+                  x: 0 - w,
                   dx: 0,
                   dy: me < 0 ? "1em" : -5,
                   y: k(O < 0 ? 0 : O)
                 },
                 classNames: {
-                  axis: u?.xAxis?.axis,
-                  label: u?.yAxis?.labels
+                  axis: h?.xAxis?.axis,
+                  label: h?.yAxis?.labels
                 },
                 styles: { axis: m?.xAxis?.axis, label: m?.yAxis?.labels }
               }
@@ -787,15 +788,15 @@ function ht(ye) {
               {
                 values: $.filter((a) => a !== 0),
                 y: $.filter((a) => a !== 0).map((a) => k(a)),
-                x1: 0 - b,
-                x2: h + x.right,
+                x1: 0 - w,
+                x2: u + x.right,
                 styles: {
                   gridLines: m?.yAxis?.gridLines,
                   labels: m?.yAxis?.labels
                 },
                 classNames: {
-                  gridLines: u?.yAxis?.gridLines,
-                  labels: u?.yAxis?.labels
+                  gridLines: h?.yAxis?.gridLines,
+                  labels: h?.yAxis?.labels
                 },
                 suffix: ae,
                 prefix: X,
@@ -808,10 +809,10 @@ function ht(ye) {
             /* @__PURE__ */ i.jsx(
               _e,
               {
-                x: 0 - b - 15,
+                x: 0 - w - 15,
                 y: Y / 2,
                 style: m?.yAxis?.title,
-                className: u?.yAxis?.title,
+                className: h?.yAxis?.title,
                 text: _,
                 rotate90: !0
               }
@@ -824,34 +825,34 @@ function ht(ye) {
                   className: "undp-viz-g-with-hover",
                   variants: {
                     initial: {
-                      x: p(`${a.id}`) + p.bandwidth() / 2,
+                      x: f(`${a.id}`) + f.bandwidth() / 2,
                       y: 0,
                       opacity: G.length !== 0 ? G.indexOf(a.label) !== -1 ? 0.85 : z : 0.85
                     },
                     whileInView: {
-                      x: p(`${a.id}`) + p.bandwidth() / 2,
+                      x: f(`${a.id}`) + f.bandwidth() / 2,
                       y: 0,
                       opacity: G.length !== 0 ? G.indexOf(a.label) !== -1 ? 0.85 : z : 0.85,
-                      transition: { duration: f.duration }
+                      transition: { duration: p.duration }
                     }
                   },
                   initial: "initial",
-                  animate: w ? "whileInView" : "initial",
-                  exit: { opacity: 0, transition: { duration: f.duration } },
+                  animate: v ? "whileInView" : "initial",
+                  exit: { opacity: 0, transition: { duration: p.duration } },
                   children: [
                     D ? /* @__PURE__ */ i.jsx(
                       ct,
                       {
                         value: `${a.label}`.length < ce ? `${a.label}` : `${`${a.label}`.substring(0, ce)}...`,
                         y: Y + 5,
-                        x: 0 - p.bandwidth() / 2,
-                        width: p.bandwidth(),
+                        x: 0 - f.bandwidth() / 2,
+                        width: f.bandwidth(),
                         height: x.bottom,
                         style: m?.xAxis?.labels,
-                        className: u?.xAxis?.labels,
+                        className: h?.xAxis?.labels,
                         alignment: "top",
-                        animate: f,
-                        isInView: w
+                        animate: p,
+                        isInView: v
                       }
                     ) : null,
                     /* @__PURE__ */ i.jsx(
@@ -866,11 +867,11 @@ function ht(ye) {
                         },
                         className: ke(
                           "stroke-primary-gray-600 dark:stroke-primary-gray-300",
-                          u?.dataConnectors
+                          h?.dataConnectors
                         ),
                         markerEnd: M && a.x.indexOf(Math.min(...a.x.filter((t) => t !== null))) === 0 ? "url(#arrow)" : "",
                         markerStart: M && a.x.indexOf(Math.min(...a.x.filter((t) => t !== null))) === a.x.length - 1 ? "url(#arrow)" : "",
-                        exit: { opacity: 0, transition: { duration: f.duration } },
+                        exit: { opacity: 0, transition: { duration: p.duration } },
                         variants: {
                           initial: {
                             y1: 0,
@@ -879,11 +880,11 @@ function ht(ye) {
                           whileInView: {
                             y1: k(Math.min(...a.x.filter((t) => t !== null))) + J,
                             y2: k(Math.max(...a.x.filter((t) => t !== null))) - J,
-                            transition: { duration: f.duration }
+                            transition: { duration: p.duration }
                           }
                         },
                         initial: "initial",
-                        animate: w ? "whileInView" : "initial"
+                        animate: v ? "whileInView" : "initial"
                       }
                     ),
                     a.x.map((t, l) => /* @__PURE__ */ i.jsx(
@@ -893,7 +894,7 @@ function ht(ye) {
                           K({ ...a, xIndex: l }), S(o.clientY), T(o.clientX), B?.({ ...a, xIndex: l });
                         },
                         onClick: () => {
-                          (W || v) && (He(H, { ...a, xIndex: l }) && pe ? (j(void 0), W?.(void 0)) : (j({ ...a, xIndex: l }), W && W({ ...a, xIndex: l })));
+                          (W || b) && (He(H, { ...a, xIndex: l }) && fe ? (j(void 0), W?.(void 0)) : (j({ ...a, xIndex: l }), W && W({ ...a, xIndex: l })));
                         },
                         onMouseMove: (o) => {
                           K({ ...a, xIndex: l }), S(o.clientY), T(o.clientX);
@@ -901,18 +902,18 @@ function ht(ye) {
                         onMouseLeave: () => {
                           K(void 0), T(void 0), S(void 0), B?.(void 0);
                         },
-                        exit: { opacity: 0, transition: { duration: f.duration } },
+                        exit: { opacity: 0, transition: { duration: p.duration } },
                         variants: {
                           initial: {
                             opacity: I ? g[l] === I ? 1 : 0.3 : 1
                           },
                           whileInView: {
                             opacity: I ? g[l] === I ? 1 : 0.3 : 1,
-                            transition: { duration: f.duration }
+                            transition: { duration: p.duration }
                           }
                         },
                         initial: "initial",
-                        animate: w ? "whileInView" : "initial",
+                        animate: v ? "whileInView" : "initial",
                         children: F(t) ? null : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
                           /* @__PURE__ */ i.jsx(
                             se.circle,
@@ -925,17 +926,17 @@ function ht(ye) {
                                 stroke: g[l],
                                 strokeWidth: 1
                               },
-                              exit: { opacity: 0, transition: { duration: f.duration } },
+                              exit: { opacity: 0, transition: { duration: p.duration } },
                               variants: {
                                 initial: { cy: k(0), opacity: 0 },
                                 whileInView: {
                                   cy: k(t || 0),
                                   opacity: F(t) ? 0 : 1,
-                                  transition: { duration: f.duration }
+                                  transition: { duration: p.duration }
                                 }
                               },
                               initial: "initial",
-                              animate: w ? "whileInView" : "initial"
+                              animate: v ? "whileInView" : "initial"
                             }
                           ),
                           C ? /* @__PURE__ */ i.jsx(
@@ -950,21 +951,21 @@ function ht(ye) {
                               className: ke(
                                 "graph-value text-sm font-bold",
                                 F(t) ? "opacity-0" : "opacity-100",
-                                u?.graphObjectValues
+                                h?.graphObjectValues
                               ),
                               dx: J + 3,
                               dy: "0.33em",
-                              exit: { opacity: 0, transition: { duration: f.duration } },
+                              exit: { opacity: 0, transition: { duration: p.duration } },
                               variants: {
                                 initial: { y: k(0), opacity: 0 },
                                 whileInView: {
                                   y: k(t || 0),
                                   opacity: 1,
-                                  transition: { duration: f.duration }
+                                  transition: { duration: p.duration }
                                 }
                               },
                               initial: "initial",
-                              animate: w ? "whileInView" : "initial",
+                              animate: v ? "whileInView" : "initial",
                               children: Ae(t, "NA", c, X, ae)
                             }
                           ) : null
@@ -982,12 +983,12 @@ function ht(ye) {
                   text: a.text,
                   color: a.color,
                   y: k(a.value),
-                  x1: 0 - b,
-                  x2: h + x.right,
+                  x1: 0 - w,
+                  x2: u + x.right,
                   classNames: a.classNames,
                   styles: a.styles,
-                  animate: f,
-                  isInView: w
+                  animate: p,
+                  isInView: v
                 },
                 t
               )) }) : null
@@ -1005,10 +1006,10 @@ function ht(ye) {
         xPos: y,
         yPos: Q,
         backgroundStyle: m?.tooltip,
-        className: u?.tooltip
+        className: h?.tooltip
       }
     ) : null,
-    v && H !== void 0 ? /* @__PURE__ */ i.jsx(
+    b && H !== void 0 ? /* @__PURE__ */ i.jsx(
       Xe,
       {
         open: H !== void 0,
@@ -1019,21 +1020,21 @@ function ht(ye) {
           "div",
           {
             className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof v == "string" ? { __html: Ee(v, H) } : void 0,
-            children: typeof v == "function" ? v(H) : null
+            dangerouslySetInnerHTML: typeof b == "string" ? { __html: Ee(b, H) } : void 0,
+            children: typeof b == "function" ? b(H) : null
           }
         )
       }
     ) : null
   ] });
 }
-function ut(ye) {
+function ht(ye) {
   const {
     data: s,
     graphTitle: g,
     colors: q = Ze.light.categoricalColors.colors,
     sources: U,
-    graphDescription: b,
+    graphDescription: w,
     barPadding: ce = 0.25,
     showTicks: Z = !0,
     leftMargin: ee = 20,
@@ -1055,24 +1056,24 @@ function ut(ye) {
     onSeriesMouseOver: ge,
     graphID: re,
     suffix: le = "",
-    prefix: pe = "",
-    maxValue: v,
+    prefix: fe = "",
+    maxValue: b,
     minValue: _,
-    onSeriesMouseClick: fe,
+    onSeriesMouseClick: pe,
     graphDownload: ne = !1,
     dataDownload: m = !1,
-    showValues: u = !0,
+    showValues: h = !0,
     sortParameter: V,
     arrowConnector: oe = !1,
-    connectorStrokeWidth: f = 2,
+    connectorStrokeWidth: p = 2,
     language: c = "en",
     minHeight: N = 0,
     theme: G = "light",
     maxBarThickness: z,
     maxNumberOfBars: A,
-    minBarThickness: w,
+    minBarThickness: v,
     ariaLabel: x,
-    resetSelectionOnDoubleClick: h = !0,
+    resetSelectionOnDoubleClick: u = !0,
     detailsOnClick: Y,
     axisTitle: E,
     noOfTicks: K = 5,
@@ -1085,35 +1086,35 @@ function ut(ye) {
     animate: P = !1,
     precision: R = 2,
     customLayers: k = [],
-    showColorScale: p = !0,
+    showColorScale: f = !0,
     highlightedDataPoints: $ = [],
     dimmedOpacity: a = 0.3,
     timeline: t = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 },
     sortData: l
-  } = ye, [o, he] = L(0), [Me, je] = L(0), [ue, Te] = L(t.autoplay), d = Pe(
+  } = ye, [o, ue] = L(0), [Me, je] = L(0), [he, Te] = L(t.autoplay), d = Pe(
     We(
       s.filter((e) => e.date !== void 0 && e.date !== null),
       (e) => e.date
     ).map((e) => Se(`${e.date}`, t.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()),
     (e, r) => at(e, r)
-  ), [be, ve] = L(t.autoplay ? 0 : d.length - 1), [$e, Le] = L(void 0), xe = Ce(null), Oe = Ce(null);
+  ), [we, be] = L(t.autoplay ? 0 : d.length - 1), [$e, Le] = L(void 0), xe = Ce(null), Oe = Ce(null);
   De(() => {
     const e = new ResizeObserver((r) => {
-      he(n || r[0].target.clientWidth || 620), je(D || r[0].target.clientHeight || 480);
+      ue(n || r[0].target.clientWidth || 620), je(D || r[0].target.clientHeight || 480);
     });
-    return xe.current && (je(xe.current.clientHeight || 480), he(xe.current.clientWidth || 620), n || e.observe(xe.current)), () => e.disconnect();
+    return xe.current && (je(xe.current.clientHeight || 480), ue(xe.current.clientWidth || 620), n || e.observe(xe.current)), () => e.disconnect();
   }, [n, D]), De(() => {
     const e = setInterval(
       () => {
-        ve((r) => r < d.length - 1 ? r + 1 : 0);
+        be((r) => r < d.length - 1 ? r + 1 : 0);
       },
       (t.speed || 2) * 1e3
     );
-    return ue || clearInterval(e), () => clearInterval(e);
-  }, [d, ue, t.speed]);
+    return he || clearInterval(e), () => clearInterval(e);
+  }, [d, he, t.speed]);
   const Ne = Fe(
     d,
-    be,
+    we,
     t.showOnlyActiveDate,
     t.dateFormat || "yyyy"
   );
@@ -1127,6 +1128,7 @@ function ut(ye) {
         {
           className: ke(
             `${C ? C === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${c || "en"}`,
+            n ? "w-fit" : "w-full",
             y?.graphContainer
           ),
           style: {
@@ -1135,14 +1137,14 @@ function ut(ye) {
           },
           id: re,
           ref: Oe,
-          "aria-label": x || `${g ? `The graph shows ${g}. ` : ""}This is a dumbbell chart that shows comparisons between two or more data points across categories. ${b ? ` ${b}` : ""}`,
+          "aria-label": x || `${g ? `The graph shows ${g}. ` : ""}This is a dumbbell chart that shows comparisons between two or more data points across categories. ${w ? ` ${w}` : ""}`,
           children: /* @__PURE__ */ i.jsx(
             "div",
             {
               className: "flex grow",
               style: { padding: C ? W || "1rem" : W || 0 },
               children: /* @__PURE__ */ i.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                g || b || ne || m ? /* @__PURE__ */ i.jsx(
+                g || w || ne || m ? /* @__PURE__ */ i.jsx(
                   Je,
                   {
                     styles: {
@@ -1154,7 +1156,7 @@ function ut(ye) {
                       description: y?.description
                     },
                     graphTitle: g,
-                    graphDescription: b,
+                    graphDescription: w,
                     width: n,
                     graphDownload: ne ? Oe.current : void 0,
                     dataDownload: m ? s.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? s.map((e) => e.data).filter((e) => e !== void 0) : s.filter((e) => e !== void 0) : null
@@ -1166,11 +1168,11 @@ function ut(ye) {
                     {
                       type: "button",
                       onClick: () => {
-                        Te(!ue);
+                        Te(!he);
                       },
                       className: "p-0 border-0 cursor-pointer bg-transparent",
-                      "aria-label": ue ? "Click to pause animation" : "Click to play animation",
-                      children: ue ? /* @__PURE__ */ i.jsx(tt, {}) : /* @__PURE__ */ i.jsx(it, {})
+                      "aria-label": he ? "Click to pause animation" : "Click to play animation",
+                      children: he ? /* @__PURE__ */ i.jsx(tt, {}) : /* @__PURE__ */ i.jsx(it, {})
                     }
                   ),
                   /* @__PURE__ */ i.jsx(
@@ -1181,19 +1183,19 @@ function ut(ye) {
                       marks: Ne,
                       step: null,
                       defaultValue: d[d.length - 1],
-                      value: d[be],
+                      value: d[we],
                       onChangeComplete: (e) => {
-                        ve(d.indexOf(e));
+                        be(d.indexOf(e));
                       },
                       onChange: (e) => {
-                        ve(d.indexOf(e));
+                        be(d.indexOf(e));
                       },
                       "aria-label": "Time slider. Use arrow keys to adjust selected time period."
                     }
                   )
                 ] }) : null,
                 /* @__PURE__ */ i.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: s.length === 0 ? /* @__PURE__ */ i.jsx(et, {}) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-                  p ? /* @__PURE__ */ i.jsx(
+                  f ? /* @__PURE__ */ i.jsx(
                     Qe,
                     {
                       width: n,
@@ -1211,33 +1213,33 @@ function ut(ye) {
                       ref: xe,
                       "aria-label": "Graph area",
                       children: (n || o) && (D || Me) ? /* @__PURE__ */ i.jsx(
-                        ht,
+                        ut,
                         {
                           data: V !== void 0 ? V === "diff" ? Ve(
-                            we(
+                            ve(
                               s,
                               t.dateFormat || "yyyy"
                             ).filter(
                               (e) => t.enabled ? e.date === Ie(
-                                new Date(d[be]),
+                                new Date(d[we]),
                                 t.dateFormat || "yyyy"
                               ) : e
                             ).filter((e) => S ? !e.x.every((r) => r == null) : e),
                             (e) => F(e.x[e.x.length - 1]) || F(e.x[0]) ? -1 / 0 : e.x[e.x.length - 1] - e.x[0],
                             [l || "asc"]
                           ).filter((e, r) => A ? r < A : !0) : Ve(
-                            we(
+                            ve(
                               s,
                               t.dateFormat || "yyyy"
                             ).filter(
                               (e) => t.enabled ? e.date === Ie(
-                                new Date(d[be]),
+                                new Date(d[we]),
                                 t.dateFormat || "yyyy"
                               ) : e
                             ).filter((e) => S ? !e.x.every((r) => r == null) : e),
                             (e) => F(e.x[V]) ? -1 / 0 : e.x[V],
                             [l || "asc"]
-                          ).filter((e, r) => A ? r < A : !0) : we(
+                          ).filter((e, r) => A ? r < A : !0) : ve(
                             s,
                             t.dateFormat || "yyyy"
                           ).filter((e) => S ? !e.x.every((r) => r == null) : e).filter((e, r) => A ? r < A : !0),
@@ -1256,28 +1258,28 @@ function ut(ye) {
                           bottomMargin: ie,
                           truncateBy: J,
                           showLabels: I,
-                          showValues: u,
+                          showValues: h,
                           tooltip: X,
                           suffix: le,
-                          prefix: pe,
+                          prefix: fe,
                           onSeriesMouseOver: ge,
-                          maxValue: F(v) ? Math.max(
+                          maxValue: F(b) ? Math.max(
                             ...s.map((e) => Math.max(...e.x.filter((r) => r !== null)))
                           ) < 0 ? 0 : Math.max(
                             ...s.map((e) => Math.max(...e.x.filter((r) => r !== null)))
-                          ) : v,
+                          ) : b,
                           minValue: F(_) ? Math.min(
                             ...s.map((e) => Math.min(...e.x.filter((r) => r !== null)))
                           ) > 0 ? 0 : Math.min(
                             ...s.map((e) => Math.min(...e.x.filter((r) => r !== null)))
                           ) : _,
-                          onSeriesMouseClick: fe,
+                          onSeriesMouseClick: pe,
                           selectedColor: $e,
                           arrowConnector: oe,
-                          connectorStrokeWidth: f,
+                          connectorStrokeWidth: p,
                           maxBarThickness: z,
-                          minBarThickness: w,
-                          resetSelectionOnDoubleClick: h,
+                          minBarThickness: v,
+                          resetSelectionOnDoubleClick: u,
                           detailsOnClick: Y,
                           axisTitle: E,
                           noOfTicks: K,
@@ -1323,7 +1325,7 @@ function zt(ye) {
     graphTitle: g,
     colors: q,
     sources: U,
-    graphDescription: b,
+    graphDescription: w,
     barPadding: ce,
     showTicks: Z,
     leftMargin: ee,
@@ -1345,24 +1347,24 @@ function zt(ye) {
     onSeriesMouseOver: ge,
     graphID: re,
     suffix: le,
-    prefix: pe,
-    maxValue: v,
+    prefix: fe,
+    maxValue: b,
     minValue: _,
-    onSeriesMouseClick: fe,
+    onSeriesMouseClick: pe,
     graphDownload: ne,
     dataDownload: m,
-    showValues: u,
+    showValues: h,
     sortParameter: V,
     arrowConnector: oe,
-    connectorStrokeWidth: f,
+    connectorStrokeWidth: p,
     language: c,
     minHeight: N,
     theme: G,
     maxBarThickness: z,
     maxNumberOfBars: A,
-    minBarThickness: w,
+    minBarThickness: v,
     ariaLabel: x,
-    resetSelectionOnDoubleClick: h,
+    resetSelectionOnDoubleClick: u,
     detailsOnClick: Y,
     axisTitle: E,
     noOfTicks: K,
@@ -1375,7 +1377,7 @@ function zt(ye) {
     filterNA: P,
     animate: R,
     precision: k,
-    showColorScale: p,
+    showColorScale: f,
     customLayers: $,
     highlightedDataPoints: a,
     dimmedOpacity: t,
@@ -1383,13 +1385,13 @@ function zt(ye) {
     sortData: o
   } = ye;
   return j === "vertical" ? /* @__PURE__ */ i.jsx(
-    ut,
+    ht,
     {
       data: s,
       graphTitle: g,
       colors: q,
       sources: U,
-      graphDescription: b,
+      graphDescription: w,
       barPadding: ce,
       showTicks: Z,
       leftMargin: ee,
@@ -1411,24 +1413,24 @@ function zt(ye) {
       onSeriesMouseOver: ge,
       graphID: re,
       suffix: le,
-      prefix: pe,
-      maxValue: v,
+      prefix: fe,
+      maxValue: b,
       minValue: _,
-      onSeriesMouseClick: fe,
+      onSeriesMouseClick: pe,
       graphDownload: ne,
       dataDownload: m,
-      showValues: u,
+      showValues: h,
       sortParameter: V,
       arrowConnector: oe,
-      connectorStrokeWidth: f,
+      connectorStrokeWidth: p,
       language: c,
       minHeight: N,
       theme: G,
       maxBarThickness: z,
       maxNumberOfBars: A,
-      minBarThickness: w,
+      minBarThickness: v,
       ariaLabel: x,
-      resetSelectionOnDoubleClick: h,
+      resetSelectionOnDoubleClick: u,
       styles: y,
       detailsOnClick: Y,
       axisTitle: E,
@@ -1440,7 +1442,7 @@ function zt(ye) {
       filterNA: P,
       animate: R,
       precision: k,
-      showColorScale: p,
+      showColorScale: f,
       customLayers: $,
       highlightedDataPoints: a,
       dimmedOpacity: t,
@@ -1454,7 +1456,7 @@ function zt(ye) {
       graphTitle: g,
       colors: q,
       sources: U,
-      graphDescription: b,
+      graphDescription: w,
       barPadding: ce,
       showTicks: Z,
       leftMargin: ee,
@@ -1476,24 +1478,24 @@ function zt(ye) {
       onSeriesMouseOver: ge,
       graphID: re,
       suffix: le,
-      prefix: pe,
-      maxValue: v,
+      prefix: fe,
+      maxValue: b,
       minValue: _,
-      onSeriesMouseClick: fe,
+      onSeriesMouseClick: pe,
       graphDownload: ne,
       dataDownload: m,
-      showValues: u,
+      showValues: h,
       sortParameter: V,
       arrowConnector: oe,
-      connectorStrokeWidth: f,
+      connectorStrokeWidth: p,
       language: c,
       minHeight: N,
       theme: G,
       maxBarThickness: z,
       maxNumberOfBars: A,
-      minBarThickness: w,
+      minBarThickness: v,
       ariaLabel: x,
-      resetSelectionOnDoubleClick: h,
+      resetSelectionOnDoubleClick: u,
       styles: y,
       detailsOnClick: Y,
       axisTitle: E,
@@ -1505,7 +1507,7 @@ function zt(ye) {
       filterNA: P,
       animate: R,
       precision: k,
-      showColorScale: p,
+      showColorScale: f,
       customLayers: $,
       highlightedDataPoints: a,
       dimmedOpacity: t,