@burdenoff/microfe-bigconsole 2026.1103.11 → 2026.1104.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 (15) hide show
  1. package/dist/bigconsole/components/dashboard/LiveCanvasToggle.js +17 -16
  2. package/dist/bigconsole/components/embed/widgets/HeatmapEmbed.js +6 -3
  3. package/dist/bigconsole/components/widgets/chart/ChartConfig.js +130 -121
  4. package/dist/bigconsole/components/widgets/chart/ReferenceLinesEditor.d.ts +8 -0
  5. package/dist/bigconsole/components/widgets/chart/ReferenceLinesEditor.js +159 -0
  6. package/dist/bigconsole/components/widgets/chart/charts/referenceElements.d.ts +2 -1
  7. package/dist/bigconsole/components/widgets/chart/charts/referenceElements.js +8 -4
  8. package/dist/bigconsole/components/widgets/chart/referenceLineDraft.d.ts +29 -0
  9. package/dist/bigconsole/components/widgets/chart/referenceLineDraft.js +58 -0
  10. package/dist/bigconsole/components/widgets/heatmap/HeatmapWidget.d.ts +5 -0
  11. package/dist/bigconsole/components/widgets/heatmap/HeatmapWidget.js +81 -58
  12. package/dist/bigconsole/pages/DashboardViewPage.js +247 -238
  13. package/dist/bigconsole/utils/liveBoardRefresh.d.ts +31 -0
  14. package/dist/bigconsole/utils/liveBoardRefresh.js +7 -0
  15. package/package.json +1 -1
package/dist/bigconsole/components/dashboard/LiveCanvasToggle.js CHANGED
@@ -1,28 +1,29 @@
1
- import { memo as e } from "react";
2
- import { Radio as t } from "lucide-react";
3
- import { jsx as n, jsxs as r } from "react/jsx-runtime";
1
+ import { LIVE_DATA_REFRESH_SECONDS as e } from "../../utils/liveBoardRefresh.js";
2
+ import { memo as t } from "react";
3
+ import { Radio as n } from "lucide-react";
4
+ import { jsx as r, jsxs as i } from "react/jsx-runtime";
4
5
  //#region src/bigconsole/components/dashboard/LiveCanvasToggle.tsx
5
- var i = e(function({ isLive: e, onToggle: i }) {
6
- return /* @__PURE__ */ r("button", {
6
+ var a = t(function({ isLive: t, onToggle: a }) {
7
+ return /* @__PURE__ */ i("button", {
7
8
  type: "button",
8
- onClick: i,
9
- "aria-pressed": e,
9
+ onClick: a,
10
+ "aria-pressed": t,
10
11
  "data-testid": "live-canvas-toggle",
11
- "data-live": e ? "on" : "off",
12
- title: e ? "Live canvas on — new widgets and pages appear automatically, no reload needed" : "Turn on live canvas to watch the board update as the pipeline builds",
13
- className: ["inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors", e ? "bg-status-success-bg text-status-success-text border border-status-success-border" : "text-text-secondary border border-border-default hover:bg-bg-sunken"].join(" "),
14
- children: [e ? /* @__PURE__ */ r("span", {
12
+ "data-live": t ? "on" : "off",
13
+ title: t ? `Live canvas on — new widgets and pages appear automatically and widget data refreshes about every ${e} seconds, no reload needed` : `Turn on live canvas to watch the board update as the pipeline builds and refresh widget data about every ${e} seconds`,
14
+ className: ["inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors", t ? "bg-status-success-bg text-status-success-text border border-status-success-border" : "text-text-secondary border border-border-default hover:bg-bg-sunken"].join(" "),
15
+ children: [t ? /* @__PURE__ */ i("span", {
15
16
  className: "relative flex h-2.5 w-2.5 flex-shrink-0",
16
17
  "aria-hidden": "true",
17
- children: [/* @__PURE__ */ n("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-status-success-text opacity-60" }), /* @__PURE__ */ n("span", { className: "relative inline-flex h-2.5 w-2.5 rounded-full bg-status-success-text" })]
18
- }) : /* @__PURE__ */ n(t, {
18
+ children: [/* @__PURE__ */ r("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-status-success-text opacity-60" }), /* @__PURE__ */ r("span", { className: "relative inline-flex h-2.5 w-2.5 rounded-full bg-status-success-text" })]
19
+ }) : /* @__PURE__ */ r(n, {
19
20
  className: "h-3.5 w-3.5 flex-shrink-0",
20
21
  "aria-hidden": "true"
21
- }), /* @__PURE__ */ n("span", {
22
+ }), /* @__PURE__ */ r("span", {
22
23
  className: "uppercase tracking-wide",
23
- children: e ? "Live" : "Go live"
24
+ children: t ? "Live" : "Go live"
24
25
  })]
25
26
  });
26
27
  });
27
28
  //#endregion
28
- export { i as LiveCanvasToggle, i as default };
29
+ export { a as LiveCanvasToggle, a as default };
package/dist/bigconsole/components/embed/widgets/HeatmapEmbed.js CHANGED
@@ -23,9 +23,12 @@ function f({ widget: f }) {
23
23
  }, [f.data]);
24
24
  return /* @__PURE__ */ l(o, {
25
25
  title: f.title,
26
- children: /* @__PURE__ */ l(s, {
27
- widget: p,
28
- data: m
26
+ children: /* @__PURE__ */ l("div", {
27
+ className: "h-full p-3",
28
+ children: /* @__PURE__ */ l(s, {
29
+ widget: p,
30
+ data: m
31
+ })
29
32
  })
30
33
  });
31
34
  }
package/dist/bigconsole/components/widgets/chart/ChartConfig.js CHANGED
@@ -1,253 +1,262 @@
1
- import { memo as e, useCallback as t, useMemo as n } from "react";
2
- import { useI18n as r } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
3
- import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
1
+ import { normalizeReferenceLines as e, toReferenceLinesConfig as t } from "./referenceLineDraft.js";
2
+ import { ReferenceLinesEditor as n } from "./ReferenceLinesEditor.js";
3
+ import { memo as r, useCallback as i, useMemo as a } from "react";
4
+ import { useI18n as o } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
5
+ import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
4
6
  //#region src/bigconsole/components/widgets/chart/ChartConfig.tsx
5
- var s = e(function({ config: e, onChange: s }) {
6
- let { t: c } = r(), l = n(() => [
7
+ var u = r(function({ config: r, onChange: u }) {
8
+ let { t: d } = o(), f = a(() => [
7
9
  {
8
10
  value: "line",
9
- label: c("bigconsole.widget.config.chart.type.line", "Line Chart")
11
+ label: d("bigconsole.widget.config.chart.type.line", "Line Chart")
10
12
  },
11
13
  {
12
14
  value: "bar",
13
- label: c("bigconsole.widget.config.chart.type.bar", "Bar Chart")
15
+ label: d("bigconsole.widget.config.chart.type.bar", "Bar Chart")
14
16
  },
15
17
  {
16
18
  value: "area",
17
- label: c("bigconsole.widget.config.chart.type.area", "Area Chart")
19
+ label: d("bigconsole.widget.config.chart.type.area", "Area Chart")
18
20
  },
19
21
  {
20
22
  value: "pie",
21
- label: c("bigconsole.widget.config.chart.type.pie", "Pie Chart")
23
+ label: d("bigconsole.widget.config.chart.type.pie", "Pie Chart")
22
24
  },
23
25
  {
24
26
  value: "funnel",
25
- label: c("bigconsole.widget.config.chart.type.funnel", "Funnel Chart")
27
+ label: d("bigconsole.widget.config.chart.type.funnel", "Funnel Chart")
26
28
  }
27
- ], [c]), u = n(() => [
29
+ ], [d]), p = a(() => [
28
30
  {
29
31
  value: "monotone",
30
- label: c("bigconsole.widget.config.chart.curve.smooth", "Smooth")
32
+ label: d("bigconsole.widget.config.chart.curve.smooth", "Smooth")
31
33
  },
32
34
  {
33
35
  value: "linear",
34
- label: c("bigconsole.widget.config.chart.curve.linear", "Linear")
36
+ label: d("bigconsole.widget.config.chart.curve.linear", "Linear")
35
37
  },
36
38
  {
37
39
  value: "step",
38
- label: c("bigconsole.widget.config.chart.curve.step", "Step")
40
+ label: d("bigconsole.widget.config.chart.curve.step", "Step")
39
41
  },
40
42
  {
41
43
  value: "natural",
42
- label: c("bigconsole.widget.config.chart.curve.natural", "Natural")
44
+ label: d("bigconsole.widget.config.chart.curve.natural", "Natural")
43
45
  }
44
- ], [c]), d = n(() => [
46
+ ], [d]), m = a(() => [
45
47
  {
46
48
  value: "top",
47
- label: c("bigconsole.widget.config.chart.legendPosition.top", "Top")
49
+ label: d("bigconsole.widget.config.chart.legendPosition.top", "Top")
48
50
  },
49
51
  {
50
52
  value: "bottom",
51
- label: c("bigconsole.widget.config.chart.legendPosition.bottom", "Bottom")
53
+ label: d("bigconsole.widget.config.chart.legendPosition.bottom", "Bottom")
52
54
  },
53
55
  {
54
56
  value: "left",
55
- label: c("bigconsole.widget.config.chart.legendPosition.left", "Left")
57
+ label: d("bigconsole.widget.config.chart.legendPosition.left", "Left")
56
58
  },
57
59
  {
58
60
  value: "right",
59
- label: c("bigconsole.widget.config.chart.legendPosition.right", "Right")
61
+ label: d("bigconsole.widget.config.chart.legendPosition.right", "Right")
60
62
  }
61
- ], [c]), f = t((t, n) => {
62
- s({
63
- ...e,
64
- [t]: n
63
+ ], [d]), h = i((e, t) => {
64
+ u({
65
+ ...r,
66
+ [e]: t
65
67
  });
66
- }, [e, s]), p = e.chartType === "pie" || e.chartType === "funnel";
67
- return /* @__PURE__ */ o("div", {
68
+ }, [r, u]), g = r.chartType === "pie" || r.chartType === "funnel", _ = a(() => e(r.referenceLines), [r.referenceLines]);
69
+ return /* @__PURE__ */ l("div", {
68
70
  className: "min-w-0 space-y-form-gap",
69
71
  children: [
70
- /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
72
+ /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
71
73
  className: "block text-sm font-medium text-text-primary mb-1",
72
- children: c("bigconsole.widget.config.chart.chartTypeLabel", "Chart Type")
73
- }), /* @__PURE__ */ a("select", {
74
- value: e.chartType || "line",
75
- onChange: (e) => f("chartType", e.target.value),
74
+ children: d("bigconsole.widget.config.chart.chartTypeLabel", "Chart Type")
75
+ }), /* @__PURE__ */ c("select", {
76
+ value: r.chartType || "line",
77
+ onChange: (e) => h("chartType", e.target.value),
76
78
  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 ",
77
- children: l.map((e) => /* @__PURE__ */ a("option", {
79
+ children: f.map((e) => /* @__PURE__ */ c("option", {
78
80
  value: e.value,
79
81
  children: e.label
80
82
  }, e.value))
81
83
  })] }),
82
- !p && /* @__PURE__ */ o(i, { children: [
83
- /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
84
+ !g && /* @__PURE__ */ l(s, { children: [
85
+ /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
84
86
  className: "block text-sm font-medium text-text-primary mb-1",
85
- children: c("bigconsole.widget.config.chart.xAxisFieldLabel", "X-Axis Field")
86
- }), /* @__PURE__ */ a("input", {
87
+ children: d("bigconsole.widget.config.chart.xAxisFieldLabel", "X-Axis Field")
88
+ }), /* @__PURE__ */ c("input", {
87
89
  type: "text",
88
- value: e.xAxisField || "",
89
- onChange: (e) => f("xAxisField", e.target.value),
90
- placeholder: c("bigconsole.widget.config.chart.xAxisFieldPlaceholder", "e.g., date, category"),
90
+ value: r.xAxisField || "",
91
+ onChange: (e) => h("xAxisField", e.target.value),
92
+ placeholder: d("bigconsole.widget.config.chart.xAxisFieldPlaceholder", "e.g., date, category"),
91
93
  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 "
92
94
  })] }),
93
- /* @__PURE__ */ o("div", {
95
+ /* @__PURE__ */ l("div", {
94
96
  className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
95
- children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
97
+ children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
96
98
  className: "block text-sm font-medium text-text-primary mb-1",
97
- children: c("bigconsole.widget.config.chart.xAxisLabelLabel", "X-Axis Label")
98
- }), /* @__PURE__ */ a("input", {
99
+ children: d("bigconsole.widget.config.chart.xAxisLabelLabel", "X-Axis Label")
100
+ }), /* @__PURE__ */ c("input", {
99
101
  type: "text",
100
- value: e.xAxisLabel || "",
101
- onChange: (e) => f("xAxisLabel", e.target.value),
102
- placeholder: c("bigconsole.widget.config.chart.optionalPlaceholder", "Optional"),
102
+ value: r.xAxisLabel || "",
103
+ onChange: (e) => h("xAxisLabel", e.target.value),
104
+ placeholder: d("bigconsole.widget.config.chart.optionalPlaceholder", "Optional"),
103
105
  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 "
104
- })] }), /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
106
+ })] }), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
105
107
  className: "block text-sm font-medium text-text-primary mb-1",
106
- children: c("bigconsole.widget.config.chart.yAxisLabelLabel", "Y-Axis Label")
107
- }), /* @__PURE__ */ a("input", {
108
+ children: d("bigconsole.widget.config.chart.yAxisLabelLabel", "Y-Axis Label")
109
+ }), /* @__PURE__ */ c("input", {
108
110
  type: "text",
109
- value: e.yAxisLabel || "",
110
- onChange: (e) => f("yAxisLabel", e.target.value),
111
- placeholder: c("bigconsole.widget.config.chart.optionalPlaceholder", "Optional"),
111
+ value: r.yAxisLabel || "",
112
+ onChange: (e) => h("yAxisLabel", e.target.value),
113
+ placeholder: d("bigconsole.widget.config.chart.optionalPlaceholder", "Optional"),
112
114
  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 "
113
115
  })] })]
114
116
  }),
115
- (e.chartType === "line" || e.chartType === "area") && /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
117
+ (r.chartType === "line" || r.chartType === "area") && /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
116
118
  className: "block text-sm font-medium text-text-primary mb-1",
117
- children: c("bigconsole.widget.config.chart.curveTypeLabel", "Curve Type")
118
- }), /* @__PURE__ */ a("select", {
119
- value: e.curveType || "monotone",
120
- onChange: (e) => f("curveType", e.target.value),
119
+ children: d("bigconsole.widget.config.chart.curveTypeLabel", "Curve Type")
120
+ }), /* @__PURE__ */ c("select", {
121
+ value: r.curveType || "monotone",
122
+ onChange: (e) => h("curveType", e.target.value),
121
123
  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 ",
122
- children: u.map((e) => /* @__PURE__ */ a("option", {
124
+ children: p.map((e) => /* @__PURE__ */ c("option", {
123
125
  value: e.value,
124
126
  children: e.label
125
127
  }, e.value))
126
128
  })] })
127
129
  ] }),
128
- p && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("div", {
130
+ g && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ l("div", {
129
131
  className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
130
- children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
132
+ children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
131
133
  className: "block text-sm font-medium text-text-primary mb-1",
132
- children: c("bigconsole.widget.config.chart.valueFieldLabel", "Value Field")
133
- }), /* @__PURE__ */ a("input", {
134
+ children: d("bigconsole.widget.config.chart.valueFieldLabel", "Value Field")
135
+ }), /* @__PURE__ */ c("input", {
134
136
  type: "text",
135
- value: e.valueField || "",
136
- onChange: (e) => f("valueField", e.target.value),
137
- placeholder: c("bigconsole.widget.config.chart.valueFieldPlaceholder", "e.g., value"),
137
+ value: r.valueField || "",
138
+ onChange: (e) => h("valueField", e.target.value),
139
+ placeholder: d("bigconsole.widget.config.chart.valueFieldPlaceholder", "e.g., value"),
138
140
  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 "
139
- })] }), /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
141
+ })] }), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
140
142
  className: "block text-sm font-medium text-text-primary mb-1",
141
- children: c("bigconsole.widget.config.chart.labelFieldLabel", "Label Field")
142
- }), /* @__PURE__ */ a("input", {
143
+ children: d("bigconsole.widget.config.chart.labelFieldLabel", "Label Field")
144
+ }), /* @__PURE__ */ c("input", {
143
145
  type: "text",
144
- value: e.labelField || "",
145
- onChange: (e) => f("labelField", e.target.value),
146
- placeholder: c("bigconsole.widget.config.chart.labelFieldPlaceholder", "e.g., name"),
146
+ value: r.labelField || "",
147
+ onChange: (e) => h("labelField", e.target.value),
148
+ placeholder: d("bigconsole.widget.config.chart.labelFieldPlaceholder", "e.g., name"),
147
149
  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 "
148
150
  })] })]
149
- }), e.chartType === "pie" && /* @__PURE__ */ o("label", {
151
+ }), r.chartType === "pie" && /* @__PURE__ */ l("label", {
150
152
  className: "flex items-center gap-3",
151
- children: [/* @__PURE__ */ a("input", {
153
+ children: [/* @__PURE__ */ c("input", {
152
154
  type: "checkbox",
153
- checked: e.showAsDonut === !0,
154
- onChange: (e) => f("showAsDonut", e.target.checked),
155
+ checked: r.showAsDonut === !0,
156
+ onChange: (e) => h("showAsDonut", e.target.checked),
155
157
  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 "
156
- }), /* @__PURE__ */ a("span", {
158
+ }), /* @__PURE__ */ c("span", {
157
159
  className: "text-sm text-text-primary",
158
- children: c("bigconsole.widget.config.chart.showAsDonut", "Show as Donut")
160
+ children: d("bigconsole.widget.config.chart.showAsDonut", "Show as Donut")
159
161
  })]
160
162
  })] }),
161
- /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
163
+ /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
162
164
  className: "block text-sm font-medium text-text-primary mb-1",
163
- children: c("bigconsole.widget.config.chart.legendPositionLabel", "Legend Position")
164
- }), /* @__PURE__ */ a("select", {
165
- value: e.legendPosition || "bottom",
166
- onChange: (e) => f("legendPosition", e.target.value),
165
+ children: d("bigconsole.widget.config.chart.legendPositionLabel", "Legend Position")
166
+ }), /* @__PURE__ */ c("select", {
167
+ value: r.legendPosition || "bottom",
168
+ onChange: (e) => h("legendPosition", e.target.value),
167
169
  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 ",
168
- children: d.map((e) => /* @__PURE__ */ a("option", {
170
+ children: m.map((e) => /* @__PURE__ */ c("option", {
169
171
  value: e.value,
170
172
  children: e.label
171
173
  }, e.value))
172
174
  })] }),
173
- !p && /* @__PURE__ */ o("div", { children: [
174
- /* @__PURE__ */ a("label", {
175
+ !g && /* @__PURE__ */ l("div", { children: [
176
+ /* @__PURE__ */ c("label", {
175
177
  className: "block text-sm font-medium text-text-primary mb-1",
176
- children: c("bigconsole.widget.config.chart.fieldsToDisplayLabel", "Fields to Display")
178
+ children: d("bigconsole.widget.config.chart.fieldsToDisplayLabel", "Fields to Display")
177
179
  }),
178
- /* @__PURE__ */ a("p", {
180
+ /* @__PURE__ */ c("p", {
179
181
  className: "text-xs text-text-secondary mb-2",
180
- children: c("bigconsole.widget.config.chart.fieldsToDisplayHelp", "Select which numeric fields to show as chart series. Leave empty to show all.")
182
+ children: d("bigconsole.widget.config.chart.fieldsToDisplayHelp", "Select which numeric fields to show as chart series. Leave empty to show all.")
181
183
  }),
182
- /* @__PURE__ */ a("input", {
184
+ /* @__PURE__ */ c("input", {
183
185
  type: "text",
184
- value: e.selectedFields?.join(", ") || "",
186
+ value: r.selectedFields?.join(", ") || "",
185
187
  onChange: (e) => {
186
188
  let t = e.target.value.trim(), n = t ? t.split(",").map((e) => e.trim()).filter(Boolean) : [];
187
- f("selectedFields", n.length > 0 ? n : void 0);
189
+ h("selectedFields", n.length > 0 ? n : void 0);
188
190
  },
189
- placeholder: c("bigconsole.widget.config.chart.fieldsToDisplayPlaceholder", "e.g., revenue, orders, users (comma-separated)"),
191
+ placeholder: d("bigconsole.widget.config.chart.fieldsToDisplayPlaceholder", "e.g., revenue, orders, users (comma-separated)"),
190
192
  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 "
191
193
  }),
192
- /* @__PURE__ */ a("p", {
194
+ /* @__PURE__ */ c("p", {
193
195
  className: "text-xs text-text-muted mt-1",
194
- children: c("bigconsole.widget.config.chart.fieldsToDisplayHint", "Enter field names separated by commas")
196
+ children: d("bigconsole.widget.config.chart.fieldsToDisplayHint", "Enter field names separated by commas")
195
197
  })
196
198
  ] }),
197
- /* @__PURE__ */ o("div", {
199
+ !g && /* @__PURE__ */ c("div", {
200
+ className: "border-t border-[var(--color-border-subtle)] pt-form-gap",
201
+ children: /* @__PURE__ */ c(n, {
202
+ lines: _,
203
+ onChange: (e) => h("referenceLines", t(e))
204
+ })
205
+ }),
206
+ /* @__PURE__ */ l("div", {
198
207
  role: "group",
199
208
  "aria-label": "Display options",
200
209
  className: "space-y-3 border-t border-[var(--color-border-subtle)] pt-form-gap",
201
210
  children: [
202
- /* @__PURE__ */ a("p", {
211
+ /* @__PURE__ */ c("p", {
203
212
  className: "text-xs font-bold uppercase tracking-wider text-text-secondary",
204
213
  children: "Display options"
205
214
  }),
206
- /* @__PURE__ */ o("label", {
215
+ /* @__PURE__ */ l("label", {
207
216
  className: "flex items-center gap-3",
208
- children: [/* @__PURE__ */ a("input", {
217
+ children: [/* @__PURE__ */ c("input", {
209
218
  type: "checkbox",
210
- checked: e.showGrid !== !1,
211
- onChange: (e) => f("showGrid", e.target.checked),
219
+ checked: r.showGrid !== !1,
220
+ onChange: (e) => h("showGrid", e.target.checked),
212
221
  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 "
213
- }), /* @__PURE__ */ a("span", {
222
+ }), /* @__PURE__ */ c("span", {
214
223
  className: "text-sm text-text-primary",
215
- children: c("bigconsole.widget.config.chart.showGrid", "Show Grid")
224
+ children: d("bigconsole.widget.config.chart.showGrid", "Show Grid")
216
225
  })]
217
226
  }),
218
- /* @__PURE__ */ o("label", {
227
+ /* @__PURE__ */ l("label", {
219
228
  className: "flex items-center gap-3",
220
- children: [/* @__PURE__ */ a("input", {
229
+ children: [/* @__PURE__ */ c("input", {
221
230
  type: "checkbox",
222
- checked: e.showLegend !== !1,
223
- onChange: (e) => f("showLegend", e.target.checked),
231
+ checked: r.showLegend !== !1,
232
+ onChange: (e) => h("showLegend", e.target.checked),
224
233
  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 "
225
- }), /* @__PURE__ */ a("span", {
234
+ }), /* @__PURE__ */ c("span", {
226
235
  className: "text-sm text-text-primary",
227
- children: c("bigconsole.widget.config.chart.showLegend", "Show Legend")
236
+ children: d("bigconsole.widget.config.chart.showLegend", "Show Legend")
228
237
  })]
229
238
  }),
230
- !p && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("label", {
239
+ !g && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ l("label", {
231
240
  className: "flex items-center gap-3",
232
- children: [/* @__PURE__ */ a("input", {
241
+ children: [/* @__PURE__ */ c("input", {
233
242
  type: "checkbox",
234
- checked: e.showDataPoints === !0,
235
- onChange: (e) => f("showDataPoints", e.target.checked),
243
+ checked: r.showDataPoints === !0,
244
+ onChange: (e) => h("showDataPoints", e.target.checked),
236
245
  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 "
237
- }), /* @__PURE__ */ a("span", {
246
+ }), /* @__PURE__ */ c("span", {
238
247
  className: "text-sm text-text-primary",
239
- children: c("bigconsole.widget.config.chart.showDataPoints", "Show Data Points")
248
+ children: d("bigconsole.widget.config.chart.showDataPoints", "Show Data Points")
240
249
  })]
241
- }), (e.chartType === "bar" || e.chartType === "area") && /* @__PURE__ */ o("label", {
250
+ }), (r.chartType === "bar" || r.chartType === "area") && /* @__PURE__ */ l("label", {
242
251
  className: "flex items-center gap-3",
243
- children: [/* @__PURE__ */ a("input", {
252
+ children: [/* @__PURE__ */ c("input", {
244
253
  type: "checkbox",
245
- checked: e.stacked === !0,
246
- onChange: (e) => f("stacked", e.target.checked),
254
+ checked: r.stacked === !0,
255
+ onChange: (e) => h("stacked", e.target.checked),
247
256
  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 "
248
- }), /* @__PURE__ */ a("span", {
257
+ }), /* @__PURE__ */ c("span", {
249
258
  className: "text-sm text-text-primary",
250
- children: c("bigconsole.widget.config.chart.stacked", "Stacked")
259
+ children: d("bigconsole.widget.config.chart.stacked", "Stacked")
251
260
  })]
252
261
  })] })
253
262
  ]
@@ -256,4 +265,4 @@ var s = e(function({ config: e, onChange: s }) {
256
265
  });
257
266
  });
258
267
  //#endregion
259
- export { s as ChartConfig, s as default };
268
+ export { u as ChartConfig, u as default };
package/dist/bigconsole/components/widgets/chart/ReferenceLinesEditor.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { FC } from 'react';
2
+ import { ChartReferenceLine } from '../../../types';
3
+ export interface ReferenceLinesEditorProps {
4
+ lines: ChartReferenceLine[];
5
+ onChange: (lines: ChartReferenceLine[]) => void;
6
+ }
7
+ export declare const ReferenceLinesEditor: FC<ReferenceLinesEditorProps>;
8
+ export default ReferenceLinesEditor;
package/dist/bigconsole/components/widgets/chart/ReferenceLinesEditor.js ADDED
@@ -0,0 +1,159 @@
1
+ import { REFERENCE_LINE_INTENTS as e, addReferenceLine as t, parseReferenceValue as n, removeReferenceLine as r, updateReferenceLine as i } from "./referenceLineDraft.js";
2
+ import { memo as a, useCallback as o, useEffect as s, useState as c } from "react";
3
+ import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
4
+ import { jsx as u, jsxs as d } from "react/jsx-runtime";
5
+ //#region src/bigconsole/components/widgets/chart/ReferenceLinesEditor.tsx
6
+ var f = "w-full min-w-0 px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg";
7
+ function p({ id: e, value: t, onCommit: r, allowEmpty: i, placeholder: a }) {
8
+ let [o, l] = c(t === void 0 ? "" : String(t));
9
+ return s(() => {
10
+ l((e) => n(e) === (t ?? null) ? e : t === void 0 ? "" : String(t));
11
+ }, [t]), /* @__PURE__ */ u("input", {
12
+ id: e,
13
+ type: "number",
14
+ inputMode: "decimal",
15
+ step: "any",
16
+ value: o,
17
+ placeholder: a,
18
+ onChange: (e) => {
19
+ l(e.target.value);
20
+ let t = n(e.target.value);
21
+ t === null ? i && e.target.value.trim() === "" && r(void 0) : r(t);
22
+ },
23
+ onBlur: () => l(t === void 0 ? "" : String(t)),
24
+ className: f
25
+ });
26
+ }
27
+ var m = a(function({ lines: n, onChange: a }) {
28
+ let { t: s } = l(), c = o((e) => ({
29
+ danger: s("bigconsole.widget.config.chart.referenceLines.color.danger", "Red (danger)"),
30
+ warning: s("bigconsole.widget.config.chart.referenceLines.color.warning", "Amber (warning)"),
31
+ success: s("bigconsole.widget.config.chart.referenceLines.color.success", "Green (success)"),
32
+ info: s("bigconsole.widget.config.chart.referenceLines.color.info", "Blue (info)"),
33
+ neutral: s("bigconsole.widget.config.chart.referenceLines.color.neutral", "Grey (neutral)")
34
+ })[e], [s]), m = (e, t) => a(i(n, e, t)), h = n.length >= 10;
35
+ return /* @__PURE__ */ d("div", {
36
+ className: "min-w-0 space-y-3",
37
+ "data-testid": "chart-reference-lines",
38
+ children: [
39
+ /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
40
+ className: "block text-sm font-medium text-text-primary",
41
+ children: s("bigconsole.widget.config.chart.referenceLines.title", "Reference lines")
42
+ }), /* @__PURE__ */ u("p", {
43
+ className: "text-xs text-text-secondary",
44
+ children: s("bigconsole.widget.config.chart.referenceLines.help", "Draw a target, limit or threshold across the chart. Add an upper value to shade a band.")
45
+ })] }),
46
+ n.map((t, i) => {
47
+ let o = `chart-ref-line-${i}`, l = i + 1;
48
+ return /* @__PURE__ */ d("fieldset", {
49
+ className: "min-w-0 space-y-2 rounded-md border border-[var(--color-border-subtle)] p-3",
50
+ "data-testid": o,
51
+ children: [
52
+ /* @__PURE__ */ d("legend", {
53
+ className: "px-1 text-xs font-medium text-text-secondary",
54
+ children: [s("bigconsole.widget.config.chart.referenceLines.itemLegend", "Line {{number}}", { number: l }), t.axis === "x" ? ` · ${s("bigconsole.widget.config.chart.referenceLines.xAxis", "X axis")}` : ""]
55
+ }),
56
+ /* @__PURE__ */ d("div", {
57
+ className: "grid grid-cols-1 gap-2 sm:grid-cols-2",
58
+ children: [
59
+ /* @__PURE__ */ d("div", {
60
+ className: "min-w-0",
61
+ children: [/* @__PURE__ */ u("label", {
62
+ htmlFor: `${o}-value`,
63
+ className: "mb-1 block text-xs font-medium text-text-primary",
64
+ children: s("bigconsole.widget.config.chart.referenceLines.value", "Value")
65
+ }), /* @__PURE__ */ u(p, {
66
+ id: `${o}-value`,
67
+ value: t.value,
68
+ onCommit: (e) => e !== void 0 && m(i, { value: e })
69
+ })]
70
+ }),
71
+ /* @__PURE__ */ d("div", {
72
+ className: "min-w-0",
73
+ children: [/* @__PURE__ */ u("label", {
74
+ htmlFor: `${o}-value2`,
75
+ className: "mb-1 block text-xs font-medium text-text-primary",
76
+ children: s("bigconsole.widget.config.chart.referenceLines.value2", "Band upper value")
77
+ }), /* @__PURE__ */ u(p, {
78
+ id: `${o}-value2`,
79
+ value: t.value2,
80
+ allowEmpty: !0,
81
+ placeholder: s("bigconsole.widget.config.chart.optionalPlaceholder", "Optional"),
82
+ onCommit: (e) => m(i, { value2: e })
83
+ })]
84
+ }),
85
+ /* @__PURE__ */ d("div", {
86
+ className: "min-w-0",
87
+ children: [/* @__PURE__ */ u("label", {
88
+ htmlFor: `${o}-label`,
89
+ className: "mb-1 block text-xs font-medium text-text-primary",
90
+ children: s("bigconsole.widget.config.chart.referenceLines.label", "Label")
91
+ }), /* @__PURE__ */ u("input", {
92
+ id: `${o}-label`,
93
+ type: "text",
94
+ value: t.label ?? "",
95
+ placeholder: s("bigconsole.widget.config.chart.referenceLines.labelPlaceholder", "e.g., 2% control limit"),
96
+ onChange: (e) => m(i, { label: e.target.value === "" ? void 0 : e.target.value }),
97
+ className: f
98
+ })]
99
+ }),
100
+ /* @__PURE__ */ d("div", {
101
+ className: "min-w-0",
102
+ children: [/* @__PURE__ */ u("label", {
103
+ htmlFor: `${o}-color`,
104
+ className: "mb-1 block text-xs font-medium text-text-primary",
105
+ children: s("bigconsole.widget.config.chart.referenceLines.color", "Color")
106
+ }), /* @__PURE__ */ u("select", {
107
+ id: `${o}-color`,
108
+ value: t.color ?? "danger",
109
+ onChange: (e) => m(i, { color: e.target.value }),
110
+ className: f,
111
+ children: e.map((e) => /* @__PURE__ */ u("option", {
112
+ value: e,
113
+ children: c(e)
114
+ }, e))
115
+ })]
116
+ })
117
+ ]
118
+ }),
119
+ /* @__PURE__ */ d("div", {
120
+ className: "flex flex-wrap items-center justify-between gap-2",
121
+ children: [/* @__PURE__ */ d("label", {
122
+ className: "flex items-center gap-2",
123
+ children: [/* @__PURE__ */ u("input", {
124
+ type: "checkbox",
125
+ checked: t.dashed !== !1,
126
+ disabled: t.value2 !== void 0,
127
+ onChange: (e) => m(i, { dashed: e.target.checked }),
128
+ className: "h-4 w-4 rounded border-border-default bg-bg-surface text-action-primary-bg focus:ring-action-primary-bg"
129
+ }), /* @__PURE__ */ u("span", {
130
+ className: "text-sm text-text-primary",
131
+ children: s("bigconsole.widget.config.chart.referenceLines.dashed", "Dashed")
132
+ })]
133
+ }), /* @__PURE__ */ u("button", {
134
+ type: "button",
135
+ onClick: () => a(r(n, i)),
136
+ className: "min-h-control-md rounded-button px-2 text-sm font-medium text-[var(--color-status-error-text)] hover:bg-status-error-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
137
+ "aria-label": s("bigconsole.widget.config.chart.referenceLines.removeAria", "Remove line {{number}}", { number: l }),
138
+ children: s("bigconsole.widget.config.chart.referenceLines.remove", "Remove")
139
+ })]
140
+ })
141
+ ]
142
+ }, o);
143
+ }),
144
+ /* @__PURE__ */ u("button", {
145
+ type: "button",
146
+ disabled: h,
147
+ onClick: () => a(t(n)),
148
+ className: "inline-flex min-h-control-md items-center rounded-button border border-border-default px-3 text-sm font-medium text-text-primary hover:bg-bg-sunken focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
149
+ children: s("bigconsole.widget.config.chart.referenceLines.add", "+ Add reference line")
150
+ }),
151
+ h && /* @__PURE__ */ u("p", {
152
+ className: "text-xs text-text-secondary",
153
+ children: s("bigconsole.widget.config.chart.referenceLines.limit", "A chart can have up to {{limit}} reference lines.", { limit: 10 })
154
+ })
155
+ ]
156
+ });
157
+ });
158
+ //#endregion
159
+ export { m as ReferenceLinesEditor, m as default };