@undp/data-viz 1.5.6 → 1.5.8

package/dist/ParetoChart.js

@@ -4,11 +4,11 @@ import { i as gi } from "./index-Bwrro8-q.js";
 import { X as Ai } from "./Modal-DVVwpKhP.js";
 import { n as oi } from "./numberFormattingFunction-14YCbkN2.js";
 import { T as Mi } from "./Tooltip-CVCGWyzw.js";
-import { s as Ni } from "./string2HTML-oFCROsus.js";
+import { s as ki } from "./string2HTML-oFCROsus.js";
 import { c as di } from "./checkIfNullOrUndefined-DmfiKkNw.js";
 import { A as pi } from "./Axis-Ddg-seDi.js";
 import { A as yi } from "./AxisTitle-BmHLMRJZ.js";
-import { X as ki } from "./XAxesLabels-loO78vUO.js";
+import { X as Ni } from "./XAxesLabels-loO78vUO.js";
 import { b as Ci } from "./band-BEjh2CHI.js";
 import { a as bi } from "./linear-DUdu7l2G.js";
 import { l as $i, c as Li } from "./line-CPfhohvF.js";
@@ -24,10 +24,10 @@ import { E as Xi } from "./EmptyState-DdTp-Mdn.js";
 function Ei(mi) {
   const {
     data: S,
-    width: N,
+    width: k,
     height: Y,
-    barColor: p,
-    lineColor: x,
+    barColor: x,
+    lineColor: n,
     axisTitles: a,
     sameAxes: b,
     rightMargin: q,
@@ -42,75 +42,75 @@ function Ei(mi) {
     showLabels: Z,
     onSeriesMouseClick: w,
     resetSelectionOnDoubleClick: ii,
-    detailsOnClick: h,
+    detailsOnClick: u,
     noOfTicks: ti,
     lineSuffix: ei,
     barSuffix: B,
     linePrefix: F,
     barPrefix: ai,
     curveType: X,
-    styles: n,
-    classNames: o,
-    animate: l,
+    styles: o,
+    classNames: c,
+    animate: r,
     precision: E,
     customLayers: T,
-    naLabel: k,
+    naLabel: N,
     showAxisLabels: si
-  } = mi, ri = fi(null), C = Oi(ri, {
-    once: l.once,
-    amount: l.amount
-  }), ui = X === "linear" ? Li : X === "step" ? Ii : X === "stepAfter" ? Si : X === "stepBefore" ? Ti : Vi, [li, $] = W(void 0), [L, V] = W(void 0), [ni, I] = W(void 0), [j, m] = W(void 0), u = {
+  } = mi, li = fi(null), C = Oi(li, {
+    once: r.once,
+    amount: r.amount
+  }), ui = X === "linear" ? Li : X === "step" ? Ii : X === "stepAfter" ? Si : X === "stepBefore" ? Ti : Vi, [ri, $] = W(void 0), [L, V] = W(void 0), [ni, I] = W(void 0), [j, h] = W(void 0), d = {
     top: J,
     bottom: xi,
     left: U + 50,
     right: q + 65
-  }, d = N - u.left - u.right, f = Y - u.top - u.bottom, s = S.map((i, M) => ({ ...i, id: `${M}` })), c = Ci().domain(s.map((i) => `${i.id}`)).range([0, d]).paddingInner(hi), G = Math.min(...s.map((i) => i.bar).filter((i) => i != null)) !== 1 / 0 ? Math.min(...s.map((i) => i.bar).filter((i) => i != null)) > 0 ? 0 : Math.min(...s.map((i) => i.bar).filter((i) => i != null)) : 0, A = Math.min(...s.map((i) => i.line).filter((i) => i != null)) !== 1 / 0 ? Math.min(...s.map((i) => i.line).filter((i) => i != null)) > 0 ? 0 : Math.min(...s.map((i) => i.line).filter((i) => i != null)) : 0, O = Math.max(...s.map((i) => i.bar).filter((i) => i != null)) !== 1 / 0 ? Math.max(...s.map((i) => i.bar).filter((i) => i != null)) : 0, P = Math.max(...s.map((i) => i.line).filter((i) => i != null)) !== 1 / 0 ? Math.max(...s.map((i) => i.line).filter((i) => i != null)) : 0, R = G < A ? G : A, y = O > P ? O : P, r = bi().domain([
+  }, p = k - d.left - d.right, f = Y - d.top - d.bottom, s = S.map((i, M) => ({ ...i, id: `${M}` })), m = Ci().domain(s.map((i) => `${i.id}`)).range([0, p]).paddingInner(hi), G = Math.min(...s.map((i) => i.bar).filter((i) => i != null)) !== 1 / 0 ? Math.min(...s.map((i) => i.bar).filter((i) => i != null)) > 0 ? 0 : Math.min(...s.map((i) => i.bar).filter((i) => i != null)) : 0, A = Math.min(...s.map((i) => i.line).filter((i) => i != null)) !== 1 / 0 ? Math.min(...s.map((i) => i.line).filter((i) => i != null)) > 0 ? 0 : Math.min(...s.map((i) => i.line).filter((i) => i != null)) : 0, O = Math.max(...s.map((i) => i.bar).filter((i) => i != null)) !== 1 / 0 ? Math.max(...s.map((i) => i.bar).filter((i) => i != null)) : 0, P = Math.max(...s.map((i) => i.line).filter((i) => i != null)) !== 1 / 0 ? Math.max(...s.map((i) => i.line).filter((i) => i != null)) : 0, R = G < A ? G : A, y = O > P ? O : P, l = bi().domain([
     b ? R : G,
     b ? y > 0 ? y : 0 : O > 0 ? O : 0
   ]).range([f, 0]).nice(), e = bi().domain([
     b ? R : A,
     b ? y > 0 ? y : 0 : P > 0 ? P : 0
-  ]).range([f, 0]).nice(), z = $i().defined((i) => !di(i.line)).x((i) => c(`${i.id}`) + c.bandwidth() / 2).y((i) => e(i.line)).curve(ui), vi = r.ticks(ti), wi = e.ticks(ti);
+  ]).range([f, 0]).nice(), z = $i().defined((i) => !di(i.line)).x((i) => m(`${i.id}`) + m.bandwidth() / 2).y((i) => e(i.line)).curve(ui), vi = l.ticks(ti), wi = e.ticks(ti);
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsx(
       D.svg,
       {
-        width: `${N}px`,
+        width: `${k}px`,
         height: `${Y}px`,
-        viewBox: `0 0 ${N} ${Y}`,
+        viewBox: `0 0 ${k} ${Y}`,
         direction: "ltr",
-        ref: ri,
-        children: /* @__PURE__ */ t.jsxs("g", { transform: `translate(${u.left},${u.top})`, children: [
+        ref: li,
+        children: /* @__PURE__ */ t.jsxs("g", { transform: `translate(${d.left},${d.top})`, children: [
           /* @__PURE__ */ t.jsxs("g", { children: [
             vi.map((i, M) => /* @__PURE__ */ t.jsxs("g", { children: [
               /* @__PURE__ */ t.jsx(
                 "line",
                 {
-                  y1: r(i),
-                  y2: r(i),
+                  y1: l(i),
+                  y2: l(i),
                   x1: -15,
                   x2: -20,
                   style: {
-                    stroke: p,
+                    stroke: x,
                     strokeWidth: 1,
-                    ...n?.yAxis?.gridLines || {}
+                    ...o?.yAxis?.gridLines || {}
                   },
-                  className: o?.yAxis?.gridLines
+                  className: c?.yAxis?.gridLines
                 }
               ),
               /* @__PURE__ */ t.jsx(
                 "text",
                 {
                   x: -25,
-                  y: r(i),
+                  y: l(i),
                   dy: "0.33em",
-                  className: _("text-xs", o?.yAxis?.labels),
+                  className: _("text-xs", c?.yAxis?.labels),
                   style: {
                     textAnchor: "end",
-                    fill: p,
-                    ...n?.yAxis?.labels || {}
+                    fill: x,
+                    ...o?.yAxis?.labels || {}
                   },
-                  children: oi(i, k, E, ai, B)
+                  children: oi(i, N, E, ai, B)
                 }
               )
             ] }, M)),
@@ -121,17 +121,17 @@ function Ei(mi) {
                 y2: f,
                 x1: -15,
                 x2: -15,
-                classNames: { axis: o?.xAxis?.axis },
-                styles: { axis: { stroke: p, ...n?.xAxis?.axis || {} } }
+                classNames: { axis: c?.xAxis?.axis },
+                styles: { axis: { stroke: x, ...o?.xAxis?.axis || {} } }
               }
             ),
             si ? /* @__PURE__ */ t.jsx(
               yi,
               {
-                x: 10 - u.left,
+                x: 10 - d.left,
                 y: f / 2,
-                style: { fill: p, ...n?.yAxis?.title || {} },
-                className: o?.yAxis?.title,
+                style: { fill: x, ...o?.yAxis?.title || {} },
+                className: c?.yAxis?.title,
                 text: a[0].length > 100 ? `${a[0].substring(0, 100)}...` : a[0],
                 rotate90: !0
               }
@@ -144,30 +144,30 @@ function Ei(mi) {
                 {
                   y1: e(i),
                   y2: e(i),
-                  x1: d + 15,
-                  x2: d + 20,
+                  x1: p + 15,
+                  x2: p + 20,
                   style: {
-                    stroke: x,
+                    stroke: n,
                     strokeWidth: 1,
-                    ...n?.yAxis?.gridLines || {}
+                    ...o?.yAxis?.gridLines || {}
                   },
-                  className: o?.yAxis?.gridLines
+                  className: c?.yAxis?.gridLines
                 }
               ),
               /* @__PURE__ */ t.jsx(
                 "text",
                 {
-                  x: d + 25,
+                  x: p + 25,
                   y: e(i),
                   dy: "0.33em",
                   dx: -2,
                   style: {
                     textAnchor: "start",
-                    fill: x,
-                    ...n?.yAxis?.labels || {}
+                    fill: n,
+                    ...o?.yAxis?.labels || {}
                   },
-                  className: _("text-xs", o?.yAxis?.labels),
-                  children: oi(i, k, E, F, ei)
+                  className: _("text-xs", c?.yAxis?.labels),
+                  children: oi(i, N, E, F, ei)
                 }
               )
             ] }, M)),
@@ -176,19 +176,19 @@ function Ei(mi) {
               {
                 y1: 0,
                 y2: f,
-                x1: d + 15,
-                x2: d + 15,
-                classNames: { axis: o?.xAxis?.axis },
-                styles: { axis: { stroke: x, ...n?.xAxis?.axis || {} } }
+                x1: p + 15,
+                x2: p + 15,
+                classNames: { axis: c?.xAxis?.axis },
+                styles: { axis: { stroke: n, ...o?.xAxis?.axis || {} } }
               }
             ),
             si ? /* @__PURE__ */ t.jsx(
               yi,
               {
-                x: d + u.right - 15,
+                x: p + d.right - 15,
                 y: f / 2,
-                style: { fill: x, ...n?.yAxis?.title || {} },
-                className: o?.yAxis?.title,
+                style: { fill: n, ...o?.yAxis?.title || {} },
+                className: c?.yAxis?.title,
                 text: a[1].length > 100 ? `${a[1].substring(0, 100)}...` : a[1],
                 rotate90: !0
               }
@@ -197,12 +197,12 @@ function Ei(mi) {
           /* @__PURE__ */ t.jsx(
             pi,
             {
-              y1: b ? r(0) : f,
-              y2: b ? r(0) : f,
+              y1: b ? l(0) : f,
+              y2: b ? l(0) : f,
               x1: -15,
-              x2: d + 15,
-              classNames: { axis: o?.xAxis?.axis },
-              styles: { axis: n?.xAxis?.axis }
+              x2: p + 15,
+              classNames: { axis: c?.xAxis?.axis },
+              styles: { axis: o?.xAxis?.axis }
             }
           ),
           T.filter((i) => i.position === "before").map((i) => i.layer),
@@ -213,16 +213,16 @@ function Ei(mi) {
                 className: "undp-viz-g-with-hover",
                 opacity: 0.85,
                 onMouseEnter: (g) => {
-                  $(i), m(g.clientY), I(g.clientX), H?.(i);
+                  $(i), h(g.clientY), I(g.clientX), H?.(i);
                 },
                 onClick: () => {
-                  (w || h) && (gi(L, i) && ii ? (V(void 0), w?.(void 0)) : (V(i), w?.(i)));
+                  (w || u) && (gi(L, i) && ii ? (V(void 0), w?.(void 0)) : (V(i), w?.(i)));
                 },
                 onMouseMove: (g) => {
-                  $(i), m(g.clientY), I(g.clientX);
+                  $(i), h(g.clientY), I(g.clientX);
                 },
                 onMouseLeave: () => {
-                  $(void 0), I(void 0), m(void 0), H?.(void 0);
+                  $(void 0), I(void 0), h(void 0), H?.(void 0);
                 },
                 children: [
                   /* @__PURE__ */ t.jsx(
@@ -230,74 +230,76 @@ function Ei(mi) {
                     {
                       variants: {
                         initial: {
-                          attrY: r(0),
+                          attrY: l(0),
                           height: 0,
-                          opacity: 1
+                          opacity: 1,
+                          fill: x
                         },
                         whileInView: {
-                          attrY: i.bar ? i.bar > 0 ? r(i.bar) : r(0) : 0,
-                          height: i.bar ? Math.abs(r(i.bar) - r(0)) : 0,
+                          attrY: i.bar ? i.bar > 0 ? l(i.bar) : l(0) : 0,
+                          height: i.bar ? Math.abs(l(i.bar) - l(0)) : 0,
                           opacity: 1,
-                          transition: { duration: l.duration }
+                          fill: x,
+                          transition: { duration: r.duration }
                         }
                       },
                       initial: "initial",
                       animate: C ? "whileInView" : "initial",
                       exit: {
-                        attrY: r(0),
+                        attrY: l(0),
                         height: 0,
                         opacity: 0,
-                        transition: { duration: l.duration }
+                        transition: { duration: r.duration }
                       },
-                      x: c(`${M}`),
-                      width: c.bandwidth(),
-                      style: { fill: p }
+                      x: m(`${M}`),
+                      width: m.bandwidth()
                     }
                   ),
                   K && !di(i.bar) ? /* @__PURE__ */ t.jsx(
                     D.text,
                     {
-                      x: c(`${i.id}`) + c.bandwidth() / 2,
+                      x: m(`${i.id}`) + m.bandwidth() / 2,
                       exit: {
-                        attrY: r(0),
+                        attrY: l(0),
                         opacity: 0,
-                        transition: { duration: l.duration }
+                        transition: { duration: r.duration }
                       },
                       variants: {
                         initial: {
-                          attrY: r(0),
-                          opacity: 0
+                          attrY: l(0),
+                          opacity: 0,
+                          fill: x
                         },
                         whileInView: {
-                          attrY: r(i.bar || 0),
+                          attrY: l(i.bar || 0),
                           opacity: 1,
-                          transition: { duration: l.duration }
+                          fill: x,
+                          transition: { duration: r.duration }
                         }
                       },
                       initial: "initial",
                       animate: C ? "whileInView" : "initial",
                       style: {
-                        fill: p,
                         textAnchor: "middle",
-                        ...n?.graphObjectValues || {}
+                        ...o?.graphObjectValues || {}
                       },
-                      className: _("graph-value text-sm", o?.graphObjectValues),
+                      className: _("graph-value text-sm", c?.graphObjectValues),
                       dy: i.bar ? i.bar >= 0 ? "-5px" : "1em" : "-5px",
-                      children: oi(i.bar, k, E, ai, B)
+                      children: oi(i.bar, N, E, ai, B)
                     }
                   ) : null,
                   Z ? /* @__PURE__ */ t.jsx(
-                    ki,
+                    Ni,
                     {
                       value: `${i.label}`.length < Q ? `${i.label}` : `${`${i.label}`.substring(0, Q)}...`,
                       y: f + 5,
-                      x: c(`${i.id}`),
-                      width: c.bandwidth(),
-                      height: u.bottom,
-                      style: n?.xAxis?.labels,
-                      className: o?.xAxis?.labels,
+                      x: m(`${i.id}`),
+                      width: m.bandwidth(),
+                      height: d.bottom,
+                      style: o?.xAxis?.labels,
+                      className: c?.xAxis?.labels,
                       alignment: "top",
-                      animate: l,
+                      animate: r,
                       isInView: C
                     }
                   ) : null
@@ -310,23 +312,24 @@ function Ei(mi) {
               {
                 exit: {
                   opacity: 0,
-                  transition: { duration: l.duration }
+                  transition: { duration: r.duration }
                 },
                 variants: {
                   initial: {
                     d: z(s.map((i) => ({ ...i, line: 0 }))),
-                    opacity: 0
+                    opacity: 0,
+                    stroke: n
                   },
                   whileInView: {
                     d: z(s),
                     opacity: 1,
-                    transition: { duration: l.duration }
+                    stroke: n,
+                    transition: { duration: r.duration }
                   }
                 },
                 initial: "initial",
                 animate: C ? "whileInView" : "initial",
                 style: {
-                  stroke: x,
                   fill: "none",
                   strokeWidth: 2
                 }
@@ -336,16 +339,16 @@ function Ei(mi) {
               "g",
               {
                 onMouseEnter: (g) => {
-                  $(i), m(g.clientY), I(g.clientX), H?.(i);
+                  $(i), h(g.clientY), I(g.clientX), H?.(i);
                 },
                 onClick: () => {
-                  (w || h) && (gi(L, i) && ii ? (V(void 0), w?.(void 0)) : (V(i), w?.(i)));
+                  (w || u) && (gi(L, i) && ii ? (V(void 0), w?.(void 0)) : (V(i), w?.(i)));
                 },
                 onMouseMove: (g) => {
-                  $(i), m(g.clientY), I(g.clientX);
+                  $(i), h(g.clientY), I(g.clientX);
                 },
                 onMouseLeave: () => {
-                  $(void 0), I(void 0), m(void 0), H?.(void 0);
+                  $(void 0), I(void 0), h(void 0), H?.(void 0);
                 },
                 children: [
                   /* @__PURE__ */ t.jsx(
@@ -354,58 +357,60 @@ function Ei(mi) {
                       exit: {
                         cy: e(0),
                         opacity: 0,
-                        transition: { duration: l.duration }
+                        transition: { duration: r.duration }
                       },
                       variants: {
                         initial: {
                           cy: e(0),
-                          opacity: 0
+                          opacity: 0,
+                          fill: n
                         },
                         whileInView: {
                           cy: e(i.line),
                           opacity: 1,
-                          transition: { duration: l.duration }
+                          fill: n,
+                          transition: { duration: r.duration }
                         }
                       },
                       initial: "initial",
                       animate: C ? "whileInView" : "initial",
-                      cx: c(i.id) + c.bandwidth() / 2,
-                      r: d / s.length < 5 ? 0 : d / s.length < 20 ? 2 : 4,
-                      style: { fill: x }
+                      cx: m(i.id) + m.bandwidth() / 2,
+                      r: p / s.length < 5 ? 0 : p / s.length < 20 ? 2 : 4
                     }
                   ),
                   K ? /* @__PURE__ */ t.jsx(
                     D.text,
                     {
-                      x: c(`${i.id}`) + c.bandwidth() / 2,
+                      x: m(`${i.id}`) + m.bandwidth() / 2,
                       exit: {
                         y: e(0),
                         opacity: 0,
-                        transition: { duration: l.duration }
+                        transition: { duration: r.duration }
                       },
                       style: {
-                        fill: x,
                         textAnchor: "middle",
-                        ...n?.graphObjectValues || {}
+                        ...o?.graphObjectValues || {}
                       },
                       variants: {
                         initial: {
                           y: e(0),
-                          opacity: 0
+                          opacity: 0,
+                          fill: n
                         },
                         whileInView: {
                           y: e(i.line),
                           opacity: 1,
-                          transition: { duration: l.duration }
+                          fill: n,
+                          transition: { duration: r.duration }
                         }
                       },
                       initial: "initial",
                       animate: C ? "whileInView" : "initial",
-                      className: _("graph-value text-sm", o?.graphObjectValues),
+                      className: _("graph-value text-sm", c?.graphObjectValues),
                       dy: "-5px",
                       children: oi(
                         i.line,
-                        k,
+                        N,
                         E,
                         F,
                         ei
@@ -420,18 +425,18 @@ function Ei(mi) {
         ] })
       }
     ),
-    li && v && ni && j ? /* @__PURE__ */ t.jsx(
+    ri && v && ni && j ? /* @__PURE__ */ t.jsx(
       Mi,
       {
-        data: li,
+        data: ri,
         body: v,
         xPos: ni,
         yPos: j,
-        backgroundStyle: n?.tooltip,
-        className: o?.tooltip
+        backgroundStyle: o?.tooltip,
+        className: c?.tooltip
       }
     ) : null,
-    h && L !== void 0 ? /* @__PURE__ */ t.jsx(
+    u && L !== void 0 ? /* @__PURE__ */ t.jsx(
       Ai,
       {
         open: L !== void 0,
@@ -442,8 +447,8 @@ function Ei(mi) {
           "div",
           {
             className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof h == "string" ? { __html: Ni(h, L) } : void 0,
-            children: typeof h == "function" ? h(L) : null
+            dangerouslySetInnerHTML: typeof u == "string" ? { __html: ki(u, L) } : void 0,
+            children: typeof u == "function" ? u(L) : null
           }
         )
       }
@@ -453,10 +458,10 @@ function Ei(mi) {
 function mt(mi) {
   const {
     data: S,
-    graphTitle: N,
+    graphTitle: k,
     sources: Y,
-    graphDescription: p,
-    height: x,
+    graphDescription: x,
+    height: n,
     width: a,
     footNote: b,
     padding: q,
@@ -471,70 +476,70 @@ function mt(mi) {
     lineAxisTitle: Z = "Line chart",
     barAxisTitle: w = "Bar graph",
     tooltip: ii,
-    relativeHeight: h,
+    relativeHeight: u,
     onSeriesMouseOver: ti,
     graphID: ei,
     graphDownload: B = !1,
     dataDownload: F = !1,
     barPadding: ai = 0.25,
     truncateBy: X = 999,
-    showLabels: n = !0,
-    onSeriesMouseClick: o,
-    language: l = "en",
+    showLabels: o = !0,
+    onSeriesMouseClick: c,
+    language: r = "en",
     colorLegendTitle: E,
     minHeight: T = 0,
-    theme: k = "light",
+    theme: N = "light",
     ariaLabel: si,
-    resetSelectionOnDoubleClick: ri = !0,
+    resetSelectionOnDoubleClick: li = !0,
     detailsOnClick: C,
     showValues: ui = !0,
-    noOfTicks: li = 5,
+    noOfTicks: ri = 5,
     lineSuffix: $ = "",
     barSuffix: L = "",
     linePrefix: V = "",
     barPrefix: ni = "",
     curveType: I = "curve",
     styles: j,
-    classNames: m,
-    animate: u = !1,
-    precision: d = 2,
+    classNames: h,
+    animate: d = !1,
+    precision: p = 2,
     customLayers: f = [],
     naLabel: s = "NA",
-    showColorScale: c = !0,
+    showColorScale: m = !0,
     showAxisLabels: G = !0
-  } = mi, [A, O] = W(0), [P, R] = W(0), y = fi(null), r = fi(null);
+  } = mi, [A, O] = W(0), [P, R] = W(0), y = fi(null), l = fi(null);
   return ji(() => {
     const e = new ResizeObserver((z) => {
-      O(a || z[0].target.clientWidth || 620), R(x || z[0].target.clientHeight || 480);
+      O(a || z[0].target.clientWidth || 620), R(n || z[0].target.clientHeight || 480);
     });
     return y.current && (R(y.current.clientHeight || 480), O(y.current.clientWidth || 620), a || e.observe(y.current)), () => e.disconnect();
-  }, [a, x]), /* @__PURE__ */ t.jsx(
+  }, [a, n]), /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: `${k || "light"} flex  ${a ? "w-fit grow-0" : "w-full grow"}`,
-      dir: l === "he" || l === "ar" ? "rtl" : void 0,
+      className: `${N || "light"} flex  ${a ? "w-fit grow-0" : "w-full grow"}`,
+      dir: r === "he" || r === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ t.jsx(
         "div",
         {
           className: _(
-            `${v ? v === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${l || "en"}`,
+            `${v ? v === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${r || "en"}`,
             a ? "w-fit" : "w-full",
-            m?.graphContainer
+            h?.graphContainer
           ),
           style: {
             ...j?.graphContainer || {},
             ...v && v !== !0 ? { backgroundColor: v } : {}
           },
           id: ei,
-          ref: r,
-          "aria-label": si || `${N ? `The graph shows ${N}. ` : ""}This is a pareto chart that shows a variable as bars and another as line chart.${p ? ` ${p}` : ""}`,
+          ref: l,
+          "aria-label": si || `${k ? `The graph shows ${k}. ` : ""}This is a pareto chart that shows a variable as bars and another as line chart.${x ? ` ${x}` : ""}`,
           children: /* @__PURE__ */ t.jsx(
             "div",
             {
               className: "flex grow",
               style: { padding: v ? q || "1rem" : q || 0 },
               children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                N || p || B || F ? /* @__PURE__ */ t.jsx(
+                k || x || B || F ? /* @__PURE__ */ t.jsx(
                   Yi,
                   {
                     styles: {
@@ -542,24 +547,24 @@ function mt(mi) {
                       description: j?.description
                     },
                     classNames: {
-                      title: m?.title,
-                      description: m?.description
+                      title: h?.title,
+                      description: h?.description
                     },
-                    graphTitle: N,
-                    graphDescription: p,
+                    graphTitle: k,
+                    graphDescription: x,
                     width: a,
-                    graphDownload: B ? r.current : void 0,
+                    graphDownload: B ? l.current : void 0,
                     dataDownload: F ? 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,
                 /* @__PURE__ */ t.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: S.length === 0 ? /* @__PURE__ */ t.jsx(Xi, {}) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-                  c ? /* @__PURE__ */ t.jsx(
+                  m ? /* @__PURE__ */ t.jsx(
                     Hi,
                     {
                       colorDomain: [w, Z],
                       colors: [
-                        J || ci[k].categoricalColors.colors[0],
-                        U || ci[k].categoricalColors.colors[1]
+                        J || ci[N].categoricalColors.colors[0],
+                        U || ci[N].categoricalColors.colors[1]
                       ],
                       colorLegendTitle: E,
                       showNAColor: !1
@@ -571,7 +576,7 @@ function mt(mi) {
                       className: "flex flex-col grow justify-center leading-0",
                       ref: y,
                       "aria-label": "Graph area",
-                      children: (a || A) && (x || P) ? /* @__PURE__ */ t.jsx(
+                      children: (a || A) && (n || P) ? /* @__PURE__ */ t.jsx(
                         Ei,
                         {
                           data: S,
@@ -581,7 +586,7 @@ function mt(mi) {
                           width: a || A,
                           height: Math.max(
                             T,
-                            x || (h ? T ? (a || A) * h > T ? (a || A) * h : T : (a || A) * h : P)
+                            n || (u ? T ? (a || A) * u > T ? (a || A) * u : T : (a || A) * u : P)
                           ),
                           truncateBy: X,
                           leftMargin: K,
@@ -592,11 +597,11 @@ function mt(mi) {
                           tooltip: ii,
                           onSeriesMouseOver: ti,
                           barPadding: ai,
-                          showLabels: n,
-                          onSeriesMouseClick: o,
-                          resetSelectionOnDoubleClick: ri,
+                          showLabels: o,
+                          onSeriesMouseClick: c,
+                          resetSelectionOnDoubleClick: li,
                           detailsOnClick: C,
-                          noOfTicks: li,
+                          noOfTicks: ri,
                           lineSuffix: $,
                           barSuffix: L,
                           linePrefix: V,
@@ -604,9 +609,9 @@ function mt(mi) {
                           curveType: I,
                           showValues: ui,
                           styles: j,
-                          classNames: m,
-                          animate: u === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : u || { duration: 0, once: !0, amount: 0 },
-                          precision: d,
+                          classNames: h,
+                          animate: d === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : d || { duration: 0, once: !0, amount: 0 },
+                          precision: p,
                           customLayers: f,
                           naLabel: s,
                           showAxisLabels: G
@@ -620,8 +625,8 @@ function mt(mi) {
                   {
                     styles: { footnote: j?.footnote, source: j?.source },
                     classNames: {
-                      footnote: m?.footnote,
-                      source: m?.source
+                      footnote: h?.footnote,
+                      source: h?.source
                     },
                     sources: Y,
                     footNote: b,