@wealthx/shadcn 1.0.2 → 1.2.0

package/src/components/ui/cash-balance-line-chart.tsx

@@ -0,0 +1,302 @@
+import React, { useMemo } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Tooltip,
+  type ChartOptions,
+  type ChartData,
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { useThemeVars } from "@/lib/theme-provider";
+import { Card, CardContent, CardHeader, CardTitle } from "./card";
+import { Empty, EmptyDescription } from "./empty";
+import { Spinner } from "./spinner";
+import { cn } from "@/lib/utils";
+import {
+  FALLBACK_TICK,
+  FALLBACK_PRIMARY,
+  FALLBACK_BG,
+  ChartLegendItem,
+} from "./chart-shared";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Tooltip,
+);
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Abbreviate a dollar value: $1.2K, $4.5M, $1.1B */
+function formatAbbrev(value: number): string {
+  const abs = Math.abs(value);
+  const sign = value < 0 ? "-" : "";
+  if (abs >= 1_000_000_000)
+    return `${sign}$${(abs / 1_000_000_000).toFixed(1)}B`;
+  if (abs >= 1_000_000) return `${sign}$${(abs / 1_000_000).toFixed(1)}M`;
+  if (abs >= 1_000) return `${sign}$${(abs / 1_000).toFixed(1)}K`;
+  return `${sign}$${abs.toFixed(0)}`;
+}
+
+/** Format a balance value for prominent display: $12,345.67 */
+function formatBalanceFull(value: number): string {
+  const abs = Math.abs(value);
+  const sign = value < 0 ? "-" : "";
+  return `${sign}$${abs.toLocaleString(undefined, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })}`;
+}
+
+/** Format ISO date string to "MMM dd" label e.g. "Jan 15" */
+function formatDateLabel(iso: string): string {
+  const d = new Date(iso);
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+
+/** Format ISO date string for tooltip e.g. "Jan 15, 2024" */
+function formatDateTooltip(iso: string): string {
+  const d = new Date(iso);
+  return d.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface CashBalanceDataPoint {
+  /** ISO date string e.g. "2024-01-15" */
+  x: string;
+  y: number;
+}
+
+export interface CashBalanceLineChartProps {
+  chartData?: CashBalanceDataPoint[] | null;
+  title?: string;
+  /** Chart canvas height in pixels */
+  height?: number;
+  /** Width of the card */
+  width?: number | string;
+  className?: string;
+  /** Show skeleton loading state instead of the chart */
+  isLoading?: boolean;
+  /** Show or hide X axis labels */
+  showXAxis?: boolean;
+  /** Show or hide Y axis labels */
+  showYAxis?: boolean;
+  /** Show the latest balance value prominently below the title */
+  showBalanceValue?: boolean;
+  /** Show or hide the chart legend */
+  showLegend?: boolean;
+  /** Legend placement relative to the chart */
+  legendPosition?: "top" | "bottom";
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function CashBalanceLineChart({
+  chartData,
+  title = "Cash Balance",
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false,
+  showXAxis = true,
+  showYAxis = true,
+  showBalanceValue = false,
+  showLegend = false,
+  legendPosition = "bottom",
+}: CashBalanceLineChartProps) {
+  const themeVars = useThemeVars();
+  const brandPrimary =
+    (themeVars["--theme-primary"] as string | undefined) || FALLBACK_PRIMARY;
+  const fontFamily =
+    (themeVars["--font-sans"] as string | undefined) || "Figtree, sans-serif";
+
+  const hasData = Array.isArray(chartData) && chartData.length > 0;
+
+  // Indices to show on x-axis (max ~6 ticks)
+  const tickIndices = useMemo<Set<number>>(() => {
+    if (!hasData) return new Set();
+    const count = chartData!.length;
+    const step = Math.max(1, Math.floor(count / 6));
+    const indices = new Set<number>();
+    for (let i = 0; i < count; i += step) indices.add(i);
+    indices.add(count - 1);
+    return indices;
+  }, [hasData, chartData]);
+
+  const data = useMemo<ChartData<"line">>(() => {
+    if (!hasData) return { labels: [], datasets: [] };
+    return {
+      labels: chartData!.map((p) => p.x), // raw ISO — used for tooltip + tick lookup
+      datasets: [
+        {
+          label: title,
+          data: chartData!.map((p) => p.y),
+          fill: false,
+          borderColor: brandPrimary,
+          backgroundColor: "transparent",
+          borderWidth: 2.5,
+          tension: 0.4,
+          pointRadius: 0,
+          pointHoverRadius: 6,
+          pointHoverBackgroundColor: FALLBACK_BG,
+          pointHoverBorderColor: brandPrimary,
+          pointHoverBorderWidth: 3,
+          pointHitRadius: 10,
+        },
+      ],
+    };
+  }, [hasData, chartData, brandPrimary, title]);
+
+  const options = useMemo<ChartOptions<"line">>(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 1200, easing: "easeOutQuart" },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          enabled: true,
+          mode: "index",
+          intersect: false,
+          displayColors: false,
+          padding: 12,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: "600", family: fontFamily },
+          bodyFont: { size: 13, weight: "700", family: fontFamily },
+          callbacks: {
+            title: (items) => {
+              const iso = items[0]?.label;
+              return iso ? formatDateTooltip(iso) : "";
+            },
+            label: (ctx) => {
+              const val = ctx.parsed.y;
+              const formatted = Math.abs(val).toLocaleString(undefined, {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+              });
+              return `$ ${formatted}`;
+            },
+          },
+        },
+      },
+      interaction: { mode: "index", intersect: false },
+      scales: {
+        x: {
+          type: "category",
+          display: showXAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            minRotation: 0,
+            color: FALLBACK_TICK,
+            font: { size: 10, family: fontFamily },
+            callback: function (_, index) {
+              if (!tickIndices.has(index) || !chartData) return "";
+              return formatDateLabel(chartData[index].x);
+            },
+          },
+        },
+        y: {
+          display: showYAxis,
+          position: "left",
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            beginAtZero: false,
+            maxTicksLimit: 5,
+            padding: 8,
+            color: FALLBACK_TICK,
+            font: { size: 10, family: fontFamily },
+            callback: (v) => formatAbbrev(Number(v)),
+          },
+        },
+      },
+    }),
+    [tickIndices, chartData, showXAxis, showYAxis, fontFamily],
+  );
+
+  const latestValue = hasData ? chartData![chartData!.length - 1].y : null;
+
+  return (
+    <Card
+      className={cn("w-full py-4 sm:py-6 gap-2", className)}
+      style={{ maxWidth: width, fontFamily }}
+    >
+      <CardHeader className="px-3 sm:px-6">
+        <div className="flex flex-col gap-0.5">
+          <CardTitle className="text-sm sm:text-base uppercase tracking-wider">
+            {title}
+          </CardTitle>
+          {showBalanceValue && latestValue !== null && (
+            <p className="text-2xl font-bold tabular-nums leading-tight">
+              {formatBalanceFull(latestValue)}
+            </p>
+          )}
+        </div>
+      </CardHeader>
+
+      <CardContent className="px-3 sm:px-6">
+        {isLoading ? (
+          <div
+            className="flex items-center justify-center text-muted-foreground"
+            style={{ height, width: "100%" }}
+          >
+            <Spinner size="lg" />
+          </div>
+        ) : !hasData ? (
+          <Empty className="flex-none p-4" style={{ height }}>
+            <EmptyDescription>No data available</EmptyDescription>
+          </Empty>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {showLegend && legendPosition === "top" && (
+              <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5">
+                <ChartLegendItem
+                  label={title}
+                  color={brandPrimary}
+                  lineStyle="solid"
+                />
+              </div>
+            )}
+            <div style={{ height, width: "100%", position: "relative" }}>
+              <Chart
+                key={brandPrimary}
+                type="line"
+                data={data}
+                options={options}
+                aria-label={title}
+              />
+            </div>
+            {showLegend && legendPosition === "bottom" && (
+              <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5">
+                <ChartLegendItem
+                  label={title}
+                  color={brandPrimary}
+                  lineStyle="solid"
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/cashflow-bar-chart.tsx

@@ -0,0 +1,363 @@
+import React, { useMemo, useState } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip,
+  Legend,
+  type ChartOptions,
+  type ChartData,
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { useThemeVars } from "@/lib/theme-provider";
+import { Card, CardContent, CardHeader, CardTitle, CardAction } from "./card";
+import { Empty, EmptyDescription } from "./empty";
+import { Skeleton } from "./skeleton";
+import { cn } from "@/lib/utils";
+import {
+  hexToRgba,
+  FALLBACK_TICK,
+  FALLBACK_PRIMARY,
+  FALLBACK_SECONDARY,
+  formatTooltipDate,
+  ChartPeriodButton,
+} from "./chart-shared";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface CashflowDataPoint {
+  /** ISO date string e.g. "2024-01-01" */
+  date: string;
+  income: number;
+  expenses: number;
+  /** Positive value — ignored when overspending > 0 */
+  surplus: number;
+  /** Positive value — ignored when surplus > 0 */
+  overspending: number;
+}
+
+export interface CashflowChartData {
+  months: string[];
+  data: CashflowDataPoint[];
+}
+
+export type CashflowPeriod = 3 | 6 | 12;
+
+export interface CashflowBarChartProps {
+  /** Full dataset — sliced to the selected period */
+  cashflowData: CashflowChartData | null;
+  title?: string;
+  /** Show or hide the chart legend */
+  showLegend?: boolean;
+  /** Show or hide X axis labels */
+  showXAxis?: boolean;
+  /** Show or hide Y axis labels */
+  showYAxis?: boolean;
+  /** Legend placement relative to chart */
+  legendPosition?: "top" | "bottom";
+  /** Default period selector value */
+  defaultPeriod?: CashflowPeriod;
+  /** Show or hide the period selector buttons (3M / 6M / 12M) */
+  showPeriodSelector?: boolean;
+  /** Chart canvas height in pixels */
+  height?: number;
+  /** Width of the card in pixels */
+  width?: number | string;
+  className?: string;
+  /** Show skeleton loading state instead of the chart */
+  isLoading?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// HTML legend (outside canvas — full spacing control)
+// ---------------------------------------------------------------------------
+
+interface LegendItemProps {
+  label: string;
+  fillColor: string;
+  strokeColor: string;
+  strokeWidth?: number;
+}
+
+function LegendItem({
+  label,
+  fillColor,
+  strokeColor,
+  strokeWidth = 1.5,
+}: LegendItemProps) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <div
+        style={{
+          width: 10,
+          height: 10,
+          backgroundColor: fillColor,
+          border:
+            strokeWidth > 0 ? `${strokeWidth}px solid ${strokeColor}` : "none",
+          flexShrink: 0,
+        }}
+      />
+      <span className="text-[11px] text-muted-foreground leading-none">
+        {label}
+      </span>
+    </div>
+  );
+}
+
+function ChartLegend({
+  primary,
+  secondary,
+}: {
+  primary: string;
+  secondary: string;
+}) {
+  return (
+    <div className="flex flex-wrap gap-x-3 gap-y-1.5 pb-2">
+      <LegendItem
+        label="Income"
+        fillColor={hexToRgba(primary, 0.2)}
+        strokeColor={primary}
+      />
+      <LegendItem
+        label="Expenses and Liabilities"
+        fillColor={hexToRgba(secondary, 0.2)}
+        strokeColor={secondary}
+      />
+      <LegendItem
+        label="Surplus Income"
+        fillColor={primary}
+        strokeColor={primary}
+        strokeWidth={0}
+      />
+      <LegendItem
+        label="Over Spending"
+        fillColor={secondary}
+        strokeColor={secondary}
+        strokeWidth={0}
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const PERIODS: CashflowPeriod[] = [3, 6, 12];
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function CashflowBarChart({
+  cashflowData,
+  title = "Cashflow",
+  showLegend = true,
+  showXAxis = true,
+  showYAxis = true,
+  legendPosition = "top",
+  defaultPeriod = 6,
+  showPeriodSelector = true,
+  height = 280,
+  width = "100%",
+  className,
+  isLoading = false,
+}: CashflowBarChartProps) {
+  const [period, setPeriod] = useState<CashflowPeriod>(defaultPeriod);
+
+  // Read theme colors from ThemeProvider context.
+  // Falls back to WealthX defaults when no ThemeProvider is present.
+  const themeVars = useThemeVars();
+  const brandPrimary: string =
+    (themeVars["--theme-primary"] as string | undefined) || FALLBACK_PRIMARY;
+  const brandSecondary: string =
+    (themeVars["--theme-secondary"] as string | undefined) ||
+    FALLBACK_SECONDARY;
+  const fontFamily: string =
+    (themeVars["--font-sans"] as string | undefined) || "Figtree, sans-serif";
+
+  const sliced = useMemo<CashflowChartData | null>(() => {
+    if (!cashflowData?.data?.length) return null;
+    const count = Math.min(period, cashflowData.data.length);
+    const start = cashflowData.data.length - count;
+    return {
+      months: cashflowData.months.slice(start),
+      data: cashflowData.data.slice(start),
+    };
+  }, [cashflowData, period]);
+
+  const chartData = useMemo<ChartData<"bar">>(() => {
+    if (!sliced) return { labels: [], datasets: [] };
+
+    return {
+      labels: sliced.months,
+      datasets: [
+        {
+          label: "Income",
+          data: sliced.data.map((d) => d.income),
+          backgroundColor: hexToRgba(brandPrimary, 0.2),
+          hoverBackgroundColor: hexToRgba(brandPrimary, 0.35),
+          borderColor: brandPrimary,
+          borderWidth: 1.5,
+          borderRadius: 0,
+          borderSkipped: false,
+          barPercentage: 0.75,
+          categoryPercentage: 0.7,
+        },
+        {
+          label: "Expenses and Liabilities",
+          data: sliced.data.map((d) => d.expenses),
+          backgroundColor: hexToRgba(brandSecondary, 0.2),
+          hoverBackgroundColor: hexToRgba(brandSecondary, 0.35),
+          borderColor: brandSecondary,
+          borderWidth: 1.5,
+          borderRadius: 0,
+          borderSkipped: false,
+          barPercentage: 0.75,
+          categoryPercentage: 0.7,
+        },
+        {
+          label: "_thirdBar",
+          data: sliced.data.map((d) =>
+            d.overspending > 0 ? d.overspending : d.surplus,
+          ),
+          backgroundColor: sliced.data.map((d) =>
+            d.overspending > 0 ? brandSecondary : brandPrimary,
+          ),
+          hoverBackgroundColor: sliced.data.map((d) =>
+            d.overspending > 0
+              ? hexToRgba(brandSecondary, 0.8)
+              : hexToRgba(brandPrimary, 0.8),
+          ),
+          borderWidth: 0,
+          borderRadius: 0,
+          borderSkipped: false,
+          barPercentage: 0.75,
+          categoryPercentage: 0.7,
+        },
+      ],
+    };
+  }, [sliced, brandPrimary, brandSecondary]);
+
+  const options = useMemo<ChartOptions<"bar">>(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 800, easing: "easeOutQuart" },
+      layout: { padding: 0 },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          mode: "index",
+          intersect: false,
+          padding: 12,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: 600 },
+          bodyFont: { size: 12, weight: 500 },
+          callbacks: {
+            title: (tooltipItems) => {
+              const idx = tooltipItems[0]?.dataIndex;
+              if (idx != null && sliced?.data[idx]?.date) {
+                return formatTooltipDate(sliced.data[idx].date, "monthly");
+              }
+              return tooltipItems[0]?.label ?? "";
+            },
+            label: (ctx) => {
+              const val = ctx.raw as number;
+              if (val === 0) return;
+              if (ctx.datasetIndex === 2) {
+                const d = sliced?.data[ctx.dataIndex];
+                if (!d) return;
+                const lbl =
+                  d.overspending > 0 ? "Over Spending" : "Surplus Income";
+                return ` ${lbl}: $${val.toLocaleString()}`;
+              }
+              return ` ${ctx.dataset.label}: $${val.toLocaleString()}`;
+            },
+          },
+        },
+      },
+      scales: {
+        x: {
+          display: showXAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: { font: { size: 10 }, color: FALLBACK_TICK },
+        },
+        y: {
+          display: showYAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            font: { size: 10 },
+            color: FALLBACK_TICK,
+            maxTicksLimit: 5,
+            padding: 8,
+            callback: (v) => `$${Number(v).toLocaleString()}`,
+          },
+        },
+      },
+    }),
+    [showXAxis, showYAxis, sliced],
+  );
+
+  return (
+    <Card
+      className={cn("w-full py-4 sm:py-6 gap-2", className)}
+      style={{ maxWidth: width, fontFamily }}
+    >
+      <CardHeader className="px-3 sm:px-6">
+        <CardTitle className="text-sm sm:text-base uppercase tracking-wider">
+          {title}
+        </CardTitle>
+        {showPeriodSelector && (
+          <CardAction>
+            <div className="flex gap-0.5 sm:gap-1">
+              {PERIODS.map((p) => (
+                <ChartPeriodButton
+                  key={p}
+                  period={p}
+                  active={period === p}
+                  onClick={() => setPeriod(p)}
+                />
+              ))}
+            </div>
+          </CardAction>
+        )}
+      </CardHeader>
+
+      <CardContent className="px-3 sm:px-6">
+        {isLoading ? (
+          <Skeleton style={{ height, width: "100%" }} />
+        ) : !sliced ? (
+          <Empty className="flex-none p-4" style={{ height }}>
+            <EmptyDescription>No data available</EmptyDescription>
+          </Empty>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {showLegend && legendPosition === "top" && (
+              <ChartLegend primary={brandPrimary} secondary={brandSecondary} />
+            )}
+            <div style={{ height, width: "100%", position: "relative" }}>
+              <Chart
+                key={`${brandPrimary}__${brandSecondary}`}
+                type="bar"
+                data={chartData}
+                options={options}
+                aria-label={title}
+              />
+            </div>
+            {showLegend && legendPosition === "bottom" && (
+              <ChartLegend primary={brandPrimary} secondary={brandSecondary} />
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}