@wealthx/shadcn 1.1.0 → 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

@@ -18,6 +18,8 @@ import { cn } from "@/lib/utils";
 import {
   hexToRgba,
   FALLBACK_TICK,
+  FALLBACK_PRIMARY,
+  FALLBACK_SECONDARY,
   formatTooltipDate,
   ChartPeriodButton,
 } from "./chart-shared";
@@ -60,6 +62,8 @@ export interface CashflowBarChartProps {
   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 */
@@ -80,7 +84,12 @@ interface LegendItemProps {
   strokeWidth?: number;
 }
 
-function LegendItem({ label, fillColor, strokeColor, strokeWidth = 1.5 }: LegendItemProps) {
+function LegendItem({
+  label,
+  fillColor,
+  strokeColor,
+  strokeWidth = 1.5,
+}: LegendItemProps) {
   return (
     <div className="flex items-center gap-1.5">
       <div
@@ -88,16 +97,25 @@ function LegendItem({ label, fillColor, strokeColor, strokeWidth = 1.5 }: Legend
           width: 10,
           height: 10,
           backgroundColor: fillColor,
-          border: strokeWidth > 0 ? `${strokeWidth}px solid ${strokeColor}` : "none",
+          border:
+            strokeWidth > 0 ? `${strokeWidth}px solid ${strokeColor}` : "none",
           flexShrink: 0,
         }}
       />
-      <span className="text-[11px] text-muted-foreground leading-none">{label}</span>
+      <span className="text-[11px] text-muted-foreground leading-none">
+        {label}
+      </span>
     </div>
   );
 }
 
-function ChartLegend({ primary, secondary }: { primary: string; secondary: string }) {
+function ChartLegend({
+  primary,
+  secondary,
+}: {
+  primary: string;
+  secondary: string;
+}) {
   return (
     <div className="flex flex-wrap gap-x-3 gap-y-1.5 pb-2">
       <LegendItem
@@ -132,9 +150,6 @@ function ChartLegend({ primary, secondary }: { primary: string; secondary: strin
 
 const PERIODS: CashflowPeriod[] = [3, 6, 12];
 
-const FALLBACK_PRIMARY = "#33FF99";
-const FALLBACK_SECONDARY = "#162029";
-
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -147,6 +162,7 @@ export function CashflowBarChart({
   showYAxis = true,
   legendPosition = "top",
   defaultPeriod = 6,
+  showPeriodSelector = true,
   height = 280,
   width = "100%",
   className,
@@ -160,7 +176,10 @@ export function CashflowBarChart({
   const brandPrimary: string =
     (themeVars["--theme-primary"] as string | undefined) || FALLBACK_PRIMARY;
   const brandSecondary: string =
-    (themeVars["--theme-secondary"] as string | undefined) || FALLBACK_SECONDARY;
+    (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;
@@ -205,15 +224,15 @@ export function CashflowBarChart({
         {
           label: "_thirdBar",
           data: sliced.data.map((d) =>
-            d.overspending > 0 ? d.overspending : d.surplus
+            d.overspending > 0 ? d.overspending : d.surplus,
           ),
           backgroundColor: sliced.data.map((d) =>
-            d.overspending > 0 ? brandSecondary : brandPrimary
+            d.overspending > 0 ? brandSecondary : brandPrimary,
           ),
           hoverBackgroundColor: sliced.data.map((d) =>
             d.overspending > 0
               ? hexToRgba(brandSecondary, 0.8)
-              : hexToRgba(brandPrimary, 0.8)
+              : hexToRgba(brandPrimary, 0.8),
           ),
           borderWidth: 0,
           borderRadius: 0,
@@ -225,83 +244,91 @@ export function CashflowBarChart({
     };
   }, [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 null;
-            if (ctx.datasetIndex === 2) {
-              const d = sliced?.data[ctx.dataIndex];
-              if (!d) return null;
-              const lbl = d.overspending > 0 ? "Over Spending" : "Surplus Income";
-              return ` ${lbl}: $${val.toLocaleString()}`;
-            }
-            return ` ${ctx.dataset.label}: $${val.toLocaleString()}`;
+  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()}`,
+      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]);
+    }),
+    [showXAxis, showYAxis, sliced],
+  );
 
   return (
     <Card
       className={cn("w-full py-4 sm:py-6 gap-2", className)}
-      style={{ maxWidth: width }}
+      style={{ maxWidth: width, fontFamily }}
     >
       <CardHeader className="px-3 sm:px-6">
-        <CardTitle className="text-sm sm:text-base">{title}</CardTitle>
-        <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>
+        <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">