@zeniai/web-components 3.17.12 → 3.17.13

package/dist/TrendChart-tFrOrhM-.js

@@ -1,334 +0,0 @@
-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

@@ -1,116 +0,0 @@
-"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;