@undp/data-viz 2.1.8 → 2.2.0

package/dist/WaterfallChart.d.ts

@@ -0,0 +1,208 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare interface AnimateDataType {
+    duration: number;
+    once: boolean;
+    amount: 'some' | 'all' | number;
+}
+
+declare interface AxesClassNameObject {
+    gridLines?: string;
+    labels?: string;
+    title?: string;
+    axis?: string;
+}
+
+declare interface AxesStyleObject {
+    gridLines?: React.CSSProperties;
+    labels?: React.CSSProperties;
+    title?: React.CSSProperties;
+    axis?: React.CSSProperties;
+}
+
+declare interface BarGraphDataType {
+    label: string | number;
+    date?: string | number;
+    size?: number | null;
+    color?: string | null;
+    data?: object;
+}
+
+declare interface ClassNameObject {
+    title?: string;
+    footnote?: string;
+    source?: string;
+    description?: string;
+    tooltip?: string;
+    xAxis?: AxesClassNameObject;
+    yAxis?: AxesClassNameObject;
+    legend?: string;
+    graphContainer?: string;
+    graphObjectValues?: string;
+    dataConnectors?: string;
+    mouseOverLine?: string;
+    regLine?: string;
+    dataCards?: string;
+    colorLegend?: string;
+    modal?: string;
+}
+
+declare interface CustomLayerDataType {
+    position: 'before' | 'after';
+    layer: React.ReactNode;
+}
+
+declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'jp' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
+
+declare interface Props {
+    /** Array of data objects */
+    data: BarGraphDataType[];
+    /** Title of the graph */
+    graphTitle?: string | React.ReactNode;
+    /** Description of the graph */
+    graphDescription?: string | React.ReactNode;
+    /** Footnote for the graph */
+    footNote?: string | React.ReactNode;
+    /** Source data for the graph */
+    sources?: SourcesDataType[];
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Color or array of colors for bars */
+    colors?: string | string[];
+    /** Domain of colors for the graph */
+    colorDomain?: string[];
+    /** Title for the color legend */
+    colorLegendTitle?: string;
+    /** Background color of the graph */
+    backgroundColor?: string | boolean;
+    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
+    styles?: StyleObject;
+    /** Custom class names */
+    classNames?: ClassNameObject;
+    /** Width of the graph */
+    width?: number;
+    /** Height of the graph */
+    height?: number;
+    /** Minimum height of the graph */
+    minHeight?: number;
+    /** Relative height scaling factor. This overwrites the height props */
+    relativeHeight?: number;
+    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
+    padding?: string;
+    /** Left margin of the graph */
+    leftMargin?: number;
+    /** Right margin of the graph */
+    rightMargin?: number;
+    /** Top margin of the graph */
+    topMargin?: number;
+    /** Bottom margin of the graph */
+    bottomMargin?: number;
+    /** Padding between bars */
+    barPadding?: number;
+    /** Maximum thickness of bars */
+    maxBarThickness?: number;
+    /** Minimum thickness of bars */
+    minBarThickness?: number;
+    /** Maximum number of bars shown in the graph */
+    maxNumberOfBars?: number;
+    /** Prefix for values */
+    prefix?: string;
+    /** Suffix for values */
+    suffix?: string;
+    /** Maximum value for the chart */
+    maxValue?: number;
+    /** Minimum value for the chart */
+    minValue?: number;
+    /** Truncate labels by specified length */
+    truncateBy?: number;
+    /** Reference values for comparison */
+    refValues?: ReferenceDataType[];
+    /** Number of ticks on the axis */
+    noOfTicks?: number;
+    /** Toggle visibility of labels */
+    showLabels?: boolean;
+    /** Toggle visibility of values */
+    showValues?: boolean;
+    /** Custom order for labels */
+    labelOrder?: string[];
+    /** Defines how “NA” values should be displayed/labelled in the graph */
+    naLabel?: string;
+    /** Toggle visibility of axis ticks */
+    showTicks?: boolean;
+    /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */
+    showColorScale?: boolean;
+    /** Toggle visibility of NA color in the color scale. This is only applicable if the data props hae color parameter and showColorScale prop is true */
+    showNAColor?: boolean;
+    /** Data points to highlight. Use the label value from data to highlight the data point */
+    highlightedDataPoints?: (string | number)[];
+    /** Defines the opacity of the non-highlighted data */
+    dimmedOpacity?: number;
+    /** Title for the bar axis */
+    barAxisTitle?: string;
+    /** Toggles if data point which are undefined or has value null are filtered out.  */
+    filterNA?: boolean;
+    /** Toggles if the graph animates in when loaded.  */
+    animate?: boolean | AnimateDataType;
+    /** Specifies the number of decimal places to display in the value. */
+    precision?: number;
+    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
+    customLayers?: CustomLayerDataType[];
+    /** Enable graph download option as png */
+    graphDownload?: boolean;
+    /** Enable data download option as a csv */
+    dataDownload?: boolean;
+    /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
+    tooltip?: string | ((_d: any) => React.ReactNode);
+    /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
+    detailsOnClick?: string | ((_d: any) => React.ReactNode);
+    /** Callback for mouse over event */
+    onSeriesMouseOver?: (_d: any) => void;
+    /** Callback for mouse click event */
+    onSeriesMouseClick?: (_d: any) => void;
+    /** Language setting  */
+    language?: Languages;
+    /** Color theme */
+    theme?: 'light' | 'dark';
+    /** Unique ID for the graph */
+    graphID?: string;
+}
+
+declare interface ReferenceDataType {
+    value: number | null;
+    text: string;
+    color?: string;
+    styles?: {
+        line?: React.CSSProperties;
+        text?: React.CSSProperties;
+    };
+    classNames?: {
+        line?: string;
+        text?: string;
+    };
+}
+
+declare interface SourcesDataType {
+    source: string;
+    link?: string;
+}
+
+declare interface StyleObject {
+    title?: React.CSSProperties;
+    footnote?: React.CSSProperties;
+    source?: React.CSSProperties;
+    description?: React.CSSProperties;
+    graphContainer?: React.CSSProperties;
+    tooltip?: React.CSSProperties;
+    xAxis?: AxesStyleObject;
+    yAxis?: AxesStyleObject;
+    graphObjectValues?: React.CSSProperties;
+    dataConnectors?: React.CSSProperties;
+    mouseOverLine?: React.CSSProperties;
+    regLine?: React.CSSProperties;
+    dataCards?: React.CSSProperties;
+    modal?: React.CSSProperties;
+}
+
+export declare function WaterfallChart(props: Props): JSX.Element;
+
+export { }

package/dist/WaterfallChart.js

@@ -0,0 +1,427 @@
+import { c as ne, j as n, m as se } from "./index-CHPV5EwG-DecW7_qr.js";
+import { useRef as ee, useState as vt, useEffect as re } from "react";
+import { i as ae } from "./index-Bwrro8-q.js";
+import { n as ie } from "./numberFormattingFunction-14YCbkN2.js";
+import { T as le } from "./Tooltip-BRnAz2Gv.js";
+import { c as Ht } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { Colors as bt } from "./Colors.js";
+import { A as ce } from "./AxisTitle-VFq89Olw.js";
+import { A as me } from "./Axis-DoOqnt6g.js";
+import { a as ue } from "./ReferenceLine-DgtoRgw0.js";
+import { Y as fe } from "./YTicksAndGridLines-GnXnSRF2.js";
+import { X as de } from "./XAxesLabels-rhK7lRjO.js";
+import { D as he } from "./DetailsModal-BMCTgVsk.js";
+import { g as Gt } from "./getTextColorBasedOnBgColor-CDY808zi.js";
+import { a as pe } from "./linear-CalFSAaO.js";
+import { b as ge } from "./band-DYty33LD.js";
+import { m as te } from "./proxy-DRuSUlPL.js";
+import { u as xe } from "./use-in-view-Dl5L8LtP.js";
+import { A as ve } from "./index-CtMBjvtq.js";
+import { ColorLegendWithMouseOver as be } from "./ColorLegendWithMouseOver.js";
+import { E as ye } from "./EmptyState-tZBErBKF.js";
+import { a as we, G as Me } from "./GraphContainer-CF6ws3pd.js";
+import { GraphFooter as Oe } from "./GraphFooter.js";
+import { GraphHeader as Ae } from "./GraphHeader.js";
+import { u as oe } from "./uniqBy-BHy4I8PK.js";
+function Ce(i) {
+  let t = 0, o = 0, O = 0;
+  for (const d of i)
+    t += d || 0, t > o && (o = t), t < O && (O = t);
+  return {
+    max: o,
+    min: O
+  };
+}
+function $e(i) {
+  const t = ne.c(46), {
+    leftMargin: o,
+    rightMargin: O,
+    topMargin: d,
+    bottomMargin: Yt,
+    data: h,
+    width: yt,
+    height: W,
+    barColor: p,
+    suffix: wt,
+    prefix: Mt,
+    barPadding: Qt,
+    showLabels: Rt,
+    showValues: u,
+    showTicks: Ot,
+    colorDomain: g,
+    truncateBy: At,
+    tooltip: V,
+    onSeriesMouseOver: Ct,
+    refValues: Xt,
+    selectedColor: G,
+    maxValue: $t,
+    minValue: jt,
+    highlightedDataPoints: H,
+    onSeriesMouseClick: Dt,
+    labelOrder: b,
+    maxBarThickness: kt,
+    minBarThickness: Lt,
+    detailsOnClick: I,
+    barAxisTitle: ot,
+    noOfTicks: Ft,
+    styles: f,
+    classNames: l,
+    dimmedOpacity: j,
+    animate: c,
+    precision: Nt,
+    customLayers: D,
+    naLabel: qt
+  } = i, k = o === void 0 ? 20 : o, Tt = O === void 0 ? 20 : O, Vt = d === void 0 ? 20 : d, nt = Yt === void 0 ? 25 : Yt, st = ee(null);
+  let Y;
+  t[0] !== c.amount || t[1] !== c.once ? (Y = {
+    once: c.once,
+    amount: c.amount
+  }, t[0] = c.amount, t[1] = c.once, t[2] = Y) : Y = t[2];
+  const S = xe(st, Y), rt = ot ? k + 30 : k;
+  let R;
+  t[3] !== nt || t[4] !== Tt || t[5] !== rt || t[6] !== Vt ? (R = {
+    top: Vt,
+    bottom: nt,
+    left: rt,
+    right: Tt
+  }, t[3] = nt, t[4] = Tt, t[5] = rt, t[6] = Vt, t[7] = R) : R = t[7];
+  const x = R, {
+    max: a,
+    min: r
+  } = Ce(h.map(Ee)), Ut = Ht($t) ? a : $t, y = Ht(jt) ? r : jt, [at, It] = vt(void 0), [L, X] = vt(void 0), [F, lt] = vt(void 0), [q, ct] = vt(void 0), N = yt - x.left - x.right, St = W - x.top - x.bottom;
+  let z;
+  if (t[8] !== h || t[9] !== b) {
+    const e = /* @__PURE__ */ new Set(), T = h.map(($, it) => {
+      const E = b ? `${$.label}` : `${it}`;
+      return e.add(E), {
+        ...$,
+        id: E
+      };
+    }), C = b ? b.filter(($) => !e.has($)) : [];
+    z = [...T, ...C.map(Pe)], t[8] = h, t[9] = b, t[10] = z;
+  } else
+    z = t[10];
+  const U = z;
+  let J;
+  t[11] !== U || t[12] !== b ? (J = b ?? U.map(Be), t[11] = U, t[12] = b, t[13] = J) : J = t[13];
+  const mt = J, s = pe().domain([y, Ut]).range([St, 0]).nice(), m = ge().domain(mt).range([0, Lt ? Math.max(N, Lt * mt.length) : kt ? Math.min(N, kt * mt.length) : N]).paddingInner(Qt), ut = s.ticks(Ft);
+  let w = 0;
+  const Jt = U.map((e) => {
+    const T = w;
+    return w = w + (e.size || 0), {
+      ...e,
+      start: T,
+      end: w
+    };
+  }), ft = l?.xAxis?.axis, v = l?.yAxis?.labels;
+  let K;
+  t[14] !== v || t[15] !== ft ? (K = {
+    axis: ft,
+    label: v
+  }, t[14] = v, t[15] = ft, t[16] = K) : K = t[16];
+  const A = f?.xAxis?.axis, Q = f?.yAxis?.labels;
+  let Z;
+  t[17] !== A || t[18] !== Q ? (Z = {
+    axis: A,
+    label: Q
+  }, t[17] = A, t[18] = Q, t[19] = Z) : Z = t[19];
+  const dt = 0 - k - 15, _ = St / 2, ht = f?.yAxis?.title, pt = l?.yAxis?.title;
+  let B;
+  t[20] !== ot || t[21] !== dt || t[22] !== _ || t[23] !== ht || t[24] !== pt ? (B = /* @__PURE__ */ n.jsx(ce, { x: dt, y: _, style: ht, className: pt, text: ot, rotate90: !0 }), t[20] = ot, t[21] = dt, t[22] = _, t[23] = ht, t[24] = pt, t[25] = B) : B = t[25];
+  let zt;
+  t[26] !== D ? (zt = D.filter(Ie).map(Ve), t[26] = D, t[27] = zt) : zt = t[27];
+  const tt = ve, Kt = Jt.map((e, T) => Ht(m(e.id)) ? null : /* @__PURE__ */ n.jsxs(te.g, { className: "undp-viz-g-with-hover", initial: "initial", animate: S ? "whileInView" : "initial", variants: {
+    initial: {
+      opacity: G ? e.color && p[g.indexOf(e.color)] === G ? 1 : j : H.length !== 0 ? H.indexOf(e.label) !== -1 ? 0.85 : j : 0.85
+    },
+    whileInView: {
+      opacity: G ? e.color && p[g.indexOf(e.color)] === G ? 1 : j : H.length !== 0 ? H.indexOf(e.label) !== -1 ? 0.85 : j : 0.85,
+      transition: {
+        duration: c.duration
+      }
+    }
+  }, exit: {
+    opacity: 0,
+    transition: {
+      duration: c.duration
+    }
+  }, onMouseEnter: (C) => {
+    It(e), ct(C.clientY), lt(C.clientX), Ct?.(e);
+  }, onClick: () => {
+    (Dt || I) && (ae(L, e) ? (X(void 0), Dt?.(void 0)) : (X(e), Dt?.(e)));
+  }, onMouseMove: (C) => {
+    It(e), ct(C.clientY), lt(C.clientX);
+  }, onMouseLeave: () => {
+    It(void 0), lt(void 0), ct(void 0), Ct?.(void 0);
+  }, children: [
+    e.size ? /* @__PURE__ */ n.jsx(te.rect, { width: m.bandwidth(), initial: "initial", animate: S ? "whileInView" : "initial", variants: {
+      initial: {
+        height: 0,
+        x: m(`${e.id}`),
+        y: s(e.start),
+        fill: h.filter(Te).length === 0 ? p[0] : e.color ? p[g.indexOf(e.color)] : bt.gray
+      },
+      whileInView: {
+        height: Math.abs(s(e.start) - s(e.end)),
+        y: s(Math.max(e.start, e.end)),
+        x: m(`${e.id}`),
+        fill: h.filter(Ne).length === 0 ? p[0] : e.color ? p[g.indexOf(e.color)] : bt.gray,
+        transition: {
+          duration: c.duration
+        }
+      }
+    }, exit: {
+      height: 0,
+      y: s(e.start),
+      transition: {
+        duration: c.duration
+      }
+    } }) : null,
+    Rt ? /* @__PURE__ */ n.jsx(de, { value: `${e.label}`.length < At ? `${e.label}` : `${`${e.label}`.substring(0, At)}...`, y: s(0) + 5, x: m(`${e.id}`), width: m.bandwidth(), height: x.bottom, style: f?.xAxis?.labels, className: l?.xAxis?.labels, alignment: "top", animate: c, isInView: S }) : null,
+    u && Math.abs(s(e.start) - s(e.end)) > 16 ? /* @__PURE__ */ n.jsx(te.text, { style: {
+      textAnchor: "middle",
+      ...f?.graphObjectValues || {}
+    }, className: se("graph-value text-sm", l?.graphObjectValues), dy: "0.33em", variants: {
+      initial: {
+        x: m(`${e.id}`) + m.bandwidth() / 2,
+        y: (s(e.start) + s(e.end)) / 2,
+        opacity: 0,
+        fill: h.filter(Le).length === 0 ? Gt(p[0]) : e.color ? Gt(p[g.indexOf(e.color)]) : Gt(bt.gray)
+      },
+      whileInView: {
+        x: m(`${e.id}`) + m.bandwidth() / 2,
+        y: (s(e.start) + s(e.end)) / 2,
+        fill: h.filter(ke).length === 0 ? Gt(p[0]) : e.color ? Gt(p[g.indexOf(e.color)]) : Gt(bt.gray),
+        opacity: 1,
+        transition: {
+          duration: c.duration
+        }
+      }
+    }, initial: "initial", animate: S ? "whileInView" : "initial", exit: {
+      opacity: 0,
+      transition: {
+        duration: c.duration
+      }
+    }, children: ie(e.size ? Math.abs(e.size) : e.size, qt, Nt, Mt, wt) }) : null
+  ] }, e.label)), gt = Xt ? /* @__PURE__ */ n.jsx(n.Fragment, { children: Xt.map((e, T) => /* @__PURE__ */ n.jsx(ue, { text: e.text, color: e.color, y: s(e.value), x1: 0 - k, x2: N + x.right, classNames: e.classNames, styles: e.styles, animate: c, isInView: S }, T)) }) : null;
+  let Bt;
+  t[28] !== tt || t[29] !== Kt || t[30] !== gt ? (Bt = /* @__PURE__ */ n.jsxs(tt, { children: [
+    Kt,
+    gt
+  ] }), t[28] = tt, t[29] = Kt, t[30] = gt, t[31] = Bt) : Bt = t[31];
+  let et;
+  t[32] !== D ? (et = D.filter(De).map(je), t[32] = D, t[33] = et) : et = t[33];
+  let xt;
+  t[34] !== l?.tooltip || t[35] !== F || t[36] !== q || t[37] !== at || t[38] !== f?.tooltip || t[39] !== V ? (xt = at && V && F && q ? /* @__PURE__ */ n.jsx(le, { data: at, body: V, xPos: F, yPos: q, backgroundStyle: f?.tooltip, className: l?.tooltip }) : null, t[34] = l?.tooltip, t[35] = F, t[36] = q, t[37] = at, t[38] = f?.tooltip, t[39] = V, t[40] = xt) : xt = t[40];
+  let P;
+  return t[41] !== l?.modal || t[42] !== I || t[43] !== L || t[44] !== X ? (P = I && L !== void 0 ? /* @__PURE__ */ n.jsx(he, { body: I, data: L, setData: X, className: l?.modal }) : null, t[41] = l?.modal, t[42] = I, t[43] = L, t[44] = X, t[45] = P) : P = t[45], /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+    /* @__PURE__ */ n.jsx(te.svg, { ref: st, width: `${yt}px`, height: `${W}px`, viewBox: `0 0 ${yt} ${W}`, direction: "ltr", children: /* @__PURE__ */ n.jsxs("g", { transform: `translate(${x.left},${x.top})`, children: [
+      /* @__PURE__ */ n.jsx(me, { y1: s(y < 0 ? 0 : y), y2: s(y < 0 ? 0 : y), x1: 0 - k, x2: N + x.right, label: ie(y < 0 ? 0 : y, qt, Nt, Mt, wt), labelPos: {
+        x: 0 - k,
+        dx: 0,
+        dy: Ut < 0 ? "1em" : -5,
+        y: s(y < 0 ? 0 : y)
+      }, classNames: K, styles: Z }),
+      Ot ? /* @__PURE__ */ n.jsx(fe, { values: ut.filter(ze), y: ut.filter(Se).map((e) => s(e)), x1: 0 - k, x2: N + x.right, styles: {
+        gridLines: f?.yAxis?.gridLines,
+        labels: f?.yAxis?.labels
+      }, classNames: {
+        gridLines: l?.yAxis?.gridLines,
+        labels: l?.yAxis?.labels
+      }, suffix: wt, prefix: Mt, labelType: "secondary", showGridLines: !0, labelPos: "vertical", precision: Nt }) : null,
+      B,
+      zt,
+      Bt,
+      et
+    ] }) }),
+    xt,
+    P
+  ] });
+}
+function je(i) {
+  return i.layer;
+}
+function De(i) {
+  return i.position === "after";
+}
+function ke(i) {
+  return i.color;
+}
+function Le(i) {
+  return i.color;
+}
+function Ne(i) {
+  return i.color;
+}
+function Te(i) {
+  return i.color;
+}
+function Ve(i) {
+  return i.layer;
+}
+function Ie(i) {
+  return i.position === "before";
+}
+function Se(i) {
+  return i !== 0;
+}
+function ze(i) {
+  return i !== 0;
+}
+function Be(i) {
+  return `${i.id}`;
+}
+function Pe(i) {
+  return {
+    id: i,
+    label: i,
+    color: null,
+    size: null
+  };
+}
+function Ee(i) {
+  return i.size;
+}
+function bi(i) {
+  const t = ne.c(100), {
+    data: o,
+    graphTitle: O,
+    colors: d,
+    suffix: Yt,
+    sources: h,
+    prefix: yt,
+    graphDescription: W,
+    barPadding: p,
+    showValues: wt,
+    showTicks: Mt,
+    truncateBy: Qt,
+    height: Rt,
+    width: u,
+    footNote: Ot,
+    colorDomain: g,
+    colorLegendTitle: At,
+    highlightedDataPoints: V,
+    padding: Ct,
+    backgroundColor: Xt,
+    topMargin: G,
+    bottomMargin: $t,
+    leftMargin: jt,
+    rightMargin: H,
+    showLabels: Dt,
+    relativeHeight: b,
+    tooltip: kt,
+    onSeriesMouseOver: Lt,
+    refValues: I,
+    showColorScale: ot,
+    graphID: Ft,
+    maxValue: f,
+    minValue: l,
+    onSeriesMouseClick: j,
+    graphDownload: c,
+    dataDownload: Nt,
+    labelOrder: D,
+    language: qt,
+    showNAColor: k,
+    minHeight: Tt,
+    theme: Vt,
+    maxBarThickness: nt,
+    maxNumberOfBars: st,
+    minBarThickness: Y,
+    ariaLabel: S,
+    detailsOnClick: rt,
+    barAxisTitle: R,
+    noOfTicks: x,
+    styles: a,
+    classNames: r,
+    filterNA: Ut,
+    animate: y,
+    dimmedOpacity: at,
+    precision: It,
+    customLayers: L,
+    naLabel: X
+  } = i, F = Yt === void 0 ? "" : Yt, lt = yt === void 0 ? "" : yt, q = p === void 0 ? 0.25 : p, ct = wt === void 0 ? !0 : wt, N = Mt === void 0 ? !0 : Mt, St = Qt === void 0 ? 999 : Qt;
+  let z;
+  t[0] !== V ? (z = V === void 0 ? [] : V, t[0] = V, t[1] = z) : z = t[1];
+  const U = z, J = Xt === void 0 ? !1 : Xt, mt = Dt === void 0 ? !0 : Dt, s = ot === void 0 ? !0 : ot, m = c === void 0 ? !1 : c, ut = Nt === void 0 ? !1 : Nt, w = qt === void 0 ? "en" : qt, Jt = k === void 0 ? !0 : k, ft = Tt === void 0 ? 0 : Tt, v = Vt === void 0 ? "light" : Vt, K = x === void 0 ? 5 : x, A = Ut === void 0 ? !0 : Ut, Q = y === void 0 ? !1 : y, Z = at === void 0 ? 0.3 : at, dt = It === void 0 ? 2 : It;
+  let _;
+  t[2] !== L ? (_ = L === void 0 ? [] : L, t[2] = L, t[3] = _) : _ = t[3];
+  const ht = _, pt = X === void 0 ? "NA" : X, [B, zt] = vt(0), [tt, Kt] = vt(0), [gt, Bt] = vt(void 0), et = ee(null), xt = ee(null);
+  let P, e;
+  t[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (P = () => {
+    const M = new ResizeObserver((_t) => {
+      zt(_t[0].target.clientWidth || 620), Kt(_t[0].target.clientHeight || 480);
+    });
+    return et.current && M.observe(et.current), () => M.disconnect();
+  }, e = [], t[4] = P, t[5] = e) : (P = t[4], e = t[5]), re(P, e);
+  const T = r?.graphContainer, C = a?.graphContainer;
+  let $;
+  t[6] !== r?.description || t[7] !== r?.title || t[8] !== o || t[9] !== ut || t[10] !== W || t[11] !== m || t[12] !== O || t[13] !== a?.description || t[14] !== a?.title || t[15] !== u ? ($ = O || W || m || ut ? /* @__PURE__ */ n.jsx(Ae, { styles: {
+    title: a?.title,
+    description: a?.description
+  }, classNames: {
+    title: r?.title,
+    description: r?.description
+  }, graphTitle: O, graphDescription: W, width: u, graphDownload: m ? xt : void 0, dataDownload: ut ? o.map(qe).filter(Fe).length > 0 ? o.map(Xe).filter(Re) : o.filter(Ye) : null }) : null, t[6] = r?.description, t[7] = r?.title, t[8] = o, t[9] = ut, t[10] = W, t[11] = m, t[12] = O, t[13] = a?.description, t[14] = a?.title, t[15] = u, t[16] = $) : $ = t[16];
+  let it;
+  t[17] !== r?.colorLegend || t[18] !== g || t[19] !== At || t[20] !== d || t[21] !== o || t[22] !== s || t[23] !== Jt || t[24] !== v || t[25] !== u ? (it = s && o.filter(He).length !== 0 && o.length > 0 ? /* @__PURE__ */ n.jsx(be, { width: u, colorLegendTitle: At, colors: d || bt[v].categoricalColors.colors, colorDomain: g || oe(o, "color", !0), setSelectedColor: Bt, showNAColor: Jt, className: r?.colorLegend }) : null, t[17] = r?.colorLegend, t[18] = g, t[19] = At, t[20] = d, t[21] = o, t[22] = s, t[23] = Jt, t[24] = v, t[25] = u, t[26] = it) : it = t[26];
+  let E;
+  t[27] !== o || t[28] !== A ? (E = o.filter((M) => A ? !Ht(M.size) : M).length === 0 && /* @__PURE__ */ n.jsx(ye, {}), t[27] = o, t[28] = A, t[29] = E) : E = t[29];
+  let Pt;
+  t[30] !== Q || t[31] !== R || t[32] !== q || t[33] !== $t || t[34] !== r || t[35] !== g || t[36] !== d || t[37] !== ht || t[38] !== o || t[39] !== rt || t[40] !== Z || t[41] !== A || t[42] !== U || t[43] !== D || t[44] !== w || t[45] !== jt || t[46] !== nt || t[47] !== st || t[48] !== f || t[49] !== Y || t[50] !== l || t[51] !== pt || t[52] !== K || t[53] !== j || t[54] !== Lt || t[55] !== dt || t[56] !== lt || t[57] !== I || t[58] !== H || t[59] !== gt || t[60] !== mt || t[61] !== N || t[62] !== ct || t[63] !== a || t[64] !== F || t[65] !== tt || t[66] !== B || t[67] !== v || t[68] !== kt || t[69] !== G || t[70] !== St ? (Pt = B && tt && o.filter((M) => A ? !Ht(M.size) : M).length > 0 ? /* @__PURE__ */ n.jsx($e, { data: o.filter((M) => A ? !Ht(M.size) : M).filter((M, _t) => st ? _t < st : !0), barColor: o.filter(Ge).length === 0 ? d ? [d] : [bt.primaryColors["blue-600"]] : d || bt[v].categoricalColors.colors, colorDomain: o.filter(We).length === 0 ? [] : g || oe(o, "color", !0), selectedColor: gt, width: B, height: tt, suffix: F, prefix: lt, barPadding: q, showValues: ct, showTicks: N, leftMargin: jt, rightMargin: H, topMargin: G, bottomMargin: $t, truncateBy: St, showLabels: mt, tooltip: kt, onSeriesMouseOver: Lt, refValues: I, maxValue: f, minValue: l, highlightedDataPoints: U, onSeriesMouseClick: j, labelOrder: D, rtl: w === "he" || w === "ar", maxBarThickness: nt, minBarThickness: Y, detailsOnClick: rt, barAxisTitle: R, noOfTicks: K, classNames: r, styles: a, animate: Q === !0 ? {
+    duration: 0.5,
+    once: !0,
+    amount: 0.5
+  } : Q || {
+    duration: 0,
+    once: !0,
+    amount: 0
+  }, dimmedOpacity: Z, precision: dt, customLayers: ht, naLabel: pt }) : null, t[30] = Q, t[31] = R, t[32] = q, t[33] = $t, t[34] = r, t[35] = g, t[36] = d, t[37] = ht, t[38] = o, t[39] = rt, t[40] = Z, t[41] = A, t[42] = U, t[43] = D, t[44] = w, t[45] = jt, t[46] = nt, t[47] = st, t[48] = f, t[49] = Y, t[50] = l, t[51] = pt, t[52] = K, t[53] = j, t[54] = Lt, t[55] = dt, t[56] = lt, t[57] = I, t[58] = H, t[59] = gt, t[60] = mt, t[61] = N, t[62] = ct, t[63] = a, t[64] = F, t[65] = tt, t[66] = B, t[67] = v, t[68] = kt, t[69] = G, t[70] = St, t[71] = Pt) : Pt = t[71];
+  let Et;
+  t[72] !== E || t[73] !== Pt ? (Et = /* @__PURE__ */ n.jsxs(we, { ref: et, children: [
+    E,
+    Pt
+  ] }), t[72] = E, t[73] = Pt, t[74] = Et) : Et = t[74];
+  let Wt;
+  t[75] !== r?.footnote || t[76] !== r?.source || t[77] !== Ot || t[78] !== h || t[79] !== a?.footnote || t[80] !== a?.source || t[81] !== u ? (Wt = h || Ot ? /* @__PURE__ */ n.jsx(Oe, { sources: h, footNote: Ot, width: u, styles: {
+    footnote: a?.footnote,
+    source: a?.source
+  }, classNames: {
+    footnote: r?.footnote,
+    source: r?.source
+  } }) : null, t[75] = r?.footnote, t[76] = r?.source, t[77] = Ot, t[78] = h, t[79] = a?.footnote, t[80] = a?.source, t[81] = u, t[82] = Wt) : Wt = t[82];
+  let Zt;
+  return t[83] !== S || t[84] !== J || t[85] !== Ft || t[86] !== Rt || t[87] !== w || t[88] !== ft || t[89] !== Ct || t[90] !== b || t[91] !== T || t[92] !== C || t[93] !== $ || t[94] !== it || t[95] !== Et || t[96] !== Wt || t[97] !== v || t[98] !== u ? (Zt = /* @__PURE__ */ n.jsxs(Me, { className: T, style: C, id: Ft, ref: xt, "aria-label": S, backgroundColor: J, theme: v, language: w, minHeight: ft, width: u, height: Rt, relativeHeight: b, padding: Ct, children: [
+    $,
+    it,
+    Et,
+    Wt
+  ] }), t[83] = S, t[84] = J, t[85] = Ft, t[86] = Rt, t[87] = w, t[88] = ft, t[89] = Ct, t[90] = b, t[91] = T, t[92] = C, t[93] = $, t[94] = it, t[95] = Et, t[96] = Wt, t[97] = v, t[98] = u, t[99] = Zt) : Zt = t[99], Zt;
+}
+function We(i) {
+  return i.color;
+}
+function Ge(i) {
+  return i.color;
+}
+function He(i) {
+  return i.color;
+}
+function Ye(i) {
+  return i !== void 0;
+}
+function Re(i) {
+  return i !== void 0;
+}
+function Xe(i) {
+  return i.data;
+}
+function Fe(i) {
+  return i !== void 0;
+}
+function qe(i) {
+  return i.data;
+}
+export {
+  bi as WaterfallChart
+};
+//# sourceMappingURL=WaterfallChart.js.map