@umituz/web-design-system 6.0.2 → 6.1.1

package/src/presentation/organisms/charts/BarChart.tsx

@@ -0,0 +1,143 @@
+import { useState } from 'react';
+import { seriesColor } from './utils';
+
+export interface BarSeries {
+  key?: string;
+  label: string;
+  values?: readonly number[];
+  data?: readonly number[];
+  tone?: string;
+  color?: string;
+  accents?: readonly (string | undefined)[];
+}
+
+export interface BarChartGoalLine {
+  value: number;
+  label?: string;
+  tone?: string;
+}
+
+export interface BarChartProps {
+  labels: readonly string[];
+  series: BarSeries[];
+  stacking?: 'grouped' | 'stacked';
+  totalLabel?: string;
+  height?: number;
+  formatValue?: (v: number) => string;
+  formatLabel?: (l: string) => string;
+  goalLine?: BarChartGoalLine;
+}
+
+export function BarChart({
+  labels,
+  series,
+  stacking = 'grouped',
+  totalLabel = 'Σ',
+  height = 130,
+  formatValue = (v: number) => String(v),
+  formatLabel = (l: string) => l,
+  goalLine,
+}: BarChartProps) {
+  const [hover, setHover] = useState<number | null>(null);
+  const vals = (s: BarSeries) => s.values ?? s.data ?? [];
+  const columnTotals = labels.map((_, i) => series.reduce((sum, s) => sum + (vals(s)[i] ?? 0), 0));
+  const max =
+    stacking === 'stacked'
+      ? Math.max(1, ...columnTotals, goalLine?.value ?? 0)
+      : Math.max(1, ...series.flatMap((s) => vals(s)), goalLine?.value ?? 0);
+  const toneOf = (s: BarSeries, i: number) => s.tone ?? s.color ?? seriesColor(i);
+  const accentOf = (s: BarSeries, si: number, i: number) => s.accents?.[i] ?? toneOf(s, si);
+  const goalPct = goalLine !== undefined ? Math.min(100, (goalLine.value / max) * 100) : null;
+  return (
+    <div className="udb-barchart" style={{ height }}>
+      {goalLine !== undefined && goalPct !== null && (
+        <div
+          className="udb-barchart__goal"
+          style={{
+            bottom: `${goalPct}%`,
+            ...(goalLine.tone !== undefined ? { borderTopColor: goalLine.tone } : {}),
+          }}
+          title={goalLine.label ?? formatValue(goalLine.value)}
+          aria-hidden="true"
+        >
+          {goalLine.label !== undefined && (
+            <span
+              className="udb-barchart__goallabel"
+              style={
+                goalLine.tone !== undefined
+                  ? { color: goalLine.tone, borderColor: goalLine.tone }
+                  : undefined
+              }
+            >
+              {goalLine.label}
+            </span>
+          )}
+        </div>
+      )}
+      {labels.map((label, i) => (
+        <div
+          key={label}
+          className="udb-barchart__col"
+          onMouseEnter={() => setHover(i)}
+          onMouseLeave={() => setHover(null)}
+        >
+          {stacking === 'stacked' ? (
+            <div className="udb-barchart__bars udb-barchart__bars--stacked">
+              {series.map((s, si) => {
+                const v = vals(s)[i] ?? 0;
+                return (
+                  <div
+                    key={s.key ?? s.label}
+                    className="udb-barchart__bar"
+                    style={{
+                      height: `${(v / max) * 100}%`,
+                      background: accentOf(s, si, i),
+                      opacity: hover === null || hover === i ? 1 : 0.4,
+                      ...(v === 0 ? { minHeight: 0 } : {}),
+                    }}
+                  />
+                );
+              })}
+            </div>
+          ) : (
+            <div className="udb-barchart__bars">
+              {series.map((s, si) => (
+                <div
+                  key={s.key ?? s.label}
+                  className="udb-barchart__bar"
+                  style={{
+                    height: `${Math.max(2, ((vals(s)[i] ?? 0) / max) * 100)}%`,
+                    background: accentOf(s, si, i),
+                    opacity: hover === null || hover === i ? 1 : 0.4,
+                  }}
+                />
+              ))}
+            </div>
+          )}
+          {hover === i && (
+            <div className="udb-barchart__tip">
+              <div className="udb-barchart__tiptitle">{formatLabel(label)}</div>
+              {series.map((s, si) => (
+                <div key={s.key ?? s.label} className="udb-barchart__tiprow">
+                  <span className="udb-barchart__tiplabel">
+                    <span className="udb-chartlegend__dot" style={{ background: accentOf(s, si, i) }} />
+                    {s.label}
+                  </span>
+                  <b>{formatValue(vals(s)[i] ?? 0)}</b>
+                </div>
+              ))}
+              {stacking === 'stacked' && (
+                <div className="udb-barchart__tiprow udb-barchart__tiprow--total">
+                  <span className="udb-barchart__tiplabel">
+                    <b>{totalLabel}</b>
+                  </span>
+                  <b>{formatValue(columnTotals[i] ?? 0)}</b>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/presentation/organisms/charts/ChartCard.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import type { TipState } from './utils';
+import { ChartTip } from './ChartTip';
+
+export interface ChartCardProps {
+  title: string;
+  subtitle?: string;
+  legend?: ReactNode;
+  actions?: ReactNode;
+  children: ReactNode;
+  tip: TipState | null;
+  hostRef?: React.Ref<HTMLDivElement>;
+  onMouseLeave?: () => void;
+  bare?: boolean;
+  className?: string;
+}
+
+export function ChartCard({ title, subtitle, legend, actions, children, tip, hostRef, onMouseLeave, bare, className }: ChartCardProps) {
+  return (
+    <div className={['udb-chartcard', className].filter(Boolean).join(' ')}>
+      <div className="udb-chartcard__head">
+        <div className="udb-chartcard__heading">
+          <div className="udb-chartcard__title">{title}</div>
+          {subtitle && <div className="udb-chartcard__sub">{subtitle}</div>}
+        </div>
+        <div className="udb-chartcard__tools">
+          {legend}
+          {actions}
+        </div>
+      </div>
+      <div className="udb-chartcard__body" style={bare ? { padding: 0 } : undefined}>
+        <div ref={hostRef} className="udb-chartcard__plot" onMouseLeave={onMouseLeave}>
+          {children}
+          {tip && <ChartTip tip={tip} />}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/presentation/organisms/charts/ChartTip.tsx

@@ -0,0 +1,18 @@
+import type { TipState } from './utils';
+
+export function ChartTip({ tip }: { tip: TipState }) {
+  return (
+    <div className="udb-charttip" style={{ left: tip.x, top: tip.y }}>
+      <div className="udb-charttip__title">{tip.title}</div>
+      {tip.rows.map((r, i) => (
+        <div key={i} className="udb-charttip__row">
+          <span className="udb-charttip__label">
+            {r.color && <span className="udb-chartlegend__dot" style={{ background: r.color }} />}
+            {r.label}
+          </span>
+          <b>{r.value}</b>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/presentation/organisms/charts/Donut.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import { seriesColor } from './utils';
+
+export interface DonutSegment {
+  label: string;
+  value: number;
+  tone?: string;
+  color?: string;
+}
+
+export interface DonutProps {
+  segments: DonutSegment[];
+  size?: number;
+  thickness?: number;
+  centerValue?: string;
+  centerLabel?: string;
+  formatValue?: (v: number) => string;
+}
+
+export function Donut({
+  segments,
+  size = 148,
+  thickness = 18,
+  centerValue,
+  centerLabel,
+  formatValue = (v: number) => String(v),
+}: DonutProps) {
+  const [active, setActive] = useState<number | null>(null);
+  const total = segments.reduce((sum, seg) => sum + seg.value, 0) || 1;
+  const radius = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+
+  const slices = segments.map((seg, i) => {
+    const dash = (seg.value / total) * circumference;
+    const offset = segments
+      .slice(0, i)
+      .reduce((sum, prev) => sum + (prev.value / total) * circumference, 0);
+    return { seg, i, dash, offset };
+  });
+
+  return (
+    <div className="udb-donut">
+      <div className="udb-donut__wrap" style={{ width: size, height: size }}>
+        <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            fill="none"
+            stroke="var(--color-muted)"
+            strokeWidth={thickness}
+          />
+          {slices.map(({ seg, i, dash, offset }) => (
+            <circle
+              key={seg.label}
+              cx={size / 2}
+              cy={size / 2}
+              r={radius}
+              fill="none"
+              stroke={seg.tone ?? seg.color ?? seriesColor(i)}
+              strokeWidth={active === i ? thickness + 3 : thickness}
+              strokeDasharray={`${dash} ${circumference - dash}`}
+              strokeDashoffset={-offset}
+              strokeLinecap="butt"
+              opacity={active === null || active === i ? 1 : 0.35}
+              className="udb-donut__seg"
+              onMouseEnter={() => setActive(i)}
+              onMouseLeave={() => setActive(null)}
+            />
+          ))}
+        </svg>
+        <div className="udb-donut__center">
+          <span className="udb-donut__value">
+            {active !== null ? formatValue(segments[active]!.value) : centerValue}
+          </span>
+          <span className="udb-donut__label">{active !== null ? segments[active]!.label : centerLabel}</span>
+        </div>
+      </div>
+      <div className="udb-donut__list">
+        {segments.map((seg, i) => (
+          <div
+            key={seg.label}
+            className="udb-donut__item"
+            onMouseEnter={() => setActive(i)}
+            onMouseLeave={() => setActive(null)}
+          >
+            <span className="udb-donut__itemlabel">
+              <span className="udb-donut__dot" style={{ background: seg.tone ?? seg.color ?? seriesColor(i) }} />
+              {seg.label}
+            </span>
+            <span className="udb-donut__itemvalue">
+              {formatValue(seg.value)}
+              <span className="udb-donut__pct">{Math.round((seg.value / total) * 100)}%</span>
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/presentation/organisms/charts/HBars.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+
+export interface HBarRow {
+  label: ReactNode;
+  sub?: ReactNode;
+  value: number;
+  tone?: string;
+}
+
+export function HBars({ rows, formatValue = (n: number) => String(n) }: { rows: HBarRow[]; formatValue?: (n: number) => string }) {
+  const max = Math.max(1, ...rows.map((r) => r.value));
+  return (
+    <div className="udb-hbars">
+      {rows.map((r, i) => (
+        <div key={i} className="udb-hbars__row">
+          <div className="udb-hbars__label">
+            <div className="udb-hbars__name">{r.label}</div>
+            {r.sub && <div className="udb-hbars__sub">{r.sub}</div>}
+          </div>
+          <div className="udb-hbars__track">
+            <div
+              className="udb-hbars__fill"
+              style={{ width: `${(r.value / max) * 100}%`, ...(r.tone ? { background: r.tone } : {}) }}
+            />
+          </div>
+          <span className="udb-hbars__value">{formatValue(r.value)}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/presentation/organisms/charts/Legend.tsx

@@ -0,0 +1,21 @@
+export interface LegendItem {
+  label: string;
+  color: string;
+  value?: string;
+  hint?: string;
+}
+
+export function Legend({ items }: { items: LegendItem[] }) {
+  return (
+    <div className="udb-chartlegend">
+      {items.map((i) => (
+        <span key={i.label} className="udb-chartlegend__item">
+          <span className="udb-chartlegend__dot" style={{ background: i.color }} />
+          {i.label}
+          {i.value && <span className="udb-chartlegend__value">{i.value}</span>}
+          {i.hint && <span className="udb-chartlegend__hint">{i.hint}</span>}
+        </span>
+      ))}
+    </div>
+  );
+}

package/src/presentation/organisms/charts/LineChart.tsx

@@ -0,0 +1,244 @@
+import { useId, useMemo, useState } from 'react';
+import { gridTicks, niceMax, seriesColor } from './utils';
+import { Legend } from './Legend';
+
+export interface LineSeries {
+  key?: string;
+  label: string;
+  values?: readonly number[];
+  data?: readonly number[];
+  tone?: string;
+  color?: string;
+  kind?: 'line' | 'bars';
+  axis?: 'left' | 'right';
+  dashed?: boolean;
+  area?: boolean;
+  areaFill?: 'flat' | 'gradient';
+}
+
+export interface LineChartPoint {
+  label: string;
+}
+
+export interface LineChartProps {
+  points?: readonly LineChartPoint[];
+  labels?: readonly string[];
+  series: LineSeries[];
+  band?: { from: number; to: number };
+  height?: number;
+  formatLeft?: (v: number) => string;
+  formatRight?: (v: number) => string;
+  formatValue?: (v: number) => string;
+  yLabelLeft?: string;
+  yLabelRight?: string;
+}
+
+export function LineChart({
+  points,
+  labels,
+  series,
+  band,
+  height = 220,
+  formatLeft,
+  formatRight,
+  formatValue,
+  yLabelLeft,
+  yLabelRight,
+}: LineChartProps) {
+  const [hover, setHover] = useState<number | null>(null);
+  const uid = useId();
+  const pts = points ?? (labels ?? []).map((label) => ({ label }));
+  const fmtLeft = formatLeft ?? formatValue ?? ((v: number) => String(Math.round(v)));
+  const fmtRight = formatRight ?? formatValue ?? ((v: number) => String(Math.round(v)));
+  const vals = (s: LineSeries) => s.values ?? s.data ?? [];
+  const w = 720;
+  const padLeft = 52;
+  const padRight = series.some((s) => s.axis === 'right') ? 46 : 14;
+  const padTop = 12;
+  const padBottom = 24;
+  const innerW = w - padLeft - padRight;
+  const innerH = height - padTop - padBottom;
+  const n = pts.length;
+
+  const toneOf = (s: LineSeries, i: number) => s.tone ?? s.color ?? seriesColor(i);
+
+  const leftMax = useMemo(
+    () => niceMax(Math.max(1, ...series.filter((s) => s.axis !== 'right').flatMap((s) => vals(s)), ...(band ? [band.from, band.to] : []))),
+    [series, band],
+  );
+  const rightMax = useMemo(
+    () => niceMax(Math.max(1, ...series.filter((s) => s.axis === 'right').flatMap((s) => vals(s)))),
+    [series],
+  );
+  const leftTicks = useMemo(() => gridTicks(Math.max(...series.filter((s) => s.axis !== 'right').flatMap((s) => vals(s)), ...(band ? [band.from, band.to] : []), 1)), [series, band]);
+
+  const xAt = (i: number) => padLeft + (n <= 1 ? innerW / 2 : (i / (n - 1)) * innerW);
+  const yLeft = (v: number) => padTop + innerH - (v / leftMax) * innerH;
+  const yRight = (v: number) => padTop + innerH - (v / rightMax) * innerH;
+  const labelEvery = Math.max(1, Math.ceil(n / 8));
+
+  if (n === 0) return null;
+
+  return (
+    <div className="udb-linechart">
+      <svg
+        viewBox={`0 0 ${w} ${height}`}
+        className="udb-linechart__svg"
+        style={{ height }}
+        onMouseLeave={() => setHover(null)}
+        onMouseMove={(e) => {
+          const rect = e.currentTarget.getBoundingClientRect();
+          const x = ((e.clientX - rect.left) / rect.width) * w;
+          const idx = Math.round(((x - padLeft) / innerW) * (n - 1));
+          setHover(Math.max(0, Math.min(n - 1, idx)));
+        }}
+      >
+        {leftTicks.map((v, i) => (
+          <g key={i}>
+            <line x1={padLeft} x2={w - padRight} y1={yLeft(v)} y2={yLeft(v)} className="udb-linechart__grid" />
+            <text x={padLeft - 6} y={yLeft(v) + 3} textAnchor="end" className="udb-linechart__axis">
+              {fmtLeft(v)}
+            </text>
+          </g>
+        ))}
+        {band && (
+          <rect
+            x={padLeft}
+            y={yLeft(band.to)}
+            width={innerW}
+            height={Math.max(0, yLeft(band.from) - yLeft(band.to))}
+            rx={2}
+            className="udb-linechart__band"
+          />
+        )}
+        {series.some((s) => s.axis === 'right') && (
+          <g>
+            {leftTicks.map((v, i) => (
+              <text key={i} x={w - padRight + 6} y={yLeft(v) + 3} textAnchor="start" className="udb-linechart__axis">
+                {fmtRight((v / leftMax) * rightMax)}
+              </text>
+            ))}
+          </g>
+        )}
+        {pts.map((p, i) =>
+          i % labelEvery === 0 ? (
+            <text key={i} x={xAt(i)} y={height - 8} textAnchor="middle" className="udb-linechart__axis">
+              {p.label}
+            </text>
+          ) : null,
+        )}
+        {series.map((s, si) => {
+          const yFn = s.axis === 'right' ? yRight : yLeft;
+          if (s.kind === 'bars') {
+            const barW = Math.max(3, (innerW / Math.max(1, n - 1)) * 0.5);
+            return (
+              <g key={s.key ?? s.label}>
+                {vals(s).slice(0, n).map((v, i) => (
+                  <rect
+                    key={i}
+                    x={xAt(i) - barW / 2}
+                    y={yFn(v)}
+                    width={barW}
+                    height={Math.max(0, padTop + innerH - yFn(v))}
+                    rx={1.5}
+                    fill={toneOf(s, si)}
+                    opacity={hover === null || hover === i ? 0.85 : 0.35}
+                  />
+                ))}
+              </g>
+            );
+          }
+          const path = vals(s)
+            .slice(0, n)
+            .map((v, i) => `${i === 0 ? 'M' : 'L'}${xAt(i).toFixed(1)},${yFn(v).toFixed(1)}`)
+            .join(' ');
+          const areaPath = `${path} L${xAt(n - 1).toFixed(1)},${padTop + innerH} L${xAt(0).toFixed(1)},${padTop + innerH} Z`;
+          const gradId = `lc${uid}-${si}`;
+          const showArea = s.area !== false && !s.dashed;
+          return (
+            <g key={s.key ?? s.label}>
+              {showArea &&
+                (s.areaFill === 'gradient' ? (
+                  <defs>
+                    <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="0%" stopColor={toneOf(s, si)} stopOpacity="0.28" />
+                      <stop offset="100%" stopColor={toneOf(s, si)} stopOpacity="0" />
+                    </linearGradient>
+                  </defs>
+                ) : null)}
+              {showArea &&
+                (s.areaFill === 'gradient' ? (
+                  <path d={areaPath} fill={`url(#${gradId})`} />
+                ) : (
+                  <path d={areaPath} fill={toneOf(s, si)} opacity={0.07} />
+                ))}
+              <path
+                d={path}
+                fill="none"
+                stroke={toneOf(s, si)}
+                strokeWidth={2}
+                strokeLinejoin="round"
+                strokeLinecap="round"
+                strokeDasharray={s.dashed ? '4 4' : undefined}
+              />
+              {vals(s).slice(0, n).map((v, i) => (
+                <circle
+                  key={i}
+                  cx={xAt(i)}
+                  cy={yFn(v)}
+                  r={hover === i ? 3.4 : 0}
+                  fill="var(--color-card)"
+                  stroke={toneOf(s, si)}
+                  strokeWidth={2}
+                />
+              ))}
+            </g>
+          );
+        })}
+        {hover !== null && (
+          <line
+            x1={xAt(hover)}
+            x2={xAt(hover)}
+            y1={padTop}
+            y2={padTop + innerH}
+            className="udb-linechart__crosshair"
+          />
+        )}
+        {yLabelLeft && (
+          <text x={4} y={10} className="udb-linechart__axis">
+            {yLabelLeft}
+          </text>
+        )}
+        {yLabelRight && (
+          <text x={w - 4} y={10} textAnchor="end" className="udb-linechart__axis">
+            {yLabelRight}
+          </text>
+        )}
+      </svg>
+
+      {hover !== null && (
+        <div
+          className="udb-linechart__tip"
+          style={{
+            left: `${(xAt(hover) / w) * 100}%`,
+            transform: hover > n / 2 ? 'translateX(calc(-100% - 10px))' : 'translateX(10px)',
+          }}
+        >
+          <div className="udb-linechart__tiptitle">{pts[hover]!.label}</div>
+          {series.map((s, si) => (
+            <div key={s.key ?? s.label} className="udb-linechart__tiprow">
+              <span>
+                <span className="udb-linechart__swatch" style={{ background: toneOf(s, si) }} />
+                {s.label}
+              </span>
+              <b>{(s.axis === 'right' ? fmtRight : fmtLeft)(vals(s)[hover] ?? 0)}</b>
+            </div>
+          ))}
+        </div>
+      )}
+      <div className="udb-linechart__legendhost">
+        <Legend items={series.map((s, si) => ({ label: s.label, color: toneOf(s, si) }))} />
+      </div>
+    </div>
+  );
+}

package/src/presentation/organisms/charts/Sparkline.tsx

@@ -0,0 +1,35 @@
+import { useId } from 'react';
+
+export function Sparkline({
+  data,
+  height = 34,
+  width = 110,
+  color = 'currentColor',
+}: {
+  data: readonly number[];
+  height?: number;
+  width?: number;
+  color?: string;
+}) {
+  const id = useId();
+  if (data.length < 2) return null;
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const span = max - min || 1;
+  const pts = data.map((v, i) => [(i / (data.length - 1)) * width, height - 3 - ((v - min) / span) * (height - 8)]);
+  const line = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0]!.toFixed(1)},${p[1]!.toFixed(1)}`).join(' ');
+  const area = `${line} L${width},${height} L0,${height} Z`;
+  return (
+    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden>
+      <defs>
+        <linearGradient id={`sp${id}`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={color} stopOpacity="0.28" />
+          <stop offset="100%" stopColor={color} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <path d={area} fill={`url(#sp${id})`} />
+      <path d={line} fill="none" stroke={color} strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round" />
+      <circle cx={pts.at(-1)![0]} cy={pts.at(-1)![1]} r="2.4" fill={color} />
+    </svg>
+  );
+}

package/src/presentation/organisms/charts/index.ts

@@ -0,0 +1,17 @@
+export { ChartTip } from './ChartTip';
+export { ChartCard } from './ChartCard';
+export type { ChartCardProps } from './ChartCard';
+export { Legend } from './Legend';
+export type { LegendItem } from './Legend';
+export { Sparkline } from './Sparkline';
+export { HBars } from './HBars';
+export type { HBarRow } from './HBars';
+export { BarChart } from './BarChart';
+export type { BarSeries, BarChartGoalLine, BarChartProps } from './BarChart';
+export { Donut } from './Donut';
+export type { DonutSegment, DonutProps } from './Donut';
+export { LineChart } from './LineChart';
+export type { LineSeries, LineChartPoint, LineChartProps } from './LineChart';
+export { ActivityHeatmap } from './ActivityHeatmap';
+export type { HeatmapCell, ActivityHeatmapProps } from './ActivityHeatmap';
+export * from './utils';