@mx-cartographer/experiences 9.1.0-alpha.bb1 → 9.1.1

package/dist/LineChart-CUfiH86G.mjs

@@ -0,0 +1,613 @@
+import { jsxs as i, jsx as e, Fragment as E } from "react/jsx-runtime";
+import U from "@mui/material/Box";
+import { useTheme as N } from "@mui/material/styles";
+import { BarPlot as gt } from "@mui/x-charts/BarChart";
+import { ChartContainer as pt } from "@mui/x-charts/ChartContainer";
+import { ChartsAxisHighlight as Lt } from "@mui/x-charts/ChartsAxisHighlight";
+import { ChartsReferenceLine as bt } from "@mui/x-charts/ChartsReferenceLine";
+import { useAxesTooltip as kt, ChartsTooltipContainer as Mt } from "@mui/x-charts/ChartsTooltip";
+import { ChartsXAxis as wt } from "@mui/x-charts/ChartsXAxis";
+import { ChartsYAxis as Ct } from "@mui/x-charts/ChartsYAxis";
+import { AreaPlot as vt, LinePlot as St, MarkPlot as At } from "@mui/x-charts/LineChart";
+import { observer as Dt } from "mobx-react-lite";
+import z from "@mui/material/Stack";
+import { Text as d } from "@mxenabled/mxui";
+import { f as L, c as O } from "./NumberFormatting--XMeeBfr.mjs";
+import { u as Tt } from "./hooks-97sNJ_lf.mjs";
+import Rt from "@mui/material/useMediaQuery";
+import { Stack as M, Box as $t } from "@mui/material";
+const B = {
+  circle: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
+  square: "M-4,-4L4,-4L4,4L-4,4Z",
+  wye: "M0.6,0.6L0.6,4.5L-0.6,4.5L-0.6,0.6L-4,2.6L-3.4,1.5L-0.6,-0.1L-3.4,-1.5L-4,-2.6L-0.6,-0.6L-0.6,-4.5L0.6,-4.5L0.6,-0.6L4,-2.6L3.4,-1.5L0.6,-0.1L3.4,1.5L4,2.6L0.6,0.6Z",
+  star: "M0,-5L1.1,-1.5L4.8,-1.5L1.8,0.9L2.9,4.5L0,2.2L-2.9,4.5L-1.8,0.9L-4.8,-1.5L-1.1,-1.5Z",
+  cross: "M-1.5,-5L1.5,-5L1.5,-1.5L5,-1.5L5,1.5L1.5,1.5L1.5,5L-1.5,5L-1.5,1.5L-5,1.5L-5,-1.5L-1.5,-1.5Z",
+  triangle: "M0,-5L4.33,3.5L-4.33,3.5Z",
+  diamond: "M0,-5.5L3.9,0L0,5.5L-3.9,0Z"
+}, _ = [
+  "circle",
+  "square",
+  "wye",
+  "star",
+  "cross",
+  "triangle",
+  "diamond"
+];
+function Z(t) {
+  return _[t % _.length];
+}
+const Pt = ({
+  label: t,
+  customLegendVariant: a
+}) => {
+  const l = a || "body2";
+  return typeof t == "string" ? /* @__PURE__ */ e(d, { variant: l, children: t }) : typeof t == "object" && t.amount !== void 0 && t.label ? /* @__PURE__ */ i(E, { children: [
+    /* @__PURE__ */ e(d, { variant: l, children: t.label }),
+    /* @__PURE__ */ e(d, { bold: !0, sx: { marginLeft: 8 }, variant: l, children: L(t.amount, "0,0") })
+  ] }) : null;
+}, Et = ({
+  average: t,
+  customLegendVariant: a,
+  customLegendBoxSx: l,
+  labels: o = [],
+  series: f,
+  style: y,
+  title: m,
+  valueFormatterString: u
+}) => {
+  const { common: g } = Tt(), s = a || "body2";
+  return /* @__PURE__ */ i(z, { style: { flexDirection: "row", gap: 24, ...y }, children: [
+    f.map((c, n) => {
+      const h = o[n];
+      return h ? /* @__PURE__ */ i(
+        z,
+        {
+          style: { alignItems: "center", flexDirection: "row", flexWrap: "wrap" },
+          children: [
+            l !== void 0 ? /* @__PURE__ */ e(
+              U,
+              {
+                sx: {
+                  width: 10,
+                  height: 10,
+                  backgroundColor: c.color,
+                  marginRight: 8,
+                  ...l
+                }
+              }
+            ) : /* @__PURE__ */ e(
+              "svg",
+              {
+                "aria-hidden": "true",
+                height: 14,
+                style: { marginRight: 8, flexShrink: 0 },
+                viewBox: "-6 -6 12 12",
+                width: 14,
+                children: /* @__PURE__ */ e(
+                  "path",
+                  {
+                    d: B[Z(n)],
+                    fill: c.color,
+                    stroke: c.color,
+                    strokeWidth: 1
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ e(Pt, { customLegendVariant: a, label: h })
+          ]
+        },
+        n
+      ) : null;
+    }),
+    t !== void 0 && /* @__PURE__ */ i(z, { sx: { alignItems: "center", flexDirection: "row" }, children: [
+      /* @__PURE__ */ e(d, { bold: !0, sx: { marginRight: 8 }, variant: s, children: "– –" }),
+      /* @__PURE__ */ i(d, { variant: s, children: [
+        m || g.average,
+        "  "
+      ] }),
+      /* @__PURE__ */ e(d, { bold: !0, variant: s, children: u ? L(t, u) : t })
+    ] })
+  ] });
+}, It = Dt(Et), Wt = (t) => /* @__PURE__ */ i(E, { children: [
+  /* @__PURE__ */ e("clipPath", { id: t.id, children: /* @__PURE__ */ e("rect", { height: t.height, width: t.width, x: "0", y: "0" }) }),
+  /* @__PURE__ */ e("g", { children: /* @__PURE__ */ e(
+    "path",
+    {
+      cursor: "unset",
+      d: t.d,
+      style: {
+        strokeWidth: 2,
+        strokeLinejoin: "round",
+        fill: "none",
+        stroke: t.lineColor ? t.lineColor : t.stroke,
+        transition: "opacity 0.2s ease-in, stroke 0.2s ease-in",
+        opacity: 1
+      }
+    }
+  ) })
+] }), jt = (t) => {
+  const a = N(), l = t.showLabel, o = t.style, f = o?.markLabelStyles, y = Number(t.x), m = Number(t.y), u = t.handlers?.onMarkClick, g = t.handlers?.onMouseEnter, s = t.handlers?.onMouseLeave, c = Rt(a.breakpoints.up("sm")), n = t.valueFormatterString ? L(t.yData[t.dataIndex], t.valueFormatterString) : String(t.yData[t.dataIndex]), h = c ? a.typography.body2?.fontSize : a.typography.caption?.fontSize, b = 30, D = 24, I = y - b / 2, T = m - 30;
+  return /* @__PURE__ */ i(E, { children: [
+    l && /* @__PURE__ */ i(E, { children: [
+      t.labelBackgroundColor && /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: t.labelBackgroundColor,
+          height: D,
+          rx: "3",
+          width: b,
+          x: I,
+          y: T
+        }
+      ),
+      /* @__PURE__ */ e(
+        "text",
+        {
+          className: "MuiLineChart-markLabel",
+          dominantBaseline: "middle",
+          fill: t.labelFontColor ? t.labelFontColor : a.palette.text.primary,
+          style: {
+            fontSize: t.labelFontSize ? t.labelFontSize : h,
+            ...f
+          },
+          textAnchor: "middle",
+          x: y,
+          y: m - 28 + D / 2,
+          children: n
+        }
+      )
+    ] }),
+    t.showMark && /* @__PURE__ */ e(
+      "path",
+      {
+        cursor: u ? "pointer" : "unset",
+        d: B[t.shape ?? "circle"],
+        height: "20px",
+        onClick: (R) => {
+          u?.(R, t.dataIndex);
+        },
+        onMouseEnter: () => {
+          g?.(t.dataIndex);
+        },
+        onMouseLeave: () => {
+          s?.();
+        },
+        style: {
+          fill: o?.fill ? o.fill : a.palette.background.paper,
+          stroke: o?.stroke ? o.stroke : a.palette.primary.main,
+          strokeWidth: 2,
+          transform: `translate(${t.x}px, ${t.y}px)`,
+          transformOrigin: `${t.x}px, ${t.y}px`,
+          filter: o?.filter ? o.filter : "none"
+        },
+        width: "20px"
+      }
+    )
+  ] });
+};
+function zt({
+  customLabels: t,
+  isCurrency: a = !0,
+  labels: l = [],
+  series: o,
+  valueFormatterString: f = "0,0"
+}) {
+  const y = kt(), m = N(), u = y?.[0];
+  if (!u) return null;
+  const { axisValue: g, dataIndex: s = 0 } = u;
+  if (t) {
+    const c = t[s]?.[0]?.header || String(g);
+    return /* @__PURE__ */ i(
+      M,
+      {
+        sx: {
+          backgroundColor: m.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__ */ i(
+            M,
+            {
+              sx: {
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+                alignSelf: "stretch",
+                gap: 8,
+                marginTop: 4
+              },
+              children: [
+                /* @__PURE__ */ e(d, { variant: "h3", children: c }),
+                /* @__PURE__ */ e(d, { bold: !0, variant: "h3", children: L(o[0]?.data[s], f) })
+              ]
+            }
+          ),
+          t[s]?.some((n) => (typeof n == "string" ? 0 : n.amount) !== 0) ? t[s]?.map((n) => {
+            const h = typeof n == "string" ? n : n.label, b = typeof n == "string" ? 0 : n.amount;
+            return b === 0 ? null : /* @__PURE__ */ i(
+              M,
+              {
+                sx: {
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  alignSelf: "stretch",
+                  gap: 8,
+                  marginTop: 4
+                },
+                children: [
+                  /* @__PURE__ */ i(
+                    M,
+                    {
+                      sx: {
+                        flexDirection: "row",
+                        alignItems: "center",
+                        gap: 8,
+                        flex: 1,
+                        minWidth: 0
+                      },
+                      children: [
+                        /* @__PURE__ */ e(
+                          $t,
+                          {
+                            sx: {
+                              width: "12px",
+                              height: "12px",
+                              backgroundColor: o[0]?.color,
+                              borderRadius: "4px"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ e(d, { variant: "body1", children: h })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ e(d, { bold: !0, variant: "body1", children: L(Math.abs(b), f) })
+                ]
+              },
+              h
+            );
+          }) : /* @__PURE__ */ e(d, { variant: "body1", children: "No data" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ i(
+    M,
+    {
+      sx: {
+        backgroundColor: m.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__ */ e(d, { variant: "h3", children: String(g) }),
+        o.map((c, n) => /* @__PURE__ */ i(
+          M,
+          {
+            sx: {
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              alignSelf: "stretch",
+              gap: 8,
+              marginTop: 4
+            },
+            children: [
+              /* @__PURE__ */ i(M, { sx: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ e("svg", { "aria-hidden": "true", height: 12, viewBox: "-6 -6 12 12", width: 12, children: /* @__PURE__ */ e("path", { d: B[Z(n)], fill: c.color }) }),
+                /* @__PURE__ */ e(d, { variant: "body1", children: typeof l[n] == "string" ? l[n] : l[n]?.label })
+              ] }),
+              /* @__PURE__ */ e(d, { bold: !0, variant: "body1", children: a ? L(c.data[s], f) : c.data[s] })
+            ]
+          },
+          `${c.id}-${n}`
+        ))
+      ]
+    }
+  );
+}
+const ne = ({
+  areaColor: t,
+  axisColor: a,
+  baseline: l = "max",
+  chartFor: o,
+  chartXaxisSx: f,
+  chartYaxisSx: y,
+  colors: m,
+  curveType: u = "linear",
+  customLegendVariant: g,
+  customLegendSx: s,
+  customLegendBoxSx: c,
+  customTooltipLabels: n,
+  datasets: h,
+  height: b,
+  isCurrency: D,
+  isGraphClippingXAxis: I = !1,
+  labels: T,
+  labelBackgroundColor: R,
+  labelFontColor: X,
+  labelFontSize: Y,
+  margin: K,
+  markHandlers: Q,
+  markStyles: V,
+  minRange: J,
+  maxRange: tt,
+  onItemClick: W,
+  peerAverage: H,
+  showArea: G = !1,
+  showAverage: q = !1,
+  showAxisHighlight: et = !1,
+  showBars: j = !1,
+  showLegend: rt = !1,
+  showMark: nt = !0,
+  showMarkLabel: at = !1,
+  showTooltip: it = !1,
+  showXAxis: ot = !1,
+  showXAxisTicks: lt = !1,
+  showYAxis: st = !1,
+  showYAxisTicks: ct = !1,
+  title: dt,
+  useCustomMark: ht = !1,
+  valueFormatterString: k,
+  width: mt,
+  xAxisScaleType: ut
+}) => {
+  const x = N(), ft = h.flat().map((r) => r.x), C = h.flat().map((r) => r.y), F = H || Math.round(C.reduce((r, w) => w + r, 0) / C.length), v = Math.floor(Math.min(...C) / 100) * 100, S = Math.ceil(Math.max(...C) / 100) * 100, $ = h.map((r, w) => ({
+    type: j ? "bar" : "line",
+    curve: u,
+    color: j ? x.palette.chart?.chart6 : m[w] ?? x.palette.primary.main,
+    data: r.map((p) => p.y),
+    area: G,
+    baseline: l,
+    showMark: !0,
+    shape: Z(w),
+    valueFormatter: (p) => k ? L(p || 0, k) : String(p)
+  })), xt = {
+    ...{
+      top: 60,
+      right: 35,
+      bottom: 25,
+      left: -10
+    },
+    ...K
+  };
+  let A = J ?? v, P = tt ?? S;
+  if (o === "networthChart") {
+    const r = S - v, w = r < S * 0.05 ? 0.25 : 0.2, p = Math.max(r * w, S * 0.015);
+    A = v - p < 0 ? v : v - p, P = S + p;
+  }
+  const yt = () => {
+    if (o === "creditOverTime")
+      return O(A, 850, 5);
+    if (o === "networthChart")
+      return O(A, P, 5);
+  };
+  return /* @__PURE__ */ i(
+    U,
+    {
+      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__ */ i(
+          pt,
+          {
+            height: b,
+            margin: xt,
+            series: $,
+            sx: {
+              "& .MuiBarLabel-root": {
+                fontSize: 10,
+                fontWeight: 600
+              },
+              "& .MuiAreaElement-root": {
+                opacity: 0.15
+              },
+              "& .MuiChartsAxis-tickLabel > tspan": {
+                fontFamily: x.typography.body2.fontFamily
+              },
+              "& .MuiLineChart-markLabel": {
+                fontFamily: x.typography.body2.fontFamily
+              }
+            },
+            width: mt,
+            xAxis: [{ data: ft, scaleType: ut || (j ? "band" : "point") }],
+            yAxis: [
+              {
+                tickInterval: yt(),
+                min: I ? -22 : A,
+                max: P || 100,
+                colorMap: G && $.length < 2 ? {
+                  type: "continuous",
+                  min: A,
+                  max: P,
+                  color: [
+                    x.palette.background.paper,
+                    m[0] ?? x.palette.primary.main
+                  ]
+                } : void 0,
+                valueFormatter: (r) => k ? L(r, k) : String(r),
+                width: 62
+              }
+            ],
+            children: [
+              q && /* @__PURE__ */ e(
+                bt,
+                {
+                  lineStyle: {
+                    stroke: R ? x.palette.neutral.main : x.palette.neutral.dark,
+                    strokeDasharray: "10, 8",
+                    strokeWidth: 2
+                  },
+                  y: F
+                }
+              ),
+              /* @__PURE__ */ e(
+                vt,
+                {
+                  onItemClick: W,
+                  ...t && {
+                    slots: {
+                      area: (r) => /* @__PURE__ */ i("g", { children: [
+                        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ i("linearGradient", { id: "customGradient", x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                          /* @__PURE__ */ e("stop", { offset: "0%", stopColor: t }),
+                          /* @__PURE__ */ e("stop", { offset: "100%", stopColor: t, stopOpacity: 0.02 })
+                        ] }) }),
+                        /* @__PURE__ */ e("path", { ...r, fill: "url(#customGradient)" })
+                      ] })
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(
+                St,
+                {
+                  onItemClick: W,
+                  slots: {
+                    line: (r) => /* @__PURE__ */ e(
+                      Wt,
+                      {
+                        ...r,
+                        lineColor: t ?? r.ownerState.color ?? x.palette.primary.main
+                      }
+                    )
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(
+                At,
+                {
+                  onItemClick: W,
+                  slots: ht ? {
+                    mark: (r) => /* @__PURE__ */ e(
+                      jt,
+                      {
+                        handlers: Q,
+                        labelBackgroundColor: R,
+                        labelFontColor: X,
+                        labelFontSize: Y,
+                        showLabel: at,
+                        showMark: nt || r.dataIndex === h[0].length - 1,
+                        style: V?.(r.dataIndex) ?? {},
+                        valueFormatterString: k,
+                        yData: C,
+                        ...r
+                      }
+                    )
+                  } : void 0
+                }
+              ),
+              /* @__PURE__ */ e(
+                gt,
+                {
+                  barLabel: (r) => Number(r.value) > 0 ? `$${r.value}` : null,
+                  borderRadius: 10
+                }
+              ),
+              /* @__PURE__ */ e(
+                wt,
+                {
+                  disableLine: !ot,
+                  disableTicks: !lt,
+                  slotProps: a ? {
+                    axisLine: {
+                      style: {
+                        stroke: a
+                      }
+                    },
+                    axisTick: {
+                      style: {
+                        stroke: a
+                      }
+                    }
+                  } : {},
+                  sx: { ...f }
+                }
+              ),
+              /* @__PURE__ */ e(
+                Ct,
+                {
+                  disableLine: !st,
+                  disableTicks: !ct,
+                  slotProps: a ? {
+                    axisLine: {
+                      style: {
+                        stroke: a
+                      }
+                    },
+                    axisTick: {
+                      style: {
+                        stroke: a
+                      }
+                    }
+                  } : {},
+                  sx: { ...y }
+                }
+              ),
+              et && /* @__PURE__ */ e(Lt, { x: "line" }),
+              it && /* @__PURE__ */ e(Mt, { trigger: "axis", children: /* @__PURE__ */ e(
+                zt,
+                {
+                  customLabels: n,
+                  isCurrency: D,
+                  labels: T,
+                  series: $,
+                  valueFormatterString: k
+                }
+              ) })
+            ]
+          }
+        ),
+        rt && /* @__PURE__ */ e(
+          It,
+          {
+            average: q ? F : void 0,
+            customLegendBoxSx: c,
+            customLegendVariant: g,
+            labels: T,
+            series: $,
+            style: {
+              position: "absolute",
+              top: 16,
+              left: 16,
+              ...s
+            },
+            title: dt,
+            valueFormatterString: k
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ne as L
+};
+//# sourceMappingURL=LineChart-CUfiH86G.mjs.map