@tuturuuu/ui 0.17.0 → 0.18.0

package/src/components/ui/tasks/progress/activity-heatmap.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import { cn } from '@tuturuuu/utils/format';
+import { useMemo } from 'react';
+
+export interface ActivityHeatmapDatum {
+  date: string;
+  value: number;
+}
+
+interface ActivityHeatmapProps {
+  data: ActivityHeatmapDatum[];
+  /** Number of trailing weeks to render (default 53 = ~1 year). */
+  weeks?: number;
+  /** ISO date (YYYY-MM-DD) of the last column; defaults to today (local). */
+  endDate?: string;
+  /** Unit label shown in tooltips, e.g. "words". */
+  unitLabel?: string;
+  /**
+   * Ordered intensity classes from lowest (empty) to highest.
+   * Must be literal Tailwind class strings so JIT can see them.
+   */
+  levelClasses?: [string, string, string, string, string];
+  className?: string;
+  /** Called with the ISO date when a day cell is activated. */
+  onSelectDate?: (date: string) => void;
+}
+
+const DEFAULT_LEVELS: [string, string, string, string, string] = [
+  'bg-foreground/[0.06]',
+  'bg-dynamic-green/25',
+  'bg-dynamic-green/45',
+  'bg-dynamic-green/70',
+  'bg-dynamic-green',
+];
+
+const WEEKDAY_LABELS: Array<{ id: string; label: string }> = [
+  { id: 'sun', label: '' },
+  { id: 'mon', label: 'Mon' },
+  { id: 'tue', label: '' },
+  { id: 'wed', label: 'Wed' },
+  { id: 'thu', label: '' },
+  { id: 'fri', label: 'Fri' },
+  { id: 'sat', label: '' },
+];
+const MS_PER_DAY = 86_400_000;
+
+function toIsoDate(date: Date) {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(
+    date.getDate()
+  ).padStart(2, '0')}`;
+}
+
+function parseIsoDate(value: string) {
+  const [y, m, d] = value.split('-').map(Number);
+  return new Date(y ?? 1970, (m ?? 1) - 1, d ?? 1);
+}
+
+/**
+ * GitHub-style contribution heatmap. Columns are weeks (Sunday-started),
+ * rows are weekdays. Intensity is quantized against the dataset's non-zero
+ * distribution so a single big day never washes out the rest.
+ */
+export function ActivityHeatmap({
+  data,
+  weeks = 53,
+  endDate,
+  unitLabel = '',
+  levelClasses = DEFAULT_LEVELS,
+  className,
+  onSelectDate,
+}: ActivityHeatmapProps) {
+  const { columns, monthLabels, thresholds } = useMemo(() => {
+    const byDate = new Map<string, number>();
+    for (const entry of data) {
+      if (!entry?.date) continue;
+      byDate.set(
+        entry.date,
+        (byDate.get(entry.date) ?? 0) + Number(entry.value || 0)
+      );
+    }
+
+    // Anchor the grid to the Saturday at or after endDate so the final
+    // (rightmost) column always contains "today".
+    const anchor = endDate ? parseIsoDate(endDate) : new Date();
+    anchor.setHours(0, 0, 0, 0);
+    const lastColumnEnd = new Date(anchor);
+    lastColumnEnd.setDate(
+      lastColumnEnd.getDate() + (6 - lastColumnEnd.getDay())
+    );
+
+    const totalDays = weeks * 7;
+    const gridStart = new Date(
+      lastColumnEnd.getTime() - (totalDays - 1) * MS_PER_DAY
+    );
+
+    const cols: Array<
+      Array<{ date: string; value: number; inFuture: boolean }>
+    > = [];
+    const months: Array<{ index: number; label: string }> = [];
+    const monthFormatter = new Intl.DateTimeFormat(undefined, {
+      month: 'short',
+    });
+    let lastMonth = -1;
+    const todayIso = toIsoDate(new Date());
+
+    for (let w = 0; w < weeks; w++) {
+      const col: Array<{ date: string; value: number; inFuture: boolean }> = [];
+      for (let day = 0; day < 7; day++) {
+        const cellDate = new Date(
+          gridStart.getTime() + (w * 7 + day) * MS_PER_DAY
+        );
+        const iso = toIsoDate(cellDate);
+        col.push({
+          date: iso,
+          value: byDate.get(iso) ?? 0,
+          inFuture: iso > todayIso,
+        });
+        if (day === 0) {
+          const month = cellDate.getMonth();
+          if (month !== lastMonth) {
+            months.push({ index: w, label: monthFormatter.format(cellDate) });
+            lastMonth = month;
+          }
+        }
+      }
+      cols.push(col);
+    }
+
+    // Quartile thresholds over positive values for balanced shading.
+    const positives = [...byDate.values()]
+      .filter((v) => v > 0)
+      .sort((a, b) => a - b);
+    const quantile = (q: number) =>
+      positives.length === 0
+        ? 0
+        : (positives[
+            Math.min(positives.length - 1, Math.floor(q * positives.length))
+          ] ?? 0);
+
+    return {
+      columns: cols,
+      monthLabels: months,
+      thresholds: [quantile(0.25), quantile(0.5), quantile(0.75)],
+    };
+  }, [data, weeks, endDate]);
+
+  const levelFor = (value: number) => {
+    if (value <= 0) return 0;
+    if (value <= thresholds[0]!) return 1;
+    if (value <= thresholds[1]!) return 2;
+    if (value <= thresholds[2]!) return 3;
+    return 4;
+  };
+
+  const numberFormatter = useMemo(() => new Intl.NumberFormat(), []);
+  const dateFormatter = useMemo(
+    () =>
+      new Intl.DateTimeFormat(undefined, {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+      }),
+    []
+  );
+
+  return (
+    <div className={cn('w-full overflow-x-auto', className)}>
+      <div className="inline-flex min-w-full flex-col gap-1.5">
+        {/* Month labels */}
+        <div className="flex pl-8 text-[10px] text-muted-foreground">
+          <div className="relative flex-1" style={{ height: 12 }}>
+            {monthLabels.map((month) => (
+              <span
+                className="absolute top-0"
+                key={`${month.label}-${month.index}`}
+                style={{ left: `${(month.index / columns.length) * 100}%` }}
+              >
+                {month.label}
+              </span>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex gap-1.5">
+          {/* Weekday labels */}
+          <div className="flex w-6 shrink-0 flex-col justify-between py-0.5 text-[9px] text-muted-foreground">
+            {WEEKDAY_LABELS.map((weekday) => (
+              <span className="h-3 leading-3" key={weekday.id}>
+                {weekday.label}
+              </span>
+            ))}
+          </div>
+
+          {/* Week columns */}
+          <div className="flex gap-[3px]">
+            {columns.map((col, weekIndex) => (
+              <div
+                className="flex flex-col gap-[3px]"
+                key={col[0]?.date ?? weekIndex}
+              >
+                {col.map((cell) => {
+                  if (cell.inFuture) {
+                    return (
+                      <div
+                        className="size-3 rounded-[3px] bg-transparent"
+                        key={cell.date}
+                      />
+                    );
+                  }
+                  const level = levelFor(cell.value);
+                  const title =
+                    cell.value > 0
+                      ? `${numberFormatter.format(cell.value)}${unitLabel ? ` ${unitLabel}` : ''} · ${dateFormatter.format(parseIsoDate(cell.date))}`
+                      : `No activity · ${dateFormatter.format(parseIsoDate(cell.date))}`;
+                  const interactive = Boolean(onSelectDate);
+                  return (
+                    <button
+                      aria-label={title}
+                      className={cn(
+                        'size-3 rounded-[3px] ring-offset-background transition-transform focus:outline-none focus-visible:ring-2 focus-visible:ring-dynamic-blue focus-visible:ring-offset-1',
+                        levelClasses[level],
+                        interactive && 'cursor-pointer hover:scale-125'
+                      )}
+                      disabled={!interactive}
+                      key={cell.date}
+                      onClick={
+                        interactive
+                          ? () => onSelectDate?.(cell.date)
+                          : undefined
+                      }
+                      title={title}
+                      type="button"
+                    />
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Legend */}
+        <div className="flex items-center gap-1.5 pl-8 text-[10px] text-muted-foreground">
+          <span>Less</span>
+          {levelClasses.map((levelClass) => (
+            <span
+              className={cn('size-3 rounded-[3px]', levelClass)}
+              key={levelClass}
+            />
+          ))}
+          <span>More</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/tasks/progress/breakdown-bars.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { cn } from '@tuturuuu/utils/format';
+import { useMemo } from 'react';
+
+export interface BreakdownDatum {
+  label: string;
+  value: number;
+}
+
+interface BreakdownBarsProps {
+  data: BreakdownDatum[];
+  unitLabel?: string;
+  /** Max rows to show; the rest collapse into "Other". */
+  limit?: number;
+  /** Literal Tailwind bg class for the filled bar. */
+  barClassName?: string;
+  emptyLabel?: string;
+  className?: string;
+}
+
+export function BreakdownBars({
+  data,
+  unitLabel = '',
+  limit = 8,
+  barClassName = 'bg-dynamic-blue',
+  emptyLabel = 'No data yet',
+  className,
+}: BreakdownBarsProps) {
+  const rows = useMemo(() => {
+    const sorted = [...data]
+      .filter((d) => d.value > 0)
+      .sort((a, b) => b.value - a.value);
+    if (sorted.length <= limit) return sorted;
+    const head = sorted.slice(0, limit - 1);
+    const rest = sorted.slice(limit - 1);
+    const otherValue = rest.reduce((sum, r) => sum + r.value, 0);
+    return [...head, { label: 'Other', value: otherValue }];
+  }, [data, limit]);
+
+  const max = useMemo(() => Math.max(...rows.map((r) => r.value), 1), [rows]);
+  const numberFormatter = useMemo(() => new Intl.NumberFormat(), []);
+
+  if (rows.length === 0) {
+    return <p className="text-muted-foreground text-sm">{emptyLabel}</p>;
+  }
+
+  return (
+    <div className={cn('space-y-2.5', className)}>
+      {rows.map((row) => (
+        <div
+          className="grid grid-cols-[minmax(4rem,8rem)_1fr_auto] items-center gap-3"
+          key={row.label}
+        >
+          <span
+            className="truncate text-muted-foreground text-sm"
+            title={row.label}
+          >
+            {row.label}
+          </span>
+          <div className="h-2.5 overflow-hidden rounded-full bg-foreground/[0.06]">
+            <div
+              className={cn('h-full rounded-full transition-all', barClassName)}
+              style={{ width: `${Math.max((row.value / max) * 100, 2)}%` }}
+            />
+          </div>
+          <span className="text-right text-sm tabular-nums">
+            {numberFormatter.format(row.value)}
+            {unitLabel ? (
+              <span className="ml-1 text-muted-foreground text-xs">
+                {unitLabel}
+              </span>
+            ) : null}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/ui/tasks/progress/cumulative-progress-chart.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Area, AreaChart, CartesianGrid, Line, XAxis, YAxis } from 'recharts';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '../../chart';
+
+export interface CumulativeDatum {
+  date: string;
+  value: number;
+}
+
+interface ParConfig {
+  startDate: string;
+  endDate: string;
+  target: number;
+}
+
+interface CumulativeProgressChartProps {
+  /** Daily delta values (not cumulative); the chart accumulates them. */
+  daily: CumulativeDatum[];
+  unitLabel?: string;
+  /** Draw an expected-pace ("par") line for a dated target goal. */
+  par?: ParConfig | null;
+  className?: string;
+  height?: number;
+}
+
+const MS_PER_DAY = 86_400_000;
+
+function parseIsoDate(value: string) {
+  const [y, m, d] = value.split('-').map(Number);
+  return new Date(y ?? 1970, (m ?? 1) - 1, d ?? 1);
+}
+
+function toIsoDate(date: Date) {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(
+    date.getDate()
+  ).padStart(2, '0')}`;
+}
+
+export function CumulativeProgressChart({
+  daily,
+  unitLabel = '',
+  par = null,
+  className,
+  height = 260,
+}: CumulativeProgressChartProps) {
+  const { rows, hasPar } = useMemo(() => {
+    const sorted = [...daily]
+      .filter((d) => d?.date)
+      .sort((a, b) => a.date.localeCompare(b.date));
+
+    // Build a continuous date axis so gaps read as flat lines, not jumps.
+    const parEnabled = Boolean(par && par.target > 0);
+    const firstDate = parEnabled
+      ? par!.startDate
+      : (sorted[0]?.date ?? toIsoDate(new Date()));
+    const lastDate = parEnabled
+      ? par!.endDate
+      : (sorted.at(-1)?.date ?? firstDate);
+
+    const start = parseIsoDate(firstDate);
+    const end = parseIsoDate(lastDate);
+    const totalDays = Math.max(
+      1,
+      Math.round((end.getTime() - start.getTime()) / MS_PER_DAY)
+    );
+
+    const deltaByDate = new Map<string, number>();
+    for (const d of sorted) {
+      deltaByDate.set(
+        d.date,
+        (deltaByDate.get(d.date) ?? 0) + Number(d.value || 0)
+      );
+    }
+
+    const todayIso = toIsoDate(new Date());
+    const out: Array<{
+      date: string;
+      cumulative: number | null;
+      par: number | null;
+    }> = [];
+    let running = 0;
+    for (let i = 0; i <= totalDays; i++) {
+      const iso = toIsoDate(new Date(start.getTime() + i * MS_PER_DAY));
+      running += deltaByDate.get(iso) ?? 0;
+      const parValue = parEnabled ? (par!.target * i) / totalDays : null;
+      out.push({
+        date: iso,
+        cumulative: iso <= todayIso ? running : null,
+        par: parValue,
+      });
+    }
+
+    return { rows: out, hasPar: parEnabled };
+  }, [daily, par]);
+
+  const config: ChartConfig = {
+    cumulative: { label: unitLabel || 'Progress', color: 'var(--chart-1)' },
+    par: { label: 'Expected pace', color: 'var(--chart-4)' },
+  };
+
+  const dateFormatter = useMemo(
+    () =>
+      new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' }),
+    []
+  );
+
+  return (
+    <ChartContainer
+      className={className}
+      config={config}
+      style={{ height, aspectRatio: 'auto', width: '100%' }}
+    >
+      <AreaChart data={rows} margin={{ left: 4, right: 12, top: 8, bottom: 0 }}>
+        <defs>
+          <linearGradient id="cumulativeFill" x1="0" x2="0" y1="0" y2="1">
+            <stop
+              offset="0%"
+              stopColor="var(--color-cumulative)"
+              stopOpacity={0.35}
+            />
+            <stop
+              offset="100%"
+              stopColor="var(--color-cumulative)"
+              stopOpacity={0.02}
+            />
+          </linearGradient>
+        </defs>
+        <CartesianGrid strokeDasharray="3 3" vertical={false} />
+        <XAxis
+          axisLine={false}
+          dataKey="date"
+          minTickGap={32}
+          tickFormatter={(value) =>
+            dateFormatter.format(parseIsoDate(String(value)))
+          }
+          tickLine={false}
+        />
+        <YAxis
+          axisLine={false}
+          tickFormatter={(value) =>
+            new Intl.NumberFormat(undefined, { notation: 'compact' }).format(
+              Number(value)
+            )
+          }
+          tickLine={false}
+          width={40}
+        />
+        <ChartTooltip
+          content={
+            <ChartTooltipContent
+              labelFormatter={(value) =>
+                dateFormatter.format(parseIsoDate(String(value)))
+              }
+            />
+          }
+        />
+        <Area
+          connectNulls
+          dataKey="cumulative"
+          fill="url(#cumulativeFill)"
+          stroke="var(--color-cumulative)"
+          strokeWidth={2}
+          type="monotone"
+        />
+        {hasPar ? (
+          <Line
+            dataKey="par"
+            dot={false}
+            stroke="var(--color-par)"
+            strokeDasharray="5 4"
+            strokeWidth={1.5}
+            type="monotone"
+          />
+        ) : null}
+      </AreaChart>
+    </ChartContainer>
+  );
+}

package/src/components/ui/tasks/progress/daily-bar-chart.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '../../chart';
+
+export interface DailyBarDatum {
+  date: string;
+  value: number;
+}
+
+interface DailyBarChartProps {
+  data: DailyBarDatum[];
+  unitLabel?: string;
+  /** Only render the trailing N days (default 30). */
+  days?: number;
+  className?: string;
+  height?: number;
+}
+
+function parseIsoDate(value: string) {
+  const [y, m, d] = value.split('-').map(Number);
+  return new Date(y ?? 1970, (m ?? 1) - 1, d ?? 1);
+}
+
+export function DailyBarChart({
+  data,
+  unitLabel = '',
+  days = 30,
+  className,
+  height = 240,
+}: DailyBarChartProps) {
+  const rows = useMemo(
+    () =>
+      [...data]
+        .filter((d) => d?.date)
+        .sort((a, b) => a.date.localeCompare(b.date))
+        .slice(-days),
+    [data, days]
+  );
+
+  const config: ChartConfig = {
+    value: { label: unitLabel || 'Progress', color: 'var(--chart-1)' },
+  };
+
+  const dateFormatter = useMemo(
+    () =>
+      new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' }),
+    []
+  );
+
+  return (
+    <ChartContainer
+      className={className}
+      config={config}
+      style={{ height, aspectRatio: 'auto', width: '100%' }}
+    >
+      <BarChart data={rows} margin={{ left: 4, right: 8, top: 8, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" vertical={false} />
+        <XAxis
+          axisLine={false}
+          dataKey="date"
+          minTickGap={24}
+          tickFormatter={(value) =>
+            dateFormatter.format(parseIsoDate(String(value)))
+          }
+          tickLine={false}
+        />
+        <YAxis
+          axisLine={false}
+          tickFormatter={(value) =>
+            new Intl.NumberFormat(undefined, { notation: 'compact' }).format(
+              Number(value)
+            )
+          }
+          tickLine={false}
+          width={36}
+        />
+        <ChartTooltip
+          content={
+            <ChartTooltipContent
+              labelFormatter={(value) =>
+                dateFormatter.format(parseIsoDate(String(value)))
+              }
+            />
+          }
+        />
+        <Bar dataKey="value" fill="var(--color-value)" radius={[4, 4, 0, 0]} />
+      </BarChart>
+    </ChartContainer>
+  );
+}

package/src/components/ui/tasks/progress/habit-gauge.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { cn } from '@tuturuuu/utils/format';
+
+interface HabitGaugeProps {
+  /** Progress within the current period. */
+  value: number;
+  /** Threshold that marks the period as "hit". */
+  target: number;
+  unitLabel?: string;
+  /** Caption under the ring, e.g. "This week". */
+  caption?: string;
+  size?: number;
+  className?: string;
+}
+
+/**
+ * Radial gauge that fills toward the period threshold and turns gold once met.
+ * Rendered with plain SVG to stay light and theme-aware.
+ */
+export function HabitGauge({
+  value,
+  target,
+  unitLabel = '',
+  caption,
+  size = 120,
+  className,
+}: HabitGaugeProps) {
+  const safeTarget = target > 0 ? target : 1;
+  const ratio = Math.max(0, Math.min(value / safeTarget, 1));
+  const met = value >= safeTarget && target > 0;
+  const stroke = 10;
+  const radius = (size - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const dash = circumference * ratio;
+  const percent = Math.round(ratio * 100);
+
+  return (
+    <div className={cn('flex flex-col items-center gap-1.5', className)}>
+      <div className="relative" style={{ width: size, height: size }}>
+        <svg
+          className="-rotate-90"
+          height={size}
+          role="img"
+          aria-label={`${value} of ${target} ${unitLabel}`.trim()}
+          viewBox={`0 0 ${size} ${size}`}
+          width={size}
+        >
+          <circle
+            className="text-foreground/[0.08]"
+            cx={size / 2}
+            cy={size / 2}
+            fill="none"
+            r={radius}
+            stroke="currentColor"
+            strokeWidth={stroke}
+          />
+          <circle
+            className={cn(
+              'transition-all duration-500',
+              met ? 'text-dynamic-amber' : 'text-dynamic-green'
+            )}
+            cx={size / 2}
+            cy={size / 2}
+            fill="none"
+            r={radius}
+            stroke="currentColor"
+            strokeDasharray={`${dash} ${circumference}`}
+            strokeLinecap="round"
+            strokeWidth={stroke}
+          />
+        </svg>
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          <span
+            className={cn(
+              'font-bold text-2xl tabular-nums',
+              met && 'text-dynamic-amber'
+            )}
+          >
+            {percent}%
+          </span>
+          <span className="text-[10px] text-muted-foreground">
+            {Number(value).toLocaleString()}/{Number(target).toLocaleString()}
+          </span>
+        </div>
+      </div>
+      {caption ? (
+        <span className="text-muted-foreground text-xs">{caption}</span>
+      ) : null}
+    </div>
+  );
+}