@mx-cartographer/experiences 4.0.14-alpha.JB1 → 4.0.14-alpha.JB2

package/dist/StackedLineChart-CCqGRwvs.mjs

@@ -0,0 +1,342 @@
+import { jsx as r, jsxs as B } from "react/jsx-runtime";
+import H from "react";
+import N from "@mui/material/Box";
+import j from "@mui/material/Stack";
+import { useTheme as st } from "@mui/material/styles";
+import { LineChart as mt } from "@mui/x-charts";
+import { ae as pt, af as L, ag as R, ah as ct, aa as D, ai as lt, aj as b, a7 as w, ak as dt } from "./ConnectMiniWidget-Ep65CtHH.mjs";
+import "date-fns/getUnixTime";
+import "bowser";
+import "@honeybadger-io/react";
+import ut from "@mui/material/Button";
+import { Text as W } from "@kyper/mui";
+import "@mui/material/Tooltip";
+import "@mui/material/IconButton";
+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 "@mui/icons-material/KeyboardArrowLeftRounded";
+import "@mui/icons-material/KeyboardArrowRightRounded";
+import "date-fns/isSameDay";
+import "date-fns/isWithinInterval";
+import "@mui/material/styles/useTheme";
+import "d3";
+import { useTheme as gt, Card as ht, CardContent as yt, Box as vt } from "@mui/material";
+import "date-fns/intlFormat";
+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 "@mui/icons-material/ArrowBackOutlined";
+import "@mui/material/Card";
+import "@mui/material/CardHeader";
+import "@mui/material/CardContent";
+import "uuid";
+import "numeral";
+import "@mui/material/CircularProgress";
+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 "mobx";
+import "date-fns/differenceInDays";
+import "date-fns/fromUnixTime";
+import "@mui/x-data-grid-pro";
+import "date-fns";
+import "date-fns/getMonth";
+import "date-fns/isAfter";
+import "date-fns/addQuarters";
+import "date-fns/addWeeks";
+import "date-fns/nextDay";
+import "date-fns/parseISO";
+import "date-fns/setDate";
+import "date-fns/subWeeks";
+import "date-fns/getDay";
+import "date-fns/formatISO";
+const ft = ({
+  categoryGuids: { guid: d, topLevelGuid: u },
+  itemData: { dataIndex: s },
+  series: m,
+  xData: i
+}) => {
+  const n = gt(), c = m.data[s], a = i[s];
+  return c === void 0 || !a ? null : /* @__PURE__ */ r(ht, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ r(yt, { children: /* @__PURE__ */ B(vt, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+    /* @__PURE__ */ r(pt, { categoryGuid: d, topLevelCategoryGuid: u }),
+    /* @__PURE__ */ r(W, { color: n.palette.text.secondary, variant: "Small", children: L(a, R.MONTH_SHORT_YEAR) }),
+    /* @__PURE__ */ r(ct, { amount: String(c), bold: !0, formatString: "0,0", variant: "Body" })
+  ] }) }) });
+}, xt = ({
+  sx: d,
+  categoryGuids: u,
+  hoveredLegend: s,
+  onHoverLegend: m,
+  onClickLegend: i
+}) => {
+  const { isMobile: n } = D(), { getCategoryName: c } = lt();
+  return /* @__PURE__ */ r(j, { direction: "row", flexWrap: "wrap", gap: n ? 2 : 6, justifyContent: "start", sx: d, children: u.map(({ guid: a, top_level_guid: M }) => {
+    const v = s === a, f = b[a], g = b[M], h = f ?? g ?? b.default, _ = h + "33";
+    return /* @__PURE__ */ B(
+      ut,
+      {
+        onClick: () => i(a),
+        onMouseEnter: () => m(a),
+        onMouseLeave: () => m(null),
+        sx: {
+          color: "text.primary",
+          fontWeight: "normal",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          paddingX: 8,
+          paddingY: 4,
+          borderRadius: 1,
+          opacity: v ? 1 : 0.7
+        },
+        children: [
+          /* @__PURE__ */ r(
+            N,
+            {
+              sx: {
+                width: 16,
+                height: 16,
+                marginRight: n ? 5 : 10,
+                borderRadius: "2px",
+                backgroundColor: s ? v ? h : _ : h
+              }
+            }
+          ),
+          /* @__PURE__ */ r(W, { variant: "Body", children: c(a) })
+        ]
+      },
+      a
+    );
+  }) });
+}, ze = ({
+  onHoverArea: d,
+  onHoverPoint: u,
+  onHoverLegend: s,
+  onClickLegend: m,
+  stackedDatasets: i,
+  unstackedDatasets: n = [],
+  height: c,
+  width: a
+}) => {
+  const M = st(), { isMobile: v } = D(), f = H.useRef(null), [g, h] = H.useState(null), [_, y] = H.useState({
+    hoveredSeriesId: null,
+    hoveredAreaData: null,
+    isAreaHovered: !1,
+    cursorPos: { x: 0, y: 0 }
+  }), { hoveredSeriesId: l, hoveredAreaData: G, isAreaHovered: Y, cursorPos: x } = _, I = Y && l && G, E = !I, A = [...i, ...n], $ = A[0]?.dataset.length ?? 0, k = A.flatMap((t) => t.dataset.map((e) => e.x)), F = A.flatMap((t) => t.dataset.map((e) => e.y)), z = i[0]?.dataset?.map(
+    (t, e) => i.reduce((o, p) => o + p.dataset[e]?.y || 0, 0)
+  ) ?? [0], X = Math.max(...z), V = Math.max(
+    ...n.flatMap((t) => t.dataset.map((e) => e.y))
+  ), q = Math.floor(Math.min(...F) / 100) * 100, J = Math.ceil(Math.max(X, V) / 100) * 100, S = i.map((t, e) => ({
+    id: `stacked-${e}`,
+    guid: t.category_guid,
+    top_level_guid: t.top_level_category_guid,
+    area: !0,
+    color: i[e].category_color ?? M.palette.primary.main,
+    data: t.dataset.map((o) => o.y),
+    label: i[e].category_name,
+    stack: "total",
+    type: "line",
+    highlightScope: { highlight: "item" },
+    valueFormatter: (o) => w(o, "0,0")
+  })), P = n.map((t, e) => ({
+    id: `unstacked-${e}`,
+    guid: t.category_guid,
+    top_level_guid: t.top_level_category_guid,
+    area: !1,
+    color: t.category_color,
+    data: t.dataset.map((o) => o.y),
+    label: t.category_name,
+    type: "line",
+    valueFormatter: (o) => w(o, "0,0")
+  })), O = [...S, ...P], K = [
+    ...S.map(({ guid: t, top_level_guid: e }) => ({
+      guid: t,
+      top_level_guid: e
+    })),
+    ...P.map(({ guid: t, top_level_guid: e }) => ({
+      guid: t,
+      top_level_guid: e
+    }))
+  ], C = (t) => {
+    const o = t.startsWith("stacked-") ? i[parseInt(t.split("-")[1])] : n[parseInt(t.split("-")[1])];
+    return {
+      guid: o?.category_guid,
+      topLevelGuid: o?.top_level_category_guid
+    };
+  }, Q = (t) => {
+    h(t), s?.(t ?? "");
+  }, U = (t) => {
+    m?.(t ?? "");
+  }, Z = () => {
+    const t = C(String(l)).guid;
+    t && m?.(t);
+  }, tt = (t) => {
+    const e = String(t?.seriesId), o = C(e).guid, p = O.find((T) => T.id === e), rt = p && t?.dataIndex !== void 0, it = p && t?.dataIndex === void 0;
+    if (rt)
+      y({
+        hoveredSeriesId: e,
+        hoveredAreaData: null,
+        isAreaHovered: !1,
+        cursorPos: x
+      }), u?.(o);
+    else if (it) {
+      const T = p?.data.map((at, nt) => ({
+        x: k[nt],
+        y: at
+      })) ?? [];
+      y({
+        hoveredSeriesId: e,
+        hoveredAreaData: T,
+        isAreaHovered: !0,
+        cursorPos: x
+      }), d?.(o);
+    } else
+      y({
+        hoveredSeriesId: null,
+        hoveredAreaData: null,
+        isAreaHovered: !1,
+        cursorPos: x
+      });
+  }, et = (t) => {
+    const e = t.currentTarget.getBoundingClientRect();
+    y((o) => ({
+      ...o,
+      cursorPos: {
+        x: t.clientX - e.left,
+        y: t.clientY - e.top
+      }
+    }));
+  }, ot = {
+    p: 4,
+    "& .MuiBarLabel-root": {
+      fontSize: 10,
+      fontWeight: 600
+    },
+    "& .MuiAreaElement-root": {
+      opacity: 0.4,
+      transition: "opacity 0.3s ease"
+    },
+    "& .MuiAreaElement-root:hover": {
+      opacity: 1
+    },
+    '& [class*="MuiLineElement-series-unstacked-"]': {
+      strokeWidth: 3
+    },
+    ...g && S.reduce((t, e, o) => {
+      const p = `.MuiAreaElement-series-stacked-${o}`;
+      return t[p] = {
+        opacity: S[o].guid === g ? 0.9 : 0.2
+      }, t;
+    }, {})
+  };
+  return /* @__PURE__ */ r(N, { onMouseMove: et, ref: f, style: { position: "relative" }, children: /* @__PURE__ */ B(
+    j,
+    {
+      direction: { xs: "column", md: "column" },
+      spacing: { xs: 0, md: 4 },
+      sx: { width: "100%", position: "relative" },
+      children: [
+        /* @__PURE__ */ r(
+          mt,
+          {
+            height: c || 400,
+            margin: { bottom: 50 },
+            onAreaClick: Z,
+            onHighlightChange: tt,
+            series: O,
+            skipAnimation: !0,
+            slotProps: {
+              legend: {
+                hidden: !0
+              }
+            },
+            slots: {
+              itemContent: (t) => E && l ? /* @__PURE__ */ r(
+                ft,
+                {
+                  categoryGuids: C(l),
+                  xData: k,
+                  ...t
+                }
+              ) : null
+            },
+            sx: ot,
+            tooltip: {
+              trigger: E ? "item" : "none"
+            },
+            width: a,
+            xAxis: [
+              {
+                data: k,
+                scaleType: "time",
+                valueFormatter: (t) => L(t, R.MONTH_SHORT_YEAR),
+                tickNumber: $
+                // How many ticks to show on the x-axis
+              }
+            ],
+            yAxis: [
+              {
+                min: q,
+                max: J || 100
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          xt,
+          {
+            categoryGuids: K,
+            hoveredLegend: g,
+            onClickLegend: U,
+            onHoverLegend: Q,
+            sx: { px: v ? 0 : 24 }
+          }
+        ),
+        I && /* @__PURE__ */ r(
+          dt,
+          {
+            categoryGuids: C(l),
+            chartContainerRef: f,
+            cursorPosition: x,
+            hoveredAreaData: G.map((t) => ({
+              ...t,
+              x: L(t.x, R.MONTH_SHORT_YEAR)
+            }))
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  ze as S
+};
+//# sourceMappingURL=StackedLineChart-CCqGRwvs.mjs.map

package/dist/StackedLineChart-CCqGRwvs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedLineChart-CCqGRwvs.mjs","sources":["../src/common/components/charts/stackedlinechart/CustomPointTooltip.tsx","../src/common/components/charts/stackedlinechart/CustomLegend.tsx","../src/common/components/charts/StackedLineChart.tsx"],"sourcesContent":["import React from 'react'\nimport { Box, Card, CardContent, useTheme } from '@mui/material'\nimport { ChartsItemContentProps } from '@mui/x-charts'\nimport { Text } from '@kyper/mui'\n\nimport { CategoryIconLabel } from './CategoryIconLabel'\nimport { CurrencyText } from '../../CurrencyText'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../constants'\n\ninterface CustomPointTooltipProps extends ChartsItemContentProps<'line'> {\n  categoryGuids: { guid: string; topLevelGuid: string }\n  xData: Date[]\n}\n\n// Custom tooltip for hovering on line points\nexport const CustomPointTooltip: React.FC<CustomPointTooltipProps> = ({\n  categoryGuids: { guid, topLevelGuid },\n  itemData: { dataIndex },\n  series,\n  xData,\n}) => {\n  const theme = useTheme()\n  const dataValue = series.data[dataIndex as number]\n  const dataDate = xData[dataIndex as number]\n\n  if (dataValue === undefined || !dataDate) return null\n\n  return (\n    <Card sx={{ pt: 4, px: 8 }}>\n      <CardContent>\n        <Box alignItems=\"center\" display=\"flex\" flexDirection=\"column\">\n          <CategoryIconLabel categoryGuid={guid} topLevelCategoryGuid={topLevelGuid} />\n          <Text color={theme.palette.text.secondary} variant=\"Small\">\n            {formatDate(dataDate, DATE_FORMATS_INTL.MONTH_SHORT_YEAR)}\n          </Text>\n          <CurrencyText amount={String(dataValue)} bold={true} formatString=\"0,0\" variant=\"Body\" />\n        </Box>\n      </CardContent>\n    </Card>\n  )\n}\n","import React from 'react'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport { Text } from '@kyper/mui'\n\nimport { useScreenSize } from '../../../hooks'\nimport { CategoryColors } from '../../../constants'\nimport { useCategoryStore } from '../../../context'\n\ninterface CustomLegendProps {\n  sx?: object\n  categoryGuids: { guid: string; top_level_guid: string }[]\n  hoveredLegend: string | null\n  onHoverLegend: (label: string | null) => void\n  onClickLegend: (label: string | null) => void\n}\n\nexport const CustomLegend: React.FC<CustomLegendProps> = ({\n  sx,\n  categoryGuids,\n  hoveredLegend,\n  onHoverLegend,\n  onClickLegend,\n}) => {\n  const { isMobile } = useScreenSize()\n  const { getCategoryName } = useCategoryStore()\n\n  return (\n    <Stack direction=\"row\" flexWrap=\"wrap\" gap={isMobile ? 2 : 6} justifyContent=\"start\" sx={sx}>\n      {categoryGuids.map(({ guid, top_level_guid }) => {\n        const isHovered = hoveredLegend === guid\n        const categoryColor = CategoryColors[guid]\n        const topLevelCategoryColor = CategoryColors[top_level_guid]\n        const baseBackground = categoryColor ?? topLevelCategoryColor ?? CategoryColors.default\n        const transparentBackground = baseBackground + '33'\n        const hoveredBackground = isHovered ? baseBackground : transparentBackground\n        const backgroundColor = hoveredLegend ? hoveredBackground : baseBackground\n\n        return (\n          <Button\n            key={guid}\n            onClick={() => onClickLegend(guid)}\n            onMouseEnter={() => onHoverLegend(guid)}\n            onMouseLeave={() => onHoverLegend(null)}\n            sx={{\n              color: 'text.primary',\n              fontWeight: 'normal',\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              paddingX: 8,\n              paddingY: 4,\n              borderRadius: 1,\n              opacity: isHovered ? 1 : 0.7,\n            }}\n          >\n            <Box\n              sx={{\n                width: 16,\n                height: 16,\n                marginRight: isMobile ? 5 : 10,\n                borderRadius: '2px',\n                backgroundColor,\n              }}\n            />\n            <Text variant=\"Body\">{getCategoryName(guid)}</Text>\n          </Button>\n        )\n      })}\n    </Stack>\n  )\n}\n","import React from 'react'\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\nimport { LineSeriesType, LineChart, HighlightItemData } from '@mui/x-charts'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../constants'\nimport { formatCurrency } from '../../utils'\nimport { useScreenSize } from '../../hooks'\n\nimport CustomAreaTooltip from './stackedlinechart/CustomAreaTooltip'\nimport { CustomPointTooltip } from './stackedlinechart/CustomPointTooltip'\nimport { CustomLegend } from './stackedlinechart/CustomLegend'\n\ntype DataPoint = { x: Date; y: number }\ntype Dataset = DataPoint[]\n\ninterface StackedLineChartData {\n  top_level_category_guid: string\n  category_guid: string\n  category_name: string\n  category_color: string\n  dataset: Dataset\n}\n\ninterface StackedLineChartProps {\n  stackedDatasets: StackedLineChartData[]\n  unstackedDatasets?: StackedLineChartData[]\n  onHoverArea?: (category: string) => void\n  onHoverPoint?: (category: string) => void\n  onHoverLegend?: (category: string) => void\n  onClickLegend?: (category: string) => void\n  height?: number\n  width?: number\n}\n\nexport const StackedLineChart: React.FC<StackedLineChartProps> = ({\n  onHoverArea,\n  onHoverPoint,\n  onHoverLegend,\n  onClickLegend,\n  stackedDatasets,\n  unstackedDatasets = [],\n  height,\n  width,\n}) => {\n  const theme = useTheme()\n  const { isMobile } = useScreenSize()\n  const chartContainerRef = React.useRef<HTMLDivElement>(null)\n\n  const [hoveredLegend, setHoveredLegend] = React.useState<string | null>(null)\n  const [hoverState, setHoverState] = React.useState({\n    hoveredSeriesId: null as string | null,\n    hoveredAreaData: null as DataPoint[] | null,\n    isAreaHovered: false,\n    cursorPos: { x: 0, y: 0 },\n  })\n\n  const { hoveredSeriesId, hoveredAreaData, isAreaHovered, cursorPos } = hoverState\n  const showAreaTooltip = isAreaHovered && hoveredSeriesId && hoveredAreaData\n  const showPointTooltip = !showAreaTooltip\n\n  const datasets = [...stackedDatasets, ...unstackedDatasets]\n  const xTicks = datasets[0]?.dataset.length ?? 0\n  const xData = datasets.flatMap((data) => data.dataset.map((d) => d.x))\n  const yData = datasets.flatMap((data) => data.dataset.map((d) => d.y))\n\n  // Calculate max cumulative heights for stacked datasets\n  const cumulativeHeights = stackedDatasets[0]?.dataset?.map((_, i) =>\n    stackedDatasets.reduce((sum, dataset) => sum + dataset.dataset[i]?.y || 0, 0),\n  ) ?? [0]\n  const stackedMax = Math.max(...cumulativeHeights)\n  const unstackedMax = Math.max(\n    ...unstackedDatasets.flatMap((data) => data.dataset.map((d) => d.y)),\n  )\n\n  const yMin = Math.floor(Math.min(...yData) / 100) * 100\n  const yMax = Math.ceil(Math.max(stackedMax, unstackedMax) / 100) * 100\n\n  const stackedSeries = stackedDatasets.map((data, index) => ({\n    id: `stacked-${index}`,\n    guid: data.category_guid,\n    top_level_guid: data.top_level_category_guid,\n    area: true,\n    color: stackedDatasets[index].category_color ?? theme.palette.primary.main,\n    data: data.dataset.map((d) => d.y),\n    label: stackedDatasets[index].category_name,\n    stack: 'total',\n    type: 'line',\n    highlightScope: { highlight: 'item' },\n    valueFormatter: (value: number) => formatCurrency(value, '0,0'),\n  }))\n\n  const unstackedSeries = unstackedDatasets.map((data, index) => ({\n    id: `unstacked-${index}`,\n    guid: data.category_guid,\n    top_level_guid: data.top_level_category_guid,\n    area: false,\n    color: data.category_color,\n    data: data.dataset.map((d) => d.y),\n    label: data.category_name,\n    type: 'line',\n    valueFormatter: (value: number) => formatCurrency(value, '0,0'),\n  }))\n\n  const series = [...stackedSeries, ...unstackedSeries]\n  const guids = [\n    ...stackedSeries.map(({ guid, top_level_guid }) => ({\n      guid,\n      top_level_guid,\n    })),\n    ...unstackedSeries.map(({ guid, top_level_guid }) => ({\n      guid,\n      top_level_guid,\n    })),\n  ]\n\n  const getSeriesCategoryGuids = (seriesId: string) => {\n    const isStacked = seriesId.startsWith('stacked-')\n    const dataset = isStacked\n      ? stackedDatasets[parseInt(seriesId.split('-')[1])]\n      : unstackedDatasets[parseInt(seriesId.split('-')[1])]\n    return {\n      guid: dataset?.category_guid,\n      topLevelGuid: dataset?.top_level_category_guid,\n    }\n  }\n\n  const handleHoverLegend = (guid: string | null) => {\n    setHoveredLegend(guid)\n    onHoverLegend?.(guid ?? '')\n  }\n\n  const handleClickLegend = (guid: string | null) => {\n    onClickLegend?.(guid ?? '')\n  }\n\n  const handleClickArea = () => {\n    const clickedSeriesGuid = getSeriesCategoryGuids(String(hoveredSeriesId)).guid\n    if (clickedSeriesGuid) onClickLegend?.(clickedSeriesGuid)\n  }\n\n  const handleHighlightChange = (highlightedItem: HighlightItemData | null) => {\n    const hoveredSeriesId = String(highlightedItem?.seriesId)\n    const hoveredSeriesGuid = getSeriesCategoryGuids(hoveredSeriesId).guid\n    const hoveredSeries = series.find((s) => s.id === hoveredSeriesId)\n    const isPointHovered = hoveredSeries && highlightedItem?.dataIndex !== undefined\n    const isAreaHovered = hoveredSeries && highlightedItem?.dataIndex === undefined\n\n    if (isPointHovered) {\n      setHoverState({\n        hoveredSeriesId: hoveredSeriesId,\n        hoveredAreaData: null,\n        isAreaHovered: false,\n        cursorPos,\n      })\n      onHoverPoint?.(hoveredSeriesGuid)\n    } else if (isAreaHovered) {\n      const hoveredDataPoints =\n        hoveredSeries?.data.map((yValue, index) => ({\n          x: xData[index],\n          y: yValue,\n        })) ?? []\n\n      setHoverState({\n        hoveredSeriesId: hoveredSeriesId,\n        hoveredAreaData: hoveredDataPoints,\n        isAreaHovered: true,\n        cursorPos,\n      })\n      onHoverArea?.(hoveredSeriesGuid)\n    } else {\n      setHoverState({\n        hoveredSeriesId: null,\n        hoveredAreaData: null,\n        isAreaHovered: false,\n        cursorPos,\n      })\n    }\n  }\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const rect = event.currentTarget.getBoundingClientRect()\n    setHoverState((prev) => ({\n      ...prev,\n      cursorPos: {\n        x: event.clientX - rect.left,\n        y: event.clientY - rect.top,\n      },\n    }))\n  }\n\n  const customStyles = {\n    p: 4,\n    '& .MuiBarLabel-root': {\n      fontSize: 10,\n      fontWeight: 600,\n    },\n    '& .MuiAreaElement-root': {\n      opacity: 0.4,\n      transition: 'opacity 0.3s ease',\n    },\n    '& .MuiAreaElement-root:hover': {\n      opacity: 1,\n    },\n    '& [class*=\"MuiLineElement-series-unstacked-\"]': {\n      strokeWidth: 3,\n    },\n    ...(hoveredLegend &&\n      stackedSeries.reduce<Record<string, any>>((acc, _, index) => {\n        const selector = `.MuiAreaElement-series-stacked-${index}`\n        acc[selector] = {\n          opacity: stackedSeries[index].guid === hoveredLegend ? 0.9 : 0.2,\n        }\n        return acc\n      }, {})),\n  }\n\n  return (\n    <Box onMouseMove={handleMouseMove} ref={chartContainerRef} style={{ position: 'relative' }}>\n      <Stack\n        direction={{ xs: 'column', md: 'column' }}\n        spacing={{ xs: 0, md: 4 }}\n        sx={{ width: '100%', position: 'relative' }}\n      >\n        <LineChart\n          height={height || 400}\n          margin={{ bottom: 50 }}\n          onAreaClick={handleClickArea}\n          onHighlightChange={handleHighlightChange}\n          series={series as LineSeriesType[]}\n          skipAnimation={true}\n          slotProps={{\n            legend: {\n              hidden: true,\n            },\n          }}\n          slots={{\n            itemContent: (props) => {\n              return showPointTooltip && hoveredSeriesId ? (\n                <CustomPointTooltip\n                  categoryGuids={getSeriesCategoryGuids(hoveredSeriesId)}\n                  xData={xData}\n                  {...props}\n                />\n              ) : null\n            },\n          }}\n          sx={customStyles}\n          tooltip={{\n            trigger: showPointTooltip ? 'item' : 'none',\n          }}\n          width={width}\n          xAxis={[\n            {\n              data: xData,\n              scaleType: 'time',\n              valueFormatter: (value: Date) =>\n                formatDate(value, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n              tickNumber: xTicks, // How many ticks to show on the x-axis\n            },\n          ]}\n          yAxis={[\n            {\n              min: yMin,\n              max: yMax || 100,\n            },\n          ]}\n        />\n        <CustomLegend\n          categoryGuids={guids}\n          hoveredLegend={hoveredLegend}\n          onClickLegend={handleClickLegend}\n          onHoverLegend={handleHoverLegend}\n          sx={{ px: isMobile ? 0 : 24 }}\n        />\n\n        {showAreaTooltip && (\n          <CustomAreaTooltip\n            categoryGuids={getSeriesCategoryGuids(hoveredSeriesId)}\n            chartContainerRef={chartContainerRef}\n            cursorPosition={cursorPos}\n            hoveredAreaData={hoveredAreaData.map((point) => ({\n              ...point,\n              x: formatDate(point.x, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n            }))}\n          />\n        )}\n      </Stack>\n    </Box>\n  )\n}\n"],"names":["CustomPointTooltip","guid","topLevelGuid","dataIndex","series","xData","theme","useTheme","dataValue","dataDate","Card","jsx","CardContent","Box","CategoryIconLabel","Text","formatDate","DATE_FORMATS_INTL","CurrencyText","CustomLegend","sx","categoryGuids","hoveredLegend","onHoverLegend","onClickLegend","isMobile","useScreenSize","getCategoryName","useCategoryStore","Stack","top_level_guid","isHovered","categoryColor","CategoryColors","topLevelCategoryColor","baseBackground","transparentBackground","jsxs","Button","StackedLineChart","onHoverArea","onHoverPoint","stackedDatasets","unstackedDatasets","height","width","chartContainerRef","React","setHoveredLegend","hoverState","setHoverState","hoveredSeriesId","hoveredAreaData","isAreaHovered","cursorPos","showAreaTooltip","showPointTooltip","datasets","xTicks","data","d","yData","cumulativeHeights","_","i","sum","dataset","stackedMax","unstackedMax","yMin","yMax","stackedSeries","index","value","formatCurrency","unstackedSeries","guids","getSeriesCategoryGuids","seriesId","handleHoverLegend","handleClickLegend","handleClickArea","clickedSeriesGuid","handleHighlightChange","highlightedItem","hoveredSeriesGuid","hoveredSeries","s","isPointHovered","hoveredDataPoints","yValue","handleMouseMove","event","rect","prev","customStyles","acc","selector","LineChart","props","CustomAreaTooltip","point"],"mappings":"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"}