@wealthx/ui 1.0.0 → 1.0.1

package/dist/charts/index.mjs

@@ -0,0 +1,2442 @@
+import {
+  FONT_FAMILY_SANS,
+  FOUNDATION_COLORS
+} from "../chunk-5QGN2CVX.mjs";
+import "../chunk-WUKYLWAZ.mjs";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-FWCSY2DS.mjs";
+
+// src/charts/chart-utils.ts
+var tooltipsBaseOption = {
+  enabled: true,
+  mode: "nearest",
+  intersect: false,
+  backgroundColor: FOUNDATION_COLORS.background.primary,
+  titleColor: FOUNDATION_COLORS.text.primary,
+  bodyColor: FOUNDATION_COLORS.text.primary,
+  displayColors: false,
+  borderColor: FOUNDATION_COLORS.text.primary,
+  borderWidth: 1,
+  titleFont: {
+    family: FONT_FAMILY_SANS,
+    style: "normal",
+    size: 14
+  },
+  bodyFont: {
+    family: FONT_FAMILY_SANS,
+    style: "normal",
+    weight: "bold",
+    size: 13
+  }
+};
+var buildChartDataFromObject = (chartDataObject = {}) => {
+  return Object.keys(chartDataObject).map((key) => ({
+    x: key,
+    y: chartDataObject[key]
+  }));
+};
+var formatNumber = (value) => {
+  return value.toLocaleString("en-US");
+};
+var formatNumberWithText = (value, precision = 1) => {
+  if (Math.abs(value) >= 1e6) {
+    return `$${(value / 1e6).toFixed(precision)}M`;
+  }
+  if (Math.abs(value) >= 1e3) {
+    return `$${(value / 1e3).toFixed(precision)}K`;
+  }
+  return `$${value.toFixed(0)}`;
+};
+var formatNumberWithDollar = (value) => {
+  return `$${formatNumber(value)}`;
+};
+var convertToFloat = (value, precision) => {
+  return parseFloat(value.toFixed(precision)).toString();
+};
+
+// src/charts/LoadingChartBackdrop.tsx
+import { CircularProgress } from "@mui/material";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var LoadingChartBackdrop = ({
+  isLoading,
+  isError
+}) => {
+  if (isError) {
+    return /* @__PURE__ */ jsx("span", { children: "Oops! Something went wrong. Chart data has been lost. Please try again after a few minutes." });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 24 }),
+      /* @__PURE__ */ jsx("span", { children: "Loading chart data..." })
+    ] });
+  }
+  return null;
+};
+LoadingChartBackdrop.displayName = "LoadingChartBackdrop";
+
+// src/charts/BackofficeSwitchableChart.tsx
+import { useMemo, useRef } from "react";
+import { Button, ButtonGroup } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import StackedLineChart from "@mui/icons-material/StackedLineChart";
+import EqualizerIcon from "@mui/icons-material/Equalizer";
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  TimeScale,
+  Title,
+  Tooltip
+} from "chart.js";
+import "chartjs-adapter-date-fns";
+import { Bar, Line } from "react-chartjs-2";
+import { format } from "date-fns";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  TimeScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+);
+function getChartOptions(options) {
+  var _a, _b;
+  const primaryColor = (_a = options == null ? void 0 : options.primaryColor) != null ? _a : FOUNDATION_COLORS.brand.primary;
+  const textColor = (_b = options == null ? void 0 : options.textColor) != null ? _b : FOUNDATION_COLORS.text.primary;
+  return {
+    scales: {
+      x: {
+        grid: {
+          display: false
+        },
+        stacked: false,
+        type: "time",
+        time: {
+          unit: "month"
+        },
+        ticks: {
+          callback: (value) => {
+            if (typeof value === "number" && value > 0) {
+              return format(new Date(value), "MMM").toUpperCase();
+            }
+            const parsedValue = Number(value);
+            return Number.isNaN(parsedValue) ? "" : format(new Date(parsedValue), "MMM").toUpperCase();
+          }
+        }
+      },
+      y: {
+        grid: {
+          display: false
+        },
+        stacked: false,
+        ticks: {
+          stepSize: 1,
+          maxTicksLimit: 5
+        }
+      }
+    },
+    maintainAspectRatio: false,
+    responsive: true,
+    plugins: {
+      tooltip: __spreadProps(__spreadValues({}, tooltipsBaseOption), {
+        mode: "nearest"
+      }),
+      legend: {
+        display: false
+      }
+    },
+    interaction: {
+      mode: "nearest",
+      intersect: false
+    }
+  };
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: true,
+        labels: {
+          color: textColor,
+          usePointStyle: true
+        }
+      },
+      tooltip: __spreadProps(__spreadValues({}, tooltipsBaseOption), {
+        titleColor: textColor,
+        bodyColor: textColor,
+        borderColor: primaryColor,
+        callbacks: {
+          label(tooltipItem) {
+            var _a2, _b2;
+            const value = (_b2 = (_a2 = tooltipItem.parsed) == null ? void 0 : _a2.y) != null ? _b2 : 0;
+            return `$${formatNumber(Math.abs(value))}`;
+          }
+        }
+      })
+    },
+    scales: {
+      x: {
+        type: "time",
+        time: { unit: "month" },
+        grid: { display: false },
+        ticks: { color: textColor, maxTicksLimit: 12 }
+      },
+      y: {
+        beginAtZero: true,
+        grid: { display: false },
+        ticks: {
+          color: textColor,
+          callback(value) {
+            return formatNumberWithText(Number(value), 1);
+          }
+        }
+      }
+    }
+  };
+}
+var ChartContainer = styled("div")({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  minWidth: 0,
+  flexDirection: "column"
+});
+var ChartHeader = styled("div")({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  marginBottom: "1rem",
+  flexWrap: "wrap",
+  gap: "0.5rem"
+});
+var ChartTitle = styled("div")({
+  fontSize: 16,
+  fontWeight: 600,
+  "@media (max-width: 768px)": { fontSize: 14 }
+});
+var ChartControls = styled("div")({
+  display: "flex",
+  justifyContent: "flex-end",
+  marginBottom: 12
+});
+var ChartWrapper = styled("div")({
+  flex: 1,
+  position: "relative",
+  minHeight: 250,
+  width: "100%",
+  height: "100%",
+  "@media (max-width: 768px)": { minHeight: 200 },
+  "@media (max-width: 480px)": { minHeight: 180 }
+});
+var LoadingOverlay = styled("div")({
+  alignItems: "center",
+  backgroundColor: "rgba(255, 255, 255, 0.8)",
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  justifyContent: "center",
+  left: 0,
+  position: "absolute",
+  top: 0,
+  width: "100%",
+  "& span": { marginTop: "1rem" }
+});
+var BackofficeSwitchableChart = ({
+  chartTitle,
+  datasets,
+  chartOptions: chartOptionsOverride,
+  isLoading,
+  isError,
+  chartType,
+  onChartTypeChange,
+  primaryColor = FOUNDATION_COLORS.brand.primary,
+  textColor = FOUNDATION_COLORS.text.primary
+}) => {
+  const chartRef = useRef(null);
+  const chartData = useMemo(() => ({ datasets }), [datasets]);
+  const responsiveChartOptions = useMemo(() => {
+    var _a, _b;
+    const base = getChartOptions({ primaryColor, textColor });
+    return __spreadProps(__spreadValues(__spreadValues({}, base), chartOptionsOverride), {
+      plugins: __spreadValues(__spreadValues({}, base.plugins), (_a = chartOptionsOverride == null ? void 0 : chartOptionsOverride.plugins) != null ? _a : {}),
+      scales: __spreadValues(__spreadValues({}, base.scales), (_b = chartOptionsOverride == null ? void 0 : chartOptionsOverride.scales) != null ? _b : {})
+    });
+  }, [primaryColor, textColor, chartOptionsOverride]);
+  return /* @__PURE__ */ jsxs2(ChartContainer, { children: [
+    /* @__PURE__ */ jsxs2(ChartHeader, { children: [
+      chartTitle ? /* @__PURE__ */ jsx2(ChartTitle, { children: chartTitle }) : /* @__PURE__ */ jsx2("div", {}),
+      /* @__PURE__ */ jsx2(ChartControls, { children: /* @__PURE__ */ jsxs2(
+        ButtonGroup,
+        {
+          size: "small",
+          "aria-label": "chart type selector",
+          sx: {
+            backgroundColor: "#fff",
+            borderRadius: "5px",
+            border: `1px solid ${primaryColor}`,
+            "& .MuiButton-root": {
+              minWidth: "32px",
+              minHeight: "32px",
+              padding: "4px",
+              border: "none",
+              color: textColor,
+              "&:hover": { boxShadow: "none" }
+            },
+            "& .MuiButton-contained": {
+              backgroundColor: primaryColor,
+              color: textColor,
+              "&:hover": { boxShadow: "none" }
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx2(
+              Button,
+              {
+                variant: chartType === "line" ? "contained" : "text",
+                onClick: () => onChartTypeChange("line"),
+                "aria-label": "Line chart",
+                children: /* @__PURE__ */ jsx2(StackedLineChart, { sx: { fontSize: 14 } })
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              Button,
+              {
+                variant: chartType === "bar" ? "contained" : "text",
+                onClick: () => onChartTypeChange("bar"),
+                "aria-label": "Bar chart",
+                children: /* @__PURE__ */ jsx2(EqualizerIcon, { sx: { fontSize: 14 } })
+              }
+            )
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs2(ChartWrapper, { children: [
+      !isLoading && !isError && (chartType === "line" ? /* @__PURE__ */ jsx2(
+        Line,
+        {
+          ref: chartRef,
+          data: chartData,
+          options: responsiveChartOptions
+        }
+      ) : /* @__PURE__ */ jsx2(
+        Bar,
+        {
+          ref: chartRef,
+          data: chartData,
+          options: responsiveChartOptions
+        }
+      )),
+      (isLoading || isError) && /* @__PURE__ */ jsx2(LoadingOverlay, { children: /* @__PURE__ */ jsx2(LoadingChartBackdrop, { isLoading, isError }) })
+    ] })
+  ] });
+};
+BackofficeSwitchableChart.displayName = "BackofficeSwitchableChart";
+
+// src/charts/FrontendLineChart.tsx
+import { useMemo as useMemo2, useRef as useRef2 } from "react";
+import { styled as styled2 } from "@mui/material/styles";
+import {
+  CategoryScale as CategoryScale2,
+  Chart as ChartJS2,
+  Legend as Legend2,
+  LinearScale as LinearScale2,
+  LineController,
+  LineElement as LineElement2,
+  PointElement as PointElement2,
+  TimeScale as TimeScale2,
+  Title as Title2,
+  Tooltip as Tooltip2
+} from "chart.js";
+import "chartjs-adapter-date-fns";
+import { Chart } from "react-chartjs-2";
+import { jsx as jsx3 } from "react/jsx-runtime";
+ChartJS2.register(
+  CategoryScale2,
+  LinearScale2,
+  PointElement2,
+  LineElement2,
+  LineController,
+  Title2,
+  Tooltip2,
+  Legend2,
+  TimeScale2
+);
+var ChartContainer2 = styled2("div")({
+  width: "100%"
+});
+var ChartWrapper2 = styled2("div")(
+  ({ chartHeight }) => ({
+    flex: "auto",
+    height: chartHeight || 270,
+    position: "relative",
+    width: "100%"
+  })
+);
+var buildChartData = (title, lineChartData, mainLineColor, referenceLineValue, referenceLineLabel, referenceLineColor = "#39FD99") => {
+  var _a, _b, _c, _d;
+  const datasets = lineChartData.map((dataset, index) => {
+    var _a2;
+    const color = ((_a2 = dataset.customOptions) == null ? void 0 : _a2.borderColor) || mainLineColor;
+    return __spreadValues({
+      type: "line",
+      label: dataset.label || title || `Dataset ${index + 1}`,
+      fill: false,
+      backgroundColor: color,
+      borderColor: color,
+      borderCapStyle: "butt",
+      borderDash: [],
+      borderDashOffset: 0,
+      borderJoinStyle: "miter",
+      pointBorderColor: color,
+      pointBackgroundColor: color,
+      pointBorderWidth: 1,
+      pointHoverRadius: 3,
+      pointHoverBackgroundColor: color,
+      pointHoverBorderColor: color,
+      pointHoverBorderWidth: 3,
+      pointRadius: 1,
+      pointHitRadius: 3,
+      borderWidth: 1.5,
+      tension: 0.4,
+      data: dataset.data
+    }, dataset.customOptions);
+  });
+  if (typeof referenceLineValue === "number" && lineChartData.length > 0 && ((_b = (_a = lineChartData[0]) == null ? void 0 : _a.data) == null ? void 0 : _b.length)) {
+    const firstDataset = lineChartData[0].data;
+    const firstX = (_c = firstDataset[0]) == null ? void 0 : _c.x;
+    const lastX = (_d = firstDataset[firstDataset.length - 1]) == null ? void 0 : _d.x;
+    const refData = firstX && lastX ? [
+      { x: firstX, y: referenceLineValue },
+      { x: lastX, y: referenceLineValue }
+    ] : firstDataset.map((p) => ({ x: p.x, y: referenceLineValue }));
+    datasets.push({
+      type: "line",
+      label: referenceLineLabel || "Target",
+      fill: false,
+      backgroundColor: referenceLineColor,
+      borderColor: referenceLineColor,
+      borderDash: [],
+      borderWidth: 1,
+      pointRadius: 0,
+      tension: 0,
+      data: refData,
+      legendHidden: true
+    });
+  }
+  return { datasets };
+};
+var buildChartOption = (customChartOptions, invertYAxis) => {
+  const baseOptions = {
+    scales: {
+      x: {
+        display: true,
+        grid: { display: false, drawOnChartArea: false, drawBorder: true },
+        stacked: true,
+        ticks: {
+          maxTicksLimit: 8,
+          autoSkip: true,
+          maxRotation: 0,
+          minRotation: 0,
+          beginAtZero: false,
+          source: "auto",
+          display: true
+        },
+        bounds: "data",
+        type: "time",
+        time: {
+          unit: "month",
+          stepSize: 1,
+          displayFormats: {
+            day: "MMM dd",
+            month: "MMM yyyy",
+            year: "yyyy"
+          }
+        },
+        distribution: "series"
+      },
+      y: {
+        display: true,
+        grid: {
+          display: false,
+          drawBorder: false,
+          drawOnChartArea: false,
+          color: "transparent"
+        },
+        border: { display: false },
+        reverse: invertYAxis,
+        position: "left",
+        ticks: {
+          beginAtZero: false,
+          display: true,
+          callback(value) {
+            return formatNumberWithText(Number(value), 1);
+          }
+        }
+      }
+    },
+    maintainAspectRatio: false,
+    responsive: true,
+    plugins: {
+      tooltip: __spreadProps(__spreadValues({}, tooltipsBaseOption), {
+        filter: (tooltipItem) => {
+          var _a;
+          if (tooltipItem.dataset.hideFromTooltip) {
+            const chartValue = (_a = tooltipItem.parsed) == null ? void 0 : _a.y;
+            const referenceValue = tooltipItem.dataset.referenceLineValue;
+            return chartValue !== referenceValue;
+          }
+          return true;
+        },
+        callbacks: {
+          title(tooltipItems) {
+            var _a;
+            const tooltipItem = tooltipItems[0];
+            if ((_a = tooltipItem == null ? void 0 : tooltipItem.parsed) == null ? void 0 : _a.x) {
+              const date = new Date(tooltipItem.parsed.x);
+              return date.toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "2-digit",
+                day: "2-digit"
+              });
+            }
+            return "";
+          },
+          label(tooltipItem) {
+            var _a, _b;
+            const chartValue = (_b = (_a = tooltipItem.parsed) == null ? void 0 : _a.y) != null ? _b : 0;
+            const chartValueWithCommas = formatNumber(Math.abs(chartValue));
+            const chartTitle = tooltipItem.dataset.label;
+            return `${chartTitle} ${chartValue >= 0 ? `$${chartValueWithCommas}` : `-$${chartValueWithCommas}`}`.trim();
+          }
+        }
+      })
+    },
+    interaction: { mode: "nearest", intersect: false }
+  };
+  return __spreadValues(__spreadValues({}, baseOptions), customChartOptions);
+};
+var buildChartLegend = (legendDisplay) => ({
+  display: legendDisplay,
+  position: "bottom",
+  fullSize: true,
+  reverse: false,
+  labels: {
+    color: "#000",
+    filter: (legendItem, data) => {
+      var _a;
+      const ds = (_a = data == null ? void 0 : data.datasets) == null ? void 0 : _a[legendItem.datasetIndex];
+      return !(ds == null ? void 0 : ds.legendHidden);
+    }
+  }
+});
+var FrontendLineChart = ({
+  lineChartData = [],
+  legendDisplay = true,
+  title = "",
+  customChartOptions = {},
+  height,
+  invertYAxis = false,
+  referenceLineValue,
+  referenceLineLabel,
+  mainLineColor = "#162029",
+  referenceLineColor = "#39FD99"
+}) => {
+  const chartRef = useRef2(null);
+  const chartData = useMemo2(
+    () => buildChartData(
+      title,
+      lineChartData,
+      mainLineColor,
+      referenceLineValue,
+      referenceLineLabel,
+      referenceLineColor
+    ),
+    [lineChartData, title, mainLineColor, referenceLineValue, referenceLineLabel, referenceLineColor]
+  );
+  const chartOption = useMemo2(
+    () => buildChartOption(customChartOptions, invertYAxis),
+    [customChartOptions, invertYAxis]
+  );
+  const chartLegend = useMemo2(() => buildChartLegend(legendDisplay), [legendDisplay]);
+  return /* @__PURE__ */ jsx3(ChartContainer2, { children: /* @__PURE__ */ jsx3(ChartWrapper2, { chartHeight: height, children: /* @__PURE__ */ jsx3(
+    Chart,
+    {
+      ref: chartRef,
+      type: "line",
+      data: chartData,
+      options: __spreadProps(__spreadValues({}, chartOption), {
+        plugins: __spreadProps(__spreadValues({}, chartOption.plugins), {
+          legend: chartLegend
+        })
+      })
+    }
+  ) }) });
+};
+FrontendLineChart.displayName = "FrontendLineChart";
+
+// src/charts/FrontendLineChartMobile.tsx
+import { useMemo as useMemo3, useRef as useRef3, useState } from "react";
+import { styled as styled3 } from "@mui/material/styles";
+import {
+  CategoryScale as CategoryScale3,
+  Chart as ChartJS3,
+  Legend as Legend3,
+  LinearScale as LinearScale3,
+  LineController as LineController2,
+  LineElement as LineElement3,
+  PointElement as PointElement3,
+  TimeScale as TimeScale3,
+  Title as Title3,
+  Tooltip as Tooltip3
+} from "chart.js";
+import "chartjs-adapter-date-fns";
+import { Chart as Chart2 } from "react-chartjs-2";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+ChartJS3.register(
+  CategoryScale3,
+  LinearScale3,
+  PointElement3,
+  LineElement3,
+  LineController2,
+  Title3,
+  Tooltip3,
+  Legend3,
+  TimeScale3
+);
+var ChartContainer3 = styled3("div")({
+  width: "100%"
+});
+var ChartSize = styled3("div")({
+  flex: "auto",
+  height: 200,
+  position: "relative",
+  width: "100%"
+});
+var MobileChartTitleWrapper = styled3("div")({
+  padding: "8px 0"
+});
+var MobileChartTitleText = styled3("div")({
+  fontSize: 14,
+  color: "#656566"
+});
+var MobileChartTitleBold = styled3("span")({
+  fontWeight: 600,
+  color: "#131c24"
+});
+var MobileChartValue = styled3("div")({
+  fontSize: 24,
+  fontWeight: 700,
+  color: "#131c24",
+  marginTop: 4
+});
+var LegendContainer = styled3("div")({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: 12,
+  marginTop: 8,
+  paddingLeft: 30
+});
+var LegendWrap = styled3("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: 6
+});
+var LegendBox = styled3("div")(({ isDashed }) => __spreadValues({
+  width: 12,
+  height: isDashed ? 0 : 12,
+  borderRadius: 2,
+  flexShrink: 0
+}, isDashed ? {
+  borderTop: "2px dashed #A1B9BD",
+  width: 12
+} : {}));
+var LegendFont = styled3("span")({
+  fontSize: 12,
+  color: "#656566"
+});
+var BORDER_COLOR = "#A1B9BD";
+var buildChartData2 = (lineChartData, defaultColor) => ({
+  datasets: lineChartData.map((chartData) => {
+    const {
+      label = "",
+      data = [],
+      color = defaultColor,
+      lineSpacing = [],
+      borderWidth = 2,
+      customOptions = {}
+    } = chartData;
+    return __spreadValues({
+      label,
+      fill: false,
+      backgroundColor: color,
+      borderColor: color,
+      borderCapStyle: "butt",
+      borderDash: lineSpacing,
+      borderDashOffset: 0,
+      borderJoinStyle: "miter",
+      pointBorderColor: color,
+      pointBackgroundColor: color,
+      pointBorderWidth: 0,
+      pointHoverRadius: 6,
+      pointHoverBackgroundColor: "#ffffff",
+      pointHoverBorderColor: color,
+      pointHoverBorderWidth: 2,
+      pointRadius: 0,
+      borderWidth,
+      pointHitRadius: 3,
+      data,
+      tension: 0.4
+    }, customOptions);
+  })
+});
+var getMinMaxInArray = (mathFn, array, property) => {
+  return Math[mathFn](
+    ...array.map(
+      (chartItem) => Math[mathFn](...chartItem.data.map((item) => Number(item[property])))
+    )
+  );
+};
+var buildChartOption2 = (minChartData, maxChartData, setChartTitleValue, customChartOptions) => {
+  const baseOptions = {
+    layout: {
+      padding: { left: 30, right: 30, top: 0, bottom: 0 }
+    },
+    scales: {
+      x: {
+        display: false,
+        grid: { display: false },
+        ticks: { padding: 25 },
+        stacked: true,
+        bounds: "data",
+        type: "time",
+        distribution: "linear"
+      },
+      y: {
+        type: "linear",
+        display: false,
+        position: "right",
+        ticks: {
+          padding: 25,
+          min: minChartData,
+          max: maxChartData
+        }
+      }
+    },
+    maintainAspectRatio: false,
+    responsive: true,
+    plugins: {
+      tooltip: { enabled: false },
+      legend: { display: false }
+    },
+    interaction: { mode: "nearest", intersect: false },
+    onHover: (_event, activeElements, chart) => {
+      var _a, _b, _c;
+      if (activeElements.length) {
+        const datasetIndex = ((_a = activeElements[0]) == null ? void 0 : _a.datasetIndex) || 0;
+        const elementIndex = ((_b = activeElements[0]) == null ? void 0 : _b.index) || 0;
+        const dataset = chart.data.datasets[datasetIndex];
+        if ((_c = dataset == null ? void 0 : dataset.data) == null ? void 0 : _c[elementIndex]) {
+          setChartTitleValue({
+            index: datasetIndex,
+            value: dataset.data[elementIndex].y
+          });
+        }
+      }
+    }
+  };
+  return __spreadValues(__spreadValues({}, baseOptions), customChartOptions);
+};
+var drawVerticalLine = {
+  id: "drawVerticalLine",
+  afterDraw(chart) {
+    var _a, _b, _c;
+    if (((_b = (_a = chart.tooltip) == null ? void 0 : _a._active) == null ? void 0 : _b.length) && chart.config.type === "line") {
+      const activePoint = chart.tooltip._active[0];
+      if (!activePoint) return;
+      const { ctx } = chart;
+      const yAxis = chart.scales.y;
+      const { x } = activePoint.element;
+      const topY = yAxis.top;
+      const bottomY = yAxis.bottom;
+      const datasetIndex = activePoint.datasetIndex;
+      const dataIndex = activePoint.index;
+      const dataset = chart.data.datasets[datasetIndex];
+      const point = (_c = dataset == null ? void 0 : dataset.data) == null ? void 0 : _c[dataIndex];
+      let dateStr = "";
+      if (point == null ? void 0 : point.x) {
+        const date = new Date(point.x);
+        const mm = String(date.getMonth() + 1).padStart(2, "0");
+        const yyyy = date.getFullYear();
+        dateStr = `${yyyy}/${mm}`;
+      }
+      ctx.save();
+      ctx.beginPath();
+      ctx.moveTo(x, topY);
+      ctx.lineTo(x, bottomY - 20);
+      ctx.lineWidth = 2;
+      ctx.strokeStyle = BORDER_COLOR;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.font = "14px sans-serif";
+      ctx.fillText(dateStr, x, bottomY - 10);
+      ctx.stroke();
+      ctx.restore();
+    }
+  }
+};
+var MobileChartTitle = ({
+  title = "",
+  subTitle = "",
+  value = 0
+}) => /* @__PURE__ */ jsxs3(MobileChartTitleWrapper, { children: [
+  /* @__PURE__ */ jsxs3(MobileChartTitleText, { children: [
+    /* @__PURE__ */ jsx4(MobileChartTitleBold, { children: title }),
+    " ",
+    subTitle
+  ] }),
+  /* @__PURE__ */ jsx4(MobileChartValue, { children: formatNumberWithDollar(value) })
+] });
+var FrontendLineChartMobile = ({
+  chartTitle = "",
+  subTitle,
+  titleValue = 0,
+  chartData: lineChartData = [],
+  defaultColor = "#162029",
+  customChartOptions = {}
+}) => {
+  var _a;
+  const [lineChartTitleValue, setLineChartTitleValue] = useState({
+    index: 0,
+    value: 0
+  });
+  const lineChart = useRef3(null);
+  const minChartData = useMemo3(
+    () => lineChartData.length > 0 ? getMinMaxInArray("min", lineChartData, "y") : 0,
+    [lineChartData]
+  );
+  const maxChartData = useMemo3(
+    () => lineChartData.length > 0 ? getMinMaxInArray("max", lineChartData, "y") : 100,
+    [lineChartData]
+  );
+  const yAxisInnerPadding = Math.max(
+    minChartData * 0.2,
+    (maxChartData - minChartData) * 0.2
+  );
+  const data = useMemo3(
+    () => buildChartData2(lineChartData, defaultColor),
+    [lineChartData, defaultColor]
+  );
+  const options = useMemo3(
+    () => buildChartOption2(
+      minChartData - yAxisInnerPadding * 0.2,
+      maxChartData + yAxisInnerPadding * 0.2,
+      setLineChartTitleValue,
+      customChartOptions
+    ),
+    [minChartData, maxChartData, yAxisInnerPadding, customChartOptions]
+  );
+  const currentTitle = ((_a = lineChartData == null ? void 0 : lineChartData[lineChartTitleValue.index]) == null ? void 0 : _a.label) || chartTitle;
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(
+      MobileChartTitle,
+      {
+        title: currentTitle,
+        subTitle,
+        value: lineChartTitleValue.value || titleValue
+      }
+    ),
+    /* @__PURE__ */ jsxs3(ChartContainer3, { children: [
+      /* @__PURE__ */ jsx4(ChartSize, { children: /* @__PURE__ */ jsx4(
+        Chart2,
+        {
+          type: "line",
+          ref: lineChart,
+          data,
+          options,
+          plugins: [drawVerticalLine]
+        }
+      ) }),
+      /* @__PURE__ */ jsx4(LegendContainer, { children: lineChartData.map((ds, index) => {
+        var _a2, _b;
+        return /* @__PURE__ */ jsxs3(LegendWrap, { children: [
+          /* @__PURE__ */ jsx4(
+            LegendBox,
+            {
+              isDashed: !!((_a2 = ds.lineSpacing) == null ? void 0 : _a2.length),
+              style: ((_b = ds.lineSpacing) == null ? void 0 : _b.length) ? {} : {
+                backgroundColor: ds.color || defaultColor
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx4(LegendFont, { children: ds.label || "" })
+        ] }, ds.label || index);
+      }) })
+    ] })
+  ] });
+};
+FrontendLineChartMobile.displayName = "FrontendLineChartMobile";
+
+// src/charts/FrontendBarChart.tsx
+import { useMemo as useMemo4 } from "react";
+import { styled as styled4 } from "@mui/material/styles";
+import {
+  BarController,
+  BarElement as BarElement2,
+  CategoryScale as CategoryScale4,
+  Chart as ChartJS4,
+  Legend as Legend4,
+  LinearScale as LinearScale4,
+  Title as Title4,
+  Tooltip as Tooltip4
+} from "chart.js";
+import { Chart as Chart3 } from "react-chartjs-2";
+import { jsx as jsx5 } from "react/jsx-runtime";
+ChartJS4.register(
+  CategoryScale4,
+  LinearScale4,
+  BarElement2,
+  BarController,
+  Title4,
+  Tooltip4,
+  Legend4
+);
+var ChartWrapper3 = styled4("div")({
+  position: "relative",
+  height: 300,
+  width: "100%"
+});
+var baseChartOptions = {
+  maintainAspectRatio: false,
+  responsive: true,
+  plugins: {
+    legend: { display: false },
+    tooltip: __spreadProps(__spreadValues({}, tooltipsBaseOption), {
+      callbacks: {
+        label(tooltipItem) {
+          const { parsed = { y: 0 } } = tooltipItem;
+          const chartValue = parsed.y;
+          const chartValueWithCommas = formatNumber(Math.abs(chartValue));
+          return `${chartValue > 0 ? `$${chartValueWithCommas}` : `-$${chartValueWithCommas}`} `;
+        }
+      }
+    })
+  },
+  scales: {
+    x: {
+      grid: { display: true, drawBorder: true, drawOnChartArea: false }
+    },
+    y: {
+      display: true,
+      position: "left",
+      grid: { display: false, drawBorder: false },
+      ticks: {
+        padding: 10,
+        callback(value) {
+          return formatNumberWithText(Number(value), 1);
+        }
+      }
+    }
+  }
+};
+var mergeOptions = (base, custom) => {
+  if (!custom) return base;
+  return deepMerge(base, custom);
+};
+var deepMerge = (target, source) => {
+  const result = __spreadValues({}, target);
+  for (const key of Object.keys(source)) {
+    if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key]) && target[key] && typeof target[key] === "object") {
+      result[key] = deepMerge(target[key], source[key]);
+    } else {
+      result[key] = source[key];
+    }
+  }
+  return result;
+};
+var FrontendBarChart = ({
+  data,
+  customChartOptions
+}) => {
+  const options = useMemo4(
+    () => mergeOptions(baseChartOptions, customChartOptions),
+    [customChartOptions]
+  );
+  return /* @__PURE__ */ jsx5(ChartWrapper3, { children: /* @__PURE__ */ jsx5(Chart3, { type: "bar", data, options }) });
+};
+FrontendBarChart.displayName = "FrontendBarChart";
+
+// src/charts/FrontendDoughnutChart.tsx
+import { useRef as useRef4, useMemo as useMemo5 } from "react";
+import { styled as styled5 } from "@mui/material/styles";
+import { Typography, Box } from "@mui/material";
+import {
+  Chart as ChartJS5,
+  ArcElement,
+  DoughnutController,
+  Tooltip as Tooltip5,
+  Legend as Legend5
+} from "chart.js";
+import { Chart as Chart4 } from "react-chartjs-2";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+ChartJS5.register(ArcElement, DoughnutController, Tooltip5, Legend5);
+var getChartColorRange = (spectrum, count) => {
+  if (count <= 1) return [spectrum[0] || "#162029"];
+  const result = [];
+  for (let i = 0; i < count; i++) {
+    const ratio = i / (count - 1);
+    const fromIdx = Math.floor(ratio * (spectrum.length - 1));
+    const toIdx = Math.min(fromIdx + 1, spectrum.length - 1);
+    const localRatio = ratio * (spectrum.length - 1) - fromIdx;
+    const from = spectrum[fromIdx];
+    const to = spectrum[toIdx];
+    result.push(interpolateColor(from, to, localRatio));
+  }
+  return result;
+};
+var interpolateColor = (c1, c2, t) => {
+  const parse = (hex) => {
+    const h = hex.replace("#", "");
+    return [
+      parseInt(h.substring(0, 2), 16),
+      parseInt(h.substring(2, 4), 16),
+      parseInt(h.substring(4, 6), 16)
+    ];
+  };
+  const [r1, g1, b1] = parse(c1);
+  const [r2, g2, b2] = parse(c2);
+  const lerp = (a, b) => Math.round(a + (b - a) * t);
+  const toHex = (n) => n.toString(16).padStart(2, "0");
+  return `#${toHex(lerp(r1, r2))}${toHex(lerp(g1, g2))}${toHex(lerp(b1, b2))}`;
+};
+var generateChartColor = (dataLength, providedColors) => {
+  if (providedColors.length > 0) return providedColors;
+  const spectrum = ["#162029", "#A1B9BD"];
+  return getChartColorRange(spectrum, dataLength);
+};
+var ChartContainer4 = styled5("div")({
+  alignItems: "center",
+  display: "flex",
+  flexDirection: "column",
+  width: "100%"
+});
+var ChartWrapper4 = styled5("div")({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%"
+});
+var ChartSize2 = styled5("div")({
+  height: 160,
+  maxWidth: 160,
+  width: "100%"
+});
+var LegendContainer2 = styled5("div")(
+  ({ isCustom }) => ({
+    display: "flex",
+    flexDirection: isCustom ? "column" : "row",
+    flexWrap: "wrap",
+    gap: 8,
+    marginTop: 16,
+    width: "100%"
+  })
+);
+var LegendWrap2 = styled5("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "4px 0"
+});
+var LegendBox2 = styled5("div")({
+  width: 12,
+  height: 12,
+  borderRadius: 2,
+  flexShrink: 0
+});
+var LegendFont2 = styled5("span")({
+  fontSize: 13,
+  lineHeight: 1.4
+});
+var LegendFontBold = styled5("span")({
+  fontSize: 13,
+  fontWeight: 600,
+  lineHeight: 1.4,
+  display: "flex",
+  alignItems: "center",
+  gap: 4
+});
+var LegendBoxContainer = styled5("div")({
+  display: "flex",
+  alignItems: "center"
+});
+var buildDoughnutChartOption = (textTop, textBottom, isBottomColor, bottomColor) => ({
+  cutout: "85%",
+  maintainAspectRatio: false,
+  responsive: true,
+  aspectRatio: 1,
+  elements: {
+    center: {
+      textNumber: textTop,
+      text: textBottom,
+      fontColor: "#656566",
+      topColor: "#131c24",
+      bottomColor: isBottomColor ? bottomColor || "#131c24" : "#131c24",
+      fontStyle: "normal"
+    }
+  },
+  plugins: {
+    legend: { display: false },
+    tooltip: {
+      mode: "nearest",
+      intersect: true,
+      callbacks: {
+        label: (tooltipItem) => {
+          const chartValue = tooltipItem.parsed;
+          return `${tooltipItem.label}: ${formatNumberWithDollar(chartValue)}`;
+        }
+      },
+      backgroundColor: "#fff",
+      titleFont: { family: "sans-serif", size: 14 },
+      titleColor: "#000",
+      bodyFont: { family: "sans-serif", weight: "bold", size: 13 },
+      bodyColor: "#000",
+      displayColors: false,
+      borderColor: "#000",
+      borderWidth: 1
+    }
+  },
+  interaction: { intersect: false },
+  layout: { padding: {} }
+});
+var drawTextInsideDoughnutPlugin = {
+  id: "doughnutCenterText",
+  beforeDraw: (chart) => {
+    var _a;
+    if ((_a = chart.config.options.elements) == null ? void 0 : _a.center) {
+      const { ctx } = chart;
+      ctx.restore();
+      const centerConfig = chart.config.options.elements.center;
+      const fontBold = "sans-serif";
+      const txt = centerConfig.textNumber;
+      const { text } = centerConfig;
+      const color = centerConfig.topColor;
+      const maxFontSize = centerConfig.maxFontSize || 12;
+      const sidePadding = centerConfig.sidePadding || 25;
+      const sidePaddingCalculated = sidePadding / 100 * (chart.innerRadius * 2);
+      ctx.font = `12px ${fontBold}`;
+      const stringWidth = ctx.measureText(txt).width;
+      const elementWidth = chart.innerRadius * 2 - sidePaddingCalculated;
+      const widthRatio = elementWidth / stringWidth;
+      const newFontSize = Math.floor(12 * widthRatio);
+      const elementHeight = chart.innerRadius * 2;
+      let fontSizeToUse = Math.min(newFontSize, elementHeight, maxFontSize);
+      let { minFontSize } = centerConfig;
+      const lineHeight = centerConfig.lineHeight || 12;
+      let wrapText = false;
+      if (minFontSize === void 0) minFontSize = 8;
+      if (minFontSize && fontSizeToUse < minFontSize) {
+        fontSizeToUse = minFontSize;
+        wrapText = true;
+      }
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      const centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
+      let centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2.2;
+      const centerYY = chart.chartArea.top + chart.chartArea.bottom / 1.65;
+      ctx.font = `${fontSizeToUse}px ${fontBold}`;
+      ctx.fillStyle = color;
+      if (!wrapText) {
+        ctx.fillText(txt, centerX, centerY);
+        const regularFont2 = "sans-serif";
+        ctx.fillStyle = centerConfig.bottomColor;
+        ctx.font = `${Math.min(fontSizeToUse * 0.5, 10)}px ${regularFont2}`;
+        ctx.fillText(text, centerX, centerYY);
+        return;
+      }
+      const words = txt.split(" ");
+      let line = "";
+      const lines = [];
+      for (let n = 0; n < words.length; n++) {
+        const testLine = `${line + words[n]} `;
+        const metrics = ctx.measureText(testLine);
+        const testWidth = metrics.width;
+        if (testWidth > elementWidth && n > 0) {
+          lines.push(line);
+          line = `${words[n]} `;
+        } else {
+          line = testLine;
+        }
+      }
+      centerY -= lines.length / 2 * lineHeight;
+      ctx.restore();
+      for (let n = 0; n < lines.length; n++) {
+        ctx.fillText(lines[n], centerX, centerY);
+        centerY += lineHeight;
+      }
+      ctx.fillText(line, centerX, centerY);
+      const regularFont = "sans-serif";
+      ctx.fillStyle = centerConfig.bottomColor;
+      centerY += lineHeight;
+      ctx.fillText(text, centerX, centerY);
+      ctx.save();
+    }
+  }
+};
+var FrontendDoughnutChart = ({
+  title,
+  data,
+  textTop = " ",
+  textBottom = " ",
+  legendDisplay = true,
+  customLegend = false,
+  isBottomColor = false,
+  bottomColor = "#131c24"
+}) => {
+  const chartRef = useRef4(null);
+  const {
+    data: dChartData = [],
+    title: dChartTitle = [],
+    colors: dChartColor = [],
+    icons: dChartIcons = []
+  } = data || {};
+  const chartColors = useMemo5(
+    () => generateChartColor(dChartData.length, dChartColor),
+    [dChartData.length, dChartColor]
+  );
+  const chartOptions = useMemo5(
+    () => buildDoughnutChartOption(textTop, textBottom, isBottomColor, bottomColor),
+    [textTop, textBottom, isBottomColor, bottomColor]
+  );
+  const chartData = useMemo5(() => {
+    if (!data || !dChartData.length) return { labels: [], datasets: [] };
+    return {
+      type: "doughnut",
+      labels: dChartTitle,
+      datasets: [
+        {
+          data: dChartData,
+          backgroundColor: chartColors,
+          hoverBackgroundColor: chartColors
+        }
+      ]
+    };
+  }, [data, dChartData, dChartTitle, chartColors]);
+  if (!data || !dChartData.length) {
+    return /* @__PURE__ */ jsxs4(ChartContainer4, { children: [
+      title && /* @__PURE__ */ jsx6(Typography, { variant: "subtitle2", color: "text.secondary", mb: 1, children: title }),
+      /* @__PURE__ */ jsx6(Box, { sx: { color: "text.disabled", py: 4 }, children: "No data" })
+    ] });
+  }
+  const generateLegend = () => {
+    if (customLegend) {
+      return dChartData.map((chartDataset, index) => /* @__PURE__ */ jsxs4(LegendWrap2, { children: [
+        /* @__PURE__ */ jsxs4(LegendFontBold, { children: [
+          /* @__PURE__ */ jsx6("span", { children: dChartTitle[index] || "" }),
+          (dChartIcons == null ? void 0 : dChartIcons[index]) && /* @__PURE__ */ jsx6("span", { children: dChartIcons[index] })
+        ] }),
+        /* @__PURE__ */ jsx6(LegendBoxContainer, { children: /* @__PURE__ */ jsx6(LegendBox2, { style: { backgroundColor: chartColors[index] } }) }),
+        /* @__PURE__ */ jsx6(LegendFont2, { children: formatNumberWithDollar(chartDataset) })
+      ] }, `${chartDataset}${index}`));
+    }
+    return dChartData.map((_chartDataset, index) => /* @__PURE__ */ jsxs4(LegendWrap2, { children: [
+      /* @__PURE__ */ jsx6(LegendBox2, { style: { backgroundColor: chartColors[index] } }),
+      /* @__PURE__ */ jsx6(LegendFont2, { children: dChartTitle[index] })
+    ] }, dChartTitle[index]));
+  };
+  return /* @__PURE__ */ jsxs4(ChartContainer4, { children: [
+    title && /* @__PURE__ */ jsx6(Typography, { variant: "subtitle2", color: "text.secondary", mb: 1, children: title }),
+    /* @__PURE__ */ jsxs4(ChartWrapper4, { children: [
+      /* @__PURE__ */ jsx6(ChartSize2, { children: /* @__PURE__ */ jsx6(
+        Chart4,
+        {
+          type: "doughnut",
+          redraw: true,
+          ref: chartRef,
+          data: chartData,
+          options: chartOptions,
+          plugins: [drawTextInsideDoughnutPlugin]
+        }
+      ) }),
+      legendDisplay && /* @__PURE__ */ jsx6(LegendContainer2, { isCustom: customLegend, children: generateLegend() })
+    ] })
+  ] });
+};
+FrontendDoughnutChart.displayName = "FrontendDoughnutChart";
+
+// src/charts/FrontendMixedChart.tsx
+import { useMemo as useMemo6, useState as useState2 } from "react";
+import { styled as styled6 } from "@mui/material/styles";
+import { Typography as Typography2, ToggleButton, ToggleButtonGroup } from "@mui/material";
+import {
+  BarController as BarController2,
+  BarElement as BarElement3,
+  CategoryScale as CategoryScale5,
+  Chart as ChartJS6,
+  Legend as Legend6,
+  LinearScale as LinearScale5,
+  LineController as LineController3,
+  LineElement as LineElement4,
+  PointElement as PointElement4,
+  TimeScale as TimeScale4,
+  Title as Title5,
+  Tooltip as Tooltip6
+} from "chart.js";
+import "chartjs-adapter-date-fns";
+import { Chart as Chart5 } from "react-chartjs-2";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+ChartJS6.register(
+  CategoryScale5,
+  LinearScale5,
+  BarElement3,
+  BarController2,
+  PointElement4,
+  LineElement4,
+  LineController3,
+  Title5,
+  Tooltip6,
+  Legend6,
+  TimeScale4
+);
+var FullwidthChartContainer = styled6("div")({
+  position: "relative",
+  width: "100%"
+});
+var ChartHeader2 = styled6("div")({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  marginBottom: 12
+});
+var BarChartSize = styled6("div")({
+  flex: "auto",
+  height: 300,
+  position: "relative",
+  width: "100%"
+});
+var LoadingIndicator = styled6("div")({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(255,255,255,0.8)"
+});
+var buildChartOption3 = (isMobile) => ({
+  elements: { line: { fill: false } },
+  scales: {
+    x: {
+      type: "time",
+      offset: true,
+      beginAtZero: false,
+      display: true,
+      time: {
+        displayFormats: { month: "yyyy-MM", quarter: "yyyy-MM" },
+        unit: "quarter",
+        stepSize: 1,
+        tooltipFormat: "yyyy-MM"
+      },
+      grid: { display: false, drawOnChartArea: false },
+      ticks: {
+        maxTicksLimit: isMobile ? 4 : 20,
+        autoSkip: false,
+        maxRotation: 0,
+        minRotation: 0,
+        beginAtZero: false,
+        source: "auto"
+      }
+    },
+    y: {
+      type: "linear",
+      display: true,
+      position: "left",
+      ticks: {
+        padding: 5,
+        maxTicksLimit: 6,
+        min: 0,
+        callback: (value) => formatNumberWithText(Number(value), 2)
+      },
+      grid: {
+        display: false,
+        drawBorder: false,
+        drawOnChartArea: false,
+        color: "transparent"
+      },
+      border: { display: false }
+    }
+  },
+  maintainAspectRatio: false,
+  responsive: true,
+  plugins: {
+    legend: {
+      position: "bottom",
+      labels: { usePointStyle: true, boxWidth: 12 }
+    },
+    tooltip: {
+      enabled: true,
+      mode: "nearest",
+      intersect: false,
+      backgroundColor: "#fff",
+      titleColor: "#000",
+      bodyColor: "#000",
+      displayColors: false,
+      borderColor: "#000",
+      borderWidth: 1,
+      padding: 8,
+      cornerRadius: 4,
+      titleSpacing: 4,
+      bodySpacing: 4,
+      callbacks: {
+        label(tooltipItem) {
+          const xLabel = tooltipItem.dataset.label;
+          const { parsed = { y: 0 } } = tooltipItem;
+          const yLabel = parsed.y;
+          const chartValueWithCommas = formatNumber(Math.abs(yLabel));
+          return `${xLabel}: ${yLabel >= 0 ? `$${chartValueWithCommas}` : `-$${chartValueWithCommas}`}`.trim();
+        }
+      }
+    }
+  },
+  interaction: { mode: "nearest", intersect: false }
+});
+var FrontendMixedChart = ({
+  datasets,
+  labels,
+  title,
+  isLoading = false,
+  isError = false,
+  timeFilters,
+  defaultTimeFilterIndex = 0,
+  onTimeFilterChange,
+  height,
+  isMobile = false,
+  customChartOptions = {}
+}) => {
+  const [selectedFilter, setSelectedFilter] = useState2(defaultTimeFilterIndex);
+  const handleFilterChange = (_event, newValue) => {
+    if (newValue !== null) {
+      setSelectedFilter(newValue);
+      onTimeFilterChange == null ? void 0 : onTimeFilterChange(newValue);
+    }
+  };
+  const chartData = useMemo6(
+    () => __spreadProps(__spreadValues({}, labels ? { labels } : {}), {
+      datasets
+    }),
+    [datasets, labels]
+  );
+  const options = useMemo6(
+    () => __spreadValues(__spreadValues({}, buildChartOption3(isMobile)), customChartOptions),
+    [isMobile, customChartOptions]
+  );
+  return /* @__PURE__ */ jsxs5(FullwidthChartContainer, { children: [
+    /* @__PURE__ */ jsxs5(ChartHeader2, { children: [
+      title && /* @__PURE__ */ jsx7(Typography2, { variant: "subtitle1", fontWeight: 600, children: title }),
+      timeFilters && /* @__PURE__ */ jsx7(
+        ToggleButtonGroup,
+        {
+          value: selectedFilter,
+          exclusive: true,
+          onChange: handleFilterChange,
+          size: "small",
+          children: timeFilters.map((filter, index) => /* @__PURE__ */ jsx7(ToggleButton, { value: index, children: filter }, filter))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5(BarChartSize, { style: height ? { height } : void 0, children: [
+      /* @__PURE__ */ jsx7(
+        Chart5,
+        {
+          type: "bar",
+          data: chartData,
+          options
+        }
+      ),
+      isLoading && /* @__PURE__ */ jsx7(LoadingIndicator, { children: /* @__PURE__ */ jsx7(LoadingChartBackdrop, { isLoading, isError }) })
+    ] })
+  ] });
+};
+FrontendMixedChart.displayName = "FrontendMixedChart";
+
+// src/charts/FrontendStackedChart.tsx
+import { CircularProgress as CircularProgress2 } from "@mui/material";
+import { styled as styled7 } from "@mui/material/styles";
+import {
+  BarController as BarController3,
+  BarElement as BarElement4,
+  CategoryScale as CategoryScale6,
+  Chart as ChartJS7,
+  Legend as Legend7,
+  LinearScale as LinearScale6,
+  Title as Title6,
+  Tooltip as Tooltip7
+} from "chart.js";
+import { Chart as Chart6 } from "react-chartjs-2";
+import { jsx as jsx8 } from "react/jsx-runtime";
+ChartJS7.register(
+  CategoryScale6,
+  LinearScale6,
+  BarElement4,
+  BarController3,
+  Title6,
+  Tooltip7,
+  Legend7
+);
+var StyledContainer = styled7("div")({
+  width: "100%",
+  height: "100%"
+});
+var LoadingContainer = styled7("div")({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minHeight: 200
+});
+var EmptyContainer = styled7("div")({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  color: "#A1A1A1",
+  borderBottom: "1px solid #00001A4D",
+  minHeight: 200
+});
+var DEFAULT_COLORS = [
+  "#1976D2",
+  "#001CB0",
+  "#8979FF",
+  "#004080",
+  "#39FD99",
+  "#FFC55A"
+];
+var FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+var FRONTEND_STACKED_CHART_MOCK_LABELS = [
+  "Recreation & Entertainment",
+  "Transport",
+  "Primary Residence Costs",
+  "Telephone, Internet, Pay TV & Media Streaming Subscriptions",
+  "Groceries",
+  "Other Regular and Recurring Expenses"
+];
+var FRONTEND_STACKED_CHART_MOCK_DATA = FRONTEND_STACKED_CHART_MOCK_LABELS.map(
+  () => FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS.map(() => Math.floor(Math.random() * 1e4))
+);
+var FRONTEND_STACKED_CHART_MOCK_COLORS = DEFAULT_COLORS;
+var FrontendStackedChart = ({
+  datasets = FRONTEND_STACKED_CHART_MOCK_DATA,
+  labels = FRONTEND_STACKED_CHART_MOCK_LABELS,
+  chartTitle,
+  xAxisLabels = FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS,
+  showLegend = false,
+  currency = "$",
+  dataColors = FRONTEND_STACKED_CHART_MOCK_COLORS,
+  isLoading = false,
+  noDataText = "No data"
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx8(StyledContainer, { children: /* @__PURE__ */ jsx8(LoadingContainer, { children: /* @__PURE__ */ jsx8(CircularProgress2, {}) }) });
+  }
+  if (!(datasets == null ? void 0 : datasets.length) || !(labels == null ? void 0 : labels.length) || !(xAxisLabels == null ? void 0 : xAxisLabels.length)) {
+    return /* @__PURE__ */ jsx8(StyledContainer, { children: /* @__PURE__ */ jsx8(EmptyContainer, { children: noDataText }) });
+  }
+  const resolvedColors = !dataColors || typeof dataColors !== "string" && dataColors.length === 0 ? DEFAULT_COLORS.slice(0, 2) : dataColors;
+  const options = {
+    plugins: {
+      title: { display: !!chartTitle, text: chartTitle },
+      legend: { display: showLegend },
+      tooltip: {
+        callbacks: {
+          label(tooltipItem) {
+            let label = tooltipItem.dataset.label || "";
+            if (label) label += ": ";
+            label += currency ? currency + tooltipItem.parsed.y : tooltipItem.parsed.y;
+            return label;
+          }
+        }
+      }
+    },
+    maintainAspectRatio: false,
+    responsive: true,
+    scales: {
+      x: {
+        stacked: true,
+        display: true,
+        grid: { display: true, drawOnChartArea: false, drawTicks: false },
+        ticks: { display: true, padding: 8, font: { size: 11 } }
+      },
+      y: {
+        stacked: true,
+        display: true,
+        grid: { display: false },
+        ticks: { display: true, maxTicksLimit: 4 }
+      }
+    }
+  };
+  const chartData = {
+    labels: xAxisLabels,
+    datasets: labels.map((label, index) => {
+      const color = typeof resolvedColors === "string" ? resolvedColors : resolvedColors[index];
+      return {
+        label,
+        data: datasets[index],
+        backgroundColor: color,
+        borderColor: "#fff",
+        borderWidth: typeof resolvedColors === "string" ? 0 : 1,
+        barPercentage: 0.5
+      };
+    })
+  };
+  return /* @__PURE__ */ jsx8(Chart6, { type: "bar", options, data: chartData });
+};
+FrontendStackedChart.displayName = "FrontendStackedChart";
+
+// src/charts/FrontendIncomeExpenseHorizontalBarChart.tsx
+import { useMemo as useMemo7 } from "react";
+import { styled as styled8 } from "@mui/material/styles";
+import {
+  BarElement as BarElement5,
+  CategoryScale as CategoryScale7,
+  Chart as ChartJS8,
+  Legend as Legend8,
+  LinearScale as LinearScale7,
+  Title as Title7,
+  Tooltip as Tooltip8
+} from "chart.js";
+import ChartDataLabels from "chartjs-plugin-datalabels";
+import { Chart as Chart7 } from "react-chartjs-2";
+import { jsx as jsx9 } from "react/jsx-runtime";
+ChartJS8.register(CategoryScale7, LinearScale7, BarElement5, Title7, Tooltip8, Legend8);
+var ChartWrapper5 = styled8("div")(
+  ({ chartHeight }) => ({
+    position: "relative",
+    height: chartHeight,
+    width: "100%"
+  })
+);
+var FrontendIncomeExpenseHorizontalBarChart = ({
+  totalIncome,
+  totalExpense,
+  incomeColor = "#39FD99",
+  expenseColor = "#162029",
+  textColor = "#040D13",
+  height = 160
+}) => {
+  const suggestedMax = Math.max(totalIncome, Math.abs(totalExpense)) * 1.25;
+  const options = useMemo7(
+    () => ({
+      indexAxis: "y",
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        datalabels: {
+          color: textColor,
+          textAlign: "left"
+        },
+        legend: { display: false }
+      },
+      layout: {
+        padding: {
+          right: 120,
+          left: 0,
+          top: 10,
+          bottom: 10
+        }
+      },
+      scales: {
+        y: {
+          display: true,
+          grid: { display: false, drawBorder: false },
+          border: { display: false },
+          ticks: { display: false }
+        },
+        x: {
+          display: true,
+          grid: { display: false, drawBorder: false },
+          border: { display: false },
+          ticks: {
+            display: false
+          },
+          suggestedMax
+        }
+      }
+    }),
+    [totalIncome, totalExpense, textColor, suggestedMax]
+  );
+  const chartData = useMemo7(
+    () => ({
+      labels: ["Incoming", "Outgoing"],
+      datasets: [
+        {
+          barThickness: 40,
+          backgroundColor: [incomeColor, expenseColor],
+          data: [totalIncome, Math.abs(totalExpense)],
+          datalabels: {
+            labels: {
+              value: {
+                anchor: "end",
+                align: "end",
+                offset: 10,
+                clamp: false,
+                font: { weight: "bold", size: 14 },
+                formatter(value) {
+                  return [formatNumberWithDollar(value), ""];
+                }
+              },
+              name: {
+                anchor: "end",
+                align: "end",
+                offset: 10,
+                clamp: false,
+                formatter(_value, ctx) {
+                  return ["", ctx.chart.data.labels[ctx.dataIndex]];
+                }
+              }
+            }
+          }
+        }
+      ]
+    }),
+    [totalIncome, totalExpense, incomeColor, expenseColor]
+  );
+  return /* @__PURE__ */ jsx9(ChartWrapper5, { chartHeight: height, children: /* @__PURE__ */ jsx9(
+    Chart7,
+    {
+      type: "bar",
+      plugins: [ChartDataLabels],
+      options,
+      data: chartData
+    }
+  ) });
+};
+FrontendIncomeExpenseHorizontalBarChart.displayName = "FrontendIncomeExpenseHorizontalBarChart";
+
+// src/charts/FrontendPercentageBar.tsx
+import { useMemo as useMemo8, useState as useState3 } from "react";
+import { Box as Box2, Typography as Typography3 } from "@mui/material";
+import { styled as styled9 } from "@mui/material/styles";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var MAXIMUM_CATEGORIES = 5;
+var MAXIMUM_CATEGORIES_PERCENT = 5;
+var Root = styled9("div")({
+  width: "100%"
+});
+var Title8 = styled9("div")({
+  fontSize: 16,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  transition: "all 0.2s ease-in",
+  whiteSpace: "nowrap",
+  minHeight: 24
+});
+var Bar2 = styled9("div")({
+  display: "flex",
+  gap: 2,
+  height: 25,
+  marginBottom: "2.5rem",
+  marginTop: "1.5rem",
+  width: "100%",
+  "&:not(:hover) .percentage-bar-part": {
+    backgroundColor: "var(--bg-color)"
+  },
+  "&:not(:hover) .percentage-bar-icon": {
+    opacity: 1
+  }
+});
+var Part = styled9("div")({
+  borderRadius: 2,
+  position: "relative",
+  transition: "background-color 0.3s ease-in",
+  cursor: "pointer",
+  backgroundColor: "#e9edf2",
+  "&:hover": {
+    backgroundColor: "var(--bg-color)"
+  },
+  "&:hover .percentage-bar-icon": {
+    opacity: 1
+  }
+});
+var OtherBar = styled9("div")({
+  display: "flex",
+  gap: 2,
+  position: "relative",
+  "&:hover .percentage-bar-part": {
+    backgroundColor: "var(--bg-color)"
+  },
+  "&:hover .percentage-bar-icon": {
+    opacity: 1
+  }
+});
+var ValuePart = styled9("div")({
+  bottom: -28,
+  height: 20,
+  left: 0,
+  position: "absolute",
+  width: "100%",
+  fontSize: 12,
+  padding: "1rem 0.5rem",
+  "&::after": {
+    borderBottom: "2px solid #E8EAEC",
+    borderLeft: "2px solid #E8EAEC",
+    borderRight: "2px solid #E8EAEC",
+    bottom: -4,
+    content: '""',
+    height: 10,
+    left: 0,
+    position: "absolute",
+    width: "100%"
+  }
+});
+var IconWrapper = styled9("div")({
+  opacity: 0,
+  marginLeft: 4,
+  width: 18,
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "opacity 0.3s ease-in",
+  "& svg": { width: "100%" }
+});
+var mergeOtherCategories = (others) => {
+  return others.reduce(
+    (result, part) => __spreadProps(__spreadValues({}, result), {
+      percentage: part.percentage + result.percentage
+    }),
+    { title: "Other", percentage: 0 }
+  );
+};
+var splitCategoryParts = (items, maxIndex) => {
+  if (maxIndex < 0) return [items, []];
+  const idx = maxIndex > MAXIMUM_CATEGORIES ? MAXIMUM_CATEGORIES : maxIndex;
+  return [items.slice(0, idx), items.slice(idx)];
+};
+var FrontendPercentageBar = ({
+  defaultTitle,
+  chartColors = [],
+  parts = [],
+  chartIcons = [],
+  showFullCategory = false
+}) => {
+  const [selectedTitle, setSelectedTitle] = useState3("");
+  const handleMouseEnterPart = (part) => {
+    setSelectedTitle(`${(part.percentage * 100).toFixed(1)}% ${part.title}`);
+  };
+  const handleMouseLeaveBar = () => {
+    setSelectedTitle("");
+  };
+  const maximumCategoryItem = useMemo8(() => {
+    if (showFullCategory) return parts.length;
+    return parts.slice().sort((a, b) => b.percentage - a.percentage).findIndex((part) => part.percentage * 100 < MAXIMUM_CATEGORIES_PERCENT);
+  }, [parts, showFullCategory]);
+  const [firstParts, secondParts] = useMemo8(() => {
+    if (showFullCategory) return [parts, []];
+    return splitCategoryParts(parts, maximumCategoryItem);
+  }, [parts, maximumCategoryItem, showFullCategory]);
+  const [firstColors, secondColors] = useMemo8(() => {
+    if (showFullCategory) return [chartColors, []];
+    return splitCategoryParts(chartColors, maximumCategoryItem);
+  }, [chartColors, maximumCategoryItem, showFullCategory]);
+  const [firstIcons, secondIcons] = useMemo8(() => {
+    if (showFullCategory) return [chartIcons, []];
+    return splitCategoryParts(chartIcons, maximumCategoryItem);
+  }, [chartIcons, maximumCategoryItem, showFullCategory]);
+  const otherCategoryValue = mergeOtherCategories(secondParts);
+  return /* @__PURE__ */ jsxs6(Root, { children: [
+    /* @__PURE__ */ jsx10(Title8, { children: selectedTitle || defaultTitle }),
+    parts.length === 0 ? /* @__PURE__ */ jsx10(
+      Box2,
+      {
+        sx: {
+          height: 22,
+          width: "100%",
+          backgroundColor: "rgba(191,191,191,0.1)",
+          border: "1px solid #E8EAEC",
+          borderRadius: "3px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          mt: 0.5
+        },
+        children: /* @__PURE__ */ jsx10(Typography3, { sx: { color: "#4A5C6A", fontSize: 12, fontWeight: 400 }, children: "No data" })
+      }
+    ) : /* @__PURE__ */ jsxs6(Bar2, { onMouseLeave: handleMouseLeaveBar, children: [
+      firstParts.map((part, index) => /* @__PURE__ */ jsxs6(
+        Part,
+        {
+          className: "percentage-bar-part",
+          onMouseEnter: () => handleMouseEnterPart(part),
+          style: {
+            flexGrow: part.percentage * 10,
+            "--bg-color": firstColors[index]
+          },
+          children: [
+            firstIcons[index] && /* @__PURE__ */ jsx10(IconWrapper, { className: "percentage-bar-icon", children: firstIcons[index] }),
+            /* @__PURE__ */ jsxs6(ValuePart, { onMouseEnter: () => handleMouseEnterPart(part), children: [
+              convertToFloat(part.percentage * 100, 1),
+              "%"
+            ] })
+          ]
+        },
+        part.title
+      )),
+      otherCategoryValue.percentage !== 0 && /* @__PURE__ */ jsxs6(OtherBar, { style: { flexGrow: otherCategoryValue.percentage * 10 }, children: [
+        secondParts.map((part, index) => /* @__PURE__ */ jsx10(
+          Part,
+          {
+            className: "percentage-bar-part",
+            onMouseEnter: () => handleMouseEnterPart(part),
+            style: {
+              flexGrow: part.percentage * 100,
+              "--bg-color": secondColors[index]
+            },
+            children: part.percentage > 0.05 && secondIcons[index] && /* @__PURE__ */ jsx10(IconWrapper, { className: "percentage-bar-icon", children: secondIcons[index] })
+          },
+          part.title
+        )),
+        /* @__PURE__ */ jsxs6(ValuePart, { onMouseEnter: () => handleMouseEnterPart(otherCategoryValue), children: [
+          convertToFloat(otherCategoryValue.percentage * 100, 1),
+          "%"
+        ] })
+      ] })
+    ] })
+  ] });
+};
+FrontendPercentageBar.displayName = "FrontendPercentageBar";
+
+// src/charts/FrontendLiabilitiesChart.tsx
+import { useMemo as useMemo9 } from "react";
+import { styled as styled10 } from "@mui/material/styles";
+import { Typography as Typography4 } from "@mui/material";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var generateColorGradient = (baseColor, count) => {
+  if (count <= 0) return [];
+  const hex = baseColor.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return Array.from({ length: count }, (_, i) => {
+    const ratio = count > 1 ? i / (count - 1) : 0;
+    const nr = Math.round(r + (255 - r) * ratio);
+    const ng = Math.round(g + (255 - g) * ratio);
+    const nb = Math.round(b + (255 - b) * ratio);
+    return `#${nr.toString(16).padStart(2, "0")}${ng.toString(16).padStart(2, "0")}${nb.toString(16).padStart(2, "0")}`;
+  });
+};
+var Root2 = styled10("div")({
+  width: "100%"
+});
+var LegendsContainer = styled10("div")({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: 12,
+  marginTop: 8
+});
+var LegendItem = styled10("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: 6
+});
+var LegendColor = styled10("div")(({ bgColor }) => ({
+  width: 12,
+  height: 12,
+  borderRadius: 2,
+  backgroundColor: bgColor,
+  flexShrink: 0
+}));
+var FrontendLiabilitiesChart = ({
+  defaultTitle,
+  color = "#131c24",
+  parts = []
+}) => {
+  const colors = useMemo9(
+    () => generateColorGradient(color, parts.length),
+    [color, parts.length]
+  );
+  return /* @__PURE__ */ jsxs7(Root2, { children: [
+    /* @__PURE__ */ jsx11(
+      FrontendPercentageBar,
+      {
+        defaultTitle,
+        chartColors: colors,
+        parts,
+        showFullCategory: true
+      }
+    ),
+    parts.length === 0 && /* @__PURE__ */ jsx11(
+      "div",
+      {
+        style: {
+          height: 22,
+          backgroundColor: "#e9edf2",
+          borderRadius: 2,
+          marginTop: 8
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx11(LegendsContainer, { children: parts.map((part, index) => /* @__PURE__ */ jsxs7(LegendItem, { children: [
+      /* @__PURE__ */ jsx11(LegendColor, { bgColor: colors[index] || "#ccc" }),
+      /* @__PURE__ */ jsx11(Typography4, { variant: "body2", children: part.title })
+    ] }, part.id || part.title)) })
+  ] });
+};
+FrontendLiabilitiesChart.displayName = "FrontendLiabilitiesChart";
+
+// src/charts/FrontendScenarioLineChart.tsx
+import { useMemo as useMemo10, useRef as useRef5 } from "react";
+import { styled as styled11 } from "@mui/material/styles";
+import {
+  CategoryScale as CategoryScale8,
+  Chart as ChartJS9,
+  Legend as Legend9,
+  LinearScale as LinearScale8,
+  LineController as LineController4,
+  LineElement as LineElement5,
+  PointElement as PointElement5,
+  TimeScale as TimeScale5,
+  Title as Title9,
+  Tooltip as Tooltip9
+} from "chart.js";
+import "chartjs-adapter-date-fns";
+import { Chart as Chart8 } from "react-chartjs-2";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+ChartJS9.register(
+  CategoryScale8,
+  LinearScale8,
+  PointElement5,
+  LineElement5,
+  LineController4,
+  Title9,
+  Tooltip9,
+  Legend9,
+  TimeScale5
+);
+var ChartContainer5 = styled11("div")({
+  position: "relative",
+  width: "100%"
+});
+var LineChartSize = styled11("div")(
+  ({ chartHeight }) => ({
+    flex: "auto",
+    height: chartHeight || 270,
+    position: "relative",
+    width: "100%"
+  })
+);
+var LoadingOverlay2 = styled11("div")({
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(255,255,255,0.8)"
+});
+var SECONDARY_COLOR_40 = "rgba(22, 32, 41, 0.4)";
+var BORDER_COLOR2 = "#A1B9BD";
+var buildChartOption4 = (customOptions = {}) => {
+  const defaultOptions = {
+    scales: {
+      x: {
+        grid: { display: false },
+        stacked: true,
+        ticks: {
+          maxTicksLimit: 15,
+          autoSkip: false,
+          maxRotation: 0,
+          minRotation: 0,
+          beginAtZero: false,
+          source: "auto"
+        },
+        bounds: "data",
+        type: "time",
+        time: { unit: "month" },
+        distribution: "linear"
+      },
+      y: {
+        grid: { drawOnChartArea: false },
+        display: true,
+        stacked: false,
+        position: "left",
+        ticks: {
+          beginAtZero: true,
+          display: true,
+          callback(value) {
+            return formatNumberWithText(Number(value), 1);
+          }
+        }
+      }
+    },
+    maintainAspectRatio: false,
+    responsive: true,
+    plugins: {
+      legend: {
+        display: true,
+        position: "top",
+        align: "end",
+        fullSize: true,
+        reverse: false,
+        labels: {
+          usePointStyle: true,
+          boxWidth: 200,
+          padding: 10
+        }
+      },
+      tooltip: {
+        enabled: true,
+        mode: "nearest",
+        intersect: false,
+        backgroundColor: "#fff",
+        titleColor: "#000",
+        bodyColor: "#000",
+        displayColors: false,
+        borderColor: "#000",
+        borderWidth: 1,
+        padding: 8,
+        cornerRadius: 4,
+        titleSpacing: 4,
+        bodySpacing: 4,
+        callbacks: {
+          title(tooltipItems) {
+            var _a;
+            const tooltipItem = tooltipItems[0];
+            if ((_a = tooltipItem == null ? void 0 : tooltipItem.parsed) == null ? void 0 : _a.x) {
+              const date = new Date(tooltipItem.parsed.x);
+              return date.toLocaleDateString("en-US", {
+                month: "short",
+                year: "numeric"
+              });
+            }
+            return "";
+          },
+          label(tooltipItem) {
+            const xLabel = tooltipItem.dataset.label;
+            const { parsed = { y: 0 } } = tooltipItem;
+            const yLabel = parsed.y;
+            const chartValueWithCommas = formatNumber(Math.abs(yLabel));
+            return `${xLabel}: ${yLabel >= 0 ? `$${chartValueWithCommas}` : `-$${chartValueWithCommas}`}`.trim();
+          }
+        }
+      }
+    },
+    interaction: { mode: "nearest", intersect: false }
+  };
+  return __spreadValues(__spreadValues({}, defaultOptions), customOptions);
+};
+var buildChartData3 = (data, secondaryData, primaryColor, borderWidth, desiredLoanAmount) => {
+  const desiredLoanLine = data.map((item) => __spreadProps(__spreadValues({}, item), {
+    y: desiredLoanAmount
+  }));
+  return {
+    datasets: [
+      {
+        label: "Based on Current Expenses",
+        fill: false,
+        backgroundColor: BORDER_COLOR2,
+        borderColor: "#5E6266",
+        borderCapStyle: "butt",
+        borderDash: [],
+        borderDashOffset: 0,
+        borderJoinStyle: "miter",
+        pointBackgroundColor: "#5E6266",
+        pointBorderWidth: 2,
+        pointHoverRadius: 5,
+        pointHoverBackgroundColor: "#5E6266",
+        pointHoverBorderColor: SECONDARY_COLOR_40,
+        pointHoverBorderWidth: 8,
+        borderWidth,
+        pointRadius: 0,
+        pointBorderColor: "#5E6266",
+        pointHitRadius: 3,
+        pointStyle: "line",
+        tension: 0.4,
+        data
+      },
+      {
+        label: "Optimised Estimate",
+        fill: false,
+        backgroundColor: BORDER_COLOR2,
+        borderColor: "#A1B9BD",
+        borderDash: [2, 2],
+        borderDashOffset: 0,
+        borderJoinStyle: "miter",
+        pointBorderColor: "#A1B9BD",
+        pointBackgroundColor: "#A1B9BD",
+        pointBorderWidth: 2,
+        pointHoverRadius: 5,
+        pointHoverBackgroundColor: "#A1B9BD",
+        pointHoverBorderColor: SECONDARY_COLOR_40,
+        pointHoverBorderWidth: 8,
+        pointRadius: 0,
+        borderWidth,
+        pointHitRadius: 3,
+        data: secondaryData,
+        tension: 0.4,
+        pointStyle: "line"
+      },
+      {
+        label: "Desired Loan Amount",
+        fill: false,
+        backgroundColor: "transparent",
+        borderColor: primaryColor,
+        borderCapStyle: "butt",
+        borderDash: [5, 5],
+        borderDashOffset: 0,
+        borderJoinStyle: "miter",
+        pointBorderColor: primaryColor,
+        pointBackgroundColor: primaryColor,
+        pointBorderWidth: 2,
+        pointHoverRadius: 5,
+        pointHoverBackgroundColor: primaryColor,
+        pointHoverBorderColor: primaryColor,
+        pointHoverBorderWidth: 8,
+        borderWidth,
+        pointRadius: 0,
+        pointHitRadius: 3,
+        data: desiredLoanLine,
+        tension: 0,
+        pointStyle: "line"
+      }
+    ]
+  };
+};
+var DEFAULT_DESIRED_LOAN_AMOUNT = 5e5;
+var FrontendScenarioLineChart = ({
+  data = [],
+  secondaryData = [],
+  isLoading = false,
+  isError = false,
+  height = 300,
+  desiredLoanAmount,
+  primaryColor = "#04f73d",
+  customChartOptions = {}
+}) => {
+  const chartRef = useRef5(null);
+  const chartData = useMemo10(
+    () => buildChartData3(
+      data,
+      secondaryData,
+      primaryColor,
+      1,
+      desiredLoanAmount != null ? desiredLoanAmount : DEFAULT_DESIRED_LOAN_AMOUNT
+    ),
+    [data, secondaryData, primaryColor, desiredLoanAmount]
+  );
+  const options = useMemo10(
+    () => buildChartOption4(customChartOptions),
+    [customChartOptions]
+  );
+  return /* @__PURE__ */ jsx12(ChartContainer5, { children: /* @__PURE__ */ jsxs8(LineChartSize, { chartHeight: height, children: [
+    /* @__PURE__ */ jsx12(
+      Chart8,
+      {
+        ref: chartRef,
+        type: "line",
+        data: chartData,
+        options
+      }
+    ),
+    (isLoading || isError) && /* @__PURE__ */ jsx12(LoadingOverlay2, { children: /* @__PURE__ */ jsx12(LoadingChartBackdrop, { isLoading, isError }) })
+  ] }) });
+};
+FrontendScenarioLineChart.displayName = "FrontendScenarioLineChart";
+
+// src/charts/mock-data.ts
+var generateMonthlyPeriods = (months = 12) => {
+  const periods2 = [];
+  const now = /* @__PURE__ */ new Date();
+  for (let i = months - 1; i >= 0; i--) {
+    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
+    periods2.push(d.toISOString().split("T")[0]);
+  }
+  return periods2;
+};
+var randInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+var periods = generateMonthlyPeriods(12);
+var mockLineChartData = [
+  {
+    label: "Portfolio Value",
+    data: periods.map((p) => ({ x: p, y: randInt(1e5, 5e5) })),
+    customOptions: {
+      borderColor: "#2B72FB",
+      backgroundColor: "#2B72FB1A",
+      fill: true
+    }
+  }
+];
+var mockMobileLineChartData = [
+  {
+    label: "Portfolio Value",
+    data: periods.map((p) => ({ x: p, y: randInt(1e5, 5e5) })),
+    color: "#162029"
+  },
+  {
+    label: "Benchmark",
+    data: periods.map((p) => ({ x: p, y: randInt(8e4, 45e4) })),
+    color: "#A1B9BD",
+    lineSpacing: [5, 5]
+  }
+];
+var mockBarChartData = {
+  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+  datasets: [
+    {
+      label: "Income",
+      data: Array.from({ length: 12 }, () => randInt(3e3, 8e3)),
+      backgroundColor: "#39FD99"
+    },
+    {
+      label: "Expenses",
+      data: Array.from({ length: 12 }, () => -randInt(2e3, 6e3)),
+      backgroundColor: "#F44336"
+    }
+  ]
+};
+var mockDoughnutData = {
+  data: [35e3, 22e3, 18e3, 12e3, 8e3, 5e3],
+  title: [
+    "Property",
+    "Shares",
+    "Superannuation",
+    "Cash",
+    "Crypto",
+    "Other"
+  ],
+  colors: ["#2B72FB", "#64BDC6", "#EECA34", "#FE6A35", "#7B47E9", "#3FDC7E"]
+};
+var mockMixedChartDatasets = [
+  {
+    type: "line",
+    label: "Estimate Value",
+    data: periods.map((p) => ({ x: p, y: randInt(4e5, 6e5) })),
+    borderColor: "#131C24",
+    backgroundColor: "#131C24",
+    borderWidth: 3,
+    fill: false,
+    tension: 0.4,
+    pointRadius: 0,
+    pointStyle: "rect"
+  },
+  {
+    type: "line",
+    label: "Suburb Average",
+    data: periods.map((p) => ({ x: p, y: randInt(45e4, 55e4) })),
+    borderColor: "#e8e8eb",
+    backgroundColor: "#e8e8eb",
+    borderWidth: 1,
+    fill: false,
+    tension: 0.4,
+    pointRadius: 0,
+    pointStyle: "rect"
+  },
+  {
+    type: "bar",
+    label: "Debt",
+    data: periods.map((p) => ({ x: p, y: randInt(2e5, 35e4) })),
+    backgroundColor: "#E9EDF2",
+    borderColor: "#E9EDF2",
+    fill: false,
+    tension: 0.4,
+    pointRadius: 0,
+    pointStyle: "rect"
+  }
+];
+var mockPercentageBarParts = [
+  { title: "Groceries", percentage: 0.25 },
+  { title: "Transport", percentage: 0.18 },
+  { title: "Entertainment", percentage: 0.15 },
+  { title: "Utilities", percentage: 0.12 },
+  { title: "Dining", percentage: 0.1 },
+  { title: "Shopping", percentage: 0.08 },
+  { title: "Healthcare", percentage: 0.07 },
+  { title: "Education", percentage: 0.05 }
+];
+var mockPercentageBarColors = [
+  "#2B72FB",
+  "#64BDC6",
+  "#EECA34",
+  "#FE6A35",
+  "#FA4B42",
+  "#EE60E0",
+  "#7B47E9",
+  "#3FDC7E"
+];
+var mockLiabilitiesParts = [
+  { id: "1", title: "Home Loan", percentage: 0.55 },
+  { id: "2", title: "Car Loan", percentage: 0.25 },
+  { id: "3", title: "Credit Card", percentage: 0.12 },
+  { id: "4", title: "Personal Loan", percentage: 0.08 }
+];
+var mockScenarioData = periods.map((p) => ({
+  x: p,
+  y: randInt(5e5, 8e5)
+}));
+var mockScenarioSecondaryData = periods.map(
+  (p) => ({
+    x: p,
+    y: randInt(6e5, 9e5)
+  })
+);
+export {
+  BackofficeSwitchableChart,
+  FRONTEND_STACKED_CHART_MOCK_COLORS,
+  FRONTEND_STACKED_CHART_MOCK_DATA,
+  FRONTEND_STACKED_CHART_MOCK_LABELS,
+  FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS,
+  FrontendBarChart,
+  FrontendDoughnutChart,
+  FrontendIncomeExpenseHorizontalBarChart,
+  FrontendLiabilitiesChart,
+  FrontendLineChart,
+  FrontendLineChartMobile,
+  FrontendMixedChart,
+  FrontendPercentageBar,
+  FrontendScenarioLineChart,
+  FrontendStackedChart,
+  LoadingChartBackdrop,
+  buildChartDataFromObject,
+  convertToFloat,
+  formatNumber,
+  formatNumberWithDollar,
+  formatNumberWithText,
+  getChartOptions,
+  mockBarChartData,
+  mockDoughnutData,
+  mockLiabilitiesParts,
+  mockLineChartData,
+  mockMixedChartDatasets,
+  mockMobileLineChartData,
+  mockPercentageBarColors,
+  mockPercentageBarParts,
+  mockScenarioData,
+  mockScenarioSecondaryData,
+  tooltipsBaseOption
+};