@burdenoff/microfe-bigconsole 2026.510.54

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

@@ -0,0 +1,254 @@
+import { memo as e, useCallback as t } from "react";
+import { Fragment as n, jsx as r, jsxs as i } 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({
+			...e,
+			[t]: n
+		});
+	}, [e, c]), u = e.chartType === "pie" || e.chartType === "funnel";
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
+				className: "block text-sm font-medium text-text-primary mb-1",
+				children: "Chart Type"
+			}), /* @__PURE__ */ r("select", {
+				value: e.chartType || "line",
+				onChange: (e) => l("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", {
+					value: e.value,
+					children: e.label
+				}, e.value))
+			})] }),
+			!u && /* @__PURE__ */ i(n, { children: [
+				/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
+					className: "block text-sm font-medium text-text-primary mb-1",
+					children: "X-Axis Field"
+				}), /* @__PURE__ */ r("input", {
+					type: "text",
+					value: e.xAxisField || "",
+					onChange: (e) => l("xAxisField", e.target.value),
+					placeholder: "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", {
+						className: "block text-sm font-medium text-text-primary mb-1",
+						children: "X-Axis Label"
+					}), /* @__PURE__ */ r("input", {
+						type: "text",
+						value: e.xAxisLabel || "",
+						onChange: (e) => l("xAxisLabel", e.target.value),
+						placeholder: "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", {
+						className: "block text-sm font-medium text-text-primary mb-1",
+						children: "Y-Axis Label"
+					}), /* @__PURE__ */ r("input", {
+						type: "text",
+						value: e.yAxisLabel || "",
+						onChange: (e) => l("yAxisLabel", e.target.value),
+						placeholder: "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", {
+					className: "block text-sm font-medium text-text-primary mb-1",
+					children: "Curve Type"
+				}), /* @__PURE__ */ r("select", {
+					value: e.curveType || "monotone",
+					onChange: (e) => l("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", {
+						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", {
+					className: "block text-sm font-medium text-text-primary mb-1",
+					children: "Value Field"
+				}), /* @__PURE__ */ r("input", {
+					type: "text",
+					value: e.valueField || "",
+					onChange: (e) => l("valueField", e.target.value),
+					placeholder: "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", {
+					className: "block text-sm font-medium text-text-primary mb-1",
+					children: "Label Field"
+				}), /* @__PURE__ */ r("input", {
+					type: "text",
+					value: e.labelField || "",
+					onChange: (e) => l("labelField", e.target.value),
+					placeholder: "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", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ r("input", {
+					type: "checkbox",
+					checked: e.showAsDonut === !0,
+					onChange: (e) => l("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", {
+					className: "text-sm text-text-primary",
+					children: "Show as Donut"
+				})]
+			})] }),
+			/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
+				className: "block text-sm font-medium text-text-primary mb-1",
+				children: "Legend Position"
+			}), /* @__PURE__ */ r("select", {
+				value: e.legendPosition || "bottom",
+				onChange: (e) => l("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", {
+					value: e.value,
+					children: e.label
+				}, e.value))
+			})] }),
+			!u && /* @__PURE__ */ i("div", { children: [
+				/* @__PURE__ */ r("label", {
+					className: "block text-sm font-medium text-text-primary mb-1",
+					children: "Fields to Display"
+				}),
+				/* @__PURE__ */ r("p", {
+					className: "text-xs text-text-secondary mb-2",
+					children: "Select which numeric fields to show as chart series. Leave empty to show all."
+				}),
+				/* @__PURE__ */ r("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);
+					},
+					placeholder: "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__ */ i("div", {
+				className: "space-y-3",
+				children: [
+					/* @__PURE__ */ i("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ r("input", {
+							type: "checkbox",
+							checked: e.showGrid !== !1,
+							onChange: (e) => l("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", {
+							className: "text-sm text-text-primary",
+							children: "Show Grid"
+						})]
+					}),
+					/* @__PURE__ */ i("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ r("input", {
+							type: "checkbox",
+							checked: e.showLegend !== !1,
+							onChange: (e) => l("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", {
+							className: "text-sm text-text-primary",
+							children: "Show Legend"
+						})]
+					}),
+					!u && /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ r("input", {
+							type: "checkbox",
+							checked: e.showDataPoints === !0,
+							onChange: (e) => l("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", {
+							className: "text-sm text-text-primary",
+							children: "Show Data Points"
+						})]
+					}), (e.chartType === "bar" || e.chartType === "area") && /* @__PURE__ */ i("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ r("input", {
+							type: "checkbox",
+							checked: e.stacked === !0,
+							onChange: (e) => l("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", {
+							className: "text-sm text-text-primary",
+							children: "Stacked"
+						})]
+					})] })
+				]
+			})
+		]
+	});
+});
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=ChartConfig.js.map

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

@@ -0,0 +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":";;;AAwBA,IAAM,IAAc;CAClB;EAAE,OAAO;EAAQ,OAAO;EAAc;CACtC;EAAE,OAAO;EAAO,OAAO;EAAa;CACpC;EAAE,OAAO;EAAQ,OAAO;EAAc;CACtC;EAAE,OAAO;EAAO,OAAO;EAAa;CACpC;EAAE,OAAO;EAAU,OAAO;EAAgB;CAC3C,EAEK,IAAc;CAClB;EAAE,OAAO;EAAY,OAAO;EAAU;CACtC;EAAE,OAAO;EAAU,OAAO;EAAU;CACpC;EAAE,OAAO;EAAQ,OAAO;EAAQ;CAChC;EAAE,OAAO;EAAW,OAAO;EAAW;CACvC,EAEK,IAAmB;CACvB;EAAE,OAAO;EAAO,OAAO;EAAO;CAC9B;EAAE,OAAO;EAAU,OAAO;EAAU;CACpC;EAAE,OAAO;EAAQ,OAAO;EAAQ;CAChC;EAAE,OAAO;EAAS,OAAO;EAAS;CACnC,EAMY,IAAoC,EAAK,SAAqB,EAAE,WAAQ,eAAY;CAC/F,IAAM,IAAe,GACU,GAAQ,MAAyB;AAC5D,IAAS;GAAE,GAAG;IAAS,IAAM;GAAO,CAAC;IAEvC,CAAC,GAAQ,EAAS,CACnB,EAEK,IAAgB,EAAO,cAAc,SAAS,EAAO,cAAc;AAEzE,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,WAAU;cAAmD;IAAkB,CAAA,EACtF,kBAAC,UAAD;IACE,OAAO,EAAO,aAAa;IAC3B,WAAW,MAAM,EAAa,aAAa,EAAE,OAAO,MAAiC;IACrF,WAAU;cAST,EAAY,KAAK,MAChB,kBAAC,UAAD;KAAyB,OAAO,EAAK;eAClC,EAAK;KACC,EAFI,EAAK,MAET,CACT;IACK,CAAA,CACL,EAAA,CAAA;GAGL,CAAC,KACA,kBAAA,GAAA,EAAA,UAAA;IACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;KAAO,WAAU;eAAmD;KAAoB,CAAA,EACxF,kBAAC,SAAD;KACE,MAAK;KACL,OAAO,EAAO,cAAc;KAC5B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,MAAM;KAC3D,aAAY;KACZ,WAAU;KAQV,CAAA,CACE,EAAA,CAAA;IAEN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;MAAO,WAAU;gBAAmD;MAAoB,CAAA,EACxF,kBAAC,SAAD;MACE,MAAK;MACL,OAAO,EAAO,cAAc;MAC5B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,MAAM;MAC3D,aAAY;MACZ,WAAU;MAQV,CAAA,CACE,EAAA,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;MAAO,WAAU;gBAAmD;MAAoB,CAAA,EACxF,kBAAC,SAAD;MACE,MAAK;MACL,OAAO,EAAO,cAAc;MAC5B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,MAAM;MAC3D,aAAY;MACZ,WAAU;MAQV,CAAA,CACE,EAAA,CAAA,CACF;;KAGJ,EAAO,cAAc,UAAU,EAAO,cAAc,WACpD,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;KAAO,WAAU;eAAmD;KAAkB,CAAA,EACtF,kBAAC,UAAD;KACE,OAAO,EAAO,aAAa;KAC3B,WAAW,MAAM,EAAa,aAAa,EAAE,OAAO,MAAiC;KACrF,WAAU;eAST,EAAY,KAAK,MAChB,kBAAC,UAAD;MAAyB,OAAO,EAAK;gBAClC,EAAK;MACC,EAFI,EAAK,MAET,CACT;KACK,CAAA,CACL,EAAA,CAAA;IAEP,EAAA,CAAA;GAIJ,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;KAAO,WAAU;eAAmD;KAAmB,CAAA,EACvF,kBAAC,SAAD;KACE,MAAK;KACL,OAAO,EAAO,cAAc;KAC5B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,MAAM;KAC3D,aAAY;KACZ,WAAU;KAQV,CAAA,CACE,EAAA,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;KAAO,WAAU;eAAmD;KAAmB,CAAA,EACvF,kBAAC,SAAD;KACE,MAAK;KACL,OAAO,EAAO,cAAc;KAC5B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,MAAM;KAC3D,aAAY;KACZ,WAAU;KAQV,CAAA,CACE,EAAA,CAAA,CACF;OAEL,EAAO,cAAc,SACpB,kBAAC,SAAD;IAAO,WAAU;cAAjB,CACE,kBAAC,SAAD;KACE,MAAK;KACL,SAAS,EAAO,gBAAgB;KAChC,WAAW,MAAM,EAAa,eAAe,EAAE,OAAO,QAAQ;KAC9D,WAAU;KAQV,CAAA,EACF,kBAAC,QAAD;KAAM,WAAU;eAA4B;KAAoB,CAAA,CAC1D;MAET,EAAA,CAAA;GAIL,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,WAAU;cAAmD;IAAuB,CAAA,EAC3F,kBAAC,UAAD;IACE,OAAO,EAAO,kBAAkB;IAChC,WAAW,MAAM,EAAa,kBAAkB,EAAE,OAAO,MAAsC;IAC/F,WAAU;cAST,EAAiB,KAAK,MACrB,kBAAC,UAAD;KAAwB,OAAO,EAAI;eAChC,EAAI;KACE,EAFI,EAAI,MAER,CACT;IACK,CAAA,CACL,EAAA,CAAA;GAGL,CAAC,KACA,kBAAC,OAAD,EAAA,UAAA;IACE,kBAAC,SAAD;KAAO,WAAU;eAAmD;KAAyB,CAAA;IAC7F,kBAAC,KAAD;KAAG,WAAU;eAAmC;KAE5C,CAAA;IACJ,kBAAC,SAAD;KACE,MAAK;KACL,OAAQ,EAAO,gBAAyC,KAAK,KAAK,IAAI;KACtE,WAAW,MAAM;MACf,IAAM,IAAQ,EAAE,OAAO,MAAM,MAAM,EAC7B,IAAS,IACX,EACG,MAAM,IAAI,CACV,KAAK,MAAM,EAAE,MAAM,CAAC,CACpB,OAAO,QAAQ,GAClB,EAAE;AACN,QAAa,kBAAkB,EAAO,SAAS,IAAI,IAAS,KAAA,EAAU;;KAExE,aAAY;KACZ,WAAU;KAQV,CAAA;IACF,kBAAC,KAAD;KAAG,WAAU;eAAkC;KAAyC,CAAA;IACpF,EAAA,CAAA;GAIR,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD;OACE,MAAK;OACL,SAAS,EAAO,aAAa;OAC7B,WAAW,MAAM,EAAa,YAAY,EAAE,OAAO,QAAQ;OAC3D,WAAU;OAQV,CAAA,EACF,kBAAC,QAAD;OAAM,WAAU;iBAA4B;OAAgB,CAAA,CACtD;;KAER,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD;OACE,MAAK;OACL,SAAS,EAAO,eAAe;OAC/B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,QAAQ;OAC7D,WAAU;OAQV,CAAA,EACF,kBAAC,QAAD;OAAM,WAAU;iBAA4B;OAAkB,CAAA,CACxD;;KAEP,CAAC,KACA,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD;OACE,MAAK;OACL,SAAS,EAAO,mBAAmB;OACnC,WAAW,MAAM,EAAa,kBAAkB,EAAE,OAAO,QAAQ;OACjE,WAAU;OAQV,CAAA,EACF,kBAAC,QAAD;OAAM,WAAU;iBAA4B;OAAuB,CAAA,CAC7D;UAEN,EAAO,cAAc,SAAS,EAAO,cAAc,WACnD,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD;OACE,MAAK;OACL,SAAS,EAAO,YAAY;OAC5B,WAAW,MAAM,EAAa,WAAW,EAAE,OAAO,QAAQ;OAC1D,WAAU;OAQV,CAAA,EACF,kBAAC,QAAD;OAAM,WAAU;iBAA4B;OAAc,CAAA,CACpD;QAET,EAAA,CAAA;KAED;;GACF;;EAER"}

package/dist/bigconsole/components/widgets/chart/ChartLegend.d.ts

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+
+export interface LegendItem {
+    /** Unique key */
+    dataKey: string;
+    /** Display name */
+    name: string;
+    /** Color for the legend marker */
+    color: string;
+    /** Whether this series is hidden */
+    hidden?: boolean;
+}
+export interface ChartLegendProps {
+    /** Legend items */
+    items: LegendItem[];
+    /** Position of the legend */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /** Layout direction */
+    layout?: 'horizontal' | 'vertical';
+    /** Callback when item is clicked (for toggling visibility) */
+    onItemClick?: (dataKey: string) => void;
+}
+export declare const ChartLegend: FC<ChartLegendProps>;
+export default ChartLegend;
+//# sourceMappingURL=ChartLegend.d.ts.map

package/dist/bigconsole/components/widgets/chart/ChartLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../../../src/bigconsole/components/widgets/chart/ChartLegend.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAQ,MAAM,OAAO,CAAC;AAEtC,MAAM,WAAW,UAAU;IACzB,iBAAiB;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,mBAAmB;IACnB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,uBAAuB;IACvB,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,8DAA8D;IAC9D,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA6C3C,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/bigconsole/components/widgets/chart/ChartLegend.js

@@ -0,0 +1,40 @@
+import { memo as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/bigconsole/components/widgets/chart/ChartLegend.tsx
+var r = e(function({ items: e, position: r = "bottom", layout: i = "horizontal", onItemClick: a }) {
+	return /* @__PURE__ */ t("div", {
+		className: `
+        flex flex-wrap gap-3
+        ${i === "vertical" || r === "left" || r === "right" ? "flex-col" : "flex-row items-center justify-center"}
+        ${r === "top" ? "mb-3" : ""}
+        ${r === "bottom" ? "mt-3" : ""}
+        ${r === "left" ? "mr-4" : ""}
+        ${r === "right" ? "ml-4" : ""}
+      `,
+		children: e.map((e) => /* @__PURE__ */ n("button", {
+			type: "button",
+			onClick: () => a?.(e.dataKey),
+			className: `
+            flex items-center gap-2
+            text-sm
+            transition-opacity
+            ${a ? "cursor-pointer hover:opacity-80" : "cursor-default"}
+            ${e.hidden ? "opacity-40" : "opacity-100"}
+          `,
+			children: [/* @__PURE__ */ t("span", {
+				className: "w-3 h-3 rounded-sm flex-shrink-0",
+				style: { backgroundColor: e.color }
+			}), /* @__PURE__ */ t("span", {
+				className: `
+              text-text-primary
+              ${e.hidden ? "line-through" : ""}
+            `,
+				children: e.name
+			})]
+		}, e.dataKey))
+	});
+});
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=ChartLegend.js.map

package/dist/bigconsole/components/widgets/chart/ChartLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/chart/ChartLegend.tsx"],"sourcesContent":["/**\n * ChartLegend Component\n *\n * Custom legend for Recharts charts.\n */\n\nimport { type FC, memo } from 'react';\n\nexport interface LegendItem {\n  /** Unique key */\n  dataKey: string;\n  /** Display name */\n  name: string;\n  /** Color for the legend marker */\n  color: string;\n  /** Whether this series is hidden */\n  hidden?: boolean;\n}\n\nexport interface ChartLegendProps {\n  /** Legend items */\n  items: LegendItem[];\n  /** Position of the legend */\n  position?: 'top' | 'bottom' | 'left' | 'right';\n  /** Layout direction */\n  layout?: 'horizontal' | 'vertical';\n  /** Callback when item is clicked (for toggling visibility) */\n  onItemClick?: (dataKey: string) => void;\n}\n\nexport const ChartLegend: FC<ChartLegendProps> = memo(function ChartLegend({\n  items,\n  position = 'bottom',\n  layout = 'horizontal',\n  onItemClick,\n}) {\n  const isVertical = layout === 'vertical' || position === 'left' || position === 'right';\n\n  return (\n    <div\n      className={`\n        flex flex-wrap gap-3\n        ${isVertical ? 'flex-col' : 'flex-row items-center justify-center'}\n        ${position === 'top' ? 'mb-3' : ''}\n        ${position === 'bottom' ? 'mt-3' : ''}\n        ${position === 'left' ? 'mr-4' : ''}\n        ${position === 'right' ? 'ml-4' : ''}\n      `}\n    >\n      {items.map((item) => (\n        <button\n          key={item.dataKey}\n          type=\"button\"\n          onClick={() => onItemClick?.(item.dataKey)}\n          className={`\n            flex items-center gap-2\n            text-sm\n            transition-opacity\n            ${onItemClick ? 'cursor-pointer hover:opacity-80' : 'cursor-default'}\n            ${item.hidden ? 'opacity-40' : 'opacity-100'}\n          `}\n        >\n          <span className=\"w-3 h-3 rounded-sm flex-shrink-0\" style={{ backgroundColor: item.color }} />\n          <span\n            className={`\n              text-text-primary\n              ${item.hidden ? 'line-through' : ''}\n            `}\n          >\n            {item.name}\n          </span>\n        </button>\n      ))}\n    </div>\n  );\n});\n\nexport default ChartLegend;\n"],"mappings":";;;AA8BA,IAAa,IAAoC,EAAK,SAAqB,EACzE,UACA,cAAW,UACX,YAAS,cACT,kBACC;AAGD,QACE,kBAAC,OAAD;EACE,WAAW;;UAJI,MAAW,cAAc,MAAa,UAAU,MAAa,UAM3D,aAAa,uCAAuC;UACjE,MAAa,QAAQ,SAAS,GAAG;UACjC,MAAa,WAAW,SAAS,GAAG;UACpC,MAAa,SAAS,SAAS,GAAG;UAClC,MAAa,UAAU,SAAS,GAAG;;YAGtC,EAAM,KAAK,MACV,kBAAC,UAAD;GAEE,MAAK;GACL,eAAe,IAAc,EAAK,QAAQ;GAC1C,WAAW;;;;cAIP,IAAc,oCAAoC,iBAAiB;cACnE,EAAK,SAAS,eAAe,cAAc;;aATjD,CAYE,kBAAC,QAAD;IAAM,WAAU;IAAmC,OAAO,EAAE,iBAAiB,EAAK,OAAO;IAAI,CAAA,EAC7F,kBAAC,QAAD;IACE,WAAW;;gBAEP,EAAK,SAAS,iBAAiB,GAAG;;cAGrC,EAAK;IACD,CAAA,CACA;KApBF,EAAK,QAoBH,CACT;EACE,CAAA;EAER"}

package/dist/bigconsole/components/widgets/chart/ChartTooltip.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+
+export interface ChartTooltipPayload {
+    name: string;
+    value: number | string;
+    color: string;
+    dataKey?: string;
+    payload?: Record<string, unknown>;
+}
+export interface ChartTooltipProps {
+    /** Whether tooltip is active */
+    active?: boolean;
+    /** Tooltip payload data */
+    payload?: ChartTooltipPayload[];
+    /** Label for the tooltip (usually x-axis value) */
+    label?: string;
+    /** Value formatter function */
+    valueFormatter?: (value: number | string) => string;
+    /** Label formatter function */
+    labelFormatter?: (label: string) => string;
+}
+export declare const ChartTooltip: FC<ChartTooltipProps>;
+export default ChartTooltip;
+//# sourceMappingURL=ChartTooltip.d.ts.map

package/dist/bigconsole/components/widgets/chart/ChartTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../../../src/bigconsole/components/widgets/chart/ChartTooltip.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAQ,MAAM,OAAO,CAAC;AAEtC,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB;IAChC,gCAAgC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAAC;IACpD,+BAA+B;IAC/B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5C;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAqC7C,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/dist/bigconsole/components/widgets/chart/ChartTooltip.js

@@ -0,0 +1,34 @@
+import { memo as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/bigconsole/components/widgets/chart/ChartTooltip.tsx
+var r = e(function({ active: e, payload: r, label: i, valueFormatter: a = (e) => String(e), labelFormatter: o = (e) => e }) {
+	return !e || !r?.length ? null : /* @__PURE__ */ n("div", {
+		className: "\n          bg-bg-surface\n          border border-border-default\n          rounded-lg shadow-lg\n          p-3 min-w-[120px]\n        ",
+		children: [i && /* @__PURE__ */ t("p", {
+			className: "text-xs font-medium text-text-secondary mb-2",
+			children: o(i)
+		}), /* @__PURE__ */ t("div", {
+			className: "space-y-1.5",
+			children: r.map((e, r) => /* @__PURE__ */ n("div", {
+				className: "flex items-center justify-between gap-4",
+				children: [/* @__PURE__ */ n("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ t("span", {
+						className: "w-2.5 h-2.5 rounded-full flex-shrink-0",
+						style: { backgroundColor: e.color }
+					}), /* @__PURE__ */ t("span", {
+						className: "text-sm text-text-secondary",
+						children: e.name
+					})]
+				}), /* @__PURE__ */ t("span", {
+					className: "text-sm font-medium text-text-primary",
+					children: a(e.value)
+				})]
+			}, `tooltip-${e.dataKey || r}`))
+		})]
+	});
+});
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=ChartTooltip.js.map

package/dist/bigconsole/components/widgets/chart/ChartTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/chart/ChartTooltip.tsx"],"sourcesContent":["/**\n * ChartTooltip Component\n *\n * Custom tooltip for Recharts charts.\n */\n\nimport { type FC, memo } from 'react';\n\nexport interface ChartTooltipPayload {\n  name: string;\n  value: number | string;\n  color: string;\n  dataKey?: string;\n  payload?: Record<string, unknown>;\n}\n\nexport interface ChartTooltipProps {\n  /** Whether tooltip is active */\n  active?: boolean;\n  /** Tooltip payload data */\n  payload?: ChartTooltipPayload[];\n  /** Label for the tooltip (usually x-axis value) */\n  label?: string;\n  /** Value formatter function */\n  valueFormatter?: (value: number | string) => string;\n  /** Label formatter function */\n  labelFormatter?: (label: string) => string;\n}\n\nexport const ChartTooltip: FC<ChartTooltipProps> = memo(function ChartTooltip({\n  active,\n  payload,\n  label,\n  valueFormatter = (v: number | string) => String(v),\n  labelFormatter = (l: string) => l,\n}) {\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"\n          bg-bg-surface\n          border border-border-default\n          rounded-lg shadow-lg\n          p-3 min-w-[120px]\n        \"\n    >\n      {/* Label */}\n      {label && <p className=\"text-xs font-medium text-text-secondary mb-2\">{labelFormatter(label)}</p>}\n\n      {/* Values */}\n      <div className=\"space-y-1.5\">\n        {payload.map((entry, index) => (\n          <div key={`tooltip-${entry.dataKey || index}`} className=\"flex items-center justify-between gap-4\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"w-2.5 h-2.5 rounded-full flex-shrink-0\" style={{ backgroundColor: entry.color }} />\n              <span className=\"text-sm text-text-secondary\">{entry.name}</span>\n            </div>\n            <span className=\"text-sm font-medium text-text-primary\">{valueFormatter(entry.value)}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n});\n\nexport default ChartTooltip;\n"],"mappings":";;;AA6BA,IAAa,IAAsC,EAAK,SAAsB,EAC5E,WACA,YACA,UACA,qBAAkB,MAAuB,OAAO,EAAE,EAClD,qBAAkB,MAAc,KAC/B;AAKD,QAJI,CAAC,KAAU,CAAC,GAAS,SAChB,OAIP,kBAAC,OAAD;EACE,WAAU;YADZ,CASG,KAAS,kBAAC,KAAD;GAAG,WAAU;aAAgD,EAAe,EAAM;GAAK,CAAA,EAGjG,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAQ,KAAK,GAAO,MACnB,kBAAC,OAAD;IAA+C,WAAU;cAAzD,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;MAAyC,OAAO,EAAE,iBAAiB,EAAM,OAAO;MAAI,CAAA,EACpG,kBAAC,QAAD;MAAM,WAAU;gBAA+B,EAAM;MAAY,CAAA,CAC7D;QACN,kBAAC,QAAD;KAAM,WAAU;eAAyC,EAAe,EAAM,MAAM;KAAQ,CAAA,CACxF;MANI,WAAW,EAAM,WAAW,IAMhC,CACN;GACE,CAAA,CACF;;EAER"}

package/dist/bigconsole/components/widgets/chart/ChartWidget.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { Widget } from '../../../types';
+import { ChartData } from './charts/types';
+
+export interface ChartWidgetProps {
+    /** Widget configuration */
+    widget: Widget;
+    /** Chart data */
+    data?: ChartData[];
+    /** Click handler for drilldown */
+    onClick?: (dataPoint: ChartData, index: number) => void;
+    /** Drilldown handler - receives selected data point */
+    onDrilldown?: (selectedData: Record<string, unknown>) => void;
+}
+export declare const ChartWidget: FC<ChartWidgetProps>;
+export default ChartWidget;
+//# sourceMappingURL=ChartWidget.d.ts.map

package/dist/bigconsole/components/widgets/chart/ChartWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartWidget.d.ts","sourceRoot":"","sources":["../../../../../src/bigconsole/components/widgets/chart/ChartWidget.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAwC,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,MAAM,EAAoC,MAAM,gBAAgB,CAAC;AAO/E,OAAO,KAAK,EAAe,SAAS,EAAwB,MAAM,gBAAgB,CAAC;AAQnF,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IACnB,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,uDAAuD;IACvD,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CAC/D;AAkBD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAsL3C,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/bigconsole/components/widgets/chart/ChartWidget.js

@@ -0,0 +1,151 @@
+import { useCrossFilterContext as e, useWidgetCrossFilter as t } from "../../../contexts/CrossFilterContext.js";
+import "../../../contexts/index.js";
+import n from "./charts/LineChart.js";
+import r from "./charts/BarChart.js";
+import i from "./charts/AreaChart.js";
+import a from "./charts/PieChart.js";
+import o from "./charts/FunnelChart.js";
+import s from "./ChartLegend.js";
+import { memo as c, useCallback as l, useMemo as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/bigconsole/components/widgets/chart/ChartWidget.tsx
+var m = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)",
+	"var(--color-chart-4)",
+	"var(--color-chart-5)"
+], h = c(function({ widget: c, data: h = [], onClick: g, onDrilldown: _ }) {
+	let v = c.config, [y, b] = d([]), { handleDataClick: x, enabled: S } = t(c.id, v?.crossFilterMappings || [{
+		sourceField: v?.labelField || "name",
+		targetFilterId: "category"
+	}]), { clearAllCrossFilters: C, hasCrossFilters: w } = e(), T = u(() => ({
+		type: v?.chartType?.toLowerCase() || "line",
+		xAxisKey: v?.xAxisField || "name",
+		xAxisLabel: v?.xAxisLabel,
+		yAxisLabel: v?.yAxisLabel,
+		showGrid: v?.showGrid,
+		showLegend: v?.showLegend,
+		legendPosition: v?.legendPosition,
+		showDots: v?.showDataPoints,
+		curveType: v?.curveType,
+		colors: v?.colors,
+		seriesNames: v?.seriesLabels,
+		stacked: v?.stacked,
+		isDonut: v?.showAsDonut,
+		innerRadius: v?.innerRadius,
+		outerRadius: v?.outerRadius
+	}), [v]), E = u(() => {
+		if (!h.length || T.type === "pie" || T.type === "funnel") return [];
+		let e = v?.selectedFields;
+		return Object.keys(h[0]).filter((t) => {
+			let n = t !== T.xAxisKey && typeof h[0][t] == "number";
+			return e && e.length > 0 ? n && e.includes(t) : n;
+		}).map((e, t) => ({
+			dataKey: e,
+			name: T.seriesNames?.[e] || e,
+			color: T.colors?.[t] || m[t % m.length],
+			hidden: y.includes(e)
+		}));
+	}, [
+		h,
+		T,
+		y,
+		v?.selectedFields
+	]), D = l((e) => {
+		b((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+	}, []), O = l((e, t) => {
+		if (S) {
+			let t = e[v?.labelField || "name"];
+			x(e, t);
+		}
+		_ ? _(e) : g && c.drilldowns?.length && g(e, t);
+	}, [
+		g,
+		_,
+		c.drilldowns,
+		S,
+		x,
+		v?.labelField
+	]);
+	return /* @__PURE__ */ p("div", {
+		className: "flex flex-col h-full p-4",
+		children: [
+			w && /* @__PURE__ */ f("div", {
+				className: "flex items-center gap-2 mb-2 -mt-1",
+				children: /* @__PURE__ */ p("button", {
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation(), C();
+					},
+					className: "\n              inline-flex items-center gap-1.5\n              px-2.5 py-1 rounded-md\n              text-xs font-medium\n              bg-action-primary-bg/10 text-action-primary-text\n              hover:bg-action-primary-bg/20\n              transition-colors\n            ",
+					children: [/* @__PURE__ */ f("svg", {
+						className: "w-3.5 h-3.5",
+						fill: "none",
+						stroke: "currentColor",
+						viewBox: "0 0 24 24",
+						children: /* @__PURE__ */ f("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M10 19l-7-7m0 0l7-7m-7 7h18"
+						})
+					}), "Clear Filter"]
+				})
+			}),
+			T.legendPosition === "top" && E.length > 0 && /* @__PURE__ */ f(s, {
+				items: E,
+				position: "top",
+				onItemClick: D
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "flex-1 min-h-0",
+				children: (() => {
+					switch (T.type) {
+						case "bar": return /* @__PURE__ */ f(r, {
+							data: h,
+							config: T,
+							hiddenSeries: y,
+							onDataClick: O
+						});
+						case "area": return /* @__PURE__ */ f(i, {
+							data: h,
+							config: T,
+							hiddenSeries: y,
+							onDataClick: O
+						});
+						case "pie": return /* @__PURE__ */ f(a, {
+							data: h,
+							config: T,
+							dataKey: v?.valueField || "value",
+							nameKey: v?.labelField || "name",
+							onDataClick: O
+						});
+						case "funnel": return /* @__PURE__ */ f(o, {
+							data: h,
+							config: T,
+							dataKey: v?.valueField || "value",
+							nameKey: v?.labelField || "name",
+							onDataClick: O
+						});
+						default: return /* @__PURE__ */ f(n, {
+							data: h,
+							config: T,
+							hiddenSeries: y,
+							onDataClick: O
+						});
+					}
+				})()
+			}),
+			T.legendPosition === "bottom" && E.length > 0 && /* @__PURE__ */ f(s, {
+				items: E,
+				position: "bottom",
+				onItemClick: D
+			})
+		]
+	});
+});
+//#endregion
+export { h as default };
+
+//# sourceMappingURL=ChartWidget.js.map