@zeniai/web-components 3.17.3 → 3.17.4

package/dist/RevenueChart-Bqkj8mCB.js

@@ -1,2240 +0,0 @@
-import { j as o, u as G, A as V, k as Jt } from "./vendor-.pnpm-B2klaOGU.js";
-import tt, { useRef as W, useEffect as q, useState as yt, useMemo as qt, useCallback as Ut } from "react";
-import x from "@emotion/styled";
-import { Bar as ot, BarChart as At, CartesianGrid as et, XAxis as rt, YAxis as nt, Tooltip as at, Legend as mt, ComposedChart as gt, Line as pt } from "recharts";
-import { R as Ct, D as A, a as w, S as p, C as m, o as F, u as ft, e as Qt, t as N, dM as ct, Q as xt, dP as H, n as Y } from "./index-BEMjPEfs.js";
-import { a as E, c as D, g as y, b as st, m as L, d as lt } from "./chartTypes-DBeopqxB.js";
-import { s as P, c as it, b as M } from "./toCOABalancesWithID-CPz9hZkW.js";
-import { t as R } from "./toChartData-CwCxfAbU.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 = tt.memo(no), co = (t, e, n, c, r) => {
-  let a = [], i = [], d = [];
-  n != null && n.balances.length > 0 && (a = P("cash_in", "actual", n)), c != null && c.balances.length > 0 && (i = P("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 Pe({
-  selectedRangeReport: t,
-  timeframe: e,
-  highlightedRange: n,
-  width: c,
-  height: r,
-  showBarHoverBackground: a,
-  isDetailPage: i,
-  onCOABalancesRangeChanged: d
-}) {
-  const l = G(), 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(
-          ot,
-          {
-            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 = G(), 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(V, { 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(
-              et,
-              {
-                horizontal: !0,
-                vertical: !1,
-                strokeWidth: 0.5,
-                stroke: g.colors.grey3
-              }
-            ),
-            /* @__PURE__ */ o.jsx(
-              rt,
-              {
-                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(
-              nt,
-              {
-                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(
-              at,
-              {
-                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 = tt.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 = G(), 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(
-          ot,
-          {
-            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 = G(), 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(V, { 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(
-          et,
-          {
-            horizontal: !0,
-            vertical: !1,
-            strokeWidth: 0.5,
-            stroke: f.colors.grey3
-          }
-        ),
-        /* @__PURE__ */ o.jsx(
-          rt,
-          {
-            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(
-          nt,
-          {
-            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(
-          at,
-          {
-            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"};
-`, Pt = 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(
-          Pt,
-          {
-            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(
-          Pt,
-          {
-            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 = tt.memo(Do), wt = (t, e, n, c, r, a, i) => {
-  let d = [], l = [], s = [], f = [];
-  c != null && c.balances.length > 0 && (d = P("income", "actual", c)), r != null && r.balances.length > 0 && (l = P("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 = P("income", "forecast", t)), e != null && e.balances.length > 0 && (a = P("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 He({
-  selectedRangeReport: t,
-  timeframe: e,
-  highlightedRange: n,
-  width: c,
-  height: r,
-  showBarHoverBackground: a,
-  isDetailPage: i,
-  mode: d,
-  onCOABalancesRangeChanged: l
-}) {
-  const s = G(), 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(
-    ot,
-    {
-      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(
-    Po,
-    {
-      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 Po = ({
-  chartData: t,
-  timeframe: e,
-  barElements: n,
-  customToolTipContent: c,
-  highlightedRange: r,
-  width: a,
-  height: i,
-  showBarHoverBackground: d,
-  isDetailPage: l,
-  onCOABalancesRangeChanged: s
-}) => {
-  const f = ft(), g = G(), 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(V, { 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(
-          et,
-          {
-            horizontal: !0,
-            vertical: !1,
-            strokeWidth: 0.5,
-            stroke: g.colors.grey3
-          }
-        ),
-        /* @__PURE__ */ o.jsx(
-          rt,
-          {
-            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(
-          nt,
-          {
-            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(
-          at,
-          {
-            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
-      ]
-    }
-  ) }) });
-}, Go = 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;
-`, Gt = 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(Go, { 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(Gt, {}),
-  /* @__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(Gt, {}),
-    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 = tt.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 Ye({
-  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 = G(), 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(
-      ot,
-      {
-        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 = G(), 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(V, { 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(
-          et,
-          {
-            horizontal: !0,
-            vertical: !1,
-            strokeWidth: 0.5,
-            stroke: f.colors.grey3
-          }
-        ),
-        /* @__PURE__ */ o.jsx(
-          rt,
-          {
-            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(
-          nt,
-          {
-            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(
-          at,
-          {
-            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 = tt.memo(Se), Et = (t, e, n, c, r, a) => {
-  let i = [], d = [], l = [];
-  c != null && c.balances.length > 0 && (i = P("income", "actual", c)), r != null && r.balances.length > 0 && (d = P("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 = P("income", "forecast", t)), e != null && e.balances.length > 0 && (r = P("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 Xe({
-  selectedRangeReport: t,
-  timeframe: e,
-  highlightedRange: n,
-  width: c,
-  height: r,
-  showBarHoverBackground: a,
-  isDetailPage: i,
-  mode: d,
-  onCOABalancesRangeChanged: l
-}) {
-  const s = G(), 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(
-    ot,
-    {
-      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 = G(), 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(V, { 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(
-          et,
-          {
-            horizontal: !0,
-            vertical: !1,
-            strokeWidth: 0.5,
-            stroke: g.colors.grey3
-          }
-        ),
-        /* @__PURE__ */ o.jsx(
-          rt,
-          {
-            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(
-          nt,
-          {
-            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(
-          at,
-          {
-            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 {
-  Pe as C,
-  He as N,
-  Ye as O,
-  Xe as R,
-  Ge as a
-};