@umituz/web-dashboard 6.2.0 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "Installable app skeleton for the fleet — layouts, analytics (dependency-free SVG charts), calendar, onboarding flow, i18n via @umituz/web-localization, permissions/module registry; udb-* stylesheet on design-system tokens",
   "type": "module",
   "main": "./src/index.ts",

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

@@ -86,6 +86,29 @@ describe('charts markup smoke', () => {
     expect(html).toContain('height:100%');
   });
 
+  it('BarChart renders a dashed goal line that counts toward max and clamps at 100%', () => {
+    const html = renderToString(
+      <BarChart
+        labels={['a', 'b']}
+        series={[{ label: 'A', values: [2, 4] }]}
+        goalLine={{ value: 4, label: 'goal 4', tone: '#111111' }}
+      />,
+    );
+    expect(html).toContain('udb-barchart__goal');
+    expect(html).toContain('bottom:100%');
+    expect(html).toContain('border-top-color:#111111');
+    expect(html).toContain('>goal 4<');
+
+    const above = renderToString(
+      <BarChart labels={['a']} series={[{ label: 'A', values: [2] }]} goalLine={{ value: 99 }} />,
+    );
+    expect(above).toContain('bottom:100%');
+    expect(above).not.toContain('udb-barchart__goallabel');
+
+    const without = renderToString(<BarChart labels={['a']} series={[{ label: 'A', values: [2] }]} />);
+    expect(without).not.toContain('udb-barchart__goal');
+  });
+
   it('fleet aliases: Legend renders hint suffix and Donut accepts color', () => {
     const html = renderToString(
       <>

package/src/domains/charts/components.tsx

@@ -149,25 +149,58 @@ export interface BarSeries {
   color?: string;
 }
 
+export interface BarChartGoalLine {
+  value: number;
+  label?: string;
+  tone?: string;
+}
+
 export function BarChart({
   labels,
   series,
   height = 130,
   formatValue = (v: number) => String(v),
   formatLabel = (l: string) => l,
+  goalLine,
 }: {
   labels: readonly string[];
   series: BarSeries[];
   height?: number;
   formatValue?: (v: number) => string;
   formatLabel?: (l: string) => string;
+  goalLine?: BarChartGoalLine;
 }) {
   const [hover, setHover] = useState<number | null>(null);
   const vals = (s: BarSeries) => s.values ?? s.data ?? [];
-  const max = Math.max(1, ...series.flatMap((s) => vals(s)));
+  const max = Math.max(1, ...series.flatMap((s) => vals(s)), goalLine?.value ?? 0);
   const toneOf = (s: BarSeries, i: number) => s.tone ?? s.color ?? PALETTE[i % PALETTE.length]!;
+  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}

package/src/styles/dashboard.css

@@ -704,7 +704,6 @@
 .udb-spin {
   animation: udb-spin 1s linear infinite;
 }
-}
 .udb-settings {
   display: flex;
   width: 100%;
@@ -1419,11 +1418,32 @@
   font-variant-numeric: tabular-nums;
 }
 .udb-barchart {
+  position: relative;
   display: flex;
   align-items: flex-end;
   gap: 3px;
   width: 100%;
 }
+.udb-barchart__goal {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 5;
+  pointer-events: none;
+  border-top: 1.5px dashed var(--udb-chart-goal, #d97706);
+}
+.udb-barchart__goallabel {
+  position: absolute;
+  right: 0;
+  bottom: 2px;
+  padding: 0 4px;
+  border: 1px solid var(--udb-chart-goal, #d97706);
+  border-radius: var(--udb-radius-pill);
+  background: var(--color-card);
+  font-size: var(--udb-font-size-xs);
+  line-height: 16px;
+  color: var(--udb-chart-goal, #d97706);
+}
 .udb-barchart__col {
   position: relative;
   display: flex;