@wealthx/ui 0.0.1 → 1.0.1

package/src/charts/FrontendLineChart.tsx

@@ -0,0 +1,299 @@
+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 { tooltipsBaseOption, formatNumber, formatNumberWithText } from "./chart-utils";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  LineController,
+  Title,
+  Tooltip,
+  Legend,
+  TimeScale
+);
+
+export interface LineChartDataItem {
+  x: string | Date;
+  y: number;
+}
+
+export interface LineChartDataset {
+  data: LineChartDataItem[];
+  label?: string;
+  customOptions?: Record<string, any>;
+}
+
+export interface FrontendLineChartProps {
+  lineChartData?: LineChartDataset[];
+  legendDisplay?: boolean;
+  title?: string;
+  customChartOptions?: Record<string, any>;
+  height?: number;
+  invertYAxis?: boolean;
+  referenceLineValue?: number;
+  referenceLineLabel?: string;
+  referenceLineColor?: string;
+  mainLineColor?: string;
+}
+
+const ChartContainer = styled("div")({
+  width: "100%",
+});
+
+const ChartWrapper = styled("div")<{ chartHeight?: number }>(
+  ({ chartHeight }) => ({
+    flex: "auto",
+    height: chartHeight || 270,
+    position: "relative",
+    width: "100%",
+  })
+);
+
+const buildChartData = (
+  title: string,
+  lineChartData: LineChartDataset[],
+  mainLineColor: string,
+  referenceLineValue?: number,
+  referenceLineLabel?: string,
+  referenceLineColor: string = "#39FD99"
+) => {
+  const datasets: any[] = lineChartData.map((dataset, index) => {
+    const color = dataset.customOptions?.borderColor || mainLineColor;
+    return {
+      type: "line" as const,
+      label: dataset.label || title || `Dataset ${index + 1}`,
+      fill: false,
+      backgroundColor: color,
+      borderColor: color,
+      borderCapStyle: "butt",
+      borderDash: [],
+      borderDashOffset: 0.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 &&
+    lineChartData[0]?.data?.length
+  ) {
+    const firstDataset = lineChartData[0]!.data;
+    const firstX = firstDataset[0]?.x;
+    const lastX = firstDataset[firstDataset.length - 1]?.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" as const,
+      label: referenceLineLabel || "Target",
+      fill: false,
+      backgroundColor: referenceLineColor,
+      borderColor: referenceLineColor,
+      borderDash: [],
+      borderWidth: 1,
+      pointRadius: 0,
+      tension: 0,
+      data: refData,
+      legendHidden: true,
+    });
+  }
+
+  return { datasets };
+};
+
+const buildChartOption = (
+  customChartOptions: Record<string, any>,
+  invertYAxis: boolean
+) => {
+  const baseOptions: Record<string, any> = {
+    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: any) {
+            return formatNumberWithText(Number(value), 1);
+          },
+        },
+      },
+    },
+    maintainAspectRatio: false,
+    responsive: true,
+    plugins: {
+      tooltip: {
+        ...tooltipsBaseOption,
+        filter: (tooltipItem: any) => {
+          if (tooltipItem.dataset.hideFromTooltip) {
+            const chartValue = tooltipItem.parsed?.y;
+            const referenceValue = tooltipItem.dataset.referenceLineValue;
+            return chartValue !== referenceValue;
+          }
+          return true;
+        },
+        callbacks: {
+          title(tooltipItems: any[]) {
+            const tooltipItem = tooltipItems[0];
+            if (tooltipItem?.parsed?.x) {
+              const date = new Date(tooltipItem.parsed.x);
+              return date.toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "2-digit",
+                day: "2-digit",
+              });
+            }
+            return "";
+          },
+          label(tooltipItem: any) {
+            const chartValue = tooltipItem.parsed?.y ?? 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 { ...baseOptions, ...customChartOptions };
+};
+
+const buildChartLegend = (legendDisplay: boolean) => ({
+  display: legendDisplay,
+  position: "bottom" as const,
+  fullSize: true,
+  reverse: false,
+  labels: {
+    color: "#000",
+    filter: (legendItem: any, data: any) => {
+      const ds = data?.datasets?.[legendItem.datasetIndex];
+      return !ds?.legendHidden;
+    },
+  },
+});
+
+export const FrontendLineChart: React.FC<FrontendLineChartProps> = ({
+  lineChartData = [],
+  legendDisplay = true,
+  title = "",
+  customChartOptions = {},
+  height,
+  invertYAxis = false,
+  referenceLineValue,
+  referenceLineLabel,
+  mainLineColor = "#162029",
+  referenceLineColor = "#39FD99",
+}) => {
+  const chartRef = useRef(null);
+
+  const chartData = useMemo(
+    () =>
+      buildChartData(
+        title,
+        lineChartData,
+        mainLineColor,
+        referenceLineValue,
+        referenceLineLabel,
+        referenceLineColor
+      ),
+    [lineChartData, title, mainLineColor, referenceLineValue, referenceLineLabel, referenceLineColor]
+  );
+
+  const chartOption = useMemo(
+    () => buildChartOption(customChartOptions, invertYAxis),
+    [customChartOptions, invertYAxis]
+  );
+
+  const chartLegend = useMemo(() => buildChartLegend(legendDisplay), [legendDisplay]);
+
+  return (
+    <ChartContainer>
+      <ChartWrapper chartHeight={height}>
+        <Chart
+          ref={chartRef}
+          type="line"
+          data={chartData}
+          options={{
+            ...chartOption,
+            plugins: {
+              ...chartOption.plugins,
+              legend: chartLegend,
+            },
+          } as any}
+        />
+      </ChartWrapper>
+    </ChartContainer>
+  );
+};
+
+FrontendLineChart.displayName = "FrontendLineChart";

package/src/charts/FrontendLineChartMobile.tsx

@@ -0,0 +1,383 @@
+import React, { useEffect, useMemo, useRef, useState } 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 { formatNumberWithDollar } from "./chart-utils";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  LineController,
+  Title,
+  Tooltip,
+  Legend,
+  TimeScale
+);
+
+export interface MobileLineChartDataItem {
+  x: string | Date;
+  y: number;
+}
+
+export interface MobileLineChartDataset {
+  data: MobileLineChartDataItem[];
+  label?: string;
+  color?: string;
+  lineSpacing?: number[];
+  borderWidth?: number;
+  customOptions?: Record<string, any>;
+}
+
+export interface FrontendLineChartMobileProps {
+  chartTitle?: string;
+  subTitle?: string;
+  titleValue?: number;
+  chartData?: MobileLineChartDataset[];
+  defaultColor?: string;
+  customChartOptions?: Record<string, any>;
+}
+
+const ChartContainer = styled("div")({
+  width: "100%",
+});
+
+const ChartSize = styled("div")({
+  flex: "auto",
+  height: 200,
+  position: "relative",
+  width: "100%",
+});
+
+const MobileChartTitleWrapper = styled("div")({
+  padding: "8px 0",
+});
+
+const MobileChartTitleText = styled("div")({
+  fontSize: 14,
+  color: "#656566",
+});
+
+const MobileChartTitleBold = styled("span")({
+  fontWeight: 600,
+  color: "#131c24",
+});
+
+const MobileChartValue = styled("div")({
+  fontSize: 24,
+  fontWeight: 700,
+  color: "#131c24",
+  marginTop: 4,
+});
+
+const LegendContainer = styled("div")({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: 12,
+  marginTop: 8,
+  paddingLeft: 30,
+});
+
+const LegendWrap = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+});
+
+const LegendBox = styled("div")<{ isDashed?: boolean }>(({ isDashed }) => ({
+  width: 12,
+  height: isDashed ? 0 : 12,
+  borderRadius: 2,
+  flexShrink: 0,
+  ...(isDashed
+    ? {
+        borderTop: "2px dashed #A1B9BD",
+        width: 12,
+      }
+    : {}),
+}));
+
+const LegendFont = styled("span")({
+  fontSize: 12,
+  color: "#656566",
+});
+
+const BORDER_COLOR = "#A1B9BD";
+
+const buildChartData = (
+  lineChartData: MobileLineChartDataset[],
+  defaultColor: string
+) => ({
+  datasets: lineChartData.map((chartData) => {
+    const {
+      label = "",
+      data = [],
+      color = defaultColor,
+      lineSpacing = [],
+      borderWidth = 2,
+      customOptions = {},
+    } = chartData;
+
+    return {
+      label,
+      fill: false,
+      backgroundColor: color,
+      borderColor: color,
+      borderCapStyle: "butt" as const,
+      borderDash: lineSpacing,
+      borderDashOffset: 0.0,
+      borderJoinStyle: "miter" as const,
+      pointBorderColor: color,
+      pointBackgroundColor: color,
+      pointBorderWidth: 0,
+      pointHoverRadius: 6,
+      pointHoverBackgroundColor: "#ffffff",
+      pointHoverBorderColor: color,
+      pointHoverBorderWidth: 2,
+      pointRadius: 0,
+      borderWidth,
+      pointHitRadius: 3,
+      data,
+      tension: 0.4,
+      ...customOptions,
+    };
+  }),
+});
+
+const getMinMaxInArray = (
+  mathFn: "min" | "max",
+  array: MobileLineChartDataset[],
+  property: "x" | "y"
+): number => {
+  return Math[mathFn](
+    ...array.map((chartItem) =>
+      Math[mathFn](...chartItem.data.map((item) => Number(item[property])))
+    )
+  );
+};
+
+const buildChartOption = (
+  minChartData: number,
+  maxChartData: number,
+  setChartTitleValue: (v: { index: number; value: number }) => void,
+  customChartOptions: Record<string, any>
+) => {
+  const baseOptions: Record<string, any> = {
+    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: any, activeElements: any[], chart: any) => {
+      if (activeElements.length) {
+        const datasetIndex = activeElements[0]?.datasetIndex || 0;
+        const elementIndex = activeElements[0]?.index || 0;
+        const dataset = chart.data.datasets[datasetIndex];
+        if (dataset?.data?.[elementIndex]) {
+          setChartTitleValue({
+            index: datasetIndex,
+            value: (dataset.data[elementIndex] as any).y,
+          });
+        }
+      }
+    },
+  };
+  return { ...baseOptions, ...customChartOptions };
+};
+
+const drawVerticalLine = {
+  id: "drawVerticalLine",
+  afterDraw(chart: any) {
+    if (
+      chart.tooltip?._active?.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 = dataset?.data?.[dataIndex];
+      let dateStr = "";
+      if (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();
+    }
+  },
+};
+
+interface MobileChartTitleProps {
+  title: string;
+  subTitle?: string;
+  value: number;
+}
+
+const MobileChartTitle: React.FC<MobileChartTitleProps> = ({
+  title = "",
+  subTitle = "",
+  value = 0,
+}) => (
+  <MobileChartTitleWrapper>
+    <MobileChartTitleText>
+      <MobileChartTitleBold>{title}</MobileChartTitleBold>{" "}
+      {subTitle}
+    </MobileChartTitleText>
+    <MobileChartValue>{formatNumberWithDollar(value)}</MobileChartValue>
+  </MobileChartTitleWrapper>
+);
+
+export const FrontendLineChartMobile: React.FC<FrontendLineChartMobileProps> = ({
+  chartTitle = "",
+  subTitle,
+  titleValue = 0,
+  chartData: lineChartData = [],
+  defaultColor = "#162029",
+  customChartOptions = {},
+}) => {
+  const [lineChartTitleValue, setLineChartTitleValue] = useState({
+    index: 0,
+    value: 0,
+  });
+  const lineChart = useRef(null);
+
+  const minChartData = useMemo(
+    () =>
+      lineChartData.length > 0
+        ? getMinMaxInArray("min", lineChartData, "y")
+        : 0,
+    [lineChartData]
+  );
+  const maxChartData = useMemo(
+    () =>
+      lineChartData.length > 0
+        ? getMinMaxInArray("max", lineChartData, "y")
+        : 100,
+    [lineChartData]
+  );
+
+  const yAxisInnerPadding = Math.max(
+    minChartData * 0.2,
+    (maxChartData - minChartData) * 0.2
+  );
+
+  const data = useMemo(
+    () => buildChartData(lineChartData, defaultColor),
+    [lineChartData, defaultColor]
+  );
+
+  const options = useMemo(
+    () =>
+      buildChartOption(
+        minChartData - yAxisInnerPadding * 0.2,
+        maxChartData + yAxisInnerPadding * 0.2,
+        setLineChartTitleValue,
+        customChartOptions
+      ),
+    [minChartData, maxChartData, yAxisInnerPadding, customChartOptions]
+  );
+
+  const currentTitle =
+    lineChartData?.[lineChartTitleValue.index]?.label || chartTitle;
+
+  return (
+    <>
+      <MobileChartTitle
+        title={currentTitle}
+        subTitle={subTitle}
+        value={lineChartTitleValue.value || titleValue}
+      />
+      <ChartContainer>
+        <ChartSize>
+          <Chart
+            type="line"
+            ref={lineChart}
+            data={data}
+            options={options as any}
+            plugins={[drawVerticalLine]}
+          />
+        </ChartSize>
+        <LegendContainer>
+          {lineChartData.map((ds, index) => (
+            <LegendWrap key={ds.label || index}>
+              <LegendBox
+                isDashed={!!ds.lineSpacing?.length}
+                style={
+                  ds.lineSpacing?.length
+                    ? {}
+                    : {
+                        backgroundColor: ds.color || defaultColor,
+                      }
+                }
+              />
+              <LegendFont>{ds.label || ""}</LegendFont>
+            </LegendWrap>
+          ))}
+        </LegendContainer>
+      </ChartContainer>
+    </>
+  );
+};
+
+FrontendLineChartMobile.displayName = "FrontendLineChartMobile";