@umituz/web-dashboard 4.2.0 → 4.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "4.2.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",
+  "version": "4.3.0",
+  "description": "Installable app skeleton for the fleet \u2014 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",
   "types": "./src/index.ts",

package/src/domains/charts/components.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import type { ReactNode } from 'react';
 import type { TipState } from './utils';
 
@@ -72,3 +73,67 @@ 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>
+  );
+}

package/src/domains/charts/index.ts

@@ -1,4 +1,4 @@
 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 } from './components';
+export type { ChartCardProps, LegendItem, HBarRow } from './components';

package/src/styles/dashboard.css

@@ -2857,3 +2857,54 @@
   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;
+}