npm - @burdenoff/microfe-bigconsole - Versions diffs - 2026.805.3 → 2026.812.2 - Mend

@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (247) hide show

package/dist/bigconsole/components/widgets/gauge/GaugeWidget.js CHANGED Viewed

@@ -4,27 +4,56 @@ import { unwrapRows as n } from "../utils/inferFields.js";
 import { memo as r, useCallback as i, useMemo as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/gauge/GaugeWidget.tsx
-var c = [
+var c = {
+	success: "var(--color-status-success-bg)",
+	warning: "var(--color-status-warning-bg)",
+	error: "var(--color-status-error-bg)"
+}, l = {
+	red: "error",
+	"#ef4444": "error",
+	"#dc2626": "error",
+	yellow: "warning",
+	amber: "warning",
+	orange: "warning",
+	"#f59e0b": "warning",
+	"#eab308": "warning",
+	green: "success",
+	"#22c55e": "success",
+	"#059669": "success"
+};
+function u(e) {
+	return e in c;
+}
+function d(e) {
+	return /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(e) || /^(rgb|rgba|hsl|hsla|color|oklch|lab)\(/i.test(e);
+}
+function f(e) {
+	let t = e.trim().toLowerCase();
+	if (u(t)) return c[t];
+	let n = l[t];
+	return n ? c[n] : t.startsWith("var(") || d(t) ? e : "var(--color-action-primary-bg)";
+}
+var p = [
 	{
 		value: 33,
-		color: "var(--color-state-error)"
+		color: c.error
 	},
 	{
 		value: 66,
-		color: "var(--color-state-warning)"
+		color: c.warning
 	},
 	{
 		value: 100,
-		color: "var(--color-state-success)"
+		color: c.success
 	}
 ];
-function l(e) {
+function m(e) {
 	return e?.thresholds?.length ? e.thresholds.map((e) => ({
 		value: e.value,
-		color: e.color === "success" ? "var(--color-state-success)" : e.color === "warning" ? "var(--color-state-warning)" : e.color === "error" ? "var(--color-state-error)" : e.color
-	})) : c;
+		color: f(e.color)
+	})) : p;
 }
-function u(e, t) {
+function h(e, t) {
 	switch (t?.format || "number") {
 		case "percentage": return `${e.toFixed(0)}%`;
 		case "currency": return new Intl.NumberFormat("en-US", {
@@ -35,8 +64,8 @@ function u(e, t) {
 		default: return new Intl.NumberFormat("en-US", { maximumFractionDigits: t?.decimals || 0 }).format(e);
 	}
 }
-var d = r(function({ widget: r, data: c, onClick: d, onDrilldown: f }) {
-	let p = r.config, m = a(() => l(p), [p]), h = i((e) => u(e, p), [p]), g = !!r.drilldown?.enabled, _ = p?.variant === "linear", v = a(() => {
+var g = r(function({ widget: r, data: c, onClick: l, onDrilldown: u }) {
+	let d = r.config, f = a(() => m(d), [d]), p = i((e) => h(e, d), [d]), g = !!r.drilldown?.enabled, _ = d?.variant === "linear", v = a(() => {
 		if (!c) return null;
 		if (c && typeof c == "object" && !Array.isArray(c)) {
 			let e = c;
@@ -50,7 +79,7 @@ var d = r(function({ widget: r, data: c, onClick: d, onDrilldown: f }) {
 				r && r.length > 0 && (e = r);
 			}
 		}
-		let t = p?.valueField || p?.value_field || "value";
+		let t = d?.valueField || d?.value_field || "value";
 		if (Array.isArray(e) && e.length > 0) {
 			let n = e[0];
 			if (typeof n[t] == "number") return {
@@ -122,21 +151,21 @@ var d = r(function({ widget: r, data: c, onClick: d, onDrilldown: f }) {
 			if (!isNaN(t)) return { value: t };
 		}
 		return null;
-	}, [c, p]), y = i(() => {
-		f && v ? f({
+	}, [c, d]), y = i(() => {
+		u && v ? u({
 			value: v.value,
 			label: v.label,
-			min: p?.min,
-			max: p?.max
-		}) : d && r.drilldowns?.length && d();
+			min: d?.min,
+			max: d?.max
+		}) : l && r.drilldowns?.length && l();
 	}, [
-		d,
-		f,
+		l,
+		u,
 		r.drilldowns,
 		v,
-		p?.min,
-		p?.max
-	]), b = !!(g || d && r.drilldowns?.length);
+		d?.min,
+		d?.max
+	]), b = !!(g || l && r.drilldowns?.length);
 	return v ? /* @__PURE__ */ s("div", {
 		className: `
         flex flex-col items-center justify-center h-full p-4
@@ -157,20 +186,20 @@ var d = r(function({ widget: r, data: c, onClick: d, onDrilldown: f }) {
 				className: `${_ ? "w-full max-w-xs" : ""}`,
 				children: _ ? /* @__PURE__ */ o(t, {
 					value: v.value,
-					min: p?.min,
-					max: p?.max,
-					thresholds: m,
-					unit: p?.unit,
-					formatValue: h,
-					showZones: p?.showZones
+					min: d?.min,
+					max: d?.max,
+					thresholds: f,
+					unit: d?.unit,
+					formatValue: p,
+					showZones: d?.showZones
 				}) : /* @__PURE__ */ o(e, {
 					value: v.value,
-					min: p?.min,
-					max: p?.max,
-					thresholds: m,
-					unit: p?.unit,
-					formatValue: h,
-					size: p?.size === "sm" ? 100 : p?.size === "md" ? 140 : p?.size === "lg" ? 180 : 140
+					min: d?.min,
+					max: d?.max,
+					thresholds: f,
+					unit: d?.unit,
+					formatValue: p,
+					size: d?.size === "sm" ? 100 : d?.size === "md" ? 140 : d?.size === "lg" ? 180 : 140
 				})
 			}),
 			b && /* @__PURE__ */ o("div", {
@@ -197,7 +226,7 @@ var d = r(function({ widget: r, data: c, onClick: d, onDrilldown: f }) {
 		children: /* @__PURE__ */ s("div", {
 			className: "text-center",
 			children: [/* @__PURE__ */ o("svg", {
-				className: "w-12 h-12 mx-auto mb-2 text-text-tertiary",
+				className: "w-12 h-12 mx-auto mb-2 text-text-muted",
 				fill: "none",
 				stroke: "currentColor",
 				viewBox: "0 0 24 24",
@@ -212,6 +241,6 @@ var d = r(function({ widget: r, data: c, onClick: d, onDrilldown: f }) {
 	});
 });
 //#endregion
-export { d as default };
+export { g as default };
 //# sourceMappingURL=GaugeWidget.js.map

package/dist/bigconsole/components/widgets/gauge/GaugeWidget.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GaugeWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/gauge/GaugeWidget.tsx"],"sourcesContent":["/*\n GaugeWidget Component\n \n Gauge widget with circular and linear variants.\n /\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport type { Widget, GaugeConfig } from '../../../types';\nimport { CircularGauge, type ThresholdConfig } from './CircularGauge';\nimport { LinearGauge } from './LinearGauge';\nimport { unwrapRows } from '../utils/inferFields';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface GaugeWidgetProps {\n /* Widget configuration /\n widget: Widget;\n /* Gauge data /\n data?: GaugeData;\n /* Click handler for drilldown /\n onClick?: () => void;\n /* Drilldown handler - receives gauge data /\n onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\nexport interface GaugeData {\n /* Current value /\n value: number;\n /* Optional label /\n label?: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nconst DEFAULT_THRESHOLDS: ThresholdConfig[] = [\n { value: 33, color: 'var(--color-state-error)' },\n { value: 66, color: 'var(--color-state-warning)' },\n { value: 100, color: 'var(--color-state-success)' },\n];\n\nfunction buildThresholds(config?: GaugeConfig): ThresholdConfig[] {\n if (!config?.thresholds?.length) {\n return DEFAULT_THRESHOLDS;\n }\n\n return config.thresholds.map((t) => ({\n value: t.value,\n color:\n t.color === 'success'\n ? 'var(--color-state-success)'\n : t.color === 'warning'\n ? 'var(--color-state-warning)'\n : t.color === 'error'\n ? 'var(--color-state-error)'\n : t.color,\n }));\n}\n\nfunction formatGaugeValue(value: number, config?: GaugeConfig): string {\n const format = config?.format \|\| 'number';\n\n switch (format) {\n case 'percentage':\n return `${value.toFixed(0)}%`;\n case 'currency':\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n maximumFractionDigits: 0,\n }).format(value);\n case 'number':\n default:\n return new Intl.NumberFormat('en-US', {\n maximumFractionDigits: config?.decimals \|\| 0,\n }).format(value);\n }\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const GaugeWidget: FC<GaugeWidgetProps> = memo(function GaugeWidget({\n widget,\n data: rawData,\n onClick,\n onDrilldown,\n}) {\n const config = widget.config as unknown as GaugeConfig \| undefined;\n\n const thresholds = useMemo(() => buildThresholds(config), [config]);\n\n const formatValue = useCallback((value: number) => formatGaugeValue(value, config), [config]);\n\n const hasDrilldown = !!widget.drilldown?.enabled;\n const isLinear = config?.variant === 'linear';\n\n // Normalize data from different formats (DataSink array, single object, etc.)\n const normalizedData = useMemo((): GaugeData \| null => {\n if (!rawData) return null;\n\n // Explicit top-level `value` always wins — even if a sibling envelope\n // key exists (`{value: 42, data: [...]}` is a common summary+detail\n // shape) we prefer the summary value rather than coercing to array mode.\n if (rawData && typeof rawData === 'object' && !Array.isArray(rawData)) {\n const asRecord = rawData as unknown as Record<string, unknown>;\n if ('value' in asRecord && typeof asRecord.value === 'number') {\n return rawData as GaugeData;\n }\n }\n\n // BOFF-2246: unwrap common envelopes so the existing array handler below\n // (with its rich common-field heuristics) runs for parsers emitting\n // `{data: [...]}` / `{items: [...]}` — previously those payloads hit\n // \"No gauge data\" because no handler matched.\n //\n // Caveat: summary+detail payloads like `{ totalSales: 120, data: [...] }`\n // should keep the top-level numeric (the existing single-object handler\n // below has a generic \"any numeric field\" last-resort scan that would\n // otherwise surface it). Skip the unwrap whenever ANY numeric sibling\n // exists alongside the envelope key — matches the scope of the generic\n // scan so we don't regress previously-working payloads.\n let data: unknown = rawData;\n if (data && typeof data === 'object' && !Array.isArray(data)) {\n const obj = data as Record<string, unknown>;\n const hasTopLevelNumericSibling = Object.entries(obj).some(([k, v]) => {\n if (k === 'data' \|\| k === 'items' \|\| k === 'rows') return false;\n return typeof v === 'number';\n });\n\n if (!hasTopLevelNumericSibling) {\n // Array-aware unwrap — picks the first envelope key that's actually\n // an array, so payloads like `{data: {page: 1}, items: [...]}` still\n // reach the array handler below.\n const maybe = unwrapRows(obj);\n if (maybe && maybe.length > 0) data = maybe;\n }\n }\n\n // Get configured value field from widget config\n const valueField =\n ((config as Record<string, unknown> \| undefined)?.valueField as string) \|\|\n ((config as Record<string, unknown> \| undefined)?.value_field as string) \|\|\n 'value';\n\n // Handle array from DataSink - extract value from first item\n if (Array.isArray(data) && data.length > 0) {\n const firstItem = data[0] as Record<string, unknown>;\n\n // Try configured field first\n if (typeof firstItem[valueField] === 'number') {\n return {\n value: firstItem[valueField] as number,\n label: typeof firstItem.label === 'string' ? firstItem.label : undefined,\n };\n }\n\n // Try common numeric field names\n const numericFields = [\n 'value',\n 'growth',\n 'percentage',\n 'percent',\n 'progress',\n 'score',\n 'rate',\n 'amount',\n 'total',\n ];\n for (const field of numericFields) {\n if (typeof firstItem[field] === 'number') {\n return {\n value: firstItem[field] as number,\n label:\n typeof firstItem.label === 'string'\n ? firstItem.label\n : typeof firstItem.name === 'string'\n ? firstItem.name\n : undefined,\n };\n }\n }\n\n // Find any numeric field\n const numericEntry = Object.entries(firstItem).find(([, v]) => typeof v === 'number');\n if (numericEntry) {\n return {\n value: numericEntry[1] as number,\n label: `${numericEntry[0].charAt(0).toUpperCase()}${numericEntry[0].slice(1)}`,\n };\n }\n\n // Try to aggregate (average) across all rows if single item didn't work\n if (data.length > 1) {\n const allNumericFields = Object.entries(firstItem).filter(([, v]) => typeof v === 'number');\n if (allNumericFields.length > 0) {\n const [fieldName] = allNumericFields[0];\n const avg =\n data.reduce((sum, row) => {\n const val = (row as Record<string, unknown>)[fieldName];\n return sum + (typeof val === 'number' ? val : 0);\n }, 0) / data.length;\n\n return {\n value: Math.round(avg 100) / 100,\n label: `Avg ${fieldName.charAt(0).toUpperCase()}${fieldName.slice(1)}`,\n };\n }\n }\n }\n\n // Handle single object without 'value' property\n if (typeof data === 'object' && !Array.isArray(data)) {\n const dataObj = data as unknown as Record<string, unknown>;\n\n // Try configured field\n if (typeof dataObj[valueField] === 'number') {\n return {\n value: dataObj[valueField] as number,\n label: typeof dataObj.label === 'string' ? dataObj.label : undefined,\n };\n }\n\n // Try common field names\n const numericFields = [\n 'value',\n 'growth',\n 'percentage',\n 'percent',\n 'progress',\n 'score',\n 'rate',\n 'amount',\n 'total',\n ];\n for (const field of numericFields) {\n if (typeof dataObj[field] === 'number') {\n return {\n value: dataObj[field] as number,\n label: typeof dataObj.label === 'string' ? dataObj.label : undefined,\n };\n }\n }\n\n // Find any numeric field\n const numericEntry = Object.entries(dataObj).find(([, v]) => typeof v === 'number');\n if (numericEntry) {\n return {\n value: numericEntry[1] as number,\n label: `${numericEntry[0].charAt(0).toUpperCase()}${numericEntry[0].slice(1)}`,\n };\n }\n }\n\n // Handle direct number\n if (typeof data === 'number') {\n return { value: data };\n }\n\n // Handle string that can be parsed as number\n if (typeof data === 'string') {\n const parsed = parseFloat(data);\n if (!isNaN(parsed)) {\n return { value: parsed };\n }\n }\n\n return null;\n }, [rawData, config]);\n\n // Handle drilldown click - must be after normalizedData is computed\n const handleClick = useCallback(() => {\n // Support both legacy onClick and new onDrilldown\n if (onDrilldown && normalizedData) {\n onDrilldown({\n value: normalizedData.value,\n label: normalizedData.label,\n min: config?.min,\n max: config?.max,\n });\n } else if (onClick && widget.drilldowns?.length) {\n onClick();\n }\n }, [onClick, onDrilldown, widget.drilldowns, normalizedData, config?.min, config?.max]);\n\n const isClickable = Boolean(hasDrilldown \|\| (onClick && widget.drilldowns?.length));\n\n if (!normalizedData) {\n return (\n <div className=\"flex items-center justify-center h-full text-text-secondary text-sm\">\n <div className=\"text-center\">\n <svg\n className=\"w-12 h-12 mx-auto mb-2 text-text-tertiary\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\n />\n </svg>\n <p>No gauge data</p>\n </div>\n </div>\n );\n }\n\n return (\n <div\n className={`\n flex flex-col items-center justify-center h-full p-4\n ${isClickable ? 'cursor-pointer hover:bg-bg-sunken/50 transition-colors' : ''}\n `}\n onClick={handleClick}\n role={isClickable ? 'button' : undefined}\n tabIndex={isClickable ? 0 : undefined}\n onKeyDown={(e) => {\n if (isClickable && (e.key === 'Enter' \|\| e.key === ' ')) {\n e.preventDefault();\n handleClick();\n }\n }}\n >\n {/* Label /}\n {normalizedData.label && <p className=\"text-sm text-text-secondary mb-3 text-center\">{normalizedData.label}</p>}\n\n {/ Gauge /}\n <div className={`${isLinear ? 'w-full max-w-xs' : ''}`}>\n {isLinear ? (\n <LinearGauge\n value={normalizedData.value}\n min={config?.min}\n max={config?.max}\n thresholds={thresholds}\n unit={config?.unit}\n formatValue={formatValue}\n showZones={config?.showZones}\n />\n ) : (\n <CircularGauge\n value={normalizedData.value}\n min={config?.min}\n max={config?.max}\n thresholds={thresholds}\n unit={config?.unit}\n formatValue={formatValue}\n size={config?.size === 'sm' ? 100 : config?.size === 'md' ? 140 : config?.size === 'lg' ? 180 : 140}\n />\n )}\n </div>\n\n {/ Drilldown indicator */}\n {isClickable && (\n <div className=\"mt-3 flex items-center justify-center\">\n <span className=\"text-xs text-text-secondary flex items-center gap-1\">\n View details\n <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n </svg>\n </span>\n </div>\n )}\n </div>\n );\n});\n\nexport default GaugeWidget;\n"],"mappings":"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"}
1	+ {"version":3,"file":"GaugeWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/gauge/GaugeWidget.tsx"],"sourcesContent":["/*\n GaugeWidget Component\n \n Gauge widget with circular and linear variants.\n /\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport type { Widget, GaugeConfig } from '../../../types';\nimport { CircularGauge, type ThresholdConfig } from './CircularGauge';\nimport { LinearGauge } from './LinearGauge';\nimport { unwrapRows } from '../utils/inferFields';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface GaugeWidgetProps {\n /* Widget configuration /\n widget: Widget;\n /* Gauge data /\n data?: GaugeData;\n /* Click handler for drilldown /\n onClick?: () => void;\n /* Drilldown handler - receives gauge data /\n onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\nexport interface GaugeData {\n /* Current value /\n value: number;\n /* Optional label /\n label?: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\n/\n Semantic threshold colours.\n \n These MUST reference custom properties that actually exist in\n * `@burdenoff/fe-libs` (`--color-status-`, see fe-libs\n `src/shared/tokens/build/semantic.css`). An undefined custom property is\n * invalid-at-computed-value-time, so the browser drops the declaration\n * entirely: the SVG arc falls back to `stroke: none` and the linear bar to\n * `background-color: transparent` — i.e. the gauge renders permanently empty.\n /\nconst THRESHOLD_TOKENS = {\n success: 'var(--color-status-success-bg)',\n warning: 'var(--color-status-warning-bg)',\n error: 'var(--color-status-error-bg)',\n} as const;\n\ntype ThresholdToken = keyof typeof THRESHOLD_TOKENS;\n\n/\n Raw colours that already exist in persisted widget configs, mapped onto the\n * semantic token carrying the same meaning.\n \n Two sources produce these: older bundled-registry defaults ('red'/'yellow'/\n * 'green') and the BACKEND widget catalog, whose gauge `defaultConfig` seeds\n * hex (`#ef4444`/`#f59e0b`/`#22c55e`) and wins wholesale over the bundled\n * defaults on create (DashboardCanvas: `widgetData.defaultConfig \|\| definition.defaultConfig`).\n * Translating them keeps existing gauges painting the intended colour and\n * makes them theme-aware, instead of being stuck on a fixed light-mode hex.\n /\nconst LEGACY_COLOR_ALIASES: Readonly<Record<string, ThresholdToken>> = {\n red: 'error',\n '#ef4444': 'error',\n '#dc2626': 'error',\n yellow: 'warning',\n amber: 'warning',\n orange: 'warning',\n '#f59e0b': 'warning',\n '#eab308': 'warning',\n green: 'success',\n '#22c55e': 'success',\n '#059669': 'success',\n};\n\nfunction isThresholdToken(color: string): color is ThresholdToken {\n return color in THRESHOLD_TOKENS;\n}\n\n/* Any CSS colour a persisted config might legitimately carry. /\nfunction looksLikeCssColor(color: string): boolean {\n // Valid hex lengths are 3, 4, 6 and 8 — a `{3,8}` range would also admit\n // 5- and 7-digit strings, which are not colours and should fall back rather\n // than reach the DOM.\n return (\n /^#(?:[0-9a-f]{3}\|[0-9a-f]{4}\|[0-9a-f]{6}\|[0-9a-f]{8})$/i.test(color) \|\|\n /^(rgb\|rgba\|hsl\|hsla\|color\|oklch\|lab)\\(/i.test(color)\n );\n}\n\n/\n Resolve a configured threshold colour to a paintable value.\n \n Order matters. Semantic names and known legacy colours become tokens so they\n * theme correctly. An explicit `var(--…)` passes through. An unrecognised but\n * valid hex or function-syntax CSS colour also passes through: it is\n * user/backend data rather than source code, and substituting a token would\n * silently repaint a red band blue — worse than the theming smell it would fix.\n \n Bare CSS named colours are deliberately NOT passed through. The ones that\n * historically appear in gauge configs are covered by `LEGACY_COLOR_ALIASES`;\n * anything else is far likelier a misconfiguration than an intent, so it falls\n * back to a token (with a dev warning) rather than reaching the DOM.\n /\nfunction resolveThresholdColor(color: string): string {\n const normalized = color.trim().toLowerCase();\n\n if (isThresholdToken(normalized)) return THRESHOLD_TOKENS[normalized];\n\n const alias = LEGACY_COLOR_ALIASES[normalized];\n if (alias) return THRESHOLD_TOKENS[alias];\n\n // Already a token reference — pass through untouched.\n if (normalized.startsWith('var(')) return color;\n\n if (looksLikeCssColor(normalized)) {\n if (import.meta.env.DEV) {\n console.warn(\n `[GaugeWidget] Threshold colour \"${color}\" is a raw CSS colour and will not ` +\n 'adapt to the active theme. Prefer success/warning/error, which map to fe-libs tokens.'\n );\n }\n return color;\n }\n\n if (import.meta.env.DEV) {\n console.warn(\n `[GaugeWidget] Unrecognised threshold colour \"${color}\" — expected one of ` +\n `${Object.keys(THRESHOLD_TOKENS).join('/')}, a CSS colour, or a var(--color-…) token. ` +\n 'Falling back to the primary token so the gauge still paints.'\n );\n }\n\n return 'var(--color-action-primary-bg)';\n}\n\nconst DEFAULT_THRESHOLDS: ThresholdConfig[] = [\n { value: 33, color: THRESHOLD_TOKENS.error },\n { value: 66, color: THRESHOLD_TOKENS.warning },\n { value: 100, color: THRESHOLD_TOKENS.success },\n];\n\nfunction buildThresholds(config?: GaugeConfig): ThresholdConfig[] {\n if (!config?.thresholds?.length) {\n return DEFAULT_THRESHOLDS;\n }\n\n return config.thresholds.map((t) => ({\n value: t.value,\n color: resolveThresholdColor(t.color),\n }));\n}\n\nfunction formatGaugeValue(value: number, config?: GaugeConfig): string {\n const format = config?.format \|\| 'number';\n\n switch (format) {\n case 'percentage':\n return `${value.toFixed(0)}%`;\n case 'currency':\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n maximumFractionDigits: 0,\n }).format(value);\n case 'number':\n default:\n return new Intl.NumberFormat('en-US', {\n maximumFractionDigits: config?.decimals \|\| 0,\n }).format(value);\n }\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const GaugeWidget: FC<GaugeWidgetProps> = memo(function GaugeWidget({\n widget,\n data: rawData,\n onClick,\n onDrilldown,\n}) {\n const config = widget.config as unknown as GaugeConfig \| undefined;\n\n const thresholds = useMemo(() => buildThresholds(config), [config]);\n\n const formatValue = useCallback((value: number) => formatGaugeValue(value, config), [config]);\n\n const hasDrilldown = !!widget.drilldown?.enabled;\n const isLinear = config?.variant === 'linear';\n\n // Normalize data from different formats (DataSink array, single object, etc.)\n const normalizedData = useMemo((): GaugeData \| null => {\n if (!rawData) return null;\n\n // Explicit top-level `value` always wins — even if a sibling envelope\n // key exists (`{value: 42, data: [...]}` is a common summary+detail\n // shape) we prefer the summary value rather than coercing to array mode.\n if (rawData && typeof rawData === 'object' && !Array.isArray(rawData)) {\n const asRecord = rawData as unknown as Record<string, unknown>;\n if ('value' in asRecord && typeof asRecord.value === 'number') {\n return rawData as GaugeData;\n }\n }\n\n // BOFF-2246: unwrap common envelopes so the existing array handler below\n // (with its rich common-field heuristics) runs for parsers emitting\n // `{data: [...]}` / `{items: [...]}` — previously those payloads hit\n // \"No gauge data\" because no handler matched.\n //\n // Caveat: summary+detail payloads like `{ totalSales: 120, data: [...] }`\n // should keep the top-level numeric (the existing single-object handler\n // below has a generic \"any numeric field\" last-resort scan that would\n // otherwise surface it). Skip the unwrap whenever ANY numeric sibling\n // exists alongside the envelope key — matches the scope of the generic\n // scan so we don't regress previously-working payloads.\n let data: unknown = rawData;\n if (data && typeof data === 'object' && !Array.isArray(data)) {\n const obj = data as Record<string, unknown>;\n const hasTopLevelNumericSibling = Object.entries(obj).some(([k, v]) => {\n if (k === 'data' \|\| k === 'items' \|\| k === 'rows') return false;\n return typeof v === 'number';\n });\n\n if (!hasTopLevelNumericSibling) {\n // Array-aware unwrap — picks the first envelope key that's actually\n // an array, so payloads like `{data: {page: 1}, items: [...]}` still\n // reach the array handler below.\n const maybe = unwrapRows(obj);\n if (maybe && maybe.length > 0) data = maybe;\n }\n }\n\n // Get configured value field from widget config\n const valueField =\n ((config as Record<string, unknown> \| undefined)?.valueField as string) \|\|\n ((config as Record<string, unknown> \| undefined)?.value_field as string) \|\|\n 'value';\n\n // Handle array from DataSink - extract value from first item\n if (Array.isArray(data) && data.length > 0) {\n const firstItem = data[0] as Record<string, unknown>;\n\n // Try configured field first\n if (typeof firstItem[valueField] === 'number') {\n return {\n value: firstItem[valueField] as number,\n label: typeof firstItem.label === 'string' ? firstItem.label : undefined,\n };\n }\n\n // Try common numeric field names\n const numericFields = [\n 'value',\n 'growth',\n 'percentage',\n 'percent',\n 'progress',\n 'score',\n 'rate',\n 'amount',\n 'total',\n ];\n for (const field of numericFields) {\n if (typeof firstItem[field] === 'number') {\n return {\n value: firstItem[field] as number,\n label:\n typeof firstItem.label === 'string'\n ? firstItem.label\n : typeof firstItem.name === 'string'\n ? firstItem.name\n : undefined,\n };\n }\n }\n\n // Find any numeric field\n const numericEntry = Object.entries(firstItem).find(([, v]) => typeof v === 'number');\n if (numericEntry) {\n return {\n value: numericEntry[1] as number,\n label: `${numericEntry[0].charAt(0).toUpperCase()}${numericEntry[0].slice(1)}`,\n };\n }\n\n // Try to aggregate (average) across all rows if single item didn't work\n if (data.length > 1) {\n const allNumericFields = Object.entries(firstItem).filter(([, v]) => typeof v === 'number');\n if (allNumericFields.length > 0) {\n const [fieldName] = allNumericFields[0];\n const avg =\n data.reduce((sum, row) => {\n const val = (row as Record<string, unknown>)[fieldName];\n return sum + (typeof val === 'number' ? val : 0);\n }, 0) / data.length;\n\n return {\n value: Math.round(avg 100) / 100,\n label: `Avg ${fieldName.charAt(0).toUpperCase()}${fieldName.slice(1)}`,\n };\n }\n }\n }\n\n // Handle single object without 'value' property\n if (typeof data === 'object' && !Array.isArray(data)) {\n const dataObj = data as unknown as Record<string, unknown>;\n\n // Try configured field\n if (typeof dataObj[valueField] === 'number') {\n return {\n value: dataObj[valueField] as number,\n label: typeof dataObj.label === 'string' ? dataObj.label : undefined,\n };\n }\n\n // Try common field names\n const numericFields = [\n 'value',\n 'growth',\n 'percentage',\n 'percent',\n 'progress',\n 'score',\n 'rate',\n 'amount',\n 'total',\n ];\n for (const field of numericFields) {\n if (typeof dataObj[field] === 'number') {\n return {\n value: dataObj[field] as number,\n label: typeof dataObj.label === 'string' ? dataObj.label : undefined,\n };\n }\n }\n\n // Find any numeric field\n const numericEntry = Object.entries(dataObj).find(([, v]) => typeof v === 'number');\n if (numericEntry) {\n return {\n value: numericEntry[1] as number,\n label: `${numericEntry[0].charAt(0).toUpperCase()}${numericEntry[0].slice(1)}`,\n };\n }\n }\n\n // Handle direct number\n if (typeof data === 'number') {\n return { value: data };\n }\n\n // Handle string that can be parsed as number\n if (typeof data === 'string') {\n const parsed = parseFloat(data);\n if (!isNaN(parsed)) {\n return { value: parsed };\n }\n }\n\n return null;\n }, [rawData, config]);\n\n // Handle drilldown click - must be after normalizedData is computed\n const handleClick = useCallback(() => {\n // Support both legacy onClick and new onDrilldown\n if (onDrilldown && normalizedData) {\n onDrilldown({\n value: normalizedData.value,\n label: normalizedData.label,\n min: config?.min,\n max: config?.max,\n });\n } else if (onClick && widget.drilldowns?.length) {\n onClick();\n }\n }, [onClick, onDrilldown, widget.drilldowns, normalizedData, config?.min, config?.max]);\n\n const isClickable = Boolean(hasDrilldown \|\| (onClick && widget.drilldowns?.length));\n\n if (!normalizedData) {\n return (\n <div className=\"flex items-center justify-center h-full text-text-secondary text-sm\">\n <div className=\"text-center\">\n <svg className=\"w-12 h-12 mx-auto mb-2 text-text-muted\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\n />\n </svg>\n <p>No gauge data</p>\n </div>\n </div>\n );\n }\n\n return (\n <div\n className={`\n flex flex-col items-center justify-center h-full p-4\n ${isClickable ? 'cursor-pointer hover:bg-bg-sunken/50 transition-colors' : ''}\n `}\n onClick={handleClick}\n role={isClickable ? 'button' : undefined}\n tabIndex={isClickable ? 0 : undefined}\n onKeyDown={(e) => {\n if (isClickable && (e.key === 'Enter' \|\| e.key === ' ')) {\n e.preventDefault();\n handleClick();\n }\n }}\n >\n {/* Label /}\n {normalizedData.label && <p className=\"text-sm text-text-secondary mb-3 text-center\">{normalizedData.label}</p>}\n\n {/ Gauge /}\n <div className={`${isLinear ? 'w-full max-w-xs' : ''}`}>\n {isLinear ? (\n <LinearGauge\n value={normalizedData.value}\n min={config?.min}\n max={config?.max}\n thresholds={thresholds}\n unit={config?.unit}\n formatValue={formatValue}\n showZones={config?.showZones}\n />\n ) : (\n <CircularGauge\n value={normalizedData.value}\n min={config?.min}\n max={config?.max}\n thresholds={thresholds}\n unit={config?.unit}\n formatValue={formatValue}\n size={config?.size === 'sm' ? 100 : config?.size === 'md' ? 140 : config?.size === 'lg' ? 180 : 140}\n />\n )}\n </div>\n\n {/ Drilldown indicator */}\n {isClickable && (\n <div className=\"mt-3 flex items-center justify-center\">\n <span className=\"text-xs text-text-secondary flex items-center gap-1\">\n View details\n <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n </svg>\n </span>\n </div>\n )}\n </div>\n );\n});\n\nexport default GaugeWidget;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/gauge/LinearGauge.js CHANGED Viewed

@@ -1,55 +1,56 @@
-import { memo as e, useMemo as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { gaugeSpan as e } from "./CircularGauge.js";
+import { memo as t, useMemo as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/gauge/LinearGauge.tsx
-function i(e, t) {
+function a(e, t) {
 	if (!t?.length) return "var(--color-action-primary-bg)";
 	let n = [...t].sort((e, t) => e.value - t.value);
 	for (let t of n) if (e <= t.value) return t.color;
 	return n[n.length - 1].color;
 }
-var a = e(function({ value: e, min: a = 0, max: o = 100, height: s = 12, thresholds: c, unit: l, showValue: u = !0, showRange: d = !0, formatValue: f = (e) => e.toFixed(0), showZones: p = !1 }) {
-	let m = t(() => (Math.max(a, Math.min(o, e)) - a) / (o - a) * 100, [
-		e,
-		a,
-		o
-	]), h = i(e, c), g = t(() => {
-		if (!p || !c?.length) return null;
-		let e = [...c].sort((e, t) => e.value - t.value), t = [], n = a;
-		for (let r of e) {
-			let e = (r.value - n) / (o - a) * 100;
-			t.push({
-				width: e,
-				color: r.color
-			}), n = r.value;
+var o = t(function({ value: t, min: o = 0, max: s = 100, height: c = 12, thresholds: l, unit: u, showValue: d = !0, showRange: f = !0, formatValue: p = (e) => e.toFixed(0), showZones: m = !1 }) {
+	let h = n(() => (Math.max(o, Math.min(s, t)) - o) / e(o, s) * 100, [
+		t,
+		o,
+		s
+	]), g = a(t, l), _ = n(() => {
+		if (!m || !l?.length) return null;
+		let t = [...l].sort((e, t) => e.value - t.value), n = [], r = o;
+		for (let i of t) {
+			let t = (i.value - r) / e(o, s) * 100;
+			n.push({
+				width: t,
+				color: i.color
+			}), r = i.value;
 		}
-		return t;
+		return n;
 	}, [
-		p,
-		c,
-		a,
-		o
+		m,
+		l,
+		o,
+		s
 	]);
-	return /* @__PURE__ */ r("div", {
+	return /* @__PURE__ */ i("div", {
 		className: "w-full",
 		children: [
-			u && /* @__PURE__ */ r("div", {
+			d && /* @__PURE__ */ i("div", {
 				className: "flex items-baseline gap-1 mb-2",
-				children: [/* @__PURE__ */ n("span", {
+				children: [/* @__PURE__ */ r("span", {
 					className: "text-2xl font-bold",
-					style: { color: h },
-					children: f(e)
-				}), l && /* @__PURE__ */ n("span", {
+					style: { color: g },
+					children: p(t)
+				}), u && /* @__PURE__ */ r("span", {
 					className: "text-sm text-text-secondary",
-					children: l
+					children: u
 				})]
 			}),
-			/* @__PURE__ */ r("div", {
+			/* @__PURE__ */ i("div", {
 				className: "relative w-full rounded-full overflow-hidden bg-bg-sunken",
-				style: { height: s },
+				style: { height: c },
 				children: [
-					g && /* @__PURE__ */ n("div", {
+					_ && /* @__PURE__ */ r("div", {
 						className: "absolute inset-0 flex",
-						children: g.map((e, t) => /* @__PURE__ */ n("div", {
+						children: _.map((e, t) => /* @__PURE__ */ r("div", {
 							className: "h-full opacity-20",
 							style: {
 								width: `${e.width}%`,
@@ -57,36 +58,36 @@ var a = e(function({ value: e, min: a = 0, max: o = 100, height: s = 12, thresho
 							}
 						}, t))
 					}),
-					/* @__PURE__ */ n("div", {
+					/* @__PURE__ */ r("div", {
 						className: "absolute inset-y-0 left-0 rounded-full transition-all duration-500 ease-out",
 						style: {
-							width: `${m}%`,
-							backgroundColor: h
+							width: `${h}%`,
+							backgroundColor: g
 						}
 					}),
-					/* @__PURE__ */ n("div", {
+					/* @__PURE__ */ r("div", {
 						className: "absolute top-1/2 -translate-y-1/2 w-1 bg-bg-surface transition-all duration-500",
 						style: {
-							left: `calc(${m}% - 2px)`,
-							height: s + 4
+							left: `calc(${h}% - 2px)`,
+							height: c + 4
 						}
 					})
 				]
 			}),
-			d && /* @__PURE__ */ r("div", {
+			f && /* @__PURE__ */ i("div", {
 				className: "flex justify-between mt-1",
-				children: [/* @__PURE__ */ n("span", {
+				children: [/* @__PURE__ */ r("span", {
 					className: "text-xs text-text-secondary",
-					children: f(a)
-				}), /* @__PURE__ */ n("span", {
+					children: p(o)
+				}), /* @__PURE__ */ r("span", {
 					className: "text-xs text-text-secondary",
-					children: f(o)
+					children: p(s)
 				})]
 			})
 		]
 	});
 });
 //#endregion
-export { a as default };
+export { o as default };
 //# sourceMappingURL=LinearGauge.js.map

package/dist/bigconsole/components/widgets/gauge/LinearGauge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LinearGauge.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/gauge/LinearGauge.tsx"],"sourcesContent":["/*\n LinearGauge Component\n \n Horizontal linear gauge visualization.\n /\n\nimport { type FC, memo, useMemo } from 'react';\nimport type { ThresholdConfig } from './CircularGauge';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface LinearGaugeProps {\n /* Current value /\n value: number;\n /* Minimum value /\n min?: number;\n /* Maximum value /\n max?: number;\n /* Height of the gauge bar /\n height?: number;\n /* Thresholds for color zones /\n thresholds?: ThresholdConfig[];\n /* Unit label /\n unit?: string;\n /* Whether to show the value /\n showValue?: boolean;\n /* Whether to show min/max labels /\n showRange?: boolean;\n /* Value format function /\n formatValue?: (value: number) => string;\n /* Whether to show color zones /\n showZones?: boolean;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getColorForValue(value: number, thresholds?: ThresholdConfig[]): string {\n if (!thresholds?.length) {\n return 'var(--color-action-primary-bg)';\n }\n\n const sorted = [...thresholds].sort((a, b) => a.value - b.value);\n\n for (const threshold of sorted) {\n if (value <= threshold.value) {\n return threshold.color;\n }\n }\n\n return sorted[sorted.length - 1].color;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const LinearGauge: FC<LinearGaugeProps> = memo(function LinearGauge({\n value,\n min = 0,\n max = 100,\n height = 12,\n thresholds,\n unit,\n showValue = true,\n showRange = true,\n formatValue = (v: number) => v.toFixed(0),\n showZones = false,\n}) {\n // Calculate percentage\n const percentage = useMemo(() => {\n const clampedValue = Math.max(min, Math.min(max, value));\n return ((clampedValue - min) / (max ~~- min~~)) 100;\n }, [value, min, max]);\n\n const color = getColorForValue(value, thresholds);\n\n // Calculate zone widths for background\n const zones = useMemo(() => {\n if (!showZones \|\| !thresholds?.length) return null;\n\n const sorted = [...thresholds].sort((a, b) => a.value - b.value);\n const zones: { width: number; color: string }[] = [];\n let prevValue = min;\n\n for (const threshold of sorted) {\n const width = ((threshold.value - prevValue) / (max ~~- min~~)) * 100;\n zones.push({ width, color: threshold.color });\n prevValue = threshold.value;\n }\n\n return zones;\n }, [showZones, thresholds, min, max]);\n\n return (\n <div className=\"w-full\">\n {/* Value display /}\n {showValue && (\n <div className=\"flex items-baseline gap-1 mb-2\">\n <span className=\"text-2xl font-bold\" style={{ color }}>\n {formatValue(value)}\n </span>\n {unit && <span className=\"text-sm text-text-secondary\">{unit}</span>}\n </div>\n )}\n\n {/ Gauge bar /}\n <div className=\"relative w-full rounded-full overflow-hidden bg-bg-sunken\" style={{ height }}>\n {/ Zone backgrounds /}\n {zones && (\n <div className=\"absolute inset-0 flex\">\n {zones.map((zone, index) => (\n <div\n key={index}\n className=\"h-full opacity-20\"\n style={{ width: `${zone.width}%`, backgroundColor: zone.color }}\n />\n ))}\n </div>\n )}\n\n {/ Value bar /}\n <div\n className=\"absolute inset-y-0 left-0 rounded-full transition-all duration-500 ease-out\"\n style={{\n width: `${percentage}%`,\n backgroundColor: color,\n }}\n />\n\n {/ Value marker /}\n <div\n className=\"absolute top-1/2 -translate-y-1/2 w-1 bg-bg-surface transition-all duration-500\"\n style={{\n left: `calc(${percentage}% - 2px)`,\n height: height + 4,\n }}\n />\n </div>\n\n {/ Range labels */}\n {showRange && (\n <div className=\"flex justify-between mt-1\">\n <span className=\"text-xs text-text-secondary\">{formatValue(min)}</span>\n <span className=\"text-xs text-text-secondary\">{formatValue(max)}</span>\n </div>\n )}\n </div>\n );\n});\n\nexport default LinearGauge;\n"],"mappings":"~~;;;~~AAwCA,SAAS,EAAiB,GAAe,GAAwC;AAC/E,KAAI,CAAC,GAAY,OACf,QAAO;CAGT,IAAM,IAAS,CAAC,GAAG,EAAW,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM;AAEhE,MAAK,IAAM,KAAa,EACtB,KAAI,KAAS,EAAU,MACrB,QAAO,EAAU;AAIrB,QAAO,EAAO,EAAO,SAAS,GAAG;;AAOnC,IAAa,IAAoC,EAAK,SAAqB,EACzE,UACA,SAAM,GACN,SAAM,KACN,YAAS,IACT,eACA,SACA,eAAY,IACZ,eAAY,IACZ,kBAAe,MAAc,EAAE,QAAQ,EAAE,EACzC,eAAY,MACX;CAED,IAAM,IAAa,SACI,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAM,CAAC,GAChC,~~MAAQ~~,~~IAAM~~,~~KAAQ~~,~~KAC7C~~;EAAC;EAAO;EAAK;EAAI,CAAC,EAEf,IAAQ,EAAiB,GAAO,EAAW,EAG3C,IAAQ,QAAc;AAC1B,MAAI,CAAC,KAAa,CAAC,GAAY,OAAQ,QAAO;EAE9C,IAAM,IAAS,CAAC,GAAG,EAAW,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,EAC1D,IAA4C,EAAE,EAChD,IAAY;AAEhB,OAAK,IAAM,KAAa,GAAQ;GAC9B,IAAM,KAAU,EAAU,QAAQ,~~MAAc~~,~~IAAM~~,~~KAAQ~~;~~AAE9D~~,GADA,EAAM,KAAK;IAAE;IAAO,OAAO,EAAU;IAAO,CAAC,EAC7C,IAAY,EAAU;;AAGxB,SAAO;IACN;EAAC;EAAW;EAAY;EAAK;EAAI,CAAC;AAErC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEG,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;KAAqB,OAAO,EAAE,UAAO;eAClD,EAAY,EAAM;KACd,CAAA,EACN,KAAQ,kBAAC,QAAD;KAAM,WAAU;eAA+B;KAAY,CAAA,CAChE;;GAIR,kBAAC,OAAD;IAAK,WAAU;IAA4D,OAAO,EAAE,WAAQ;cAA5F;KAEG,KACC,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAM,KAAK,GAAM,MAChB,kBAAC,OAAD;OAEE,WAAU;OACV,OAAO;QAAE,OAAO,GAAG,EAAK,MAAM;QAAI,iBAAiB,EAAK;QAAO;OAC/D,EAHK,EAGL,CACF;MACE,CAAA;KAIR,kBAAC,OAAD;MACE,WAAU;MACV,OAAO;OACL,OAAO,GAAG,EAAW;OACrB,iBAAiB;OAClB;MACD,CAAA;KAGF,kBAAC,OAAD;MACE,WAAU;MACV,OAAO;OACL,MAAM,QAAQ,EAAW;OACzB,QAAQ,IAAS;OAClB;MACD,CAAA;KACE;;GAGL,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAA+B,EAAY,EAAI;KAAQ,CAAA,EACvE,kBAAC,QAAD;KAAM,WAAU;eAA+B,EAAY,EAAI;KAAQ,CAAA,CACnE;;GAEJ;;EAER"}
1	+ {"version":3,"file":"LinearGauge.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/gauge/LinearGauge.tsx"],"sourcesContent":["/*\n LinearGauge Component\n \n Horizontal linear gauge visualization.\n /\n\nimport { type FC, memo, useMemo } from 'react';\nimport { gaugeSpan, type ThresholdConfig } from './CircularGauge';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface LinearGaugeProps {\n /* Current value /\n value: number;\n /* Minimum value /\n min?: number;\n /* Maximum value /\n max?: number;\n /* Height of the gauge bar /\n height?: number;\n /* Thresholds for color zones /\n thresholds?: ThresholdConfig[];\n /* Unit label /\n unit?: string;\n /* Whether to show the value /\n showValue?: boolean;\n /* Whether to show min/max labels /\n showRange?: boolean;\n /* Value format function /\n formatValue?: (value: number) => string;\n /* Whether to show color zones /\n showZones?: boolean;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getColorForValue(value: number, thresholds?: ThresholdConfig[]): string {\n if (!thresholds?.length) {\n return 'var(--color-action-primary-bg)';\n }\n\n const sorted = [...thresholds].sort((a, b) => a.value - b.value);\n\n for (const threshold of sorted) {\n if (value <= threshold.value) {\n return threshold.color;\n }\n }\n\n return sorted[sorted.length - 1].color;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const LinearGauge: FC<LinearGaugeProps> = memo(function LinearGauge({\n value,\n min = 0,\n max = 100,\n height = 12,\n thresholds,\n unit,\n showValue = true,\n showRange = true,\n formatValue = (v: number) => v.toFixed(0),\n showZones = false,\n}) {\n // Calculate percentage\n const percentage = useMemo(() => {\n const clampedValue = Math.max(min, Math.min(max, value));\n return ((clampedValue - min) / gaugeSpan(min, max)) 100;\n }, [value, min, max]);\n\n const color = getColorForValue(value, thresholds);\n\n // Calculate zone widths for background\n const zones = useMemo(() => {\n if (!showZones \|\| !thresholds?.length) return null;\n\n const sorted = [...thresholds].sort((a, b) => a.value - b.value);\n const zones: { width: number; color: string }[] = [];\n let prevValue = min;\n\n for (const threshold of sorted) {\n const width = ((threshold.value - prevValue) / gaugeSpan(min, max)) * 100;\n zones.push({ width, color: threshold.color });\n prevValue = threshold.value;\n }\n\n return zones;\n }, [showZones, thresholds, min, max]);\n\n return (\n <div className=\"w-full\">\n {/* Value display /}\n {showValue && (\n <div className=\"flex items-baseline gap-1 mb-2\">\n <span className=\"text-2xl font-bold\" style={{ color }}>\n {formatValue(value)}\n </span>\n {unit && <span className=\"text-sm text-text-secondary\">{unit}</span>}\n </div>\n )}\n\n {/ Gauge bar /}\n <div className=\"relative w-full rounded-full overflow-hidden bg-bg-sunken\" style={{ height }}>\n {/ Zone backgrounds /}\n {zones && (\n <div className=\"absolute inset-0 flex\">\n {zones.map((zone, index) => (\n <div\n key={index}\n className=\"h-full opacity-20\"\n style={{ width: `${zone.width}%`, backgroundColor: zone.color }}\n />\n ))}\n </div>\n )}\n\n {/ Value bar /}\n <div\n className=\"absolute inset-y-0 left-0 rounded-full transition-all duration-500 ease-out\"\n style={{\n width: `${percentage}%`,\n backgroundColor: color,\n }}\n />\n\n {/ Value marker /}\n <div\n className=\"absolute top-1/2 -translate-y-1/2 w-1 bg-bg-surface transition-all duration-500\"\n style={{\n left: `calc(${percentage}% - 2px)`,\n height: height + 4,\n }}\n />\n </div>\n\n {/ Range labels */}\n {showRange && (\n <div className=\"flex justify-between mt-1\">\n <span className=\"text-xs text-text-secondary\">{formatValue(min)}</span>\n <span className=\"text-xs text-text-secondary\">{formatValue(max)}</span>\n </div>\n )}\n </div>\n );\n});\n\nexport default LinearGauge;\n"],"mappings":";;;;AAwCA,SAAS,EAAiB,GAAe,GAAwC;AAC/E,KAAI,CAAC,GAAY,OACf,QAAO;CAGT,IAAM,IAAS,CAAC,GAAG,EAAW,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM;AAEhE,MAAK,IAAM,KAAa,EACtB,KAAI,KAAS,EAAU,MACrB,QAAO,EAAU;AAIrB,QAAO,EAAO,EAAO,SAAS,GAAG;;AAOnC,IAAa,IAAoC,EAAK,SAAqB,EACzE,UACA,SAAM,GACN,SAAM,KACN,YAAS,IACT,eACA,SACA,eAAY,IACZ,eAAY,IACZ,kBAAe,MAAc,EAAE,QAAQ,EAAE,EACzC,eAAY,MACX;CAED,IAAM,IAAa,SACI,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAM,CAAC,GAChC,KAAO,EAAU,GAAK,EAAI,GAAI,KACrD;EAAC;EAAO;EAAK;EAAI,CAAC,EAEf,IAAQ,EAAiB,GAAO,EAAW,EAG3C,IAAQ,QAAc;AAC1B,MAAI,CAAC,KAAa,CAAC,GAAY,OAAQ,QAAO;EAE9C,IAAM,IAAS,CAAC,GAAG,EAAW,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,EAC1D,IAA4C,EAAE,EAChD,IAAY;AAEhB,OAAK,IAAM,KAAa,GAAQ;GAC9B,IAAM,KAAU,EAAU,QAAQ,KAAa,EAAU,GAAK,EAAI,GAAI;AAEtE,GADA,EAAM,KAAK;IAAE;IAAO,OAAO,EAAU;IAAO,CAAC,EAC7C,IAAY,EAAU;;AAGxB,SAAO;IACN;EAAC;EAAW;EAAY;EAAK;EAAI,CAAC;AAErC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEG,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;KAAqB,OAAO,EAAE,UAAO;eAClD,EAAY,EAAM;KACd,CAAA,EACN,KAAQ,kBAAC,QAAD;KAAM,WAAU;eAA+B;KAAY,CAAA,CAChE;;GAIR,kBAAC,OAAD;IAAK,WAAU;IAA4D,OAAO,EAAE,WAAQ;cAA5F;KAEG,KACC,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAM,KAAK,GAAM,MAChB,kBAAC,OAAD;OAEE,WAAU;OACV,OAAO;QAAE,OAAO,GAAG,EAAK,MAAM;QAAI,iBAAiB,EAAK;QAAO;OAC/D,EAHK,EAGL,CACF;MACE,CAAA;KAIR,kBAAC,OAAD;MACE,WAAU;MACV,OAAO;OACL,OAAO,GAAG,EAAW;OACrB,iBAAiB;OAClB;MACD,CAAA;KAGF,kBAAC,OAAD;MACE,WAAU;MACV,OAAO;OACL,MAAM,QAAQ,EAAW;OACzB,QAAQ,IAAS;OAClB;MACD,CAAA;KACE;;GAGL,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAA+B,EAAY,EAAI;KAAQ,CAAA,EACvE,kBAAC,QAAD;KAAM,WAAU;eAA+B,EAAY,EAAI;KAAQ,CAAA,CACnE;;GAEJ;;EAER"}

package/dist/bigconsole/components/widgets/heatmap/HeatmapConfig.js CHANGED Viewed

@@ -23,7 +23,7 @@ var o = "\n  w-full px-3 py-2\n  text-sm text-text-primary\n  bg-bg-surface\n  b
 		});
 	}, [e, s]);
 	return /* @__PURE__ */ a("div", {
-		className: "space-y-4",
+		className: "min-w-0 space-y-form-gap",
 		children: [
 			/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("label", {
 				className: "block text-sm font-medium text-text-primary mb-1",
@@ -85,29 +85,40 @@ var o = "\n  w-full px-3 py-2\n  text-sm text-text-primary\n  bg-bg-surface\n  b
 				onChange: (e) => u("decimals", Number(e.target.value)),
 				className: o
 			})] }),
-			/* @__PURE__ */ a("label", {
-				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ i("input", {
-					type: "checkbox",
-					checked: e.showValues !== !1,
-					onChange: (e) => u("showValues", e.target.checked),
-					className: "\n            w-4 h-4\n            text-action-primary-bg\n            bg-bg-surface\n            border-border-default\n            rounded\n            focus:ring-action-primary-bg\n          "
-				}), /* @__PURE__ */ i("span", {
-					className: "text-sm text-text-primary",
-					children: c("bigconsole.widget.config.heatmap.showValues", "Show cell values")
-				})]
-			}),
-			/* @__PURE__ */ a("label", {
-				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ i("input", {
-					type: "checkbox",
-					checked: e.showLegend !== !1,
-					onChange: (e) => u("showLegend", e.target.checked),
-					className: "\n            w-4 h-4\n            text-action-primary-bg\n            bg-bg-surface\n            border-border-default\n            rounded\n            focus:ring-action-primary-bg\n          "
-				}), /* @__PURE__ */ i("span", {
-					className: "text-sm text-text-primary",
-					children: c("bigconsole.widget.config.heatmap.showLegend", "Show color legend")
-				})]
+			/* @__PURE__ */ a("div", {
+				role: "group",
+				"aria-label": "Display options",
+				className: "space-y-3 border-t border-[var(--color-border-subtle)] pt-form-gap",
+				children: [
+					/* @__PURE__ */ i("p", {
+						className: "text-xs font-bold uppercase tracking-wider text-text-secondary",
+						children: "Display options"
+					}),
+					/* @__PURE__ */ a("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ i("input", {
+							type: "checkbox",
+							checked: e.showValues !== !1,
+							onChange: (e) => u("showValues", e.target.checked),
+							className: "\n            w-4 h-4\n            text-action-primary-bg\n            bg-bg-surface\n            border-border-default\n            rounded\n            focus:ring-action-primary-bg\n          "
+						}), /* @__PURE__ */ i("span", {
+							className: "text-sm text-text-primary",
+							children: c("bigconsole.widget.config.heatmap.showValues", "Show cell values")
+						})]
+					}),
+					/* @__PURE__ */ a("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ i("input", {
+							type: "checkbox",
+							checked: e.showLegend !== !1,
+							onChange: (e) => u("showLegend", e.target.checked),
+							className: "\n            w-4 h-4\n            text-action-primary-bg\n            bg-bg-surface\n            border-border-default\n            rounded\n            focus:ring-action-primary-bg\n          "
+						}), /* @__PURE__ */ i("span", {
+							className: "text-sm text-text-primary",
+							children: c("bigconsole.widget.config.heatmap.showLegend", "Show color legend")
+						})]
+					})
+				]
 			})
 		]
 	});

package/dist/bigconsole/components/widgets/heatmap/HeatmapConfig.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeatmapConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/heatmap/HeatmapConfig.tsx"],"sourcesContent":["/*\n HeatmapConfig Component\n \n Configuration panel for Heatmap widgets.\n /\n\nimport { type FC, memo, useCallback, useMemo } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { HeatmapConfig as ConfigType } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface HeatmapConfigProps {\n /* Current configuration /\n config: ConfigType;\n /* Callback when config changes /\n onChange: (config: ConfigType) => void;\n}\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst FIELD_CLASSES = `\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n`;\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const HeatmapConfig: FC<HeatmapConfigProps> = memo(function HeatmapConfig({ config, onChange }) {\n const { t } = useI18n();\n\n const COLOR_SCHEMES = useMemo(\n () => [\n { value: 'blue', label: t('bigconsole.widget.config.heatmap.colorScheme.blue', 'Blue') },\n { value: 'green', label: t('bigconsole.widget.config.heatmap.colorScheme.green', 'Green') },\n { value: 'red', label: t('bigconsole.widget.config.heatmap.colorScheme.red', 'Red') },\n ],\n [t]\n );\n\n const handleChange = useCallback(\n <K extends keyof ConfigType>(key: K, value: ConfigType[K]) => {\n onChange({ ...config, [key]: value });\n },\n [config, onChange]\n );\n\n return (\n <div className=\"space-y-4\">\n {/ Axis + value fields /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.heatmap.xAxisFieldLabel', 'X-Axis Field')}\n </label>\n <input\n type=\"text\"\n value={config.xAxisField \|\| ''}\n onChange={(e) => handleChange('xAxisField', e.target.value)}\n placeholder={t('bigconsole.widget.config.heatmap.xAxisFieldPlaceholder', 'e.g., hour, column')}\n className={FIELD_CLASSES}\n />\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.heatmap.yAxisFieldLabel', 'Y-Axis Field')}\n </label>\n <input\n type=\"text\"\n value={config.yAxisField \|\| ''}\n onChange={(e) => handleChange('yAxisField', e.target.value)}\n placeholder={t('bigconsole.widget.config.heatmap.yAxisFieldPlaceholder', 'e.g., day, row')}\n className={FIELD_CLASSES}\n />\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.heatmap.valueFieldLabel', 'Value Field')}\n </label>\n <input\n type=\"text\"\n value={config.valueField \|\| ''}\n onChange={(e) => handleChange('valueField', e.target.value)}\n placeholder={t('bigconsole.widget.config.heatmap.valueFieldPlaceholder', 'e.g., tickets, count')}\n className={FIELD_CLASSES}\n />\n <p className=\"mt-1 text-xs text-text-secondary\">\n {t(\n 'bigconsole.widget.config.heatmap.valueFieldHelp',\n \"Left empty, the widget reads the parser's rows / columns / cells output directly.\"\n )}\n </p>\n </div>\n\n {/ Color scheme /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.heatmap.colorSchemeLabel', 'Color Scheme')}\n </label>\n <select\n value={config.colorScheme \|\| 'blue'}\n onChange={(e) => handleChange('colorScheme', e.target.value)}\n className={FIELD_CLASSES}\n >\n {COLOR_SCHEMES.map((scheme) => (\n <option key={scheme.value} value={scheme.value}>\n {scheme.label}\n </option>\n ))}\n </select>\n </div>\n\n {/ Decimals /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.heatmap.decimalPlacesLabel', 'Decimal Places')}\n </label>\n <input\n type=\"number\"\n min={0}\n max={6}\n value={config.decimals ?? 0}\n onChange={(e) => handleChange('decimals', Number(e.target.value))}\n className={FIELD_CLASSES}\n />\n </div>\n\n {/ Toggles */}\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showValues !== false}\n onChange={(e) => handleChange('showValues', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">\n {t('bigconsole.widget.config.heatmap.showValues', 'Show cell values')}\n </span>\n </label>\n\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showLegend !== false}\n onChange={(e) => handleChange('showLegend', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">\n {t('bigconsole.widget.config.heatmap.showLegend', 'Show color legend')}\n </span>\n </label>\n </div>\n );\n});\n\nexport default HeatmapConfig;\n"],"mappings":";;;;AAyBA,IAAM,IAAgB,sLAaT,IAAwC,EAAK,SAAuB,EAAE,WAAQ,eAAY;CACrG,IAAM,EAAE,SAAM,GAAS,EAEjB,IAAgB,QACd;EACJ;GAAE,OAAO;GAAQ,OAAO,EAAE,qDAAqD,OAAO;GAAE;EACxF;GAAE,OAAO;GAAS,OAAO,EAAE,sDAAsD,QAAQ;GAAE;EAC3F;GAAE,OAAO;GAAO,OAAO,EAAE,oDAAoD,MAAM;GAAE;EACtF,EACD,CAAC,EAAE,CACJ,EAEK,IAAe,GACU,GAAQ,MAAyB;AAC5D,IAAS;GAAE,GAAG;IAAS,IAAM;GAAO,CAAC;IAEvC,CAAC,GAAQ,EAAS,CACnB;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,WAAU;cACd,EAAE,oDAAoD,eAAe;IAChE,CAAA,EACR,kBAAC,SAAD;IACE,MAAK;IACL,OAAO,EAAO,cAAc;IAC5B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,MAAM;IAC3D,aAAa,EAAE,0DAA0D,qBAAqB;IAC9F,WAAW;IACX,CAAA,CACE,EAAA,CAAA;GAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,WAAU;cACd,EAAE,oDAAoD,eAAe;IAChE,CAAA,EACR,kBAAC,SAAD;IACE,MAAK;IACL,OAAO,EAAO,cAAc;IAC5B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,MAAM;IAC3D,aAAa,EAAE,0DAA0D,iBAAiB;IAC1F,WAAW;IACX,CAAA,CACE,EAAA,CAAA;GAEN,kBAAC,OAAD,EAAA,UAAA;IACE,kBAAC,SAAD;KAAO,WAAU;eACd,EAAE,oDAAoD,cAAc;KAC/D,CAAA;IACR,kBAAC,SAAD;KACE,MAAK;KACL,OAAO,EAAO,cAAc;KAC5B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,MAAM;KAC3D,aAAa,EAAE,0DAA0D,uBAAuB;KAChG,WAAW;KACX,CAAA;IACF,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,mDACA,oFACD;KACC,CAAA;IACA,EAAA,CAAA;GAGN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,WAAU;cACd,EAAE,qDAAqD,eAAe;IACjE,CAAA,EACR,kBAAC,UAAD;IACE,OAAO,EAAO,eAAe;IAC7B,WAAW,MAAM,EAAa,eAAe,EAAE,OAAO,MAAM;IAC5D,WAAW;cAEV,EAAc,KAAK,MAClB,kBAAC,UAAD;KAA2B,OAAO,EAAO;eACtC,EAAO;KACD,EAFI,EAAO,MAEX,CACT;IACK,CAAA,CACL,EAAA,CAAA;GAGN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,WAAU;cACd,EAAE,uDAAuD,iBAAiB;IACrE,CAAA,EACR,kBAAC,SAAD;IACE,MAAK;IACL,KAAK;IACL,KAAK;IACL,OAAO,EAAO,YAAY;IAC1B,WAAW,MAAM,EAAa,YAAY,OAAO,EAAE,OAAO,MAAM,CAAC;IACjE,WAAW;IACX,CAAA,CACE,EAAA,CAAA;GAGN,kBAAC,SAAD;~~IAAO~~,WAAU;~~cAAjB~~,CACE,kBAAC,SAAD;~~KACE~~,MAAK;~~KACL~~,SAAS,EAAO,eAAe;~~KAC~~/B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,QAAQ;~~KAC7D~~,WAAU;~~KAQV~~,CAAA,EACF,kBAAC,QAAD;~~KAAM~~,WAAU;~~eACb~~,EAAE,+CAA+C,mBAAmB;~~KAChE~~,CAAA,CACD;;~~GAER~~,kBAAC,SAAD;~~IAAO~~,WAAU;~~cAAjB~~,CACE,kBAAC,SAAD;~~KACE~~,MAAK;~~KACL~~,SAAS,EAAO,eAAe;~~KAC~~/B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,QAAQ;~~KAC7D~~,WAAU;~~KAQV~~,CAAA,EACF,kBAAC,QAAD;~~KAAM~~,WAAU;~~eACb~~,EAAE,+CAA+C,oBAAoB;~~KACjE~~,CAAA,CACD;;~~GACJ~~;;EAER"}
1	+ {"version":3,"file":"HeatmapConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/heatmap/HeatmapConfig.tsx"],"sourcesContent":["/*\n HeatmapConfig Component\n \n Configuration panel for Heatmap widgets.\n /\n\nimport { type FC, memo, useCallback, useMemo } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { HeatmapConfig as ConfigType } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface HeatmapConfigProps {\n /* Current configuration /\n config: ConfigType;\n /* Callback when config changes /\n onChange: (config: ConfigType) => void;\n}\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst FIELD_CLASSES = `\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n`;\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const HeatmapConfig: FC<HeatmapConfigProps> = memo(function HeatmapConfig({ config, onChange }) {\n const { t } = useI18n();\n\n const COLOR_SCHEMES = useMemo(\n () => [\n { value: 'blue', label: t('bigconsole.widget.config.heatmap.colorScheme.blue', 'Blue') },\n { value: 'green', label: t('bigconsole.widget.config.heatmap.colorScheme.green', 'Green') },\n { value: 'red', label: t('bigconsole.widget.config.heatmap.colorScheme.red', 'Red') },\n ],\n [t]\n );\n\n const handleChange = useCallback(\n <K extends keyof ConfigType>(key: K, value: ConfigType[K]) => {\n onChange({ ...config, [key]: value });\n },\n [config, onChange]\n );\n\n return (\n <div className=\"min-w-0 space-y-form-gap\">\n {/ Axis + value fields /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.heatmap.xAxisFieldLabel', 'X-Axis Field')}\n </label>\n <input\n type=\"text\"\n value={config.xAxisField \|\| ''}\n onChange={(e) => handleChange('xAxisField', e.target.value)}\n placeholder={t('bigconsole.widget.config.heatmap.xAxisFieldPlaceholder', 'e.g., hour, column')}\n className={FIELD_CLASSES}\n />\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.heatmap.yAxisFieldLabel', 'Y-Axis Field')}\n </label>\n <input\n type=\"text\"\n value={config.yAxisField \|\| ''}\n onChange={(e) => handleChange('yAxisField', e.target.value)}\n placeholder={t('bigconsole.widget.config.heatmap.yAxisFieldPlaceholder', 'e.g., day, row')}\n className={FIELD_CLASSES}\n />\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.heatmap.valueFieldLabel', 'Value Field')}\n </label>\n <input\n type=\"text\"\n value={config.valueField \|\| ''}\n onChange={(e) => handleChange('valueField', e.target.value)}\n placeholder={t('bigconsole.widget.config.heatmap.valueFieldPlaceholder', 'e.g., tickets, count')}\n className={FIELD_CLASSES}\n />\n <p className=\"mt-1 text-xs text-text-secondary\">\n {t(\n 'bigconsole.widget.config.heatmap.valueFieldHelp',\n \"Left empty, the widget reads the parser's rows / columns / cells output directly.\"\n )}\n </p>\n </div>\n\n {/ Color scheme /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.heatmap.colorSchemeLabel', 'Color Scheme')}\n </label>\n <select\n value={config.colorScheme \|\| 'blue'}\n onChange={(e) => handleChange('colorScheme', e.target.value)}\n className={FIELD_CLASSES}\n >\n {COLOR_SCHEMES.map((scheme) => (\n <option key={scheme.value} value={scheme.value}>\n {scheme.label}\n </option>\n ))}\n </select>\n </div>\n\n {/ Decimals /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.heatmap.decimalPlacesLabel', 'Decimal Places')}\n </label>\n <input\n type=\"number\"\n min={0}\n max={6}\n value={config.decimals ?? 0}\n onChange={(e) => handleChange('decimals', Number(e.target.value))}\n className={FIELD_CLASSES}\n />\n </div>\n\n {/ Toggles /}\n <div\n role=\"group\"\n aria-label=\"Display options\"\n className=\"space-y-3 border-t border-[var(--color-border-subtle)] pt-form-gap\"\n >\n {/ Toggles are a different KIND of control from the field stack above, so they\n get their own labelled group instead of being visually identical to it\n (BOFF-5636). */}\n <p className=\"text-xs font-bold uppercase tracking-wider text-text-secondary\">Display options</p>\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showValues !== false}\n onChange={(e) => handleChange('showValues', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">\n {t('bigconsole.widget.config.heatmap.showValues', 'Show cell values')}\n </span>\n </label>\n\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showLegend !== false}\n onChange={(e) => handleChange('showLegend', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">\n {t('bigconsole.widget.config.heatmap.showLegend', 'Show color legend')}\n </span>\n </label>\n </div>\n </div>\n );\n});\n\nexport default HeatmapConfig;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/iframe-widget/IframeWidget.js CHANGED Viewed

@@ -33,7 +33,7 @@ var a = e(function({ widget: e, data: a }) {
 			className: "text-center",
 			children: [
 				/* @__PURE__ */ n("svg", {
-					className: "w-12 h-12 mx-auto mb-2 text-text-tertiary",
+					className: "w-12 h-12 mx-auto mb-2 text-text-muted",
 					fill: "none",
 					stroke: "currentColor",
 					viewBox: "0 0 24 24",
@@ -46,7 +46,7 @@ var a = e(function({ widget: e, data: a }) {
 				}),
 				/* @__PURE__ */ n("p", { children: "No URL configured" }),
 				/* @__PURE__ */ n("p", {
-					className: "text-xs text-text-tertiary mt-1",
+					className: "text-xs text-text-muted mt-1",
 					children: "Configure a URL to embed content"
 				})
 			]

package/dist/bigconsole/components/widgets/iframe-widget/IframeWidget.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IframeWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/iframe-widget/IframeWidget.tsx"],"sourcesContent":["/*\n IframeWidget Component\n \n Displays embedded iframe content.\n \n Data flow: DataSink → Parser → Widget\n * - Static configuration lives in `widget.config` (url, sandbox, allowFullscreen, title).\n * - Dynamic parser output is passed in `data` and overrides matching config keys.\n * - This lets the iframe render from manual configuration, parser-driven data, or both.\n /\n\nimport { type FC, memo, useMemo } from 'react';\nimport type { Widget } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface IframeWidgetProps {\n widget: Widget;\n data?: IframeData;\n}\n\nexport interface IframeData {\n url?: string;\n title?: string;\n allowFullscreen?: boolean;\n sandbox?: string;\n loading?: 'lazy' \| 'eager';\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\n/\n Resolve the effective iframe configuration.\n \n Priority (highest first):\n * 1. Parser-provided `data` fields\n * 2. User-configured `widget.config` fields\n * 3. Safe defaults (empty URL, restricted sandbox, no fullscreen)\n \n This is the function the widget tests exercise directly; keeping the merge\n * logic pure makes the DataSink → Parser → Widget contract explicit.\n */\nexport function resolveIframeConfig(\n widgetConfig: Record<string, unknown> \| undefined,\n data: IframeData \| undefined\n): Required<IframeData> & { hasUrl: boolean } {\n const cfg = widgetConfig ?? {};\n\n const coercedBoolean = (value: unknown): boolean \| undefined => {\n if (typeof value === 'boolean') return value;\n if (typeof value === 'string') return value.toLowerCase() === 'true';\n return undefined;\n };\n\n const coercedLoading = (value: unknown): 'lazy' \| 'eager' => {\n if (value === 'eager' \|\| value === 'lazy') return value;\n return 'lazy';\n };\n\n const url = (data?.url ?? cfg.url ?? '') as string;\n const title = (data?.title ?? cfg.title ?? 'Embedded Content') as string;\n const allowFullscreen = coercedBoolean(data?.allowFullscreen ?? cfg.allowFullscreen) ?? false;\n const sandbox = ((data?.sandbox ?? cfg.sandbox) as string \| undefined) ?? 'allow-scripts allow-same-origin';\n const loading = coercedLoading(data?.loading ?? cfg.loading);\n\n return {\n url,\n title,\n allowFullscreen,\n sandbox,\n loading,\n hasUrl: typeof url === 'string' && url.length > 0,\n };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const IframeWidget: FC<IframeWidgetProps> = memo(function IframeWidget({ widget, data }) {\n const config = useMemo(() => resolveIframeConfig(widget.config, data), [widget.config, data]);\n\n if (!config.hasUrl) {\n return (\n <div className=\"flex items-center justify-center h-full text-text-secondary text-sm\">\n <div className=\"text-center\">\n <svg\n className=\"w-12 h-12 mx-auto mb-2 text-text-~~tertiary~~\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\"\n />\n </svg>\n <p>No URL configured</p>\n <p className=\"text-xs text-text-~~tertiary~~ mt-1\">Configure a URL to embed content</p>\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"h-full w-full\">\n <iframe\n src={config.url}\n title={config.title}\n className=\"w-full h-full border-0 rounded\"\n allowFullScreen={config.allowFullscreen}\n sandbox={config.sandbox}\n loading={config.loading}\n />\n </div>\n );\n});\n\nexport default IframeWidget;\n"],"mappings":";;;AA8CA,SAAgB,EACd,GACA,GAC4C;CAC5C,IAAM,IAAM,KAAgB,EAAE,EAExB,KAAkB,MAAwC;AAC9D,MAAI,OAAO,KAAU,UAAW,QAAO;AACvC,MAAI,OAAO,KAAU,SAAU,QAAO,EAAM,aAAa,KAAK;IAI1D,KAAkB,MAClB,MAAU,WAAW,MAAU,SAAe,IAC3C,QAGH,IAAO,GAAM,OAAO,EAAI,OAAO;AAMrC,QAAO;EACL;EACA,OAPa,GAAM,SAAS,EAAI,SAAS;EAQzC,iBAPsB,EAAe,GAAM,mBAAmB,EAAI,gBAAgB,IAAI;EAQtF,SAPgB,GAAM,WAAW,EAAI,WAAmC;EAQxE,SAPc,EAAe,GAAM,WAAW,EAAI,QAAQ;EAQ1D,QAAQ,OAAO,KAAQ,YAAY,EAAI,SAAS;EACjD;;AAOH,IAAa,IAAsC,EAAK,SAAsB,EAAE,WAAQ,WAAQ;CAC9F,IAAM,IAAS,QAAc,EAAoB,EAAO,QAAQ,EAAK,EAAE,CAAC,EAAO,QAAQ,EAAK,CAAC;~~AA0B7F~~,~~QAxBK~~,EAAO,~~SAyBV~~,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,UAAD;GACE,KAAK,EAAO;GACZ,OAAO,EAAO;GACd,WAAU;GACV,iBAAiB,EAAO;GACxB,SAAS,EAAO;GAChB,SAAS,EAAO;GAChB,CAAA;EACE,CAAA,~~GAhCJ~~,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;~~KACE~~,WAAU;~~KACV~~,MAAK;~~KACL~~,QAAO;~~KACP~~,SAAQ;~~eAER~~,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IACN,kBAAC,KAAD,EAAA,UAAG,qBAAqB,CAAA;IACxB,kBAAC,KAAD;KAAG,WAAU;~~eAAkC~~;KAAoC,CAAA;~~IAC/E~~;;EACF,CAAA;EAgBV"}
1	+ {"version":3,"file":"IframeWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/iframe-widget/IframeWidget.tsx"],"sourcesContent":["/*\n IframeWidget Component\n \n Displays embedded iframe content.\n \n Data flow: DataSink → Parser → Widget\n * - Static configuration lives in `widget.config` (url, sandbox, allowFullscreen, title).\n * - Dynamic parser output is passed in `data` and overrides matching config keys.\n * - This lets the iframe render from manual configuration, parser-driven data, or both.\n /\n\nimport { type FC, memo, useMemo } from 'react';\nimport type { Widget } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface IframeWidgetProps {\n widget: Widget;\n data?: IframeData;\n}\n\nexport interface IframeData {\n url?: string;\n title?: string;\n allowFullscreen?: boolean;\n sandbox?: string;\n loading?: 'lazy' \| 'eager';\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\n/\n Resolve the effective iframe configuration.\n \n Priority (highest first):\n * 1. Parser-provided `data` fields\n * 2. User-configured `widget.config` fields\n * 3. Safe defaults (empty URL, restricted sandbox, no fullscreen)\n \n This is the function the widget tests exercise directly; keeping the merge\n * logic pure makes the DataSink → Parser → Widget contract explicit.\n */\nexport function resolveIframeConfig(\n widgetConfig: Record<string, unknown> \| undefined,\n data: IframeData \| undefined\n): Required<IframeData> & { hasUrl: boolean } {\n const cfg = widgetConfig ?? {};\n\n const coercedBoolean = (value: unknown): boolean \| undefined => {\n if (typeof value === 'boolean') return value;\n if (typeof value === 'string') return value.toLowerCase() === 'true';\n return undefined;\n };\n\n const coercedLoading = (value: unknown): 'lazy' \| 'eager' => {\n if (value === 'eager' \|\| value === 'lazy') return value;\n return 'lazy';\n };\n\n const url = (data?.url ?? cfg.url ?? '') as string;\n const title = (data?.title ?? cfg.title ?? 'Embedded Content') as string;\n const allowFullscreen = coercedBoolean(data?.allowFullscreen ?? cfg.allowFullscreen) ?? false;\n const sandbox = ((data?.sandbox ?? cfg.sandbox) as string \| undefined) ?? 'allow-scripts allow-same-origin';\n const loading = coercedLoading(data?.loading ?? cfg.loading);\n\n return {\n url,\n title,\n allowFullscreen,\n sandbox,\n loading,\n hasUrl: typeof url === 'string' && url.length > 0,\n };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const IframeWidget: FC<IframeWidgetProps> = memo(function IframeWidget({ widget, data }) {\n const config = useMemo(() => resolveIframeConfig(widget.config, data), [widget.config, data]);\n\n if (!config.hasUrl) {\n return (\n <div className=\"flex items-center justify-center h-full text-text-secondary text-sm\">\n <div className=\"text-center\">\n <svg className=\"w-12 h-12 mx-auto mb-2 text-text-muted\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\"\n />\n </svg>\n <p>No URL configured</p>\n <p className=\"text-xs text-text-muted mt-1\">Configure a URL to embed content</p>\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"h-full w-full\">\n <iframe\n src={config.url}\n title={config.title}\n className=\"w-full h-full border-0 rounded\"\n allowFullScreen={config.allowFullscreen}\n sandbox={config.sandbox}\n loading={config.loading}\n />\n </div>\n );\n});\n\nexport default IframeWidget;\n"],"mappings":";;;AA8CA,SAAgB,EACd,GACA,GAC4C;CAC5C,IAAM,IAAM,KAAgB,EAAE,EAExB,KAAkB,MAAwC;AAC9D,MAAI,OAAO,KAAU,UAAW,QAAO;AACvC,MAAI,OAAO,KAAU,SAAU,QAAO,EAAM,aAAa,KAAK;IAI1D,KAAkB,MAClB,MAAU,WAAW,MAAU,SAAe,IAC3C,QAGH,IAAO,GAAM,OAAO,EAAI,OAAO;AAMrC,QAAO;EACL;EACA,OAPa,GAAM,SAAS,EAAI,SAAS;EAQzC,iBAPsB,EAAe,GAAM,mBAAmB,EAAI,gBAAgB,IAAI;EAQtF,SAPgB,GAAM,WAAW,EAAI,WAAmC;EAQxE,SAPc,EAAe,GAAM,WAAW,EAAI,QAAQ;EAQ1D,QAAQ,OAAO,KAAQ,YAAY,EAAI,SAAS;EACjD;;AAOH,IAAa,IAAsC,EAAK,SAAsB,EAAE,WAAQ,WAAQ;CAC9F,IAAM,IAAS,QAAc,EAAoB,EAAO,QAAQ,EAAK,EAAE,CAAC,EAAO,QAAQ,EAAK,CAAC;AAqB7F,QAnBK,EAAO,SAoBV,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,UAAD;GACE,KAAK,EAAO;GACZ,OAAO,EAAO;GACd,WAAU;GACV,iBAAiB,EAAO;GACxB,SAAS,EAAO;GAChB,SAAS,EAAO;GAChB,CAAA;EACE,CAAA,GA3BJ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;KAAyC,MAAK;KAAO,QAAO;KAAe,SAAQ;eAChG,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IACN,kBAAC,KAAD,EAAA,UAAG,qBAAqB,CAAA;IACxB,kBAAC,KAAD;KAAG,WAAU;eAA+B;KAAoC,CAAA;IAC5E;;EACF,CAAA;EAgBV"}