@umituz/web-dashboard 4.4.0 → 4.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "4.4.0",
+  "version": "4.5.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

@@ -10,14 +10,21 @@ describe('charts markup smoke', () => {
     expect(renderToString(<Sparkline data={[1]} />)).toBe('');
   });
 
-  it('BarChart renders one column per datum with height proportional to value', () => {
+  it('BarChart renders one grouped column per label with one bar per series', () => {
     const html = renderToString(
-      <BarChart data={[{ label: 'mon', value: 4 }, { label: 'tue', value: 8 }, { label: 'wed', value: 0, highlight: true }]} />,
+      <BarChart
+        labels={['mon', 'tue', 'wed']}
+        series={[
+          { key: 'a', label: 'A', values: [4, 8, 0] },
+          { key: 'b', label: 'B', values: [2, 4, 6], tone: '#111111' },
+        ]}
+      />,
     );
-    expect(html.match(/udb-barchart__col/g)?.length).toBe(3);
-    expect(html).toContain('height:50%');
+    expect(html.match(/udb-barchart__col(?![a-z])/g)?.length).toBe(3);
+    expect(html.match(/udb-barchart__bar(?![a-z_])/g)?.length).toBe(6);
     expect(html).toContain('height:100%');
-    expect(html).toContain('#c2410c');
+    expect(html).toContain('height:50%');
+    expect(html).toContain('#111111');
   });
 
   it('Donut renders a segment circle per label with dash math and center fallback', () => {

package/src/domains/charts/components.tsx

@@ -138,51 +138,63 @@ export function HBars({ rows, formatValue = (n: number) => String(n) }: { rows:
   );
 }
 
-export interface BarDatum {
+export interface BarSeries {
+  key: string;
   label: string;
-  value: number;
+  values: number[];
   tone?: string;
-  highlight?: boolean;
 }
 
 export function BarChart({
-  data,
+  labels,
+  series,
   height = 130,
-  tone = PALETTE[0]!,
-  highlightTone = '#c2410c',
   formatValue = (v: number) => String(v),
   formatLabel = (l: string) => l,
 }: {
-  data: BarDatum[];
+  labels: string[];
+  series: BarSeries[];
   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));
+  const max = Math.max(1, ...series.flatMap((s) => [...s.values]));
+  const toneOf = (s: BarSeries, i: number) => s.tone ?? PALETTE[i % PALETTE.length]!;
   return (
     <div className="udb-barchart" style={{ height }}>
-      {data.map((d, i) => (
+      {labels.map((label, i) => (
         <div
-          key={i}
+          key={label}
           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,
-            }}
-          />
+          <div className="udb-barchart__bars">
+            {series.map((s, si) => (
+              <div
+                key={s.key}
+                className="udb-barchart__bar"
+                style={{
+                  height: `${Math.max(2, ((s.values[i] ?? 0) / max) * 100)}%`,
+                  background: toneOf(s, si),
+                  opacity: hover === null || hover === i ? 1 : 0.4,
+                }}
+              />
+            ))}
+          </div>
           {hover === i && (
             <div className="udb-barchart__tip">
-              <b>{formatValue(d.value)}</b>
-              {formatLabel(d.label)}
+              <div className="udb-barchart__tiptitle">{formatLabel(label)}</div>
+              {series.map((s, si) => (
+                <div key={s.key} className="udb-barchart__tiprow">
+                  <span className="udb-barchart__tiplabel">
+                    <span className="udb-chartlegend__dot" style={{ background: toneOf(s, si) }} />
+                    {s.label}
+                  </span>
+                  <b>{formatValue(s.values[i] ?? 0)}</b>
+                </div>
+              ))}
             </div>
           )}
         </div>

package/src/domains/charts/index.ts

@@ -5,7 +5,7 @@ export type {
   ChartCardProps,
   LegendItem,
   HBarRow,
-  BarDatum,
+  BarSeries,
   DonutSegment,
   LineSeries,
   LineChartPoint,

package/src/styles/dashboard.css

@@ -2925,6 +2925,20 @@
   height: 100%;
 }
 
+.udb-barchart__bars {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 2px;
+  width: 100%;
+  height: 100%;
+}
+
+.udb-barchart__bars .udb-barchart__bar {
+  flex: 1;
+  width: auto;
+}
+
 .udb-barchart__bar {
   width: 100%;
   min-height: 2px;
@@ -2948,6 +2962,24 @@
   color: var(--u-color-muted);
 }
 
+.udb-barchart__tiptitle {
+  font-weight: var(--u-font-weight-medium);
+  color: var(--u-color-text);
+}
+
+.udb-barchart__tiprow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.udb-barchart__tiplabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
 .udb-barchart__tip b {
   margin-right: 4px;
   font-weight: var(--u-font-weight-medium);