npm - @burdenoff/microfe-bigconsole - Versions diffs - 2026.805.2 → 2026.812.1 - Mend

@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

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 (253) hide show

package/dist/bigconsole/components/widgets/chart/ChartConfig.js CHANGED Viewed

@@ -1,246 +1,253 @@
-import { memo as e, useCallback as t } from "react";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { memo as e, useCallback as t, useMemo as n } from "react";
+import { useI18n as r } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/chart/ChartConfig.tsx
-var a = [
-	{
-		value: "line",
-		label: "Line Chart"
-	},
-	{
-		value: "bar",
-		label: "Bar Chart"
-	},
-	{
-		value: "area",
-		label: "Area Chart"
-	},
-	{
-		value: "pie",
-		label: "Pie Chart"
-	},
-	{
-		value: "funnel",
-		label: "Funnel Chart"
-	}
-], o = [
-	{
-		value: "monotone",
-		label: "Smooth"
-	},
-	{
-		value: "linear",
-		label: "Linear"
-	},
-	{
-		value: "step",
-		label: "Step"
-	},
-	{
-		value: "natural",
-		label: "Natural"
-	}
-], s = [
-	{
-		value: "top",
-		label: "Top"
-	},
-	{
-		value: "bottom",
-		label: "Bottom"
-	},
-	{
-		value: "left",
-		label: "Left"
-	},
-	{
-		value: "right",
-		label: "Right"
-	}
-], c = e(function({ config: e, onChange: c }) {
-	let l = t((t, n) => {
-		c({
+var s = e(function({ config: e, onChange: s }) {
+	let { t: c } = r(), l = n(() => [
+		{
+			value: "line",
+			label: c("bigconsole.widget.config.chart.type.line", "Line Chart")
+		},
+		{
+			value: "bar",
+			label: c("bigconsole.widget.config.chart.type.bar", "Bar Chart")
+		},
+		{
+			value: "area",
+			label: c("bigconsole.widget.config.chart.type.area", "Area Chart")
+		},
+		{
+			value: "pie",
+			label: c("bigconsole.widget.config.chart.type.pie", "Pie Chart")
+		},
+		{
+			value: "funnel",
+			label: c("bigconsole.widget.config.chart.type.funnel", "Funnel Chart")
+		}
+	], [c]), u = n(() => [
+		{
+			value: "monotone",
+			label: c("bigconsole.widget.config.chart.curve.smooth", "Smooth")
+		},
+		{
+			value: "linear",
+			label: c("bigconsole.widget.config.chart.curve.linear", "Linear")
+		},
+		{
+			value: "step",
+			label: c("bigconsole.widget.config.chart.curve.step", "Step")
+		},
+		{
+			value: "natural",
+			label: c("bigconsole.widget.config.chart.curve.natural", "Natural")
+		}
+	], [c]), d = n(() => [
+		{
+			value: "top",
+			label: c("bigconsole.widget.config.chart.legendPosition.top", "Top")
+		},
+		{
+			value: "bottom",
+			label: c("bigconsole.widget.config.chart.legendPosition.bottom", "Bottom")
+		},
+		{
+			value: "left",
+			label: c("bigconsole.widget.config.chart.legendPosition.left", "Left")
+		},
+		{
+			value: "right",
+			label: c("bigconsole.widget.config.chart.legendPosition.right", "Right")
+		}
+	], [c]), f = t((t, n) => {
+		s({
 			...e,
 			[t]: n
 		});
-	}, [e, c]), u = e.chartType === "pie" || e.chartType === "funnel";
-	return /* @__PURE__ */ i("div", {
-		className: "space-y-4",
+	}, [e, s]), p = e.chartType === "pie" || e.chartType === "funnel";
+	return /* @__PURE__ */ o("div", {
+		className: "min-w-0 space-y-form-gap",
 		children: [
-			/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
+			/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
 				className: "block text-sm font-medium text-text-primary mb-1",
-				children: "Chart Type"
-			}), /* @__PURE__ */ r("select", {
+				children: c("bigconsole.widget.config.chart.chartTypeLabel", "Chart Type")
+			}), /* @__PURE__ */ a("select", {
 				value: e.chartType || "line",
-				onChange: (e) => l("chartType", e.target.value),
+				onChange: (e) => f("chartType", e.target.value),
 				className: "\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          ",
-				children: a.map((e) => /* @__PURE__ */ r("option", {
+				children: l.map((e) => /* @__PURE__ */ a("option", {
 					value: e.value,
 					children: e.label
 				}, e.value))
 			})] }),
-			!u && /* @__PURE__ */ i(n, { children: [
-				/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
+			!p && /* @__PURE__ */ o(i, { children: [
+				/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
 					className: "block text-sm font-medium text-text-primary mb-1",
-					children: "X-Axis Field"
-				}), /* @__PURE__ */ r("input", {
+					children: c("bigconsole.widget.config.chart.xAxisFieldLabel", "X-Axis Field")
+				}), /* @__PURE__ */ a("input", {
 					type: "text",
 					value: e.xAxisField || "",
-					onChange: (e) => l("xAxisField", e.target.value),
-					placeholder: "e.g., date, category",
+					onChange: (e) => f("xAxisField", e.target.value),
+					placeholder: c("bigconsole.widget.config.chart.xAxisFieldPlaceholder", "e.g., date, category"),
 					className: "\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              "
 				})] }),
-				/* @__PURE__ */ i("div", {
-					className: "grid grid-cols-2 gap-3",
-					children: [/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
+				/* @__PURE__ */ o("div", {
+					className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
+					children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
 						className: "block text-sm font-medium text-text-primary mb-1",
-						children: "X-Axis Label"
-					}), /* @__PURE__ */ r("input", {
+						children: c("bigconsole.widget.config.chart.xAxisLabelLabel", "X-Axis Label")
+					}), /* @__PURE__ */ a("input", {
 						type: "text",
 						value: e.xAxisLabel || "",
-						onChange: (e) => l("xAxisLabel", e.target.value),
-						placeholder: "Optional",
+						onChange: (e) => f("xAxisLabel", e.target.value),
+						placeholder: c("bigconsole.widget.config.chart.optionalPlaceholder", "Optional"),
 						className: "\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                "
-					})] }), /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
+					})] }), /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
 						className: "block text-sm font-medium text-text-primary mb-1",
-						children: "Y-Axis Label"
-					}), /* @__PURE__ */ r("input", {
+						children: c("bigconsole.widget.config.chart.yAxisLabelLabel", "Y-Axis Label")
+					}), /* @__PURE__ */ a("input", {
 						type: "text",
 						value: e.yAxisLabel || "",
-						onChange: (e) => l("yAxisLabel", e.target.value),
-						placeholder: "Optional",
+						onChange: (e) => f("yAxisLabel", e.target.value),
+						placeholder: c("bigconsole.widget.config.chart.optionalPlaceholder", "Optional"),
 						className: "\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                "
 					})] })]
 				}),
-				(e.chartType === "line" || e.chartType === "area") && /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
+				(e.chartType === "line" || e.chartType === "area") && /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
 					className: "block text-sm font-medium text-text-primary mb-1",
-					children: "Curve Type"
-				}), /* @__PURE__ */ r("select", {
+					children: c("bigconsole.widget.config.chart.curveTypeLabel", "Curve Type")
+				}), /* @__PURE__ */ a("select", {
 					value: e.curveType || "monotone",
-					onChange: (e) => l("curveType", e.target.value),
+					onChange: (e) => f("curveType", e.target.value),
 					className: "\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                ",
-					children: o.map((e) => /* @__PURE__ */ r("option", {
+					children: u.map((e) => /* @__PURE__ */ a("option", {
 						value: e.value,
 						children: e.label
 					}, e.value))
 				})] })
 			] }),
-			u && /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i("div", {
-				className: "grid grid-cols-2 gap-3",
-				children: [/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
+			p && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("div", {
+				className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
+				children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
 					className: "block text-sm font-medium text-text-primary mb-1",
-					children: "Value Field"
-				}), /* @__PURE__ */ r("input", {
+					children: c("bigconsole.widget.config.chart.valueFieldLabel", "Value Field")
+				}), /* @__PURE__ */ a("input", {
 					type: "text",
 					value: e.valueField || "",
-					onChange: (e) => l("valueField", e.target.value),
-					placeholder: "e.g., value",
+					onChange: (e) => f("valueField", e.target.value),
+					placeholder: c("bigconsole.widget.config.chart.valueFieldPlaceholder", "e.g., value"),
 					className: "\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                "
-				})] }), /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
+				})] }), /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
 					className: "block text-sm font-medium text-text-primary mb-1",
-					children: "Label Field"
-				}), /* @__PURE__ */ r("input", {
+					children: c("bigconsole.widget.config.chart.labelFieldLabel", "Label Field")
+				}), /* @__PURE__ */ a("input", {
 					type: "text",
 					value: e.labelField || "",
-					onChange: (e) => l("labelField", e.target.value),
-					placeholder: "e.g., name",
+					onChange: (e) => f("labelField", e.target.value),
+					placeholder: c("bigconsole.widget.config.chart.labelFieldPlaceholder", "e.g., name"),
 					className: "\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                "
 				})] })]
-			}), e.chartType === "pie" && /* @__PURE__ */ i("label", {
+			}), e.chartType === "pie" && /* @__PURE__ */ o("label", {
 				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ r("input", {
+				children: [/* @__PURE__ */ a("input", {
 					type: "checkbox",
 					checked: e.showAsDonut === !0,
-					onChange: (e) => l("showAsDonut", e.target.checked),
+					onChange: (e) => f("showAsDonut", 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__ */ r("span", {
+				}), /* @__PURE__ */ a("span", {
 					className: "text-sm text-text-primary",
-					children: "Show as Donut"
+					children: c("bigconsole.widget.config.chart.showAsDonut", "Show as Donut")
 				})]
 			})] }),
-			/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
+			/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
 				className: "block text-sm font-medium text-text-primary mb-1",
-				children: "Legend Position"
-			}), /* @__PURE__ */ r("select", {
+				children: c("bigconsole.widget.config.chart.legendPositionLabel", "Legend Position")
+			}), /* @__PURE__ */ a("select", {
 				value: e.legendPosition || "bottom",
-				onChange: (e) => l("legendPosition", e.target.value),
+				onChange: (e) => f("legendPosition", e.target.value),
 				className: "\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          ",
-				children: s.map((e) => /* @__PURE__ */ r("option", {
+				children: d.map((e) => /* @__PURE__ */ a("option", {
 					value: e.value,
 					children: e.label
 				}, e.value))
 			})] }),
-			!u && /* @__PURE__ */ i("div", { children: [
-				/* @__PURE__ */ r("label", {
+			!p && /* @__PURE__ */ o("div", { children: [
+				/* @__PURE__ */ a("label", {
 					className: "block text-sm font-medium text-text-primary mb-1",
-					children: "Fields to Display"
+					children: c("bigconsole.widget.config.chart.fieldsToDisplayLabel", "Fields to Display")
 				}),
-				/* @__PURE__ */ r("p", {
+				/* @__PURE__ */ a("p", {
 					className: "text-xs text-text-secondary mb-2",
-					children: "Select which numeric fields to show as chart series. Leave empty to show all."
+					children: c("bigconsole.widget.config.chart.fieldsToDisplayHelp", "Select which numeric fields to show as chart series. Leave empty to show all.")
 				}),
-				/* @__PURE__ */ r("input", {
+				/* @__PURE__ */ a("input", {
 					type: "text",
 					value: e.selectedFields?.join(", ") || "",
 					onChange: (e) => {
 						let t = e.target.value.trim(), n = t ? t.split(",").map((e) => e.trim()).filter(Boolean) : [];
-						l("selectedFields", n.length > 0 ? n : void 0);
+						f("selectedFields", n.length > 0 ? n : void 0);
 					},
-					placeholder: "e.g., revenue, orders, users (comma-separated)",
+					placeholder: c("bigconsole.widget.config.chart.fieldsToDisplayPlaceholder", "e.g., revenue, orders, users (comma-separated)"),
 					className: "\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            "
 				}),
-				/* @__PURE__ */ r("p", {
-					className: "text-xs text-text-tertiary mt-1",
-					children: "Enter field names separated by commas"
+				/* @__PURE__ */ a("p", {
+					className: "text-xs text-text-muted mt-1",
+					children: c("bigconsole.widget.config.chart.fieldsToDisplayHint", "Enter field names separated by commas")
 				})
 			] }),
-			/* @__PURE__ */ i("div", {
-				className: "space-y-3",
+			/* @__PURE__ */ o("div", {
+				role: "group",
+				"aria-label": "Display options",
+				className: "space-y-3 border-t border-[var(--color-border-subtle)] pt-form-gap",
 				children: [
-					/* @__PURE__ */ i("label", {
+					/* @__PURE__ */ a("p", {
+						className: "text-xs font-bold uppercase tracking-wider text-text-secondary",
+						children: "Display options"
+					}),
+					/* @__PURE__ */ o("label", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ r("input", {
+						children: [/* @__PURE__ */ a("input", {
 							type: "checkbox",
 							checked: e.showGrid !== !1,
-							onChange: (e) => l("showGrid", e.target.checked),
+							onChange: (e) => f("showGrid", 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__ */ r("span", {
+						}), /* @__PURE__ */ a("span", {
 							className: "text-sm text-text-primary",
-							children: "Show Grid"
+							children: c("bigconsole.widget.config.chart.showGrid", "Show Grid")
 						})]
 					}),
-					/* @__PURE__ */ i("label", {
+					/* @__PURE__ */ o("label", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ r("input", {
+						children: [/* @__PURE__ */ a("input", {
 							type: "checkbox",
 							checked: e.showLegend !== !1,
-							onChange: (e) => l("showLegend", e.target.checked),
+							onChange: (e) => f("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__ */ r("span", {
+						}), /* @__PURE__ */ a("span", {
 							className: "text-sm text-text-primary",
-							children: "Show Legend"
+							children: c("bigconsole.widget.config.chart.showLegend", "Show Legend")
 						})]
 					}),
-					!u && /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i("label", {
+					!p && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("label", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ r("input", {
+						children: [/* @__PURE__ */ a("input", {
 							type: "checkbox",
 							checked: e.showDataPoints === !0,
-							onChange: (e) => l("showDataPoints", e.target.checked),
+							onChange: (e) => f("showDataPoints", 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__ */ r("span", {
+						}), /* @__PURE__ */ a("span", {
 							className: "text-sm text-text-primary",
-							children: "Show Data Points"
+							children: c("bigconsole.widget.config.chart.showDataPoints", "Show Data Points")
 						})]
-					}), (e.chartType === "bar" || e.chartType === "area") && /* @__PURE__ */ i("label", {
+					}), (e.chartType === "bar" || e.chartType === "area") && /* @__PURE__ */ o("label", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ r("input", {
+						children: [/* @__PURE__ */ a("input", {
 							type: "checkbox",
 							checked: e.stacked === !0,
-							onChange: (e) => l("stacked", e.target.checked),
+							onChange: (e) => f("stacked", 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__ */ r("span", {
+						}), /* @__PURE__ */ a("span", {
 							className: "text-sm text-text-primary",
-							children: "Stacked"
+							children: c("bigconsole.widget.config.chart.stacked", "Stacked")
 						})]
 					})] })
 				]
@@ -249,6 +256,6 @@ var a = [
 	});
 });
 //#endregion
-export { c as default };
+export { s as default };
 //# sourceMappingURL=ChartConfig.js.map

package/dist/bigconsole/components/widgets/chart/ChartConfig.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChartConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/chart/ChartConfig.tsx"],"sourcesContent":["/*\n ChartConfig Component\n \n Configuration panel for Chart widgets.\n /\n\nimport { type FC, memo, useCallback } from 'react';\nimport type { ChartConfig as ConfigType } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ChartConfigProps {\n /* Current configuration /\n config: ConfigType;\n /* Callback when config changes /\n onChange: (config: ConfigType) => void;\n}\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst CHART_TYPES = [\n { value: 'line', label: 'Line Chart' },\n { value: 'bar', label: 'Bar Chart' },\n { value: 'area', label: 'Area Chart' },\n { value: 'pie', label: 'Pie Chart' },\n { value: 'funnel', label: 'Funnel Chart' },\n];\n\nconst CURVE_TYPES = [\n { value: 'monotone', label: 'Smooth' },\n { value: 'linear', label: 'Linear' },\n { value: 'step', label: 'Step' },\n { value: 'natural', label: 'Natural' },\n];\n\nconst LEGEND_POSITIONS = [\n { value: 'top', label: 'Top' },\n { value: 'bottom', label: 'Bottom' },\n { value: 'left', label: 'Left' },\n { value: 'right', label: 'Right' },\n];\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ChartConfig: FC<ChartConfigProps> = memo(function ChartConfig({ config, onChange }) {\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 const isPieOrFunnel = config.chartType === 'pie' \|\| config.chartType === 'funnel';\n\n return (\n <div className=\"space-y-4\">\n {/ Chart Type /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Chart Type</label>\n <select\n value={config.chartType \|\| 'line'}\n onChange={(e) => handleChange('chartType', e.target.value as ConfigType['chartType'])}\n className=\"\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 {CHART_TYPES.map((type) => (\n <option key={type.value} value={type.value}>\n {type.label}\n </option>\n ))}\n </select>\n </div>\n\n {/ Axis Fields (for Line/Bar/Area) /}\n {!isPieOrFunnel && (\n <>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">X-Axis Field</label>\n <input\n type=\"text\"\n value={config.xAxisField \|\| ''}\n onChange={(e) => handleChange('xAxisField', e.target.value)}\n placeholder=\"e.g., date, category\"\n className=\"\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 </div>\n\n <div className=\"grid grid-cols-2 gap-3\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">X-Axis Label</label>\n <input\n type=\"text\"\n value={config.xAxisLabel \|\| ''}\n onChange={(e) => handleChange('xAxisLabel', e.target.value)}\n placeholder=\"Optional\"\n className=\"\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 </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Y-Axis Label</label>\n <input\n type=\"text\"\n value={config.yAxisLabel \|\| ''}\n onChange={(e) => handleChange('yAxisLabel', e.target.value)}\n placeholder=\"Optional\"\n className=\"\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 </div>\n </div>\n\n {/ Curve Type (for Line/Area) /}\n {(config.chartType === 'line' \|\| config.chartType === 'area') && (\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Curve Type</label>\n <select\n value={config.curveType \|\| 'monotone'}\n onChange={(e) => handleChange('curveType', e.target.value as ConfigType['curveType'])}\n className=\"\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 {CURVE_TYPES.map((type) => (\n <option key={type.value} value={type.value}>\n {type.label}\n </option>\n ))}\n </select>\n </div>\n )}\n </>\n )}\n\n {/ Pie/Funnel specific fields /}\n {isPieOrFunnel && (\n <>\n <div className=\"grid grid-cols-2 gap-3\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Value Field</label>\n <input\n type=\"text\"\n value={config.valueField \|\| ''}\n onChange={(e) => handleChange('valueField', e.target.value)}\n placeholder=\"e.g., value\"\n className=\"\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 </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Label Field</label>\n <input\n type=\"text\"\n value={config.labelField \|\| ''}\n onChange={(e) => handleChange('labelField', e.target.value)}\n placeholder=\"e.g., name\"\n className=\"\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 </div>\n </div>\n\n {config.chartType === 'pie' && (\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showAsDonut === true}\n onChange={(e) => handleChange('showAsDonut', 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\">Show as Donut</span>\n </label>\n )}\n </>\n )}\n\n {/ Legend Position /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Legend Position</label>\n <select\n value={config.legendPosition \|\| 'bottom'}\n onChange={(e) => handleChange('legendPosition', e.target.value as ConfigType['legendPosition'])}\n className=\"\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 {LEGEND_POSITIONS.map((pos) => (\n <option key={pos.value} value={pos.value}>\n {pos.label}\n </option>\n ))}\n </select>\n </div>\n\n {/ Selected Fields - Multi-select for choosing which numeric fields to display /}\n {!isPieOrFunnel && (\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Fields to Display</label>\n <p className=\"text-xs text-text-secondary mb-2\">\n Select which numeric fields to show as chart series. Leave empty to show all.\n </p>\n <input\n type=\"text\"\n value={(config.selectedFields as string[] \| undefined)?.join(', ') \|\| ''}\n onChange={(e) => {\n const value = e.target.value.trim();\n const fields = value\n ? value\n .split(',')\n .map((f) => f.trim())\n .filter(Boolean)\n : [];\n handleChange('selectedFields', fields.length > 0 ? fields : undefined);\n }}\n placeholder=\"e.g., revenue, orders, users (comma-separated)\"\n className=\"\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 <p className=\"text-xs text-text-tertiary mt-1\">Enter field names separated by commas</p>\n </div>\n )}\n\n {/ Toggle Options */}\n <div className=\"space-y-3\">\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showGrid !== false}\n onChange={(e) => handleChange('showGrid', 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\">Show Grid</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\">Show Legend</span>\n </label>\n\n {!isPieOrFunnel && (\n <>\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showDataPoints === true}\n onChange={(e) => handleChange('showDataPoints', 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\">Show Data Points</span>\n </label>\n\n {(config.chartType === 'bar' \|\| config.chartType === 'area') && (\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.stacked === true}\n onChange={(e) => handleChange('stacked', 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\">Stacked</span>\n </label>\n )}\n </>\n )}\n </div>\n </div>\n );\n});\n\nexport default ChartConfig;\n"],"mappings":"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"}
1	+ {"version":3,"file":"ChartConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/chart/ChartConfig.tsx"],"sourcesContent":["/*\n ChartConfig Component\n \n Configuration panel for Chart widgets.\n /\n\nimport { type FC, memo, useCallback, useMemo } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { ChartConfig as ConfigType } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ChartConfigProps {\n /* Current configuration /\n config: ConfigType;\n /* Callback when config changes /\n onChange: (config: ConfigType) => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ChartConfig: FC<ChartConfigProps> = memo(function ChartConfig({ config, onChange }) {\n const { t } = useI18n();\n\n const CHART_TYPES = useMemo(\n () => [\n { value: 'line', label: t('bigconsole.widget.config.chart.type.line', 'Line Chart') },\n { value: 'bar', label: t('bigconsole.widget.config.chart.type.bar', 'Bar Chart') },\n { value: 'area', label: t('bigconsole.widget.config.chart.type.area', 'Area Chart') },\n { value: 'pie', label: t('bigconsole.widget.config.chart.type.pie', 'Pie Chart') },\n { value: 'funnel', label: t('bigconsole.widget.config.chart.type.funnel', 'Funnel Chart') },\n ],\n [t]\n );\n\n const CURVE_TYPES = useMemo(\n () => [\n { value: 'monotone', label: t('bigconsole.widget.config.chart.curve.smooth', 'Smooth') },\n { value: 'linear', label: t('bigconsole.widget.config.chart.curve.linear', 'Linear') },\n { value: 'step', label: t('bigconsole.widget.config.chart.curve.step', 'Step') },\n { value: 'natural', label: t('bigconsole.widget.config.chart.curve.natural', 'Natural') },\n ],\n [t]\n );\n\n const LEGEND_POSITIONS = useMemo(\n () => [\n { value: 'top', label: t('bigconsole.widget.config.chart.legendPosition.top', 'Top') },\n { value: 'bottom', label: t('bigconsole.widget.config.chart.legendPosition.bottom', 'Bottom') },\n { value: 'left', label: t('bigconsole.widget.config.chart.legendPosition.left', 'Left') },\n { value: 'right', label: t('bigconsole.widget.config.chart.legendPosition.right', 'Right') },\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 const isPieOrFunnel = config.chartType === 'pie' \|\| config.chartType === 'funnel';\n\n return (\n <div className=\"min-w-0 space-y-form-gap\">\n {/ Chart Type /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.chart.chartTypeLabel', 'Chart Type')}\n </label>\n <select\n value={config.chartType \|\| 'line'}\n onChange={(e) => handleChange('chartType', e.target.value as ConfigType['chartType'])}\n className=\"\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 {CHART_TYPES.map((type) => (\n <option key={type.value} value={type.value}>\n {type.label}\n </option>\n ))}\n </select>\n </div>\n\n {/ Axis Fields (for Line/Bar/Area) /}\n {!isPieOrFunnel && (\n <>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.chart.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.chart.xAxisFieldPlaceholder', 'e.g., date, category')}\n className=\"\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 </div>\n\n <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.chart.xAxisLabelLabel', 'X-Axis Label')}\n </label>\n <input\n type=\"text\"\n value={config.xAxisLabel \|\| ''}\n onChange={(e) => handleChange('xAxisLabel', e.target.value)}\n placeholder={t('bigconsole.widget.config.chart.optionalPlaceholder', 'Optional')}\n className=\"\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 </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.chart.yAxisLabelLabel', 'Y-Axis Label')}\n </label>\n <input\n type=\"text\"\n value={config.yAxisLabel \|\| ''}\n onChange={(e) => handleChange('yAxisLabel', e.target.value)}\n placeholder={t('bigconsole.widget.config.chart.optionalPlaceholder', 'Optional')}\n className=\"\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 </div>\n </div>\n\n {/ Curve Type (for Line/Area) /}\n {(config.chartType === 'line' \|\| config.chartType === 'area') && (\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.chart.curveTypeLabel', 'Curve Type')}\n </label>\n <select\n value={config.curveType \|\| 'monotone'}\n onChange={(e) => handleChange('curveType', e.target.value as ConfigType['curveType'])}\n className=\"\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 {CURVE_TYPES.map((type) => (\n <option key={type.value} value={type.value}>\n {type.label}\n </option>\n ))}\n </select>\n </div>\n )}\n </>\n )}\n\n {/ Pie/Funnel specific fields /}\n {isPieOrFunnel && (\n <>\n <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.chart.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.chart.valueFieldPlaceholder', 'e.g., value')}\n className=\"\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 </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.chart.labelFieldLabel', 'Label Field')}\n </label>\n <input\n type=\"text\"\n value={config.labelField \|\| ''}\n onChange={(e) => handleChange('labelField', e.target.value)}\n placeholder={t('bigconsole.widget.config.chart.labelFieldPlaceholder', 'e.g., name')}\n className=\"\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 </div>\n </div>\n\n {config.chartType === 'pie' && (\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showAsDonut === true}\n onChange={(e) => handleChange('showAsDonut', 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.chart.showAsDonut', 'Show as Donut')}\n </span>\n </label>\n )}\n </>\n )}\n\n {/ Legend Position /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.chart.legendPositionLabel', 'Legend Position')}\n </label>\n <select\n value={config.legendPosition \|\| 'bottom'}\n onChange={(e) => handleChange('legendPosition', e.target.value as ConfigType['legendPosition'])}\n className=\"\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 {LEGEND_POSITIONS.map((pos) => (\n <option key={pos.value} value={pos.value}>\n {pos.label}\n </option>\n ))}\n </select>\n </div>\n\n {/ Selected Fields - Multi-select for choosing which numeric fields to display /}\n {!isPieOrFunnel && (\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.chart.fieldsToDisplayLabel', 'Fields to Display')}\n </label>\n <p className=\"text-xs text-text-secondary mb-2\">\n {t(\n 'bigconsole.widget.config.chart.fieldsToDisplayHelp',\n 'Select which numeric fields to show as chart series. Leave empty to show all.'\n )}\n </p>\n <input\n type=\"text\"\n value={(config.selectedFields as string[] \| undefined)?.join(', ') \|\| ''}\n onChange={(e) => {\n const value = e.target.value.trim();\n const fields = value\n ? value\n .split(',')\n .map((f) => f.trim())\n .filter(Boolean)\n : [];\n handleChange('selectedFields', fields.length > 0 ? fields : undefined);\n }}\n placeholder={t(\n 'bigconsole.widget.config.chart.fieldsToDisplayPlaceholder',\n 'e.g., revenue, orders, users (comma-separated)'\n )}\n className=\"\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 <p className=\"text-xs text-text-muted mt-1\">\n {t('bigconsole.widget.config.chart.fieldsToDisplayHint', 'Enter field names separated by commas')}\n </p>\n </div>\n )}\n\n {/ Toggle Options /}\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,\n so they get their own labelled group instead of being visually\n identical to it (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.showGrid !== false}\n onChange={(e) => handleChange('showGrid', 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\">{t('bigconsole.widget.config.chart.showGrid', 'Show Grid')}</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.chart.showLegend', 'Show Legend')}\n </span>\n </label>\n\n {!isPieOrFunnel && (\n <>\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showDataPoints === true}\n onChange={(e) => handleChange('showDataPoints', 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.chart.showDataPoints', 'Show Data Points')}\n </span>\n </label>\n\n {(config.chartType === 'bar' \|\| config.chartType === 'area') && (\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.stacked === true}\n onChange={(e) => handleChange('stacked', 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.chart.stacked', 'Stacked')}\n </span>\n </label>\n )}\n </>\n )}\n </div>\n </div>\n );\n});\n\nexport default ChartConfig;\n"],"mappings":"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"}