@umituz/web-dashboard 4.2.0 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "4.2.0",
+  "version": "4.4.0",
   "description": "Installable app skeleton for the fleet — layouts, auth, onboarding, analytics (dependency-free SVG charts), calendar, i18n injection, permissions/session/module registry; ships its own udb-* stylesheet and --u-* tokens",
   "type": "module",
   "main": "./src/index.ts",

package/src/domains/charts/components.test.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest';
+import { renderToString } from 'react-dom/server';
+import { BarChart, Donut, LineChart, Sparkline } from './components';
+
+describe('charts markup smoke', () => {
+  it('Sparkline renders an svg path for enough data and null for less', () => {
+    const html = renderToString(<Sparkline data={[1, 3, 2, 5]} />);
+    expect(html).toContain('<svg');
+    expect(html).toContain('<path');
+    expect(renderToString(<Sparkline data={[1]} />)).toBe('');
+  });
+
+  it('BarChart renders one column per datum with height proportional to value', () => {
+    const html = renderToString(
+      <BarChart data={[{ label: 'mon', value: 4 }, { label: 'tue', value: 8 }, { label: 'wed', value: 0, highlight: true }]} />,
+    );
+    expect(html.match(/udb-barchart__col/g)?.length).toBe(3);
+    expect(html).toContain('height:50%');
+    expect(html).toContain('height:100%');
+    expect(html).toContain('#c2410c');
+  });
+
+  it('Donut renders a segment circle per label with dash math and center fallback', () => {
+    const html = renderToString(
+      <Donut
+        segments={[
+          { label: 'a', value: 3, tone: '#111111' },
+          { label: 'b', value: 1, tone: '#222222' },
+        ]}
+        centerValue="4"
+        centerLabel="total"
+      />,
+    );
+    expect(html.match(/udb-donut__item(?![a-z])/g)?.length).toBe(2);
+    expect(html).toContain('75<!-- -->%');
+    expect(html).toContain('#111111');
+    expect(html).toContain('>total<');
+  });
+
+  it('LineChart renders series paths, grid lines and a legend entry per series', () => {
+    const html = renderToString(
+      <LineChart
+        points={[{ label: 'w1' }, { label: 'w2' }, { label: 'w3' }]}
+        series={[
+          { key: 's1', label: 'revenue', values: [2, 4, 8] },
+          { key: 's2', label: 'cost', values: [5, 3, 1], kind: 'bars', axis: 'right' },
+        ]}
+      />,
+    );
+    expect(html).toContain('udb-linechart__grid');
+    expect(html).toContain('revenue');
+    expect(html).toContain('cost');
+    expect(html.match(/<rect /g)?.length).toBe(3);
+    expect(html.match(/udb-chartlegend__dot/g)?.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('LineChart renders nothing without points', () => {
+    expect(renderToString(<LineChart points={[]} series={[]} />)).toBe('');
+  });
+});

package/src/domains/charts/components.tsx

@@ -1,5 +1,6 @@
+import { useId, useMemo, useState } from 'react';
 import type { ReactNode } from 'react';
-import type { TipState } from './utils';
+import { PALETTE, gridTicks, niceMax, type TipState } from './utils';
 
 export function ChartTip({ tip }: { tip: TipState }) {
   return (
@@ -72,3 +73,410 @@ export function Legend({ items }: { items: LegendItem[] }) {
     </div>
   );
 }
+
+export function Sparkline({
+  data,
+  height = 34,
+  width = 110,
+  color = 'currentColor',
+}: {
+  data: 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>
+  );
+}
+
+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>
+  );
+}
+
+export interface BarDatum {
+  label: string;
+  value: number;
+  tone?: string;
+  highlight?: boolean;
+}
+
+export function BarChart({
+  data,
+  height = 130,
+  tone = PALETTE[0]!,
+  highlightTone = '#c2410c',
+  formatValue = (v: number) => String(v),
+  formatLabel = (l: string) => l,
+}: {
+  data: BarDatum[];
+  height?: number;
+  tone?: string;
+  highlightTone?: string;
+  formatValue?: (v: number) => string;
+  formatLabel?: (l: string) => string;
+}) {
+  const [hover, setHover] = useState<number | null>(null);
+  const max = Math.max(1, ...data.map((d) => d.value));
+  return (
+    <div className="udb-barchart" style={{ height }}>
+      {data.map((d, i) => (
+        <div
+          key={i}
+          className="udb-barchart__col"
+          onMouseEnter={() => setHover(i)}
+          onMouseLeave={() => setHover(null)}
+        >
+          <div
+            className="udb-barchart__bar"
+            style={{
+              height: `${Math.max(2, (d.value / max) * 100)}%`,
+              background: d.highlight ? highlightTone : (d.tone ?? tone),
+              opacity: hover === null || hover === i ? 1 : 0.4,
+            }}
+          />
+          {hover === i && (
+            <div className="udb-barchart__tip">
+              <b>{formatValue(d.value)}</b>
+              {formatLabel(d.label)}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export interface DonutSegment {
+  label: string;
+  value: number;
+  tone?: string;
+}
+
+export function Donut({
+  segments,
+  size = 148,
+  thickness = 18,
+  centerValue,
+  centerLabel,
+  formatValue = (v: number) => String(v),
+}: {
+  segments: DonutSegment[];
+  size?: number;
+  thickness?: number;
+  centerValue?: string;
+  centerLabel?: string;
+  formatValue?: (v: number) => string;
+}) {
+  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;
+  let offset = 0;
+  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(--u-color-surface-muted)"
+            strokeWidth={thickness}
+          />
+          {segments.map((seg, i) => {
+            const dash = (seg.value / total) * circumference;
+            const el = (
+              <circle
+                key={seg.label}
+                cx={size / 2}
+                cy={size / 2}
+                r={radius}
+                fill="none"
+                stroke={seg.tone ?? PALETTE[i % PALETTE.length]!}
+                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)}
+              />
+            );
+            offset += dash;
+            return el;
+          })}
+        </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 ?? PALETTE[i % PALETTE.length]! }} />
+              {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>
+  );
+}
+
+export interface LineSeries {
+  key: string;
+  label: string;
+  values: number[];
+  tone?: string;
+  kind?: 'line' | 'bars';
+  axis?: 'left' | 'right';
+  dashed?: boolean;
+  area?: boolean;
+}
+
+export interface LineChartPoint {
+  label: string;
+}
+
+export function LineChart({
+  points,
+  series,
+  height = 220,
+  formatLeft = (v: number) => String(Math.round(v)),
+  formatRight = (v: number) => String(Math.round(v)),
+  yLabelLeft,
+  yLabelRight,
+}: {
+  points: LineChartPoint[];
+  series: LineSeries[];
+  height?: number;
+  formatLeft?: (v: number) => string;
+  formatRight?: (v: number) => string;
+  yLabelLeft?: string;
+  yLabelRight?: string;
+}) {
+  const [hover, setHover] = useState<number | null>(null);
+  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 = points.length;
+
+  const toneOf = (s: LineSeries, i: number) => s.tone ?? PALETTE[i % PALETTE.length]!;
+
+  const leftMax = useMemo(
+    () => niceMax(Math.max(1, ...series.filter((s) => s.axis !== 'right').flatMap((s) => s.values))),
+    [series],
+  );
+  const rightMax = useMemo(
+    () => niceMax(Math.max(1, ...series.filter((s) => s.axis === 'right').flatMap((s) => s.values))),
+    [series],
+  );
+  const leftTicks = useMemo(() => gridTicks(Math.max(...series.filter((s) => s.axis !== 'right').flatMap((s) => s.values), 1)), [series]);
+
+  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">
+              {formatLeft(v)}
+            </text>
+          </g>
+        ))}
+        {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">
+                {formatRight((v / leftMax) * rightMax)}
+              </text>
+            ))}
+          </g>
+        )}
+        {points.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.values.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 = s.values
+            .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`;
+          return (
+            <g key={s.key}>
+              {s.area !== false && !s.dashed && <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}
+              />
+              {s.values.slice(0, n).map((v, i) => (
+                <circle
+                  key={i}
+                  cx={xAt(i)}
+                  cy={yFn(v)}
+                  r={hover === i ? 3.4 : 0}
+                  fill="var(--u-color-surface)"
+                  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">{points[hover]!.label}</div>
+          {series.map((s, si) => (
+            <div key={s.key} className="udb-linechart__tiprow">
+              <span>
+                <span className="udb-linechart__swatch" style={{ background: toneOf(s, si) }} />
+                {s.label}
+              </span>
+              <b>{(s.axis === 'right' ? formatRight : formatLeft)(s.values[hover]!)}</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/domains/charts/index.ts

@@ -1,4 +1,12 @@
 export { PALETTE, useTip, niceMax, gridTicks } from './utils';
 export type { TipRow, TipState } from './utils';
-export { ChartTip, ChartCard, Legend } from './components';
-export type { ChartCardProps, LegendItem } from './components';
+export { ChartTip, ChartCard, Legend, Sparkline, HBars, BarChart, Donut, LineChart } from './components';
+export type {
+  ChartCardProps,
+  LegendItem,
+  HBarRow,
+  BarDatum,
+  DonutSegment,
+  LineSeries,
+  LineChartPoint,
+} from './components';

package/src/styles/dashboard.css

@@ -2857,3 +2857,267 @@
   align-items: center;
   gap: 5px;
 }
+
+.udb-hbars {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.udb-hbars__row {
+  display: grid;
+  grid-template-columns: minmax(120px, 1.2fr) 2fr auto;
+  align-items: center;
+  gap: 12px;
+}
+
+.udb-hbars__label {
+  min-width: 0;
+}
+
+.udb-hbars__name {
+  font-weight: 600;
+  font-size: var(--u-font-size-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--u-color-text);
+}
+
+.udb-hbars__sub {
+  font-size: var(--u-font-size-xs);
+  color: var(--u-color-muted);
+}
+
+.udb-hbars__track {
+  height: 8px;
+  background: var(--u-color-border);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.udb-hbars__fill {
+  height: 100%;
+  background: var(--u-color-primary);
+  border-radius: 999px;
+}
+
+.udb-hbars__value {
+  font-size: var(--u-font-size-sm);
+  color: var(--u-color-text);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.udb-barchart {
+  display: flex;
+  align-items: flex-end;
+  gap: 3px;
+  width: 100%;
+}
+
+.udb-barchart__col {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: flex-end;
+  min-width: 0;
+  height: 100%;
+}
+
+.udb-barchart__bar {
+  width: 100%;
+  min-height: 2px;
+  border-radius: 3px 3px 0 0;
+  transition: opacity 150ms ease, height 300ms ease;
+}
+
+.udb-barchart__tip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  z-index: 10;
+  padding: 4px 8px;
+  white-space: nowrap;
+  pointer-events: none;
+  border: 1px solid var(--u-color-border);
+  border-radius: var(--u-radius-sm);
+  background: var(--u-color-surface);
+  box-shadow: var(--u-shadow-sm);
+  font-size: var(--u-font-size-xs);
+  color: var(--u-color-muted);
+}
+
+.udb-barchart__tip b {
+  margin-right: 4px;
+  font-weight: var(--u-font-weight-medium);
+  color: var(--u-color-text);
+}
+
+.udb-donut {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.udb-donut__wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.udb-donut__seg {
+  cursor: pointer;
+  transition: stroke-width 150ms ease, opacity 150ms ease;
+}
+
+.udb-donut__center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.udb-donut__value {
+  font-size: var(--u-font-size-lg);
+  font-weight: var(--u-font-weight-bold);
+  color: var(--u-color-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.udb-donut__label {
+  margin-top: 2px;
+  font-size: var(--u-font-size-xs);
+  color: var(--u-color-muted);
+}
+
+.udb-donut__list {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.udb-donut__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 6px;
+  border-radius: var(--u-radius-sm);
+}
+
+.udb-donut__item:hover {
+  background: var(--u-color-surface-muted);
+}
+
+.udb-donut__itemlabel {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--u-font-size-sm);
+  color: var(--u-color-text);
+}
+
+.udb-donut__dot {
+  width: 8px;
+  height: 8px;
+  flex-shrink: 0;
+  border-radius: 3px;
+}
+
+.udb-donut__itemvalue {
+  flex-shrink: 0;
+  font-size: var(--u-font-size-sm);
+  font-weight: var(--u-font-weight-medium);
+  color: var(--u-color-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.udb-donut__pct {
+  margin-left: 6px;
+  color: var(--u-color-muted);
+}
+
+.udb-linechart {
+  position: relative;
+  width: 100%;
+  user-select: none;
+}
+
+.udb-linechart__svg {
+  display: block;
+  width: 100%;
+}
+
+.udb-linechart__axis {
+  fill: var(--u-color-muted);
+  font-size: var(--u-font-size-xs);
+  font-family: var(--u-font-sans);
+}
+
+.udb-linechart__grid {
+  stroke: var(--u-color-border);
+  stroke-width: 1;
+}
+
+.udb-linechart__crosshair {
+  stroke: var(--u-color-border-strong);
+  stroke-width: 1;
+  stroke-dasharray: 3 3;
+}
+
+.udb-linechart__tip {
+  position: absolute;
+  top: 8px;
+  z-index: 10;
+  min-width: 132px;
+  padding: 8px;
+  pointer-events: none;
+  border: 1px solid var(--u-color-border);
+  border-radius: var(--u-radius-md);
+  background: var(--u-color-surface);
+  box-shadow: var(--u-shadow-md);
+}
+
+.udb-linechart__tiptitle {
+  margin-bottom: 4px;
+  font-size: var(--u-font-size-xs);
+  color: var(--u-color-muted);
+}
+
+.udb-linechart__tiprow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: var(--u-font-size-sm);
+}
+
+.udb-linechart__tiprow span {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--u-color-muted);
+}
+
+.udb-linechart__tiprow b {
+  font-weight: var(--u-font-weight-medium);
+  color: var(--u-color-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.udb-linechart__swatch {
+  display: inline-block;
+  width: 12px;
+  height: 3px;
+  border-radius: 999px;
+}
+
+.udb-linechart__legendhost {
+  margin-top: 4px;
+  padding: 0 8px;
+}