@zeniai/web-components 3.16.60 → 3.16.61

package/dist/TrendChart-PEPDz5Rb.js

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

package/dist/TrendWithTransactions-C4FC3QhC.cjs

@@ -1,116 +0,0 @@
-"use strict";const i=require("./vendor-.pnpm-CT-Z_-kn.cjs"),z=require("react"),r=require("@emotion/styled"),t=require("./index-DUVvaTyk.cjs"),F=require("./TrendChart-Dvq0z-fc.cjs"),k=require("./NoDataChart-DDy4djDo.cjs"),D=require("./InsightsSection-D5FCkw9x.cjs"),B=require("./TransactionList-CvKnrhmW.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;