@wealthx/ui 1.0.0 → 1.0.1

package/src/charts/FrontendDoughnutChart.tsx

@@ -0,0 +1,372 @@
+import React, { useRef, useMemo } from "react";
+import { styled } from "@mui/material/styles";
+import { Typography, Box } from "@mui/material";
+import {
+  Chart as ChartJS,
+  ArcElement,
+  DoughnutController,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { formatNumberWithDollar } from "./chart-utils";
+
+ChartJS.register(ArcElement, DoughnutController, Tooltip, Legend);
+
+export interface DoughnutChartDataItem {
+  data: number[];
+  title: string[];
+  colors?: string[];
+  icons?: React.ReactNode[];
+}
+
+export interface FrontendDoughnutChartProps {
+  title?: string;
+  data?: DoughnutChartDataItem;
+  textTop?: string;
+  textBottom?: string;
+  legendDisplay?: boolean;
+  customLegend?: boolean;
+  isBottomColor?: boolean;
+  bottomColor?: string;
+}
+
+const getChartColorRange = (spectrum: string[], count: number): string[] => {
+  if (count <= 1) return [spectrum[0] || "#162029"];
+  const result: string[] = [];
+  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;
+};
+
+const interpolateColor = (c1: string, c2: string, t: number): string => {
+  const parse = (hex: string) => {
+    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: number, b: number) => Math.round(a + (b - a) * t);
+  const toHex = (n: number) => n.toString(16).padStart(2, "0");
+  return `#${toHex(lerp(r1!, r2!))}${toHex(lerp(g1!, g2!))}${toHex(lerp(b1!, b2!))}`;
+};
+
+const generateChartColor = (
+  dataLength: number,
+  providedColors: string[]
+): string[] => {
+  if (providedColors.length > 0) return providedColors;
+  const spectrum = ["#162029", "#A1B9BD"];
+  return getChartColorRange(spectrum, dataLength);
+};
+
+const ChartContainer = styled("div")({
+  alignItems: "center",
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+});
+
+const ChartWrapper = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+});
+
+const ChartSize = styled("div")({
+  height: 160,
+  maxWidth: 160,
+  width: "100%",
+});
+
+const LegendContainer = styled("div")<{ isCustom?: boolean }>(
+  ({ isCustom }) => ({
+    display: "flex",
+    flexDirection: isCustom ? "column" : "row",
+    flexWrap: "wrap",
+    gap: 8,
+    marginTop: 16,
+    width: "100%",
+  })
+);
+
+const LegendWrap = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "4px 0",
+});
+
+const LegendBox = styled("div")({
+  width: 12,
+  height: 12,
+  borderRadius: 2,
+  flexShrink: 0,
+});
+
+const LegendFont = styled("span")({
+  fontSize: 13,
+  lineHeight: 1.4,
+});
+
+const LegendFontBold = styled("span")({
+  fontSize: 13,
+  fontWeight: 600,
+  lineHeight: 1.4,
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+});
+
+const LegendBoxContainer = styled("div")({
+  display: "flex",
+  alignItems: "center",
+});
+
+const buildDoughnutChartOption = (
+  textTop: string,
+  textBottom: string,
+  isBottomColor: boolean,
+  bottomColor: string
+) => ({
+  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" as const,
+      intersect: true,
+      callbacks: {
+        label: (tooltipItem: any) => {
+          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" as const, size: 13 },
+      bodyColor: "#000",
+      displayColors: false,
+      borderColor: "#000",
+      borderWidth: 1,
+    },
+  },
+  interaction: { intersect: false },
+  layout: { padding: {} },
+});
+
+const drawTextInsideDoughnutPlugin = {
+  id: "doughnutCenterText",
+  beforeDraw: (chart: any) => {
+    if (chart.config.options.elements?.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 === undefined) 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 regularFont = "sans-serif";
+        ctx.fillStyle = centerConfig.bottomColor;
+        ctx.font = `${Math.min(fontSizeToUse * 0.5, 10)}px ${regularFont}`;
+        ctx.fillText(text, centerX, centerYY);
+        return;
+      }
+
+      const words = txt.split(" ");
+      let line = "";
+      const lines: string[] = [];
+      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();
+    }
+  },
+};
+
+export const FrontendDoughnutChart: React.FC<FrontendDoughnutChartProps> = ({
+  title,
+  data,
+  textTop = " ",
+  textBottom = " ",
+  legendDisplay = true,
+  customLegend = false,
+  isBottomColor = false,
+  bottomColor = "#131c24",
+}) => {
+  const chartRef = useRef(null);
+
+  const {
+    data: dChartData = [],
+    title: dChartTitle = [],
+    colors: dChartColor = [],
+    icons: dChartIcons = [],
+  } = data || {};
+
+  const chartColors = useMemo(
+    () => generateChartColor(dChartData.length, dChartColor),
+    [dChartData.length, dChartColor]
+  );
+
+  const chartOptions = useMemo(
+    () => buildDoughnutChartOption(textTop, textBottom, isBottomColor, bottomColor),
+    [textTop, textBottom, isBottomColor, bottomColor]
+  );
+
+  const chartData = useMemo(() => {
+    if (!data || !dChartData.length) return { labels: [], datasets: [] };
+    return {
+      type: "doughnut" as const,
+      labels: dChartTitle,
+      datasets: [
+        {
+          data: dChartData,
+          backgroundColor: chartColors,
+          hoverBackgroundColor: chartColors,
+        },
+      ],
+    };
+  }, [data, dChartData, dChartTitle, chartColors]);
+
+  if (!data || !dChartData.length) {
+    return (
+      <ChartContainer>
+        {title && (
+          <Typography variant="subtitle2" color="text.secondary" mb={1}>
+            {title}
+          </Typography>
+        )}
+        <Box sx={{ color: "text.disabled", py: 4 }}>No data</Box>
+      </ChartContainer>
+    );
+  }
+
+  const generateLegend = () => {
+    if (customLegend) {
+      return dChartData.map((chartDataset, index) => (
+        <LegendWrap key={`${chartDataset}${index}`}>
+          <LegendFontBold>
+            <span>{dChartTitle[index] || ""}</span>
+            {dChartIcons?.[index] && <span>{dChartIcons[index]}</span>}
+          </LegendFontBold>
+          <LegendBoxContainer>
+            <LegendBox style={{ backgroundColor: chartColors[index] }} />
+          </LegendBoxContainer>
+          <LegendFont>{formatNumberWithDollar(chartDataset)}</LegendFont>
+        </LegendWrap>
+      ));
+    }
+    return dChartData.map((_chartDataset, index) => (
+      <LegendWrap key={dChartTitle[index]}>
+        <LegendBox style={{ backgroundColor: chartColors[index] }} />
+        <LegendFont>{dChartTitle[index]}</LegendFont>
+      </LegendWrap>
+    ));
+  };
+
+  return (
+    <ChartContainer>
+      {title && (
+        <Typography variant="subtitle2" color="text.secondary" mb={1}>
+          {title}
+        </Typography>
+      )}
+      <ChartWrapper>
+        <ChartSize>
+          <Chart
+            type="doughnut"
+            redraw
+            ref={chartRef}
+            data={chartData as any}
+            options={chartOptions as any}
+            plugins={[drawTextInsideDoughnutPlugin]}
+          />
+        </ChartSize>
+        {legendDisplay && (
+          <LegendContainer isCustom={customLegend}>
+            {generateLegend()}
+          </LegendContainer>
+        )}
+      </ChartWrapper>
+    </ChartContainer>
+  );
+};
+
+FrontendDoughnutChart.displayName = "FrontendDoughnutChart";

package/src/charts/FrontendIncomeExpenseHorizontalBarChart.tsx

@@ -0,0 +1,138 @@
+import React, { useMemo } from "react";
+import { styled } from "@mui/material/styles";
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  Title,
+  Tooltip,
+} from "chart.js";
+import ChartDataLabels from "chartjs-plugin-datalabels";
+import { Chart } from "react-chartjs-2";
+import { formatNumberWithDollar } from "./chart-utils";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+export interface FrontendIncomeExpenseHorizontalBarChartProps {
+  totalIncome: number;
+  totalExpense: number;
+  incomeColor?: string;
+  expenseColor?: string;
+  textColor?: string;
+  height?: number;
+}
+
+const ChartWrapper = styled("div")<{ chartHeight: number }>(
+  ({ chartHeight }) => ({
+    position: "relative",
+    height: chartHeight,
+    width: "100%",
+  })
+);
+
+export const FrontendIncomeExpenseHorizontalBarChart: React.FC<
+  FrontendIncomeExpenseHorizontalBarChartProps
+> = ({
+  totalIncome,
+  totalExpense,
+  incomeColor = "#39FD99",
+  expenseColor = "#162029",
+  textColor = "#040D13",
+  height = 160,
+}) => {
+  const suggestedMax = Math.max(totalIncome, Math.abs(totalExpense)) * 1.25;
+
+  const options = useMemo(
+    () => ({
+      indexAxis: "y" as const,
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        datalabels: {
+          color: textColor,
+          textAlign: "left" as const,
+        },
+        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 = useMemo(
+    () => ({
+      labels: ["Incoming", "Outgoing"],
+      datasets: [
+        {
+          barThickness: 40,
+          backgroundColor: [incomeColor, expenseColor],
+          data: [totalIncome, Math.abs(totalExpense)],
+          datalabels: {
+            labels: {
+              value: {
+                anchor: "end" as const,
+                align: "end" as const,
+                offset: 10,
+                clamp: false,
+                font: { weight: "bold" as const, size: 14 },
+                formatter(value: number) {
+                  return [formatNumberWithDollar(value), ""];
+                },
+              },
+              name: {
+                anchor: "end" as const,
+                align: "end" as const,
+                offset: 10,
+                clamp: false,
+                formatter(_value: number, ctx: any) {
+                  return ["", ctx.chart.data.labels[ctx.dataIndex]];
+                },
+              },
+            },
+          },
+        },
+      ],
+    }),
+    [totalIncome, totalExpense, incomeColor, expenseColor]
+  );
+
+  return (
+    <ChartWrapper chartHeight={height}>
+      <Chart
+        type="bar"
+        plugins={[ChartDataLabels]}
+        options={options as any}
+        data={chartData as any}
+      />
+    </ChartWrapper>
+  );
+};
+
+FrontendIncomeExpenseHorizontalBarChart.displayName =
+  "FrontendIncomeExpenseHorizontalBarChart";

package/src/charts/FrontendLiabilitiesChart.tsx

@@ -0,0 +1,97 @@
+import React, { useMemo } from "react";
+import { styled } from "@mui/material/styles";
+import { Typography } from "@mui/material";
+import { FrontendPercentageBar, type PercentageBarPart } from "./FrontendPercentageBar";
+
+export interface LiabilitiesPart extends PercentageBarPart {
+  id?: string;
+}
+
+export interface FrontendLiabilitiesChartProps {
+  defaultTitle?: string;
+  color?: string;
+  parts?: LiabilitiesPart[];
+}
+
+const generateColorGradient = (baseColor: string, count: number): string[] => {
+  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")}`;
+  });
+};
+
+const Root = styled("div")({
+  width: "100%",
+});
+
+const LegendsContainer = styled("div")({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: 12,
+  marginTop: 8,
+});
+
+const LegendItem = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+});
+
+const LegendColor = styled("div")<{ bgColor: string }>(({ bgColor }) => ({
+  width: 12,
+  height: 12,
+  borderRadius: 2,
+  backgroundColor: bgColor,
+  flexShrink: 0,
+}));
+
+export const FrontendLiabilitiesChart: React.FC<FrontendLiabilitiesChartProps> = ({
+  defaultTitle,
+  color = "#131c24",
+  parts = [],
+}) => {
+  const colors = useMemo(
+    () => generateColorGradient(color, parts.length),
+    [color, parts.length]
+  );
+
+  return (
+    <Root>
+      <FrontendPercentageBar
+        defaultTitle={defaultTitle}
+        chartColors={colors}
+        parts={parts}
+        showFullCategory
+      />
+      {parts.length === 0 && (
+        <div
+          style={{
+            height: 22,
+            backgroundColor: "#e9edf2",
+            borderRadius: 2,
+            marginTop: 8,
+          }}
+        />
+      )}
+      <LegendsContainer>
+        {parts.map((part, index) => (
+          <LegendItem key={part.id || part.title}>
+            <LegendColor bgColor={colors[index] || "#ccc"} />
+            <Typography variant="body2">{part.title}</Typography>
+          </LegendItem>
+        ))}
+      </LegendsContainer>
+    </Root>
+  );
+};
+
+FrontendLiabilitiesChart.displayName = "FrontendLiabilitiesChart";