@wealthx/shadcn 1.0.2 → 1.1.0

package/src/components/index.tsx

@@ -1,3 +1,32 @@
+export { TransactionsIncomeExpenseBarChart } from "./ui/transactions-income-expense-bar-chart";
+export type { TransactionsIncomeExpenseBarChartProps } from "./ui/transactions-income-expense-bar-chart";
+
+export { CashflowBarChart } from "./ui/cashflow-bar-chart";
+export type {
+  CashflowBarChartProps,
+  CashflowChartData,
+  CashflowDataPoint,
+  CashflowPeriod,
+} from "./ui/cashflow-bar-chart";
+
+export { ExpenseBarChart } from "./ui/expense-bar-chart";
+export type {
+  ExpenseBarChartProps,
+  ExpenseBarChartData,
+  ExpenseDataset,
+  ExpensePeriod,
+  ExpenseGranularity,
+} from "./ui/expense-bar-chart";
+
+export { IncomeBarChart } from "./ui/income-bar-chart";
+export type {
+  IncomeBarChartProps,
+  IncomeBarChartData,
+  IncomeDataset,
+  IncomePeriod,
+  IncomeGranularity,
+} from "./ui/income-bar-chart";
+
 export {
   Accordion,
   AccordionItem,
@@ -98,6 +127,33 @@ export type { CheckboxProps, CheckboxCardProps } from "./ui/checkbox";
 export { Chip } from "./ui/chip";
 export type { ChipProps } from "./ui/chip";
 
+export {
+  Combobox,
+  ComboboxTrigger,
+  ComboboxValue,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxSeparator,
+} from "./ui/combobox";
+export type {
+  ComboboxProps,
+  ComboboxTriggerProps,
+  ComboboxValueProps,
+  ComboboxInputProps,
+  ComboboxContentProps,
+  ComboboxListProps,
+  ComboboxItemProps,
+  ComboboxEmptyProps,
+  ComboboxGroupProps,
+  ComboboxGroupLabelProps,
+  ComboboxSeparatorProps,
+} from "./ui/combobox";
+
 export {
   DataTable,
   DataTableToolbar,

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

@@ -0,0 +1,336 @@
+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,
+  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;
+  /** 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];
+
+const FALLBACK_PRIMARY = "#33FF99";
+const FALLBACK_SECONDARY = "#162029";
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function CashflowBarChart({
+  cashflowData,
+  title = "Cashflow",
+  showLegend = true,
+  showXAxis = true,
+  showYAxis = true,
+  legendPosition = "top",
+  defaultPeriod = 6,
+  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 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 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()}`;
+          },
+        },
+      },
+    },
+    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 }}
+    >
+      <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" && (
+              <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>
+  );
+}

package/src/components/ui/chart-shared.tsx

@@ -0,0 +1,100 @@
+/**
+ * Shared utilities and sub-components for IncomeBarChart and ExpenseBarChart.
+ * Not part of the public package API — internal use only.
+ */
+import React from "react";
+import { Button } from "./button";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type ChartPeriod = 1 | 3 | 6 | 12;
+export type ChartGranularity = "monthly" | "daily";
+
+// ---------------------------------------------------------------------------
+// Period / slice config
+// ---------------------------------------------------------------------------
+
+/**
+ * How many data points to slice per period × granularity combination.
+ * monthly: slice by calendar month count.
+ * daily:   slice by approximate day count (1M=30d, 3M=90d, 6M=180d, 12M=365d).
+ */
+export const CHART_SLICE_COUNT: Record<ChartGranularity, Record<ChartPeriod, number>> = {
+  monthly: { 1: 1,   3: 3,   6: 6,   12: 12  },
+  daily:   { 1: 30,  3: 90,  6: 180, 12: 365 },
+};
+
+/** Period buttons shown per granularity. monthly hides 1M; daily shows all four. */
+export const CHART_PERIODS: Record<ChartGranularity, ChartPeriod[]> = {
+  monthly: [3, 6, 12],
+  daily:   [1, 3, 6, 12],
+};
+
+// ---------------------------------------------------------------------------
+// Chart.js helpers
+// ---------------------------------------------------------------------------
+
+export function hexToRgba(hex: string, alpha: number): string {
+  const clean = hex.replace("#", "");
+  const full =
+    clean.length === 3
+      ? clean.split("").map((c) => c + c).join("")
+      : clean;
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+
+/** Opacity steps to derive distinct shades from a single brand color (up to 6 datasets). */
+export const DATASET_ALPHAS = [1, 0.72, 0.52, 0.36, 0.24, 0.15];
+
+export const FALLBACK_TICK = "#9EAAB5";
+
+// ---------------------------------------------------------------------------
+// Tooltip date format
+// ---------------------------------------------------------------------------
+
+/**
+ * Format an ISO date string for the chart tooltip title.
+ * Daily granularity includes the day; monthly shows only month + year.
+ */
+export function formatTooltipDate(iso: string, granularity: ChartGranularity): string {
+  const d = new Date(iso);
+  return d.toLocaleDateString("en-US",
+    granularity === "daily"
+      ? { month: "short", day: "numeric", year: "numeric" }
+      : { month: "short", year: "numeric" }
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+export function ChartLegendItem({ label, color }: { label: string; color: string }) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <div style={{ width: 10, height: 10, backgroundColor: color, flexShrink: 0 }} />
+      <span className="text-[11px] text-muted-foreground leading-none">{label}</span>
+    </div>
+  );
+}
+
+export function ChartPeriodButton({
+  period,
+  active,
+  onClick,
+}: {
+  period: ChartPeriod;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <Button variant={active ? "default" : "outline"} size="xs" onClick={onClick}>
+      {period}M
+    </Button>
+  );
+}