@mx-cartographer/experiences 9.2.4-alpha.al2 → 9.3.0-alpha.bb1

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

@@ -0,0 +1,194 @@
+import { formatCurrency as A, generateEqualIntervals as P } from "../../../../core/utils/NumberFormatting/index.es.js";
+import { getMarkerShape as lt } from "../linechart/utils/markerShapes/index.es.js";
+import mt from "../linechart/CustomLegend/index.es.js";
+import { CustomLine as pt } from "../linechart/CustomLine/index.es.js";
+import { CustomMark as ft } from "../linechart/CustomMark/index.es.js";
+import { CustomTooltip as ct } from "../linechart/CustomTooltip/index.es.js";
+import "react";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { useTheme as ht } from "@mui/material/styles";
+import yt from "@mui/material/Box";
+import { BarPlot as dt } from "@mui/x-charts/BarChart";
+import { ChartContainer as ut } from "@mui/x-charts/ChartContainer";
+import { ChartsAxisHighlight as xt } from "@mui/x-charts/ChartsAxisHighlight";
+import { ChartsReferenceLine as Mt } from "@mui/x-charts/ChartsReferenceLine";
+import { ChartsTooltipContainer as gt } from "@mui/x-charts/ChartsTooltip";
+import { ChartsXAxis as kt } from "@mui/x-charts/ChartsXAxis";
+import { ChartsYAxis as bt } from "@mui/x-charts/ChartsYAxis";
+import { AreaPlot as Lt, LinePlot as Ct, MarkPlot as Tt } from "@mui/x-charts/LineChart";
+var Yt = ({ areaColor: f, axisColor: i, baseline: R = "max", chartFor: u, chartXaxisSx: w, chartYaxisSx: D, colors: g, curveType: G = "linear", customLegendVariant: I, customLegendSx: $, customLegendBoxSx: j, customTooltipLabels: E, datasets: c, height: O, isCurrency: W, isGraphClippingXAxis: q = !1, labels: k, labelBackgroundColor: b, labelFontColor: z, labelFontSize: H, margin: N, markHandlers: S, markStyles: X, minRange: Y, maxRange: _, onItemClick: x, peerAverage: L, showArea: C = !1, showAverage: T = !1, showAxisHighlight: B = !1, showBars: M = !1, showLegend: J = !1, showMark: K = !0, showMarkLabel: Q = !1, showTooltip: U = !1, showXAxis: V = !1, showXAxisTicks: Z = !1, showYAxis: F = !1, showYAxisTicks: tt = !1, title: et, useCustomMark: at = !1, valueFormatterString: o, width: rt, xAxisScaleType: ot }) => {
+  const a = ht(), it = c.flat().map((t) => t.x), s = c.flat().map((t) => t.y), v = L || Math.round(s.reduce((t, n) => n + t, 0) / s.length), l = Math.floor(Math.min(...s) / 100) * 100, m = Math.ceil(Math.max(...s) / 100) * 100, h = c.map((t, n) => ({
+    type: M ? "bar" : "line",
+    curve: G,
+    color: M ? a.palette.chart?.chart6 : g[n] ?? a.palette.primary.main,
+    data: t.map((r) => r.y),
+    area: C,
+    baseline: R,
+    showMark: !0,
+    shape: lt(n),
+    valueFormatter: (r) => o ? A(r || 0, o) : String(r)
+  })), nt = {
+    top: 60,
+    right: 35,
+    bottom: 25,
+    left: -10,
+    ...N
+  };
+  let p = Y ?? l, y = _ ?? m;
+  if (u === "networthChart") {
+    const t = m - l, n = t < m * 0.05 ? 0.25 : 0.2, r = Math.max(t * n, m * 0.015);
+    p = l - r < 0 ? l : l - r, y = m + r;
+  }
+  const st = () => {
+    if (u === "creditOverTime") return P(p, 850, 5);
+    if (u === "networthChart") return P(p, y, 5);
+  };
+  return /* @__PURE__ */ d(yt, {
+    sx: {
+      position: "relative",
+      touchAction: "pan-y",
+      "& svg": {
+        touchAction: "pan-y",
+        userSelect: "none"
+      },
+      "& .recharts-wrapper": { touchAction: "pan-y" }
+    },
+    children: [/* @__PURE__ */ d(ut, {
+      height: O,
+      margin: nt,
+      series: h,
+      sx: {
+        "& .MuiBarLabel-root": {
+          fontSize: 10,
+          fontWeight: 600
+        },
+        "& .MuiAreaElement-root": { opacity: 0.15 },
+        "& .MuiChartsAxis-tickLabel > tspan": { fontFamily: a.typography.body2.fontFamily },
+        "& .MuiLineChart-markLabel": { fontFamily: a.typography.body2.fontFamily }
+      },
+      width: rt,
+      xAxis: [{
+        data: it,
+        scaleType: ot || (M ? "band" : "point")
+      }],
+      yAxis: [{
+        tickInterval: st(),
+        min: q ? -22 : p,
+        max: y || 100,
+        colorMap: C && h.length < 2 ? {
+          type: "continuous",
+          min: p,
+          max: y,
+          color: [a.palette.background.paper, g[0] ?? a.palette.primary.main]
+        } : void 0,
+        valueFormatter: (t) => o ? A(t, o) : String(t),
+        width: 62
+      }],
+      children: [
+        T && /* @__PURE__ */ e(Mt, {
+          lineStyle: {
+            stroke: b ? a.palette.neutral.main : a.palette.neutral.dark,
+            strokeDasharray: "10, 8",
+            strokeWidth: 2
+          },
+          y: v
+        }),
+        /* @__PURE__ */ e(Lt, {
+          onItemClick: x,
+          ...f && { slots: { area: (t) => /* @__PURE__ */ d("g", { children: [/* @__PURE__ */ e("defs", { children: /* @__PURE__ */ d("linearGradient", {
+            id: "customGradient",
+            x1: "0",
+            x2: "0",
+            y1: "0",
+            y2: "1",
+            children: [/* @__PURE__ */ e("stop", {
+              offset: "0%",
+              stopColor: f
+            }), /* @__PURE__ */ e("stop", {
+              offset: "100%",
+              stopColor: f,
+              stopOpacity: 0.02
+            })]
+          }) }), /* @__PURE__ */ e("path", {
+            ...t,
+            fill: "url(#customGradient)"
+          })] }) } }
+        }),
+        /* @__PURE__ */ e(Ct, {
+          onItemClick: x,
+          slots: { line: (t) => /* @__PURE__ */ e(pt, {
+            ...t,
+            lineColor: f ?? t.ownerState.color ?? a.palette.primary.main
+          }) }
+        }),
+        /* @__PURE__ */ e(Tt, {
+          onItemClick: x,
+          slots: at ? { mark: (t) => /* @__PURE__ */ e(ft, {
+            handlers: S,
+            labelBackgroundColor: b,
+            labelFontColor: z,
+            labelFontSize: H,
+            showLabel: Q,
+            showMark: K || t.dataIndex === c[0].length - 1,
+            style: X?.(t.dataIndex) ?? {},
+            valueFormatterString: o,
+            yData: s,
+            ...t
+          }) } : void 0
+        }),
+        /* @__PURE__ */ e(dt, {
+          barLabel: (t) => Number(t.value) > 0 ? `$${t.value}` : null,
+          borderRadius: 10
+        }),
+        /* @__PURE__ */ e(kt, {
+          disableLine: !V,
+          disableTicks: !Z,
+          slotProps: i ? {
+            axisLine: { style: { stroke: i } },
+            axisTick: { style: { stroke: i } }
+          } : {},
+          sx: { ...w }
+        }),
+        /* @__PURE__ */ e(bt, {
+          disableLine: !F,
+          disableTicks: !tt,
+          slotProps: i ? {
+            axisLine: { style: { stroke: i } },
+            axisTick: { style: { stroke: i } }
+          } : {},
+          sx: { ...D }
+        }),
+        B && /* @__PURE__ */ e(xt, { x: "line" }),
+        U && /* @__PURE__ */ e(gt, {
+          trigger: "axis",
+          children: /* @__PURE__ */ e(ct, {
+            customLabels: E,
+            isCurrency: W,
+            labels: k,
+            series: h,
+            valueFormatterString: o
+          })
+        })
+      ]
+    }), J && /* @__PURE__ */ e(mt, {
+      average: T ? v : void 0,
+      customLegendBoxSx: j,
+      customLegendVariant: I,
+      labels: k,
+      series: h,
+      style: {
+        position: "absolute",
+        top: 16,
+        left: 16,
+        ...$
+      },
+      title: et,
+      valueFormatterString: o
+    })]
+  });
+};
+export {
+  Yt as LineChart
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/common/components/charts/LineChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport type { SxProps } from '@mui/material/styles'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { AllSeriesType } from '@mui/x-charts'\nimport { BarPlot } from '@mui/x-charts/BarChart'\nimport { ChartContainer as ResponsiveChartContainer } from '@mui/x-charts/ChartContainer'\nimport { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'\nimport { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'\nimport { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip'\nimport { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'\nimport { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'\nimport { AreaPlot, LinePlot, MarkPlot } from '@mui/x-charts/LineChart'\n\nimport CustomLegend from './linechart/CustomLegend'\nimport { getMarkerShape } from './linechart/utils/markerShapes'\nimport { CustomLine } from './linechart/CustomLine'\nimport { CustomMark, MarkHandlers } from './linechart/CustomMark'\nimport { CustomTooltip } from './linechart/CustomTooltip'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { generateEqualIntervals } from '../../../core/utils/NumberFormatting'\n\nexport type LineChartDataset = { x: string; y: number }[]\nexport type LineChartLabel = string | { label: string; amount: number }\nexport type TooltipLabel = LineChartLabel & { header?: string }\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  areaColor?: string\n  axisColor?: string\n  baseline?: string\n  chartFor?: string\n  chartXaxisSx?: SxProps\n  chartYaxisSx?: SxProps\n  // Because theme chart colors are typed string|undefined\n  colors: (string | undefined)[]\n  curveType?: LineChartCurve\n  customLegendVariant?: string\n  customLegendSx?: SxProps\n  customLegendBoxSx?: SxProps\n  customTooltipLabels?: TooltipLabel[][]\n  datasets: LineChartDataset[]\n  height?: number\n  isCurrency?: boolean\n  isGraphClippingXAxis?: boolean\n  labels: LineChartLabel[]\n  labelBackgroundColor?: string\n  labelFontColor?: string\n  labelFontSize?: number\n  margin?: { top?: number; right?: number; bottom?: number; left?: number }\n  markHandlers?: MarkHandlers\n  markStyles?: (markIndex: number) => React.CSSProperties & {\n    markLabelStyles?: React.CSSProperties\n  }\n  minRange?: number\n  maxRange?: number\n  onItemClick?: () => void\n  peerAverage?: number\n  showArea?: boolean\n  showAverage?: boolean\n  showAxisHighlight?: boolean\n  showBars?: boolean\n  showLegend?: boolean\n  showMark?: boolean\n  showMarkLabel?: boolean\n  showTooltip?: boolean\n  showXAxis?: boolean\n  showXAxisTicks?: boolean\n  showYAxis?: boolean\n  showYAxisTicks?: boolean\n  tickIntervals?: any[] | 'auto' | ((value: any, index: number) => boolean) | undefined\n  title?: string\n  useCustomMark?: boolean\n  valueFormatterString?: string\n  width?: number\n  xAxisScaleType?: 'band' | 'point'\n}\n\n// TODO: Remove negative values and use a proper layout to support X-Charts v8\n\nexport const LineChart: React.FC<LineChartProps> = ({\n  areaColor,\n  axisColor,\n  baseline = 'max',\n  chartFor,\n  chartXaxisSx,\n  chartYaxisSx,\n  colors,\n  curveType = 'linear',\n  customLegendVariant,\n  customLegendSx,\n  customLegendBoxSx,\n  customTooltipLabels,\n  datasets,\n  height,\n  isCurrency,\n  isGraphClippingXAxis = false,\n  labels,\n  labelBackgroundColor,\n  labelFontColor,\n  labelFontSize,\n  margin,\n  markHandlers,\n  markStyles,\n  minRange,\n  maxRange,\n  onItemClick,\n  peerAverage,\n  showArea = false,\n  showAverage = false,\n  showAxisHighlight = false,\n  showBars = false,\n  showLegend = false,\n  showMark = true,\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  xAxisScaleType,\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 = peerAverage\n    ? peerAverage\n    : 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      shape: getMarkerShape(index),\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: 25,\n    left: -10,\n  }\n\n  // Merge default margin with any provided custom margin\n  const chartMargin = {\n    ...defaultMargin,\n    ...margin,\n  }\n\n  let rangeMin = minRange ?? yMin\n  let rangeMax = maxRange ?? yMax\n  if (chartFor === 'networthChart') {\n    const valueRange = yMax - yMin\n\n    const paddingRatio = valueRange < yMax * 0.05 ? 0.25 : 0.2\n    const padding = Math.max(valueRange * paddingRatio, yMax * 0.015)\n    rangeMin = yMin - padding < 0 ? yMin : yMin - padding\n    rangeMax = yMax + padding\n  }\n\n  const getTickInterval = () => {\n    if (chartFor === 'creditOverTime') {\n      return generateEqualIntervals(rangeMin, 850, 5)\n    } else if (chartFor === 'networthChart') {\n      return generateEqualIntervals(rangeMin, rangeMax, 5)\n    }\n    return undefined\n  }\n  return (\n    <Box\n      sx={{\n        position: 'relative',\n        touchAction: 'pan-y', // Allow vertical scrolling\n        '& svg': {\n          touchAction: 'pan-y', // Allow vertical scrolling on SVG\n          userSelect: 'none', // Prevent text selection\n        },\n        '& .recharts-wrapper': {\n          touchAction: 'pan-y', // For Recharts library specifically\n        },\n      }}\n    >\n      <ResponsiveChartContainer\n        height={height}\n        margin={chartMargin}\n        series={series as AllSeriesType[]}\n        sx={{\n          '& .MuiBarLabel-root': {\n            fontSize: 10,\n            fontWeight: 600,\n          },\n          '& .MuiAreaElement-root': {\n            opacity: 0.15,\n          },\n          '& .MuiChartsAxis-tickLabel > tspan': {\n            fontFamily: theme.typography.body2.fontFamily,\n          },\n          '& .MuiLineChart-markLabel': {\n            fontFamily: theme.typography.body2.fontFamily,\n          },\n        }}\n        width={width}\n        xAxis={[{ data: xData, scaleType: xAxisScaleType || (showBars ? 'band' : 'point') }]}\n        yAxis={[\n          {\n            tickInterval: getTickInterval(),\n            min: isGraphClippingXAxis ? -22 : rangeMin,\n            max: rangeMax || 100,\n            colorMap:\n              showArea && series.length < 2\n                ? {\n                    type: 'continuous',\n                    min: rangeMin,\n                    max: rangeMax,\n                    color: [\n                      theme.palette.background.paper,\n                      colors[0] ?? theme.palette.primary.main,\n                    ],\n                  }\n                : undefined,\n            valueFormatter: (value: number) =>\n              valueFormatterString ? formatCurrency(value, valueFormatterString) : String(value),\n            width: 62,\n          },\n        ]}\n      >\n        {/** Provides the average line - positioned first to be behind other elements **/}\n        {showAverage && (\n          <ChartsReferenceLine\n            lineStyle={{\n              stroke: labelBackgroundColor\n                ? theme.palette.neutral.main\n                : theme.palette.neutral.dark,\n              strokeDasharray: '10, 8',\n              strokeWidth: 2,\n            }}\n            y={average}\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          onItemClick={onItemClick}\n          {...(areaColor && {\n            slots: {\n              area: (props) => {\n                return (\n                  <g>\n                    <defs>\n                      <linearGradient id=\"customGradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n                        <stop offset=\"0%\" stopColor={areaColor} />\n                        <stop offset=\"100%\" stopColor={areaColor} stopOpacity={0.02} />\n                      </linearGradient>\n                    </defs>\n                    <path {...props} fill={`url(#customGradient)`} />\n                  </g>\n                )\n              },\n            },\n          })}\n        />\n\n        {/** Line plot provides the data line **/}\n        <LinePlot\n          onItemClick={onItemClick}\n          slots={{\n            line: (props) => (\n              <CustomLine\n                {...props}\n                lineColor={areaColor ?? props.ownerState.color ?? theme.palette.primary.main}\n              />\n            ),\n          }}\n        />\n\n        {/** Mark plot provides the circles **/}\n        <MarkPlot\n          onItemClick={onItemClick}\n          slots={\n            useCustomMark\n              ? {\n                  mark: (props) => {\n                    return (\n                      <CustomMark\n                        handlers={markHandlers}\n                        labelBackgroundColor={labelBackgroundColor}\n                        labelFontColor={labelFontColor}\n                        labelFontSize={labelFontSize}\n                        showLabel={showMarkLabel}\n                        showMark={showMark || props.dataIndex === datasets[0].length - 1}\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          sx={{ ...chartXaxisSx }}\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          sx={{ ...chartYaxisSx }}\n        />\n\n        {/* Add vertical crosshair on hover */}\n        {showAxisHighlight && <ChartsAxisHighlight x=\"line\" />}\n\n        {showTooltip && (\n          <ChartsTooltipContainer trigger=\"axis\">\n            <CustomTooltip\n              customLabels={customTooltipLabels}\n              isCurrency={isCurrency}\n              labels={labels}\n              series={series}\n              valueFormatterString={valueFormatterString}\n            />\n          </ChartsTooltipContainer>\n        )}\n      </ResponsiveChartContainer>\n\n      {showLegend && (\n        <CustomLegend\n          average={showAverage ? average : undefined}\n          customLegendBoxSx={customLegendBoxSx}\n          customLegendVariant={customLegendVariant}\n          labels={labels}\n          series={series}\n          style={{\n            position: 'absolute',\n            top: 16,\n            left: 16,\n            ...customLegendSx,\n          }}\n          title={title}\n          valueFormatterString={valueFormatterString}\n        />\n      )}\n    </Box>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,26 @@
+var e = {
+  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"
+}, L = [
+  "circle",
+  "square",
+  "wye",
+  "star",
+  "cross",
+  "triangle",
+  "diamond"
+];
+function a(r) {
+  return L[r % L.length];
+}
+export {
+  e as MARKER_SHAPE_PATHS,
+  a as getMarkerShape
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/LineChart/utils/markerShapes/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../../src/common/components/charts/linechart/utils/markerShapes.ts"],"sourcesContent":["export type MarkerShape = 'circle' | 'square' | 'wye' | 'star' | 'cross' | 'triangle' | 'diamond'\n\n// SVG path data for each shape, centered at origin, sized to match current ~9px circle\nexport const MARKER_SHAPE_PATHS: Record<MarkerShape, string> = {\n  circle: 'M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0',\n  square: 'M-4,-4L4,-4L4,4L-4,4Z',\n  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',\n  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',\n  cross:\n    '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',\n  triangle: 'M0,-5L4.33,3.5L-4.33,3.5Z',\n  diamond: 'M0,-5.5L3.9,0L0,5.5L-3.9,0Z',\n}\n\n// Default shape sequence assigned to series by index\nconst DEFAULT_SHAPES: MarkerShape[] = [\n  'circle',\n  'square',\n  'wye',\n  'star',\n  'cross',\n  'triangle',\n  'diamond',\n]\n\nexport function getMarkerShape(seriesIndex: number): MarkerShape {\n  return DEFAULT_SHAPES[seriesIndex % DEFAULT_SHAPES.length]\n}\n"],"mappings":"AAGA,IAAa,IAAkD;AAAA,EAC7D,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OACE;AAAA,EACF,UAAU;AAAA,EACV,SAAS;AACX,GAGM,IAAgC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAAgB,EAAe,GAAkC;AAC/D,SAAO,EAAe,IAAc,EAAe,MAAA;AACrD"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/common/components/charts/stackedlinechart/CategoryIconLabel.tsx"],"sourcesContent":["import React from 'react'\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport { useCategoryStore, useGlobalCopyStore } from '../../../context'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\n\nexport const CategoryIconLabel: React.FC<{\n  categoryGuid: string\n  topLevelCategoryGuid: string\n}> = ({ categoryGuid, topLevelCategoryGuid }) => {\n  const { categories: copy } = useGlobalCopyStore()\n  const { getCategoryName } = useCategoryStore()\n  const categoryName = getCategoryName(categoryGuid)\n\n  return (\n    <Stack alignItems=\"center\" direction=\"column\" gap=\"8\" justifyContent=\"center\" mb={4}>\n      <Box\n        aria-label={buildDynamicCopy(copy.category_icon_label_aria, categoryName) as string}\n        mb={4}\n        role=\"img\"\n      >\n        <CategoryIcon categoryGuid={topLevelCategoryGuid} />\n      </Box>\n      <Text variant=\"body1\">{categoryName}</Text>\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;AAQA,IAAa,IAAA,CAGP,EAAE,cAAA,GAAc,sBAAA,EAAA,MAA2B;AAC/C,QAAM,EAAE,YAAY,EAAA,IAAS,EAAmB,GAC1C,EAAE,iBAAA,EAAA,IAAoB,EAAiB,GACvC,IAAe,EAAgB,CAAY;AAEjD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,WAAU;AAAA,IAAS,KAAI;AAAA,IAAI,gBAAe;AAAA,IAAS,IAAI;AAAA,cAAlF,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY,EAAiB,EAAK,0BAA0B,CAAY;AAAA,MACxE,IAAI;AAAA,MACJ,MAAK;AAAA,gBAEL,gBAAA,EAAC,GAAD,EAAc,cAAc,EAAuB,CAAA;AAAA,IAChD,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAM,SAAQ;AAAA,gBAAS;AAAA,IAAmB,CAAA,CACrC;AAAA;AAEX"}

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

@@ -0,0 +1,97 @@
+import { CurrencyText as u } from "../../../CurrencyText/index.es.js";
+import { CategoryIconLabel as j } from "../CategoryIconLabel/index.es.js";
+import R, { useEffect as E, useRef as G, useState as S } from "react";
+import { observer as B } from "mobx-react-lite";
+import { Text as h } from "@mxenabled/mxui";
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { useTheme as I } from "@mui/material/styles";
+import y from "@mui/material/Box";
+import L from "@mui/material/Card";
+import z from "@mui/material/CardContent";
+import x from "@mui/material/Divider";
+import g from "@mui/material/Grid";
+var F = ({ categoryGuids: { guid: b, topLevelGuid: C }, hoveredAreaData: l, cursorPosition: e, chartContainerRef: a }) => {
+  const w = I(), f = G(null), [s, v] = S({
+    x: e.x,
+    y: e.y
+  });
+  if (E(() => {
+    (() => {
+      const o = f.current, p = a.current;
+      if (!o || !p) return;
+      const i = o.getBoundingClientRect(), c = p.getBoundingClientRect();
+      let n = e.x, d = e.y;
+      n + i.width * 2 > c.right ? n = e.x - i.width : n - i.width < c.left && (n = e.x), d + i.height * 2 > c.bottom && (d = e.y - i.height), v({
+        x: n,
+        y: d
+      });
+    })();
+  }, [e, a]), !l) return null;
+  const T = l.reduce((r, o) => r + o.y, 0);
+  return /* @__PURE__ */ t(L, {
+    ref: f,
+    sx: {
+      position: "absolute",
+      top: s.y,
+      left: s.x,
+      width: 250,
+      pointerEvents: "none"
+    },
+    children: /* @__PURE__ */ m(z, { children: [
+      /* @__PURE__ */ m(y, {
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "column",
+        children: [
+          /* @__PURE__ */ t(j, {
+            categoryGuid: b,
+            topLevelCategoryGuid: C
+          }),
+          /* @__PURE__ */ t(h, {
+            variant: "body2",
+            children: `${l.length}-month total`
+          }),
+          /* @__PURE__ */ t(u, {
+            amount: T,
+            bold: !0,
+            formatString: "0,0",
+            variant: "body2"
+          })
+        ]
+      }),
+      /* @__PURE__ */ t(x, { sx: {
+        my: 16,
+        width: "100%"
+      } }),
+      /* @__PURE__ */ t(g, {
+        container: !0,
+        children: l.map((r, o) => /* @__PURE__ */ m(R.Fragment, { children: [o > 0 && o % 3 === 0 && /* @__PURE__ */ t(x, { sx: {
+          my: 16,
+          width: "100%"
+        } }), /* @__PURE__ */ t(g, {
+          size: 4,
+          children: /* @__PURE__ */ m(y, {
+            alignItems: "center",
+            display: "flex",
+            flexDirection: "column",
+            children: [/* @__PURE__ */ t(h, {
+              color: w.palette.text.secondary,
+              variant: "caption",
+              children: r.x
+            }), /* @__PURE__ */ t(u, {
+              amount: r.y,
+              bold: !0,
+              formatString: "0,0",
+              variant: "body1"
+            })]
+          })
+        })] }, o))
+      })
+    ] })
+  });
+}, N = B(F);
+export {
+  N as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/StackedLineChart/CustomAreaTooltip/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/common/components/charts/stackedlinechart/CustomAreaTooltip.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport Divider from '@mui/material/Divider'\nimport Grid from '@mui/material/Grid'\nimport { Text } from '@mxenabled/mxui'\nimport { useTheme } from '@mui/material/styles'\n\nimport { CategoryIconLabel } from './CategoryIconLabel'\nimport { CurrencyText } from '../../CurrencyText'\n\ntype DataPoint = { x: string | number; y: number }\n\nconst CustomAreaTooltip: React.FC<{\n  categoryGuids: { guid: string; topLevelGuid: string }\n  hoveredAreaData: DataPoint[]\n  cursorPosition: { x: number; y: number }\n  chartContainerRef: React.RefObject<HTMLDivElement | null>\n}> = ({\n  categoryGuids: { guid, topLevelGuid },\n  hoveredAreaData,\n  cursorPosition,\n  chartContainerRef,\n}) => {\n  const theme = useTheme()\n  const tooltipRef = useRef<HTMLDivElement>(null)\n  const [adjustedPos, setAdjustedPos] = useState({ x: cursorPosition.x, y: cursorPosition.y })\n\n  useEffect(() => {\n    const adjustTooltipPosition = () => {\n      const tooltipEl = tooltipRef.current\n      const chartEl = chartContainerRef.current\n\n      if (!tooltipEl || !chartEl) return\n\n      const tooltipRect = tooltipEl.getBoundingClientRect()\n      const containerRect = chartEl.getBoundingClientRect()\n\n      let newX = cursorPosition.x\n      let newY = cursorPosition.y\n\n      // If the tooltip overflows the right or left edge\n      if (newX + tooltipRect.width * 2 > containerRect.right) {\n        // Move the tooltip to the left of the cursor\n        newX = cursorPosition.x - tooltipRect.width\n      } else if (newX - tooltipRect.width < containerRect.left) {\n        // Move the tooltip to the right of the cursor\n        newX = cursorPosition.x\n      }\n\n      // If the tooltip overflows the bottom edge\n      if (newY + tooltipRect.height * 2 > containerRect.bottom) {\n        // Move the tooltip to the top of the cursor\n        newY = cursorPosition.y - tooltipRect.height\n      }\n\n      setAdjustedPos({ x: newX, y: newY })\n    }\n\n    adjustTooltipPosition()\n  }, [cursorPosition, chartContainerRef])\n\n  if (!hoveredAreaData) return null\n\n  const seriesSum = hoveredAreaData.reduce((sum, dataPoint) => sum + dataPoint.y, 0)\n\n  return (\n    <Card\n      ref={tooltipRef}\n      sx={{\n        position: 'absolute',\n        top: adjustedPos.y,\n        left: adjustedPos.x,\n        width: 250,\n        pointerEvents: 'none',\n      }}\n    >\n      <CardContent>\n        <Box alignItems=\"center\" display=\"flex\" flexDirection=\"column\">\n          <CategoryIconLabel categoryGuid={guid} topLevelCategoryGuid={topLevelGuid} />\n          <Text variant=\"body2\">{`${hoveredAreaData.length}-month total`}</Text>\n          <CurrencyText amount={seriesSum} bold={true} formatString=\"0,0\" variant=\"body2\" />\n        </Box>\n\n        <Divider sx={{ my: 16, width: '100%' }} />\n\n        <Grid container={true}>\n          {hoveredAreaData.map((dataPoint, index) => (\n            <React.Fragment key={index}>\n              {index > 0 && index % 3 === 0 && <Divider sx={{ my: 16, width: '100%' }} />}\n              <Grid size={4}>\n                <Box alignItems=\"center\" display=\"flex\" flexDirection=\"column\">\n                  <Text color={theme.palette.text.secondary} variant=\"caption\">\n                    {dataPoint.x}\n                  </Text>\n                  <CurrencyText\n                    amount={dataPoint.y}\n                    bold={true}\n                    formatString=\"0,0\"\n                    variant=\"body1\"\n                  />\n                </Box>\n              </Grid>\n            </React.Fragment>\n          ))}\n        </Grid>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport default observer(CustomAreaTooltip)\n"],"mappings":"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"}

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

@@ -0,0 +1,54 @@
+import { CategoryColors as t } from "../../../../../core/constants/Category/index.es.js";
+import { useCategoryStore as x } from "../../../../context/hooks/index.es.js";
+import { useScreenSize as y } from "../../../../hooks/useScreenSize/index.es.js";
+import "react";
+import h from "@mui/material/Stack";
+import { Text as b } from "@mxenabled/mxui";
+import k from "@mui/material/Button";
+import { jsx as e, jsxs as j } from "react/jsx-runtime";
+import B from "@mui/material/Box";
+var N = ({ sx: m, categoryGuids: c, hoveredLegend: n, legendRef: p, onHoverLegend: a, onClickLegend: l }) => {
+  const { isMobile: i } = y(), { getCategoryName: f } = x();
+  return /* @__PURE__ */ e(h, {
+    direction: "row",
+    flexWrap: "wrap",
+    gap: i ? 2 : 6,
+    justifyContent: "start",
+    ref: p,
+    sx: m,
+    children: c.map(({ guid: o, top_level_guid: d }) => {
+      const s = n === o, u = t[o], C = t[d], r = u ?? C ?? t.default, g = r + "33";
+      return /* @__PURE__ */ j(k, {
+        onClick: () => l(o),
+        onMouseEnter: () => a(o),
+        onMouseLeave: () => a(null),
+        sx: {
+          color: "text.primary",
+          fontWeight: "normal",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          paddingX: 8,
+          paddingY: 4,
+          borderRadius: 1,
+          opacity: s ? 1 : 0.7
+        },
+        children: [/* @__PURE__ */ e(B, { sx: {
+          width: 16,
+          height: 16,
+          marginRight: i ? 5 : 10,
+          borderRadius: "2px",
+          backgroundColor: n ? s ? r : g : r
+        } }), /* @__PURE__ */ e(b, {
+          variant: "body1",
+          children: f(o)
+        })]
+      }, o);
+    })
+  });
+};
+export {
+  N as CustomLegend
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/StackedLineChart/CustomLegend/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/common/components/charts/stackedlinechart/CustomLegend.tsx"],"sourcesContent":["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 '@mxenabled/mxui'\n\nimport { useScreenSize } from '../../../hooks'\nimport { CategoryColors } from '../../../../core/constants'\nimport { useCategoryStore } from '../../../context'\n\ninterface CustomLegendProps {\n  sx?: object\n  categoryGuids: { guid: string; top_level_guid: string }[]\n  hoveredLegend: string | null\n  legendRef?: (instance: HTMLElement | null) => void\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  legendRef,\n  onHoverLegend,\n  onClickLegend,\n}) => {\n  const { isMobile } = useScreenSize()\n  const { getCategoryName } = useCategoryStore()\n\n  return (\n    <Stack\n      direction=\"row\"\n      flexWrap=\"wrap\"\n      gap={isMobile ? 2 : 6}\n      justifyContent=\"start\"\n      ref={legendRef}\n      sx={sx}\n    >\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=\"body1\">{getCategoryName(guid)}</Text>\n          </Button>\n        )\n      })}\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;;AAmBA,IAAa,IAAA,CAA6C,EACxD,IAAA,GACA,eAAA,GACA,eAAA,GACA,WAAA,GACA,eAAA,GACA,eAAA,EAAA,MACI;AACJ,QAAM,EAAE,UAAA,EAAA,IAAa,EAAc,GAC7B,EAAE,iBAAA,EAAA,IAAoB,EAAiB;AAE7C,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACV,UAAS;AAAA,IACT,KAAK,IAAW,IAAI;AAAA,IACpB,gBAAe;AAAA,IACf,KAAK;AAAA,IACD,IAAA;AAAA,cAEH,EAAc,IAAA,CAAK,EAAE,MAAA,GAAM,gBAAA,EAAA,MAAqB;AAC/C,YAAM,IAAY,MAAkB,GAC9B,IAAgB,EAAe,CAAA,GAC/B,IAAwB,EAAe,CAAA,GACvC,IAAiB,KAAiB,KAAyB,EAAe,SAC1E,IAAwB,IAAiB;AAI/C,aACE,gBAAA,EAAC,GAAD;AAAA,QAEE,SAAA,MAAe,EAAc,CAAI;AAAA,QACjC,cAAA,MAAoB,EAAc,CAAI;AAAA,QACtC,cAAA,MAAoB,EAAc,IAAI;AAAA,QACtC,IAAI;AAAA,UACF,OAAO;AAAA,UACP,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,UAAU;AAAA,UACV,cAAc;AAAA,UACd,SAAS,IAAY,IAAI;AAAA,QAC3B;AAAA,kBAfF,CAiBE,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,aAAa,IAAW,IAAI;AAAA,UAC5B,cAAc;AAAA,UACd,iBA1BgB,IADE,IAAY,IAAiB,IACK;AAAA,QA2BtD,EACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,oBAAS,EAAgB,CAAI;AAAA,QAAQ,CAAA,CAC7C;AAAA,SA1BD,CA0BC;AAAA,IAEZ,CAAC;AAAA,EACI,CAAA;AAEX"}

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

@@ -0,0 +1,51 @@
+import { DATE_FORMATS_INTL as s, formatDate as c } from "../../../../../core/constants/DateFormats/index.es.js";
+import { CurrencyText as u } from "../../../CurrencyText/index.es.js";
+import { CategoryIconLabel as x } from "../CategoryIconLabel/index.es.js";
+import "react";
+import { Text as T } from "@mxenabled/mxui";
+import { jsx as t, jsxs as y } from "react/jsx-runtime";
+import { useTheme as g } from "@mui/material/styles";
+import C from "@mui/material/Box";
+import h from "@mui/material/Card";
+import I from "@mui/material/CardContent";
+import { useItemTooltip as v } from "@mui/x-charts/ChartsTooltip";
+var M = ({ categoryGuids: { guid: a, topLevelGuid: m }, series: l, xData: d }) => {
+  const o = v(), f = g();
+  if (!o?.identifier) return null;
+  const { dataIndex: r, seriesId: e } = o.identifier;
+  if (r == null || !e) return null;
+  const i = l.find((p) => p.id === e)?.data?.[r], n = d?.[r];
+  return i === void 0 || !n ? null : /* @__PURE__ */ t(h, {
+    sx: {
+      pt: 4,
+      px: 8
+    },
+    children: /* @__PURE__ */ t(I, { children: /* @__PURE__ */ y(C, {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+      children: [
+        /* @__PURE__ */ t(x, {
+          categoryGuid: a,
+          topLevelCategoryGuid: m
+        }),
+        /* @__PURE__ */ t(T, {
+          color: f.palette.text.secondary,
+          variant: "body2",
+          children: c(n, s.MONTH_SHORT_YEAR)
+        }),
+        /* @__PURE__ */ t(u, {
+          amount: String(i),
+          bold: !0,
+          formatString: "0,0",
+          variant: "body1"
+        })
+      ]
+    }) })
+  });
+};
+export {
+  M as CustomPointTooltip
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/StackedLineChart/CustomPointTooltip/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/common/components/charts/stackedlinechart/CustomPointTooltip.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport { useTheme } from '@mui/material/styles'\n\nimport { useItemTooltip } from '@mui/x-charts/ChartsTooltip'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { CategoryIconLabel } from './CategoryIconLabel'\nimport { CurrencyText } from '../../CurrencyText'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\n\ninterface CustomPointTooltipProps {\n  categoryGuids: { guid: string; topLevelGuid: string }\n  series: Array<{ id: string; data: number[] }>\n  xData: Date[]\n}\n\n// Custom tooltip for hovering on line points\nexport const CustomPointTooltip: React.FC<CustomPointTooltipProps> = ({\n  categoryGuids: { guid, topLevelGuid },\n  series: allSeries,\n  xData,\n}) => {\n  const tooltip = useItemTooltip()\n  const theme = useTheme()\n\n  if (!tooltip?.identifier) return null\n\n  const { dataIndex, seriesId } = tooltip.identifier\n  if (dataIndex == null || !seriesId) return null\n\n  const seriesData = allSeries.find((s) => s.id === seriesId)\n  const dataValue = seriesData?.data?.[dataIndex]\n  const dataDate = xData?.[dataIndex]\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=\"body2\">\n            {formatDate(dataDate, DATE_FORMATS_INTL.MONTH_SHORT_YEAR)}\n          </Text>\n          <CurrencyText amount={String(dataValue)} bold={true} formatString=\"0,0\" variant=\"body1\" />\n        </Box>\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,IAAA,CAAyD,EACpE,eAAe,EAAE,MAAA,GAAM,cAAA,EAAA,GACvB,QAAQ,GACR,OAAA,EAAA,MACI;AACJ,QAAM,IAAU,EAAe,GACzB,IAAQ,EAAS;AAEvB,MAAI,CAAC,GAAS,WAAY,QAAO;AAEjC,QAAM,EAAE,WAAA,GAAW,UAAA,EAAA,IAAa,EAAQ;AACxC,MAAI,KAAa,QAAQ,CAAC,EAAU,QAAO;AAG3C,QAAM,IADa,EAAU,KAAA,CAAM,MAAM,EAAE,OAAO,CAChC,GAAY,OAAO,CAAA,GAC/B,IAAW,IAAQ,CAAA;AAEzB,SAAI,MAAc,UAAa,CAAC,IAAiB,OAG/C,gBAAA,EAAC,GAAD;AAAA,IAAM,IAAI;AAAA,MAAE,IAAI;AAAA,MAAG,IAAI;AAAA,IAAE;AAAA,cACvB,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,MAAK,YAAW;AAAA,MAAS,SAAQ;AAAA,MAAO,eAAc;AAAA,gBAAtD;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAmB,cAAc;AAAA,UAAM,sBAAsB;AAAA,QAAe,CAAA;AAAA,QAC5E,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAO,EAAM,QAAQ,KAAK;AAAA,UAAW,SAAQ;AAAA,oBAChD,EAAW,GAAU,EAAkB,gBAAgB;AAAA,QACpD,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAc,QAAQ,OAAO,CAAS;AAAA,UAAG,MAAM;AAAA,UAAM,cAAa;AAAA,UAAM,SAAQ;AAAA,QAAS,CAAA;AAAA,MACtF;AAAA,OACM,CAAA;AAAA,EACT,CAAA;AAEV"}