@undp/data-viz 1.4.3 → 1.4.4

package/dist/DumbbellChart.js

@@ -1,39 +1,39 @@
 import { j as i, m as ke } from "./index-CHPV5EwG-BPSP-7Jg.js";
-import { useRef as Ce, useState as L, useEffect as Ne } from "react";
-import { s as De } from "./index-DxagiOHo.js";
-import { p as Ae, f as Ie } from "./parse-DlCRUFh_.js";
-import { s as Se, g as Pe, x as Fe } from "./getSliderMarks-C0jptXeP.js";
-import { u as Be } from "./index-CaAIPGZo.js";
-import { i as We } from "./index-27yTRcko.js";
-import { X as He } from "./Modal-DVVwpKhP.js";
-import { n as Le } from "./numberFormattingFunction-14YCbkN2.js";
-import { T as Xe } from "./Tooltip-DyM5snqx.js";
+import { useRef as Ce, useState as L, useEffect as De } from "react";
+import { p as Se, f as Ie } from "./parse-DlCRUFh_.js";
+import { s as Pe, g as Fe, x as Be } from "./getSliderMarks-C0jptXeP.js";
+import { u as We } from "./index-CaAIPGZo.js";
+import { o as Ve } from "./index-BLizQDlg.js";
+import { i as He } from "./index-27yTRcko.js";
+import { X as Xe } from "./Modal-DVVwpKhP.js";
+import { n as Ae } from "./numberFormattingFunction-14YCbkN2.js";
+import { T as Ye } from "./Tooltip-DyM5snqx.js";
 import { c as F } from "./checkIfNullOrUndefined-DmfiKkNw.js";
-import { s as Ye } from "./string2HTML-CWHGfz_d.js";
-import { X as at } from "./XTicksAndGridLines-Bn9u5gOM.js";
-import { A as Ee } from "./AxisTitle-BmHLMRJZ.js";
-import { Y as rt } from "./YAxesLabels-CPGZjmZJ.js";
-import { Y as _e } from "./YTicksAndGridLines-B6ah7CRf.js";
-import { a as lt, R as nt } from "./ReferenceLine-CfAW3vKJ.js";
-import { a as Ge } from "./linear-DUdu7l2G.js";
-import { b as ze } from "./band-BEjh2CHI.js";
-import { u as Re } from "./use-in-view-yS6jzJAp.js";
+import { s as Ee } from "./string2HTML-CWHGfz_d.js";
+import { X as rt } from "./XTicksAndGridLines-Bn9u5gOM.js";
+import { A as _e } from "./AxisTitle-BmHLMRJZ.js";
+import { Y as lt } from "./YAxesLabels-CPGZjmZJ.js";
+import { Y as Ge } from "./YTicksAndGridLines-B6ah7CRf.js";
+import { a as nt, R as ot } from "./ReferenceLine-CfAW3vKJ.js";
+import { a as ze } from "./linear-DUdu7l2G.js";
+import { b as Re } from "./band-BEjh2CHI.js";
+import { u as qe } from "./use-in-view-yS6jzJAp.js";
 import { m as se } from "./proxy-CkpFesk1.js";
-import { A as qe } from "./index-CNvov0eg.js";
-import { GraphHeader as Ue } from "./GraphHeader.js";
-import { GraphFooter as Je } from "./GraphFooter.js";
-import { ColorLegendWithMouseOver as Ke } from "./ColorLegendWithMouseOver.js";
-import { Colors as Qe } from "./Colors.js";
-import { E as Ze } from "./EmptyState-DdTp-Mdn.js";
-import { P as et, f as tt } from "./index-BmCqpO1B.js";
+import { A as Ue } from "./index-CNvov0eg.js";
+import { GraphHeader as Je } from "./GraphHeader.js";
+import { GraphFooter as Ke } from "./GraphFooter.js";
+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 { c as it } from "./init-BhZylTFx.js";
-import { A as ot } from "./Axis-Ddg-seDi.js";
-import { X as st } from "./XAxesLabels-CaV2q-6H.js";
-function ct(ye) {
+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";
+function dt(ye) {
   const {
-    data: o,
-    dotColors: x,
+    data: s,
+    dotColors: g,
     suffix: q,
     prefix: U,
     barPadding: b,
@@ -63,31 +63,31 @@ function ct(ye) {
     axisTitle: _,
     noOfTicks: fe,
     valueColor: ne,
-    styles: d,
-    classNames: h,
+    styles: m,
+    classNames: u,
     labelOrder: V,
     refValues: oe,
     rtl: f,
-    animate: s,
+    animate: c,
     precision: N,
     customLayers: G,
     highlightedDataPoints: z,
     dimmedOpacity: A
-  } = ye, w = Ce(null), u = Re(w, {
-    once: s.once,
-    amount: s.amount
-  }), m = {
+  } = ye, w = Ce(null), x = qe(w, {
+    once: c.once,
+    amount: c.amount
+  }), h = {
     top: _ ? D + 25 : D,
     bottom: n,
     left: ee,
     right: J
-  }, Y = te - m.left - m.right, E = ie - m.top - m.bottom, [K, H] = L(void 0), [j, y] = L(void 0), [T, Q] = L(void 0), [S, P] = L(void 0), R = o.map((t, l) => ({
+  }, 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) => ({
     ...t,
     id: V ? `${t.label}` : `${l}`
-  })), k = V || R.map((t) => `${t.id}`), g = Ge().domain([ae, C]).range([0, Y]).nice(), $ = ze().domain(k).range([
+  })), k = V || R.map((t) => `${t.id}`), p = 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 = g.ticks(fe);
+  ]).paddingInner(b), a = p.ticks(fe);
   return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
     /* @__PURE__ */ i.jsxs(
       se.svg,
@@ -117,21 +117,21 @@ function ct(ye) {
               )
             }
           ) }) : null,
-          /* @__PURE__ */ i.jsxs("g", { transform: `translate(${m.left},${m.top})`, children: [
+          /* @__PURE__ */ i.jsxs("g", { transform: `translate(${h.left},${h.top})`, children: [
             Z ? /* @__PURE__ */ i.jsx(
-              at,
+              rt,
               {
                 values: a.filter((t, l) => l !== 0),
-                x: a.filter((t, l) => l !== 0).map((t) => g(t)),
+                x: a.filter((t, l) => l !== 0).map((t) => p(t)),
                 y1: 0 - D,
-                y2: E + m.bottom,
+                y2: E + h.bottom,
                 styles: {
-                  gridLines: d?.xAxis?.gridLines,
-                  labels: d?.xAxis?.labels
+                  gridLines: m?.xAxis?.gridLines,
+                  labels: m?.xAxis?.labels
                 },
                 classNames: {
-                  gridLines: h?.xAxis?.gridLines,
-                  labels: h?.xAxis?.labels
+                  gridLines: u?.xAxis?.gridLines,
+                  labels: u?.xAxis?.labels
                 },
                 suffix: q,
                 prefix: U,
@@ -141,23 +141,23 @@ function ct(ye) {
               }
             ) : null,
             /* @__PURE__ */ i.jsx(
-              Ee,
+              _e,
               {
                 x: Y / 2,
-                y: 0 - m.top + 15,
-                style: d?.xAxis?.title,
-                className: h?.xAxis?.title,
+                y: 0 - h.top + 15,
+                style: m?.xAxis?.title,
+                className: u?.xAxis?.title,
                 text: _
               }
             ),
             /* @__PURE__ */ i.jsx(
-              _e,
+              Ge,
               {
                 y: R.map((t) => $(`${t.id}`) + $.bandwidth() / 2),
                 x1: 0,
                 x2: Y,
-                styles: { gridLines: d?.yAxis?.gridLines },
-                classNames: { gridLines: h?.yAxis?.gridLines },
+                styles: { gridLines: m?.yAxis?.gridLines },
+                classNames: { gridLines: u?.yAxis?.gridLines },
                 labelType: "secondary",
                 showGridLines: !0,
                 labelPos: "vertical",
@@ -165,7 +165,7 @@ function ct(ye) {
               }
             ),
             G.filter((t) => t.position === "before").map((t) => t.layer),
-            /* @__PURE__ */ i.jsxs(qe, { children: [
+            /* @__PURE__ */ i.jsxs(Ue, { children: [
               R.map((t) => /* @__PURE__ */ i.jsxs(
                 se.g,
                 {
@@ -180,26 +180,26 @@ function ct(ye) {
                       x: 0,
                       y: $(`${t.id}`) + $.bandwidth() / 2,
                       opacity: z.length !== 0 ? z.indexOf(t.label) !== -1 ? 0.85 : A : 0.85,
-                      transition: { duration: s.duration }
+                      transition: { duration: c.duration }
                     }
                   },
                   initial: "initial",
-                  animate: u ? "whileInView" : "initial",
-                  exit: { opacity: 0, transition: { duration: s.duration } },
+                  animate: x ? "whileInView" : "initial",
+                  exit: { opacity: 0, transition: { duration: c.duration } },
                   children: [
                     me ? /* @__PURE__ */ i.jsx(
-                      rt,
+                      lt,
                       {
                         value: `${t.label}`.length < de ? `${t.label}` : `${`${t.label}`.substring(0, de)}...`,
                         y: 0 - $.bandwidth() / 2,
-                        x: 0 - m.left,
-                        width: m.left,
+                        x: 0 - h.left,
+                        width: h.left,
                         height: $.bandwidth(),
                         alignment: "right",
-                        style: d?.yAxis?.labels,
-                        className: h?.yAxis?.labels,
-                        animate: s,
-                        isInView: u
+                        style: m?.yAxis?.labels,
+                        className: u?.yAxis?.labels,
+                        animate: c,
+                        isInView: x
                       }
                     ) : null,
                     /* @__PURE__ */ i.jsx(
@@ -209,58 +209,58 @@ function ct(ye) {
                         y2: 0,
                         style: {
                           strokeWidth: ge,
-                          ...d?.dataConnectors || {},
+                          ...m?.dataConnectors || {},
                           opacity: I ? 0.3 : 1
                         },
                         className: ke(
                           "stroke-primary-gray-600 dark:stroke-primary-gray-300",
-                          h?.dataConnectors
+                          u?.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)" : "",
-                        exit: { opacity: 0, transition: { duration: s.duration } },
+                        exit: { opacity: 0, transition: { duration: c.duration } },
                         variants: {
                           initial: {
                             x1: 0,
                             x2: 0
                           },
                           whileInView: {
-                            x1: g(Math.min(...t.x.filter((l) => l !== null))) + B,
-                            x2: g(Math.max(...t.x.filter((l) => l !== null))) - B,
-                            transition: { duration: s.duration }
+                            x1: p(Math.min(...t.x.filter((l) => l !== null))) + B,
+                            x2: p(Math.max(...t.x.filter((l) => l !== null))) - B,
+                            transition: { duration: c.duration }
                           }
                         },
                         initial: "initial",
-                        animate: u ? "whileInView" : "initial"
+                        animate: x ? "whileInView" : "initial"
                       }
                     ),
-                    t.x.map((l, p) => /* @__PURE__ */ i.jsx(
+                    t.x.map((l, o) => /* @__PURE__ */ i.jsx(
                       se.g,
                       {
                         onMouseEnter: (he) => {
-                          H({ ...t, xIndex: p }), P(he.clientY), Q(he.clientX), W?.({ ...t, xIndex: p });
+                          H({ ...t, xIndex: o }), P(he.clientY), Q(he.clientX), W?.({ ...t, xIndex: o });
                         },
                         onClick: () => {
-                          (X || v) && (We(j, { ...t, xIndex: p }) && pe ? (y(void 0), X?.(void 0)) : (y({ ...t, xIndex: p }), X && X({ ...t, xIndex: p })));
+                          (X || v) && (He(j, { ...t, xIndex: o }) && pe ? (y(void 0), X?.(void 0)) : (y({ ...t, xIndex: o }), X && X({ ...t, xIndex: o })));
                         },
                         onMouseMove: (he) => {
-                          H({ ...t, xIndex: p }), P(he.clientY), Q(he.clientX);
+                          H({ ...t, xIndex: o }), P(he.clientY), Q(he.clientX);
                         },
                         onMouseLeave: () => {
                           H(void 0), Q(void 0), P(void 0), W?.(void 0);
                         },
-                        exit: { opacity: 0, transition: { duration: s.duration } },
+                        exit: { opacity: 0, transition: { duration: c.duration } },
                         variants: {
                           initial: {
-                            opacity: I ? x[p] === I ? 1 : 0.3 : 1
+                            opacity: I ? g[o] === I ? 1 : 0.3 : 1
                           },
                           whileInView: {
-                            opacity: I ? x[p] === I ? 1 : 0.3 : 1,
-                            transition: { duration: s.duration }
+                            opacity: I ? g[o] === I ? 1 : 0.3 : 1,
+                            transition: { duration: c.duration }
                           }
                         },
                         initial: "initial",
-                        animate: u ? "whileInView" : "initial",
+                        animate: x ? "whileInView" : "initial",
                         children: F(l) ? null : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
                           /* @__PURE__ */ i.jsx(
                             se.circle,
@@ -268,23 +268,23 @@ function ct(ye) {
                               cy: 0,
                               r: B,
                               style: {
-                                fill: x[p],
+                                fill: g[o],
                                 fillOpacity: 0.85,
-                                stroke: x[p],
+                                stroke: g[o],
                                 strokeWidth: 1,
                                 opacity: F(l) ? 0 : 1
                               },
-                              exit: { opacity: 0, transition: { duration: s.duration } },
+                              exit: { opacity: 0, transition: { duration: c.duration } },
                               variants: {
-                                initial: { cx: g(0), opacity: 0 },
+                                initial: { cx: p(0), opacity: 0 },
                                 whileInView: {
-                                  cx: g(l || 0),
+                                  cx: p(l || 0),
                                   opacity: F(l) ? 0 : 1,
-                                  transition: { duration: s.duration }
+                                  transition: { duration: c.duration }
                                 }
                               },
                               initial: "initial",
-                              animate: u ? "whileInView" : "initial"
+                              animate: x ? "whileInView" : "initial"
                             }
                           ),
                           ce ? /* @__PURE__ */ i.jsx(
@@ -292,52 +292,52 @@ function ct(ye) {
                             {
                               y: 0,
                               style: {
-                                fill: ne || x[p],
+                                fill: ne || g[o],
                                 textAnchor: "middle",
-                                ...d?.graphObjectValues || {}
+                                ...m?.graphObjectValues || {}
                               },
                               dx: 0,
                               dy: 0 - B - 3,
                               className: ke(
                                 "graph-value text-sm font-bold",
                                 F(l) ? "0opacity-0" : "opacity-100",
-                                h?.graphObjectValues
+                                u?.graphObjectValues
                               ),
-                              exit: { opacity: 0, transition: { duration: s.duration } },
+                              exit: { opacity: 0, transition: { duration: c.duration } },
                               variants: {
-                                initial: { x: g(0), opacity: 0 },
+                                initial: { x: p(0), opacity: 0 },
                                 whileInView: {
-                                  x: g(l || 0),
+                                  x: p(l || 0),
                                   opacity: 1,
-                                  transition: { duration: s.duration }
+                                  transition: { duration: c.duration }
                                 }
                               },
                               initial: "initial",
-                              animate: u ? "whileInView" : "initial",
-                              children: Le(l, "NA", N, U, q)
+                              animate: x ? "whileInView" : "initial",
+                              children: Ae(l, "NA", N, U, q)
                             }
                           ) : null
                         ] })
                       },
-                      p
+                      o
                     ))
                   ]
                 },
                 t.label
               )),
               oe ? /* @__PURE__ */ i.jsx(i.Fragment, { children: oe.map((t, l) => /* @__PURE__ */ i.jsx(
-                lt,
+                nt,
                 {
                   text: t.text,
                   color: t.color,
-                  x: g(t.value),
-                  y1: 0 - m.top,
-                  y2: E + m.bottom,
-                  textSide: g(t.value) > Y * 0.75 || f ? "left" : "right",
+                  x: p(t.value),
+                  y1: 0 - h.top,
+                  y2: E + h.bottom,
+                  textSide: p(t.value) > Y * 0.75 || f ? "left" : "right",
                   classNames: t.classNames,
                   styles: t.styles,
-                  animate: s,
-                  isInView: u
+                  animate: c,
+                  isInView: x
                 },
                 l
               )) }) : null
@@ -348,18 +348,18 @@ function ct(ye) {
       }
     ),
     K && O && T && S ? /* @__PURE__ */ i.jsx(
-      Xe,
+      Ye,
       {
         data: K,
         body: O,
         xPos: T,
         yPos: S,
-        backgroundStyle: d?.tooltip,
-        className: h?.tooltip
+        backgroundStyle: m?.tooltip,
+        className: u?.tooltip
       }
     ) : null,
     v && j !== void 0 ? /* @__PURE__ */ i.jsx(
-      He,
+      Xe,
       {
         open: j !== void 0,
         onClose: () => {
@@ -369,7 +369,7 @@ function ct(ye) {
           "div",
           {
             className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof v == "string" ? { __html: Ye(v, j) } : void 0,
+            dangerouslySetInnerHTML: typeof v == "string" ? { __html: Ee(v, j) } : void 0,
             children: typeof v == "function" ? v(j) : null
           }
         )
@@ -377,11 +377,11 @@ function ct(ye) {
     ) : null
   ] });
 }
-function dt(ye) {
+function mt(ye) {
   const {
-    data: o,
-    graphTitle: x,
-    colors: q = Qe.light.categoricalColors.colors,
+    data: s,
+    graphTitle: g,
+    colors: q = Ze.light.categoricalColors.colors,
     sources: U,
     graphDescription: b,
     barPadding: ce = 0.25,
@@ -410,19 +410,19 @@ function dt(ye) {
     minValue: _,
     onSeriesMouseClick: fe,
     graphDownload: ne = !1,
-    dataDownload: d = !1,
-    showValues: h = !0,
+    dataDownload: m = !1,
+    showValues: u = !0,
     sortParameter: V,
     arrowConnector: oe = !1,
     connectorStrokeWidth: f = 2,
-    language: s = "en",
+    language: c = "en",
     minHeight: N = 0,
     theme: G = "light",
     labelOrder: z,
     maxBarThickness: A,
     maxNumberOfBars: w,
-    minBarThickness: u,
-    ariaLabel: m,
+    minBarThickness: x,
+    ariaLabel: h,
     resetSelectionOnDoubleClick: Y = !0,
     detailsOnClick: E,
     axisTitle: K,
@@ -435,33 +435,34 @@ function dt(ye) {
     animate: P = !1,
     precision: R = 2,
     customLayers: k = [],
-    showColorScale: g = !0,
+    showColorScale: p = !0,
     highlightedDataPoints: $ = [],
     dimmedOpacity: a = 0.3,
-    timeline: t = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 }
-  } = ye, [l, p] = L(0), [he, Me] = L(0), [ue, Ve] = L(t.autoplay), c = Se(
-    Be(
-      o.filter((e) => e.date !== void 0 && e.date !== null),
+    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(
+    We(
+      s.filter((e) => e.date !== void 0 && e.date !== null),
       (e) => e.date
-    ).map((e) => Ae(`${e.date}`, t.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()),
-    (e, r) => it(e, r)
-  ), [be, ve] = L(t.autoplay ? 0 : c.length - 1), [Te, $e] = L(void 0), xe = Ce(null), je = Ce(null);
-  Ne(() => {
+    ).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);
+  De(() => {
     const e = new ResizeObserver((r) => {
-      p(n || r[0].target.clientWidth || 620), Me(D || r[0].target.clientHeight || 480);
+      he(n || r[0].target.clientWidth || 620), je(D || r[0].target.clientHeight || 480);
     });
-    return xe.current && (Me(xe.current.clientHeight || 480), p(xe.current.clientWidth || 620), n || e.observe(xe.current)), () => e.disconnect();
-  }, [n, D]), Ne(() => {
+    return xe.current && (je(xe.current.clientHeight || 480), he(xe.current.clientWidth || 620), n || e.observe(xe.current)), () => e.disconnect();
+  }, [n, D]), De(() => {
     const e = setInterval(
       () => {
-        ve((r) => r < c.length - 1 ? r + 1 : 0);
+        ve((r) => r < d.length - 1 ? r + 1 : 0);
       },
       (t.speed || 2) * 1e3
     );
     return ue || clearInterval(e), () => clearInterval(e);
-  }, [c, ue, t.speed]);
-  const Oe = Pe(
-    c,
+  }, [d, ue, t.speed]);
+  const Ne = Fe(
+    d,
     be,
     t.showOnlyActiveDate,
     t.dateFormat || "yyyy"
@@ -470,12 +471,12 @@ function dt(ye) {
     "div",
     {
       className: `${G || "light"} flex  ${n ? "w-fit grow-0" : "w-full grow"}`,
-      dir: s === "he" || s === "ar" ? "rtl" : void 0,
+      dir: c === "he" || c === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ i.jsx(
         "div",
         {
           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 ${s || "en"}`,
+            `${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"}`,
             T?.graphContainer
           ),
           style: {
@@ -483,16 +484,16 @@ function dt(ye) {
             ...C && C !== !0 ? { backgroundColor: C } : {}
           },
           id: re,
-          ref: je,
-          "aria-label": m || `${x ? `The graph shows ${x}. ` : ""}This is a dumbbell chart that shows comparisons between two or more data points across categories. ${b ? ` ${b}` : ""}`,
+          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}` : ""}`,
           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: [
-                x || b || ne || d ? /* @__PURE__ */ i.jsx(
-                  Ue,
+                g || b || ne || m ? /* @__PURE__ */ i.jsx(
+                  Je,
                   {
                     styles: {
                       title: y?.title,
@@ -502,54 +503,54 @@ function dt(ye) {
                       title: T?.title,
                       description: T?.description
                     },
-                    graphTitle: x,
+                    graphTitle: g,
                     graphDescription: b,
                     width: n,
-                    graphDownload: ne ? je.current : void 0,
-                    dataDownload: d ? o.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? o.map((e) => e.data).filter((e) => e !== void 0) : o.filter((e) => e !== void 0) : null
+                    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
                   }
                 ) : null,
-                t.enabled && c.length > 0 && Oe ? /* @__PURE__ */ i.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+                t.enabled && d.length > 0 && Ne ? /* @__PURE__ */ i.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
                   /* @__PURE__ */ i.jsx(
                     "button",
                     {
                       type: "button",
                       onClick: () => {
-                        Ve(!ue);
+                        Te(!ue);
                       },
                       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(et, {}) : /* @__PURE__ */ i.jsx(tt, {})
+                      children: ue ? /* @__PURE__ */ i.jsx(tt, {}) : /* @__PURE__ */ i.jsx(it, {})
                     }
                   ),
                   /* @__PURE__ */ i.jsx(
-                    Fe,
+                    Be,
                     {
-                      min: c[0],
-                      max: c[c.length - 1],
-                      marks: Oe,
+                      min: d[0],
+                      max: d[d.length - 1],
+                      marks: Ne,
                       step: null,
-                      defaultValue: c[c.length - 1],
-                      value: c[be],
+                      defaultValue: d[d.length - 1],
+                      value: d[be],
                       onChangeComplete: (e) => {
-                        ve(c.indexOf(e));
+                        ve(d.indexOf(e));
                       },
                       onChange: (e) => {
-                        ve(c.indexOf(e));
+                        ve(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: o.length === 0 ? /* @__PURE__ */ i.jsx(Ze, {}) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-                  g ? /* @__PURE__ */ i.jsx(
-                    Ke,
+                /* @__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(
+                    Qe,
                     {
                       width: n,
                       colorDomain: me,
                       colors: q,
                       colorLegendTitle: O,
-                      setSelectedColor: $e,
+                      setSelectedColor: Le,
                       showNAColor: !1
                     }
                   ) : null,
@@ -559,40 +560,42 @@ function dt(ye) {
                       className: "flex grow w-full justify-center leading-0",
                       ref: xe,
                       "aria-label": "Graph area",
-                      children: (n || l) && (D || he) ? /* @__PURE__ */ i.jsx(
-                        ct,
+                      children: (n || o) && (D || Me) ? /* @__PURE__ */ i.jsx(
+                        dt,
                         {
-                          data: V !== void 0 ? V === "diff" ? De(
+                          data: V !== void 0 ? V === "diff" ? Ve(
                             we(
-                              o,
+                              s,
                               t.dateFormat || "yyyy"
                             ).filter(
                               (e) => t.enabled ? e.date === Ie(
-                                new Date(c[be]),
+                                new Date(d[be]),
                                 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]
-                          ).reverse().filter((e, r) => w ? r < w : !0) : De(
+                            (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(
-                              o,
+                              s,
                               t.dateFormat || "yyyy"
                             ).filter(
                               (e) => t.enabled ? e.date === Ie(
-                                new Date(c[be]),
+                                new Date(d[be]),
                                 t.dateFormat || "yyyy"
                               ) : e
                             ).filter((e) => S ? !e.x.every((r) => r == null) : e),
-                            (e) => F(e.x[V]) ? -1 / 0 : e.x[V]
-                          ).reverse().filter((e, r) => w ? r < w : !0) : we(
-                            o,
+                            (e) => F(e.x[V]) ? -1 / 0 : e.x[V],
+                            [l || "asc"]
+                          ).filter((e, r) => w ? r < w : !0) : we(
+                            s,
                             t.dateFormat || "yyyy"
                           ).filter((e) => S ? !e.x.every((r) => r == null) : e).filter((e, r) => w ? r < w : !0),
                           dotColors: q,
-                          width: n || l,
+                          width: n || o,
                           height: Math.max(
                             N,
-                            D || (M ? N ? (n || l) * M > N ? (n || l) * M : N : (n || l) * M : he)
+                            D || (M ? N ? (n || o) * M > N ? (n || o) * M : N : (n || o) * M : Me)
                           ),
                           suffix: le,
                           prefix: pe,
@@ -605,25 +608,25 @@ function dt(ye) {
                           bottomMargin: ie,
                           truncateBy: J,
                           showLabels: X,
-                          showValues: h,
+                          showValues: u,
                           tooltip: I,
                           onSeriesMouseOver: ge,
                           maxValue: F(v) ? Math.max(
-                            ...o.map((e) => Math.max(...e.x.filter((r) => r !== null)))
+                            ...s.map((e) => Math.max(...e.x.filter((r) => r !== null)))
                           ) < 0 ? 0 : Math.max(
-                            ...o.map((e) => Math.max(...e.x.filter((r) => r !== null)))
+                            ...s.map((e) => Math.max(...e.x.filter((r) => r !== null)))
                           ) : v,
                           minValue: F(_) ? Math.min(
-                            ...o.map((e) => Math.min(...e.x.filter((r) => r !== null)))
+                            ...s.map((e) => Math.min(...e.x.filter((r) => r !== null)))
                           ) > 0 ? 0 : Math.min(
-                            ...o.map((e) => Math.min(...e.x.filter((r) => r !== null)))
+                            ...s.map((e) => Math.min(...e.x.filter((r) => r !== null)))
                           ) : _,
                           onSeriesMouseClick: fe,
-                          selectedColor: Te,
+                          selectedColor: $e,
                           arrowConnector: oe,
                           connectorStrokeWidth: f,
                           maxBarThickness: A,
-                          minBarThickness: u,
+                          minBarThickness: x,
                           resetSelectionOnDoubleClick: Y,
                           detailsOnClick: E,
                           axisTitle: K,
@@ -633,7 +636,7 @@ function dt(ye) {
                           classNames: T,
                           labelOrder: z,
                           refValues: Q,
-                          rtl: s === "he" || s === "ar",
+                          rtl: c === "he" || c === "ar",
                           animate: P === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : P || { duration: 0, once: !0, amount: 0 },
                           precision: R,
                           customLayers: k,
@@ -645,7 +648,7 @@ function dt(ye) {
                   )
                 ] }) }),
                 U || B ? /* @__PURE__ */ i.jsx(
-                  Je,
+                  Ke,
                   {
                     styles: { footnote: y?.footnote, source: y?.source },
                     classNames: {
@@ -665,10 +668,10 @@ function dt(ye) {
     }
   );
 }
-function mt(ye) {
+function ht(ye) {
   const {
-    data: o,
-    dotColors: x,
+    data: s,
+    dotColors: g,
     barPadding: q,
     showTicks: U,
     leftMargin: b,
@@ -698,29 +701,29 @@ function mt(ye) {
     axisTitle: _,
     noOfTicks: fe,
     valueColor: ne,
-    styles: d,
-    classNames: h,
+    styles: m,
+    classNames: u,
     labelOrder: V,
     refValues: oe,
     animate: f,
-    precision: s,
+    precision: c,
     customLayers: N,
     highlightedDataPoints: G,
     dimmedOpacity: z
-  } = ye, A = Ce(null), w = Re(A, {
+  } = ye, A = Ce(null), w = qe(A, {
     once: f.once,
     amount: f.amount
-  }), u = {
+  }), x = {
     top: te,
     bottom: ie,
     left: _ ? b + 30 : b,
     right: de
-  }, m = Z - u.left - u.right, Y = ee - u.top - u.bottom, [E, K] = L(void 0), [H, j] = L(void 0), [y, T] = L(void 0), [Q, S] = L(void 0), P = o.map((a, t) => ({
+  }, 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) => ({
     ...a,
     id: V ? `${a.label}` : `${t}`
-  })), R = V || P.map((a) => `${a.id}`), k = Ge().domain([O, me]).range([Y, 0]).nice(), g = ze().domain(R).range([
+  })), R = V || P.map((a) => `${a.id}`), k = ze().domain([O, me]).range([Y, 0]).nice(), p = Re().domain(R).range([
     0,
-    le ? Math.max(m, le * P.length) : re ? Math.min(m, re * P.length) : m
+    le ? Math.max(h, le * P.length) : re ? Math.min(h, re * P.length) : h
   ]).paddingInner(q), $ = k.ticks(fe);
   return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
     /* @__PURE__ */ i.jsxs(
@@ -751,18 +754,18 @@ function mt(ye) {
               )
             }
           ) }) : null,
-          /* @__PURE__ */ i.jsxs("g", { transform: `translate(${u.left},${u.top})`, children: [
+          /* @__PURE__ */ i.jsxs("g", { transform: `translate(${x.left},${x.top})`, children: [
             /* @__PURE__ */ i.jsx(
-              ot,
+              st,
               {
                 y1: k(O < 0 ? 0 : O),
                 y2: k(O < 0 ? 0 : O),
                 x1: 0 - b,
-                x2: m + u.right,
-                label: Le(
+                x2: h + x.right,
+                label: Ae(
                   O < 0 ? 0 : O,
                   "NA",
-                  s,
+                  c,
                   X,
                   ae
                 ),
@@ -773,60 +776,60 @@ function mt(ye) {
                   y: k(O < 0 ? 0 : O)
                 },
                 classNames: {
-                  axis: h?.xAxis?.axis,
-                  label: h?.yAxis?.labels
+                  axis: u?.xAxis?.axis,
+                  label: u?.yAxis?.labels
                 },
-                styles: { axis: d?.xAxis?.axis, label: d?.yAxis?.labels }
+                styles: { axis: m?.xAxis?.axis, label: m?.yAxis?.labels }
               }
             ),
             U ? /* @__PURE__ */ i.jsx(
-              _e,
+              Ge,
               {
                 values: $.filter((a) => a !== 0),
                 y: $.filter((a) => a !== 0).map((a) => k(a)),
                 x1: 0 - b,
-                x2: m + u.right,
+                x2: h + x.right,
                 styles: {
-                  gridLines: d?.yAxis?.gridLines,
-                  labels: d?.yAxis?.labels
+                  gridLines: m?.yAxis?.gridLines,
+                  labels: m?.yAxis?.labels
                 },
                 classNames: {
-                  gridLines: h?.yAxis?.gridLines,
-                  labels: h?.yAxis?.labels
+                  gridLines: u?.yAxis?.gridLines,
+                  labels: u?.yAxis?.labels
                 },
                 suffix: ae,
                 prefix: X,
                 labelType: "secondary",
                 showGridLines: !0,
                 labelPos: "vertical",
-                precision: s
+                precision: c
               }
             ) : null,
             /* @__PURE__ */ i.jsx(
-              Ee,
+              _e,
               {
                 x: 0 - b - 15,
                 y: Y / 2,
-                style: d?.yAxis?.title,
-                className: h?.yAxis?.title,
+                style: m?.yAxis?.title,
+                className: u?.yAxis?.title,
                 text: _,
                 rotate90: !0
               }
             ),
             N.filter((a) => a.position === "before").map((a) => a.layer),
-            /* @__PURE__ */ i.jsxs(qe, { children: [
+            /* @__PURE__ */ i.jsxs(Ue, { children: [
               P.map((a) => /* @__PURE__ */ i.jsxs(
                 se.g,
                 {
                   className: "undp-viz-g-with-hover",
                   variants: {
                     initial: {
-                      x: g(`${a.id}`) + g.bandwidth() / 2,
+                      x: p(`${a.id}`) + p.bandwidth() / 2,
                       y: 0,
                       opacity: G.length !== 0 ? G.indexOf(a.label) !== -1 ? 0.85 : z : 0.85
                     },
                     whileInView: {
-                      x: g(`${a.id}`) + g.bandwidth() / 2,
+                      x: p(`${a.id}`) + p.bandwidth() / 2,
                       y: 0,
                       opacity: G.length !== 0 ? G.indexOf(a.label) !== -1 ? 0.85 : z : 0.85,
                       transition: { duration: f.duration }
@@ -837,15 +840,15 @@ function mt(ye) {
                   exit: { opacity: 0, transition: { duration: f.duration } },
                   children: [
                     D ? /* @__PURE__ */ i.jsx(
-                      st,
+                      ct,
                       {
                         value: `${a.label}`.length < ce ? `${a.label}` : `${`${a.label}`.substring(0, ce)}...`,
                         y: Y + 5,
-                        x: 0 - g.bandwidth() / 2,
-                        width: g.bandwidth(),
-                        height: u.bottom,
-                        style: d?.xAxis?.labels,
-                        className: h?.xAxis?.labels,
+                        x: 0 - p.bandwidth() / 2,
+                        width: p.bandwidth(),
+                        height: x.bottom,
+                        style: m?.xAxis?.labels,
+                        className: u?.xAxis?.labels,
                         alignment: "top",
                         animate: f,
                         isInView: w
@@ -858,12 +861,12 @@ function mt(ye) {
                         x2: 0,
                         style: {
                           strokeWidth: ge,
-                          ...d?.dataConnectors || {},
+                          ...m?.dataConnectors || {},
                           opacity: I ? 0.3 : 1
                         },
                         className: ke(
                           "stroke-primary-gray-600 dark:stroke-primary-gray-300",
-                          h?.dataConnectors
+                          u?.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)" : "",
@@ -886,14 +889,14 @@ function mt(ye) {
                     a.x.map((t, l) => /* @__PURE__ */ i.jsx(
                       se.g,
                       {
-                        onMouseEnter: (p) => {
-                          K({ ...a, xIndex: l }), S(p.clientY), T(p.clientX), B?.({ ...a, xIndex: l });
+                        onMouseEnter: (o) => {
+                          K({ ...a, xIndex: l }), S(o.clientY), T(o.clientX), B?.({ ...a, xIndex: l });
                         },
                         onClick: () => {
-                          (W || v) && (We(H, { ...a, xIndex: l }) && pe ? (j(void 0), W?.(void 0)) : (j({ ...a, xIndex: l }), W && W({ ...a, xIndex: l })));
+                          (W || v) && (He(H, { ...a, xIndex: l }) && pe ? (j(void 0), W?.(void 0)) : (j({ ...a, xIndex: l }), W && W({ ...a, xIndex: l })));
                         },
-                        onMouseMove: (p) => {
-                          K({ ...a, xIndex: l }), S(p.clientY), T(p.clientX);
+                        onMouseMove: (o) => {
+                          K({ ...a, xIndex: l }), S(o.clientY), T(o.clientX);
                         },
                         onMouseLeave: () => {
                           K(void 0), T(void 0), S(void 0), B?.(void 0);
@@ -901,10 +904,10 @@ function mt(ye) {
                         exit: { opacity: 0, transition: { duration: f.duration } },
                         variants: {
                           initial: {
-                            opacity: I ? x[l] === I ? 1 : 0.3 : 1
+                            opacity: I ? g[l] === I ? 1 : 0.3 : 1
                           },
                           whileInView: {
-                            opacity: I ? x[l] === I ? 1 : 0.3 : 1,
+                            opacity: I ? g[l] === I ? 1 : 0.3 : 1,
                             transition: { duration: f.duration }
                           }
                         },
@@ -917,9 +920,9 @@ function mt(ye) {
                               cx: 0,
                               r: J,
                               style: {
-                                fill: x[l],
+                                fill: g[l],
                                 fillOpacity: 0.85,
-                                stroke: x[l],
+                                stroke: g[l],
                                 strokeWidth: 1
                               },
                               exit: { opacity: 0, transition: { duration: f.duration } },
@@ -940,14 +943,14 @@ function mt(ye) {
                             {
                               x: 0,
                               style: {
-                                fill: ne || x[l],
+                                fill: ne || g[l],
                                 textAnchor: "start",
-                                ...d?.graphObjectValues || {}
+                                ...m?.graphObjectValues || {}
                               },
                               className: ke(
                                 "graph-value text-sm font-bold",
                                 F(t) ? "opacity-0" : "opacity-100",
-                                h?.graphObjectValues
+                                u?.graphObjectValues
                               ),
                               dx: J + 3,
                               dy: "0.33em",
@@ -962,7 +965,7 @@ function mt(ye) {
                               },
                               initial: "initial",
                               animate: w ? "whileInView" : "initial",
-                              children: Le(t, "NA", s, X, ae)
+                              children: Ae(t, "NA", c, X, ae)
                             }
                           ) : null
                         ] })
@@ -974,13 +977,13 @@ function mt(ye) {
                 a.label
               )),
               oe ? /* @__PURE__ */ i.jsx(i.Fragment, { children: oe.map((a, t) => /* @__PURE__ */ i.jsx(
-                nt,
+                ot,
                 {
                   text: a.text,
                   color: a.color,
                   y: k(a.value),
                   x1: 0 - b,
-                  x2: m + u.right,
+                  x2: h + x.right,
                   classNames: a.classNames,
                   styles: a.styles,
                   animate: f,
@@ -995,18 +998,18 @@ function mt(ye) {
       }
     ),
     E && n && y && Q ? /* @__PURE__ */ i.jsx(
-      Xe,
+      Ye,
       {
         data: E,
         body: n,
         xPos: y,
         yPos: Q,
-        backgroundStyle: d?.tooltip,
-        className: h?.tooltip
+        backgroundStyle: m?.tooltip,
+        className: u?.tooltip
       }
     ) : null,
     v && H !== void 0 ? /* @__PURE__ */ i.jsx(
-      He,
+      Xe,
       {
         open: H !== void 0,
         onClose: () => {
@@ -1016,7 +1019,7 @@ function mt(ye) {
           "div",
           {
             className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof v == "string" ? { __html: Ye(v, H) } : void 0,
+            dangerouslySetInnerHTML: typeof v == "string" ? { __html: Ee(v, H) } : void 0,
             children: typeof v == "function" ? v(H) : null
           }
         )
@@ -1024,11 +1027,11 @@ function mt(ye) {
     ) : null
   ] });
 }
-function ht(ye) {
+function ut(ye) {
   const {
-    data: o,
-    graphTitle: x,
-    colors: q = Qe.light.categoricalColors.colors,
+    data: s,
+    graphTitle: g,
+    colors: q = Ze.light.categoricalColors.colors,
     sources: U,
     graphDescription: b,
     barPadding: ce = 0.25,
@@ -1057,19 +1060,19 @@ function ht(ye) {
     minValue: _,
     onSeriesMouseClick: fe,
     graphDownload: ne = !1,
-    dataDownload: d = !1,
-    showValues: h = !0,
+    dataDownload: m = !1,
+    showValues: u = !0,
     sortParameter: V,
     arrowConnector: oe = !1,
     connectorStrokeWidth: f = 2,
-    language: s = "en",
+    language: c = "en",
     minHeight: N = 0,
     theme: G = "light",
     maxBarThickness: z,
     maxNumberOfBars: A,
     minBarThickness: w,
-    ariaLabel: u,
-    resetSelectionOnDoubleClick: m = !0,
+    ariaLabel: x,
+    resetSelectionOnDoubleClick: h = !0,
     detailsOnClick: Y,
     axisTitle: E,
     noOfTicks: K = 5,
@@ -1082,33 +1085,34 @@ function ht(ye) {
     animate: P = !1,
     precision: R = 2,
     customLayers: k = [],
-    showColorScale: g = !0,
+    showColorScale: p = !0,
     highlightedDataPoints: $ = [],
     dimmedOpacity: a = 0.3,
-    timeline: t = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 }
-  } = ye, [l, p] = L(0), [he, Me] = L(0), [ue, Ve] = L(t.autoplay), c = Se(
-    Be(
-      o.filter((e) => e.date !== void 0 && e.date !== null),
+    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(
+    We(
+      s.filter((e) => e.date !== void 0 && e.date !== null),
       (e) => e.date
-    ).map((e) => Ae(`${e.date}`, t.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()),
-    (e, r) => it(e, r)
-  ), [be, ve] = L(t.autoplay ? 0 : c.length - 1), [Te, $e] = L(void 0), xe = Ce(null), je = Ce(null);
-  Ne(() => {
+    ).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);
+  De(() => {
     const e = new ResizeObserver((r) => {
-      p(n || r[0].target.clientWidth || 620), Me(D || r[0].target.clientHeight || 480);
+      he(n || r[0].target.clientWidth || 620), je(D || r[0].target.clientHeight || 480);
     });
-    return xe.current && (Me(xe.current.clientHeight || 480), p(xe.current.clientWidth || 620), n || e.observe(xe.current)), () => e.disconnect();
-  }, [n, D]), Ne(() => {
+    return xe.current && (je(xe.current.clientHeight || 480), he(xe.current.clientWidth || 620), n || e.observe(xe.current)), () => e.disconnect();
+  }, [n, D]), De(() => {
     const e = setInterval(
       () => {
-        ve((r) => r < c.length - 1 ? r + 1 : 0);
+        ve((r) => r < d.length - 1 ? r + 1 : 0);
       },
       (t.speed || 2) * 1e3
     );
     return ue || clearInterval(e), () => clearInterval(e);
-  }, [c, ue, t.speed]);
-  const Oe = Pe(
-    c,
+  }, [d, ue, t.speed]);
+  const Ne = Fe(
+    d,
     be,
     t.showOnlyActiveDate,
     t.dateFormat || "yyyy"
@@ -1117,12 +1121,12 @@ function ht(ye) {
     "div",
     {
       className: `${G || "light"} flex  ${n ? "w-fit grow-0" : "w-full grow"}`,
-      dir: s === "he" || s === "ar" ? "rtl" : void 0,
+      dir: c === "he" || c === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ i.jsx(
         "div",
         {
           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 ${s || "en"}`,
+            `${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"}`,
             y?.graphContainer
           ),
           style: {
@@ -1130,16 +1134,16 @@ function ht(ye) {
             ...C && C !== !0 ? { backgroundColor: C } : {}
           },
           id: re,
-          ref: je,
-          "aria-label": u || `${x ? `The graph shows ${x}. ` : ""}This is a dumbbell chart that shows comparisons between two or more data points across categories. ${b ? ` ${b}` : ""}`,
+          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}` : ""}`,
           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: [
-                x || b || ne || d ? /* @__PURE__ */ i.jsx(
-                  Ue,
+                g || b || ne || m ? /* @__PURE__ */ i.jsx(
+                  Je,
                   {
                     styles: {
                       title: j?.title,
@@ -1149,54 +1153,54 @@ function ht(ye) {
                       title: y?.title,
                       description: y?.description
                     },
-                    graphTitle: x,
+                    graphTitle: g,
                     graphDescription: b,
                     width: n,
-                    graphDownload: ne ? je.current : void 0,
-                    dataDownload: d ? o.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? o.map((e) => e.data).filter((e) => e !== void 0) : o.filter((e) => e !== void 0) : null
+                    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
                   }
                 ) : null,
-                t.enabled && c.length > 0 && Oe ? /* @__PURE__ */ i.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+                t.enabled && d.length > 0 && Ne ? /* @__PURE__ */ i.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
                   /* @__PURE__ */ i.jsx(
                     "button",
                     {
                       type: "button",
                       onClick: () => {
-                        Ve(!ue);
+                        Te(!ue);
                       },
                       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(et, {}) : /* @__PURE__ */ i.jsx(tt, {})
+                      children: ue ? /* @__PURE__ */ i.jsx(tt, {}) : /* @__PURE__ */ i.jsx(it, {})
                     }
                   ),
                   /* @__PURE__ */ i.jsx(
-                    Fe,
+                    Be,
                     {
-                      min: c[0],
-                      max: c[c.length - 1],
-                      marks: Oe,
+                      min: d[0],
+                      max: d[d.length - 1],
+                      marks: Ne,
                       step: null,
-                      defaultValue: c[c.length - 1],
-                      value: c[be],
+                      defaultValue: d[d.length - 1],
+                      value: d[be],
                       onChangeComplete: (e) => {
-                        ve(c.indexOf(e));
+                        ve(d.indexOf(e));
                       },
                       onChange: (e) => {
-                        ve(c.indexOf(e));
+                        ve(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: o.length === 0 ? /* @__PURE__ */ i.jsx(Ze, {}) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-                  g ? /* @__PURE__ */ i.jsx(
-                    Ke,
+                /* @__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(
+                    Qe,
                     {
                       width: n,
                       colorDomain: me,
                       colors: q,
                       colorLegendTitle: O,
-                      setSelectedColor: $e,
+                      setSelectedColor: Le,
                       showNAColor: !1
                     }
                   ) : null,
@@ -1206,40 +1210,42 @@ function ht(ye) {
                       className: "flex grow w-full justify-center leading-0",
                       ref: xe,
                       "aria-label": "Graph area",
-                      children: (n || l) && (D || he) ? /* @__PURE__ */ i.jsx(
-                        mt,
+                      children: (n || o) && (D || Me) ? /* @__PURE__ */ i.jsx(
+                        ht,
                         {
-                          data: V !== void 0 ? V === "diff" ? De(
+                          data: V !== void 0 ? V === "diff" ? Ve(
                             we(
-                              o,
+                              s,
                               t.dateFormat || "yyyy"
                             ).filter(
                               (e) => t.enabled ? e.date === Ie(
-                                new Date(c[be]),
+                                new Date(d[be]),
                                 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]
-                          ).filter((e, r) => A ? r < A : !0) : De(
+                            (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(
-                              o,
+                              s,
                               t.dateFormat || "yyyy"
                             ).filter(
                               (e) => t.enabled ? e.date === Ie(
-                                new Date(c[be]),
+                                new Date(d[be]),
                                 t.dateFormat || "yyyy"
                               ) : e
                             ).filter((e) => S ? !e.x.every((r) => r == null) : e),
-                            (e) => F(e.x[V]) ? -1 / 0 : e.x[V]
+                            (e) => F(e.x[V]) ? -1 / 0 : e.x[V],
+                            [l || "asc"]
                           ).filter((e, r) => A ? r < A : !0) : we(
-                            o,
+                            s,
                             t.dateFormat || "yyyy"
                           ).filter((e) => S ? !e.x.every((r) => r == null) : e).filter((e, r) => A ? r < A : !0),
                           dotColors: q,
-                          width: n || l,
+                          width: n || o,
                           height: Math.max(
                             N,
-                            D || (M ? N ? (n || l) * M > N ? (n || l) * M : N : (n || l) * M : he)
+                            D || (M ? N ? (n || o) * M > N ? (n || o) * M : N : (n || o) * M : Me)
                           ),
                           radius: ae,
                           barPadding: ce,
@@ -1250,28 +1256,28 @@ function ht(ye) {
                           bottomMargin: ie,
                           truncateBy: J,
                           showLabels: I,
-                          showValues: h,
+                          showValues: u,
                           tooltip: X,
                           suffix: le,
                           prefix: pe,
                           onSeriesMouseOver: ge,
                           maxValue: F(v) ? Math.max(
-                            ...o.map((e) => Math.max(...e.x.filter((r) => r !== null)))
+                            ...s.map((e) => Math.max(...e.x.filter((r) => r !== null)))
                           ) < 0 ? 0 : Math.max(
-                            ...o.map((e) => Math.max(...e.x.filter((r) => r !== null)))
+                            ...s.map((e) => Math.max(...e.x.filter((r) => r !== null)))
                           ) : v,
                           minValue: F(_) ? Math.min(
-                            ...o.map((e) => Math.min(...e.x.filter((r) => r !== null)))
+                            ...s.map((e) => Math.min(...e.x.filter((r) => r !== null)))
                           ) > 0 ? 0 : Math.min(
-                            ...o.map((e) => Math.min(...e.x.filter((r) => r !== null)))
+                            ...s.map((e) => Math.min(...e.x.filter((r) => r !== null)))
                           ) : _,
                           onSeriesMouseClick: fe,
-                          selectedColor: Te,
+                          selectedColor: $e,
                           arrowConnector: oe,
                           connectorStrokeWidth: f,
                           maxBarThickness: z,
                           minBarThickness: w,
-                          resetSelectionOnDoubleClick: m,
+                          resetSelectionOnDoubleClick: h,
                           detailsOnClick: Y,
                           axisTitle: E,
                           noOfTicks: K,
@@ -1291,7 +1297,7 @@ function ht(ye) {
                   )
                 ] }) }),
                 U || B ? /* @__PURE__ */ i.jsx(
-                  Je,
+                  Ke,
                   {
                     styles: { footnote: j?.footnote, source: j?.source },
                     classNames: {
@@ -1311,10 +1317,10 @@ function ht(ye) {
     }
   );
 }
-function Gt(ye) {
+function zt(ye) {
   const {
-    data: o,
-    graphTitle: x,
+    data: s,
+    graphTitle: g,
     colors: q,
     sources: U,
     graphDescription: b,
@@ -1344,19 +1350,19 @@ function Gt(ye) {
     minValue: _,
     onSeriesMouseClick: fe,
     graphDownload: ne,
-    dataDownload: d,
-    showValues: h,
+    dataDownload: m,
+    showValues: u,
     sortParameter: V,
     arrowConnector: oe,
     connectorStrokeWidth: f,
-    language: s,
+    language: c,
     minHeight: N,
     theme: G,
     maxBarThickness: z,
     maxNumberOfBars: A,
     minBarThickness: w,
-    ariaLabel: u,
-    resetSelectionOnDoubleClick: m,
+    ariaLabel: x,
+    resetSelectionOnDoubleClick: h,
     detailsOnClick: Y,
     axisTitle: E,
     noOfTicks: K,
@@ -1369,17 +1375,18 @@ function Gt(ye) {
     filterNA: P,
     animate: R,
     precision: k,
-    showColorScale: g,
+    showColorScale: p,
     customLayers: $,
     highlightedDataPoints: a,
     dimmedOpacity: t,
-    timeline: l
+    timeline: l,
+    sortData: o
   } = ye;
   return j === "vertical" ? /* @__PURE__ */ i.jsx(
-    ht,
+    ut,
     {
-      data: o,
-      graphTitle: x,
+      data: s,
+      graphTitle: g,
       colors: q,
       sources: U,
       graphDescription: b,
@@ -1409,19 +1416,19 @@ function Gt(ye) {
       minValue: _,
       onSeriesMouseClick: fe,
       graphDownload: ne,
-      dataDownload: d,
-      showValues: h,
+      dataDownload: m,
+      showValues: u,
       sortParameter: V,
       arrowConnector: oe,
       connectorStrokeWidth: f,
-      language: s,
+      language: c,
       minHeight: N,
       theme: G,
       maxBarThickness: z,
       maxNumberOfBars: A,
       minBarThickness: w,
-      ariaLabel: u,
-      resetSelectionOnDoubleClick: m,
+      ariaLabel: x,
+      resetSelectionOnDoubleClick: h,
       styles: y,
       detailsOnClick: Y,
       axisTitle: E,
@@ -1433,17 +1440,18 @@ function Gt(ye) {
       filterNA: P,
       animate: R,
       precision: k,
-      showColorScale: g,
+      showColorScale: p,
       customLayers: $,
       highlightedDataPoints: a,
       dimmedOpacity: t,
-      timeline: l
+      timeline: l,
+      sortData: o
     }
   ) : /* @__PURE__ */ i.jsx(
-    dt,
+    mt,
     {
-      data: o,
-      graphTitle: x,
+      data: s,
+      graphTitle: g,
       colors: q,
       sources: U,
       graphDescription: b,
@@ -1473,19 +1481,19 @@ function Gt(ye) {
       minValue: _,
       onSeriesMouseClick: fe,
       graphDownload: ne,
-      dataDownload: d,
-      showValues: h,
+      dataDownload: m,
+      showValues: u,
       sortParameter: V,
       arrowConnector: oe,
       connectorStrokeWidth: f,
-      language: s,
+      language: c,
       minHeight: N,
       theme: G,
       maxBarThickness: z,
       maxNumberOfBars: A,
       minBarThickness: w,
-      ariaLabel: u,
-      resetSelectionOnDoubleClick: m,
+      ariaLabel: x,
+      resetSelectionOnDoubleClick: h,
       styles: y,
       detailsOnClick: Y,
       axisTitle: E,
@@ -1497,15 +1505,16 @@ function Gt(ye) {
       filterNA: P,
       animate: R,
       precision: k,
-      showColorScale: g,
+      showColorScale: p,
       customLayers: $,
       highlightedDataPoints: a,
       dimmedOpacity: t,
-      timeline: l
+      timeline: l,
+      sortData: o
     }
   );
 }
 export {
-  Gt as DumbbellChart
+  zt as DumbbellChart
 };
 //# sourceMappingURL=DumbbellChart.js.map