@mx-cartographer/experiences 6.25.3-alpha.al2 → 6.25.3-alpha.mega2

package/dist/common/components/calendar/Header.js

@@ -0,0 +1,33 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { css as o } from "@mxenabled/cssinjs";
+import { ChevronLeft as d, ChevronRight as s } from "@mxenabled/mx-icons";
+import n from "@mui/material/Button";
+import { useTokens as h, H2 as p } from "@mxenabled/mxui";
+import { formatDate as f, DATE_FORMATS_INTL as x } from "../../constants/DateFormats.js";
+const b = ({ copy: e, date: i, onNextClick: t, onPreviousClick: m }) => {
+  const l = h(), c = g(l);
+  return /* @__PURE__ */ r("div", { className: `mx-cmn-calendar-header ${c}`, children: [
+    /* @__PURE__ */ a(p, { className: "mx-cmn-calendar-header-title", variant: "H3", children: f(i, x.MONTH_YEAR) }),
+    /* @__PURE__ */ r("div", { className: "mx-cmn-calendar-header-button-container", children: [
+      /* @__PURE__ */ a(n, { "aria-label": e.prevAria, onClick: m, children: /* @__PURE__ */ a(d, { size: 24 }) }),
+      /* @__PURE__ */ a(n, { "aria-label": e.nextAria, onClick: t, children: /* @__PURE__ */ a(s, { size: 24 }) })
+    ] })
+  ] });
+}, g = (e) => o({
+  alignItems: "center",
+  display: "flex",
+  marginBottom: e.Spacing.Medium,
+  marginRight: -e.Spacing.Medium,
+  paddingLeft: e.Spacing.XSmall,
+  "& .mx-cmn-calendar-header-title": {
+    flexGrow: 1
+  },
+  "& .mx-cmn-calendar-header-button-container": {
+    display: "flex",
+    gap: 4
+  }
+});
+export {
+  b as default
+};
+//# sourceMappingURL=Header.js.map

package/dist/common/components/calendar/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../src/common/components/calendar/Header.tsx"],"sourcesContent":["import React from 'react'\nimport { css } from '@mxenabled/cssinjs'\n\nimport { ChevronLeft, ChevronRight } from '@mxenabled/mx-icons'\n\nimport Button from '@mui/material/Button'\n\nimport { H2, useTokens } from '@mxenabled/mxui'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../constants/DateFormats'\nimport type { CalendarCopy } from './Calendar'\n\ninterface HeaderProps {\n  copy: CalendarCopy\n  date: Date\n  onNextClick: () => void\n  onPreviousClick: () => void\n}\n\nconst Header: React.FC<HeaderProps> = ({ copy, date, onNextClick, onPreviousClick }) => {\n  const tokens = useTokens()\n  const styles = getStyles(tokens)\n\n  return (\n    <div className={`mx-cmn-calendar-header ${styles}`}>\n      <H2 className=\"mx-cmn-calendar-header-title\" variant=\"H3\">\n        {formatDate(date, DATE_FORMATS_INTL.MONTH_YEAR)}\n      </H2>\n      <div className=\"mx-cmn-calendar-header-button-container\">\n        <Button aria-label={copy.prevAria} onClick={onPreviousClick}>\n          <ChevronLeft size={24} />\n        </Button>\n        <Button aria-label={copy.nextAria} onClick={onNextClick}>\n          <ChevronRight size={24} />\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst getStyles = (tokens: any) =>\n  css({\n    alignItems: 'center',\n    display: 'flex',\n    marginBottom: tokens.Spacing.Medium,\n    marginRight: -tokens.Spacing.Medium,\n    paddingLeft: tokens.Spacing.XSmall,\n    '& .mx-cmn-calendar-header-title': {\n      flexGrow: 1,\n    },\n    '& .mx-cmn-calendar-header-button-container': {\n      display: 'flex',\n      gap: 4,\n    },\n  })\n\nexport default Header\n"],"names":["Header","copy","date","onNextClick","onPreviousClick","tokens","useTokens","styles","getStyles","jsxs","jsx","H2","formatDate","DATE_FORMATS_INTL","Button","ChevronLeft","ChevronRight","css"],"mappings":";;;;;;AAmBA,MAAMA,IAAgC,CAAC,EAAE,MAAAC,GAAM,MAAAC,GAAM,aAAAC,GAAa,iBAAAC,QAAsB;AACtF,QAAMC,IAASC,KACTC,IAASC,EAAUH,CAAM;AAE/B,SACG,gBAAAI,EAAA,OAAA,EAAI,WAAW,0BAA0BF,CAAM,IAC9C,UAAA;AAAA,IAAC,gBAAAG,EAAAC,GAAA,EAAG,WAAU,gCAA+B,SAAQ,MAClD,UAAWC,EAAAV,GAAMW,EAAkB,UAAU,EAChD,CAAA;AAAA,IACA,gBAAAJ,EAAC,OAAI,EAAA,WAAU,2CACb,UAAA;AAAA,MAAC,gBAAAC,EAAAI,GAAA,EAAO,cAAYb,EAAK,UAAU,SAASG,GAC1C,UAAC,gBAAAM,EAAAK,GAAA,EAAY,MAAM,GAAA,CAAI,EACzB,CAAA;AAAA,MACA,gBAAAL,EAACI,GAAO,EAAA,cAAYb,EAAK,UAAU,SAASE,GAC1C,UAAC,gBAAAO,EAAAM,GAAA,EAAa,MAAM,GAAA,CAAI,EAC1B,CAAA;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ,GAEMR,IAAY,CAACH,MACjBY,EAAI;AAAA,EACF,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAcZ,EAAO,QAAQ;AAAA,EAC7B,aAAa,CAACA,EAAO,QAAQ;AAAA,EAC7B,aAAaA,EAAO,QAAQ;AAAA,EAC5B,mCAAmC;AAAA,IACjC,UAAU;AAAA,EACZ;AAAA,EACA,8CAA8C;AAAA,IAC5C,SAAS;AAAA,IACT,KAAK;AAAA,EACP;AACF,CAAC;"}

package/dist/common/components/charts/Donut.js

@@ -0,0 +1,58 @@
+import { jsxs as g, jsx as e } from "react/jsx-runtime";
+import R from "react";
+import { selectAll as A, interpolateString as I, arc as m } from "d3";
+import n from "@mui/material/Box";
+const v = 100, w = 140, x = 10, U = ({
+  data: a,
+  hoveredId: s,
+  onClick: i,
+  onMouseEnter: l,
+  onMouseLeave: d,
+  selectedId: c,
+  size: o = 300,
+  children: u
+}) => {
+  let r = 0;
+  return R.useEffect(() => {
+    A(".arc-outer").transition("roll").duration(500).attrTween("transform", () => I("rotate(0)", "rotate(360)"));
+  }, []), /* @__PURE__ */ g(n, { height: o, position: "relative", width: o, children: [
+    /* @__PURE__ */ e(n, { height: "100%", padding: o / 3.75, width: "100%", children: u }),
+    /* @__PURE__ */ e(
+      "svg",
+      {
+        height: o,
+        style: { position: "absolute", top: 0, left: 0 },
+        viewBox: "-150 -150 300 300",
+        width: o,
+        children: /* @__PURE__ */ e("g", { children: a.map((t) => {
+          const h = r;
+          r = r + 2 * Math.PI * (t.value / 100);
+          const p = r, f = m().cornerRadius(4)({
+            innerRadius: v,
+            outerRadius: w + (t.id === c || t.id === s ? x : 0),
+            startAngle: h,
+            endAngle: p,
+            padAngle: 0.025
+          });
+          return /* @__PURE__ */ e(
+            "path",
+            {
+              className: "arc-outer",
+              d: f,
+              fill: t.color,
+              onClick: () => i?.(t.id),
+              onMouseEnter: () => l?.(t.id),
+              onMouseLeave: () => d?.(t.id),
+              style: { cursor: "pointer" }
+            },
+            t.id
+          );
+        }) })
+      }
+    )
+  ] });
+};
+export {
+  U as default
+};
+//# sourceMappingURL=Donut.js.map

package/dist/common/components/charts/Donut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Donut.js","sources":["../../../../src/common/components/charts/Donut.tsx"],"sourcesContent":["import React from 'react'\nimport { arc, selectAll, interpolateString } from 'd3'\n\nimport Box from '@mui/material/Box'\n\nconst INNER_RADIUS = 100\nconst OUT_RADIUS = 140\nconst SELECTION_RADIUS = 10\n\nexport interface DonutData {\n  id: string\n  label?: string\n  color: string\n  value: number\n}\n\nexport interface DonutProps {\n  data: DonutData[]\n  hoveredId?: string\n  onClick?: (id: string) => void\n  onMouseEnter?: (id: string) => void\n  onMouseLeave?: (id: string) => void\n  selectedId?: string\n  size?: number\n}\n\nconst Donut: React.FC<React.PropsWithChildren<DonutProps>> = ({\n  data,\n  hoveredId,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  selectedId,\n  size = 300,\n  children,\n}) => {\n  let offset = 0\n\n  React.useEffect(() => {\n    selectAll('.arc-outer')\n      .transition('roll')\n      .duration(500)\n      .attrTween('transform', () => interpolateString('rotate(0)', 'rotate(360)'))\n  }, [])\n\n  return (\n    <Box height={size} position=\"relative\" width={size}>\n      <Box height=\"100%\" padding={size / 3.75} width=\"100%\">\n        {children}\n      </Box>\n      <svg\n        height={size}\n        style={{ position: 'absolute', top: 0, left: 0 }}\n        viewBox={`-150 -150 300 300`}\n        width={size}\n      >\n        <g>\n          {data.map((item) => {\n            const startAngle = offset\n            offset = offset + 2 * Math.PI * (item.value / 100)\n            const endAngle = offset\n\n            const segment = arc().cornerRadius(4)({\n              innerRadius: INNER_RADIUS,\n              outerRadius:\n                OUT_RADIUS +\n                (item.id === selectedId || item.id === hoveredId ? SELECTION_RADIUS : 0),\n              startAngle,\n              endAngle,\n              padAngle: 0.025,\n            }) as string\n\n            return (\n              <path\n                className=\"arc-outer\"\n                d={segment}\n                fill={item.color}\n                key={item.id}\n                onClick={() => onClick?.(item.id)}\n                onMouseEnter={() => onMouseEnter?.(item.id)}\n                onMouseLeave={() => onMouseLeave?.(item.id)}\n                style={{ cursor: 'pointer' }}\n              />\n            )\n          })}\n        </g>\n      </svg>\n    </Box>\n  )\n}\n\nexport default Donut\n"],"names":["INNER_RADIUS","OUT_RADIUS","SELECTION_RADIUS","Donut","data","hoveredId","onClick","onMouseEnter","onMouseLeave","selectedId","size","children","offset","React","selectAll","interpolateString","Box","jsx","item","startAngle","endAngle","segment","arc"],"mappings":";;;;AAKA,MAAMA,IAAe,KACfC,IAAa,KACbC,IAAmB,IAmBnBC,IAAuD,CAAC;AAAA,EAC5D,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AACF,MAAM;AACJ,MAAIC,IAAS;AAEb,SAAAC,EAAM,UAAU,MAAM;AACpB,IAAAC,EAAU,YAAY,EACnB,WAAW,MAAM,EACjB,SAAS,GAAG,EACZ,UAAU,aAAa,MAAMC,EAAkB,aAAa,aAAa,CAAC;AAAA,EAC/E,GAAG,CAAE,CAAA,qBAGFC,GAAI,EAAA,QAAQN,GAAM,UAAS,YAAW,OAAOA,GAC5C,UAAA;AAAA,IAAC,gBAAAO,EAAAD,GAAA,EAAI,QAAO,QAAO,SAASN,IAAO,MAAM,OAAM,QAC5C,UAAAC,EACH,CAAA;AAAA,IACA,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQP;AAAA,QACR,OAAO,EAAE,UAAU,YAAY,KAAK,GAAG,MAAM,EAAE;AAAA,QAC/C,SAAS;AAAA,QACT,OAAOA;AAAA,QAEP,UAAC,gBAAAO,EAAA,KAAA,EACE,UAAKb,EAAA,IAAI,CAACc,MAAS;AAClB,gBAAMC,IAAaP;AACnB,UAAAA,IAASA,IAAS,IAAI,KAAK,MAAMM,EAAK,QAAQ;AAC9C,gBAAME,IAAWR,GAEXS,IAAUC,EAAA,EAAM,aAAa,CAAC,EAAE;AAAA,YACpC,aAAatB;AAAA,YACb,aACEC,KACCiB,EAAK,OAAOT,KAAcS,EAAK,OAAOb,IAAYH,IAAmB;AAAA,YACxE,YAAAiB;AAAA,YACA,UAAAC;AAAA,YACA,UAAU;AAAA,UAAA,CACX;AAGC,iBAAA,gBAAAH;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,GAAGI;AAAA,cACH,MAAMH,EAAK;AAAA,cAEX,SAAS,MAAMZ,IAAUY,EAAK,EAAE;AAAA,cAChC,cAAc,MAAMX,IAAeW,EAAK,EAAE;AAAA,cAC1C,cAAc,MAAMV,IAAeU,EAAK,EAAE;AAAA,cAC1C,OAAO,EAAE,QAAQ,UAAU;AAAA,YAAA;AAAA,YAJtBA,EAAK;AAAA,UAAA;AAAA,QAOf,CAAA,GACH;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/common/components/charts/LineChart.js

@@ -0,0 +1,354 @@
+import { jsxs as M, jsx as r } from "react/jsx-runtime";
+import { useTheme as J } from "@mui/material/styles";
+import { ResponsiveChartContainer as K, AreaPlot as O, LinePlot as Q, MarkPlot as U, BarPlot as V, ChartsXAxis as Z, ChartsYAxis as _, ChartsReferenceLine as w, ChartsAxisHighlight as B } from "@mui/x-charts";
+import "date-fns/getUnixTime";
+import "bowser";
+import "date-fns/intlFormat";
+import "../../constants/Account.js";
+import "../../constants/Category.js";
+import "react";
+import "@mui/material/Button";
+import "@mxenabled/mxui";
+import "@mui/material/Tooltip";
+import "@mui/material/Box";
+import "@mui/material/IconButton";
+import "../accountfilter/AccountFilterOptions.js";
+import "../../context/GlobalDataProvider.js";
+import "../../context/WidgetContainerProvider.js";
+import "@mui/material/styles/useTheme";
+import "@mui/material/useMediaQuery";
+import "@mxenabled/cssinjs";
+import "date-fns/addDays";
+import "date-fns/addMonths";
+import "date-fns/eachDayOfInterval";
+import "date-fns/eachWeekOfInterval";
+import "date-fns/endOfMonth";
+import "date-fns/format";
+import "date-fns/isBefore";
+import "date-fns/isSameMonth";
+import "date-fns/startOfMonth";
+import "date-fns/startOfToday";
+import "date-fns/subMonths";
+import "@mui/material/Paper";
+import "@mxenabled/mx-icons";
+import "date-fns/isSameDay";
+import "date-fns/isWithinInterval";
+import "d3";
+import { CustomMark as S } from "./linechart/CustomMark.js";
+import { CustomLine as F } from "./linechart/CustomLine.js";
+import tt from "./linechart/CustomLegend.js";
+import { CustomTooltip as rt } from "./linechart/CustomTooltip.js";
+import "@mui/material/Stack";
+import "./stackedlinechart/CustomAreaTooltip.js";
+import "@mui/material";
+import "date-fns/addYears";
+import "date-fns/differenceInCalendarDays";
+import "date-fns/endOfToday";
+import "date-fns/endOfYear";
+import "date-fns/startOfYear";
+import "date-fns/subDays";
+import "date-fns/subYears";
+import "@mui/material/ButtonGroup";
+import "@mui/material/Tab";
+import "@mui/material/Tabs";
+import "@mui/material/ToggleButton";
+import "@mui/material/ToggleButtonGroup";
+import "@mui/material/Dialog";
+import "@mui/material/DialogContent";
+import "../ErrorBoundary.js";
+import "@mui/material/Card";
+import "@mui/material/CardContent";
+import "@mui/material/CardHeader";
+import "../WidgetContainer.js";
+import "../ConnectDrawer.js";
+import "uuid";
+import { formatCurrency as b } from "../../utils/NumberFormatting.js";
+import "@mui/material/CircularProgress";
+import "../SearchBox.js";
+import "@mui/material/FormControlLabel";
+import "@mui/material/Radio";
+import "@mui/material/Avatar";
+import "@mui/material/ListItem";
+import "@mui/material/ListItemAvatar";
+import "@mui/material/ListItemButton";
+import "@mui/material/ListItemText";
+import "@mui/material/ListItemIcon";
+import "../ListItemAction.js";
+import "@mui/material/MenuItem";
+import "@mui/material/TextField";
+import "@mui/material/Switch";
+import "mobx";
+import "../../../accounts/AccountsWidget.js";
+import "../../../accounts/AccountsMiniWidget.js";
+import "../../../accounts/ConnectMiniWidget.js";
+import "../../../accounts/components/detailsdrawer/Accounts/AccountDetailsHeader.js";
+import "../../../accounts/components/detailsdrawer/Accounts/AccountDetailsContent.js";
+import "../../types/Account.js";
+import "posthog-js";
+import "../../../cashflow/CashflowMiniWidget.js";
+import "../../../cashflow/CashflowWidget.js";
+import "../../../cashflow/CashflowOnboarding.js";
+import "date-fns/differenceInDays";
+import "../../../categories/components/CategorySelector.js";
+import "../../../categories/components/CategorySelectorDrawer.js";
+import "../../../categories/components/CategoryRow.js";
+import "../../../debts/DebtsWidget.js";
+import "@mui/x-data-grid-pro";
+import "date-fns";
+import "@mui/material/Divider";
+import "@mui/material/List";
+import "../../../finstrong/components/FinancialStrengthGraph.js";
+import "../../../finstrong/components/CreditScoreGraph.js";
+import "date-fns/fromUnixTime";
+import "../../../finstrong/FinstrongWidget.js";
+import "../../../goals/GoalsWidget.js";
+import "../../../goals/GoalsMicroWidget.js";
+import "../../../investments/util/InvestmentUtil.js";
+import "../../../merchants/components/MerchantLookup.js";
+import "../../../networth/components/NetWorthChart.js";
+import "../../../networth/components/NetWorthList.js";
+import "../../../networth/components/NetWorthSummary.js";
+import "../../../networth/NetWorthMicroWidget.js";
+import "../../../networth/NetWorthWidget.js";
+import "../../../notifications/components/NotificationList.js";
+import "../../../notifications/components/NotificationDrawer.js";
+import "date-fns/formatISO";
+import "../../../transactions/constants/Analytics.js";
+import "../../../transactions/constants/Transaction.js";
+import "../../../transactions/components/shared/transactionlist/TransactionRow.js";
+import "../../../transactions/components/shared/TransactionList.js";
+import "../../../transactions/components/shared/TransactionTable.js";
+import "../../../transactions/components/shared/TransactionDetails.js";
+import "../../../transactions/components/transactionwidget/AddAccountModal.js";
+import "../../../transactions/TransactionWidget.js";
+import "../../../settings/SettingsWidget.js";
+import "../../../settings/components/SettingsWidgetContents.js";
+import "../../../settings/components/profile/ProfileTab.js";
+import "../../../settings/components/devices/DeviceTab.js";
+import "../../../settings/NotificationSettingsWidget.js";
+import "../../../settings/components/notifications/NotificationSettings.js";
+import "../../../settings/components/notifications/AccountNotificationProfiles.js";
+import "../../../settings/components/notifications/BudgetNotificationProfiles.js";
+import "../../../settings/components/notifications/InsightsNotificationProfiles.js";
+import "../../../settings/components/transactionrules/TransactionRulesTab.js";
+import "../../../recurringtransactions/RecurringTransactionsWidget.js";
+import "../../../recurringtransactions/RecurringTransactionsMiniWidget.js";
+import "../../../recurringtransactions/RecurringTransactionsMicroWidget.js";
+import "date-fns/isAfter";
+import "date-fns/addQuarters";
+import "date-fns/nextDay";
+import "date-fns/parseISO";
+import "date-fns/setDate";
+import "date-fns/subQuarters";
+import "date-fns/lastDayOfMonth";
+import "date-fns/setDayOfYear";
+import "date-fns/addWeeks";
+import "date-fns/getDay";
+import "../../../recurringtransactions/components/shared/RecurringSettings.js";
+import "../../../recurringtransactions/components/shared/recurringsettings/ManageIncome.js";
+import "../../../recurringtransactions/components/shared/recurringsettings/ManageExpenses.js";
+import "../../../recurringtransactions/components/shared/recurringsettings/SelectTransaction.js";
+import "../../../recurringtransactions/components/shared/recurringsettings/AddRecurringTransactionDetails.js";
+import "../../../trends/TrendsFullWidget.js";
+import "../../../trends/TrendsMiniWidget.js";
+import "../../../trends/TrendsMicroWidget.js";
+import "../../../trends/TrendsWidget.js";
+import "date-fns/addSeconds";
+import "date-fns/getMonth";
+const Si = ({
+  axisColor: o,
+  baseline: L = "max",
+  colors: f,
+  curveType: g = "linear",
+  datasets: a,
+  height: C,
+  isGraphClippingXAxis: T = !1,
+  labels: c,
+  labelBackgroundColor: h,
+  labelFontColor: P,
+  margin: A,
+  markHandlers: v,
+  markStyles: D,
+  showArea: y = !1,
+  showAverage: d = !1,
+  showAxisHighlight: R = !1,
+  showBars: s = !1,
+  showLegend: j = !1,
+  showMarkLabel: W = !1,
+  showTooltip: $ = !1,
+  showXAxis: z = !1,
+  showXAxisTicks: E = !1,
+  showYAxis: H = !1,
+  showYAxisTicks: I = !1,
+  title: N,
+  useCustomMark: X = !1,
+  valueFormatterString: i,
+  width: Y
+}) => {
+  const m = J(), q = a.flat().map((t) => t.x), p = a.flat().map((t) => t.y), u = Math.round(p.reduce((t, l) => l + t, 0) / p.length), x = Math.floor(Math.min(...p) / 100) * 100, k = Math.ceil(Math.max(...p) / 100) * 100, n = a.map((t, l) => ({
+    type: s ? "bar" : "line",
+    curve: g,
+    color: s ? m.palette.chart?.chart6 : f[l] ?? m.palette.primary.main,
+    data: t.map((e) => e.y),
+    area: y,
+    baseline: L,
+    showMark: !0,
+    valueFormatter: (e) => i ? b(e || 0, i) : String(e)
+  })), G = {
+    ...{
+      top: 60,
+      right: 35,
+      bottom: 50,
+      left: 50
+    },
+    ...A
+  };
+  return /* @__PURE__ */ M("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ M(
+      K,
+      {
+        height: C,
+        margin: G,
+        series: n,
+        sx: {
+          p: 4,
+          "& .MuiBarLabel-root": {
+            fontSize: 10,
+            fontWeight: 600
+          },
+          "& .MuiAreaElement-root": {
+            opacity: 0.15
+          }
+        },
+        width: Y,
+        xAxis: [{ data: q, scaleType: s ? "band" : "point" }],
+        yAxis: [
+          {
+            min: T ? -22 : x,
+            max: k || 100,
+            colorMap: y && n.length < 2 ? {
+              type: "continuous",
+              min: x,
+              max: k,
+              color: [
+                m.palette.background.paper,
+                f[0] ?? m.palette.primary.main
+              ]
+            } : void 0,
+            valueFormatter: (t) => i ? b(t, i) : String(t)
+          }
+        ],
+        children: [
+          /* @__PURE__ */ r(O, {}),
+          /* @__PURE__ */ r(
+            Q,
+            {
+              slots: {
+                line: (t) => /* @__PURE__ */ r(
+                  F,
+                  {
+                    ...t,
+                    lineColor: t.ownerState.color ?? m.palette.primary.main
+                  }
+                )
+              }
+            }
+          ),
+          /* @__PURE__ */ r(
+            U,
+            {
+              slots: X ? {
+                mark: (t) => /* @__PURE__ */ r(
+                  S,
+                  {
+                    handlers: v,
+                    labelBackgroundColor: h,
+                    labelFontColor: P,
+                    showLabel: W,
+                    style: D?.(t.dataIndex) ?? {},
+                    valueFormatterString: i,
+                    yData: p,
+                    ...t
+                  }
+                )
+              } : void 0
+            }
+          ),
+          /* @__PURE__ */ r(
+            V,
+            {
+              barLabel: (t) => Number(t.value) > 0 ? `$${t.value}` : null,
+              borderRadius: 10
+            }
+          ),
+          /* @__PURE__ */ r(
+            Z,
+            {
+              disableLine: !z,
+              disableTicks: !E,
+              slotProps: o ? {
+                axisLine: {
+                  style: {
+                    stroke: o
+                  }
+                },
+                axisTick: {
+                  style: {
+                    stroke: o
+                  }
+                }
+              } : {}
+            }
+          ),
+          /* @__PURE__ */ r(
+            _,
+            {
+              disableLine: !H,
+              disableTicks: !I,
+              slotProps: o ? {
+                axisLine: {
+                  style: {
+                    stroke: o
+                  }
+                },
+                axisTick: {
+                  style: {
+                    stroke: o
+                  }
+                }
+              } : {}
+            }
+          ),
+          d && /* @__PURE__ */ r(
+            w,
+            {
+              lineStyle: {
+                stroke: h ? "neutral.main" : "neutral.dark",
+                strokeDasharray: "10, 8",
+                strokeWidth: 2
+              },
+              y: u
+            }
+          ),
+          R && /* @__PURE__ */ r(B, { x: "line" }),
+          $ && /* @__PURE__ */ r(rt, { labels: c, valueFormatterString: i })
+        ]
+      }
+    ),
+    j && /* @__PURE__ */ r(
+      tt,
+      {
+        average: d ? u : void 0,
+        labels: c,
+        series: n,
+        style: { position: "absolute", top: 16, left: 16 },
+        title: N,
+        valueFormatterString: i
+      }
+    )
+  ] });
+};
+export {
+  Si as LineChart
+};
+//# sourceMappingURL=LineChart.js.map

package/dist/common/components/charts/LineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.js","sources":["../../../../src/common/components/charts/LineChart.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport {\n  AllSeriesType,\n  AreaPlot,\n  BarPlot,\n  ChartsAxisHighlight,\n  ChartsReferenceLine,\n  ChartsXAxis,\n  ChartsYAxis,\n  LinePlot,\n  MarkPlot,\n  ResponsiveChartContainer,\n} from '@mui/x-charts'\n\nimport { formatCurrency } from '../../utils'\n\nimport { CustomMark, MarkHandlers } from './linechart/CustomMark'\nimport { CustomLine } from './linechart/CustomLine'\nimport CustomLegend from './linechart/CustomLegend'\nimport { CustomTooltip } from './linechart/CustomTooltip'\n\nexport type LineChartDataset = { x: string; y: number }[]\nexport type LineChartLabel = string | { label: string; amount: number }\n\ntype LineChartCurve =\n  | 'catmullRom'\n  | 'linear'\n  | 'monotoneX'\n  | 'monotoneY'\n  | 'natural'\n  | 'step'\n  | 'stepBefore'\n  | 'stepAfter'\n  | 'bump'\n  | 'bumpX'\n  | 'bumpY'\n\ninterface LineChartProps {\n  axisColor?: string\n  baseline?: string\n  // Because theme chart colors are typed string|undefined\n  colors: (string | undefined)[]\n  curveType?: LineChartCurve\n  datasets: LineChartDataset[]\n  height?: number\n  isGraphClippingXAxis?: boolean\n  labels: LineChartLabel[]\n  labelBackgroundColor?: string\n  labelFontColor?: string\n  margin?: { top?: number; right?: number; bottom?: number; left?: number }\n  markHandlers?: MarkHandlers\n  markStyles?: (markIndex: number) => CSSProperties\n  showArea?: boolean\n  showAverage?: boolean\n  showAxisHighlight?: boolean\n  showBars?: boolean\n  showLegend?: boolean\n  showMarkLabel?: boolean\n  showTooltip?: boolean\n  showXAxis?: boolean\n  showXAxisTicks?: boolean\n  showYAxis?: boolean\n  showYAxisTicks?: boolean\n  title?: string\n  useCustomMark?: boolean\n  valueFormatterString?: string\n  width?: number\n}\n\nexport const LineChart: React.FC<LineChartProps> = ({\n  axisColor,\n  baseline = 'max',\n  colors,\n  curveType = 'linear',\n  datasets,\n  height,\n  isGraphClippingXAxis = false,\n  labels,\n  labelBackgroundColor,\n  labelFontColor,\n  margin,\n  markHandlers,\n  markStyles,\n  showArea = false,\n  showAverage = false,\n  showAxisHighlight = false,\n  showBars = false,\n  showLegend = false,\n  showMarkLabel = false,\n  showTooltip = false,\n  showXAxis = false,\n  showXAxisTicks = false,\n  showYAxis = false,\n  showYAxisTicks = false,\n  title,\n  useCustomMark = false,\n  valueFormatterString,\n  width,\n}) => {\n  const theme = useTheme()\n\n  // Data for the X axis\n  const xData = datasets.flat().map((item) => item.x)\n  const yData = datasets.flat().map((item) => item.y)\n\n  const average = Math.round(yData.reduce((value, total) => total + value, 0) / yData.length)\n\n  // Used for the min and max Y axis values\n  const yMin = Math.floor(Math.min(...yData) / 100) * 100\n  const yMax = Math.ceil(Math.max(...yData) / 100) * 100\n\n  const series = datasets.map((data, index) => {\n    return {\n      type: showBars ? 'bar' : 'line',\n      curve: curveType,\n      color: showBars ? theme.palette.chart?.chart6 : (colors[index] ?? theme.palette.primary.main),\n      data: data.map((item) => item.y),\n      area: showArea,\n      baseline: baseline,\n      showMark: true,\n      valueFormatter: (value: number) =>\n        valueFormatterString ? formatCurrency(value || 0, valueFormatterString) : String(value),\n    }\n  })\n\n  const defaultMargin = {\n    top: 60,\n    right: 35,\n    bottom: 50,\n    left: 50,\n  }\n\n  // Merge default margin with any provided custom margin\n  const chartMargin = {\n    ...defaultMargin,\n    ...margin,\n  }\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <ResponsiveChartContainer\n        height={height}\n        margin={chartMargin}\n        series={series as AllSeriesType[]}\n        sx={{\n          p: 4,\n          '& .MuiBarLabel-root': {\n            fontSize: 10,\n            fontWeight: 600,\n          },\n          '& .MuiAreaElement-root': {\n            opacity: 0.15,\n          },\n        }}\n        width={width}\n        xAxis={[{ data: xData, scaleType: showBars ? 'band' : 'point' }]}\n        yAxis={[\n          {\n            min: isGraphClippingXAxis ? -22 : yMin,\n            max: yMax || 100,\n            colorMap:\n              showArea && series.length < 2\n                ? {\n                    type: 'continuous',\n                    min: yMin,\n                    max: yMax,\n                    color: [\n                      theme.palette.background.paper,\n                      colors[0] ?? theme.palette.primary.main,\n                    ],\n                  }\n                : undefined,\n            valueFormatter: (value) =>\n              valueFormatterString ? formatCurrency(value, valueFormatterString) : String(value),\n          },\n        ]}\n      >\n        {/** Area plot provides gradiant below the line **/}\n        {/* Note: Must be above the LinePlot for some style rules to work */}\n        <AreaPlot />\n\n        {/** Line plot provides the data line **/}\n        <LinePlot\n          slots={{\n            line: (props) => (\n              <CustomLine\n                {...props}\n                lineColor={props.ownerState.color ?? theme.palette.primary.main}\n              />\n            ),\n          }}\n        />\n\n        {/** Mark plot provides the circles **/}\n        <MarkPlot\n          slots={\n            useCustomMark\n              ? {\n                  mark: (props) => {\n                    return (\n                      <CustomMark\n                        handlers={markHandlers}\n                        labelBackgroundColor={labelBackgroundColor}\n                        labelFontColor={labelFontColor}\n                        showLabel={showMarkLabel}\n                        style={markStyles?.(props.dataIndex) ?? {}}\n                        valueFormatterString={valueFormatterString}\n                        yData={yData}\n                        {...props}\n                      />\n                    )\n                  },\n                }\n              : undefined\n          }\n        />\n\n        <BarPlot\n          barLabel={(item) => (Number(item.value) > 0 ? `$${item.value}` : null)}\n          borderRadius={10}\n        />\n\n        {/** Provides the X axis line and values **/}\n        <ChartsXAxis\n          disableLine={!showXAxis}\n          disableTicks={!showXAxisTicks}\n          slotProps={\n            axisColor\n              ? {\n                  axisLine: {\n                    style: {\n                      stroke: axisColor,\n                    },\n                  },\n                  axisTick: {\n                    style: {\n                      stroke: axisColor,\n                    },\n                  },\n                }\n              : {}\n          }\n        />\n\n        {/** Provides the Y axis values **/}\n        <ChartsYAxis\n          disableLine={!showYAxis}\n          disableTicks={!showYAxisTicks}\n          slotProps={\n            axisColor\n              ? {\n                  axisLine: {\n                    style: {\n                      stroke: axisColor,\n                    },\n                  },\n                  axisTick: {\n                    style: {\n                      stroke: axisColor,\n                    },\n                  },\n                }\n              : {}\n          }\n        />\n\n        {/** Provides the horizontal average line **/}\n        {showAverage && (\n          <ChartsReferenceLine\n            lineStyle={{\n              stroke: labelBackgroundColor ? 'neutral.main' : 'neutral.dark',\n              strokeDasharray: '10, 8',\n              strokeWidth: 2,\n            }}\n            y={average}\n          />\n        )}\n\n        {/* Add vertical crosshair on hover */}\n        {showAxisHighlight && <ChartsAxisHighlight x=\"line\" />}\n\n        {showTooltip && (\n          <CustomTooltip labels={labels} valueFormatterString={valueFormatterString} />\n        )}\n      </ResponsiveChartContainer>\n\n      {showLegend && (\n        <CustomLegend\n          average={showAverage ? average : undefined}\n          labels={labels}\n          series={series}\n          style={{ position: 'absolute', top: 16, left: 16 }}\n          title={title}\n          valueFormatterString={valueFormatterString}\n        />\n      )}\n    </div>\n  )\n}\n"],"names":["LineChart","axisColor","baseline","colors","curveType","datasets","height","isGraphClippingXAxis","labels","labelBackgroundColor","labelFontColor","margin","markHandlers","markStyles","showArea","showAverage","showAxisHighlight","showBars","showLegend","showMarkLabel","showTooltip","showXAxis","showXAxisTicks","showYAxis","showYAxisTicks","title","useCustomMark","valueFormatterString","width","theme","useTheme","xData","item","yData","average","value","total","yMin","yMax","series","data","index","formatCurrency","chartMargin","jsxs","ResponsiveChartContainer","jsx","AreaPlot","LinePlot","props","CustomLine","MarkPlot","CustomMark","BarPlot","ChartsXAxis","ChartsYAxis","ChartsReferenceLine","ChartsAxisHighlight","CustomTooltip","CustomLegend"],"mappings":"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"}