@mx-cartographer/experiences 6.26.18-alpha.mega2 → 6.26.18-alpha.mega3

package/dist/common/components/calendar/Day/index.es.js

@@ -0,0 +1,96 @@
+import { jsx as c } from "react/jsx-runtime";
+import { css as y } from "@mxenabled/cssinjs";
+import { format as u } from "date-fns/format";
+import { isSameDay as m } from "date-fns/isSameDay";
+import { isWithinInterval as h } from "date-fns/isWithinInterval";
+import { startOfToday as g } from "date-fns/startOfToday";
+import R from "@mui/material/Button";
+import S from "@mui/material/styles/useTheme";
+import { Text as $ } from "@mxenabled/mxui";
+import { DATE_SIZE as a } from "../Calendar/index.es.js";
+const j = ({ beginDate: o, date: r, endDate: t, isInMonth: s, onClick: i }) => {
+  const d = S(), l = B(d), e = o && t && h(r, { start: o, end: t }) && !m(r, o) && !m(r, t), x = o && t && m(o, r) && !m(o, t), p = t && o && m(t, r) && !m(o, t), n = o && m(o, r) || t && m(t, r), f = m(r, g());
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: `
+        mx-cmn-calendar-day
+        ${l}
+        ${s ? "" : "mx-cmn-out-of-month"}
+        ${e ? "mx-cmn-date-interval" : ""}
+      `,
+      children: /* @__PURE__ */ c(
+        R,
+        {
+          className: `
+          mx-cmn-calendar-day-button
+          ${x ? "mx-cmn-range-start" : ""}
+          ${p ? "mx-cmn-range-end" : ""}
+        `,
+          color: n ? "primary" : "secondary",
+          onClick: () => i(r),
+          variant: n ? "contained" : "text",
+          children: /* @__PURE__ */ c(
+            $,
+            {
+              className: `
+            mx-cmn-calendar-day-text
+            ${n ? "mx-cmn-day-selected" : ""}
+            ${f ? "mx-cmn-today" : ""}`,
+              variant: "Small",
+              children: u(r, "d")
+            }
+          )
+        }
+      )
+    }
+  );
+}, B = (o) => y({
+  height: a,
+  width: a,
+  display: "flex",
+  justifyContent: "center",
+  "&.mx-cmn-out-of-month": {
+    backgroundColor: o.palette.background.default
+  },
+  "&.mx-cmn-date-interval": {
+    backgroundColor: o.palette.secondary.light
+  },
+  "& .MuiButton-root": {
+    maxWidth: 44,
+    minWidth: 44,
+    height: 44,
+    padding: 0,
+    width: 44,
+    "&.mx-cmn-range-start": {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+      "&:focus": {
+        boxShadow: "none"
+      }
+    },
+    "&.mx-cmn-range-end": {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      "&:focus": {
+        boxShadow: "none"
+      }
+    }
+  },
+  "& .mx-cmn-calendar-day-text": {
+    "&.mx-cmn-day-selected": {
+      color: o.palette.primary,
+      "&.mx-cmn-day-selected": {
+        borderColor: o.palette.common.white
+      }
+    },
+    "&.mx-cmn-today": {
+      borderBottom: `solid 2px ${o.palette.primary.main}`,
+      marginBottom: -6,
+      paddingBottom: 5
+    }
+  }
+});
+export {
+  j as default
+};

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

@@ -0,0 +1,32 @@
+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/index.es.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
+};

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

@@ -0,0 +1,57 @@
+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, D = ({
+  data: s,
+  hoveredId: a,
+  onClick: i,
+  onMouseEnter: l,
+  onMouseLeave: c,
+  selectedId: d,
+  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%", 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: s.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 === d || t.id === a ? 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: () => c?.(t.id),
+              style: { cursor: "pointer" }
+            },
+            t.id
+          );
+        }) })
+      }
+    )
+  ] });
+}, M = D;
+export {
+  M as default
+};

package/dist/common/components/charts/LineChart/CustomLegend/index.es.js

@@ -0,0 +1,64 @@
+import { jsxs as n, jsx as o, Fragment as x } from "react/jsx-runtime";
+import { observer as y } from "mobx-react-lite";
+import { Stack as c, Box as C } from "@mui/material";
+import { Text as t } from "@mxenabled/mxui";
+import { useGlobalCopyStore as b } from "../../../../context/hooks/index.es.js";
+import { formatCurrency as u } from "../../../../utils/NumberFormatting/index.es.js";
+const w = ({
+  label: r,
+  customLegendVariant: i
+}) => {
+  const e = i || "Small";
+  return typeof r == "string" ? /* @__PURE__ */ o(t, { variant: e, children: r }) : typeof r == "object" && r.amount && r.label ? /* @__PURE__ */ n(x, { children: [
+    /* @__PURE__ */ o(t, { variant: e, children: r.label }),
+    /* @__PURE__ */ o(t, { bold: !0, sx: { marginLeft: 8 }, variant: e, children: u(r.amount, "0,0") })
+  ] }) : null;
+}, L = ({
+  average: r,
+  customLegendVariant: i,
+  labels: e = [],
+  series: a,
+  style: h,
+  title: l,
+  valueFormatterString: s
+}) => {
+  const { common: p } = b(), m = i || "Small";
+  return /* @__PURE__ */ n(c, { style: { flexDirection: "row", gap: 24, ...h }, children: [
+    a.map((g, d) => {
+      const f = e[d];
+      return f ? /* @__PURE__ */ n(
+        c,
+        {
+          style: { alignItems: "center", flexDirection: "row", flexWrap: "wrap" },
+          children: [
+            /* @__PURE__ */ o(
+              C,
+              {
+                sx: {
+                  width: 10,
+                  height: 10,
+                  backgroundColor: g.color,
+                  marginRight: 8
+                }
+              }
+            ),
+            /* @__PURE__ */ o(w, { customLegendVariant: i, label: f })
+          ]
+        },
+        d
+      ) : null;
+    }),
+    r && /* @__PURE__ */ n(c, { sx: { alignItems: "center", flexDirection: "row" }, children: [
+      /* @__PURE__ */ o(t, { bold: !0, sx: { marginRight: 8 }, variant: m, children: "– –" }),
+      /* @__PURE__ */ n(t, { variant: m, children: [
+        l || p.average,
+        "  "
+      ] }),
+      /* @__PURE__ */ o(t, { bold: !0, variant: m, children: s ? u(r, s) : r })
+    ] })
+  ] });
+}, v = y(L);
+export {
+  w as CustomLegendLabel,
+  v as default
+};

package/dist/common/components/charts/LineChart/CustomLine/index.es.js

@@ -0,0 +1,22 @@
+import { jsxs as i, Fragment as n, jsx as t } from "react/jsx-runtime";
+const r = (e) => /* @__PURE__ */ i(n, { 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
+      }
+    }
+  ) })
+] });
+export {
+  r as CustomLine
+};

package/dist/common/components/charts/LineChart/CustomMark/index.es.js

@@ -0,0 +1,65 @@
+import { jsxs as m, Fragment as s, jsx as l } from "react/jsx-runtime";
+import { useTheme as M } from "@mui/material/styles";
+import C from "@mui/material/useMediaQuery";
+import { formatCurrency as F } from "../../../../utils/NumberFormatting/index.es.js";
+const $ = (t) => {
+  const e = M(), u = t.showLabel, n = t.style, o = Number(t.x), r = Number(t.y), i = t.handlers?.onMarkClick, x = t.handlers?.onMouseEnter, f = t.handlers?.onMouseLeave, g = C(e.breakpoints.up("sm")), d = t.valueFormatterString ? F(t.yData[t.dataIndex], t.valueFormatterString) : String(t.yData[t.dataIndex]), a = g ? e.typography.Small?.fontSize : e.typography.XSmall?.fontSize, y = a ? parseFloat(a.toString()) * 0.6 : 8, c = d.length * y + 8 + 8, h = 24, b = o - c / 2, k = r - 30;
+  return /* @__PURE__ */ m(s, { children: [
+    u && /* @__PURE__ */ m(s, { children: [
+      t.labelBackgroundColor && /* @__PURE__ */ l(
+        "rect",
+        {
+          fill: t.labelBackgroundColor,
+          height: h,
+          rx: "3",
+          width: c,
+          x: b,
+          y: k
+        }
+      ),
+      /* @__PURE__ */ l(
+        "text",
+        {
+          dominantBaseline: "middle",
+          fill: t.labelFontColor ? t.labelFontColor : e.palette.text.primary,
+          style: {
+            fontSize: t.labelFontSize ? t.labelFontSize : a
+          },
+          textAnchor: "middle",
+          x: o,
+          y: r - 28 + h / 2,
+          children: d
+        }
+      )
+    ] }),
+    /* @__PURE__ */ l(
+      "path",
+      {
+        cursor: i ? "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: (S) => {
+          i?.(S, t.dataIndex);
+        },
+        onMouseEnter: () => {
+          x?.(t.dataIndex);
+        },
+        onMouseLeave: () => {
+          f?.();
+        },
+        style: {
+          fill: n?.fill ? n.fill : e.palette.background.paper,
+          stroke: n?.stroke ? n.stroke : e.palette.primary.main,
+          strokeWidth: 2,
+          transform: `translate(${t.x}px, ${t.y}px)`,
+          transformOrigin: `${t.x}px, ${t.y}px`,
+          filter: n?.filter ? n.filter : "none"
+        },
+        width: "20px"
+      }
+    )
+  ] });
+};
+export {
+  $ as CustomMark
+};

package/dist/common/components/charts/LineChart/CustomTooltip/index.es.js

@@ -0,0 +1,73 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useTheme as g, Stack as n, Box as h } from "@mui/material";
+import { ChartsTooltip as u } from "@mui/x-charts/ChartsTooltip";
+import { Text as a } from "@mxenabled/mxui";
+import { formatCurrency as f } from "../../../../utils/NumberFormatting/index.es.js";
+function k({ labels: t = [], valueFormatterString: s = "0,0" }) {
+  const p = g();
+  return /* @__PURE__ */ r(
+    u,
+    {
+      showCrosshair: !0,
+      slots: {
+        axisContent: (c) => {
+          const { axisValue: x, dataIndex: d, series: l } = c, m = d ?? 0;
+          return /* @__PURE__ */ i(
+            n,
+            {
+              sx: {
+                backgroundColor: p.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__ */ r(a, { variant: "H3", children: String(x) }),
+                l.map((o, e) => /* @__PURE__ */ i(
+                  n,
+                  {
+                    sx: {
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      alignSelf: "stretch",
+                      gap: 8,
+                      marginTop: 4
+                    },
+                    children: [
+                      /* @__PURE__ */ i(n, { sx: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+                        /* @__PURE__ */ r(
+                          h,
+                          {
+                            sx: {
+                              width: "12px",
+                              height: "12px",
+                              backgroundColor: o.color,
+                              borderRadius: "4px"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ r(a, { variant: "Body", children: typeof t[e] == "string" ? t[e] : t[e]?.label })
+                      ] }),
+                      /* @__PURE__ */ r(a, { bold: !0, variant: "Body", children: f(o.data[m], s) })
+                    ]
+                  },
+                  o.id
+                ))
+              ]
+            }
+          );
+        }
+      },
+      trigger: "axis"
+    }
+  );
+}
+export {
+  k as CustomTooltip
+};

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

@@ -0,0 +1,208 @@
+import { jsxs as M, jsx as t } from "react/jsx-runtime";
+import { useTheme as O } from "@mui/material/styles";
+import { ResponsiveChartContainer as Q, ChartsReferenceLine as U, AreaPlot as V, LinePlot as Z, MarkPlot as _, BarPlot as w, ChartsXAxis as B, ChartsYAxis as S, ChartsAxisHighlight as F } from "@mui/x-charts";
+import { CustomMark as ee } from "../linechart/CustomMark/index.es.js";
+import { CustomLine as te } from "../linechart/CustomLine/index.es.js";
+import ae from "../linechart/CustomLegend/index.es.js";
+import { CustomTooltip as re } from "../linechart/CustomTooltip/index.es.js";
+import { formatCurrency as b } from "../../../utils/NumberFormatting/index.es.js";
+const he = ({
+  axisColor: i,
+  baseline: L = "max",
+  colors: f,
+  curveType: g = "linear",
+  customLegendVariant: C,
+  datasets: l,
+  height: T,
+  isGraphClippingXAxis: P = !1,
+  labels: c,
+  labelBackgroundColor: h,
+  labelFontColor: A,
+  labelFontSize: v,
+  margin: D,
+  markHandlers: R,
+  markStyles: j,
+  showArea: y = !1,
+  showAverage: d = !1,
+  showAxisHighlight: W = !1,
+  showBars: n = !1,
+  showLegend: $ = !1,
+  showMarkLabel: z = !1,
+  showTooltip: E = !1,
+  showXAxis: H = !1,
+  showXAxisTicks: I = !1,
+  showYAxis: N = !1,
+  showYAxisTicks: X = !1,
+  title: Y,
+  useCustomMark: q = !1,
+  valueFormatterString: a,
+  width: G
+}) => {
+  const r = O(), J = l.flat().map((e) => e.x), o = l.flat().map((e) => e.y), u = Math.round(o.reduce((e, p) => p + e, 0) / o.length), x = Math.floor(Math.min(...o) / 100) * 100, k = Math.ceil(Math.max(...o) / 100) * 100, m = l.map((e, p) => ({
+    type: n ? "bar" : "line",
+    curve: g,
+    color: n ? r.palette.chart?.chart6 : f[p] ?? r.palette.primary.main,
+    data: e.map((s) => s.y),
+    area: y,
+    baseline: L,
+    showMark: !0,
+    valueFormatter: (s) => a ? b(s || 0, a) : String(s)
+  })), K = {
+    ...{
+      top: 60,
+      right: 35,
+      bottom: 50,
+      left: 50
+    },
+    ...D
+  };
+  return /* @__PURE__ */ M("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ M(
+      Q,
+      {
+        height: T,
+        margin: K,
+        series: m,
+        sx: {
+          p: 4,
+          "& .MuiBarLabel-root": {
+            fontSize: 10,
+            fontWeight: 600
+          },
+          "& .MuiAreaElement-root": {
+            opacity: 0.15
+          }
+        },
+        width: G,
+        xAxis: [{ data: J, scaleType: n ? "band" : "point" }],
+        yAxis: [
+          {
+            min: P ? -22 : x,
+            max: k || 100,
+            colorMap: y && m.length < 2 ? {
+              type: "continuous",
+              min: x,
+              max: k,
+              color: [
+                r.palette.background.paper,
+                f[0] ?? r.palette.primary.main
+              ]
+            } : void 0,
+            valueFormatter: (e) => a ? b(e, a) : String(e)
+          }
+        ],
+        children: [
+          d && /* @__PURE__ */ t(
+            U,
+            {
+              lineStyle: {
+                stroke: h ? r.palette.neutral.main : r.palette.neutral.dark,
+                strokeDasharray: "10, 8",
+                strokeWidth: 2
+              },
+              y: u
+            }
+          ),
+          /* @__PURE__ */ t(V, {}),
+          /* @__PURE__ */ t(
+            Z,
+            {
+              slots: {
+                line: (e) => /* @__PURE__ */ t(
+                  te,
+                  {
+                    ...e,
+                    lineColor: e.ownerState.color ?? r.palette.primary.main
+                  }
+                )
+              }
+            }
+          ),
+          /* @__PURE__ */ t(
+            _,
+            {
+              slots: q ? {
+                mark: (e) => /* @__PURE__ */ t(
+                  ee,
+                  {
+                    handlers: R,
+                    labelBackgroundColor: h,
+                    labelFontColor: A,
+                    labelFontSize: v,
+                    showLabel: z,
+                    style: j?.(e.dataIndex) ?? {},
+                    valueFormatterString: a,
+                    yData: o,
+                    ...e
+                  }
+                )
+              } : void 0
+            }
+          ),
+          /* @__PURE__ */ t(
+            w,
+            {
+              barLabel: (e) => Number(e.value) > 0 ? `$${e.value}` : null,
+              borderRadius: 10
+            }
+          ),
+          /* @__PURE__ */ t(
+            B,
+            {
+              disableLine: !H,
+              disableTicks: !I,
+              slotProps: i ? {
+                axisLine: {
+                  style: {
+                    stroke: i
+                  }
+                },
+                axisTick: {
+                  style: {
+                    stroke: i
+                  }
+                }
+              } : {}
+            }
+          ),
+          /* @__PURE__ */ t(
+            S,
+            {
+              disableLine: !N,
+              disableTicks: !X,
+              slotProps: i ? {
+                axisLine: {
+                  style: {
+                    stroke: i
+                  }
+                },
+                axisTick: {
+                  style: {
+                    stroke: i
+                  }
+                }
+              } : {}
+            }
+          ),
+          W && /* @__PURE__ */ t(F, { x: "line" }),
+          E && /* @__PURE__ */ t(re, { labels: c, valueFormatterString: a })
+        ]
+      }
+    ),
+    $ && /* @__PURE__ */ t(
+      ae,
+      {
+        average: d ? u : void 0,
+        customLegendVariant: C,
+        labels: c,
+        series: m,
+        style: { position: "absolute", top: 16, left: 16 },
+        title: Y,
+        valueFormatterString: a
+      }
+    )
+  ] });
+};
+export {
+  he as LineChart
+};

package/dist/common/components/charts/StackedLineChart/CategoryIconLabel/index.es.js

@@ -0,0 +1,24 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import m from "@mui/material/Box";
+import n from "@mui/material/Stack";
+import { CategoryIcon as l, Text as y } from "@mxenabled/mxui";
+import { useGlobalCopyStore as g, useCategoryStore as s } from "../../../../context/hooks/index.es.js";
+import { buildDynamicCopy as p } from "../../../../utils/Localization/index.es.js";
+const h = ({ categoryGuid: e, topLevelCategoryGuid: t }) => {
+  const { categories: a } = g(), { getCategoryName: i } = s(), r = i(e);
+  return /* @__PURE__ */ c(n, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
+    /* @__PURE__ */ o(
+      m,
+      {
+        "aria-label": p(a.category_icon_label_aria, r),
+        mb: 4,
+        role: "img",
+        children: /* @__PURE__ */ o(l, { categoryGuid: t })
+      }
+    ),
+    /* @__PURE__ */ o(y, { variant: "Body", children: r })
+  ] });
+};
+export {
+  h as CategoryIconLabel
+};