@undp/data-viz 1.5.7 → 1.5.8

package/dist/StripChart.js

@@ -1,12 +1,12 @@
 import { j as l, m as ni } from "./index-CHPV5EwG-BPSP-7Jg.js";
-import { useRef as si, useState as E, useEffect as fi } from "react";
+import { useRef as si, useState as E, useEffect as ui } from "react";
 import { i as pi } from "./index-Bwrro8-q.js";
 import { X as mi } from "./Modal-DVVwpKhP.js";
 import { o as xi } from "./index-DvVprvy6.js";
 import { T as yi } from "./Tooltip-CVCGWyzw.js";
 import { c as J } from "./checkIfNullOrUndefined-DmfiKkNw.js";
 import { n as gi } from "./numberFormattingFunction-14YCbkN2.js";
-import { Colors as c } from "./Colors.js";
+import { Colors as h } from "./Colors.js";
 import { s as vi } from "./string2HTML-oFCROsus.js";
 import { a as wi } from "./linear-DUdu7l2G.js";
 import { u as Oi } from "./use-in-view-yS6jzJAp.js";
@@ -16,56 +16,56 @@ import { GraphFooter as Ci } from "./GraphFooter.js";
 import { GraphHeader as ji } from "./GraphHeader.js";
 import { ColorLegendWithMouseOver as Mi } from "./ColorLegendWithMouseOver.js";
 import { E as Di } from "./EmptyState-DdTp-Mdn.js";
-import { u as di } from "./uniqBy-BHy4I8PK.js";
-function Ni(P, e) {
+import { u as fi } from "./uniqBy-BHy4I8PK.js";
+function Ni(P, o) {
   if (P < 2) return [];
-  const d = e / (P - 1);
-  return Array.from({ length: P }, (p, o) => o * d);
+  const f = o / (P - 1);
+  return Array.from({ length: P }, (m, e) => e * f);
 }
 function Vi(P) {
   const {
-    data: e,
-    width: d,
-    height: p,
-    colors: o,
-    colorDomain: n,
-    radius: h,
+    data: o,
+    width: f,
+    height: m,
+    colors: e,
+    colorDomain: a,
+    radius: c,
     leftMargin: s,
     rightMargin: X,
     topMargin: Y,
     bottomMargin: ii,
     tooltip: F,
-    onSeriesMouseOver: k,
+    onSeriesMouseOver: S,
     highlightedDataPoints: r,
     selectedColor: R,
     minValue: G,
     maxValue: _,
-    onSeriesMouseClick: S,
+    onSeriesMouseClick: $,
     prefix: K,
     suffix: b,
     stripType: Q,
-    highlightColor: y,
-    dotOpacity: v,
+    highlightColor: x,
+    dotOpacity: y,
     resetSelectionOnDoubleClick: ti,
     detailsOnClick: N,
     styles: j,
-    classNames: $,
-    valueColor: I,
-    animate: m,
+    classNames: I,
+    valueColor: V,
+    animate: d,
     noOfTicks: w,
     dimmedOpacity: T,
     precision: B,
     customLayers: M
   } = P, q = si(null), D = Oi(q, {
-    once: m.once,
-    amount: m.amount
-  }), [H, x] = E(void 0), [u, A] = E(void 0), [U, L] = E(void 0), [f, g] = E(void 0), O = {
+    once: d.once,
+    amount: d.amount
+  }), [H, v] = E(void 0), [u, A] = E(void 0), [U, L] = E(void 0), [p, g] = E(void 0), O = {
     top: Y,
     bottom: ii,
     left: s,
     right: X
-  }, V = d - O.left - O.right, W = p - O.top - O.bottom, ei = e.map((i, t) => ({ ...i, id: `${t}` })), oi = xi(
-    ei,
+  }, k = f - O.left - O.right, W = m - O.top - O.bottom, oi = o.map((i, t) => ({ ...i, id: `${t}` })), ei = xi(
+    oi,
     [
       (i) => {
         const t = (r || []).indexOf(i.label);
@@ -73,20 +73,20 @@ function Vi(P) {
       }
     ],
     ["desc"]
-  ), li = J(_) ? Math.max(...e.filter((i) => !J(i.position)).map((i) => i.position)) < 0 ? 0 : Math.max(...e.filter((i) => !J(i.position)).map((i) => i.position)) : _, C = J(G) ? Math.min(...e.filter((i) => !J(i.position)).map((i) => i.position)) >= 0 ? 0 : Math.min(...e.filter((i) => !J(i.position)).map((i) => i.position)) : G, z = wi().domain([C, li]).range([0, V]).nice(), ri = Ni(w, V);
+  ), li = J(_) ? Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) < 0 ? 0 : Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) : _, C = J(G) ? Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) >= 0 ? 0 : Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) : G, z = wi().domain([C, li]).range([0, k]).nice(), ri = Ni(w, k);
   return /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
     /* @__PURE__ */ l.jsx(
       ai.svg,
       {
-        width: `${d}px`,
-        height: `${p}px`,
-        viewBox: `0 0 ${d} ${p}`,
+        width: `${f}px`,
+        height: `${m}px`,
+        viewBox: `0 0 ${f} ${m}`,
         direction: "ltr",
         ref: q,
         children: /* @__PURE__ */ l.jsxs("g", { transform: `translate(${O.left},${O.top})`, children: [
           M.filter((i) => i.position === "before").map((i) => i.layer),
           /* @__PURE__ */ l.jsxs(bi, { children: [
-            oi.map((i) => /* @__PURE__ */ l.jsxs(
+            ei.map((i) => /* @__PURE__ */ l.jsxs(
               ai.g,
               {
                 className: "undp-viz-g-with-hover",
@@ -99,24 +99,24 @@ function Vi(P) {
                   whileInView: {
                     x: z(i.position),
                     y: W / 2,
-                    opacity: R ? i.color && o[n.indexOf(i.color)] === R ? 0.95 : T : r.length !== 0 ? r.indexOf(i.label) !== -1 ? 0.95 : T : v,
-                    transition: { duration: m.duration }
+                    opacity: R ? i.color && e[a.indexOf(i.color)] === R ? 0.95 : T : r.length !== 0 ? r.indexOf(i.label) !== -1 ? 0.95 : T : y,
+                    transition: { duration: d.duration }
                   }
                 },
                 initial: "initial",
                 animate: D ? "whileInView" : "initial",
-                exit: { opacity: 0, transition: { duration: m.duration } },
+                exit: { opacity: 0, transition: { duration: d.duration } },
                 onMouseEnter: (t) => {
-                  x(i), g(t.clientY), L(t.clientX), k?.(i);
+                  v(i), g(t.clientY), L(t.clientX), S?.(i);
                 },
                 onClick: () => {
-                  (S || N) && (pi(u, i) && ti ? (A(void 0), S?.(void 0)) : (A(i), S?.(i)));
+                  ($ || N) && (pi(u, i) && ti ? (A(void 0), $?.(void 0)) : (A(i), $?.(i)));
                 },
                 onMouseMove: (t) => {
-                  x(i), g(t.clientY), L(t.clientX);
+                  v(i), g(t.clientY), L(t.clientX);
                 },
                 onMouseLeave: () => {
-                  x(void 0), L(void 0), g(void 0), k?.(void 0);
+                  v(void 0), L(void 0), g(void 0), S?.(void 0);
                 },
                 children: [
                   Q === "dot" ? /* @__PURE__ */ l.jsx(
@@ -126,62 +126,68 @@ function Vi(P) {
                       cx: 0,
                       variants: {
                         initial: {
-                          fill: y && r ? r.indexOf(i.label) !== -1 ? y : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray
+                          fill: x && r ? r.indexOf(i.label) !== -1 ? x : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray
                         },
                         whileInView: {
-                          fill: y && r ? r.indexOf(i.label) !== -1 ? y : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray,
-                          transition: { duration: m.duration }
+                          fill: x && r ? r.indexOf(i.label) !== -1 ? x : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray,
+                          transition: { duration: d.duration }
                         }
                       },
                       initial: "initial",
                       animate: D ? "whileInView" : "initial",
-                      exit: { opacity: 0, transition: { duration: m.duration } },
-                      r: h
+                      exit: { opacity: 0, transition: { duration: d.duration } },
+                      r: c
                     }
                   ) : /* @__PURE__ */ l.jsx(
                     ai.rect,
                     {
-                      y: 0 - h,
                       x: -1,
-                      height: h * 2,
                       width: 2,
                       variants: {
                         initial: {
-                          fill: y && r ? r.indexOf(i.label) !== -1 ? y : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray
+                          y: 0 - c,
+                          height: c * 2,
+                          fill: x && r ? r.indexOf(i.label) !== -1 ? x : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray
                         },
                         whileInView: {
-                          fill: y && r ? r.indexOf(i.label) !== -1 ? y : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray,
-                          transition: { duration: m.duration }
+                          y: 0 - c,
+                          height: c * 2,
+                          fill: x && r ? r.indexOf(i.label) !== -1 ? x : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray,
+                          transition: { duration: d.duration }
                         }
                       },
                       initial: "initial",
                       animate: D ? "whileInView" : "initial",
-                      exit: { opacity: 0, transition: { duration: m.duration } }
+                      exit: { opacity: 0, transition: { duration: d.duration } }
                     }
                   ),
                   r.length !== 0 && r.indexOf(i.label) !== -1 ? /* @__PURE__ */ l.jsx(
                     ai.text,
                     {
                       x: 0,
-                      y: 0 - h - 5,
                       variants: {
-                        initial: { opacity: 0 },
+                        initial: {
+                          opacity: 0,
+                          y: 0 - c - 5,
+                          fill: V || (x && r ? r.indexOf(i.label) !== -1 ? x : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray)
+                        },
                         whileInView: {
                           opacity: 1,
-                          transition: { duration: m.duration }
+                          y: 0 - c - 5,
+                          fill: V || (x && r ? r.indexOf(i.label) !== -1 ? x : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray),
+                          transition: { duration: d.duration }
                         }
                       },
                       initial: "initial",
                       animate: D ? "whileInView" : "initial",
-                      exit: { opacity: 0, transition: { duration: m.duration } },
+                      exit: { opacity: 0, transition: { duration: d.duration } },
                       style: {
-                        fill: I || (y && r ? r.indexOf(i.label) !== -1 ? y : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray),
                         textAnchor: "middle",
                         ...j?.graphObjectValues || {}
                       },
                       className: ni(
                         "graph-value text-sm font-bold",
-                        $?.graphObjectValues
+                        I?.graphObjectValues
                       ),
                       children: gi(i.position, "NA", B, K, b)
                     }
@@ -194,14 +200,14 @@ function Vi(P) {
               "text",
               {
                 x: i,
-                y: W / 2 + h,
+                y: W / 2 + c,
                 style: {
                   textAnchor: t === 0 ? "start" : t === ri.length - 1 ? "end" : "middle",
                   ...j?.xAxis?.labels || {}
                 },
                 className: ni(
                   "fill-primary-gray-550 dark:fill-primary-gray-500 text-xs",
-                  $?.xAxis?.labels
+                  I?.xAxis?.labels
                 ),
                 dy: "1em",
                 children: gi(z.invert(i), "NA", B, K, b)
@@ -213,15 +219,15 @@ function Vi(P) {
         ] })
       }
     ),
-    H && F && U && f ? /* @__PURE__ */ l.jsx(
+    H && F && U && p ? /* @__PURE__ */ l.jsx(
       yi,
       {
         data: H,
         body: F,
         xPos: U,
-        yPos: f,
+        yPos: p,
         backgroundStyle: j?.tooltip,
-        className: $?.tooltip
+        className: I?.tooltip
       }
     ) : null,
     N && u !== void 0 ? /* @__PURE__ */ l.jsx(
@@ -245,34 +251,34 @@ function Vi(P) {
 }
 function ki(P) {
   const {
-    data: e,
-    graphTitle: d,
-    colors: p,
-    sources: o,
-    graphDescription: n,
-    height: h,
+    data: o,
+    graphTitle: f,
+    colors: m,
+    sources: e,
+    graphDescription: a,
+    height: c,
     width: s,
     footNote: X,
     colorDomain: Y,
     colorLegendTitle: ii,
     radius: F = 5,
-    padding: k,
+    padding: S,
     backgroundColor: r = !1,
     leftMargin: R = 5,
     rightMargin: G = 5,
     topMargin: _ = 10,
-    bottomMargin: S = 10,
+    bottomMargin: $ = 10,
     tooltip: K,
     relativeHeight: b,
     onSeriesMouseOver: Q,
-    showColorScale: y = !0,
-    highlightedDataPoints: v = [],
+    showColorScale: x = !0,
+    highlightedDataPoints: y = [],
     graphID: ti,
     minValue: N,
     maxValue: j,
-    onSeriesMouseClick: $,
-    graphDownload: I = !1,
-    dataDownload: m = !1,
+    onSeriesMouseClick: I,
+    graphDownload: V = !1,
+    dataDownload: d = !1,
     prefix: w = "",
     suffix: T = "",
     stripType: B = "dot",
@@ -280,26 +286,26 @@ function ki(P) {
     highlightColor: q,
     dotOpacity: D = 0.3,
     showNAColor: H = !0,
-    minHeight: x = 0,
+    minHeight: v = 0,
     theme: u = "light",
     ariaLabel: A,
     resetSelectionOnDoubleClick: U = !0,
     detailsOnClick: L,
-    styles: f,
+    styles: p,
     classNames: g,
     valueColor: O,
-    animate: V = !1,
+    animate: k = !1,
     noOfTicks: W = 2,
-    dimmedOpacity: ei = 0.3,
-    precision: oi = 2,
+    dimmedOpacity: oi = 0.3,
+    precision: ei = 2,
     customLayers: li = []
-  } = P, [C, z] = E(0), [ri, i] = E(0), [t, ui] = E(void 0), Z = si(null), ci = si(null);
-  return fi(() => {
-    const a = new ResizeObserver((hi) => {
-      z(s || hi[0].target.clientWidth || 620), i(h || hi[0].target.clientHeight || 480);
+  } = P, [C, z] = E(0), [ri, i] = E(0), [t, di] = E(void 0), Z = si(null), ci = si(null);
+  return ui(() => {
+    const n = new ResizeObserver((hi) => {
+      z(s || hi[0].target.clientWidth || 620), i(c || hi[0].target.clientHeight || 480);
     });
-    return Z.current && (i(Z.current.clientHeight || 480), z(Z.current.clientWidth || 620), s || a.observe(Z.current)), () => a.disconnect();
-  }, [s, h]), /* @__PURE__ */ l.jsx(
+    return Z.current && (i(Z.current.clientHeight || 480), z(Z.current.clientWidth || 620), s || n.observe(Z.current)), () => n.disconnect();
+  }, [s, c]), /* @__PURE__ */ l.jsx(
     "div",
     {
       className: `${u || "light"} flex  ${s ? "w-fit grow-0" : "w-full grow"}`,
@@ -313,45 +319,45 @@ function ki(P) {
             g?.graphContainer
           ),
           style: {
-            ...f?.graphContainer || {},
+            ...p?.graphContainer || {},
             ...r && r !== !0 ? { backgroundColor: r } : {}
           },
           id: ti,
           ref: ci,
-          "aria-label": A || `${d ? `The graph shows ${d}. ` : ""}This is a strip chart showing distribution of data along the horizontal axis. Each dot represents an individual data point, helping to visualize the spread and clustering of values.${n ? ` ${n}` : ""}`,
+          "aria-label": A || `${f ? `The graph shows ${f}. ` : ""}This is a strip chart showing distribution of data along the horizontal axis. Each dot represents an individual data point, helping to visualize the spread and clustering of values.${a ? ` ${a}` : ""}`,
           children: /* @__PURE__ */ l.jsx(
             "div",
             {
               className: "flex grow",
-              style: { padding: r ? k || "1rem" : k || 0 },
+              style: { padding: r ? S || "1rem" : S || 0 },
               children: /* @__PURE__ */ l.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                d || n || I || m ? /* @__PURE__ */ l.jsx(
+                f || a || V || d ? /* @__PURE__ */ l.jsx(
                   ji,
                   {
                     styles: {
-                      title: f?.title,
-                      description: f?.description
+                      title: p?.title,
+                      description: p?.description
                     },
                     classNames: {
                       title: g?.title,
                       description: g?.description
                     },
-                    graphTitle: d,
-                    graphDescription: n,
+                    graphTitle: f,
+                    graphDescription: a,
                     width: s,
-                    graphDownload: I ? ci.current : void 0,
-                    dataDownload: m ? e.map((a) => a.data).filter((a) => a !== void 0).length > 0 ? e.map((a) => a.data).filter((a) => a !== void 0) : e.filter((a) => a !== void 0) : null
+                    graphDownload: V ? ci.current : void 0,
+                    dataDownload: d ? o.map((n) => n.data).filter((n) => n !== void 0).length > 0 ? o.map((n) => n.data).filter((n) => n !== void 0) : o.filter((n) => n !== void 0) : null
                   }
                 ) : null,
-                /* @__PURE__ */ l.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: e.length === 0 ? /* @__PURE__ */ l.jsx(Di, {}) : /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
-                  y !== !1 && e.filter((a) => a.color).length !== 0 ? /* @__PURE__ */ l.jsx(
+                /* @__PURE__ */ l.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: o.length === 0 ? /* @__PURE__ */ l.jsx(Di, {}) : /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+                  x !== !1 && o.filter((n) => n.color).length !== 0 ? /* @__PURE__ */ l.jsx(
                     Mi,
                     {
                       width: s,
                       colorLegendTitle: ii,
-                      colors: p || c[u].categoricalColors.colors,
-                      colorDomain: Y || di(e, "color", !0),
-                      setSelectedColor: ui,
+                      colors: m || h[u].categoricalColors.colors,
+                      colorDomain: Y || fi(o, "color", !0),
+                      setSelectedColor: di,
                       showNAColor: H ?? !0
                     }
                   ) : null,
@@ -361,29 +367,29 @@ function ki(P) {
                       className: "flex flex-col grow justify-center w-full leading-0",
                       ref: Z,
                       "aria-label": "Graph area",
-                      children: (s || C) && (h || ri) ? /* @__PURE__ */ l.jsx(
+                      children: (s || C) && (c || ri) ? /* @__PURE__ */ l.jsx(
                         Vi,
                         {
-                          data: e,
+                          data: o,
                           width: s || C,
                           height: Math.max(
-                            x,
-                            h || (b ? x ? (s || C) * b > x ? (s || C) * b : x : (s || C) * b : ri)
+                            v,
+                            c || (b ? v ? (s || C) * b > v ? (s || C) * b : v : (s || C) * b : ri)
                           ),
-                          colorDomain: e.filter((a) => a.color).length === 0 ? [] : Y || di(e, "color", !0),
-                          colors: e.filter((a) => a.color).length === 0 ? p ? [p] : [c.primaryColors["blue-600"]] : p || c[u].categoricalColors.colors,
+                          colorDomain: o.filter((n) => n.color).length === 0 ? [] : Y || fi(o, "color", !0),
+                          colors: o.filter((n) => n.color).length === 0 ? m ? [m] : [h.primaryColors["blue-600"]] : m || h[u].categoricalColors.colors,
                           selectedColor: t,
                           radius: F,
                           leftMargin: R,
                           rightMargin: G,
                           topMargin: _,
-                          bottomMargin: S,
+                          bottomMargin: $,
                           tooltip: K,
                           onSeriesMouseOver: Q,
-                          highlightedDataPoints: v,
+                          highlightedDataPoints: y,
                           minValue: N,
                           maxValue: j,
-                          onSeriesMouseClick: $,
+                          onSeriesMouseClick: I,
                           prefix: w,
                           suffix: T,
                           stripType: B,
@@ -391,28 +397,28 @@ function ki(P) {
                           dotOpacity: D,
                           resetSelectionOnDoubleClick: U,
                           detailsOnClick: L,
-                          styles: f,
+                          styles: p,
                           classNames: g,
                           valueColor: O,
-                          animate: V === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : V || { duration: 0, once: !0, amount: 0 },
+                          animate: k === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : k || { duration: 0, once: !0, amount: 0 },
                           noOfTicks: W,
-                          dimmedOpacity: ei,
-                          precision: oi,
+                          dimmedOpacity: oi,
+                          precision: ei,
                           customLayers: li
                         }
                       ) : null
                     }
                   )
                 ] }) }),
-                o || X ? /* @__PURE__ */ l.jsx(
+                e || X ? /* @__PURE__ */ l.jsx(
                   Ci,
                   {
-                    styles: { footnote: f?.footnote, source: f?.source },
+                    styles: { footnote: p?.footnote, source: p?.source },
                     classNames: {
                       footnote: g?.footnote,
                       source: g?.source
                     },
-                    sources: o,
+                    sources: e,
                     footNote: X,
                     width: s
                   }
@@ -427,34 +433,34 @@ function ki(P) {
 }
 function Si(P) {
   const {
-    data: e,
-    width: d,
-    height: p,
-    colors: o,
-    colorDomain: n,
-    radius: h,
+    data: o,
+    width: f,
+    height: m,
+    colors: e,
+    colorDomain: a,
+    radius: c,
     leftMargin: s,
     rightMargin: X,
     topMargin: Y,
     bottomMargin: ii,
     tooltip: F,
-    onSeriesMouseOver: k,
+    onSeriesMouseOver: S,
     highlightedDataPoints: r,
     selectedColor: R,
     minValue: G,
     maxValue: _,
-    onSeriesMouseClick: S,
+    onSeriesMouseClick: $,
     noOfTicks: K,
     prefix: b,
     suffix: Q,
-    stripType: y,
-    highlightColor: v,
+    stripType: x,
+    highlightColor: y,
     dotOpacity: ti,
     resetSelectionOnDoubleClick: N,
     detailsOnClick: j,
-    styles: $,
-    classNames: I,
-    valueColor: m,
+    styles: I,
+    classNames: V,
+    valueColor: d,
     animate: w,
     dimmedOpacity: T,
     precision: B,
@@ -462,13 +468,13 @@ function Si(P) {
   } = P, q = si(null), D = Oi(q, {
     once: w.once,
     amount: w.amount
-  }), [H, x] = E(void 0), [u, A] = E(void 0), [U, L] = E(void 0), [f, g] = E(void 0), O = {
+  }), [H, v] = E(void 0), [u, A] = E(void 0), [U, L] = E(void 0), [p, g] = E(void 0), O = {
     top: Y,
     bottom: ii,
     left: s,
     right: X
-  }, V = d - O.left - O.right, W = p - O.top - O.bottom, ei = e.map((i, t) => ({ ...i, id: `${t}` })), oi = xi(
-    ei,
+  }, k = f - O.left - O.right, W = m - O.top - O.bottom, oi = o.map((i, t) => ({ ...i, id: `${t}` })), ei = xi(
+    oi,
     [
       (i) => {
         const t = (r || []).indexOf(i.label);
@@ -476,33 +482,33 @@ function Si(P) {
       }
     ],
     ["desc"]
-  ), li = J(_) ? Math.max(...e.filter((i) => !J(i.position)).map((i) => i.position)) < 0 ? 0 : Math.max(...e.filter((i) => !J(i.position)).map((i) => i.position)) : _, C = J(G) ? Math.min(...e.filter((i) => !J(i.position)).map((i) => i.position)) >= 0 ? 0 : Math.min(...e.filter((i) => !J(i.position)).map((i) => i.position)) : G, z = wi().domain([C, li]).range([W, 0]).nice(), ri = Ni(K, W);
+  ), li = J(_) ? Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) < 0 ? 0 : Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) : _, C = J(G) ? Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) >= 0 ? 0 : Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) : G, z = wi().domain([C, li]).range([W, 0]).nice(), ri = Ni(K, W);
   return /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
     /* @__PURE__ */ l.jsx(
       ai.svg,
       {
-        width: `${d}px`,
-        height: `${p}px`,
-        viewBox: `0 0 ${d} ${p}`,
+        width: `${f}px`,
+        height: `${m}px`,
+        viewBox: `0 0 ${f} ${m}`,
         direction: "ltr",
         ref: q,
         children: /* @__PURE__ */ l.jsxs("g", { transform: `translate(${O.left},${O.top})`, children: [
           M.filter((i) => i.position === "before").map((i) => i.layer),
           /* @__PURE__ */ l.jsxs(bi, { children: [
-            oi.map((i) => /* @__PURE__ */ l.jsxs(
+            ei.map((i) => /* @__PURE__ */ l.jsxs(
               ai.g,
               {
                 className: "undp-viz-g-with-hover",
                 variants: {
                   initial: {
                     opacity: 0,
-                    x: V / 2,
+                    x: k / 2,
                     y: z(0)
                   },
                   whileInView: {
-                    x: V / 2,
+                    x: k / 2,
                     y: z(i.position),
-                    opacity: R ? i.color && o[n.indexOf(i.color)] === R ? 0.95 : T : r.length !== 0 ? r.indexOf(i.label) !== -1 ? 0.95 : T : ti,
+                    opacity: R ? i.color && e[a.indexOf(i.color)] === R ? 0.95 : T : r.length !== 0 ? r.indexOf(i.label) !== -1 ? 0.95 : T : ti,
                     transition: { duration: w.duration }
                   }
                 },
@@ -510,50 +516,52 @@ function Si(P) {
                 animate: D ? "whileInView" : "initial",
                 exit: { opacity: 0, transition: { duration: w.duration } },
                 onMouseEnter: (t) => {
-                  x(i), g(t.clientY), L(t.clientX), k?.(i);
+                  v(i), g(t.clientY), L(t.clientX), S?.(i);
                 },
                 onClick: () => {
-                  (S || j) && (pi(u, i) && N ? (A(void 0), S?.(void 0)) : (A(i), S?.(i)));
+                  ($ || j) && (pi(u, i) && N ? (A(void 0), $?.(void 0)) : (A(i), $?.(i)));
                 },
                 onMouseMove: (t) => {
-                  x(i), g(t.clientY), L(t.clientX);
+                  v(i), g(t.clientY), L(t.clientX);
                 },
                 onMouseLeave: () => {
-                  x(void 0), L(void 0), g(void 0), k?.(void 0);
+                  v(void 0), L(void 0), g(void 0), S?.(void 0);
                 },
                 children: [
-                  y === "dot" ? /* @__PURE__ */ l.jsx(
+                  x === "dot" ? /* @__PURE__ */ l.jsx(
                     ai.circle,
                     {
                       cy: 0,
                       cx: 0,
                       variants: {
                         initial: {
-                          fill: v && r ? r.indexOf(i.label) !== -1 ? v : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray
+                          fill: y && r ? r.indexOf(i.label) !== -1 ? y : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray
                         },
                         whileInView: {
-                          fill: v && r ? r.indexOf(i.label) !== -1 ? v : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray,
+                          fill: y && r ? r.indexOf(i.label) !== -1 ? y : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray,
                           transition: { duration: w.duration }
                         }
                       },
                       initial: "initial",
                       animate: D ? "whileInView" : "initial",
                       exit: { opacity: 0, transition: { duration: w.duration } },
-                      r: h
+                      r: c
                     }
                   ) : /* @__PURE__ */ l.jsx(
                     ai.rect,
                     {
-                      x: 0 - h,
                       y: -1,
-                      width: h * 2,
                       height: 2,
                       variants: {
                         initial: {
-                          fill: v && r ? r.indexOf(i.label) !== -1 ? v : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray
+                          x: 0 - c,
+                          width: c * 2,
+                          fill: y && r ? r.indexOf(i.label) !== -1 ? y : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray
                         },
                         whileInView: {
-                          fill: v && r ? r.indexOf(i.label) !== -1 ? v : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray,
+                          x: 0 - c,
+                          width: c * 2,
+                          fill: y && r ? r.indexOf(i.label) !== -1 ? y : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray,
                           transition: { duration: w.duration }
                         }
                       },
@@ -567,11 +575,16 @@ function Si(P) {
                     {
                       y: 0,
                       dy: "0.33em",
-                      x: 0 + h + 3,
                       variants: {
-                        initial: { opacity: 0 },
+                        initial: {
+                          opacity: 0,
+                          x: 0 + c + 3,
+                          fill: d || (y && r ? r.indexOf(i.label) !== -1 ? y : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray)
+                        },
                         whileInView: {
                           opacity: 1,
+                          x: 0 + c + 3,
+                          fill: d || (y && r ? r.indexOf(i.label) !== -1 ? y : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(i.color)] : h.gray),
                           transition: { duration: w.duration }
                         }
                       },
@@ -579,13 +592,12 @@ function Si(P) {
                       animate: D ? "whileInView" : "initial",
                       exit: { opacity: 0, transition: { duration: w.duration } },
                       style: {
-                        fill: m || (v && r ? r.indexOf(i.label) !== -1 ? v : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray : e.filter((t) => t.color).length === 0 ? o[0] : i.color ? o[n.indexOf(i.color)] : c.gray),
                         textAnchor: "start",
-                        ...$?.graphObjectValues || {}
+                        ...I?.graphObjectValues || {}
                       },
                       className: ni(
                         "graph-value text-sm font-bold",
-                        I?.graphObjectValues
+                        V?.graphObjectValues
                       ),
                       children: gi(i.position, "NA", B, b, Q)
                     }
@@ -598,14 +610,14 @@ function Si(P) {
               "text",
               {
                 y: i,
-                x: V / 2 + h + 5,
+                x: k / 2 + c + 5,
                 style: {
                   textAnchor: "start",
-                  ...$?.yAxis?.labels || {}
+                  ...I?.yAxis?.labels || {}
                 },
                 className: ni(
                   "fill-primary-gray-550 dark:fill-primary-gray-500 text-xs",
-                  I?.yAxis?.labels
+                  V?.yAxis?.labels
                 ),
                 children: gi(z.invert(i), "NA", B, b, Q)
               },
@@ -616,15 +628,15 @@ function Si(P) {
         ] })
       }
     ),
-    H && F && U && f ? /* @__PURE__ */ l.jsx(
+    H && F && U && p ? /* @__PURE__ */ l.jsx(
       yi,
       {
         data: H,
         body: F,
         xPos: U,
-        yPos: f,
-        backgroundStyle: $?.tooltip,
-        className: I?.tooltip
+        yPos: p,
+        backgroundStyle: I?.tooltip,
+        className: V?.tooltip
       }
     ) : null,
     j && u !== void 0 ? /* @__PURE__ */ l.jsx(
@@ -648,34 +660,34 @@ function Si(P) {
 }
 function $i(P) {
   const {
-    data: e,
-    graphTitle: d,
-    colors: p,
-    sources: o,
-    graphDescription: n,
-    height: h,
+    data: o,
+    graphTitle: f,
+    colors: m,
+    sources: e,
+    graphDescription: a,
+    height: c,
     width: s,
     footNote: X,
     colorDomain: Y,
     colorLegendTitle: ii,
     radius: F = 5,
-    padding: k,
+    padding: S,
     backgroundColor: r = !1,
     leftMargin: R = 20,
     rightMargin: G = 20,
     topMargin: _ = 10,
-    bottomMargin: S = 10,
+    bottomMargin: $ = 10,
     tooltip: K,
     relativeHeight: b,
     onSeriesMouseOver: Q,
-    showColorScale: y = !0,
-    highlightedDataPoints: v = [],
+    showColorScale: x = !0,
+    highlightedDataPoints: y = [],
     graphID: ti,
     minValue: N,
     maxValue: j,
-    onSeriesMouseClick: $,
-    graphDownload: I = !1,
-    dataDownload: m = !1,
+    onSeriesMouseClick: I,
+    graphDownload: V = !1,
+    dataDownload: d = !1,
     prefix: w = "",
     suffix: T = "",
     stripType: B = "dot",
@@ -683,26 +695,26 @@ function $i(P) {
     highlightColor: q,
     dotOpacity: D = 0.3,
     showNAColor: H = !0,
-    minHeight: x = 0,
+    minHeight: v = 0,
     theme: u = "light",
     ariaLabel: A,
     resetSelectionOnDoubleClick: U = !0,
     detailsOnClick: L,
-    styles: f,
+    styles: p,
     classNames: g,
     valueColor: O,
-    animate: V = !1,
+    animate: k = !1,
     noOfTicks: W = 2,
-    dimmedOpacity: ei = 0.3,
-    precision: oi = 2,
+    dimmedOpacity: oi = 0.3,
+    precision: ei = 2,
     customLayers: li = []
-  } = P, [C, z] = E(0), [ri, i] = E(0), [t, ui] = E(void 0), Z = si(null), ci = si(null);
-  return fi(() => {
-    const a = new ResizeObserver((hi) => {
-      z(s || hi[0].target.clientWidth || 620), i(h || hi[0].target.clientHeight || 480);
+  } = P, [C, z] = E(0), [ri, i] = E(0), [t, di] = E(void 0), Z = si(null), ci = si(null);
+  return ui(() => {
+    const n = new ResizeObserver((hi) => {
+      z(s || hi[0].target.clientWidth || 620), i(c || hi[0].target.clientHeight || 480);
     });
-    return Z.current && (i(Z.current.clientHeight || 480), z(Z.current.clientWidth || 620), s || a.observe(Z.current)), () => a.disconnect();
-  }, [s, h]), /* @__PURE__ */ l.jsx(
+    return Z.current && (i(Z.current.clientHeight || 480), z(Z.current.clientWidth || 620), s || n.observe(Z.current)), () => n.disconnect();
+  }, [s, c]), /* @__PURE__ */ l.jsx(
     "div",
     {
       className: `${u || "light"} flex  ${s ? "w-fit grow-0" : "w-full grow"}`,
@@ -716,45 +728,45 @@ function $i(P) {
             g?.graphContainer
           ),
           style: {
-            ...f?.graphContainer || {},
+            ...p?.graphContainer || {},
             ...r && r !== !0 ? { backgroundColor: r } : {}
           },
           id: ti,
           ref: ci,
-          "aria-label": A || `${d ? `The graph shows ${d}. ` : ""}This is a strip chart showing distribution of data along the vertical axis. Each dot represents an individual data point, helping to visualize the spread and clustering of values.${n ? ` ${n}` : ""}`,
+          "aria-label": A || `${f ? `The graph shows ${f}. ` : ""}This is a strip chart showing distribution of data along the vertical axis. Each dot represents an individual data point, helping to visualize the spread and clustering of values.${a ? ` ${a}` : ""}`,
           children: /* @__PURE__ */ l.jsx(
             "div",
             {
               className: "flex grow",
-              style: { padding: r ? k || "1rem" : k || 0 },
+              style: { padding: r ? S || "1rem" : S || 0 },
               children: /* @__PURE__ */ l.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                d || n || I || m ? /* @__PURE__ */ l.jsx(
+                f || a || V || d ? /* @__PURE__ */ l.jsx(
                   ji,
                   {
                     styles: {
-                      title: f?.title,
-                      description: f?.description
+                      title: p?.title,
+                      description: p?.description
                     },
                     classNames: {
                       title: g?.title,
                       description: g?.description
                     },
-                    graphTitle: d,
-                    graphDescription: n,
+                    graphTitle: f,
+                    graphDescription: a,
                     width: s,
-                    graphDownload: I ? ci.current : void 0,
-                    dataDownload: m ? e.map((a) => a.data).filter((a) => a !== void 0).length > 0 ? e.map((a) => a.data).filter((a) => a !== void 0) : e.filter((a) => a !== void 0) : null
+                    graphDownload: V ? ci.current : void 0,
+                    dataDownload: d ? o.map((n) => n.data).filter((n) => n !== void 0).length > 0 ? o.map((n) => n.data).filter((n) => n !== void 0) : o.filter((n) => n !== void 0) : null
                   }
                 ) : null,
-                /* @__PURE__ */ l.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: e.length === 0 ? /* @__PURE__ */ l.jsx(Di, {}) : /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
-                  y !== !1 && e.filter((a) => a.color).length !== 0 ? /* @__PURE__ */ l.jsx(
+                /* @__PURE__ */ l.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: o.length === 0 ? /* @__PURE__ */ l.jsx(Di, {}) : /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+                  x !== !1 && o.filter((n) => n.color).length !== 0 ? /* @__PURE__ */ l.jsx(
                     Mi,
                     {
                       width: s,
                       colorLegendTitle: ii,
-                      colors: p || c[u].categoricalColors.colors,
-                      colorDomain: Y || di(e, "color", !0),
-                      setSelectedColor: ui,
+                      colors: m || h[u].categoricalColors.colors,
+                      colorDomain: Y || fi(o, "color", !0),
+                      setSelectedColor: di,
                       showNAColor: H
                     }
                   ) : null,
@@ -763,29 +775,29 @@ function $i(P) {
                     {
                       className: "flex flex-col grow justify-center w-full leading-0",
                       ref: Z,
-                      children: (s || C) && (h || ri) ? /* @__PURE__ */ l.jsx(
+                      children: (s || C) && (c || ri) ? /* @__PURE__ */ l.jsx(
                         Si,
                         {
-                          data: e,
+                          data: o,
                           width: s || C,
                           height: Math.max(
-                            x,
-                            h || (b ? x ? (s || C) * b > x ? (s || C) * b : x : (s || C) * b : ri)
+                            v,
+                            c || (b ? v ? (s || C) * b > v ? (s || C) * b : v : (s || C) * b : ri)
                           ),
-                          colorDomain: e.filter((a) => a.color).length === 0 ? [] : Y || di(e, "color", !0),
-                          colors: e.filter((a) => a.color).length === 0 ? p ? [p] : [c.primaryColors["blue-600"]] : p || c[u].categoricalColors.colors,
+                          colorDomain: o.filter((n) => n.color).length === 0 ? [] : Y || fi(o, "color", !0),
+                          colors: o.filter((n) => n.color).length === 0 ? m ? [m] : [h.primaryColors["blue-600"]] : m || h[u].categoricalColors.colors,
                           selectedColor: t,
                           radius: F,
                           leftMargin: R,
                           rightMargin: G,
                           topMargin: _,
-                          bottomMargin: S,
+                          bottomMargin: $,
                           tooltip: K,
                           onSeriesMouseOver: Q,
-                          highlightedDataPoints: v,
+                          highlightedDataPoints: y,
                           minValue: N,
                           maxValue: j,
-                          onSeriesMouseClick: $,
+                          onSeriesMouseClick: I,
                           prefix: w,
                           suffix: T,
                           stripType: B,
@@ -793,28 +805,28 @@ function $i(P) {
                           dotOpacity: D,
                           resetSelectionOnDoubleClick: U,
                           detailsOnClick: L,
-                          styles: f,
+                          styles: p,
                           classNames: g,
                           valueColor: O,
-                          animate: V === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : V || { duration: 0, once: !0, amount: 0 },
+                          animate: k === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : k || { duration: 0, once: !0, amount: 0 },
                           noOfTicks: W,
-                          dimmedOpacity: ei,
-                          precision: oi,
+                          dimmedOpacity: oi,
+                          precision: ei,
                           customLayers: li
                         }
                       ) : null
                     }
                   )
                 ] }) }),
-                o || X ? /* @__PURE__ */ l.jsx(
+                e || X ? /* @__PURE__ */ l.jsx(
                   Ci,
                   {
-                    styles: { footnote: f?.footnote, source: f?.source },
+                    styles: { footnote: p?.footnote, source: p?.source },
                     classNames: {
                       footnote: g?.footnote,
                       source: g?.source
                     },
-                    sources: o,
+                    sources: e,
                     footNote: X,
                     width: s
                   }
@@ -829,34 +841,34 @@ function $i(P) {
 }
 function Ki(P) {
   const {
-    data: e,
-    graphTitle: d,
-    colors: p,
-    sources: o,
-    graphDescription: n,
-    height: h,
+    data: o,
+    graphTitle: f,
+    colors: m,
+    sources: e,
+    graphDescription: a,
+    height: c,
     width: s,
     footNote: X,
     colorDomain: Y,
     colorLegendTitle: ii,
     radius: F,
-    padding: k,
+    padding: S,
     backgroundColor: r,
     leftMargin: R,
     rightMargin: G,
     topMargin: _,
-    bottomMargin: S,
+    bottomMargin: $,
     tooltip: K,
     relativeHeight: b,
     onSeriesMouseOver: Q,
-    showColorScale: y,
-    highlightedDataPoints: v,
+    showColorScale: x,
+    highlightedDataPoints: y,
     graphID: ti,
     minValue: N,
     maxValue: j,
-    onSeriesMouseClick: $,
-    noOfTicks: I,
-    graphDownload: m,
+    onSeriesMouseClick: I,
+    noOfTicks: V,
+    graphDownload: d,
     dataDownload: w,
     prefix: T,
     suffix: B,
@@ -864,52 +876,52 @@ function Ki(P) {
     language: q,
     highlightColor: D,
     dotOpacity: H,
-    showNAColor: x,
+    showNAColor: v,
     minHeight: u,
     theme: A,
     ariaLabel: U,
     valueColor: L,
-    resetSelectionOnDoubleClick: f,
+    resetSelectionOnDoubleClick: p,
     detailsOnClick: g,
     orientation: O = "vertical",
-    styles: V,
+    styles: k,
     classNames: W,
-    animate: ei,
-    dimmedOpacity: oi = 0.3,
+    animate: oi,
+    dimmedOpacity: ei = 0.3,
     precision: li,
     customLayers: C
   } = P;
   return O === "vertical" ? /* @__PURE__ */ l.jsx(
     $i,
     {
-      data: e,
-      graphTitle: d,
-      colors: p,
-      sources: o,
-      graphDescription: n,
-      height: h,
+      data: o,
+      graphTitle: f,
+      colors: m,
+      sources: e,
+      graphDescription: a,
+      height: c,
       width: s,
       footNote: X,
       colorDomain: Y,
       colorLegendTitle: ii,
       radius: F,
-      padding: k,
+      padding: S,
       backgroundColor: r,
       leftMargin: R,
       rightMargin: G,
       topMargin: _,
-      bottomMargin: S,
+      bottomMargin: $,
       tooltip: K,
       relativeHeight: b,
       onSeriesMouseOver: Q,
-      showColorScale: y,
-      highlightedDataPoints: v,
+      showColorScale: x,
+      highlightedDataPoints: y,
       graphID: ti,
       minValue: N,
       maxValue: j,
-      onSeriesMouseClick: $,
-      noOfTicks: I,
-      graphDownload: m,
+      onSeriesMouseClick: I,
+      noOfTicks: V,
+      graphDownload: d,
       dataDownload: w,
       prefix: T,
       suffix: B,
@@ -917,51 +929,51 @@ function Ki(P) {
       language: q,
       highlightColor: D,
       dotOpacity: H,
-      showNAColor: x,
+      showNAColor: v,
       minHeight: u,
       theme: A,
       ariaLabel: U,
-      resetSelectionOnDoubleClick: f,
-      styles: V,
+      resetSelectionOnDoubleClick: p,
+      styles: k,
       valueColor: L,
       detailsOnClick: g,
       classNames: W,
-      animate: ei,
-      dimmedOpacity: oi,
+      animate: oi,
+      dimmedOpacity: ei,
       precision: li,
       customLayers: C
     }
   ) : /* @__PURE__ */ l.jsx(
     ki,
     {
-      data: e,
-      graphTitle: d,
-      colors: p,
-      sources: o,
-      graphDescription: n,
-      height: h,
+      data: o,
+      graphTitle: f,
+      colors: m,
+      sources: e,
+      graphDescription: a,
+      height: c,
       width: s,
       footNote: X,
       colorDomain: Y,
       colorLegendTitle: ii,
       radius: F,
-      padding: k,
+      padding: S,
       backgroundColor: r,
       leftMargin: R,
       rightMargin: G,
       topMargin: _,
-      bottomMargin: S,
+      bottomMargin: $,
       tooltip: K,
       relativeHeight: b,
       onSeriesMouseOver: Q,
-      showColorScale: y,
-      highlightedDataPoints: v,
+      showColorScale: x,
+      highlightedDataPoints: y,
       graphID: ti,
       minValue: N,
       maxValue: j,
-      onSeriesMouseClick: $,
-      noOfTicks: I,
-      graphDownload: m,
+      onSeriesMouseClick: I,
+      noOfTicks: V,
+      graphDownload: d,
       dataDownload: w,
       prefix: T,
       suffix: B,
@@ -969,17 +981,17 @@ function Ki(P) {
       language: q,
       highlightColor: D,
       dotOpacity: H,
-      showNAColor: x,
+      showNAColor: v,
       minHeight: u,
       theme: A,
       ariaLabel: U,
-      resetSelectionOnDoubleClick: f,
-      styles: V,
+      resetSelectionOnDoubleClick: p,
+      styles: k,
       valueColor: L,
       detailsOnClick: g,
       classNames: W,
-      animate: ei,
-      dimmedOpacity: oi,
+      animate: oi,
+      dimmedOpacity: ei,
       precision: li,
       customLayers: C
     }