@umituz/web-design-system 6.0.2 → 6.1.0

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';

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

@@ -0,0 +1,57 @@
+import { useRef, useState } from 'react';
+
+export const PALETTE = ['#357344', '#b06e22', '#3e5f80', '#7a6ba8', '#8a5a3b', '#5e7d5a', '#a8b5a0', '#c9862f'];
+
+export const SERIES_COLORS = [
+  'var(--udb-chart-1, #357344)',
+  'var(--udb-chart-2, #b06e22)',
+  'var(--udb-chart-3, #3e5f80)',
+  'var(--udb-chart-4, #7a6ba8)',
+  'var(--udb-chart-5, #8a5a3b)',
+  'var(--udb-chart-6, #5e7d5a)',
+  'var(--udb-chart-7, #a8b5a0)',
+  'var(--udb-chart-8, #c9862f)',
+] as const;
+
+export function seriesColor(index: number): string {
+  return SERIES_COLORS[index % SERIES_COLORS.length]!;
+}
+
+export interface TipRow {
+  label: string;
+  value: string;
+  color?: string;
+}
+
+export interface TipState {
+  x: number;
+  y: number;
+  title: string;
+  rows: TipRow[];
+}
+
+export function useTip() {
+  const [tip, setTip] = useState<TipState | null>(null);
+  const hostRef = useRef<HTMLDivElement>(null);
+  const show = (e: React.MouseEvent, title: string, rows: TipRow[]) => {
+    const rect = hostRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    setTip({ x: e.clientX - rect.left, y: e.clientY - rect.top, title, rows });
+  };
+  const hide = () => setTip(null);
+  return { tip, hostRef, show, hide };
+}
+
+export function niceMax(max: number): number {
+  if (max <= 0) return 1;
+  const exp = Math.floor(Math.log10(max));
+  const base = Math.pow(10, exp);
+  const frac = max / base;
+  const nice = frac <= 1 ? 1 : frac <= 2 ? 2 : frac <= 2.5 ? 2.5 : frac <= 5 ? 5 : 10;
+  return nice * base;
+}
+
+export function gridTicks(max: number, count = 4): number[] {
+  const nice = niceMax(max);
+  return Array.from({ length: count + 1 }, (_, i) => (nice / count) * i);
+}

package/src/presentation/organisms/index.ts

@@ -185,3 +185,9 @@ export type { StatsGridProps, StatItem } from './StatsGrid';
 
 export { DescriptionList } from './DescriptionList';
 export type { DescriptionListProps, DescriptionItem } from './DescriptionList';
+
+export { AuditLogList } from './AuditLogList';
+export type { AuditLogListProps, AuditEntry } from './AuditLogList';
+
+// Visual Data Visualization & Charts
+export * from './charts';