@wealthx/ui 1.0.0 → 1.0.1

package/src/charts/FrontendScenarioLineChart.tsx

@@ -0,0 +1,308 @@
+import React, { useMemo, useRef } from "react";
+import { styled } from "@mui/material/styles";
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  TimeScale,
+  Title,
+  Tooltip,
+} from "chart.js";
+import "chartjs-adapter-date-fns";
+import { Chart } from "react-chartjs-2";
+import { formatNumber, formatNumberWithText } from "./chart-utils";
+import { LoadingChartBackdrop } from "./LoadingChartBackdrop";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  LineController,
+  Title,
+  Tooltip,
+  Legend,
+  TimeScale
+);
+
+export interface ScenarioDataPoint {
+  x: string | Date;
+  y: number;
+}
+
+export interface FrontendScenarioLineChartProps {
+  data?: ScenarioDataPoint[];
+  secondaryData?: ScenarioDataPoint[];
+  isLoading?: boolean;
+  isError?: boolean;
+  height?: number;
+  desiredLoanAmount?: number;
+  primaryColor?: string;
+  textColor?: string;
+  customChartOptions?: Record<string, any>;
+}
+
+const ChartContainer = styled("div")({
+  position: "relative",
+  width: "100%",
+});
+
+const LineChartSize = styled("div")<{ chartHeight?: number }>(
+  ({ chartHeight }) => ({
+    flex: "auto",
+    height: chartHeight || 270,
+    position: "relative",
+    width: "100%",
+  })
+);
+
+const LoadingOverlay = styled("div")({
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(255,255,255,0.8)",
+});
+
+const SECONDARY_COLOR_40 = "rgba(22, 32, 41, 0.4)";
+const BORDER_COLOR = "#A1B9BD";
+
+const buildChartOption = (customOptions: Record<string, any> = {}) => {
+  const defaultOptions: Record<string, any> = {
+    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: any) {
+            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: any[]) {
+            const tooltipItem = tooltipItems[0];
+            if (tooltipItem?.parsed?.x) {
+              const date = new Date(tooltipItem.parsed.x);
+              return date.toLocaleDateString("en-US", {
+                month: "short",
+                year: "numeric",
+              });
+            }
+            return "";
+          },
+          label(tooltipItem: any) {
+            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 { ...defaultOptions, ...customOptions };
+};
+
+const buildChartData = (
+  data: ScenarioDataPoint[],
+  secondaryData: ScenarioDataPoint[],
+  primaryColor: string,
+  borderWidth: number,
+  desiredLoanAmount: number
+) => {
+  const desiredLoanLine = data.map((item) => ({
+    ...item,
+    y: desiredLoanAmount,
+  }));
+
+  return {
+    datasets: [
+      {
+        label: "Based on Current Expenses",
+        fill: false,
+        backgroundColor: BORDER_COLOR,
+        borderColor: "#5E6266",
+        borderCapStyle: "butt" as const,
+        borderDash: [] as number[],
+        borderDashOffset: 0.0,
+        borderJoinStyle: "miter" as const,
+        pointBackgroundColor: "#5E6266",
+        pointBorderWidth: 2,
+        pointHoverRadius: 5,
+        pointHoverBackgroundColor: "#5E6266",
+        pointHoverBorderColor: SECONDARY_COLOR_40,
+        pointHoverBorderWidth: 8,
+        borderWidth,
+        pointRadius: 0,
+        pointBorderColor: "#5E6266",
+        pointHitRadius: 3,
+        pointStyle: "line" as const,
+        tension: 0.4,
+        data,
+      },
+      {
+        label: "Optimised Estimate",
+        fill: false,
+        backgroundColor: BORDER_COLOR,
+        borderColor: "#A1B9BD",
+        borderDash: [2, 2],
+        borderDashOffset: 0.0,
+        borderJoinStyle: "miter" as const,
+        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" as const,
+      },
+      {
+        label: "Desired Loan Amount",
+        fill: false,
+        backgroundColor: "transparent",
+        borderColor: primaryColor,
+        borderCapStyle: "butt" as const,
+        borderDash: [5, 5],
+        borderDashOffset: 0.0,
+        borderJoinStyle: "miter" as const,
+        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" as const,
+      },
+    ],
+  };
+};
+
+const DEFAULT_DESIRED_LOAN_AMOUNT = 500000;
+
+export const FrontendScenarioLineChart: React.FC<
+  FrontendScenarioLineChartProps
+> = ({
+  data = [],
+  secondaryData = [],
+  isLoading = false,
+  isError = false,
+  height = 300,
+  desiredLoanAmount,
+  primaryColor = "#04f73d",
+  customChartOptions = {},
+}) => {
+  const chartRef = useRef(null);
+
+  const chartData = useMemo(
+    () =>
+      buildChartData(
+        data,
+        secondaryData,
+        primaryColor,
+        1,
+        desiredLoanAmount ?? DEFAULT_DESIRED_LOAN_AMOUNT
+      ),
+    [data, secondaryData, primaryColor, desiredLoanAmount]
+  );
+
+  const options = useMemo(
+    () => buildChartOption(customChartOptions),
+    [customChartOptions]
+  );
+
+  return (
+    <ChartContainer>
+      <LineChartSize chartHeight={height}>
+        <Chart
+          ref={chartRef}
+          type="line"
+          data={chartData as any}
+          options={options as any}
+        />
+        {(isLoading || isError) && (
+          <LoadingOverlay>
+            <LoadingChartBackdrop isLoading={isLoading} isError={isError} />
+          </LoadingOverlay>
+        )}
+      </LineChartSize>
+    </ChartContainer>
+  );
+};
+
+FrontendScenarioLineChart.displayName = "FrontendScenarioLineChart";

package/src/charts/FrontendStackedChart.tsx

@@ -0,0 +1,184 @@
+import React from "react";
+import { CircularProgress } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import {
+  BarController,
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  Title,
+  Tooltip,
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  BarController,
+  Title,
+  Tooltip,
+  Legend
+);
+
+export interface FrontendStackedChartProps {
+  datasets?: number[][];
+  labels?: string[];
+  chartTitle?: string;
+  xAxisLabels?: string[];
+  showLegend?: boolean;
+  currency?: string;
+  dataColors?: string | string[];
+  isLoading?: boolean;
+  noDataText?: string;
+}
+
+const StyledContainer = styled("div")({
+  width: "100%",
+  height: "100%",
+});
+
+const LoadingContainer = styled("div")({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minHeight: 200,
+});
+
+const EmptyContainer = styled("div")({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  color: "#A1A1A1",
+  borderBottom: "1px solid #00001A4D",
+  minHeight: 200,
+});
+
+const DEFAULT_COLORS = [
+  "#1976D2",
+  "#001CB0",
+  "#8979FF",
+  "#004080",
+  "#39FD99",
+  "#FFC55A",
+];
+
+export const FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS = [
+  "Jan", "Feb", "Mar", "Apr", "May", "Jun",
+  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
+];
+
+export const FRONTEND_STACKED_CHART_MOCK_LABELS = [
+  "Recreation & Entertainment",
+  "Transport",
+  "Primary Residence Costs",
+  "Telephone, Internet, Pay TV & Media Streaming Subscriptions",
+  "Groceries",
+  "Other Regular and Recurring Expenses",
+];
+
+export const FRONTEND_STACKED_CHART_MOCK_DATA = FRONTEND_STACKED_CHART_MOCK_LABELS.map(
+  () => FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS.map(() => Math.floor(Math.random() * 10000))
+);
+
+export const FRONTEND_STACKED_CHART_MOCK_COLORS = DEFAULT_COLORS;
+
+export const FrontendStackedChart: React.FC<FrontendStackedChartProps> = ({
+  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 (
+      <StyledContainer>
+        <LoadingContainer>
+          <CircularProgress />
+        </LoadingContainer>
+      </StyledContainer>
+    );
+  }
+
+  if (
+    !datasets?.length ||
+    !labels?.length ||
+    !xAxisLabels?.length
+  ) {
+    return (
+      <StyledContainer>
+        <EmptyContainer>{noDataText}</EmptyContainer>
+      </StyledContainer>
+    );
+  }
+
+  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: any) {
+            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 <Chart type="bar" options={options} data={chartData} />;
+};
+
+FrontendStackedChart.displayName = "FrontendStackedChart";

package/src/charts/LoadingChartBackdrop.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { CircularProgress } from "@mui/material";
+
+export interface LoadingChartBackdropProps {
+  isLoading: boolean;
+  isError: boolean;
+}
+
+export const LoadingChartBackdrop: React.FC<LoadingChartBackdropProps> = ({
+  isLoading,
+  isError,
+}) => {
+  if (isError) {
+    return (
+      <span>
+        Oops! Something went wrong. Chart data has been lost. Please try again
+        after a few minutes.
+      </span>
+    );
+  }
+  if (isLoading) {
+    return (
+      <>
+        <CircularProgress color="inherit" size={24} />
+        <span>Loading chart data...</span>
+      </>
+    );
+  }
+  return null;
+};
+
+LoadingChartBackdrop.displayName = "LoadingChartBackdrop";

package/src/charts/chart-utils.ts

@@ -0,0 +1,58 @@
+import { FOUNDATION_COLORS, FONT_FAMILY_SANS } from "../theme";
+
+export const tooltipsBaseOption = {
+  enabled: true,
+  mode: "nearest" as const,
+  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" as const,
+    size: 14,
+  },
+  bodyFont: {
+    family: FONT_FAMILY_SANS,
+    style: "normal" as const,
+    weight: "bold" as const,
+    size: 13,
+  },
+} as const;
+
+export const buildChartDataFromObject = (
+  chartDataObject: Record<string, number> = {},
+) => {
+  return Object.keys(chartDataObject).map((key) => ({
+    x: key,
+    y: chartDataObject[key],
+  }));
+};
+
+export const formatNumber = (value: number): string => {
+  return value.toLocaleString("en-US");
+};
+
+export const formatNumberWithText = (
+  value: number,
+  precision: number = 1,
+): string => {
+  if (Math.abs(value) >= 1_000_000) {
+    return `$${(value / 1_000_000).toFixed(precision)}M`;
+  }
+  if (Math.abs(value) >= 1_000) {
+    return `$${(value / 1_000).toFixed(precision)}K`;
+  }
+  return `$${value.toFixed(0)}`;
+};
+
+export const formatNumberWithDollar = (value: number): string => {
+  return `$${formatNumber(value)}`;
+};
+
+export const convertToFloat = (value: number, precision: number): string => {
+  return parseFloat(value.toFixed(precision)).toString();
+};

package/src/charts/index.ts

@@ -0,0 +1,59 @@
+export { tooltipsBaseOption, buildChartDataFromObject, formatNumber, formatNumberWithText, formatNumberWithDollar, convertToFloat } from "./chart-utils";
+
+export { LoadingChartBackdrop } from "./LoadingChartBackdrop";
+export type { LoadingChartBackdropProps } from "./LoadingChartBackdrop";
+
+export {
+  BackofficeSwitchableChart,
+  getChartOptions,
+} from "./BackofficeSwitchableChart";
+export type { BackofficeSwitchableChartProps, ChartType } from "./BackofficeSwitchableChart";
+
+export { FrontendLineChart } from "./FrontendLineChart";
+export type { FrontendLineChartProps, LineChartDataset, LineChartDataItem } from "./FrontendLineChart";
+
+export { FrontendLineChartMobile } from "./FrontendLineChartMobile";
+export type { FrontendLineChartMobileProps, MobileLineChartDataset, MobileLineChartDataItem } from "./FrontendLineChartMobile";
+
+export { FrontendBarChart } from "./FrontendBarChart";
+export type { FrontendBarChartProps, FrontendBarChartData, BarChartDataset } from "./FrontendBarChart";
+
+export { FrontendDoughnutChart } from "./FrontendDoughnutChart";
+export type { FrontendDoughnutChartProps, DoughnutChartDataItem } from "./FrontendDoughnutChart";
+
+export { FrontendMixedChart } from "./FrontendMixedChart";
+export type { FrontendMixedChartProps, MixedChartDataset } from "./FrontendMixedChart";
+
+export { FrontendStackedChart } from "./FrontendStackedChart";
+export type { FrontendStackedChartProps } from "./FrontendStackedChart";
+export {
+  FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS,
+  FRONTEND_STACKED_CHART_MOCK_LABELS,
+  FRONTEND_STACKED_CHART_MOCK_DATA,
+  FRONTEND_STACKED_CHART_MOCK_COLORS,
+} from "./FrontendStackedChart";
+
+export { FrontendIncomeExpenseHorizontalBarChart } from "./FrontendIncomeExpenseHorizontalBarChart";
+export type { FrontendIncomeExpenseHorizontalBarChartProps } from "./FrontendIncomeExpenseHorizontalBarChart";
+
+export { FrontendPercentageBar } from "./FrontendPercentageBar";
+export type { FrontendPercentageBarProps, PercentageBarPart } from "./FrontendPercentageBar";
+
+export { FrontendLiabilitiesChart } from "./FrontendLiabilitiesChart";
+export type { FrontendLiabilitiesChartProps, LiabilitiesPart } from "./FrontendLiabilitiesChart";
+
+export { FrontendScenarioLineChart } from "./FrontendScenarioLineChart";
+export type { FrontendScenarioLineChartProps, ScenarioDataPoint } from "./FrontendScenarioLineChart";
+
+export {
+  mockLineChartData,
+  mockBarChartData,
+  mockDoughnutData,
+  mockMixedChartDatasets,
+  mockPercentageBarParts,
+  mockPercentageBarColors,
+  mockLiabilitiesParts,
+  mockScenarioData,
+  mockScenarioSecondaryData,
+  mockMobileLineChartData,
+} from "./mock-data";