@burdenoff/microfe-bigconsole 2026.1103.3 → 2026.1103.5

package/dist/bigconsole/components/DrilldownModal.js

@@ -1,55 +1,67 @@
 import e from "../store/drilldownStore.js";
-import { SECTION_FOCUS_RING as t } from "./common/sectionStyles.js";
+import { GlobalFilterFieldsFragmentDoc as t } from "../../generated/wspace-operations.js";
+import { SECTION_FOCUS_RING as n } from "./common/sectionStyles.js";
 import "./common/index.js";
-import { getVisibleDrilldownParams as n } from "../utils/drilldownParams.js";
-import { memo as r, useCallback as i, useRef as a } from "react";
-import { ResponsiveDialog as o, ResponsiveDialogContent as s, ResponsiveDialogDescription as c, ResponsiveDialogTitle as l } from "@burdenoff/fe-libs/ui";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { getDrilldownParamSummary as r } from "../utils/drilldownParams.js";
+import { memo as i, useCallback as a, useContext as o, useRef as s } from "react";
+import { ResponsiveDialog as c, ResponsiveDialogContent as l, ResponsiveDialogDescription as u, ResponsiveDialogTitle as d } from "@burdenoff/fe-libs/ui";
+import { useI18n as f } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { getApolloContext as p } from "@apollo/client/react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/bigconsole/components/DrilldownModal.tsx
-var f = r(function({ renderDashboard: r, onClose: f }) {
-	let m = a(null), h = e((e) => e.isOpen), g = e((e) => e.dashboardId), _ = e((e) => e.params), v = e((e) => e.history), y = e((e) => e.closeModal), b = e((e) => e.popDrilldown), x = i(() => {
-		y(), f?.();
-	}, [y, f]), S = i(() => {
-		b();
-	}, [b]);
-	return !h || !g ? null : /* @__PURE__ */ u(o, {
-		open: h,
+var g = i(function({ renderDashboard: i, onClose: g }) {
+	let { t: v } = f(), { client: y } = o(p()), b = s(null), x = e((e) => e.isOpen), S = e((e) => e.dashboardId), C = e((e) => e.params), w = e((e) => e.history), T = e((e) => e.closeModal), E = e((e) => e.popDrilldown), D = a(() => {
+		T(), g?.();
+	}, [T, g]), O = a(() => {
+		E();
+	}, [E]);
+	if (!x || !S) return null;
+	let k = r(C, (e) => y?.cache.readFragment({
+		id: y.cache.identify({
+			__typename: "BigConsoleGlobalFilter",
+			id: e
+		}),
+		fragment: t,
+		returnPartialData: !0
+	}));
+	return /* @__PURE__ */ m(c, {
+		open: x,
 		onOpenChange: (e) => {
-			e || x();
+			e || D();
 		},
-		children: /* @__PURE__ */ d(s, {
+		children: /* @__PURE__ */ h(l, {
 			showCloseButton: !1,
 			onOpenAutoFocus: () => {
 				let e = document.activeElement;
-				e instanceof HTMLElement && e !== document.body && !e.closest("[role=\"dialog\"]") && (m.current = e);
+				e instanceof HTMLElement && e !== document.body && !e.closest("[role=\"dialog\"]") && (b.current = e);
 			},
 			onCloseAutoFocus: (e) => {
-				e.preventDefault(), m.current?.isConnected && m.current.focus();
+				e.preventDefault(), b.current?.isConnected && b.current.focus();
 			},
 			className: "flex w-full md:w-[calc(100%-2rem)] max-w-5xl flex-col gap-0 overflow-hidden rounded-card bg-bg-surface p-0 sm:max-w-5xl",
 			style: { maxHeight: "calc(100dvh - 2rem)" },
 			children: [
-				/* @__PURE__ */ u(c, {
+				/* @__PURE__ */ m(u, {
 					className: "sr-only",
 					children: "Explore the linked dashboard and return to the previous drilldown level."
 				}),
-				/* @__PURE__ */ d("div", {
+				/* @__PURE__ */ h("div", {
 					className: "flex flex-shrink-0 flex-wrap items-center justify-between gap-control-gap border-b border-[var(--color-border-subtle)] px-4 py-3",
-					children: [/* @__PURE__ */ d("div", {
+					children: [/* @__PURE__ */ h("div", {
 						className: "flex min-w-0 items-center gap-3",
 						children: [
-							v.length > 0 && /* @__PURE__ */ u("button", {
+							w.length > 0 && /* @__PURE__ */ m("button", {
 								type: "button",
-								onClick: S,
+								onClick: O,
 								className: "flex h-control-md w-[var(--size-controlHeight-md)] shrink-0 items-center justify-center rounded-button motion-safe:transition-colors hover:bg-bg-sunken focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
 								title: "Go back",
 								"aria-label": "Go back",
-								children: /* @__PURE__ */ u("svg", {
+								children: /* @__PURE__ */ m("svg", {
 									className: "w-5 h-5 text-text-secondary",
 									fill: "none",
 									stroke: "currentColor",
 									viewBox: "0 0 24 24",
-									children: /* @__PURE__ */ u("path", {
+									children: /* @__PURE__ */ m("path", {
 										strokeLinecap: "round",
 										strokeLinejoin: "round",
 										strokeWidth: 2,
@@ -57,33 +69,33 @@ var f = r(function({ renderDashboard: r, onClose: f }) {
 									})
 								})
 							}),
-							/* @__PURE__ */ u(l, {
+							/* @__PURE__ */ m(d, {
 								className: "truncate text-sm font-semibold text-text-primary",
 								children: "Drilldown View"
 							}),
-							v.length > 0 && /* @__PURE__ */ d("span", {
+							w.length > 0 && /* @__PURE__ */ h("span", {
 								className: "text-xs text-text-muted",
 								children: [
 									"(",
-									v.length + 1,
+									w.length + 1,
 									" level",
-									v.length > 0 ? "s" : "",
+									w.length > 0 ? "s" : "",
 									" deep)"
 								]
 							})
 						]
-					}), /* @__PURE__ */ u("button", {
+					}), /* @__PURE__ */ m("button", {
 						type: "button",
-						onClick: x,
-						className: `flex h-control-md w-[var(--size-controlHeight-md)] shrink-0 items-center justify-center rounded-button motion-safe:transition-colors hover:bg-bg-sunken ${t}`,
+						onClick: D,
+						className: `flex h-control-md w-[var(--size-controlHeight-md)] shrink-0 items-center justify-center rounded-button motion-safe:transition-colors hover:bg-bg-sunken ${n}`,
 						title: "Close (Esc)",
 						"aria-label": "Close drilldown",
-						children: /* @__PURE__ */ u("svg", {
+						children: /* @__PURE__ */ m("svg", {
 							className: "w-5 h-5 text-text-secondary",
 							fill: "none",
 							stroke: "currentColor",
 							viewBox: "0 0 24 24",
-							children: /* @__PURE__ */ u("path", {
+							children: /* @__PURE__ */ m("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								strokeWidth: 2,
@@ -92,30 +104,29 @@ var f = r(function({ renderDashboard: r, onClose: f }) {
 						})
 					})]
 				}),
-				/* @__PURE__ */ u("div", {
+				/* @__PURE__ */ m("div", {
 					className: "min-h-0 flex-1 overflow-y-auto bg-bg-sunken p-4",
-					children: r ? r(g, _) : /* @__PURE__ */ u(p, {})
+					children: i ? i(S, C) : /* @__PURE__ */ m(_, {})
 				}),
-				/* @__PURE__ */ u("div", {
+				/* @__PURE__ */ m("div", {
 					className: "flex-shrink-0 border-t border-[var(--color-border-subtle)] px-4 py-2",
-					children: /* @__PURE__ */ d("div", {
+					children: /* @__PURE__ */ h("div", {
 						className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-xs text-text-muted",
-						children: [/* @__PURE__ */ d("span", { children: [
-							"Parameters:",
-							" ",
-							n(_).map(([e]) => e).join(", ") || "None"
-						] }), /* @__PURE__ */ u("span", { children: "Press Esc to close" })]
+						children: [/* @__PURE__ */ m("span", {
+							className: "min-w-0 break-words",
+							children: v("bigconsole.drilldown.parameters", "Parameters: {{parameters}}", { parameters: k || v("bigconsole.drilldown.noParameters", "None") })
+						}), /* @__PURE__ */ m("span", { children: "Press Esc to close" })]
 					})
 				})
 			]
 		})
 	});
 });
-function p() {
-	return /* @__PURE__ */ u("div", {
+function _() {
+	return /* @__PURE__ */ m("div", {
 		className: "flex items-center justify-center h-full text-sm text-text-secondary",
 		children: "Unable to load drilldown content. Please try again."
 	});
 }
 //#endregion
-export { f as DrilldownModal, f as default };
+export { g as DrilldownModal, g as default };

package/dist/bigconsole/components/widgets/chart/charts/FunnelChart.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { ChartConfig, ChartData } from './types';
 export interface FunnelChartProps {
-    /** Chart data (should be sorted by value descending) */
+    /** Chart data in funnel stage order */
     data: ChartData[];
     /** Chart configuration */
     config: ChartConfig;

package/dist/bigconsole/components/widgets/chart/charts/FunnelChart.js

@@ -1,68 +1,83 @@
 import { ChartTooltip as e } from "../ChartTooltip.js";
-import { memo as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Cell as i, Funnel as a, FunnelChart as o, LabelList as s, ResponsiveContainer as c, Tooltip as l } from "recharts";
+import { funnelStages as t } from "./funnelData.js";
+import { memo as n } from "react";
+import { useI18n as r } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Cell as o, Funnel as s, FunnelChart as c, LabelList as l, ResponsiveContainer as u, Tooltip as d } from "recharts";
 //#region src/bigconsole/components/widgets/chart/charts/FunnelChart.tsx
-var u = [
+var f = [
 	"var(--color-chart-1)",
 	"var(--color-chart-2)",
 	"var(--color-chart-3)",
 	"var(--color-chart-4)",
 	"var(--color-chart-5)"
-], d = t(function({ data: t = [], config: d, dataKey: f = "value", nameKey: p = "name", onDataClick: m }) {
-	let h = (e) => typeof e == "number" ? new Intl.NumberFormat("en-US", {
+], p = n(function({ data: n = [], config: p, dataKey: m = "value", nameKey: h = "name", onDataClick: g }) {
+	let { t: _, locale: v } = r(), y = t(n, m, h), b = (e) => typeof e == "number" ? new Intl.NumberFormat("en-US", {
 		notation: e >= 1e4 ? "compact" : "standard",
 		maximumFractionDigits: 2
 	}).format(e) : String(e);
-	if (!t?.length) return null;
-	let g = t.map((e, n) => {
-		if (n === 0) return {
-			...e,
-			rate: 100
-		};
-		let r = t[n - 1][f], i = e[f], a = r > 0 ? i / r * 100 : 0;
-		return {
-			...e,
-			rate: a
-		};
+	if (!y || !y.length || y.every((e) => e.value === 0)) return /* @__PURE__ */ i("div", {
+		role: "status",
+		className: "flex items-center justify-center h-full text-text-secondary text-sm p-4",
+		children: y ? _("bigconsole.widgets.funnel.noCounts", "No funnel counts to display. Connect data with at least one count greater than zero.") : _("bigconsole.widgets.funnel.invalidFields", "Each funnel row needs a label in \"{{labelField}}\" and a non-negative number in \"{{valueField}}\". Choose the label and value fields in Style.", {
+			labelField: h,
+			valueField: m
+		})
 	});
-	return /* @__PURE__ */ n(c, {
-		width: "100%",
-		height: "100%",
-		children: /* @__PURE__ */ r(o, { children: [/* @__PURE__ */ n(l, { content: /* @__PURE__ */ n(e, {
-			valueFormatter: h,
-			labelFormatter: (e) => String(e)
-		}) }), /* @__PURE__ */ r(a, {
-			dataKey: f,
-			nameKey: p,
-			data: g,
-			isAnimationActive: !0,
-			onClick: ((e, t) => {
-				m && e && m(e, t);
-			}),
-			children: [
-				/* @__PURE__ */ n(s, {
-					position: "right",
-					fill: "var(--color-text-primary)",
-					stroke: "none",
-					dataKey: p,
-					fontSize: 12
-				}),
-				/* @__PURE__ */ n(s, {
-					position: "center",
-					fill: "var(--color-text-on-primary, #ffffff)",
-					stroke: "none",
-					formatter: (e) => h(e),
-					fontSize: 14,
-					fontWeight: 600
-				}),
-				g.map((e, t) => /* @__PURE__ */ n(i, {
-					fill: d.colors?.[t] || u[t % u.length],
-					style: { cursor: m ? "pointer" : "default" }
-				}, `cell-${t}`))
-			]
-		})] })
+	let x = new Intl.NumberFormat(v, {
+		style: "percent",
+		maximumFractionDigits: 1
+	}), S = y.map((e) => ({
+		...e.row,
+		__conversionLabel: `${e.label} (${e.conversion === void 0 ? "—" : x.format(e.conversion)})`
+	}));
+	return /* @__PURE__ */ a("div", {
+		className: "flex flex-col h-full",
+		children: [/* @__PURE__ */ i("p", {
+			className: "text-xs text-text-secondary mb-2",
+			children: _("bigconsole.widgets.funnel.conversionBasis", "Conversion from previous stage; first stage is the baseline.")
+		}), /* @__PURE__ */ i("div", {
+			className: "flex-1 min-h-0",
+			children: /* @__PURE__ */ i(u, {
+				width: "100%",
+				height: "100%",
+				children: /* @__PURE__ */ a(c, { children: [/* @__PURE__ */ i(d, { content: /* @__PURE__ */ i(e, {
+					valueFormatter: b,
+					labelFormatter: (e) => String(e)
+				}) }), /* @__PURE__ */ a(s, {
+					dataKey: m,
+					nameKey: h,
+					data: S,
+					isAnimationActive: !0,
+					onClick: (e, t) => {
+						t !== void 0 && n[t] && g?.(n[t], t);
+					},
+					children: [
+						/* @__PURE__ */ i(l, {
+							position: "right",
+							fill: "var(--color-text-primary)",
+							stroke: "none",
+							dataKey: "__conversionLabel",
+							fontSize: 12
+						}),
+						/* @__PURE__ */ i(l, {
+							position: "center",
+							fill: "var(--color-text-on-primary, #ffffff)",
+							stroke: "none",
+							dataKey: m,
+							formatter: (e) => b(e),
+							fontSize: 14,
+							fontWeight: 600
+						}),
+						S.map((e, t) => /* @__PURE__ */ i(o, {
+							fill: p.colors?.[t] || f[t % f.length],
+							style: { cursor: g ? "pointer" : "default" }
+						}, `cell-${t}`))
+					]
+				})] })
+			})
+		})]
 	});
 });
 //#endregion
-export { d as FunnelChart, d as default };
+export { p as FunnelChart, p as default };

package/dist/bigconsole/components/widgets/chart/charts/funnelData.d.ts

@@ -0,0 +1,8 @@
+import { ChartData } from './types';
+/** Keep the caller's stage order; conversions compare adjacent stages. */
+export declare function funnelStages(data: ChartData[], valueField: string, labelField: string): {
+    row: ChartData;
+    value: number;
+    label: string;
+    conversion: number | undefined;
+}[] | null;

package/dist/bigconsole/components/widgets/chart/charts/funnelData.js

@@ -0,0 +1,17 @@
+//#region src/bigconsole/components/widgets/chart/charts/funnelData.ts
+function e(e, t, n) {
+	return !Array.isArray(e) || e.some((e) => {
+		let r = e?.[t], i = e?.[n];
+		return typeof r != "number" || !Number.isFinite(r) || r < 0 || !["string", "number"].includes(typeof i) || String(i).trim() === "";
+	}) ? null : e.map((r, i) => {
+		let a = r[t], o = e[Math.max(0, i - 1)][t];
+		return {
+			row: r,
+			value: a,
+			label: String(r[n]),
+			conversion: o > 0 ? a / o : void 0
+		};
+	});
+}
+//#endregion
+export { e as funnelStages };

package/dist/bigconsole/utils/drilldownParams.d.ts

@@ -1,2 +1,8 @@
 /** Display only meaningful context; the original drilldown parameters remain unchanged. */
 export declare function getVisibleDrilldownParams(params: Record<string, unknown>): Array<[string, unknown]>;
+export interface DrilldownFilterLabel {
+    name?: string;
+    config?: Record<string, unknown>;
+}
+/** Resolve display metadata only; never rewrite filter IDs or values used by widgets. */
+export declare function getDrilldownParamSummary(params: Record<string, unknown>, readFilter?: (id: string) => DrilldownFilterLabel | null | undefined): string;

package/dist/bigconsole/utils/drilldownParams.js

@@ -2,5 +2,23 @@
 function e(e) {
 	return Object.entries(e).filter(([e, t]) => e.startsWith("__") || t == null ? !1 : typeof t == "string" ? t.trim().length > 0 : !Array.isArray(t) || t.length > 0);
 }
+function t(e, n) {
+	if (Array.isArray(e)) return e.map((e) => t(e, n)).join(", ");
+	if (typeof e == "object" && e) {
+		let r = e;
+		return typeof r.label == "string" ? r.label : "value" in r ? t(r.value, n) : JSON.stringify(e);
+	}
+	if (Array.isArray(n)) {
+		let t = n.find((t) => t && typeof t == "object" && t.value === e && typeof t.label == "string");
+		if (t) return t.label;
+	}
+	return String(e);
+}
+function n(n, r = () => void 0) {
+	return e(n).map(([e, n]) => {
+		let i = r(e);
+		return `${i?.name || e}: ${t(n, i?.config?.options)}`;
+	}).join("; ");
+}
 //#endregion
-export { e as getVisibleDrilldownParams };
+export { n as getDrilldownParamSummary, e as getVisibleDrilldownParams };