@mx-cartographer/experiences 7.4.16 → 7.4.17-alpha.mega1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.4.16",
+  "version": "7.4.17-alpha.mega1",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",
@@ -180,7 +180,7 @@
     "@mui/lab": "^5.0.0-alpha.177",
     "@mui/material": "^5.18.0",
     "@mui/system": "^5.18.0",
-    "@mui/x-charts": "^7.29.1",
+    "@mui/x-charts": "^8.23.0",
     "@mui/x-data-grid-pro": "^7.29.8",
     "@mui/x-date-pickers": "^7.29.4",
     "@mui/x-date-pickers-pro": "^7.29.4",

package/dist/LineChart-BQRxZF3p.mjs

@@ -1,581 +0,0 @@
-import { jsxs as a, Fragment as B, jsx as t } from "react/jsx-runtime";
-import F from "@mui/material/Box";
-import { useTheme as Y } from "@mui/material/styles";
-import { ResponsiveChartContainer as fe, ChartsReferenceLine as xe, AreaPlot as ye, LinePlot as ge, MarkPlot as pe, BarPlot as be, ChartsXAxis as ke, ChartsYAxis as Me, ChartsAxisHighlight as Ce } from "@mui/x-charts";
-import { f as p, c as O } from "./NumberFormatting-DjTD0t3W.mjs";
-import we from "@mui/material/useMediaQuery";
-import { observer as Le } from "mobx-react-lite";
-import P from "@mui/material/Stack";
-import { Text as l } from "@mxenabled/mxui";
-import { u as Se } from "./hooks-ZMp65DFz.mjs";
-import { useTheme as ve, Stack as M, Box as X } from "@mui/material";
-import { ChartsTooltip as Te } from "@mui/x-charts/ChartsTooltip";
-const De = (e) => {
-  const r = Y(), s = e.showLabel, o = e.style, b = o?.markLabelStyles, x = Number(e.x), u = Number(e.y), h = e.handlers?.onMarkClick, m = e.handlers?.onMouseEnter, c = e.handlers?.onMouseLeave, i = we(r.breakpoints.up("sm")), f = e.valueFormatterString ? p(e.yData[e.dataIndex], e.valueFormatterString) : String(e.yData[e.dataIndex]), d = i ? r.typography.Small?.fontSize : r.typography.XSmall?.fontSize, T = 30, D = 24, A = x - T / 2, I = u - 30;
-  return /* @__PURE__ */ a(B, { children: [
-    s && /* @__PURE__ */ a(B, { children: [
-      e.labelBackgroundColor && /* @__PURE__ */ t(
-        "rect",
-        {
-          fill: e.labelBackgroundColor,
-          height: D,
-          rx: "3",
-          width: T,
-          x: A,
-          y: I
-        }
-      ),
-      /* @__PURE__ */ t(
-        "text",
-        {
-          className: "MuiLineChart-markLabel",
-          dominantBaseline: "middle",
-          fill: e.labelFontColor ? e.labelFontColor : r.palette.text.primary,
-          style: {
-            fontSize: e.labelFontSize ? e.labelFontSize : d,
-            ...b
-          },
-          textAnchor: "middle",
-          x,
-          y: u - 28 + D / 2,
-          children: f
-        }
-      )
-    ] }),
-    e.showMark && /* @__PURE__ */ t(
-      "path",
-      {
-        cursor: h ? "pointer" : "unset",
-        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
-        height: "20px",
-        onClick: ($) => {
-          h?.($, e.dataIndex);
-        },
-        onMouseEnter: () => {
-          m?.(e.dataIndex);
-        },
-        onMouseLeave: () => {
-          c?.();
-        },
-        style: {
-          fill: o?.fill ? o.fill : r.palette.background.paper,
-          stroke: o?.stroke ? o.stroke : r.palette.primary.main,
-          strokeWidth: 2,
-          transform: `translate(${e.x}px, ${e.y}px)`,
-          transformOrigin: `${e.x}px, ${e.y}px`,
-          filter: o?.filter ? o.filter : "none"
-        },
-        width: "20px"
-      }
-    )
-  ] });
-}, Ae = (e) => /* @__PURE__ */ a(B, { children: [
-  /* @__PURE__ */ t("clipPath", { id: e.id, children: /* @__PURE__ */ t("rect", { height: e.height, width: e.width, x: "0", y: "0" }) }),
-  /* @__PURE__ */ t("g", { children: /* @__PURE__ */ t(
-    "path",
-    {
-      cursor: "unset",
-      d: e.d,
-      style: {
-        strokeWidth: 2,
-        strokeLinejoin: "round",
-        fill: "none",
-        stroke: e.lineColor ? e.lineColor : e.stroke,
-        transition: "opacity 0.2s ease-in, stroke 0.2s ease-in",
-        opacity: 1
-      }
-    }
-  ) })
-] }), Ie = ({
-  label: e,
-  customLegendVariant: r
-}) => {
-  const s = r || "Small";
-  return typeof e == "string" ? /* @__PURE__ */ t(l, { variant: s, children: e }) : typeof e == "object" && e.amount !== void 0 && e.label ? /* @__PURE__ */ a(B, { children: [
-    /* @__PURE__ */ t(l, { variant: s, children: e.label }),
-    /* @__PURE__ */ t(l, { bold: !0, sx: { marginLeft: 8 }, variant: s, children: p(e.amount, "0,0") })
-  ] }) : null;
-}, Re = ({
-  average: e,
-  customLegendVariant: r,
-  customLegendBoxSx: s,
-  labels: o = [],
-  series: b,
-  style: x,
-  title: u,
-  valueFormatterString: h
-}) => {
-  const { common: m } = Se(), c = r || "Small";
-  return /* @__PURE__ */ a(P, { style: { flexDirection: "row", gap: 24, ...x }, children: [
-    b.map((i, f) => {
-      const d = o[f];
-      return d ? /* @__PURE__ */ a(
-        P,
-        {
-          style: { alignItems: "center", flexDirection: "row", flexWrap: "wrap" },
-          children: [
-            /* @__PURE__ */ t(
-              F,
-              {
-                sx: {
-                  width: 10,
-                  height: 10,
-                  backgroundColor: i.color,
-                  marginRight: 8,
-                  ...s
-                }
-              }
-            ),
-            /* @__PURE__ */ t(Ie, { customLegendVariant: r, label: d })
-          ]
-        },
-        f
-      ) : null;
-    }),
-    e && /* @__PURE__ */ a(P, { sx: { alignItems: "center", flexDirection: "row" }, children: [
-      /* @__PURE__ */ t(l, { bold: !0, sx: { marginRight: 8 }, variant: c, children: "– –" }),
-      /* @__PURE__ */ a(l, { variant: c, children: [
-        u || m.average,
-        "  "
-      ] }),
-      /* @__PURE__ */ t(l, { bold: !0, variant: c, children: h ? p(e, h) : e })
-    ] })
-  ] });
-}, Be = Le(Re);
-function $e({
-  customLabels: e,
-  labels: r = [],
-  valueFormatterString: s = "0,0"
-}) {
-  const o = ve();
-  return /* @__PURE__ */ t(
-    Te,
-    {
-      showCrosshair: !0,
-      slots: {
-        axisContent: (b) => {
-          const { axisValue: x, dataIndex: u, series: h } = b, m = u ?? 0;
-          if (e) {
-            const c = e[m]?.[0]?.header || String(x);
-            return /* @__PURE__ */ a(
-              M,
-              {
-                sx: {
-                  backgroundColor: o.palette.background.paper,
-                  boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.12)",
-                  flexDirection: "column",
-                  alignItems: "flex-start",
-                  borderRadius: "4px",
-                  width: 250,
-                  gap: 8,
-                  px: 16,
-                  py: 12
-                },
-                children: [
-                  /* @__PURE__ */ a(
-                    M,
-                    {
-                      sx: {
-                        flexDirection: "row",
-                        justifyContent: "space-between",
-                        alignItems: "center",
-                        alignSelf: "stretch",
-                        gap: 8,
-                        marginTop: 4
-                      },
-                      children: [
-                        /* @__PURE__ */ t(l, { variant: "H3", children: c }),
-                        /* @__PURE__ */ t(l, { bold: !0, variant: "H3", children: p(h[0]?.data[m], s) })
-                      ]
-                    }
-                  ),
-                  e[m]?.some((i) => (typeof i == "string" ? 0 : i.amount) !== 0) ? e[m]?.map((i) => {
-                    const f = typeof i == "string" ? i : i.label, d = typeof i == "string" ? 0 : i.amount;
-                    return d === 0 ? null : /* @__PURE__ */ a(
-                      M,
-                      {
-                        sx: {
-                          flexDirection: "row",
-                          justifyContent: "space-between",
-                          alignItems: "center",
-                          alignSelf: "stretch",
-                          gap: 8,
-                          marginTop: 4
-                        },
-                        children: [
-                          /* @__PURE__ */ a(
-                            M,
-                            {
-                              sx: {
-                                flexDirection: "row",
-                                alignItems: "center",
-                                gap: 8,
-                                flex: 1,
-                                minWidth: 0
-                              },
-                              children: [
-                                /* @__PURE__ */ t(
-                                  X,
-                                  {
-                                    sx: {
-                                      width: "12px",
-                                      height: "12px",
-                                      backgroundColor: h[0]?.color,
-                                      borderRadius: "4px"
-                                    }
-                                  }
-                                ),
-                                /* @__PURE__ */ t(l, { variant: "Body", children: f })
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ t(l, { bold: !0, variant: "Body", children: p(Math.abs(d), s) })
-                        ]
-                      },
-                      f
-                    );
-                  }) : /* @__PURE__ */ t(l, { variant: "Body", children: "No data" })
-                ]
-              }
-            );
-          }
-          return /* @__PURE__ */ a(
-            M,
-            {
-              sx: {
-                backgroundColor: o.palette.background.paper,
-                boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.12)",
-                flexDirection: "column",
-                alignItems: "flex-start",
-                borderRadius: "4px",
-                width: 225,
-                gap: 8,
-                px: 16,
-                py: 12
-              },
-              children: [
-                /* @__PURE__ */ t(l, { variant: "H3", children: String(x) }),
-                h.map((c, i) => /* @__PURE__ */ a(
-                  M,
-                  {
-                    sx: {
-                      flexDirection: "row",
-                      justifyContent: "space-between",
-                      alignItems: "center",
-                      alignSelf: "stretch",
-                      gap: 8,
-                      marginTop: 4
-                    },
-                    children: [
-                      /* @__PURE__ */ a(M, { sx: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
-                        /* @__PURE__ */ t(
-                          X,
-                          {
-                            sx: {
-                              width: "12px",
-                              height: "12px",
-                              backgroundColor: c.color,
-                              borderRadius: "4px"
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ t(l, { variant: "Body", children: typeof r[i] == "string" ? r[i] : r[i]?.label })
-                      ] }),
-                      /* @__PURE__ */ t(l, { bold: !0, variant: "Body", children: p(c.data[m], s) })
-                    ]
-                  },
-                  c.id
-                ))
-              ]
-            }
-          );
-        }
-      },
-      trigger: "axis"
-    }
-  );
-}
-const Qe = ({
-  areaColor: e,
-  axisColor: r,
-  baseline: s = "max",
-  chartFor: o,
-  chartXaxisSx: b,
-  chartYaxisSx: x,
-  colors: u,
-  curveType: h = "linear",
-  customLegendVariant: m,
-  customLegendSx: c,
-  customLegendBoxSx: i,
-  customTooltipLabels: f,
-  datasets: d,
-  height: T,
-  isGraphClippingXAxis: D = !1,
-  labels: A,
-  labelBackgroundColor: I,
-  labelFontColor: $,
-  labelFontSize: q,
-  margin: Q,
-  markHandlers: U,
-  markStyles: V,
-  minRange: J,
-  maxRange: K,
-  onItemClick: j,
-  peerAverage: W,
-  showArea: E = !1,
-  showAverage: H = !1,
-  showAxisHighlight: Z = !1,
-  showBars: z = !1,
-  showLegend: _ = !1,
-  showMark: ee = !0,
-  showMarkLabel: te = !1,
-  showTooltip: ne = !1,
-  showXAxis: re = !1,
-  showXAxisTicks: ae = !1,
-  showYAxis: ie = !1,
-  showYAxisTicks: oe = !1,
-  title: le,
-  useCustomMark: se = !1,
-  valueFormatterString: k,
-  width: ce,
-  xAxisScaleType: de
-}) => {
-  const y = Y(), he = d.flat().map((n) => n.x), C = d.flat().map((n) => n.y), G = W || Math.round(C.reduce((n, v) => v + n, 0) / C.length), w = Math.floor(Math.min(...C) / 100) * 100, L = Math.ceil(Math.max(...C) / 100) * 100, N = d.map((n, v) => ({
-    type: z ? "bar" : "line",
-    curve: h,
-    color: z ? y.palette.chart?.chart6 : u[v] ?? y.palette.primary.main,
-    data: n.map((g) => g.y),
-    area: E,
-    baseline: s,
-    showMark: !0,
-    valueFormatter: (g) => k ? p(g || 0, k) : String(g)
-  })), me = {
-    ...{
-      top: 60,
-      right: 35,
-      bottom: 50,
-      left: 50
-    },
-    ...Q
-  };
-  let S = J ?? w, R = K ?? L;
-  if (o === "networthChart") {
-    const n = L - w, v = n < L * 0.05 ? 0.25 : 0.2, g = Math.max(n * v, L * 0.015);
-    S = w - g < 0 ? w : w - g, R = L + g;
-  }
-  const ue = () => {
-    if (o === "creditOverTime")
-      return O(S, 850, 5);
-    if (o === "networthChart")
-      return O(S, R, 5);
-  };
-  return /* @__PURE__ */ a(
-    F,
-    {
-      sx: {
-        position: "relative",
-        touchAction: "pan-y",
-        // Allow vertical scrolling
-        "& svg": {
-          touchAction: "pan-y",
-          // Allow vertical scrolling on SVG
-          userSelect: "none"
-          // Prevent text selection
-        },
-        "& .recharts-wrapper": {
-          touchAction: "pan-y"
-          // For Recharts library specifically
-        }
-      },
-      children: [
-        /* @__PURE__ */ a(
-          fe,
-          {
-            height: T,
-            margin: me,
-            series: N,
-            sx: {
-              "& .MuiBarLabel-root": {
-                fontSize: 10,
-                fontWeight: 600
-              },
-              "& .MuiAreaElement-root": {
-                opacity: 0.15
-              },
-              "& .MuiChartsAxis-tickLabel > tspan": {
-                fontFamily: y.typography.Small.fontFamily
-              },
-              "& .MuiLineChart-markLabel": {
-                fontFamily: y.typography.Small.fontFamily
-              }
-            },
-            width: ce,
-            xAxis: [{ data: he, scaleType: de || (z ? "band" : "point") }],
-            yAxis: [
-              {
-                tickInterval: ue(),
-                min: D ? -22 : S,
-                max: R || 100,
-                colorMap: E && N.length < 2 ? {
-                  type: "continuous",
-                  min: S,
-                  max: R,
-                  color: [
-                    y.palette.background.paper,
-                    u[0] ?? y.palette.primary.main
-                  ]
-                } : void 0,
-                valueFormatter: (n) => k ? p(n, k) : String(n)
-              }
-            ],
-            children: [
-              H && /* @__PURE__ */ t(
-                xe,
-                {
-                  lineStyle: {
-                    stroke: I ? y.palette.neutral.main : y.palette.neutral.dark,
-                    strokeDasharray: "10, 8",
-                    strokeWidth: 2
-                  },
-                  y: G
-                }
-              ),
-              /* @__PURE__ */ t(
-                ye,
-                {
-                  onItemClick: j,
-                  ...e && {
-                    slots: {
-                      area: (n) => /* @__PURE__ */ a("g", { children: [
-                        /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ a("linearGradient", { id: "customGradient", x1: "0", x2: "0", y1: "0", y2: "1", children: [
-                          /* @__PURE__ */ t("stop", { offset: "0%", stopColor: e }),
-                          /* @__PURE__ */ t("stop", { offset: "100%", stopColor: e, stopOpacity: 0.02 })
-                        ] }) }),
-                        /* @__PURE__ */ t("path", { ...n, fill: "url(#customGradient)" })
-                      ] })
-                    }
-                  }
-                }
-              ),
-              /* @__PURE__ */ t(
-                ge,
-                {
-                  onItemClick: j,
-                  slots: {
-                    line: (n) => /* @__PURE__ */ t(
-                      Ae,
-                      {
-                        ...n,
-                        lineColor: e ?? n.ownerState.color ?? y.palette.primary.main
-                      }
-                    )
-                  }
-                }
-              ),
-              /* @__PURE__ */ t(
-                pe,
-                {
-                  onItemClick: j,
-                  slots: se ? {
-                    mark: (n) => /* @__PURE__ */ t(
-                      De,
-                      {
-                        handlers: U,
-                        labelBackgroundColor: I,
-                        labelFontColor: $,
-                        labelFontSize: q,
-                        showLabel: te,
-                        showMark: ee || n.dataIndex === d[0].length - 1,
-                        style: V?.(n.dataIndex) ?? {},
-                        valueFormatterString: k,
-                        yData: C,
-                        ...n
-                      }
-                    )
-                  } : void 0
-                }
-              ),
-              /* @__PURE__ */ t(
-                be,
-                {
-                  barLabel: (n) => Number(n.value) > 0 ? `$${n.value}` : null,
-                  borderRadius: 10
-                }
-              ),
-              /* @__PURE__ */ t(
-                ke,
-                {
-                  disableLine: !re,
-                  disableTicks: !ae,
-                  slotProps: r ? {
-                    axisLine: {
-                      style: {
-                        stroke: r
-                      }
-                    },
-                    axisTick: {
-                      style: {
-                        stroke: r
-                      }
-                    }
-                  } : {},
-                  sx: { ...b }
-                }
-              ),
-              /* @__PURE__ */ t(
-                Me,
-                {
-                  disableLine: !ie,
-                  disableTicks: !oe,
-                  slotProps: r ? {
-                    axisLine: {
-                      style: {
-                        stroke: r
-                      }
-                    },
-                    axisTick: {
-                      style: {
-                        stroke: r
-                      }
-                    }
-                  } : {},
-                  sx: { ...x }
-                }
-              ),
-              Z && /* @__PURE__ */ t(Ce, { x: "line" }),
-              ne && /* @__PURE__ */ t(
-                $e,
-                {
-                  customLabels: f,
-                  labels: A,
-                  valueFormatterString: k
-                }
-              )
-            ]
-          }
-        ),
-        _ && /* @__PURE__ */ t(
-          Be,
-          {
-            average: H ? G : void 0,
-            customLegendBoxSx: i,
-            customLegendVariant: m,
-            labels: A,
-            series: N,
-            style: {
-              position: "absolute",
-              top: 16,
-              left: 16,
-              ...c
-            },
-            title: le,
-            valueFormatterString: k
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  Qe as L
-};