@zeniai/web-components 3.16.99 → 3.17.2

package/dist/TopExCard-BmkZbjP8.cjs

@@ -0,0 +1,38 @@
+"use strict";const e=require("./vendor-.pnpm-D0ILHvHB.cjs"),j=require("react"),z=require("@zeniai/client-epic-state"),s=require("./index-gTpRqqAW.cjs"),g=require("@emotion/styled"),h=require("recharts"),R=require("./ReloadCard-b_X0-5ix.cjs"),S=require("./graphic-no-data-l-C-ZhJpjS.cjs"),w=g(s.CardContentBox)`
+  justify-content: space-between;
+  margin: 0;
+  height: ${t=>t.height!=null?t.height+"px":"auto"};
+  width: ${t=>t.width!=null?t.width+"px":"auto"};
+`,M=g.div``,_=g(s.SmallRegular)`
+  color: ${t=>t.theme.colors.hero};
+  margin: ${s.Space.sp2} ${s.Space.sp0} ${s.Space.sp2} ${s.Space.sp0};
+`,D=({width:t,height:i,label:o})=>{const c=e.useTheme();return e.jsxRuntimeExports.jsxs(w,{height:i,width:t,children:[e.jsxRuntimeExports.jsx(M,{}),c.mode==="light"?e.jsxRuntimeExports.jsx(S.SvgGraphicNoDataL,{style:{marginBottom:s.Space.sp4}}):e.jsxRuntimeExports.jsx(S.SvgGraphicNoDataD,{style:{marginBottom:s.Space.sp4}}),e.jsxRuntimeExports.jsx(_,{children:o})]})},q=g.div``;function K({allowedValues:t,timeframeSelected:i,onTimeframeChanged:o,textStyle:c}){const a=r=>s.appLocale.getLocalizedStrings().timeframe[r];return e.jsxRuntimeExports.jsx(q,{onClick:r=>r.stopPropagation(),children:e.jsxRuntimeExports.jsx(s.Picker$1,{pickerValues:t,valueToLabel:a,selectedValue:i,onPickerSelectionChanged:o,optionTextStyle:c})})}const G=g(s.SmallRegularSp)`
+  color: ${t=>t.theme.colors.champion};
+`,b=g.div`
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  align-items: center;
+`;function N({dimension:t,reportTitle:i,cardType:o,cardIndex:c,onCardClick:a,timeframe:r,allowedValues:m,chartElement:l,onTimeframeChange:x}){const u=m.length>0?" - ":"";return e.jsxRuntimeExports.jsx(s.Card,{"data-testid":s.generateDataTestId("dashboard",`${o}-timeframe-${r}`),style:{cursor:"pointer"},dimension:t,onClick:()=>a(c,o),children:e.jsxRuntimeExports.jsxs(s.CardContentBox,{children:[e.jsxRuntimeExports.jsxs(b,{style:{marginBottom:s.sp[3]},children:[e.jsxRuntimeExports.jsx(G,{children:i!=null?i+u:s.toCardTitle(o)+u})," ",m.length>0?e.jsxRuntimeExports.jsx(K,{timeframeSelected:r,onTimeframeChanged:n=>x?.(n??"month"),allowedValues:m}):null]}),e.jsxRuntimeExports.jsx(b,{style:{width:"100%",height:"100%",cursor:"pointer"},children:e.jsxRuntimeExports.jsx("div",{style:{width:"100%",height:"100%"},children:e.jsxRuntimeExports.jsx(e.AutoSizer,{children:({height:n,width:p})=>l(p,n)})})})]})})}function C({card:t,reportTitle:i,actions:o,timeframe:c,allowedValues:a,chartElement:r,onTimeframeChange:m}){return t.fetchState==="In-Progress"||t.fetchState==="Not-Started"?e.jsxRuntimeExports.jsx(R.ChartCardLoading,{dimension:t.dimension,animated:!t.disableAnimations}):t.fetchState==="Error"?e.jsxRuntimeExports.jsx(R.ReloadCard,{dimension:t.dimension,cardType:t.cardType,cardIndex:t.cardIndex,onReloadData:o.onReloadData,reportTitle:i}):e.jsxRuntimeExports.jsx(N,{dimension:t.dimension,reportTitle:i,cardType:t.cardType,cardIndex:t.cardIndex,onCardClick:o.onCardClick,timeframe:c,allowedValues:a??["month","quarter","year"],chartElement:r,onTimeframeChange:l=>{o.onTimeframeChange?.(t.cardType,l),m?.(t.cardType,l)}})}j.memo(C);const I=(t,i,o)=>{const c=i.map(n=>({label:n.timePeriod,startDate:n.startDate,endDate:n.endDate})),a=o.total,r=o.accountsOrdered.map(n=>({accountId:n.accountId,accountDescription:n.accountDescription,balance:n.balance,logo:n.logo}))??[],m=Math.min(t,r.length),l=r.length?t-r.length:0,x=a?.amount;if(r.length>0&&l>0&&x!=null&&x!==0){const n=r[m-1].balance,p=n?.available?.amount!=null?Math.min(30,n?.available?.amount/x*100):30;for(let d=0;d<l;d+=1){const f=p*(l-d)/(l+1);r.push({accountId:d.toString(),accountDescription:"",balance:{available:{amount:x*f/100,currencySymbol:n.available.currencySymbol,currencyCode:n.available.currencyCode}}})}}const u=r.map(n=>{const p="top_expenses",d={accountId:n.accountId,accountDescription:n.accountDescription,total:a??void 0,logo:n.logo??"",barKey:p};return d[p]=n.balance.available,d});return{timeframeLabelsInOrder:c,chartItems:u}},E=37,y=2,P=g.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  color: ${t=>t.theme.colors.hero};
+`,Y=g.div`
+  display: flex;
+  align-items: center;
+  flex: 4 1 0;
+`,V=g.img`
+  height: ${s.Space.sp4};
+`,X=g(s.SmallRegular)`
+  margin-left: ${s.Space.sp2};
+`,H=g(s.LargeMedium)`
+  flex: 1 1 0;
+  color: ${t=>t.theme.colors.primary};
+`,W=g(s.StandardRegular)`
+  flex: 1 1 0;
+  margin-right: ${s.Space.sp2};
+`;function J({report:t,width:i,height:o,showBarHoverBackground:c}){const a=e.useTheme(),r=I(t.topExpenses.accountsOrdered.length,t.allTimePeriods,t.topExpenses),m=(l,x)=>e.jsxRuntimeExports.jsx(h.Bar,{dataKey:u=>{const n=u[x]!=null?u[x]:void 0;return n!=null&&n.amount>0?n.amount:0},isAnimationActive:!0,animationDuration:800,background:{fill:a.colors.background},children:l.map(u=>e.jsxRuntimeExports.jsx(h.Cell,{fill:a.colors.topExCustomColor},x))},Math.random());return r.chartItems.length===0?null:e.jsxRuntimeExports.jsx(U,{chartItemArray:r.chartItems,showBarHoverBackground:c,barElement:m(r.chartItems,r.chartItems[0].barKey),width:i,height:o})}const Q=t=>{const{barKey:i,payload:o,chartItems:c,width:a,y:r}=t,m=o.value,l=c.find(x=>x.accountId==m);return l==null||l.accountDescription==null?null:e.jsxRuntimeExports.jsx("foreignObject",{y:r-o.offset+y,width:a,height:E,children:e.jsxRuntimeExports.jsxs(P,{children:[e.jsxRuntimeExports.jsxs(Y,{children:[e.jsxRuntimeExports.jsx(V,{src:l.logo,alt:l.accountDescription,loading:"lazy"}),e.jsxRuntimeExports.jsx(X,{children:l.accountDescription})]}),e.jsxRuntimeExports.jsx(H,{children:"⟶"}),e.jsxRuntimeExports.jsx(W,{children:s.amountToString("0,0",l[i])})]})})},U=({chartItemArray:t,barElement:i,width:o,height:c})=>{const a=t[0],r=a.total,m=a.barKey;return e.jsxRuntimeExports.jsxs(h.BarChart,{data:t,layout:"vertical",width:o,barCategoryGap:y,height:t.length?(E+2*y)*t.length:c,barSize:E,margin:{top:0,right:0,left:0,bottom:0},style:{display:"flex",flex:"1 1 auto",cursor:"default"},children:[e.jsxRuntimeExports.jsx(h.XAxis,{hide:!0,axisLine:!1,type:"number",domain:[l=>Math.min(0,l),r?.amount??0]}),e.jsxRuntimeExports.jsx(h.YAxis,{orientation:"left",yAxisId:0,dataKey:l=>l.accountId,type:"category",axisLine:!1,tickLine:!1,width:o/2,mirror:!1,tick:e.jsxRuntimeExports.jsx(Q,{width:o/2,chartItems:t,barKey:m})}),i]})},v=41,T=4;function Z({report:t,width:i,height:o,showBarHoverBackground:c,isDetailPage:a}){const r=e.useTheme(),m=I(a===!0?t.topExpenses.accountsOrdered.length:6,t.allTimePeriods,t.topExpenses),l=(x,u,n)=>e.jsxRuntimeExports.jsxs(h.Bar,{dataKey:p=>{const d=p[u]!=null?p[u]:void 0;return d!=null&&d.amount>0?d.amount:0},isAnimationActive:!0,animationDuration:a===!0?800:void 0,background:void 0,children:[e.jsxRuntimeExports.jsx(h.LabelList,{dataKey:"accountDescription",position:"insideLeft",offset:8,content:p=>{const{x:d,y:f,value:k,height:A,offset:O}=p;return e.jsxRuntimeExports.jsx(h.Text,{x:d+O,y:f+A/2,fill:r.colors.hero,fontSize:s.textStyles.smallRegular.fontSize,verticalAnchor:"middle",width:n-110,maxLines:1,children:k})}}),x.map(p=>e.jsxRuntimeExports.jsx(h.Cell,{fill:p.accountDescription!==""?r.colors.graphColor29:r.colors.grey3,fillOpacity:p.accountDescription!==""?.32:1},u))]},Math.random());return m.chartItems.length===0?null:e.jsxRuntimeExports.jsx(F,{chartItemArray:m.chartItems,showBarHoverBackground:c,barElement:l(m.chartItems,m.chartItems[0].barKey,i),width:i,height:o,isDetailPage:a===!0})}const F=({chartItemArray:t,barElement:i,width:o,height:c,isDetailPage:a})=>{const r=e.useTheme(),m=t[0],l=m.total,x=m.barKey,u=l?.currencySymbol??"";return e.jsxRuntimeExports.jsxs(h.BarChart,{data:t,layout:"vertical",width:o,barCategoryGap:a?T:2,height:a?t.length?(v+2*T)*t.length:c:c+5,barSize:a?v:38,margin:{top:0,right:a?s.sp[0]:s.sp[3],left:a?s.sp[0]:s.sp[3],bottom:0},style:{display:"flex",flex:"1 1 auto",cursor:a?"default":"pointer"},children:[e.jsxRuntimeExports.jsx(h.XAxis,{hide:!0,axisLine:!1,type:"number",domain:[n=>Math.min(0,n),l?.amount??0]}),e.jsxRuntimeExports.jsx(h.YAxis,{orientation:"right",yAxisId:0,dataKey:n=>{const p=n[x]!=null?n[x]:void 0,{accountDescription:d}=n;return d!==""&&p!=null?p.amount:0},type:"category",axisLine:!1,tickLine:!1,width:o,mirror:!0,tick:{fill:r.colors.hero,...s.textStyles.smallRegular.cssObject},tickFormatter:n=>n!==0?s.amountValueToString("0,0.[00]a",n,u):""}),i]})};function tt(t){const i=s.useWindowSizeContext();return i!=="small"&&i!=="medium-compact"&&t.isDetailPage===!0?e.jsxRuntimeExports.jsx(J,{...t}):e.jsxRuntimeExports.jsx(Z,{...t})}const L=j.memo(tt,e.isEqual);function B(t){if(t==null||t.length===0)return!0;let i=!0;for(const o of t)if(o.balance.available.amount!==0){i=!1;break}return i}function $({card:t,actions:i,data:o,dndProps:c}){const[a,r]=j.useState(o?.topExTimePeriod??"last_month"),m=[...z.TOP_EX_TIME_PERIODS],l=t.fetchState==="Completed"?B(o?.topExpenses.accountsOrdered):!1,x=(u,n)=>l===!1?e.jsxRuntimeExports.jsx(L,{report:o,width:u,height:n,timeframe:a}):e.jsxRuntimeExports.jsx(D,{width:u,height:n,label:s.appLocale.getLocalizedStrings().chartCard.no_data.top_expenses[a]});return e.jsxRuntimeExports.jsx(s.DraggedDiv,{isDragging:c?.draggedCardType!=null,isDragOver:c?.dragOverCard===t.cardType,draggable:!0,onDragStart:u=>c?.onDragStart(t.cardType,u),onDragOver:u=>c?.onDragOver(u,t.cardType),onDragLeave:u=>c?.onDragLeave(u),onDrop:u=>c?.onDrop(u,t.cardType),dimension:t.dimension,children:e.jsxRuntimeExports.jsx(C,{card:t,actions:i,timeframe:a,chartElement:x,allowedValues:m,onTimeframeChange:(u,n)=>r(n)})},t.cardIndex)}j.memo($);exports.ChartCard=C;exports.EmptyChartContent=D;exports.MemoTopExChart=L;exports.TopExCard=$;exports.isEmptyBalances=B;

package/dist/TopExCard-D34hG1NM.js

@@ -0,0 +1,569 @@
+import { u as f, j as e, A as K, k as G } from "./vendor-.pnpm-B2klaOGU.js";
+import b, { useState as P } from "react";
+import { TOP_EX_TIME_PERIODS as N } from "@zeniai/client-epic-state";
+import { S as g, ev as T, F as I, eX as V, a as E, eu as X, e as Y, D as p, ew as q, P as H, a2 as W, w as F, o as J, t as L, dM as Q, u as U, et as Z } from "./index-BEMjPEfs.js";
+import x from "@emotion/styled";
+import { Bar as k, Cell as B, BarChart as $, XAxis as A, YAxis as R, LabelList as tt, Text as et } from "recharts";
+import { C as nt, R as ot } from "./ReloadCard-Bw3vnqHq.js";
+import { S as at, a as rt } from "./graphic-no-data-l-DU4J8fDt.js";
+const st = x(T)`
+  justify-content: space-between;
+  margin: 0;
+  height: ${(t) => t.height != null ? t.height + "px" : "auto"};
+  width: ${(t) => t.width != null ? t.width + "px" : "auto"};
+`, it = x.div``, lt = x(I)`
+  color: ${(t) => t.theme.colors.hero};
+  margin: ${g.sp2} ${g.sp0} ${g.sp2} ${g.sp0};
+`, ct = ({
+  width: t,
+  height: s,
+  label: o
+}) => {
+  const l = f();
+  return /* @__PURE__ */ e.jsxs(st, { height: s, width: t, children: [
+    /* @__PURE__ */ e.jsx(it, {}),
+    l.mode === "light" ? /* @__PURE__ */ e.jsx(at, { style: { marginBottom: g.sp4 } }) : /* @__PURE__ */ e.jsx(rt, { style: { marginBottom: g.sp4 } }),
+    /* @__PURE__ */ e.jsx(lt, { children: o })
+  ] });
+}, mt = x.div``;
+function ut({
+  allowedValues: t,
+  timeframeSelected: s,
+  onTimeframeChanged: o,
+  textStyle: l
+}) {
+  const r = (a) => E.getLocalizedStrings().timeframe[a];
+  return /* @__PURE__ */ e.jsx(
+    mt,
+    {
+      onClick: (a) => a.stopPropagation(),
+      children: /* @__PURE__ */ e.jsx(
+        V,
+        {
+          pickerValues: t,
+          valueToLabel: r,
+          selectedValue: s,
+          onPickerSelectionChanged: o,
+          optionTextStyle: l
+        }
+      )
+    }
+  );
+}
+const dt = x(H)`
+  color: ${(t) => t.theme.colors.champion};
+`, S = x.div`
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  align-items: center;
+`;
+function ht({
+  dimension: t,
+  reportTitle: s,
+  cardType: o,
+  cardIndex: l,
+  onCardClick: r,
+  timeframe: a,
+  allowedValues: m,
+  chartElement: i,
+  onTimeframeChange: u
+}) {
+  const c = m.length > 0 ? " - " : "";
+  return /* @__PURE__ */ e.jsx(
+    X,
+    {
+      "data-testid": Y(
+        "dashboard",
+        `${o}-timeframe-${a}`
+      ),
+      style: { cursor: "pointer" },
+      dimension: t,
+      onClick: () => r(l, o),
+      children: /* @__PURE__ */ e.jsxs(T, { children: [
+        /* @__PURE__ */ e.jsxs(S, { style: { marginBottom: p[3] }, children: [
+          /* @__PURE__ */ e.jsx(dt, { children: s != null ? s + c : q(o) + c }),
+          " ",
+          m.length > 0 ? /* @__PURE__ */ e.jsx(
+            ut,
+            {
+              timeframeSelected: a,
+              onTimeframeChanged: (n) => u?.(n ?? "month"),
+              allowedValues: m
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ e.jsx(S, { style: { width: "100%", height: "100%", cursor: "pointer" }, children: /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: "100%"
+            },
+            children: /* @__PURE__ */ e.jsx(K, { children: ({ height: n, width: d }) => i(d, n) })
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function O({
+  card: t,
+  reportTitle: s,
+  actions: o,
+  timeframe: l,
+  allowedValues: r,
+  chartElement: a,
+  onTimeframeChange: m
+}) {
+  return t.fetchState === "In-Progress" || t.fetchState === "Not-Started" ? /* @__PURE__ */ e.jsx(
+    nt,
+    {
+      dimension: t.dimension,
+      animated: !t.disableAnimations
+    }
+  ) : t.fetchState === "Error" ? /* @__PURE__ */ e.jsx(
+    ot,
+    {
+      dimension: t.dimension,
+      cardType: t.cardType,
+      cardIndex: t.cardIndex,
+      onReloadData: o.onReloadData,
+      reportTitle: s
+    }
+  ) : /* @__PURE__ */ e.jsx(
+    ht,
+    {
+      dimension: t.dimension,
+      reportTitle: s,
+      cardType: t.cardType,
+      cardIndex: t.cardIndex,
+      onCardClick: o.onCardClick,
+      timeframe: l,
+      allowedValues: r ?? ["month", "quarter", "year"],
+      chartElement: a,
+      onTimeframeChange: (i) => {
+        o.onTimeframeChange?.(t.cardType, i), m?.(t.cardType, i);
+      }
+    }
+  );
+}
+b.memo(O);
+const w = (t, s, o) => {
+  const l = s.map(
+    (n) => ({
+      label: n.timePeriod,
+      startDate: n.startDate,
+      endDate: n.endDate
+    })
+  ), r = o.total, a = o.accountsOrdered.map((n) => ({
+    accountId: n.accountId,
+    accountDescription: n.accountDescription,
+    balance: n.balance,
+    logo: n.logo
+  })) ?? [], m = Math.min(
+    t,
+    a.length
+  ), i = a.length ? t - a.length : 0, u = r?.amount;
+  if (a.length > 0 && i > 0 && u != null && u !== 0) {
+    const n = a[m - 1].balance, d = n?.available?.amount != null ? Math.min(
+      30,
+      n?.available?.amount / u * 100
+    ) : 30;
+    for (let h = 0; h < i; h += 1) {
+      const y = d * (i - h) / (i + 1);
+      a.push({
+        accountId: h.toString(),
+        accountDescription: "",
+        balance: {
+          available: {
+            amount: u * y / 100,
+            currencySymbol: n.available.currencySymbol,
+            currencyCode: n.available.currencyCode
+          }
+        }
+      });
+    }
+  }
+  const c = a.map((n) => {
+    const d = "top_expenses", h = {
+      accountId: n.accountId,
+      accountDescription: n.accountDescription,
+      total: r ?? void 0,
+      logo: n.logo ?? "",
+      barKey: d
+    };
+    return h[d] = n.balance.available, h;
+  });
+  return { timeframeLabelsInOrder: l, chartItems: c };
+}, C = 37, j = 2, xt = x.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  color: ${(t) => t.theme.colors.hero};
+`, gt = x.div`
+  display: flex;
+  align-items: center;
+  flex: 4 1 0;
+`, pt = x.img`
+  height: ${g.sp4};
+`, ft = x(I)`
+  margin-left: ${g.sp2};
+`, yt = x(F)`
+  flex: 1 1 0;
+  color: ${(t) => t.theme.colors.primary};
+`, Ct = x(J)`
+  flex: 1 1 0;
+  margin-right: ${g.sp2};
+`;
+function jt({
+  report: t,
+  width: s,
+  height: o,
+  showBarHoverBackground: l
+}) {
+  const r = f(), a = w(
+    t.topExpenses.accountsOrdered.length,
+    t.allTimePeriods,
+    t.topExpenses
+  ), m = (i, u) => /* @__PURE__ */ e.jsx(
+    k,
+    {
+      dataKey: (c) => {
+        const n = c[u] != null ? c[u] : void 0;
+        return n != null && n.amount > 0 ? n.amount : 0;
+      },
+      isAnimationActive: !0,
+      animationDuration: 800,
+      background: {
+        fill: r.colors.background
+      },
+      children: i.map((c) => /* @__PURE__ */ e.jsx(B, { fill: r.colors.topExCustomColor }, u))
+    },
+    Math.random()
+  );
+  return a.chartItems.length === 0 ? null : /* @__PURE__ */ e.jsx(
+    St,
+    {
+      chartItemArray: a.chartItems,
+      showBarHoverBackground: l,
+      barElement: m(
+        a.chartItems,
+        a.chartItems[0].barKey
+      ),
+      width: s,
+      height: o
+    }
+  );
+}
+const bt = (t) => {
+  const { barKey: s, payload: o, chartItems: l, width: r, y: a } = t, m = o.value, i = l.find(
+    (u) => u.accountId == m
+  );
+  return i == null || i.accountDescription == null ? null : /* @__PURE__ */ e.jsx(
+    "foreignObject",
+    {
+      y: a - o.offset + j,
+      width: r,
+      height: C,
+      children: /* @__PURE__ */ e.jsxs(xt, { children: [
+        /* @__PURE__ */ e.jsxs(gt, { children: [
+          /* @__PURE__ */ e.jsx(
+            pt,
+            {
+              src: i.logo,
+              alt: i.accountDescription,
+              loading: "lazy"
+            }
+          ),
+          /* @__PURE__ */ e.jsx(ft, { children: i.accountDescription })
+        ] }),
+        /* @__PURE__ */ e.jsx(yt, { children: "⟶" }),
+        /* @__PURE__ */ e.jsx(Ct, { children: W("0,0", i[s]) })
+      ] })
+    }
+  );
+}, St = ({
+  chartItemArray: t,
+  barElement: s,
+  width: o,
+  height: l
+}) => {
+  const r = t[0], a = r.total, m = r.barKey;
+  return /* @__PURE__ */ e.jsxs(
+    $,
+    {
+      data: t,
+      layout: "vertical",
+      width: o,
+      barCategoryGap: j,
+      height: t.length ? (C + 2 * j) * t.length : l,
+      barSize: C,
+      margin: {
+        top: 0,
+        right: 0,
+        left: 0,
+        bottom: 0
+      },
+      style: {
+        display: "flex",
+        flex: "1 1 auto",
+        cursor: "default"
+      },
+      children: [
+        /* @__PURE__ */ e.jsx(
+          A,
+          {
+            hide: !0,
+            axisLine: !1,
+            type: "number",
+            domain: [
+              (i) => Math.min(0, i),
+              a?.amount ?? 0
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          R,
+          {
+            orientation: "left",
+            yAxisId: 0,
+            dataKey: (i) => i.accountId,
+            type: "category",
+            axisLine: !1,
+            tickLine: !1,
+            width: o / 2,
+            mirror: !1,
+            tick: /* @__PURE__ */ e.jsx(
+              bt,
+              {
+                width: o / 2,
+                chartItems: t,
+                barKey: m
+              }
+            )
+          }
+        ),
+        s
+      ]
+    }
+  );
+}, v = 41, D = 4;
+function vt({
+  report: t,
+  width: s,
+  height: o,
+  showBarHoverBackground: l,
+  isDetailPage: r
+}) {
+  const a = f(), m = w(
+    r === !0 ? t.topExpenses.accountsOrdered.length : 6,
+    t.allTimePeriods,
+    t.topExpenses
+  ), i = (u, c, n) => /* @__PURE__ */ e.jsxs(
+    k,
+    {
+      dataKey: (d) => {
+        const h = d[c] != null ? d[c] : void 0;
+        return h != null && h.amount > 0 ? h.amount : 0;
+      },
+      isAnimationActive: !0,
+      animationDuration: r === !0 ? 800 : void 0,
+      background: void 0,
+      children: [
+        /* @__PURE__ */ e.jsx(
+          tt,
+          {
+            dataKey: "accountDescription",
+            position: "insideLeft",
+            offset: 8,
+            content: (d) => {
+              const { x: h, y, value: z, height: M, offset: _ } = d;
+              return /* @__PURE__ */ e.jsx(
+                et,
+                {
+                  x: h + _,
+                  y: y + M / 2,
+                  fill: a.colors.hero,
+                  fontSize: L.smallRegular.fontSize,
+                  verticalAnchor: "middle",
+                  width: n - 110,
+                  maxLines: 1,
+                  children: z
+                }
+              );
+            }
+          }
+        ),
+        u.map((d) => /* @__PURE__ */ e.jsx(
+          B,
+          {
+            fill: d.accountDescription !== "" ? a.colors.graphColor29 : a.colors.grey3,
+            fillOpacity: d.accountDescription !== "" ? 0.32 : 1
+          },
+          c
+        ))
+      ]
+    },
+    Math.random()
+  );
+  return m.chartItems.length === 0 ? null : /* @__PURE__ */ e.jsx(
+    Dt,
+    {
+      chartItemArray: m.chartItems,
+      showBarHoverBackground: l,
+      barElement: i(
+        m.chartItems,
+        m.chartItems[0].barKey,
+        s
+      ),
+      width: s,
+      height: o,
+      isDetailPage: r === !0
+    }
+  );
+}
+const Dt = ({
+  chartItemArray: t,
+  barElement: s,
+  width: o,
+  height: l,
+  isDetailPage: r
+}) => {
+  const a = f(), m = t[0], i = m.total, u = m.barKey, c = i?.currencySymbol ?? "";
+  return /* @__PURE__ */ e.jsxs(
+    $,
+    {
+      data: t,
+      layout: "vertical",
+      width: o,
+      barCategoryGap: r ? D : 2,
+      height: r ? t.length ? (v + 2 * D) * t.length : l : l + 5,
+      barSize: r ? v : 38,
+      margin: {
+        top: 0,
+        right: r ? p[0] : p[3],
+        left: r ? p[0] : p[3],
+        bottom: 0
+      },
+      style: {
+        display: "flex",
+        flex: "1 1 auto",
+        cursor: r ? "default" : "pointer"
+      },
+      children: [
+        /* @__PURE__ */ e.jsx(
+          A,
+          {
+            hide: !0,
+            axisLine: !1,
+            type: "number",
+            domain: [
+              (n) => Math.min(0, n),
+              i?.amount ?? 0
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          R,
+          {
+            orientation: "right",
+            yAxisId: 0,
+            dataKey: (n) => {
+              const d = n[u] != null ? n[u] : void 0, { accountDescription: h } = n;
+              return h !== "" && d != null ? d.amount : 0;
+            },
+            type: "category",
+            axisLine: !1,
+            tickLine: !1,
+            width: o,
+            mirror: !0,
+            tick: {
+              fill: a.colors.hero,
+              ...L.smallRegular.cssObject
+            },
+            tickFormatter: (n) => n !== 0 ? Q("0,0.[00]a", n, c) : ""
+          }
+        ),
+        s
+      ]
+    }
+  );
+};
+function Tt(t) {
+  const s = U();
+  return s !== "small" && s !== "medium-compact" && t.isDetailPage === !0 ? /* @__PURE__ */ e.jsx(jt, { ...t }) : /* @__PURE__ */ e.jsx(vt, { ...t });
+}
+const It = b.memo(Tt, G);
+function Et(t) {
+  if (t == null || t.length === 0)
+    return !0;
+  let s = !0;
+  for (const o of t)
+    if (o.balance.available.amount !== 0) {
+      s = !1;
+      break;
+    }
+  return s;
+}
+function Lt({
+  card: t,
+  actions: s,
+  data: o,
+  dndProps: l
+}) {
+  const [r, a] = P(
+    o?.topExTimePeriod ?? "last_month"
+  ), m = [...N], i = t.fetchState === "Completed" ? Et(o?.topExpenses.accountsOrdered) : !1, u = (c, n) => i === !1 ? /* @__PURE__ */ e.jsx(
+    It,
+    {
+      report: o,
+      width: c,
+      height: n,
+      timeframe: r
+    }
+  ) : /* @__PURE__ */ e.jsx(
+    ct,
+    {
+      width: c,
+      height: n,
+      label: E.getLocalizedStrings().chartCard.no_data.top_expenses[r]
+    }
+  );
+  return /* @__PURE__ */ e.jsx(
+    Z,
+    {
+      isDragging: l?.draggedCardType != null,
+      isDragOver: l?.dragOverCard === t.cardType,
+      draggable: !0,
+      onDragStart: (c) => l?.onDragStart(t.cardType, c),
+      onDragOver: (c) => l?.onDragOver(c, t.cardType),
+      onDragLeave: (c) => l?.onDragLeave(c),
+      onDrop: (c) => l?.onDrop(c, t.cardType),
+      dimension: t.dimension,
+      children: /* @__PURE__ */ e.jsx(
+        O,
+        {
+          card: t,
+          actions: s,
+          timeframe: r,
+          chartElement: u,
+          allowedValues: m,
+          onTimeframeChange: (c, n) => a(n)
+        }
+      )
+    },
+    t.cardIndex
+  );
+}
+b.memo(Lt);
+export {
+  O as C,
+  ct as E,
+  It as M,
+  Lt as T,
+  Et as i
+};