@wealthx/shadcn 1.0.2 → 1.1.0

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

@@ -0,0 +1,278 @@
+import React, { useEffect, useMemo, useRef, 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,
+  DATASET_ALPHAS,
+  FALLBACK_TICK,
+  CHART_SLICE_COUNT,
+  CHART_PERIODS,
+  formatTooltipDate,
+  ChartLegendItem,
+  ChartPeriodButton,
+  type ChartPeriod,
+  type ChartGranularity,
+} from "./chart-shared";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface IncomeDataset {
+  /** Income source label, e.g. "Employment", "Rental", "Other" */
+  label: string;
+  /** One value per data point, aligned to the months array */
+  data: number[];
+}
+
+export interface IncomeBarChartData {
+  /** Display labels, e.g. ["Jul", "Aug"] for monthly or ["Mar 8", "Mar 9"] for daily */
+  months: string[];
+  /** Optional ISO date strings per point — used for the tooltip title */
+  dates?: string[];
+  datasets: IncomeDataset[];
+}
+
+export type IncomePeriod = ChartPeriod;
+export type IncomeGranularity = ChartGranularity;
+
+export interface IncomeBarChartProps {
+  /** Full dataset — sliced to the selected period */
+  incomeData: IncomeBarChartData | 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?: IncomePeriod;
+  /**
+   * Data granularity — controls available period buttons and slice counts.
+   * "monthly" (default): shows 3M / 6M / 12M, slices by month count.
+   * "daily": shows 1M / 3M / 6M / 12M, slices by day count (1M=30, 3M=90, etc.).
+   */
+  granularity?: IncomeGranularity;
+  /** 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;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const FALLBACK_PRIMARY = "#33FF99";
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function IncomeBarChart({
+  incomeData,
+  title = "Income",
+  showLegend = true,
+  showXAxis = true,
+  showYAxis = true,
+  legendPosition = "top",
+  defaultPeriod = 6,
+  granularity = "monthly",
+  height = 280,
+  width = "100%",
+  className,
+  isLoading = false,
+}: IncomeBarChartProps) {
+  const periods = CHART_PERIODS[granularity];
+  const [period, setPeriod] = useState<IncomePeriod>(defaultPeriod);
+
+  // Reset period when granularity changes, but not on initial mount
+  // (defaultPeriod handles the initial value).
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (isFirstRender.current) { isFirstRender.current = false; return; }
+    setPeriod(CHART_PERIODS[granularity][0]);
+  }, [granularity]);
+
+  const themeVars = useThemeVars();
+  const brandPrimary: string =
+    (themeVars["--theme-primary"] as string | undefined) || FALLBACK_PRIMARY;
+
+  const sliced = useMemo<IncomeBarChartData | null>(() => {
+    if (!incomeData?.months?.length || !incomeData.datasets.length) return null;
+    const count = Math.min(CHART_SLICE_COUNT[granularity][period], incomeData.months.length);
+    const start = incomeData.months.length - count;
+    return {
+      months: incomeData.months.slice(start),
+      dates: incomeData.dates?.slice(start),
+      datasets: incomeData.datasets.map((ds) => ({
+        ...ds,
+        data: ds.data.slice(start),
+      })),
+    };
+  }, [incomeData, period, granularity]);
+
+  const datasetColors = useMemo(
+    () => sliced?.datasets.map((_, i) =>
+      hexToRgba(brandPrimary, DATASET_ALPHAS[i % DATASET_ALPHAS.length])
+    ) ?? [],
+    [sliced, brandPrimary]
+  );
+
+  const chartData = useMemo<ChartData<"bar">>(() => {
+    if (!sliced) return { labels: [], datasets: [] };
+    return {
+      labels: sliced.months,
+      datasets: sliced.datasets.map((ds, i) => ({
+        label: ds.label,
+        data: ds.data,
+        backgroundColor: datasetColors[i],
+        hoverBackgroundColor: hexToRgba(
+          brandPrimary,
+          Math.min(DATASET_ALPHAS[i % DATASET_ALPHAS.length] + 0.15, 1)
+        ),
+        borderWidth: 0,
+        borderRadius: 0,
+        borderSkipped: false,
+        barPercentage: 0.75,
+        categoryPercentage: 0.7,
+        stack: "income",
+      })),
+    };
+  }, [sliced, datasetColors, brandPrimary]);
+
+  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?.dates?.[idx]) {
+              return formatTooltipDate(sliced.dates[idx], granularity);
+            }
+            return tooltipItems[0]?.label ?? "";
+          },
+          label: (ctx) => {
+            const val = ctx.raw as number;
+            if (val === 0) return null;
+            return ` ${ctx.dataset.label}: $${val.toLocaleString()}`;
+          },
+        },
+      },
+    },
+    scales: {
+      x: {
+        display: showXAxis,
+        stacked: true,
+        grid: { display: false },
+        border: { display: false },
+        ticks: { font: { size: 10 }, color: FALLBACK_TICK },
+      },
+      y: {
+        display: showYAxis,
+        stacked: true,
+        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, granularity]);
+
+  return (
+    <Card
+      className={cn("w-full py-4 sm:py-6 gap-2", className)}
+      style={{ maxWidth: width }}
+    >
+      <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>
+      </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" && (
+              <div className="flex flex-wrap gap-x-3 gap-y-1.5 pb-2">
+                {sliced.datasets.map((ds, i) => (
+                  <ChartLegendItem key={ds.label} label={ds.label} color={datasetColors[i]} />
+                ))}
+              </div>
+            )}
+            <div style={{ height, width: "100%", position: "relative" }}>
+              <Chart
+                key={brandPrimary}
+                type="bar"
+                data={chartData}
+                options={options}
+                aria-label={title}
+              />
+            </div>
+            {showLegend && legendPosition === "bottom" && (
+              <div className="flex flex-wrap gap-x-3 gap-y-1.5 pt-2">
+                {sliced.datasets.map((ds, i) => (
+                  <ChartLegendItem key={ds.label} label={ds.label} color={datasetColors[i]} />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/transactions-income-expense-bar-chart.tsx

@@ -0,0 +1,198 @@
+import React, { useMemo } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip,
+  type ChartOptions,
+  type ChartData,
+} from "chart.js";
+import ChartDataLabels from "chartjs-plugin-datalabels";
+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 } from "./chart-shared";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const FALLBACK_PRIMARY = "#33FF99";
+const FALLBACK_SECONDARY = "#162029";
+/** Dark neutral used for dollar value labels — not a brand color. */
+const VALUE_LABEL_COLOR = "#162029";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatDollar(value: number): string {
+  return `$${value.toLocaleString(undefined, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })}`;
+}
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface TransactionsIncomeExpenseBarChartProps {
+  /** Total income amount (positive number) */
+  totalIncome: number | null;
+  /** Total expense amount (negative or positive — absolute value is used) */
+  totalExpense: number | 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;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function TransactionsIncomeExpenseBarChart({
+  totalIncome,
+  totalExpense,
+  title = "Transactions — Income vs Expense",
+  height = 120,
+  width = "100%",
+  className,
+  isLoading = false,
+}: TransactionsIncomeExpenseBarChartProps) {
+  const themeVars = useThemeVars();
+  const brandPrimary =
+    (themeVars["--theme-primary"] as string | undefined) || FALLBACK_PRIMARY;
+  const brandSecondary =
+    (themeVars["--theme-secondary"] as string | undefined) || FALLBACK_SECONDARY;
+
+  const hasData = totalIncome != null && totalExpense != null;
+  const incomeVal = totalIncome ?? 0;
+  const expenseVal = Math.abs(totalExpense ?? 0);
+  const maxVal = Math.max(incomeVal, expenseVal);
+
+  const chartData = useMemo<ChartData<"bar">>(() => {
+    if (!hasData) return { labels: [], datasets: [] };
+    return {
+      labels: ["Incoming", "Outgoing"],
+      datasets: [
+        {
+          barThickness: 40,
+          backgroundColor: [brandPrimary, brandSecondary],
+          hoverBackgroundColor: [brandPrimary, brandSecondary],
+          borderWidth: 0,
+          borderRadius: 0,
+          borderSkipped: false,
+          data: [incomeVal, expenseVal],
+          // chartjs-plugin-datalabels config — typed via plugin module augmentation
+          datalabels: {
+            labels: {
+              value: {
+                anchor: "end",
+                align: "end",
+                offset: 10,
+                clamp: false,
+                font: { weight: "bold", size: 14 },
+                color: VALUE_LABEL_COLOR,
+                textAlign: "left",
+                // Returns array for multi-line: dollar value on line 1, blank on line 2
+                formatter: (v: number) => [formatDollar(v), ""],
+              },
+              name: {
+                anchor: "end",
+                align: "end",
+                offset: 10,
+                clamp: false,
+                font: { size: 12 },
+                color: FALLBACK_TICK,
+                textAlign: "left",
+                // Returns array for multi-line: blank on line 1, bar label on line 2
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                formatter: (_: number, ctx: any) =>
+                  ["", String(ctx.chart.data.labels?.[ctx.dataIndex] ?? "")],
+              },
+            },
+          } as unknown as never,
+        },
+      ],
+    };
+  }, [hasData, incomeVal, expenseVal, brandPrimary, brandSecondary]);
+
+  const options = useMemo<ChartOptions<"bar">>(() => ({
+    indexAxis: "y",
+    responsive: true,
+    maintainAspectRatio: false,
+    animation: { duration: 800, easing: "easeOutQuart" },
+    layout: {
+      // Right padding reserves space for the datalabels rendered outside the bar area
+      padding: { right: 180, left: 0, top: 10, bottom: 10 },
+    },
+    plugins: {
+      legend: { display: false },
+      tooltip: { enabled: false },
+    },
+    scales: {
+      y: {
+        display: true,
+        grid: { display: false },
+        border: { display: false },
+        ticks: { display: false },
+      },
+      x: {
+        display: true,
+        suggestedMax: maxVal * 1.3,
+        grid: { display: false },
+        border: { display: false },
+        ticks: { display: false },
+      },
+    },
+  }), [maxVal]);
+
+  return (
+    <Card
+      className={cn("w-full py-4 sm:py-6 gap-2", className)}
+      style={{ maxWidth: width }}
+    >
+      <CardHeader className="px-3 sm:px-6">
+        <CardTitle className="text-sm sm:text-base">{title}</CardTitle>
+      </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 style={{ height, width: "100%", position: "relative" }}>
+            <Chart
+              key={`${brandPrimary}__${brandSecondary}`}
+              type="bar"
+              data={chartData}
+              options={options}
+              plugins={[ChartDataLabels]}
+              aria-label={title}
+            />
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}