@umituz/web-dashboard 6.2.1 → 6.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "6.2.1",
+  "version": "6.4.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",
@@ -10,35 +10,36 @@
   ],
   "exports": {
     ".": "./src/index.ts",
-    "./styles.css": "./src/styles/dashboard.css",
-    "./permissions": "./src/domains/permissions/index.ts",
-    "./modules": "./src/domains/modules/index.ts",
-    "./layouts": "./src/domains/layouts/index.ts",
-    "./layouts/components": "./src/domains/layouts/components/index.ts",
-    "./layouts/hooks": "./src/domains/layouts/hooks/index.ts",
-    "./layouts/utils": "./src/domains/layouts/utils/index.ts",
-    "./layouts/types": "./src/domains/layouts/types/index.ts",
-    "./layouts/theme": "./src/domains/layouts/theme/index.ts",
-    "./settings": "./src/domains/settings/index.ts",
-    "./settings/components": "./src/domains/settings/components/index.ts",
-    "./settings/hooks": "./src/domains/settings/hooks/index.ts",
-    "./settings/utils": "./src/domains/settings/utils/index.ts",
-    "./settings/types": "./src/domains/settings/types/index.ts",
     "./analytics": "./src/domains/analytics/index.ts",
     "./analytics/components": "./src/domains/analytics/components/index.ts",
     "./analytics/hooks": "./src/domains/analytics/hooks/index.ts",
-    "./analytics/utils": "./src/domains/analytics/utils/index.ts",
-    "./analytics/types": "./src/domains/analytics/types/index.ts",
     "./analytics/services": "./src/domains/analytics/services/index.ts",
+    "./analytics/types": "./src/domains/analytics/types/index.ts",
+    "./analytics/utils": "./src/domains/analytics/utils/index.ts",
     "./calendar": "./src/domains/calendar/index.ts",
-    "./calendar/types": "./src/domains/calendar/types/calendar.types.ts",
-    "./calendar/services": "./src/domains/calendar/services/index.ts",
     "./calendar/hooks": "./src/domains/calendar/hooks/index.ts",
+    "./calendar/services": "./src/domains/calendar/services/index.ts",
+    "./calendar/types": "./src/domains/calendar/types/calendar.types.ts",
     "./calendar/utils": "./src/domains/calendar/utils/index.ts",
+    "./charts": "./src/domains/charts/index.ts",
+    "./chrome.css": "./src/styles/chrome.css",
     "./config": "./src/config/index.ts",
+    "./layouts": "./src/domains/layouts/index.ts",
+    "./layouts/components": "./src/domains/layouts/components/index.ts",
+    "./layouts/hooks": "./src/domains/layouts/hooks/index.ts",
+    "./layouts/theme": "./src/domains/layouts/theme/index.ts",
+    "./layouts/types": "./src/domains/layouts/types/index.ts",
+    "./layouts/utils": "./src/domains/layouts/utils/index.ts",
+    "./modules": "./src/domains/modules/index.ts",
+    "./onboarding": "./src/domains/onboarding/index.ts",
     "./package.json": "./package.json",
-    "./charts": "./src/domains/charts/index.ts",
-    "./onboarding": "./src/domains/onboarding/index.ts"
+    "./permissions": "./src/domains/permissions/index.ts",
+    "./settings": "./src/domains/settings/index.ts",
+    "./settings/components": "./src/domains/settings/components/index.ts",
+    "./settings/hooks": "./src/domains/settings/hooks/index.ts",
+    "./settings/types": "./src/domains/settings/types/index.ts",
+    "./settings/utils": "./src/domains/settings/utils/index.ts",
+    "./styles.css": "./src/styles/dashboard.css"
   },
   "files": [
     "src",

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}