@undp/data-viz 1.5.6 → 1.5.8

package/dist/DumbbellChart.js

@@ -34,17 +34,17 @@ import { X as ct } from "./XAxesLabels-loO78vUO.js";
 function dt(ye) {
   const {
     data: s,
-    dotColors: g,
-    suffix: q,
-    prefix: U,
+    dotColors: u,
+    suffix: U,
+    prefix: J,
     barPadding: w,
     showValues: ce,
-    showTicks: Z,
-    leftMargin: ee,
+    showTicks: ee,
+    leftMargin: te,
     truncateBy: de,
-    width: te,
-    height: ie,
-    rightMargin: J,
+    width: ie,
+    height: ae,
+    rightMargin: K,
     topMargin: D,
     bottomMargin: n,
     radius: B,
@@ -52,50 +52,50 @@ function dt(ye) {
     tooltip: O,
     onSeriesMouseOver: W,
     maxValue: C,
-    minValue: ae,
+    minValue: re,
     onSeriesMouseClick: X,
     selectedColor: I,
     arrowConnector: M,
     connectorStrokeWidth: ge,
-    maxBarThickness: re,
-    minBarThickness: le,
+    maxBarThickness: le,
+    minBarThickness: ne,
     resetSelectionOnDoubleClick: fe,
     detailsOnClick: b,
     axisTitle: _,
     noOfTicks: pe,
-    valueColor: ne,
+    valueColor: G,
     styles: m,
-    classNames: h,
+    classNames: x,
     labelOrder: V,
     refValues: oe,
     rtl: p,
     animate: c,
     precision: N,
-    customLayers: G,
-    highlightedDataPoints: z,
+    customLayers: z,
+    highlightedDataPoints: R,
     dimmedOpacity: A
-  } = ye, v = Ce(null), x = ze(v, {
+  } = ye, v = Ce(null), g = ze(v, {
     once: c.once,
     amount: c.amount
-  }), u = {
+  }), h = {
     top: _ ? D + 25 : D,
     bottom: n,
-    left: ee,
-    right: J
-  }, 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) => ({
+    left: te,
+    right: K
+  }, Y = ie - h.left - h.right, E = ae - h.top - h.bottom, [Q, H] = L(void 0), [j, y] = L(void 0), [T, Z] = L(void 0), [S, P] = L(void 0), q = s.map((t, l) => ({
     ...t,
     id: V ? `${t.label}` : `${l}`
-  })), k = V || R.map((t) => `${t.id}`), f = _e().domain([ae, C]).range([0, Y]).nice(), $ = Ge().domain(k).range([
+  })), k = V || q.map((t) => `${t.id}`), f = _e().domain([re, C]).range([0, Y]).nice(), $ = Ge().domain(k).range([
     0,
-    le ? Math.max(E, le * R.length) : re ? Math.min(E, re * R.length) : E
+    ne ? Math.max(E, ne * q.length) : le ? Math.min(E, le * q.length) : E
   ]).paddingInner(w), a = f.ticks(pe);
   return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
     /* @__PURE__ */ i.jsxs(
       se.svg,
       {
-        width: `${te}px`,
-        height: `${ie}px`,
-        viewBox: `0 0 ${te} ${ie}`,
+        width: `${ie}px`,
+        height: `${ae}px`,
+        viewBox: `0 0 ${ie} ${ae}`,
         direction: "ltr",
         ref: v,
         children: [
@@ -118,24 +118,24 @@ function dt(ye) {
               )
             }
           ) }) : null,
-          /* @__PURE__ */ i.jsxs("g", { transform: `translate(${u.left},${u.top})`, children: [
-            Z ? /* @__PURE__ */ i.jsx(
+          /* @__PURE__ */ i.jsxs("g", { transform: `translate(${h.left},${h.top})`, children: [
+            ee ? /* @__PURE__ */ i.jsx(
               rt,
               {
                 values: a.filter((t, l) => l !== 0),
                 x: a.filter((t, l) => l !== 0).map((t) => f(t)),
                 y1: 0 - D,
-                y2: E + u.bottom,
+                y2: E + h.bottom,
                 styles: {
                   gridLines: m?.xAxis?.gridLines,
                   labels: m?.xAxis?.labels
                 },
                 classNames: {
-                  gridLines: h?.xAxis?.gridLines,
-                  labels: h?.xAxis?.labels
+                  gridLines: x?.xAxis?.gridLines,
+                  labels: x?.xAxis?.labels
                 },
-                suffix: q,
-                prefix: U,
+                suffix: U,
+                prefix: J,
                 labelType: "secondary",
                 showGridLines: !0,
                 precision: N
@@ -145,29 +145,29 @@ function dt(ye) {
               Ye,
               {
                 x: Y / 2,
-                y: 0 - u.top + 15,
+                y: 0 - h.top + 15,
                 style: m?.xAxis?.title,
-                className: h?.xAxis?.title,
+                className: x?.xAxis?.title,
                 text: _
               }
             ),
             /* @__PURE__ */ i.jsx(
               Ee,
               {
-                y: R.map((t) => $(`${t.id}`) + $.bandwidth() / 2),
+                y: q.map((t) => $(`${t.id}`) + $.bandwidth() / 2),
                 x1: 0,
                 x2: Y,
                 styles: { gridLines: m?.yAxis?.gridLines },
-                classNames: { gridLines: h?.yAxis?.gridLines },
+                classNames: { gridLines: x?.yAxis?.gridLines },
                 labelType: "secondary",
                 showGridLines: !0,
                 labelPos: "vertical",
                 precision: N
               }
             ),
-            G.filter((t) => t.position === "before").map((t) => t.layer),
+            z.filter((t) => t.position === "before").map((t) => t.layer),
             /* @__PURE__ */ i.jsxs(Re, { children: [
-              R.map((t) => /* @__PURE__ */ i.jsxs(
+              q.map((t) => /* @__PURE__ */ i.jsxs(
                 se.g,
                 {
                   className: "undp-viz-g-with-hover",
@@ -175,17 +175,17 @@ function dt(ye) {
                     initial: {
                       x: 0,
                       y: $(`${t.id}`) + $.bandwidth() / 2,
-                      opacity: z.length !== 0 ? z.indexOf(t.label) !== -1 ? 0.85 : A : 0.85
+                      opacity: R.length !== 0 ? R.indexOf(t.label) !== -1 ? 0.85 : A : 0.85
                     },
                     whileInView: {
                       x: 0,
                       y: $(`${t.id}`) + $.bandwidth() / 2,
-                      opacity: z.length !== 0 ? z.indexOf(t.label) !== -1 ? 0.85 : A : 0.85,
+                      opacity: R.length !== 0 ? R.indexOf(t.label) !== -1 ? 0.85 : A : 0.85,
                       transition: { duration: c.duration }
                     }
                   },
                   initial: "initial",
-                  animate: x ? "whileInView" : "initial",
+                  animate: g ? "whileInView" : "initial",
                   exit: { opacity: 0, transition: { duration: c.duration } },
                   children: [
                     me ? /* @__PURE__ */ i.jsx(
@@ -193,14 +193,14 @@ function dt(ye) {
                       {
                         value: `${t.label}`.length < de ? `${t.label}` : `${`${t.label}`.substring(0, de)}...`,
                         y: 0 - $.bandwidth() / 2,
-                        x: 0 - u.left,
-                        width: u.left,
+                        x: 0 - h.left,
+                        width: h.left,
                         height: $.bandwidth(),
                         alignment: "right",
                         style: m?.yAxis?.labels,
-                        className: h?.yAxis?.labels,
+                        className: x?.yAxis?.labels,
                         animate: c,
-                        isInView: x
+                        isInView: g
                       }
                     ) : null,
                     /* @__PURE__ */ i.jsx(
@@ -215,7 +215,7 @@ function dt(ye) {
                         },
                         className: ke(
                           "stroke-primary-gray-600 dark:stroke-primary-gray-300",
-                          h?.dataConnectors
+                          x?.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)" : "",
@@ -232,36 +232,36 @@ function dt(ye) {
                           }
                         },
                         initial: "initial",
-                        animate: x ? "whileInView" : "initial"
+                        animate: g ? "whileInView" : "initial"
                       }
                     ),
                     t.x.map((l, o) => /* @__PURE__ */ i.jsx(
                       se.g,
                       {
                         onMouseEnter: (ue) => {
-                          H({ ...t, xIndex: o }), P(ue.clientY), Q(ue.clientX), W?.({ ...t, xIndex: o });
+                          H({ ...t, xIndex: o }), P(ue.clientY), Z(ue.clientX), W?.({ ...t, xIndex: o });
                         },
                         onClick: () => {
                           (X || b) && (Be(j, { ...t, xIndex: o }) && fe ? (y(void 0), X?.(void 0)) : (y({ ...t, xIndex: o }), X && X({ ...t, xIndex: o })));
                         },
                         onMouseMove: (ue) => {
-                          H({ ...t, xIndex: o }), P(ue.clientY), Q(ue.clientX);
+                          H({ ...t, xIndex: o }), P(ue.clientY), Z(ue.clientX);
                         },
                         onMouseLeave: () => {
-                          H(void 0), Q(void 0), P(void 0), W?.(void 0);
+                          H(void 0), Z(void 0), P(void 0), W?.(void 0);
                         },
                         exit: { opacity: 0, transition: { duration: c.duration } },
                         variants: {
                           initial: {
-                            opacity: I ? g[o] === I ? 1 : 0.3 : 1
+                            opacity: I ? u[o] === I ? 1 : 0.3 : 1
                           },
                           whileInView: {
-                            opacity: I ? g[o] === I ? 1 : 0.3 : 1,
+                            opacity: I ? u[o] === I ? 1 : 0.3 : 1,
                             transition: { duration: c.duration }
                           }
                         },
                         initial: "initial",
-                        animate: x ? "whileInView" : "initial",
+                        animate: g ? "whileInView" : "initial",
                         children: F(l) ? null : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
                           /* @__PURE__ */ i.jsx(
                             se.circle,
@@ -269,9 +269,9 @@ function dt(ye) {
                               cy: 0,
                               r: B,
                               style: {
-                                fill: g[o],
+                                fill: u[o],
                                 fillOpacity: 0.85,
-                                stroke: g[o],
+                                stroke: u[o],
                                 strokeWidth: 1,
                                 opacity: F(l) ? 0 : 1
                               },
@@ -285,7 +285,7 @@ function dt(ye) {
                                 }
                               },
                               initial: "initial",
-                              animate: x ? "whileInView" : "initial"
+                              animate: g ? "whileInView" : "initial"
                             }
                           ),
                           ce ? /* @__PURE__ */ i.jsx(
@@ -293,7 +293,6 @@ function dt(ye) {
                             {
                               y: 0,
                               style: {
-                                fill: ne || g[o],
                                 textAnchor: "middle",
                                 ...m?.graphObjectValues || {}
                               },
@@ -302,20 +301,21 @@ function dt(ye) {
                               className: ke(
                                 "graph-value text-sm font-bold",
                                 F(l) ? "0opacity-0" : "opacity-100",
-                                h?.graphObjectValues
+                                x?.graphObjectValues
                               ),
                               exit: { opacity: 0, transition: { duration: c.duration } },
                               variants: {
-                                initial: { x: f(0), opacity: 0 },
+                                initial: { x: f(0), opacity: 0, fill: G || u[o] },
                                 whileInView: {
                                   x: f(l || 0),
+                                  fill: G || u[o],
                                   opacity: 1,
                                   transition: { duration: c.duration }
                                 }
                               },
                               initial: "initial",
-                              animate: x ? "whileInView" : "initial",
-                              children: Ae(l, "NA", N, U, q)
+                              animate: g ? "whileInView" : "initial",
+                              children: Ae(l, "NA", N, J, U)
                             }
                           ) : null
                         ] })
@@ -332,31 +332,31 @@ function dt(ye) {
                   text: t.text,
                   color: t.color,
                   x: f(t.value),
-                  y1: 0 - u.top,
-                  y2: E + u.bottom,
+                  y1: 0 - h.top,
+                  y2: E + h.bottom,
                   textSide: f(t.value) > Y * 0.75 || p ? "left" : "right",
                   classNames: t.classNames,
                   styles: t.styles,
                   animate: c,
-                  isInView: x
+                  isInView: g
                 },
                 l
               )) }) : null
             ] }),
-            G.filter((t) => t.position === "after").map((t) => t.layer)
+            z.filter((t) => t.position === "after").map((t) => t.layer)
           ] })
         ]
       }
     ),
-    K && O && T && S ? /* @__PURE__ */ i.jsx(
+    Q && O && T && S ? /* @__PURE__ */ i.jsx(
       He,
       {
-        data: K,
+        data: Q,
         body: O,
         xPos: T,
         yPos: S,
         backgroundStyle: m?.tooltip,
-        className: h?.tooltip
+        className: x?.tooltip
       }
     ) : null,
     b && j !== void 0 ? /* @__PURE__ */ i.jsx(
@@ -381,17 +381,17 @@ function dt(ye) {
 function mt(ye) {
   const {
     data: s,
-    graphTitle: g,
-    colors: q = Ke.light.categoricalColors.colors,
-    sources: U,
+    graphTitle: u,
+    colors: U = Ke.light.categoricalColors.colors,
+    sources: J,
     graphDescription: w,
     barPadding: ce = 0.25,
-    showTicks: Z = !0,
-    leftMargin: ee = 100,
+    showTicks: ee = !0,
+    leftMargin: te = 100,
     rightMargin: de = 40,
-    topMargin: te = 20,
-    bottomMargin: ie = 10,
-    truncateBy: J = 999,
+    topMargin: ie = 20,
+    bottomMargin: ae = 10,
+    truncateBy: K = 999,
     height: D,
     width: n,
     footNote: B,
@@ -399,42 +399,42 @@ function mt(ye) {
     colorLegendTitle: O,
     padding: W,
     backgroundColor: C = !1,
-    radius: ae = 3,
+    radius: re = 3,
     showLabels: X = !0,
     tooltip: I,
     relativeHeight: M,
     onSeriesMouseOver: ge,
-    graphID: re,
-    suffix: le = "",
+    graphID: le,
+    suffix: ne = "",
     prefix: fe = "",
     maxValue: b,
     minValue: _,
     onSeriesMouseClick: pe,
-    graphDownload: ne = !1,
+    graphDownload: G = !1,
     dataDownload: m = !1,
-    showValues: h = !0,
+    showValues: x = !0,
     sortParameter: V,
     arrowConnector: oe = !1,
     connectorStrokeWidth: p = 2,
     language: c = "en",
     minHeight: N = 0,
-    theme: G = "light",
-    labelOrder: z,
+    theme: z = "light",
+    labelOrder: R,
     maxBarThickness: A,
     maxNumberOfBars: v,
-    minBarThickness: x,
-    ariaLabel: u,
+    minBarThickness: g,
+    ariaLabel: h,
     resetSelectionOnDoubleClick: Y = !0,
     detailsOnClick: E,
-    axisTitle: K,
+    axisTitle: Q,
     noOfTicks: H = 5,
     valueColor: j,
     styles: y,
     classNames: T,
-    refValues: Q,
+    refValues: Z,
     filterNA: S = !0,
     animate: P = !1,
-    precision: R = 2,
+    precision: q = 2,
     customLayers: k = [],
     showColorScale: f = !0,
     highlightedDataPoints: $ = [],
@@ -470,7 +470,7 @@ function mt(ye) {
   return /* @__PURE__ */ i.jsx(
     "div",
     {
-      className: `${G || "light"} flex  ${n ? "w-fit grow-0" : "w-full grow"}`,
+      className: `${z || "light"} flex  ${n ? "w-fit grow-0" : "w-full grow"}`,
       dir: c === "he" || c === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ i.jsx(
         "div",
@@ -484,16 +484,16 @@ function mt(ye) {
             ...y?.graphContainer || {},
             ...C && C !== !0 ? { backgroundColor: C } : {}
           },
-          id: re,
+          id: le,
           ref: Oe,
-          "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}` : ""}`,
+          "aria-label": h || `${u ? `The graph shows ${u}. ` : ""}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 || w || ne || m ? /* @__PURE__ */ i.jsx(
+                u || w || G || m ? /* @__PURE__ */ i.jsx(
                   qe,
                   {
                     styles: {
@@ -504,10 +504,10 @@ function mt(ye) {
                       title: T?.title,
                       description: T?.description
                     },
-                    graphTitle: g,
+                    graphTitle: u,
                     graphDescription: w,
                     width: n,
-                    graphDownload: ne ? Oe.current : void 0,
+                    graphDownload: G ? 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,
@@ -549,7 +549,7 @@ function mt(ye) {
                     {
                       width: n,
                       colorDomain: me,
-                      colors: q,
+                      colors: U,
                       colorLegendTitle: O,
                       setSelectedColor: Le,
                       showNAColor: !1
@@ -592,24 +592,24 @@ function mt(ye) {
                             s,
                             t.dateFormat || "yyyy"
                           ).filter((e) => S ? !e.x.every((r) => r == null) : e).filter((e, r) => v ? r < v : !0),
-                          dotColors: q,
+                          dotColors: U,
                           width: n || o,
                           height: Math.max(
                             N,
                             D || (M ? N ? (n || o) * M > N ? (n || o) * M : N : (n || o) * M : Me)
                           ),
-                          suffix: le,
+                          suffix: ne,
                           prefix: fe,
-                          radius: ae,
+                          radius: re,
                           barPadding: ce,
-                          showTicks: Z,
-                          leftMargin: ee,
+                          showTicks: ee,
+                          leftMargin: te,
                           rightMargin: de,
-                          topMargin: te,
-                          bottomMargin: ie,
-                          truncateBy: J,
+                          topMargin: ie,
+                          bottomMargin: ae,
+                          truncateBy: K,
                           showLabels: X,
-                          showValues: h,
+                          showValues: x,
                           tooltip: I,
                           onSeriesMouseOver: ge,
                           maxValue: F(b) ? Math.max(
@@ -627,19 +627,19 @@ function mt(ye) {
                           arrowConnector: oe,
                           connectorStrokeWidth: p,
                           maxBarThickness: A,
-                          minBarThickness: x,
+                          minBarThickness: g,
                           resetSelectionOnDoubleClick: Y,
                           detailsOnClick: E,
-                          axisTitle: K,
+                          axisTitle: Q,
                           noOfTicks: H,
                           valueColor: j,
                           styles: y,
                           classNames: T,
-                          labelOrder: z,
-                          refValues: Q,
+                          labelOrder: R,
+                          refValues: Z,
                           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,
+                          precision: q,
                           customLayers: k,
                           highlightedDataPoints: $,
                           dimmedOpacity: a
@@ -648,7 +648,7 @@ function mt(ye) {
                     }
                   )
                 ] }) }),
-                U || B ? /* @__PURE__ */ i.jsx(
+                J || B ? /* @__PURE__ */ i.jsx(
                   Ue,
                   {
                     styles: { footnote: y?.footnote, source: y?.source },
@@ -656,7 +656,7 @@ function mt(ye) {
                       footnote: T?.footnote,
                       source: T?.source
                     },
-                    sources: U,
+                    sources: J,
                     footNote: B,
                     width: n
                   }
@@ -672,17 +672,17 @@ function mt(ye) {
 function ut(ye) {
   const {
     data: s,
-    dotColors: g,
-    barPadding: q,
-    showTicks: U,
+    dotColors: u,
+    barPadding: U,
+    showTicks: J,
     leftMargin: w,
     truncateBy: ce,
-    width: Z,
-    height: ee,
+    width: ee,
+    height: te,
     rightMargin: de,
-    topMargin: te,
-    bottomMargin: ie,
-    radius: J,
+    topMargin: ie,
+    bottomMargin: ae,
+    radius: K,
     showLabels: D,
     tooltip: n,
     onSeriesMouseOver: B,
@@ -690,49 +690,49 @@ function ut(ye) {
     minValue: O,
     onSeriesMouseClick: W,
     showValues: C,
-    suffix: ae,
+    suffix: re,
     prefix: X,
     selectedColor: I,
     arrowConnector: M,
     connectorStrokeWidth: ge,
-    maxBarThickness: re,
-    minBarThickness: le,
+    maxBarThickness: le,
+    minBarThickness: ne,
     resetSelectionOnDoubleClick: fe,
     detailsOnClick: b,
     axisTitle: _,
     noOfTicks: pe,
-    valueColor: ne,
+    valueColor: G,
     styles: m,
-    classNames: h,
+    classNames: x,
     labelOrder: V,
     refValues: oe,
     animate: p,
     precision: c,
     customLayers: N,
-    highlightedDataPoints: G,
-    dimmedOpacity: z
+    highlightedDataPoints: z,
+    dimmedOpacity: R
   } = ye, A = Ce(null), v = ze(A, {
     once: p.once,
     amount: p.amount
-  }), x = {
-    top: te,
-    bottom: ie,
+  }), g = {
+    top: ie,
+    bottom: ae,
     left: _ ? w + 30 : w,
     right: de
-  }, 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) => ({
+  }, h = ee - g.left - g.right, Y = te - g.top - g.bottom, [E, Q] = L(void 0), [H, j] = L(void 0), [y, T] = L(void 0), [Z, S] = L(void 0), P = s.map((a, t) => ({
     ...a,
     id: V ? `${a.label}` : `${t}`
-  })), R = V || P.map((a) => `${a.id}`), k = _e().domain([O, me]).range([Y, 0]).nice(), f = Ge().domain(R).range([
+  })), q = V || P.map((a) => `${a.id}`), k = _e().domain([O, me]).range([Y, 0]).nice(), f = Ge().domain(q).range([
     0,
-    le ? Math.max(u, le * P.length) : re ? Math.min(u, re * P.length) : u
-  ]).paddingInner(q), $ = k.ticks(pe);
+    ne ? Math.max(h, ne * P.length) : le ? Math.min(h, le * P.length) : h
+  ]).paddingInner(U), $ = k.ticks(pe);
   return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
     /* @__PURE__ */ i.jsxs(
       se.svg,
       {
-        width: `${Z}px`,
-        height: `${ee}px`,
-        viewBox: `0 0 ${Z} ${ee}`,
+        width: `${ee}px`,
+        height: `${te}px`,
+        viewBox: `0 0 ${ee} ${te}`,
         direction: "ltr",
         ref: A,
         children: [
@@ -755,20 +755,20 @@ function ut(ye) {
               )
             }
           ) }) : null,
-          /* @__PURE__ */ i.jsxs("g", { transform: `translate(${x.left},${x.top})`, children: [
+          /* @__PURE__ */ i.jsxs("g", { transform: `translate(${g.left},${g.top})`, children: [
             /* @__PURE__ */ i.jsx(
               st,
               {
                 y1: k(O < 0 ? 0 : O),
                 y2: k(O < 0 ? 0 : O),
                 x1: 0 - w,
-                x2: u + x.right,
+                x2: h + g.right,
                 label: Ae(
                   O < 0 ? 0 : O,
                   "NA",
                   c,
                   X,
-                  ae
+                  re
                 ),
                 labelPos: {
                   x: 0 - w,
@@ -777,28 +777,28 @@ function ut(ye) {
                   y: k(O < 0 ? 0 : O)
                 },
                 classNames: {
-                  axis: h?.xAxis?.axis,
-                  label: h?.yAxis?.labels
+                  axis: x?.xAxis?.axis,
+                  label: x?.yAxis?.labels
                 },
                 styles: { axis: m?.xAxis?.axis, label: m?.yAxis?.labels }
               }
             ),
-            U ? /* @__PURE__ */ i.jsx(
+            J ? /* @__PURE__ */ i.jsx(
               Ee,
               {
                 values: $.filter((a) => a !== 0),
                 y: $.filter((a) => a !== 0).map((a) => k(a)),
                 x1: 0 - w,
-                x2: u + x.right,
+                x2: h + g.right,
                 styles: {
                   gridLines: m?.yAxis?.gridLines,
                   labels: m?.yAxis?.labels
                 },
                 classNames: {
-                  gridLines: h?.yAxis?.gridLines,
-                  labels: h?.yAxis?.labels
+                  gridLines: x?.yAxis?.gridLines,
+                  labels: x?.yAxis?.labels
                 },
-                suffix: ae,
+                suffix: re,
                 prefix: X,
                 labelType: "secondary",
                 showGridLines: !0,
@@ -812,7 +812,7 @@ function ut(ye) {
                 x: 0 - w - 15,
                 y: Y / 2,
                 style: m?.yAxis?.title,
-                className: h?.yAxis?.title,
+                className: x?.yAxis?.title,
                 text: _,
                 rotate90: !0
               }
@@ -827,12 +827,12 @@ function ut(ye) {
                     initial: {
                       x: f(`${a.id}`) + f.bandwidth() / 2,
                       y: 0,
-                      opacity: G.length !== 0 ? G.indexOf(a.label) !== -1 ? 0.85 : z : 0.85
+                      opacity: z.length !== 0 ? z.indexOf(a.label) !== -1 ? 0.85 : R : 0.85
                     },
                     whileInView: {
                       x: f(`${a.id}`) + f.bandwidth() / 2,
                       y: 0,
-                      opacity: G.length !== 0 ? G.indexOf(a.label) !== -1 ? 0.85 : z : 0.85,
+                      opacity: z.length !== 0 ? z.indexOf(a.label) !== -1 ? 0.85 : R : 0.85,
                       transition: { duration: p.duration }
                     }
                   },
@@ -847,9 +847,9 @@ function ut(ye) {
                         y: Y + 5,
                         x: 0 - f.bandwidth() / 2,
                         width: f.bandwidth(),
-                        height: x.bottom,
+                        height: g.bottom,
                         style: m?.xAxis?.labels,
-                        className: h?.xAxis?.labels,
+                        className: x?.xAxis?.labels,
                         alignment: "top",
                         animate: p,
                         isInView: v
@@ -867,7 +867,7 @@ function ut(ye) {
                         },
                         className: ke(
                           "stroke-primary-gray-600 dark:stroke-primary-gray-300",
-                          h?.dataConnectors
+                          x?.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)" : "",
@@ -878,8 +878,8 @@ function ut(ye) {
                             y2: 0
                           },
                           whileInView: {
-                            y1: k(Math.min(...a.x.filter((t) => t !== null))) + J,
-                            y2: k(Math.max(...a.x.filter((t) => t !== null))) - J,
+                            y1: k(Math.min(...a.x.filter((t) => t !== null))) + K,
+                            y2: k(Math.max(...a.x.filter((t) => t !== null))) - K,
                             transition: { duration: p.duration }
                           }
                         },
@@ -891,24 +891,24 @@ function ut(ye) {
                       se.g,
                       {
                         onMouseEnter: (o) => {
-                          K({ ...a, xIndex: l }), S(o.clientY), T(o.clientX), B?.({ ...a, xIndex: l });
+                          Q({ ...a, xIndex: l }), S(o.clientY), T(o.clientX), B?.({ ...a, xIndex: l });
                         },
                         onClick: () => {
                           (W || b) && (Be(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);
+                          Q({ ...a, xIndex: l }), S(o.clientY), T(o.clientX);
                         },
                         onMouseLeave: () => {
-                          K(void 0), T(void 0), S(void 0), B?.(void 0);
+                          Q(void 0), T(void 0), S(void 0), B?.(void 0);
                         },
                         exit: { opacity: 0, transition: { duration: p.duration } },
                         variants: {
                           initial: {
-                            opacity: I ? g[l] === I ? 1 : 0.3 : 1
+                            opacity: I ? u[l] === I ? 1 : 0.3 : 1
                           },
                           whileInView: {
-                            opacity: I ? g[l] === I ? 1 : 0.3 : 1,
+                            opacity: I ? u[l] === I ? 1 : 0.3 : 1,
                             transition: { duration: p.duration }
                           }
                         },
@@ -919,11 +919,11 @@ function ut(ye) {
                             se.circle,
                             {
                               cx: 0,
-                              r: J,
+                              r: K,
                               style: {
-                                fill: g[l],
+                                fill: u[l],
                                 fillOpacity: 0.85,
-                                stroke: g[l],
+                                stroke: u[l],
                                 strokeWidth: 1
                               },
                               exit: { opacity: 0, transition: { duration: p.duration } },
@@ -944,29 +944,29 @@ function ut(ye) {
                             {
                               x: 0,
                               style: {
-                                fill: ne || g[l],
                                 textAnchor: "start",
                                 ...m?.graphObjectValues || {}
                               },
                               className: ke(
                                 "graph-value text-sm font-bold",
                                 F(t) ? "opacity-0" : "opacity-100",
-                                h?.graphObjectValues
+                                x?.graphObjectValues
                               ),
-                              dx: J + 3,
+                              dx: K + 3,
                               dy: "0.33em",
                               exit: { opacity: 0, transition: { duration: p.duration } },
                               variants: {
-                                initial: { y: k(0), opacity: 0 },
+                                initial: { y: k(0), opacity: 0, fill: G || u[l] },
                                 whileInView: {
                                   y: k(t || 0),
+                                  fill: G || u[l],
                                   opacity: 1,
                                   transition: { duration: p.duration }
                                 }
                               },
                               initial: "initial",
                               animate: v ? "whileInView" : "initial",
-                              children: Ae(t, "NA", c, X, ae)
+                              children: Ae(t, "NA", c, X, re)
                             }
                           ) : null
                         ] })
@@ -984,7 +984,7 @@ function ut(ye) {
                   color: a.color,
                   y: k(a.value),
                   x1: 0 - w,
-                  x2: u + x.right,
+                  x2: h + g.right,
                   classNames: a.classNames,
                   styles: a.styles,
                   animate: p,
@@ -998,15 +998,15 @@ function ut(ye) {
         ]
       }
     ),
-    E && n && y && Q ? /* @__PURE__ */ i.jsx(
+    E && n && y && Z ? /* @__PURE__ */ i.jsx(
       He,
       {
         data: E,
         body: n,
         xPos: y,
-        yPos: Q,
+        yPos: Z,
         backgroundStyle: m?.tooltip,
-        className: h?.tooltip
+        className: x?.tooltip
       }
     ) : null,
     b && H !== void 0 ? /* @__PURE__ */ i.jsx(
@@ -1031,17 +1031,17 @@ function ut(ye) {
 function ht(ye) {
   const {
     data: s,
-    graphTitle: g,
-    colors: q = Ke.light.categoricalColors.colors,
-    sources: U,
+    graphTitle: u,
+    colors: U = Ke.light.categoricalColors.colors,
+    sources: J,
     graphDescription: w,
     barPadding: ce = 0.25,
-    showTicks: Z = !0,
-    leftMargin: ee = 20,
+    showTicks: ee = !0,
+    leftMargin: te = 20,
     rightMargin: de = 20,
-    topMargin: te = 20,
-    bottomMargin: ie = 25,
-    truncateBy: J = 999,
+    topMargin: ie = 20,
+    bottomMargin: ae = 25,
+    truncateBy: K = 999,
     height: D,
     width: n,
     footNote: B,
@@ -1049,42 +1049,42 @@ function ht(ye) {
     colorLegendTitle: O,
     padding: W,
     backgroundColor: C = !1,
-    radius: ae = 3,
+    radius: re = 3,
     tooltip: X,
     showLabels: I = !0,
     relativeHeight: M,
     onSeriesMouseOver: ge,
-    graphID: re,
-    suffix: le = "",
+    graphID: le,
+    suffix: ne = "",
     prefix: fe = "",
     maxValue: b,
     minValue: _,
     onSeriesMouseClick: pe,
-    graphDownload: ne = !1,
+    graphDownload: G = !1,
     dataDownload: m = !1,
-    showValues: h = !0,
+    showValues: x = !0,
     sortParameter: V,
     arrowConnector: oe = !1,
     connectorStrokeWidth: p = 2,
     language: c = "en",
     minHeight: N = 0,
-    theme: G = "light",
-    maxBarThickness: z,
+    theme: z = "light",
+    maxBarThickness: R,
     maxNumberOfBars: A,
     minBarThickness: v,
-    ariaLabel: x,
-    resetSelectionOnDoubleClick: u = !0,
+    ariaLabel: g,
+    resetSelectionOnDoubleClick: h = !0,
     detailsOnClick: Y,
     axisTitle: E,
-    noOfTicks: K = 5,
+    noOfTicks: Q = 5,
     valueColor: H,
     styles: j,
     classNames: y,
     labelOrder: T,
-    refValues: Q,
+    refValues: Z,
     filterNA: S = !0,
     animate: P = !1,
-    precision: R = 2,
+    precision: q = 2,
     customLayers: k = [],
     showColorScale: f = !0,
     highlightedDataPoints: $ = [],
@@ -1120,7 +1120,7 @@ function ht(ye) {
   return /* @__PURE__ */ i.jsx(
     "div",
     {
-      className: `${G || "light"} flex  ${n ? "w-fit grow-0" : "w-full grow"}`,
+      className: `${z || "light"} flex  ${n ? "w-fit grow-0" : "w-full grow"}`,
       dir: c === "he" || c === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ i.jsx(
         "div",
@@ -1134,16 +1134,16 @@ function ht(ye) {
             ...j?.graphContainer || {},
             ...C && C !== !0 ? { backgroundColor: C } : {}
           },
-          id: re,
+          id: le,
           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. ${w ? ` ${w}` : ""}`,
+          "aria-label": g || `${u ? `The graph shows ${u}. ` : ""}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 || w || ne || m ? /* @__PURE__ */ i.jsx(
+                u || w || G || m ? /* @__PURE__ */ i.jsx(
                   qe,
                   {
                     styles: {
@@ -1154,10 +1154,10 @@ function ht(ye) {
                       title: y?.title,
                       description: y?.description
                     },
-                    graphTitle: g,
+                    graphTitle: u,
                     graphDescription: w,
                     width: n,
-                    graphDownload: ne ? Oe.current : void 0,
+                    graphDownload: G ? 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,
@@ -1199,7 +1199,7 @@ function ht(ye) {
                     {
                       width: n,
                       colorDomain: me,
-                      colors: q,
+                      colors: U,
                       colorLegendTitle: O,
                       setSelectedColor: Le,
                       showNAColor: !1
@@ -1242,24 +1242,24 @@ function ht(ye) {
                             s,
                             t.dateFormat || "yyyy"
                           ).filter((e) => S ? !e.x.every((r) => r == null) : e).filter((e, r) => A ? r < A : !0),
-                          dotColors: q,
+                          dotColors: U,
                           width: n || o,
                           height: Math.max(
                             N,
                             D || (M ? N ? (n || o) * M > N ? (n || o) * M : N : (n || o) * M : Me)
                           ),
-                          radius: ae,
+                          radius: re,
                           barPadding: ce,
-                          showTicks: Z,
-                          leftMargin: ee,
+                          showTicks: ee,
+                          leftMargin: te,
                           rightMargin: de,
-                          topMargin: te,
-                          bottomMargin: ie,
-                          truncateBy: J,
+                          topMargin: ie,
+                          bottomMargin: ae,
+                          truncateBy: K,
                           showLabels: I,
-                          showValues: h,
+                          showValues: x,
                           tooltip: X,
-                          suffix: le,
+                          suffix: ne,
                           prefix: fe,
                           onSeriesMouseOver: ge,
                           maxValue: F(b) ? Math.max(
@@ -1276,19 +1276,19 @@ function ht(ye) {
                           selectedColor: $e,
                           arrowConnector: oe,
                           connectorStrokeWidth: p,
-                          maxBarThickness: z,
+                          maxBarThickness: R,
                           minBarThickness: v,
-                          resetSelectionOnDoubleClick: u,
+                          resetSelectionOnDoubleClick: h,
                           detailsOnClick: Y,
                           axisTitle: E,
-                          noOfTicks: K,
+                          noOfTicks: Q,
                           valueColor: H,
                           styles: j,
                           classNames: y,
                           labelOrder: T,
-                          refValues: Q,
+                          refValues: Z,
                           animate: P === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : P || { duration: 0, once: !0, amount: 0 },
-                          precision: R,
+                          precision: q,
                           customLayers: k,
                           highlightedDataPoints: $,
                           dimmedOpacity: a
@@ -1297,7 +1297,7 @@ function ht(ye) {
                     }
                   )
                 ] }) }),
-                U || B ? /* @__PURE__ */ i.jsx(
+                J || B ? /* @__PURE__ */ i.jsx(
                   Ue,
                   {
                     styles: { footnote: j?.footnote, source: j?.source },
@@ -1305,7 +1305,7 @@ function ht(ye) {
                       footnote: y?.footnote,
                       source: y?.source
                     },
-                    sources: U,
+                    sources: J,
                     footNote: B,
                     width: n
                   }
@@ -1321,17 +1321,17 @@ function ht(ye) {
 function Rt(ye) {
   const {
     data: s,
-    graphTitle: g,
-    colors: q,
-    sources: U,
+    graphTitle: u,
+    colors: U,
+    sources: J,
     graphDescription: w,
     barPadding: ce,
-    showTicks: Z,
-    leftMargin: ee,
+    showTicks: ee,
+    leftMargin: te,
     rightMargin: de,
-    topMargin: te,
-    bottomMargin: ie,
-    truncateBy: J,
+    topMargin: ie,
+    bottomMargin: ae,
+    truncateBy: K,
     height: D,
     width: n,
     footNote: B,
@@ -1339,42 +1339,42 @@ function Rt(ye) {
     colorLegendTitle: O,
     padding: W,
     backgroundColor: C,
-    radius: ae,
+    radius: re,
     tooltip: X,
     showLabels: I,
     relativeHeight: M,
     onSeriesMouseOver: ge,
-    graphID: re,
-    suffix: le,
+    graphID: le,
+    suffix: ne,
     prefix: fe,
     maxValue: b,
     minValue: _,
     onSeriesMouseClick: pe,
-    graphDownload: ne,
+    graphDownload: G,
     dataDownload: m,
-    showValues: h,
+    showValues: x,
     sortParameter: V,
     arrowConnector: oe,
     connectorStrokeWidth: p,
     language: c,
     minHeight: N,
-    theme: G,
-    maxBarThickness: z,
+    theme: z,
+    maxBarThickness: R,
     maxNumberOfBars: A,
     minBarThickness: v,
-    ariaLabel: x,
-    resetSelectionOnDoubleClick: u,
+    ariaLabel: g,
+    resetSelectionOnDoubleClick: h,
     detailsOnClick: Y,
     axisTitle: E,
-    noOfTicks: K,
+    noOfTicks: Q,
     valueColor: H,
     orientation: j = "vertical",
     styles: y,
     classNames: T,
-    labelOrder: Q,
+    labelOrder: Z,
     refValues: S,
     filterNA: P,
-    animate: R,
+    animate: q,
     precision: k,
     showColorScale: f,
     customLayers: $,
@@ -1387,17 +1387,17 @@ function Rt(ye) {
     ht,
     {
       data: s,
-      graphTitle: g,
-      colors: q,
-      sources: U,
+      graphTitle: u,
+      colors: U,
+      sources: J,
       graphDescription: w,
       barPadding: ce,
-      showTicks: Z,
-      leftMargin: ee,
+      showTicks: ee,
+      leftMargin: te,
       rightMargin: de,
-      topMargin: te,
-      bottomMargin: ie,
-      truncateBy: J,
+      topMargin: ie,
+      bottomMargin: ae,
+      truncateBy: K,
       height: D,
       width: n,
       footNote: B,
@@ -1405,41 +1405,41 @@ function Rt(ye) {
       colorLegendTitle: O,
       padding: W,
       backgroundColor: C,
-      radius: ae,
+      radius: re,
       tooltip: X,
       showLabels: I,
       relativeHeight: M,
       onSeriesMouseOver: ge,
-      graphID: re,
-      suffix: le,
+      graphID: le,
+      suffix: ne,
       prefix: fe,
       maxValue: b,
       minValue: _,
       onSeriesMouseClick: pe,
-      graphDownload: ne,
+      graphDownload: G,
       dataDownload: m,
-      showValues: h,
+      showValues: x,
       sortParameter: V,
       arrowConnector: oe,
       connectorStrokeWidth: p,
       language: c,
       minHeight: N,
-      theme: G,
-      maxBarThickness: z,
+      theme: z,
+      maxBarThickness: R,
       maxNumberOfBars: A,
       minBarThickness: v,
-      ariaLabel: x,
-      resetSelectionOnDoubleClick: u,
+      ariaLabel: g,
+      resetSelectionOnDoubleClick: h,
       styles: y,
       detailsOnClick: Y,
       axisTitle: E,
-      noOfTicks: K,
-      labelOrder: Q,
+      noOfTicks: Q,
+      labelOrder: Z,
       valueColor: H,
       classNames: T,
       refValues: S,
       filterNA: P,
-      animate: R,
+      animate: q,
       precision: k,
       showColorScale: f,
       customLayers: $,
@@ -1452,17 +1452,17 @@ function Rt(ye) {
     mt,
     {
       data: s,
-      graphTitle: g,
-      colors: q,
-      sources: U,
+      graphTitle: u,
+      colors: U,
+      sources: J,
       graphDescription: w,
       barPadding: ce,
-      showTicks: Z,
-      leftMargin: ee,
+      showTicks: ee,
+      leftMargin: te,
       rightMargin: de,
-      topMargin: te,
-      bottomMargin: ie,
-      truncateBy: J,
+      topMargin: ie,
+      bottomMargin: ae,
+      truncateBy: K,
       height: D,
       width: n,
       footNote: B,
@@ -1470,41 +1470,41 @@ function Rt(ye) {
       colorLegendTitle: O,
       padding: W,
       backgroundColor: C,
-      radius: ae,
+      radius: re,
       tooltip: X,
       showLabels: I,
       relativeHeight: M,
       onSeriesMouseOver: ge,
-      graphID: re,
-      suffix: le,
+      graphID: le,
+      suffix: ne,
       prefix: fe,
       maxValue: b,
       minValue: _,
       onSeriesMouseClick: pe,
-      graphDownload: ne,
+      graphDownload: G,
       dataDownload: m,
-      showValues: h,
+      showValues: x,
       sortParameter: V,
       arrowConnector: oe,
       connectorStrokeWidth: p,
       language: c,
       minHeight: N,
-      theme: G,
-      maxBarThickness: z,
+      theme: z,
+      maxBarThickness: R,
       maxNumberOfBars: A,
       minBarThickness: v,
-      ariaLabel: x,
-      resetSelectionOnDoubleClick: u,
+      ariaLabel: g,
+      resetSelectionOnDoubleClick: h,
       styles: y,
       detailsOnClick: Y,
       axisTitle: E,
-      noOfTicks: K,
+      noOfTicks: Q,
       valueColor: H,
       classNames: T,
-      labelOrder: Q,
+      labelOrder: Z,
       refValues: S,
       filterNA: P,
-      animate: R,
+      animate: q,
       precision: k,
       showColorScale: f,
       customLayers: $,