@zeniai/web-components 3.16.44 → 3.16.45

package/dist/RevenueChart-BMgI2BHK.js

@@ -0,0 +1,2239 @@
+import { j as o, u as P, a0 as V, A as tt, $ as At, Q as ot, X as et, Y as rt, R as nt, W as mt, a$ as gt, U as pt, k as Jt } from "./vendor-.pnpm-BZbZ6JJC.js";
+import at, { useRef as W, useEffect as q, useState as yt, useMemo as qt, useCallback as Ut } from "react";
+import x from "@emotion/styled";
+import { R as Ct, D as A, a as w, S as p, C as m, p as F, u as ft, j as Qt, t as N, dK as ct, Q as xt, dN as H, o as Y } from "./index-CvyHeUzo.js";
+import { a as E, c as D, g as y, b as st, m as L, d as lt } from "./chartTypes-BoA9fCCZ.js";
+import { s as G, c as it, b as M } from "./toCOABalancesWithID--3a-7Ohb.js";
+import { t as R } from "./toChartData-KZ92y9KA.js";
+const U = {
+  legendLabelMarginLeft: new Ct(2, 2),
+  legendLabelMarginRight: new Ct(A[3], A[4])
+}, Zt = x.div`
+  display: flex;
+`, Wt = x.div`
+  margin: ${p.sp2} ${p.sp0} ${p.sp2} ${p.sp0};
+  width: 100%;
+  height: 1px;
+  background-color: ${m.neutralGrey3Dark};
+`, Rt = x.div`
+  flex: display;
+  opacity: 0.85;
+  width: 220px;
+  border-radius: ${p.sp1};
+  flex-direction: column;
+  padding: ${p.sp3};
+  background-color: ${(t) => t.theme.colors.black};
+`, Vt = x(F)`
+  color: ${(t) => t.color ?? m.neutralGrey2Light};
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`, to = x(F)`
+  background-color: ${(t) => t.color};
+  height: 12px;
+  width: 12px;
+  display: inline-block;
+  margin-right: ${p.sp2};
+`, oo = x(F)`
+  text-align: left;
+`, eo = x(F)`
+  text-align: right;
+`, ro = ({
+  active: t,
+  payload: e
+}) => {
+  const n = [];
+  return e?.forEach((c) => {
+    const r = c.name;
+    if (t === !0) {
+      const a = c.payload, i = c.color, d = r != null && a.record[r] != null ? a.record[r].amount : void 0;
+      n.push({
+        barName: w.getLocalizedStrings().chartCard.cashInCashOut[E(r)],
+        value: d,
+        color: i
+      });
+    }
+  }), n;
+}, $t = (t) => t.map((e, n) => /* @__PURE__ */ o.jsxs(
+  Vt,
+  {
+    color: e.color,
+    children: [
+      /* @__PURE__ */ o.jsxs(oo, { children: [
+        /* @__PURE__ */ o.jsx(to, { color: e.color }),
+        `${e.barName}:`
+      ] }),
+      /* @__PURE__ */ o.jsx(eo, { children: `${D(e.value)}` })
+    ]
+  },
+  e.barName + n
+)), no = (t) => {
+  const e = ro({ ...t });
+  return e.length === 0 ? null : /* @__PURE__ */ o.jsx(Zt, { children: /* @__PURE__ */ o.jsxs(Rt, { children: [
+    $t(
+      e.slice(0, e.length - 1)
+    ),
+    e.length ? /* @__PURE__ */ o.jsx(Wt, {}) : null,
+    $t(e.slice(-1))
+  ] }) });
+}, ao = at.memo(no), co = (t, e, n, c, r) => {
+  let a = [], i = [], d = [];
+  n != null && n.balances.length > 0 && (a = G("cash_in", "actual", n)), c != null && c.balances.length > 0 && (i = G("cash_out", "actual", c)), r != null && r.balances.length > 0 && (d = it(
+    "net_cash_flow",
+    "actual",
+    r
+  ));
+  const l = y("cash_in", "actual"), s = y("cash_out", "actual"), f = y("net_cash_flow", "actual"), g = a.length > 0 ? l : i.length > 0 ? s : void 0, h = {};
+  return h[l] = a, h[s] = i, h[f] = d, g != null ? R(
+    t,
+    e,
+    g,
+    h
+  ) : void 0;
+}, jt = [
+  y("cash_in", "actual"),
+  y("cash_out", "actual"),
+  y("net_cash_flow", "actual")
+], so = x.div`
+  width: ${(t) => t.width}px;
+  height: ${(t) => t.height}px;
+
+  .recharts-legend-item {
+    margin-right: ${(t) => U.legendLabelMarginRight.valuePx(
+  t.windowSize
+)} !important;
+    :last-of-type {
+      margin-right: ${p.sp0} !important;
+    }
+  }
+`, lo = x(xt)`
+  margin-left: ${(t) => U.legendLabelMarginLeft.valuePx(t.windowSize)};
+  color: ${(t) => t.theme.colors.primary};
+`;
+function Ne({
+  selectedRangeReport: t,
+  timeframe: e,
+  highlightedRange: n,
+  width: c,
+  height: r,
+  showBarHoverBackground: a,
+  isDetailPage: i,
+  onCOABalancesRangeChanged: d
+}) {
+  const l = P(), s = W(!1);
+  q(() => {
+    s.current = !0;
+  }, []);
+  const f = [
+    l.colors.graphColor33,
+    l.colors.graphColor36,
+    l.colors.graphColor35
+  ], g = (T, S = l.colors.graphColor08) => T < f.length ? f[T] : S, h = co(
+    t.firstMonthOfFY,
+    jt,
+    t.cashIn,
+    t.cashOut,
+    t.netCashFlow
+  ), C = () => {
+    const T = [];
+    return jt.forEach((S, $) => {
+      const _ = i === !0 && !s.current;
+      T.push(
+        /* @__PURE__ */ o.jsx(
+          V,
+          {
+            name: S,
+            animationDuration: _ ? 500 : void 0,
+            style: { cursor: "pointer" },
+            legendType: "square",
+            dataKey: (k) => {
+              const b = k.record;
+              return (b[S] != null && b[S].amount != null ? b[S].amount : void 0)?.amount ?? 0;
+            },
+            fill: g($)
+          },
+          S
+        )
+      );
+    }), T;
+  };
+  return h == null ? null : /* @__PURE__ */ o.jsx(
+    io,
+    {
+      chartData: h,
+      timeframe: e,
+      showBarHoverBackground: a,
+      barElements: C(),
+      customToolTipContent: ({ active: T, payload: S }) => /* @__PURE__ */ o.jsx(ao, { active: T, payload: S }),
+      width: c,
+      height: r,
+      onCOABalancesRangeChanged: d,
+      highlightedRange: n,
+      isDetailPage: i === !0
+    }
+  );
+}
+const io = ({
+  chartData: t,
+  timeframe: e,
+  barElements: n,
+  customToolTipContent: c,
+  highlightedRange: r,
+  width: a,
+  height: i,
+  showBarHoverBackground: d,
+  isDetailPage: l,
+  onCOABalancesRangeChanged: s
+}) => {
+  const f = ft(), g = P(), h = t.timeseries, C = st(t), T = h.map(
+    (k) => k.label
+  ), S = d !== !1, $ = (k) => {
+    if (!l || k?.activePayload == null || k?.activePayload.length === 0)
+      return;
+    const b = k.activePayload[0];
+    if (b?.payload?.timeLabel?.label == null)
+      return;
+    const v = k.activeTooltipIndex, K = b.payload.timeLabel.label;
+    if (r == null)
+      return;
+    const u = lt(
+      K,
+      T,
+      r.numberOfPeriods
+    ), j = u[1] === void 0 ? T.length - 1 : T.indexOf(u[1]), B = {
+      ...r,
+      thisPeriod: {
+        startDate: h[j].startDate,
+        endDate: h[j].endDate
+      }
+    };
+    s?.(
+      h[v],
+      e,
+      B
+    );
+  }, _ = l ? (a - 60) / L.cash_in_cash_out * (L.cash_in_cash_out - t.recordByTimeseries.length) : 20;
+  return /* @__PURE__ */ o.jsx(
+    so,
+    {
+      "data-testid": Qt(
+        "dashboard-cash-in-cash-out-timeframe",
+        e
+      ),
+      width: a,
+      height: i,
+      windowSize: f,
+      children: /* @__PURE__ */ o.jsx(tt, { children: ({ height: k, width: b }) => /* @__PURE__ */ o.jsxs(
+        At,
+        {
+          data: t.recordByTimeseries,
+          barCategoryGap: l ? void 0 : "12%",
+          maxBarSize: l ? A[10] : 22,
+          barGap: l ? void 0 : 2,
+          margin: {
+            top: 5,
+            right: _,
+            left: 0,
+            bottom: A[4]
+          },
+          height: k,
+          width: b,
+          style: { display: "flex", flex: "1 1 auto" },
+          onClick: $,
+          children: [
+            /* @__PURE__ */ o.jsx(
+              ot,
+              {
+                horizontal: !0,
+                vertical: !1,
+                strokeWidth: 0.5,
+                stroke: g.colors.grey3
+              }
+            ),
+            /* @__PURE__ */ o.jsx(
+              et,
+              {
+                dataKey: (v) => v.timeLabel.label,
+                type: "category",
+                axisLine: {
+                  stroke: g.colors.grey3,
+                  strokeWidth: 0.5
+                },
+                tickLine: !1,
+                tick: {
+                  color: g.colors.hero,
+                  ...N.extraSmallRegular.cssObject
+                }
+              }
+            ),
+            /* @__PURE__ */ o.jsx(
+              rt,
+              {
+                type: "number",
+                axisLine: !1,
+                tickLine: !1,
+                tick: {
+                  color: g.colors.hero,
+                  ...N.extraSmallRegular.cssObject
+                },
+                tickFormatter: (v) => ct("0,0.[00]a", v, C)
+              }
+            ),
+            /* @__PURE__ */ o.jsx(
+              nt,
+              {
+                wrapperStyle: { zIndex: 2 },
+                cursor: S ? {
+                  stroke: g.colors.background,
+                  strokeDasharray: "1, 1",
+                  strokeWidth: 1,
+                  fill: g.colors.background
+                } : !1,
+                content: c,
+                allowEscapeViewBox: { x: !1, y: !0 }
+              }
+            ),
+            n,
+            l ? /* @__PURE__ */ o.jsx(
+              mt,
+              {
+                verticalAlign: "bottom",
+                wrapperStyle: {
+                  width: "100%",
+                  display: "flex",
+                  justifyContent: "center",
+                  left: "initial",
+                  bottom: p.sp0
+                },
+                formatter: (v) => /* @__PURE__ */ o.jsx(lo, { windowSize: f, children: w.getLocalizedStrings().chartCard.cashInCashOut[E(v)] })
+              }
+            ) : null
+          ]
+        }
+      ) })
+    }
+  );
+}, uo = x.div`
+  display: flex;
+`, ho = x.div`
+  flex: display;
+  opacity: 0.85;
+  border-radius: ${p.sp1};
+  flex-direction: column;
+  padding: ${p.sp3};
+  background-color: ${(t) => t.theme.colors.black};
+`, mo = x(F)`
+  color: ${(t) => t.color ?? m.neutralGrey2Light};
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`, go = ({
+  active: t,
+  payload: e
+}) => {
+  const n = [];
+  return e?.forEach((c) => {
+    const r = c.name;
+    if (t === !0) {
+      const a = c.payload, i = c.color, d = r != null && a.record[r] != null ? a.record[r].amount : void 0;
+      n.push({
+        barName: w.getLocalizedStrings().reportTitleById.cash_position,
+        value: d,
+        color: i
+      });
+    }
+  }), n;
+}, po = (t) => {
+  const e = go(t);
+  return e.length === 0 ? null : /* @__PURE__ */ o.jsx(uo, { children: /* @__PURE__ */ o.jsx(ho, { children: e.map((n, c) => /* @__PURE__ */ o.jsx(
+    mo,
+    {
+      color: n.color,
+      children: `${n.barName}: ${D(
+        n.value
+      )}`
+    },
+    n.barName + c
+  )) }) });
+}, fo = at.memo(po), xo = (t, e, n) => {
+  let c = [];
+  n != null && n.balances.length > 0 && (c = M(
+    "cash_position",
+    "actual",
+    n
+  ));
+  const r = y("cash_position", "actual"), a = {};
+  return a[r] = c, c.length > 0 ? R(
+    t,
+    e,
+    r,
+    a
+  ) : void 0;
+}, yo = x.div`
+  width: ${(t) => t.width}px;
+  height: ${(t) => t.height}px;
+`, vt = [y("cash_position", "actual")];
+function Ge({
+  selectedRangeReport: t,
+  timeframe: e,
+  highlightedRange: n,
+  width: c,
+  height: r,
+  showBarHoverBackground: a,
+  isDetailPage: i,
+  onCOABalancesRangeChanged: d
+}) {
+  const l = P(), s = W(!1);
+  q(() => {
+    s.current = !0;
+  }, []);
+  const f = xo(
+    t.firstMonthOfFY,
+    vt,
+    t.cashPosition
+  ), g = () => {
+    const h = [];
+    return vt.forEach((C) => {
+      const T = i === !0 && !s.current;
+      h.push(
+        /* @__PURE__ */ o.jsx(
+          V,
+          {
+            name: C,
+            animationDuration: T ? 500 : void 0,
+            style: { cursor: "pointer" },
+            dataKey: (S) => {
+              const $ = S.record;
+              return ($[C] != null && $[C].amount != null ? $[C].amount : void 0)?.amount ?? 0;
+            },
+            fill: l.colors.graphColor17
+          },
+          C
+        )
+      );
+    }), h;
+  };
+  return f == null ? null : /* @__PURE__ */ o.jsx(
+    Co,
+    {
+      chartData: f,
+      timeframe: e,
+      showBarHoverBackground: a,
+      barElements: g(),
+      customToolTipContent: ({ active: h, payload: C }) => /* @__PURE__ */ o.jsx(fo, { active: h, payload: C }),
+      width: c,
+      height: r,
+      onCOABalancesRangeChanged: d,
+      highlightedRange: n,
+      isDetailPage: i === !0
+    }
+  );
+}
+const Co = ({
+  chartData: t,
+  timeframe: e,
+  barElements: n,
+  customToolTipContent: c,
+  highlightedRange: r,
+  width: a,
+  height: i,
+  showBarHoverBackground: d,
+  isDetailPage: l,
+  onCOABalancesRangeChanged: s
+}) => {
+  const f = P(), g = t.timeseries, h = st(t), C = g.map(
+    (_) => _.label
+  ), T = d !== !1, S = (_) => {
+    if (!l || _?.activePayload == null || _?.activePayload.length === 0)
+      return;
+    const k = _.activePayload[0];
+    if (k?.payload?.timeLabel?.label == null)
+      return;
+    const b = _.activeTooltipIndex, v = k.payload.timeLabel.label;
+    if (r == null)
+      return;
+    const K = lt(
+      v,
+      C,
+      r.numberOfPeriods
+    ), u = K[1] === void 0 ? C.length - 1 : C.indexOf(K[1]), j = {
+      ...r,
+      thisPeriod: {
+        startDate: g[u].startDate,
+        endDate: g[u].endDate
+      }
+    };
+    s?.(
+      g[b],
+      e,
+      j
+    );
+  }, $ = l ? (a - 60) / L.cash_position * (L.cash_position - t.recordByTimeseries.length) : 20;
+  return /* @__PURE__ */ o.jsx(yo, { width: a, height: i, children: /* @__PURE__ */ o.jsx(tt, { children: ({ height: _, width: k }) => /* @__PURE__ */ o.jsxs(
+    At,
+    {
+      width: k,
+      height: _,
+      data: t.recordByTimeseries,
+      barCategoryGap: "25%",
+      maxBarSize: l ? A[10] : 30,
+      margin: {
+        top: 5,
+        right: $,
+        left: 0,
+        bottom: 5
+      },
+      style: { display: "flex", flex: "1 1 auto" },
+      onClick: S,
+      children: [
+        /* @__PURE__ */ o.jsx(
+          ot,
+          {
+            horizontal: !0,
+            vertical: !1,
+            strokeWidth: 0.5,
+            stroke: f.colors.grey3
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          et,
+          {
+            dataKey: (b) => b.timeLabel.label,
+            type: "category",
+            axisLine: { stroke: f.colors.grey3, strokeWidth: 0.5 },
+            tickLine: !1,
+            tick: {
+              color: f.colors.hero,
+              ...N.extraSmallRegular.cssObject
+            }
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          rt,
+          {
+            type: "number",
+            axisLine: !1,
+            tickLine: !1,
+            tick: {
+              color: f.colors.hero,
+              ...N.extraSmallRegular.cssObject
+            },
+            tickFormatter: (b) => ct("0,0.[00]a", b, h)
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          nt,
+          {
+            wrapperStyle: { zIndex: 2 },
+            cursor: T ? {
+              stroke: f.colors.background,
+              strokeDasharray: "1, 1",
+              strokeWidth: 1,
+              fill: f.colors.background
+            } : !1,
+            content: c,
+            allowEscapeViewBox: { x: !1, y: !0 }
+          }
+        ),
+        n
+      ]
+    }
+  ) }) });
+}, $o = x.div`
+  display: flex;
+`, jo = x.div`
+  display: flex;
+  flex-direction: column;
+`, vo = x.div`
+  display: flex;
+  background-color: ${(t) => t.theme.colors.black};
+  opacity: 0.85;
+  border-radius: ${p.sp1} ${p.sp1} ${p.sp0} ${p.sp0};
+  color: ${(t) => t.theme.colors.grey1};
+  padding: ${p.sp3};
+`, ut = x.div`
+  flex: 1;
+  text-align: right;
+`, bo = x.div`
+  width: 132px;
+`, Mt = x.div`
+  margin: ${p.sp2} ${p.sp0} ${p.sp2} ${p.sp0};
+  width: 100%;
+  height: 1px;
+  background-color: ${m.neutralGrey3Dark};
+`, ko = x.div`
+  flex: display;
+  opacity: 0.85;
+  width: 200px;
+  border-radius: ${p.sp1};
+  flex-direction: column;
+  padding: ${p.sp3};
+  background-color: ${(t) => t.theme.colors.black};
+`, So = x.div`
+  flex: display;
+  opacity: 0.85;
+  width: 500px;
+  border-radius: ${p.sp0} ${p.sp0} ${p.sp1} ${p.sp1};
+  flex-direction: column;
+  padding: ${p.sp3};
+  background-color: ${(t) => t.theme.colors.black};
+`, Nt = x(F)`
+  color: ${(t) => t.color ?? m.neutralGrey2Light};
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+  ${(t) => t.showPercent ? "flex-start" : "center"};
+`, Gt = x(F)`
+  background-color: ${(t) => t.color};
+  height: 12px;
+  width: 12px;
+  display: inline-block;
+  margin-right: ${p.sp2};
+`, To = x(F)`
+  text-align: left;
+`, _o = x(F)`
+  text-align: left;
+  width: 120px;
+`, wo = x.div`
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+`, bt = x(Y)`
+  text-align: right;
+`, X = x(Y)`
+  text-align: right;
+  flex: 1;
+  color: ${(t) => t.isChange != null && t.isChange === !0 ? m.important : null};
+`, kt = x(Y)`
+  display: flex;
+  flex-direction: column;
+`, St = x(X)``, Bo = (t, e) => {
+  const n = y(E(t), "forecast");
+  if (e.record[n] == null)
+    return;
+  const c = e.record[t].amount, r = e.record[n].amount, a = Math.floor(
+    (c.amount - r.amount) * 100 / 100
+  ), i = {
+    ...c,
+    amount: a
+  }, d = r.amount !== 0 ? Math.floor(
+    (c.amount - r.amount) / r.amount * 100
+  ) / 100 : (
+    // Why this ? This is to limit decimal places to 2 digits. Otherwise, if passed with lot of decimal places, it becomes NaN during formatting..
+    void 0
+  );
+  return {
+    value: r,
+    change: i,
+    percent: d,
+    forecastPercent: e.record[n].percentValue
+  };
+}, Oo = ({
+  active: t,
+  payload: e,
+  mode: n
+}) => {
+  const c = [], r = {
+    barName: w.getLocalizedStrings().chartCard.netBurnOrIncome.gross_burn,
+    actual: void 0,
+    color: m.neutralGrey2Dark,
+    forecast: void 0
+  };
+  let a = {
+    amount: 0,
+    currencyCode: "",
+    currencySymbol: ""
+  }, i = {
+    amount: 0,
+    currencyCode: "",
+    currencySymbol: ""
+  };
+  const d = y("income", "actual"), l = y("cogs", "actual"), s = y("expenses", "actual"), f = y("net_burn_or_income", "actual");
+  return e?.forEach((g) => {
+    const h = g.name;
+    if (t === !0) {
+      const C = g.payload, T = g.color, S = h != null && C.record[h] != null ? C.record[h].amount : void 0;
+      let $;
+      if (h.includes("forecast") !== !0)
+        switch (n === "forecast_mode" && ($ = C.record[h] != null ? Bo(h, C) : void 0), h) {
+          case l:
+          case s:
+            S != null && (a.currencyCode === "" ? a = { ...S } : a.amount = a.amount + S.amount), $ != null && (i.currencyCode === "" ? i = { ...$.value } : i.amount = i.amount + $.value.amount), c.push({
+              barName: w.getLocalizedStrings().chartCard.netBurnOrIncome[E(h)],
+              actual: S,
+              forecast: $,
+              color: T
+            });
+            break;
+          case f: {
+            const _ = S != null && S.amount >= 0 ? w.getLocalizedStrings().chartCard.netBurnOrIncome.net_income : w.getLocalizedStrings().chartCard.netBurnOrIncome.net_burn;
+            c.push({
+              barName: _,
+              actual: S,
+              color: T,
+              percent: C.record[h]?.percentValue,
+              forecast: $
+            });
+            break;
+          }
+          case d:
+          default:
+            c.push({
+              barName: w.getLocalizedStrings().chartCard.netBurnOrIncome[E(h)],
+              actual: S,
+              color: T,
+              forecast: $
+            });
+        }
+    }
+  }), r.actual = a, r.forecast = i != null && a != null ? {
+    value: i,
+    change: {
+      ...a,
+      amount: Math.floor(
+        (a.amount - i.amount) * 100 / 100
+      )
+    },
+    percent: i.amount !== 0 ? Math.floor(
+      (a.amount - i.amount) / i.amount * 100
+    ) / 100 : 0
+  } : void 0, t === !0 && c.splice(
+    c.length - 1,
+    0,
+    r
+  ), c;
+}, Tt = (t) => t.map((e, n) => /* @__PURE__ */ o.jsxs(
+  Nt,
+  {
+    color: e.color,
+    showPercent: e.percent != null,
+    children: [
+      /* @__PURE__ */ o.jsxs(To, { children: [
+        /* @__PURE__ */ o.jsx(
+          Gt,
+          {
+            color: e.barName === w.getLocalizedStrings().chartCard.netBurnOrIncome.gross_burn ? "transparent" : e.color
+          }
+        ),
+        `${e.barName}:`
+      ] }),
+      /* @__PURE__ */ o.jsxs(wo, { children: [
+        /* @__PURE__ */ o.jsx(bt, { children: `${D(e.actual)}` }),
+        e.percent != null ? /* @__PURE__ */ o.jsx(bt, { children: H("0,0.0%", e.percent) }) : null
+      ] })
+    ]
+  },
+  e.barName + n
+)), _t = (t) => t.map((e, n) => /* @__PURE__ */ o.jsxs(
+  Nt,
+  {
+    color: e.color,
+    showPercent: e.percent != null,
+    children: [
+      /* @__PURE__ */ o.jsxs(_o, { children: [
+        /* @__PURE__ */ o.jsx(
+          Gt,
+          {
+            color: e.barName === w.getLocalizedStrings().chartCard.netBurnOrIncome.gross_burn ? "transparent" : e.color
+          }
+        ),
+        `${e.barName}:`
+      ] }),
+      /* @__PURE__ */ o.jsx(X, { children: /* @__PURE__ */ o.jsxs(kt, { children: [
+        e.actual != null ? `${D(e.actual)}` : "-",
+        /* @__PURE__ */ o.jsx(St, { children: e.percent != null ? H("0,0.0%", e.percent) : null })
+      ] }) }),
+      /* @__PURE__ */ o.jsx(X, { children: /* @__PURE__ */ o.jsxs(kt, { children: [
+        e.forecast != null ? `${D(e.forecast.value)}` : "-",
+        /* @__PURE__ */ o.jsx(St, { children: e.forecast != null && e.forecast.forecastPercent != null ? H(
+          "0,0.0%",
+          e.forecast.forecastPercent
+        ) : null })
+      ] }) }),
+      e.forecast != null ? /* @__PURE__ */ o.jsx(X, { isChange: !0, children: `${D(e.forecast.change)}` }) : /* @__PURE__ */ o.jsx(X, { children: "-" }),
+      e.forecast != null ? /* @__PURE__ */ o.jsx(X, { isChange: !0, children: H(
+        "0,0.0%",
+        e.forecast.percent
+      ) }) : /* @__PURE__ */ o.jsx(X, { children: "-" })
+    ]
+  },
+  e.barName + n
+)), Ko = (t) => {
+  if (t.length > 0) {
+    for (const e of t)
+      if (e.actual != null)
+        return e.actual.currencySymbol;
+  }
+  return "";
+}, Io = ({
+  barLabelsWithValues: t
+}) => /* @__PURE__ */ o.jsxs(jo, { children: [
+  /* @__PURE__ */ o.jsxs(vo, { children: [
+    /* @__PURE__ */ o.jsx(bo, {}),
+    /* @__PURE__ */ o.jsx(ut, { children: w.getLocalizedStrings().chartCard.tooltip.actual }),
+    /* @__PURE__ */ o.jsx(ut, { children: w.getLocalizedStrings().chartCard.tooltip.forecast }),
+    /* @__PURE__ */ o.jsxs(ut, { children: [
+      w.getLocalizedStrings().chartCard.tooltip.change,
+      " ",
+      Ko(t)
+    ] }),
+    /* @__PURE__ */ o.jsx(ut, { children: w.getLocalizedStrings().chartCard.tooltip.change_percent })
+  ] }),
+  /* @__PURE__ */ o.jsxs(So, { children: [
+    _t(
+      t.slice(0, t.length - 2)
+    ),
+    t.length ? /* @__PURE__ */ o.jsx(Mt, {}) : null,
+    _t(t.slice(-2))
+  ] })
+] }), Fo = ({
+  barLabelsWithValues: t
+}) => /* @__PURE__ */ o.jsx($o, { children: /* @__PURE__ */ o.jsxs(ko, { children: [
+  Tt(
+    t.slice(0, t.length - 2)
+  ),
+  t.length ? /* @__PURE__ */ o.jsx(Mt, {}) : null,
+  Tt(t.slice(-2))
+] }) }), Do = (t) => {
+  const e = Oo({ ...t });
+  return e.length === 0 ? null : /* @__PURE__ */ o.jsx(o.Fragment, { children: t.mode === "forecast_mode" ? /* @__PURE__ */ o.jsx(Io, { barLabelsWithValues: e }) : /* @__PURE__ */ o.jsx(Fo, { barLabelsWithValues: e }) });
+}, zo = at.memo(Do), wt = (t, e, n, c, r, a, i) => {
+  let d = [], l = [], s = [], f = [];
+  c != null && c.balances.length > 0 && (d = G("income", "actual", c)), r != null && r.balances.length > 0 && (l = G("cogs", "actual", r)), a != null && a.balances.length > 0 && (s = M(
+    "expenses",
+    "actual",
+    a
+  )), i != null && i.balances.length > 0 && (f = it(
+    "net_burn_or_income",
+    "actual",
+    i
+  ));
+  const g = y("income", "actual"), h = y("cogs", "actual"), C = y("expenses", "actual"), T = y("net_burn_or_income", "actual"), S = d.length > 0 ? g : l.length > 0 ? h : s.length > 0 ? C : void 0, $ = {};
+  return $[g] = d, $[h] = l, $[C] = s, $[T] = f, n === "forecast_mode" && Object.assign(
+    $,
+    Lo(c, r, a, i)
+  ), S != null ? R(
+    t,
+    e,
+    S,
+    $
+  ) : void 0;
+}, Lo = (t, e, n, c) => {
+  let r = [], a = [], i = [], d = [];
+  t != null && t.balances.length > 0 && (r = G("income", "forecast", t)), e != null && e.balances.length > 0 && (a = G("cogs", "forecast", e)), n != null && n.balances.length > 0 && (i = M(
+    "expenses",
+    "forecast",
+    n
+  )), c != null && c.balances.length > 0 && (d = it(
+    "net_burn_or_income",
+    "forecast",
+    c
+  ));
+  const l = y("income", "forecast"), s = y("cogs", "forecast"), f = y("expenses", "forecast"), g = y("net_burn_or_income", "forecast"), h = {};
+  return h[l] = r, h[s] = a, h[f] = i, h[g] = d, h;
+}, Eo = [
+  y("income", "actual"),
+  y("cogs", "actual"),
+  y("expenses", "actual"),
+  y("net_burn_or_income", "actual")
+], Ao = [
+  y("income", "actual"),
+  y("cogs", "actual"),
+  y("expenses", "actual"),
+  y("net_burn_or_income", "actual"),
+  y("income", "forecast"),
+  y("cogs", "forecast"),
+  y("expenses", "forecast"),
+  y("net_burn_or_income", "forecast")
+], Mo = x.div`
+  width: ${(t) => t.width}px;
+  height: ${(t) => t.height}px;
+
+  .recharts-legend-item {
+    margin-right: ${(t) => U.legendLabelMarginRight.valuePx(
+  t.windowSize
+)} !important;
+    :last-of-type {
+      margin-right: ${p.sp0} !important;
+    }
+  }
+`, No = x(xt)`
+  margin-left: ${(t) => U.legendLabelMarginLeft.valuePx(t.windowSize)};
+  color: ${(t) => t.theme.colors.primary};
+`;
+function Pe({
+  selectedRangeReport: t,
+  timeframe: e,
+  highlightedRange: n,
+  width: c,
+  height: r,
+  showBarHoverBackground: a,
+  isDetailPage: i,
+  mode: d,
+  onCOABalancesRangeChanged: l
+}) {
+  const s = P(), f = W(!1);
+  q(() => {
+    f.current = !0;
+  }, []);
+  const g = [
+    s.colors.graphColor36,
+    s.colors.graphColor06,
+    s.colors.graphColor31,
+    s.colors.graphColor12
+  ], h = [
+    s.colors.graphColor04,
+    s.colors.graphColor10,
+    s.colors.graphColor32,
+    s.colors.graphColor13,
+    s.colors.graphColor04Dark,
+    s.colors.graphColor10Dark,
+    s.colors.graphColor32Dark,
+    s.colors.graphColor13Dark
+  ], C = d === "forecast_mode" ? h : g, T = d === "forecast_mode" ? Ao : Eo, S = (u, j = s.colors.graphColor04) => u < C.length ? C[u] : j, $ = (t.reportId === "net_burn_or_income", wt(
+    t.firstMonthOfFY,
+    T,
+    d,
+    t.sections.income,
+    t.sections.cogs,
+    t.sections.expenses,
+    t.calculatedSections.netBurnOrIncome
+  )), _ = (u) => {
+    const { cx: j, cy: B, fill: O, stroke: I, value: z } = u;
+    return z == null ? /* @__PURE__ */ o.jsx(o.Fragment, {}) : /* @__PURE__ */ o.jsx(
+      "circle",
+      {
+        cx: j,
+        cy: B,
+        r: 4,
+        stroke: O,
+        strokeWidth: 2,
+        fill: I
+      }
+    );
+  }, k = (u) => {
+    const { cx: j, cy: B, fill: O, stroke: I, value: z } = u;
+    return z == null ? /* @__PURE__ */ o.jsx(o.Fragment, {}) : /* @__PURE__ */ o.jsx(
+      "circle",
+      {
+        cx: j,
+        cy: B,
+        r: 5,
+        stroke: I,
+        strokeWidth: 2,
+        fill: O
+      }
+    );
+  }, b = (u, j) => /* @__PURE__ */ o.jsx(
+    pt,
+    {
+      name: u,
+      type: "monotone",
+      legendType: "plainline",
+      isAnimationActive: !1,
+      dataKey: (B) => {
+        const O = B.record;
+        return (O[u] != null && O[u].amount != null ? O[u].amount : void 0)?.amount;
+      },
+      dot: /* @__PURE__ */ o.jsx(_, {}),
+      strokeWidth: 1.5,
+      stroke: S(j),
+      strokeDasharray: "3 3",
+      activeDot: /* @__PURE__ */ o.jsx(k, {})
+    },
+    u
+  ), v = (u, j, B) => /* @__PURE__ */ o.jsx(
+    V,
+    {
+      name: u,
+      animationDuration: B ? 500 : void 0,
+      style: { cursor: "pointer" },
+      legendType: "square",
+      dataKey: (O) => {
+        const I = O.record;
+        return (I[u] != null && I[u].amount != null ? I[u].amount : void 0)?.amount ?? 0;
+      },
+      fill: S(j)
+    },
+    u
+  ), K = () => {
+    const u = [];
+    return T.forEach((j, B) => {
+      const O = i === !0 && !f.current;
+      j.endsWith("_forecast") ? u.push(b(j, B)) : u.push(v(j, B, O));
+    }), u;
+  };
+  return $ == null ? null : /* @__PURE__ */ o.jsx(
+    Go,
+    {
+      chartData: $,
+      timeframe: e,
+      showBarHoverBackground: a,
+      barElements: K(),
+      customToolTipContent: ({ active: u, payload: j }) => /* @__PURE__ */ o.jsx(zo, { active: u, payload: j, mode: d }),
+      width: c,
+      height: r,
+      onCOABalancesRangeChanged: l,
+      highlightedRange: n,
+      isDetailPage: i === !0
+    }
+  );
+}
+const Go = ({
+  chartData: t,
+  timeframe: e,
+  barElements: n,
+  customToolTipContent: c,
+  highlightedRange: r,
+  width: a,
+  height: i,
+  showBarHoverBackground: d,
+  isDetailPage: l,
+  onCOABalancesRangeChanged: s
+}) => {
+  const f = ft(), g = P(), h = st(t), C = t.timeseries, T = C.map(
+    (k) => k.label
+  ), S = d !== !1, $ = (k) => {
+    if (!l || k?.activePayload == null || k?.activePayload.length === 0)
+      return;
+    const b = k.activePayload[0];
+    if (b?.payload?.timeLabel?.label == null)
+      return;
+    const v = k.activeTooltipIndex, K = b.payload.timeLabel.label;
+    if (r == null)
+      return;
+    const u = lt(
+      K,
+      T,
+      r.numberOfPeriods
+    ), j = u[1] === void 0 ? T.length - 1 : T.indexOf(u[1]), B = {
+      ...r,
+      thisPeriod: {
+        startDate: C[j].startDate,
+        endDate: C[j].endDate
+      }
+    };
+    s?.(
+      C[v],
+      e,
+      B
+    );
+  }, _ = l ? (a - 60) / L.net_burn_or_income * (L.net_burn_or_income - t.recordByTimeseries.length) : 20;
+  return /* @__PURE__ */ o.jsx(Mo, { width: a, height: i, windowSize: f, children: /* @__PURE__ */ o.jsx(tt, { children: ({ height: k, width: b }) => /* @__PURE__ */ o.jsxs(
+    gt,
+    {
+      data: t.recordByTimeseries,
+      barCategoryGap: l ? void 0 : "12%",
+      maxBarSize: l ? A[10] : 22,
+      barGap: l ? void 0 : 2,
+      margin: {
+        top: 5,
+        right: _,
+        left: 0,
+        bottom: A[4]
+      },
+      height: k,
+      width: b,
+      style: { display: "flex", flex: "1 1 auto" },
+      onClick: $,
+      children: [
+        /* @__PURE__ */ o.jsx(
+          ot,
+          {
+            horizontal: !0,
+            vertical: !1,
+            strokeWidth: 0.5,
+            stroke: g.colors.grey3
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          et,
+          {
+            dataKey: (v) => v.timeLabel.label,
+            type: "category",
+            axisLine: {
+              stroke: g.colors.grey3,
+              strokeWidth: 0.5
+            },
+            tickLine: !1,
+            tick: {
+              color: g.colors.hero,
+              ...N.extraSmallRegular.cssObject
+            }
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          rt,
+          {
+            type: "number",
+            axisLine: !1,
+            tickLine: !1,
+            tick: {
+              color: g.colors.hero,
+              ...N.extraSmallRegular.cssObject
+            },
+            tickFormatter: (v) => ct("0,0.[00]a", v, h)
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          nt,
+          {
+            wrapperStyle: { zIndex: 2 },
+            cursor: S ? {
+              stroke: g.colors.background,
+              strokeWidth: (b - 60) / L.net_burn_or_income,
+              fill: g.colors.background
+            } : !1,
+            content: c,
+            allowEscapeViewBox: { x: !1, y: !0 }
+          }
+        ),
+        n,
+        l ? /* @__PURE__ */ o.jsx(
+          mt,
+          {
+            verticalAlign: "bottom",
+            wrapperStyle: {
+              width: "100%",
+              display: "flex",
+              justifyContent: "center",
+              left: "initial",
+              bottom: p.sp0
+            },
+            iconSize: A[3],
+            formatter: (v) => /* @__PURE__ */ o.jsx(No, { windowSize: f, children: v.endsWith("_forecast") === !0 ? w.getLocalizedStrings().chartCard.netBurnOrIncome[v] : w.getLocalizedStrings().chartCard.netBurnOrIncome[E(v)] })
+          }
+        ) : null
+      ]
+    }
+  ) }) });
+}, Po = x.div`
+  display: flex;
+`, Ho = x.div`
+  flex: display;
+  opacity: 0.85;
+  border-radius: ${p.sp1};
+  flex-direction: column;
+  padding: ${p.sp3};
+  background-color: ${(t) => t.theme.colors.black};
+`, Bt = x(F)`
+  color: ${(t) => t.color ?? m.neutralGrey2Light};
+  text-align: left;
+`, dt = x.div`
+  flex: 1;
+  text-align: right;
+`, Yo = x.div`
+  width: 162px;
+`, Pt = x.div`
+  margin: ${p.sp2} ${p.sp0} ${p.sp2} ${p.sp0};
+  width: 100%;
+  height: 1px;
+  background-color: ${m.neutralGrey3Dark};
+`, Xo = x(F)`
+  color: ${(t) => t.color ?? m.neutralGrey2Light};
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+`, Jo = x.div`
+  display: flex;
+  flex-direction: column;
+`, qo = x.div`
+  display: flex;
+  background-color: ${(t) => t.theme.colors.black};
+  opacity: 0.85;
+  border-radius: ${p.sp1} ${p.sp1} ${p.sp0} ${p.sp0};
+  color: ${(t) => t.theme.colors.grey1};
+  padding: ${p.sp3};
+`, Uo = x.div`
+  flex: display;
+  opacity: 0.85;
+  width: 500px;
+  border-radius: ${p.sp0} ${p.sp0} ${p.sp1} ${p.sp1};
+  flex-direction: column;
+  padding: ${p.sp3};
+  background-color: ${(t) => t.theme.colors.black};
+`, Qo = x(F)`
+  text-align: left;
+  width: 162px;
+`, Q = x(Y)`
+  text-align: right;
+  flex: 1;
+`, Zo = ({
+  active: t,
+  payload: e,
+  barName: n
+}) => {
+  const c = [];
+  if (e != null && t === !0) {
+    const r = e.filter(
+      (l) => l.name == n
+    )[0], a = r.payload, i = r.color, d = n != null && a.record[n] != null ? a.record[n].amount : void 0;
+    if (!n?.endsWith("_forecast")) {
+      let l;
+      if (n.includes("forecast") !== !0) {
+        l = a.record[n] != null ? Wo(n, a) : void 0;
+        const s = {
+          amount: 0,
+          currencyCode: "",
+          currencySymbol: ""
+        }, f = {
+          amount: 0,
+          currencyCode: "",
+          currencySymbol: ""
+        };
+        let g;
+        for (g in a.record) {
+          const $ = a.record[g].amount;
+          g.endsWith("_actual") ? (s.amount += a.record[g].amount?.amount ?? 0, s.currencyCode = $ != null ? $.currencyCode : s.currencyCode, s.currencySymbol = $ != null ? $.currencySymbol : s.currencySymbol) : g.endsWith("_forecast") && (f.amount += a.record[g].amount?.amount ?? 0, f.currencyCode = $ != null ? $.currencyCode : f.currencyCode, f.currencySymbol = $ != null ? $.currencySymbol : f.currencySymbol);
+        }
+        const h = Math.floor(
+          (s?.amount - f?.amount) * 100 / 100
+        ), C = {
+          ...s,
+          amount: h
+        }, T = f.amount !== 0 ? Math.floor(
+          (s.amount - f.amount) / f.amount * 100
+        ) / 100 : (
+          // Why this ? This is to limit decimal places to 2 digits. Otherwise, if passed with lot of decimal places, it becomes NaN during formatting..
+          0
+        ), S = {
+          value: f,
+          change: C,
+          percent: T
+        };
+        c.push({
+          barName: E(n),
+          actual: d,
+          forecast: l,
+          color: i
+        }), c.push({
+          barName: w.getLocalizedStrings().chartCard.total,
+          actual: s,
+          forecast: S,
+          color: m.neutralGrey1Light
+        });
+      }
+    }
+  }
+  return c;
+}, Wo = (t, e) => {
+  const n = y(E(t), "forecast");
+  if (e.record[n] == null)
+    return;
+  const c = e.record[t].amount, r = e.record[n].amount, a = {
+    ...c,
+    amount: r != null ? Math.floor(
+      (c.amount - r.amount) * 100 / 100
+    ) : c.amount
+  }, i = r != null && r.amount !== 0 ? Math.floor(
+    (c.amount - r.amount) / r.amount * 100
+  ) / 100 : (
+    // Why this ? This is to limit decimal places to 2 digits. Otherwise, if passed with lot of decimal places, it becomes NaN during formatting..
+    void 0
+  );
+  return {
+    value: r,
+    change: a,
+    percent: i
+  };
+}, Ot = (t) => /* @__PURE__ */ o.jsxs(Xo, { color: t.color, children: [
+  /* @__PURE__ */ o.jsx(Qo, { children: `${t.barName}:` }),
+  /* @__PURE__ */ o.jsx(Q, { children: t.actual != null ? `${D(t.actual)}` : "-" }),
+  /* @__PURE__ */ o.jsx(Q, { children: t.forecast != null ? `${D(t.forecast.value)}` : "-" }),
+  t.forecast != null ? /* @__PURE__ */ o.jsx(Q, { isChange: !0, children: `${D(t.forecast.change)}` }) : /* @__PURE__ */ o.jsx(Q, { children: "-" }),
+  t.forecast != null ? /* @__PURE__ */ o.jsx(Q, { isChange: !0, children: H("0,0.0%", t.forecast.percent) }) : /* @__PURE__ */ o.jsx(Q, { children: "-" })
+] }), Ro = (t) => {
+  if (t.length > 0) {
+    for (const e of t)
+      if (e.actual != null)
+        return e.actual.currencySymbol;
+  }
+  return "";
+}, Vo = ({
+  barLabelsWithValues: t
+}) => /* @__PURE__ */ o.jsx(Po, { children: /* @__PURE__ */ o.jsxs(Ho, { children: [
+  /* @__PURE__ */ o.jsx(Bt, { color: t[0].color, children: `${t[0].barName}: ${D(t[0].actual)}` }),
+  /* @__PURE__ */ o.jsx(Pt, {}),
+  /* @__PURE__ */ o.jsx(Bt, { children: `${w.getLocalizedStrings().chartCard.total}: ${D(t[1].actual)}` })
+] }) }), te = ({
+  barLabelsWithValues: t
+}) => /* @__PURE__ */ o.jsxs(Jo, { children: [
+  /* @__PURE__ */ o.jsxs(qo, { children: [
+    /* @__PURE__ */ o.jsx(Yo, {}),
+    /* @__PURE__ */ o.jsx(dt, { children: w.getLocalizedStrings().chartCard.tooltip.actual }),
+    /* @__PURE__ */ o.jsx(dt, { children: w.getLocalizedStrings().chartCard.tooltip.forecast }),
+    /* @__PURE__ */ o.jsxs(dt, { children: [
+      w.getLocalizedStrings().chartCard.tooltip.change,
+      " ",
+      Ro(t)
+    ] }),
+    /* @__PURE__ */ o.jsx(dt, { children: w.getLocalizedStrings().chartCard.tooltip.change_percent })
+  ] }),
+  /* @__PURE__ */ o.jsxs(Uo, { children: [
+    Ot(t[0]),
+    /* @__PURE__ */ o.jsx(Pt, {}),
+    Ot(t[1])
+  ] })
+] }), oe = (t) => {
+  const e = Zo({ ...t });
+  return e.length === 0 ? null : /* @__PURE__ */ o.jsx(o.Fragment, { children: t.mode === "forecast_mode" ? /* @__PURE__ */ o.jsx(te, { barLabelsWithValues: e }) : /* @__PURE__ */ o.jsx(Vo, { barLabelsWithValues: e }) });
+}, ee = at.memo(oe), re = (t, e) => {
+  const n = [], c = {};
+  let r;
+  return e != null && e.classes.length != 0 && e.classes.forEach((a) => {
+    const i = M(
+      a.class.className,
+      "actual",
+      a.childrenBalancesTotal
+    ), d = y(
+      a.class.className,
+      "actual"
+    );
+    c[d] = i, n.push(d), r == null && i.length > 0 && (r = y(
+      a.class.className,
+      "actual"
+    ));
+  }), r != null ? R(
+    t,
+    n,
+    r,
+    c
+  ) : void 0;
+}, Kt = [
+  m.graphColor34,
+  m.graphColor05,
+  m.graphColor08,
+  m.graphColor11,
+  m.graphColor13,
+  m.graphColor19,
+  m.graphColor29,
+  m.graphColor28,
+  m.graphColor20,
+  m.graphColor21,
+  m.graphColor22,
+  m.graphColor14,
+  m.graphColor35,
+  m.graphColor31,
+  m.graphColor33,
+  m.graphColor32,
+  m.graphColor36,
+  m.graphColor02,
+  m.graphColor06,
+  m.graphColor04,
+  m.graphColor10,
+  m.graphColor12,
+  m.graphColor15,
+  m.graphColor18,
+  m.graphColor17,
+  m.graphColor07,
+  m.graphColor34Dark,
+  m.graphColor05Dark,
+  m.graphColor08Dark,
+  m.graphColor11Dark,
+  m.graphColor13Dark,
+  m.graphColor19Dark,
+  m.graphColor29Dark,
+  m.graphColor28Dark,
+  m.graphColor20Dark,
+  m.graphColor21Dark,
+  m.graphColor22Dark,
+  m.graphColor14Dark,
+  m.graphColor35Dark,
+  m.graphColor31Dark,
+  m.graphColor33Dark,
+  m.graphColor32Dark,
+  m.graphColor36Dark,
+  m.graphColor02Dark,
+  m.graphColor06Dark,
+  m.graphColor04Dark,
+  m.graphColor10Dark,
+  m.graphColor12Dark,
+  m.graphColor15Dark,
+  m.graphColor18Dark,
+  m.graphColor17Dark,
+  m.graphColor07Dark
+];
+class J {
+  _barColors;
+  _barColorsKeyWise;
+  _defaultColor;
+  constructor() {
+    this._defaultColor = m.graphColor34, this._barColors = Kt.slice(), this._barColorsKeyWise = /* @__PURE__ */ new Map();
+  }
+  static #t = new J();
+  getBarColor(e) {
+    const n = J.instance();
+    return n._barColorsKeyWise.has(e) || (n._barColors.length === 0 && (n._barColors = Kt.slice()), n._barColorsKeyWise.set(
+      e,
+      n._barColors.shift() ?? n._defaultColor
+    )), n._barColorsKeyWise.get(e);
+  }
+  shouldUpdate(e) {
+    const n = J.instance(), c = Array.from(
+      n._barColorsKeyWise.keys()
+    ).sort();
+    return !Jt(c, e);
+  }
+  static init() {
+    return this.#t = new J(), this.#t;
+  }
+  static instance() {
+    return this.#t;
+  }
+}
+const ne = J.instance(), ae = (t, e, n) => {
+  const c = [], r = {};
+  let a, i = !1;
+  if (n != null && n.accountGroups.length != 0 ? n.accountGroups.forEach((d) => {
+    const l = M(
+      d.accountGroupName,
+      "actual",
+      d
+    ), s = y(
+      d.accountGroupName,
+      "actual"
+    );
+    r[s] = l, c.push(s), a == null && l.length > 0 && (a = y(
+      d.accountGroupName,
+      "actual"
+    ));
+  }) : n != null && n.accounts.length != 0 && (i = !0, n.accounts.forEach((d) => {
+    const l = M(
+      d.account.accountName,
+      "actual",
+      d.account.balancesInTimeframe
+    ), s = y(
+      d.account.accountName,
+      "actual"
+    );
+    r[s] = l, c.push(s), a == null && l.length > 0 && (a = y(
+      d.account.accountName,
+      "actual"
+    ));
+  })), n != null && n.accountGroups.length === 0 && n.accounts.length === 0) {
+    const d = w.getLocalizedStrings().chartCard.total, l = M(
+      d,
+      "actual",
+      n
+    );
+    if (l.length !== 0) {
+      const s = y(d, "actual");
+      r[s] = l, a = s, c.push(s);
+    }
+  }
+  return e === "forecast_mode" && Object.assign(
+    r,
+    ce(c, n)
+  ), a != null ? R(
+    t,
+    c,
+    a,
+    r,
+    i
+  ) : void 0;
+}, ce = (t, e) => {
+  const n = {};
+  let c;
+  if (e != null && e.accountGroups.length != 0 ? e.accountGroups.forEach((r) => {
+    const a = M(
+      r.accountGroupName,
+      "forecast",
+      r
+    ), i = y(
+      r.accountGroupName,
+      "forecast"
+    );
+    n[i] = a, t.push(i), c == null && a.length > 0 && (c = y(
+      r.accountGroupName,
+      "forecast"
+    ));
+  }) : e != null && e.accounts.length != 0 && e.accounts.forEach((r) => {
+    const a = M(
+      r.account.accountName,
+      "forecast",
+      r.account.balancesInTimeframe
+    ), i = y(
+      r.account.accountName,
+      "forecast"
+    );
+    n[i] = a, t.push(i), c == null && a.length > 0 && (c = y(
+      r.account.accountName,
+      "forecast"
+    ));
+  }), e != null && e.accountGroups.length === 0 && e.accounts.length === 0) {
+    const r = w.getLocalizedStrings().chartCard.total, a = M(
+      r,
+      "forecast",
+      e
+    );
+    if (a.length !== 0) {
+      const i = y(r, "forecast");
+      n[i] = a, c = i, t.push(i);
+    }
+  }
+  return n;
+}, se = x.div`
+  width: ${(t) => t.width}px;
+  height: ${(t) => t.height}px;
+`, le = (t) => {
+  const { cx: e, cy: n, fill: c, stroke: r, value: a } = t;
+  return a == null ? /* @__PURE__ */ o.jsx(o.Fragment, {}) : /* @__PURE__ */ o.jsx("circle", { cx: e, cy: n, r: 4, stroke: c, strokeWidth: 2, fill: r });
+}, ie = (t) => {
+  const { cx: e, cy: n, fill: c, stroke: r, value: a } = t;
+  return a == null ? /* @__PURE__ */ o.jsx(o.Fragment, {}) : /* @__PURE__ */ o.jsx("circle", { cx: e, cy: n, r: 5, stroke: r, strokeWidth: 2, fill: c });
+};
+function He({
+  selectedRangeReport: t,
+  timeframe: e,
+  highlightedRange: n,
+  width: c,
+  height: r,
+  showBarHoverBackground: a,
+  isDetailPage: i,
+  mode: d,
+  onCOABalancesRangeChanged: l
+}) {
+  const s = W(!1), [f, g] = yt(ne), [h, C] = yt(
+    void 0
+  ), T = P(), S = W([]);
+  q(() => {
+    s.current = !0;
+  }, []), q(() => {
+    f.shouldUpdate(S.current) === !0 && g(J.init());
+  }, []), q(() => {
+    let b = [];
+    if (t.reportId === "operating_expenses") {
+      const v = t.sections.expenses;
+      v.accountGroups.length === 0 && v.accounts.length === 0 ? b.push(w.getLocalizedStrings().chartCard.total) : v.accountGroups.length != 0 ? b = v.accountGroups.map((K) => K.accountGroupName).sort() : b = v.accounts.map((K) => K.account).map((K) => K.accountName).sort();
+    } else
+      b = t.sections.expenses.classes.map((v) => v.class.className).sort();
+    S.current = b;
+  }, [t, f]);
+  const $ = qt(() => t.reportId === "operating_expenses" ? ae(
+    t.firstMonthOfFY,
+    d,
+    t.sections.expenses
+  ) : re(
+    t.firstMonthOfFY,
+    t.sections.expenses
+  ), [t, d]), _ = Ut(() => {
+    const b = (u) => /* @__PURE__ */ o.jsx(
+      pt,
+      {
+        name: u,
+        type: "monotone",
+        legendType: "plainline",
+        isAnimationActive: !1,
+        dot: /* @__PURE__ */ o.jsx(le, {}),
+        activeDot: /* @__PURE__ */ o.jsx(ie, {}),
+        dataKey: (j) => {
+          const B = j.record;
+          let O, I;
+          for (I in B)
+            if (I.endsWith("_forecast")) {
+              const z = B[I].amount;
+              z != null && (O == null ? O = {
+                ...z
+              } : O.amount += z.amount);
+            }
+          return O?.amount;
+        },
+        stroke: T.colors.grey1,
+        strokeDasharray: "3 3",
+        strokeWidth: 1.5
+      },
+      u
+    ), v = (u, j) => /* @__PURE__ */ o.jsx(
+      V,
+      {
+        name: u,
+        animationDuration: j ? 500 : void 0,
+        style: { cursor: "pointer" },
+        dataKey: (B) => {
+          const O = B.record;
+          return (O[u] != null && O[u].amount != null ? O[u].amount : void 0)?.amount ?? 0;
+        },
+        stackId: "a",
+        fill: f.getBarColor(E(u)),
+        onMouseEnter: () => {
+          h !== u && C(u);
+        },
+        onMouseLeave: () => {
+          h != null && C(void 0);
+        }
+      },
+      u
+    ), K = [];
+    return $?.orderedKeys.forEach((u) => {
+      const j = !s.current;
+      u.endsWith("_forecast") ? K.push(b(u)) : K.push(v(u, j));
+    }), K;
+  }, [$]), k = ({
+    active: b,
+    payload: v
+  }) => v?.find(
+    (u) => u.name === h
+  ) != null && h != null && b === !0 ? /* @__PURE__ */ o.jsx(
+    ee,
+    {
+      active: b,
+      payload: v,
+      mode: d,
+      barName: h
+    }
+  ) : null;
+  return $ == null ? null : /* @__PURE__ */ o.jsx(
+    ue,
+    {
+      chartData: $,
+      timeframe: e,
+      showBarHoverBackground: a,
+      barElements: _(),
+      customToolTipContent: /* @__PURE__ */ o.jsx(k, {}),
+      width: c,
+      height: r,
+      onCOABalancesRangeChanged: l,
+      highlightedRange: n,
+      isDetailPage: i === !0
+    }
+  );
+}
+const ue = ({
+  chartData: t,
+  timeframe: e,
+  barElements: n,
+  customToolTipContent: c,
+  highlightedRange: r,
+  width: a,
+  height: i,
+  showBarHoverBackground: d,
+  isDetailPage: l,
+  onCOABalancesRangeChanged: s
+}) => {
+  const f = P(), g = st(t), h = t.timeseries, C = h.map(
+    (_) => _.label
+  ), T = d !== !1, S = (_) => {
+    if (!l || _?.activePayload == null || _?.activePayload.length === 0)
+      return;
+    const k = _.activePayload[0];
+    if (k?.payload?.timeLabel?.label == null)
+      return;
+    const b = _.activeTooltipIndex, v = k.payload.timeLabel.label;
+    if (r == null)
+      return;
+    const K = lt(
+      v,
+      C,
+      r.numberOfPeriods
+    ), u = K[1] === void 0 ? C.length - 1 : C.indexOf(K[1]), j = {
+      ...r,
+      thisPeriod: {
+        startDate: h[u].startDate,
+        endDate: h[u].endDate
+      }
+    };
+    s?.(
+      h[b],
+      e,
+      j
+    );
+  }, $ = l ? (a - 60) / L.operating_expenses * (L.operating_expenses - t.recordByTimeseries.length) : 20;
+  return /* @__PURE__ */ o.jsx(se, { width: a, height: i, children: /* @__PURE__ */ o.jsx(tt, { children: ({ height: _, width: k }) => /* @__PURE__ */ o.jsxs(
+    gt,
+    {
+      width: k,
+      height: _,
+      stackOffset: "sign",
+      data: t.recordByTimeseries,
+      barCategoryGap: "25%",
+      maxBarSize: l ? A[10] : 30,
+      margin: {
+        top: 5,
+        right: $,
+        left: 0,
+        bottom: 5
+      },
+      style: { display: "flex", flex: "1 1 auto" },
+      onClick: S,
+      children: [
+        /* @__PURE__ */ o.jsx(
+          ot,
+          {
+            horizontal: !0,
+            vertical: !1,
+            strokeWidth: 0.5,
+            stroke: f.colors.grey3
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          et,
+          {
+            dataKey: (b) => b.timeLabel.label,
+            type: "category",
+            axisLine: { stroke: f.colors.grey3, strokeWidth: 0.5 },
+            tickLine: !1,
+            tick: {
+              color: f.colors.hero,
+              ...N.extraSmallRegular.cssObject
+            }
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          rt,
+          {
+            type: "number",
+            axisLine: !1,
+            tickLine: !1,
+            tick: {
+              color: f.colors.hero,
+              ...N.extraSmallRegular.cssObject
+            },
+            tickFormatter: (b) => ct("0,0.[00]a", b, g)
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          nt,
+          {
+            wrapperStyle: { zIndex: 2 },
+            cursor: T ? {
+              stroke: f.colors.background,
+              strokeWidth: (k - 60) / L.operating_expenses,
+              fill: f.colors.background
+            } : !1,
+            content: c,
+            allowEscapeViewBox: { x: !1, y: !0 }
+          }
+        ),
+        n
+      ]
+    }
+  ) }) });
+}, de = x.div`
+  display: flex;
+`, he = x.div`
+  display: flex;
+  flex-direction: column;
+`, me = x.div`
+  display: flex;
+  background-color: ${(t) => t.theme.colors.black};
+  opacity: 0.85;
+  border-radius: ${p.sp1} ${p.sp1} ${p.sp0} ${p.sp0};
+  color: ${(t) => t.theme.colors.grey1};
+  padding: ${p.sp3};
+`, ht = x.div`
+  flex: 1;
+  text-align: right;
+`, ge = x.div`
+  width: 132px;
+`, pe = x.div`
+  flex: display;
+  opacity: 0.85;
+  width: 500px;
+  border-radius: ${p.sp0} ${p.sp0} ${p.sp1} ${p.sp1};
+  flex-direction: column;
+  padding: ${p.sp3};
+  background-color: ${(t) => t.theme.colors.black};
+`, fe = x(F)`
+  text-align: left;
+  width: 120px;
+`, Ht = x.div`
+  margin: ${p.sp2} ${p.sp0} ${p.sp2} ${p.sp0};
+  width: 100%;
+  height: 1px;
+  background-color: ${m.neutralGrey3Dark};
+`, xe = x.div`
+  flex: display;
+  opacity: 0.85;
+  width: 210px;
+  border-radius: ${p.sp1};
+  flex-direction: column;
+  padding: ${p.sp3};
+  background-color: ${(t) => t.theme.colors.black};
+`, Yt = x(F)`
+  color: ${(t) => t.color ?? m.neutralGrey2Light};
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+  ${(t) => t.showPercent ? "flex-start" : "center"};
+`, Xt = x(F)`
+  background-color: ${(t) => t.color};
+  height: 12px;
+  width: 12px;
+  display: inline-block;
+  margin-right: ${p.sp2};
+`, ye = x(F)`
+  text-align: left;
+`, Ce = x.div`
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+`, It = x(Y)`
+  text-align: right;
+`, Z = x(Y)`
+  text-align: right;
+  flex: 1;
+  color: ${(t) => t.isChange != null && t.isChange === !0 ? m.important : null};
+`, Ft = x(Y)`
+  display: flex;
+  flex-direction: column;
+`, Dt = x(Y)``, $e = (t, e) => {
+  const n = y(E(t), "forecast");
+  if (e.record[n] == null)
+    return;
+  const c = e.record[t].amount, r = e.record[n].amount, a = {
+    ...c,
+    amount: Math.floor(
+      (c.amount - r.amount) * 100 / 100
+      // Why this ? This is to limit decimal places to 2 digits. Otherwise, if passed with lot of decimal places, it becomes NaN during formatting..
+    )
+  }, i = r.amount !== 0 ? Math.floor(
+    (c.amount - r.amount) / r.amount * 100
+  ) / 100 : (
+    // Why this ? This is to limit decimal places to 2 digits. Otherwise, if passed with lot of decimal places, it becomes NaN during formatting..
+    void 0
+  );
+  return {
+    value: r,
+    change: a,
+    percent: i,
+    forecastPercent: e.record[n].percentValue
+  };
+}, je = ({
+  active: t,
+  payload: e,
+  mode: n
+}) => {
+  const c = [];
+  let r = {
+    amount: 0,
+    currencyCode: ""
+  }, a = {
+    amount: 0,
+    currencyCode: ""
+  };
+  const i = y("gross_margin", "actual");
+  return e?.forEach((d) => {
+    const l = d.name;
+    if (t === !0) {
+      const s = d.payload, f = d.color, g = l != null && s.record[l] != null ? s.record[l].amount : void 0;
+      let h;
+      if (l.includes("forecast") !== !0)
+        switch (n === "forecast_mode" && (h = s.record[l] != null ? $e(l, s) : void 0), l) {
+          case i:
+            g != null && (r.currencyCode === "" ? r = { ...g } : r.amount = r.amount + g.amount), h != null && (a.currencyCode === "" ? a = { ...h.value } : a.amount = a.amount + h.value.amount), c.push({
+              barName: w.getLocalizedStrings().chartCard.revenue[E(l)],
+              actual: g,
+              forecast: h,
+              percent: s.record[l] != null ? s.record[l].percentValue ?? 0 : 0,
+              color: f
+            });
+            break;
+          default:
+            c.push({
+              barName: w.getLocalizedStrings().chartCard.revenue[E(l)],
+              actual: g,
+              color: f,
+              forecast: h
+            });
+            break;
+        }
+    }
+  }), c;
+}, zt = (t) => t.map((e, n) => /* @__PURE__ */ o.jsxs(
+  Yt,
+  {
+    color: e.color,
+    showPercent: e.percent != null,
+    children: [
+      /* @__PURE__ */ o.jsxs(ye, { children: [
+        /* @__PURE__ */ o.jsx(Xt, { color: e.color }),
+        `${e.barName}:`
+      ] }),
+      /* @__PURE__ */ o.jsxs(Ce, { children: [
+        /* @__PURE__ */ o.jsx(It, { children: `${D(e.actual)}` }),
+        e.percent != null ? /* @__PURE__ */ o.jsx(It, { children: H("0,0.0%", e.percent) }) : null
+      ] })
+    ]
+  },
+  e.barName + n
+)), Lt = (t) => t.map((e, n) => /* @__PURE__ */ o.jsxs(
+  Yt,
+  {
+    color: e.color,
+    showPercent: e.percent != null,
+    children: [
+      /* @__PURE__ */ o.jsxs(fe, { children: [
+        /* @__PURE__ */ o.jsx(Xt, { color: e.color }),
+        `${e.barName}:`
+      ] }),
+      /* @__PURE__ */ o.jsx(Z, { children: /* @__PURE__ */ o.jsxs(Ft, { children: [
+        e.actual != null ? `${D(e.actual)}` : "-",
+        /* @__PURE__ */ o.jsx(Dt, { children: e.percent != null ? H("0,0.0%", e.percent) : null })
+      ] }) }),
+      /* @__PURE__ */ o.jsx(Z, { children: /* @__PURE__ */ o.jsxs(Ft, { children: [
+        e.forecast != null ? `${D(e.forecast.value)}` : "-",
+        /* @__PURE__ */ o.jsx(Dt, { children: e.forecast != null && e.forecast.forecastPercent != null ? H(
+          "0,0.0%",
+          e.forecast.forecastPercent
+        ) : null })
+      ] }) }),
+      e.forecast != null ? /* @__PURE__ */ o.jsx(Z, { isChange: !0, children: `${D(e.forecast.change)}` }) : /* @__PURE__ */ o.jsx(Z, { children: "-" }),
+      e.forecast != null ? /* @__PURE__ */ o.jsx(Z, { isChange: !0, children: H(
+        "0,0.0%",
+        e.forecast.percent
+      ) }) : /* @__PURE__ */ o.jsx(Z, { children: "-" })
+    ]
+  },
+  e.barName + n
+)), ve = (t) => {
+  if (t.length > 0) {
+    for (const e of t)
+      if (e.actual != null)
+        return e.actual.currencySymbol;
+  }
+  return "";
+}, be = ({
+  barLabelsWithValues: t
+}) => /* @__PURE__ */ o.jsxs(he, { children: [
+  /* @__PURE__ */ o.jsxs(me, { children: [
+    /* @__PURE__ */ o.jsx(ge, {}),
+    /* @__PURE__ */ o.jsx(ht, { children: w.getLocalizedStrings().chartCard.tooltip.actual }),
+    /* @__PURE__ */ o.jsx(ht, { children: w.getLocalizedStrings().chartCard.tooltip.forecast }),
+    /* @__PURE__ */ o.jsxs(ht, { children: [
+      w.getLocalizedStrings().chartCard.tooltip.change,
+      " ",
+      ve(t)
+    ] }),
+    /* @__PURE__ */ o.jsx(ht, { children: w.getLocalizedStrings().chartCard.tooltip.change_percent })
+  ] }),
+  /* @__PURE__ */ o.jsxs(pe, { children: [
+    Lt(
+      t.slice(0, t.length - 1)
+    ),
+    t.length ? /* @__PURE__ */ o.jsx(Ht, {}) : null,
+    Lt(t.slice(-1))
+  ] })
+] }), ke = ({
+  barLabelsWithValues: t
+}) => /* @__PURE__ */ o.jsx(de, { children: /* @__PURE__ */ o.jsxs(xe, { children: [
+  zt(
+    t.slice(0, t.length - 1)
+  ),
+  t.length ? /* @__PURE__ */ o.jsx(Ht, {}) : null,
+  zt(t.slice(-1))
+] }) }), Se = (t) => {
+  const e = je({ ...t });
+  return e.length === 0 ? null : /* @__PURE__ */ o.jsx(o.Fragment, { children: t.mode === "forecast_mode" ? /* @__PURE__ */ o.jsx(be, { barLabelsWithValues: e }) : /* @__PURE__ */ o.jsx(ke, { barLabelsWithValues: e }) });
+}, Te = at.memo(Se), Et = (t, e, n, c, r, a) => {
+  let i = [], d = [], l = [];
+  c != null && c.balances.length > 0 && (i = G("income", "actual", c)), r != null && r.balances.length > 0 && (d = G("cogs", "actual", r)), a != null && a.balances.length > 0 && (l = it(
+    "gross_margin",
+    "actual",
+    a
+  ));
+  const s = y("income", "actual"), f = y("cogs", "actual"), g = y("gross_margin", "actual"), h = i.length > 0 ? s : d.length > 0 ? f : g, C = {};
+  return C[s] = i, C[f] = d, C[g] = l, n === "forecast_mode" && Object.assign(
+    C,
+    _e(c, r, a)
+  ), h != null ? R(
+    t,
+    e,
+    h,
+    C
+  ) : void 0;
+}, _e = (t, e, n) => {
+  let c = [], r = [], a = [];
+  t != null && t.balances.length > 0 && (c = G("income", "forecast", t)), e != null && e.balances.length > 0 && (r = G("cogs", "forecast", e)), n != null && n.balances.length > 0 && (a = it(
+    "gross_margin",
+    "forecast",
+    n
+  ));
+  const i = y("income", "forecast"), d = y("cogs", "forecast"), l = y("gross_margin", "forecast"), s = {};
+  return s[i] = c, s[d] = r, s[l] = a, s;
+}, we = [
+  y("income", "actual"),
+  y("cogs", "actual"),
+  y("gross_margin", "actual")
+], Be = [
+  y("income", "actual"),
+  y("cogs", "actual"),
+  y("gross_margin", "actual"),
+  y("income", "forecast"),
+  y("cogs", "forecast"),
+  y("gross_margin", "forecast")
+], Oe = x.div`
+  width: ${(t) => t.width}px;
+  height: ${(t) => t.height}px;
+
+  .recharts-legend-item {
+    margin-right: ${(t) => U.legendLabelMarginRight.valuePx(
+  t.windowSize
+)} !important;
+    :last-of-type {
+      margin-right: ${p.sp0} !important;
+    }
+  }
+`, Ke = x(xt)`
+  margin-left: ${(t) => U.legendLabelMarginLeft.valuePx(t.windowSize)};
+  margin-right: ${(t) => U.legendLabelMarginRight.valuePx(t.windowSize)};
+  color: ${(t) => t.theme.colors.primary};
+`;
+function Ye({
+  selectedRangeReport: t,
+  timeframe: e,
+  highlightedRange: n,
+  width: c,
+  height: r,
+  showBarHoverBackground: a,
+  isDetailPage: i,
+  mode: d,
+  onCOABalancesRangeChanged: l
+}) {
+  const s = P(), f = W(!1);
+  q(() => {
+    f.current = !0;
+  }, []);
+  const g = [
+    s.colors.graphColor26,
+    s.colors.graphColor17,
+    s.colors.graphColor12
+  ], h = [
+    s.colors.graphColor28,
+    s.colors.graphColor17,
+    s.colors.graphColor10,
+    s.colors.graphColor28Dark,
+    s.colors.graphColor17Dark,
+    s.colors.graphColor10Dark
+  ], C = d === "forecast_mode" ? h : g, T = d === "forecast_mode" ? Be : we, S = (u, j = s.colors.graphColor28) => u < C.length ? C[u] : j, $ = t.reportId === "revenue" ? Et(
+    t.firstMonthOfFY,
+    T,
+    d,
+    t.sections?.income,
+    t.sections?.cogs,
+    t.calculatedSections?.grossMargin
+  ) : Et(
+    t.firstMonthOfFY,
+    T,
+    d,
+    t.sections.income,
+    t.sections.cogs,
+    t.calculatedSections.grossMargin
+  ), _ = (u) => {
+    const { cx: j, cy: B, fill: O, stroke: I, value: z } = u;
+    return z == null ? /* @__PURE__ */ o.jsx(o.Fragment, {}) : /* @__PURE__ */ o.jsx(
+      "circle",
+      {
+        cx: j,
+        cy: B,
+        r: 4,
+        stroke: O,
+        strokeWidth: 2,
+        fill: I
+      }
+    );
+  }, k = (u) => {
+    const { cx: j, cy: B, fill: O, stroke: I, value: z } = u;
+    return z == null ? /* @__PURE__ */ o.jsx(o.Fragment, {}) : /* @__PURE__ */ o.jsx(
+      "circle",
+      {
+        cx: j,
+        cy: B,
+        r: 5,
+        stroke: I,
+        strokeWidth: 2,
+        fill: O
+      }
+    );
+  }, b = (u, j) => /* @__PURE__ */ o.jsx(
+    pt,
+    {
+      name: u,
+      type: "monotone",
+      legendType: "plainline",
+      isAnimationActive: !1,
+      dot: /* @__PURE__ */ o.jsx(_, {}),
+      activeDot: /* @__PURE__ */ o.jsx(k, {}),
+      dataKey: (B) => {
+        const O = B.record;
+        return (O[u] != null && O[u].amount != null ? O[u].amount : void 0)?.amount;
+      },
+      stroke: S(j),
+      strokeDasharray: "3 3",
+      strokeWidth: 1.5
+    },
+    u
+  ), v = (u, j, B) => /* @__PURE__ */ o.jsx(
+    V,
+    {
+      name: u,
+      animationDuration: B ? 500 : void 0,
+      style: { cursor: "pointer" },
+      legendType: "square",
+      dataKey: (O) => {
+        const I = O.record;
+        return (I[u] != null && I[u].amount != null ? I[u].amount : void 0)?.amount ?? 0;
+      },
+      fill: S(j)
+    },
+    u
+  ), K = () => {
+    const u = [];
+    return T.forEach((j, B) => {
+      const O = i === !0 && !f.current;
+      j.endsWith("_forecast") ? u.push(b(j, B)) : u.push(v(j, B, O));
+    }), u;
+  };
+  return $ == null ? null : /* @__PURE__ */ o.jsx(
+    Ie,
+    {
+      chartData: $,
+      timeframe: e,
+      showBarHoverBackground: a,
+      barElements: K(),
+      customToolTipContent: ({ active: u, payload: j }) => /* @__PURE__ */ o.jsx(Te, { active: u, payload: j, mode: d }),
+      width: c,
+      height: r,
+      onCOABalancesRangeChanged: l,
+      highlightedRange: n,
+      isDetailPage: i === !0
+    }
+  );
+}
+const Ie = ({
+  chartData: t,
+  timeframe: e,
+  barElements: n,
+  customToolTipContent: c,
+  highlightedRange: r,
+  width: a,
+  height: i,
+  showBarHoverBackground: d,
+  isDetailPage: l,
+  onCOABalancesRangeChanged: s
+}) => {
+  const f = ft(), g = P(), h = st(t), C = t.timeseries, T = C.map(
+    (k) => k.label
+  ), S = d !== !1, $ = (k) => {
+    if (!l || k?.activePayload == null || k?.activePayload.length === 0)
+      return;
+    const b = k.activePayload[0];
+    if (b?.payload?.timeLabel?.label == null)
+      return;
+    const v = k.activeTooltipIndex, K = b.payload.timeLabel.label;
+    if (r == null)
+      return;
+    const u = lt(
+      K,
+      T,
+      r.numberOfPeriods
+    ), j = u[1] === void 0 ? T.length - 1 : T.indexOf(u[1]), B = {
+      ...r,
+      thisPeriod: {
+        startDate: C[j].startDate,
+        endDate: C[j].endDate
+      }
+    };
+    s?.(
+      C[v],
+      e,
+      B
+    );
+  }, _ = l ? (a - 60) / L.revenue * (L.revenue - t.recordByTimeseries.length) : 20;
+  return /* @__PURE__ */ o.jsx(Oe, { width: a, height: i, windowSize: f, children: /* @__PURE__ */ o.jsx(tt, { children: ({ height: k, width: b }) => /* @__PURE__ */ o.jsxs(
+    gt,
+    {
+      data: t.recordByTimeseries,
+      barCategoryGap: l ? void 0 : "12%",
+      maxBarSize: l ? A[10] : 22,
+      barGap: l ? void 0 : 2,
+      margin: {
+        top: 5,
+        right: _,
+        left: 0,
+        bottom: A[4]
+      },
+      height: k,
+      width: b,
+      style: { display: "flex", flex: "1 1 auto" },
+      onClick: $,
+      children: [
+        /* @__PURE__ */ o.jsx(
+          ot,
+          {
+            horizontal: !0,
+            vertical: !1,
+            strokeWidth: 0.5,
+            stroke: g.colors.grey3
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          et,
+          {
+            dataKey: (v) => v.timeLabel.label,
+            type: "category",
+            axisLine: {
+              stroke: g.colors.grey3,
+              strokeWidth: 0.5
+            },
+            tickLine: !1,
+            tick: {
+              color: g.colors.hero,
+              ...N.extraSmallRegular.cssObject
+            }
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          rt,
+          {
+            type: "number",
+            axisLine: !1,
+            tickLine: !1,
+            tick: {
+              color: g.colors.hero,
+              ...N.extraSmallRegular.cssObject
+            },
+            tickFormatter: (v) => ct("0,0.[00]a", v, h)
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          nt,
+          {
+            wrapperStyle: { zIndex: 2 },
+            cursor: S ? {
+              stroke: g.colors.background,
+              strokeWidth: (b - 60) / L.revenue,
+              fill: g.colors.background
+            } : !1,
+            content: c,
+            allowEscapeViewBox: { x: !1, y: !0 }
+          }
+        ),
+        n,
+        l ? /* @__PURE__ */ o.jsx(
+          mt,
+          {
+            verticalAlign: "bottom",
+            wrapperStyle: {
+              width: "100%",
+              display: "flex",
+              justifyContent: "center",
+              left: "initial",
+              bottom: p.sp0
+            },
+            iconSize: A[3],
+            formatter: (v) => /* @__PURE__ */ o.jsx(Ke, { windowSize: f, children: v.endsWith("_forecast") === !0 ? w.getLocalizedStrings().chartCard.revenue[v] : w.getLocalizedStrings().chartCard.revenue[E(v)] })
+          }
+        ) : null
+      ]
+    }
+  ) }) });
+};
+export {
+  Ne as C,
+  Pe as N,
+  He as O,
+  Ye as R,
+  Ge as a
+};