@zeniai/web-components 3.17.10 → 3.17.12

package/dist/TrendChart-tFrOrhM-.js

@@ -0,0 +1,334 @@
+import { j as s, u as K, A as M } from "./vendor-.pnpm-B2klaOGU.js";
+import R, { useRef as z, useEffect as w, useState as _ } from "react";
+import { Bar as q, BarChart as N, CartesianGrid as O, XAxis as V, YAxis as W, Tooltip as X, ReferenceArea as G } from "recharts";
+import { formatZeniDate as d } from "@zeniai/client-epic-state";
+import { S as A, C as I, o as F, a as C, e as S, t as B, dM as J } from "./index-HuMzFv1o.js";
+import { c as Q, g as v, b as Z, d as $ } from "./chartTypes-DSzSznOO.js";
+import j from "@emotion/styled";
+import { a as H } from "./toCOABalancesWithID-BqwwVVM3.js";
+import { t as U } from "./toChartData-BrBeiHBz.js";
+const P = j.div`
+  display: flex;
+`, tt = j.div`
+  flex: display;
+  opacity: 0.85;
+  border-radius: ${A.sp1};
+  flex-direction: column;
+  padding: ${A.sp3};
+  background-color: ${(t) => t.theme.colors.black};
+`, at = j(F)`
+  color: ${(t) => t.color ?? I.neutralGrey2Light};
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`, et = ({
+  active: t,
+  payload: a,
+  trendType: e
+}) => {
+  const r = [];
+  return a?.forEach((l) => {
+    const n = l.name;
+    if (l && t && l.value !== 0) {
+      const u = l.payload, x = l.color, m = n != null && u.record[n] != null ? u.record[n].amount : void 0;
+      r.push({
+        barName: e,
+        value: m,
+        color: x
+      });
+    }
+  }), r;
+}, rt = (t) => {
+  const a = et(t);
+  return a.length ? /* @__PURE__ */ s.jsx(P, { children: /* @__PURE__ */ s.jsx(tt, { children: a.map((e, r) => /* @__PURE__ */ s.jsx(
+    at,
+    {
+      color: e.color,
+      children: `${e.barName}: ${Q(
+        e.value
+      )}`
+    },
+    e.barName + r
+  )) }) }) : null;
+}, ot = R.memo(rt), nt = (t, a, e, r) => {
+  let l = [];
+  if (r != null) {
+    const n = st(r, e);
+    n != null && n.length > 0 && (l = H("trend", "actual", n));
+  }
+  if (l.length > 0) {
+    const n = v("trend", "actual"), u = {};
+    return u[n] = l, U(
+      t,
+      a,
+      n,
+      u
+    );
+  } else
+    return;
+}, st = (t, a) => {
+  if (t != null)
+    switch (a) {
+      case "month":
+        return t.monthly;
+      case "quarter":
+        return t.quarterly;
+      case "year":
+        return t.yearly;
+      case "free_range":
+        throw new Error("free_range dates are not supported!");
+    }
+}, k = [v("trend", "actual")];
+function bt({
+  firstMonthOfFY: t,
+  trendReport: a,
+  timeframe: e,
+  selectedTimePeriod: r,
+  graphColor: l,
+  width: n,
+  height: u,
+  onTimeframeSelectionChanged: x
+}) {
+  const m = z(!1), b = r != null ? ct(
+    t,
+    r,
+    e
+  ) : void 0, g = C.getLocalizedStrings().reports.trend[a?.balancesKind];
+  w(() => {
+    m.current = !0;
+  }, []);
+  const h = nt(
+    t,
+    k,
+    e,
+    a
+  ), D = (f) => {
+    const y = [];
+    return k.forEach((o) => {
+      y.push(
+        /* @__PURE__ */ s.jsx(
+          q,
+          {
+            name: o,
+            isAnimationActive: m.current,
+            dataKey: (c) => {
+              const i = c.record;
+              return (i[o] != null && i[o].amount != null ? i[o].amount : void 0)?.amount ?? 0;
+            },
+            maxBarSize: 36,
+            fill: f.toString(),
+            "data-testid": S(o, "bar")
+          },
+          o
+        )
+      );
+    }), y;
+  };
+  return h == null ? null : /* @__PURE__ */ s.jsx(
+    lt,
+    {
+      chartData: h,
+      timeframe: e,
+      selectedLabel: b,
+      barElements: D(l),
+      customToolTipContent: ({ active: f, payload: y }) => /* @__PURE__ */ s.jsx(
+        ot,
+        {
+          active: f,
+          payload: y,
+          trendType: g
+        }
+      ),
+      width: n,
+      height: u,
+      onTimeframeSelectionChanged: x
+    }
+  );
+}
+const lt = ({
+  chartData: t,
+  timeframe: a,
+  selectedLabel: e,
+  barElements: r,
+  customToolTipContent: l,
+  width: n,
+  height: u,
+  onTimeframeSelectionChanged: x
+}) => {
+  const m = K(), [b, g] = _([
+    void 0,
+    void 0
+  ]), h = t.timeseries, D = Z(t), f = h.map(
+    (o) => o.label
+  );
+  w(
+    () => {
+      if (e != null) {
+        const o = $(
+          e.label,
+          f,
+          1
+        );
+        g(o);
+      } else
+        g([void 0, void 0]);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [a, e]
+  );
+  const y = (o) => {
+    if (o?.activePayload == null || o?.activePayload.length === 0)
+      return;
+    const c = o.activePayload[0];
+    if (c?.payload?.record?.[v("trend", "actual")]?.amount == null)
+      return;
+    const i = c.payload.record[v("trend", "actual")].amount;
+    if (i != null && i.amount === 0 || c?.payload?.timeLabel?.label == null)
+      return;
+    const L = c.payload.timeLabel.label, E = c.payload.timeLabel.startDate, T = c.payload.timeLabel.endDate, Y = $(
+      L,
+      f,
+      1
+    );
+    g(Y), x?.(a, {
+      startDate: E,
+      endDate: T
+    });
+  };
+  return /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      style: { width: n, height: u },
+      "data-testid": S("simple-bar-chart"),
+      children: /* @__PURE__ */ s.jsx(M, { children: ({ height: o, width: c }) => /* @__PURE__ */ s.jsxs(
+        N,
+        {
+          "data-testid": S("bar-chart"),
+          width: c,
+          height: o,
+          data: t.recordByTimeseries,
+          barCategoryGap: "30%",
+          margin: {
+            top: 5,
+            right: 20,
+            left: 0,
+            bottom: 5
+          },
+          style: { display: "flex", flex: "1 1 auto", cursor: "pointer" },
+          onClick: y,
+          children: [
+            /* @__PURE__ */ s.jsx(
+              O,
+              {
+                horizontal: !0,
+                vertical: !1,
+                strokeWidth: 0.5,
+                stroke: m.colors.grey3
+              }
+            ),
+            /* @__PURE__ */ s.jsx(
+              V,
+              {
+                dataKey: (i) => i.timeLabel.label,
+                type: "category",
+                axisLine: { stroke: m.colors.grey3, strokeWidth: 0.5 },
+                tickLine: !1,
+                tick: {
+                  color: m.colors.hero,
+                  ...B.extraSmallRegular.cssObject
+                }
+              }
+            ),
+            /* @__PURE__ */ s.jsx(
+              W,
+              {
+                type: "number",
+                axisLine: !1,
+                tickLine: !1,
+                tick: {
+                  color: m.colors.hero,
+                  ...B.extraSmallRegular.cssObject
+                },
+                tickFormatter: (i) => J("0,0.[00]a", i, D)
+              }
+            ),
+            /* @__PURE__ */ s.jsx(
+              X,
+              {
+                cursor: !1,
+                content: l,
+                allowEscapeViewBox: { x: !1, y: !0 }
+              }
+            ),
+            e != null && /* @__PURE__ */ s.jsx(
+              G,
+              {
+                x1: b[0],
+                x2: b[1],
+                opacity: 0.3,
+                fillOpacity: 0.3,
+                stopOpacity: 0.1
+              }
+            ),
+            r
+          ]
+        }
+      ) })
+    }
+  );
+}, { dateFormat: p } = C.getLocalizedStrings(), ct = (t, a, e) => {
+  let r = "";
+  switch (e) {
+    case "week":
+      a.startDate.month() !== a.endDate.month() ? r = `${d(
+        a.startDate,
+        p.visual.MMMYYFormat,
+        t
+      )} - ${d(
+        a.endDate,
+        p.visual.MMMYYFormat,
+        t
+      )}` : r = `${d(
+        a.startDate,
+        p.visual.Dformat,
+        t
+      )} - ${d(
+        a.endDate,
+        p.visual.MMMDCommaYYYYformat,
+        t
+      )}`;
+      break;
+    case "month":
+      r = `${d(
+        a.startDate,
+        p.visual.MMMYYFormat,
+        t
+      )}`;
+      break;
+    case "quarter":
+      r = `${C.getLocalizedStrings().quarterPrefix}${d(
+        a.startDate,
+        p.visual.QYYformat,
+        t
+      )}`;
+      break;
+    case "year":
+      r = `${d(
+        a.startDate,
+        p.visual.YYYYformat,
+        t
+      )}`;
+      break;
+    case "free_range":
+      throw new Error("free_range dates are not supported!");
+  }
+  return {
+    label: r,
+    startDate: a.startDate,
+    endDate: a.endDate
+  };
+};
+export {
+  bt as default
+};

package/dist/TrendWithTransactions-BFd2BRIb.cjs

@@ -0,0 +1,116 @@
+"use strict";const i=require("./vendor-.pnpm-D0ILHvHB.cjs"),z=require("react"),r=require("@emotion/styled"),t=require("./index-CDBWihyC.cjs"),F=require("./TrendChart-BeUIq4q5.cjs"),k=require("./NoDataChart-2flS3On1.cjs"),D=require("./InsightsSection-CfAXhjQZ.cjs"),B=require("./TransactionList-CIasxOEj.cjs"),N=r.div`
+  display: inline-block;
+`,q=r.div`
+  background-color: ${e=>e.theme.colors.grey3};
+  display: flex;
+  align-items: center;
+  padding: ${t.Space.sp0} ${t.Space.sp3};
+  border-radius: ${t.Space.sp6};
+  height: ${t.Space.sp6};
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    background-color: ${e=>e.theme.colors.grey2};
+    color: ${e=>e.theme.colors.primary};
+  }
+`,A=r.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`,_=r(t.StandardRegular)`
+  margin-right: ${t.Space.sp2};
+`,G=r(t.SvgClose)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: inherit;
+  &:hover {
+    color: inherit;
+  }
+`;function K({selectedTimeframeTick:e,onTimeFilterClosed:n}){const d=()=>{n?.()};return i.jsxRuntimeExports.jsx(N,{children:i.jsxRuntimeExports.jsx(q,{onClick:d,"data-testid":t.generateDataTestId("time-filter-indicator"),children:i.jsxRuntimeExports.jsxs(A,{children:[i.jsxRuntimeExports.jsx(_,{children:V(e)}),i.jsxRuntimeExports.jsx(G,{preserveAspectRatio:"none"})]})})})}const V=e=>{const n=e.startDate,d=t.appLocale.getLocalizedStrings();return`${n.format(d.dateFormat.visual.MMMYYFormat)}`},Y={filterMarginLeft:new t.ResponsiveSized(t.sp[3],t.sp[8])},O=r.div`
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  flex-direction: column;
+`,J=r.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  margin: ${t.Space.sp0};
+`,Q=r.div`
+  margin: ${e=>`${t.Space.sp4} ${t.Space.sp0} ${t.Space.sp3} 
+    ${Y.filterMarginLeft.valuePx(e.windowSize)}`};
+`,U=r.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: ${t.Space.sp8};
+`;function X({firstMonthOfFY:e,selectedTimePeriod:n,showSelectedPeriodTags:d,fetchState:o,transactions:a,isDetailPage:c,onTransactionItemClick:x,onSelectedTimePeriodClear:m,onLoadPreviousTransactionsClick:$,onTransactionListHeightChanged:u}){const h=o==="In-Progress"||o==="Not-Started",j=a.length===0&&h,f=a.length>0&&h,E=c!==!0&&d!==!0?{isLoading:f&&(o==="In-Progress"||o==="Not-Started"),onLoadPreviousClick:(w,C)=>{$?.(w,C)}}:void 0,l=t.useWindowSizeContext();return i.jsxRuntimeExports.jsx(O,{"data-testid":t.generateDataTestId("trend-transactions-list-container"),children:j===!1?i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[c===!1&&d===!0&&n!=null&&i.jsxRuntimeExports.jsx(Q,{windowSize:l,children:i.jsxRuntimeExports.jsx(K,{selectedTimeframeTick:n,onTimeFilterClosed:m})}),n!=null&&i.jsxRuntimeExports.jsx(J,{"data-testid":t.generateDataTestId("trend-transactions-list"),children:i.jsxRuntimeExports.jsx(B.TransactionList,{firstMonthOfFY:e,timeframe:"quarter",timePeriod:n,transactions:a,isFirstLotLoading:h&&!f,componentName:"trend.transactions.list",trackPerformance:!1,onTransactionItemClick:x,showLoadPrevious:E,onListInnerElementHeightChanged:u})})]}):i.jsxRuntimeExports.jsx(U,{children:i.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Standard",start:!0})})})}const s={headingMarginLeftRight:new t.ResponsiveSized(t.sp[3],t.sp[8]),headingMarginTop:new t.ResponsiveSized(t.sp[3],t.sp[6]),headingMarginTopDetail:new t.ResponsiveSized(0,0),headingMarginBottom:new t.ResponsiveSized(t.sp[4],t.sp[5]),chartMarginLeftRight:new t.ResponsiveSized(t.sp[3],t.sp[8]),smallHeadingMarginTop:new t.ResponsiveSized(t.sp[7],t.sp[5]),smallHeadingMarginBottom:new t.ResponsiveSized(t.sp[4],t.sp[3])},v={trendChartHeight:360,emptyTrendChartHeight:new t.ResponsiveSized(360,432),selectedTimeHeight:136,loaderTrendChartHeight:new t.ResponsiveSized(470,470)},Z=r.div`
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${e=>e.isDetailPage===!0||e.page==="vendorDetailPage"?e.theme.colors.grey4:e.theme.colors.grey5};
+`,W=r.div`
+  display: flex;
+  justify-content: center;
+  padding: ${t.Space.sp6} ${t.Space.sp8};
+`,ee=r.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  height: 360px;
+  margin: ${e=>`${t.Space.sp0} ${s.chartMarginLeftRight.valuePx(e.windowSize)}`};
+  margin-bottom: ${e=>e.bottomMarginNeeded===!0?t.Space.sp8:t.Space.sp0};
+`,te=r(t.H5Regular)`
+  color: ${e=>e.theme.colors.primary};
+  margin-top: ${e=>s.headingMarginTop.valuePx(e.windowSize)};
+  margin-left: ${e=>s.headingMarginLeftRight.valuePx(e.windowSize)};
+  margin-bottom: ${e=>s.headingMarginBottom.valuePx(e.windowSize)};
+  margin-right: ${e=>s.headingMarginLeftRight.valuePx(e.windowSize)};
+`,ie=r(t.LargeSemiBold)`
+  color: ${e=>e.theme.colors.primary};
+  margin-top: ${e=>s.smallHeadingMarginTop.valuePx(e.windowSize)};
+  margin-left: ${e=>s.headingMarginLeftRight.valuePx(e.windowSize)};
+  margin-bottom: ${e=>s.smallHeadingMarginBottom.valuePx(e.windowSize)};
+  margin-right: ${e=>s.headingMarginLeftRight.valuePx(e.windowSize)};
+`,ne=r(t.LargeSemiBold)`
+  color: ${e=>e.theme.colors.primary};
+  margin-top: ${e=>s.headingMarginTopDetail.valuePx(e.windowSize)};
+  margin-left: ${e=>s.headingMarginLeftRight.valuePx(e.windowSize)};
+  margin-bottom: ${e=>s.headingMarginBottom.valuePx(e.windowSize)};
+  margin-right: ${e=>s.headingMarginLeftRight.valuePx(e.windowSize)};
+`,re=r.div`
+  display: flex;
+  margin: ${t.Space.sp0} ${t.Space.sp8};
+`,se=r.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  height: ${e=>e.height}px;
+`,oe=r.div`
+  position: relative;
+  box-shadow: ${e=>e.page==="vendorDetailPage"?"unset":`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  background-color: ${e=>e.page==="vendorDetailPage"?e.theme.colors.grey4:e.theme.colors.grey5};
+`,ae=r.div`
+  position: relative;
+`,de=r.div`
+  flex: 1 1 auto;
+  display: flex;
+  background-color: ${e=>e.theme.colors.grey4};
+`,ce=r.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: ${e=>e.isDetailPage===!0?"inherited":"100vh"};
+  margin-top: ${t.Space.sp8};
+`,le=r.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: ${e=>v.loaderTrendChartHeight.valuePx(e.windowSize)};
+  margin-top: ${t.Space.sp8};
+`;function xe({firstMonthOfFY:e,trendWithTransactionsReport:n,graphColor:d,isDetailPage:o,initialTransactionListHeight:a=5,page:c,onTransactionItemClick:x,onTimePeriodChange:m}){const $=n.fetchState!=="Completed",u=n.selectedPeriod??{timeframe:"quarter",timePeriod:n.transactionTimePeriod},h="month",j=u?.timeframe==="month",f=n.trendReport?.dataAvailable==null,E=()=>n.trendReport?.fetchState==="In-Progress"&&n.fetchState==="Completed",l=n.trendReport?.trendReport,w=()=>{m?.("TransactionList")},C=(g,p)=>{const S={timeframe:p,addTimePeriod:g,currentTimePeriod:n.selectedPeriod?.timePeriod};m?.("TransactionListLoadMore",S)},R=t.useWindowSizeContext(),[H,M]=z.useState(a),y=z.useRef(null),L=()=>{const g=l?.insights!=null&&l?.insights.length>0;return i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[f?E()?i.jsxRuntimeExports.jsx(le,{windowSize:R,children:i.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Standard",start:!0})}):i.jsxRuntimeExports.jsx(re,{children:i.jsxRuntimeExports.jsx(k.NoDataChart,{title:t.appLocale.getLocalizedStrings().chartCard.no_data_available})}):i.jsxRuntimeExports.jsx(ee,{windowSize:R,"data-testid":t.generateDataTestId("trend-with-transactions-chart",c),bottomMarginNeeded:!g,children:i.jsxRuntimeExports.jsx(i.AutoSizer,{children:({height:p,width:S})=>i.jsxRuntimeExports.jsx(i.jsxRuntimeExports.Fragment,{children:i.jsxRuntimeExports.jsx(F.default,{firstMonthOfFY:e,trendReport:l,timeframe:h,selectedTimePeriod:j===!0?u?.timePeriod:void 0,graphColor:d,onTimeframeSelectionChanged:(P,I)=>{m?.("Chart",{timeframe:P,addTimePeriod:I})},width:S,height:p})})})}),l?.insights!=null&&l?.insights.length>0&&i.jsxRuntimeExports.jsx(W,{ref:y,children:i.jsxRuntimeExports.jsx(D.InsightsSection,{insights:l?.insights})})]})},T=g=>i.jsxRuntimeExports.jsx(i.jsxRuntimeExports.Fragment,{children:i.jsxRuntimeExports.jsx(X,{firstMonthOfFY:g.firstMonthOfFY,selectedTimePeriod:u?.timePeriod,showSelectedPeriodTags:j,isDetailPage:o,fetchState:n.transactionView?.fetchState??"Not-Started",transactions:n.transactionView?.transactions??[],onTransactionItemClick:x,onLoadPreviousTransactionsClick:C,onSelectedTimePeriodClear:w,onTransactionListHeightChanged:p=>{M(p)}})}),b=g=>{const p=y.current!=null?y.current.clientHeight:56;return(f===!0?v.emptyTrendChartHeight.value(R):v.trendChartHeight)+(j===!0?v.selectedTimeHeight:0)+p+g};return i.jsxRuntimeExports.jsx(Z,{page:c,isDetailPage:o,children:$===!0?i.jsxRuntimeExports.jsx(ce,{isDetailPage:o,children:i.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Standard",start:!0})}):i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsx(me,{windowSize:R,report:n,isDetailPage:o,page:c}),i.jsxRuntimeExports.jsx(se,{windowSize:R,height:b(H),children:o===!0?i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsx(ae,{children:i.jsxRuntimeExports.jsx(L,{})}),i.jsxRuntimeExports.jsx(T,{firstMonthOfFY:e})]}):i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsx(oe,{page:c,children:i.jsxRuntimeExports.jsx(L,{})}),i.jsxRuntimeExports.jsx(de,{children:i.jsxRuntimeExports.jsx(T,{firstMonthOfFY:e})})]})})]})})}const me=({windowSize:e,report:n,isDetailPage:d,page:o})=>{const a=n.trendReport?.trendReport;if(a==null)return null;const c=a?.balancesKind==="income"?a.customer.name:a.vendor.name,x=t.appLocale.getLocalizedStrings().reports.trend[a?.balancesKind];if(d)return i.jsxRuntimeExports.jsx(ne,{windowSize:e,children:x});const m=c+" "+x;return o==="vendorDetailPage"?i.jsxRuntimeExports.jsx(ie,{windowSize:e,children:x}):i.jsxRuntimeExports.jsx(te,{windowSize:e,children:m})};exports.TrendWithTransactions=xe;