@databricks/appkit-ui 0.0.2

package/dist/react/charts/area/index.d.ts

@@ -0,0 +1,33 @@
+import { AreaChartProps } from "../types.js";
+import * as react_jsx_runtime274 from "react/jsx-runtime";
+
+//#region src/react/charts/area/index.d.ts
+
+/**
+ * Area Chart component.
+ * Supports both JSON and Arrow data formats with automatic format selection.
+ *
+ * @example Simple usage
+ * ```tsx
+ * <AreaChart
+ *   queryKey="traffic_data"
+ *   parameters={{ period: "weekly" }}
+ * />
+ * ```
+ *
+ * @example Stacked area chart
+ * ```tsx
+ * <AreaChart
+ *   queryKey="revenue_breakdown"
+ *   parameters={{ groupBy: "product" }}
+ *   stacked={true}
+ * />
+ * ```
+ */
+declare const AreaChart: {
+  (props: AreaChartProps): react_jsx_runtime274.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { AreaChart };
+//# sourceMappingURL=index.d.ts.map

package/dist/react/charts/area/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/react/charts/area/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAwBA;;;;;;;;;;;;;;;;;;cAAa"}

package/dist/react/charts/area/index.js

@@ -0,0 +1,29 @@
+import { createChart } from "../create-chart.js";
+
+//#region src/react/charts/area/index.tsx
+/**
+* Area Chart component.
+* Supports both JSON and Arrow data formats with automatic format selection.
+*
+* @example Simple usage
+* ```tsx
+* <AreaChart
+*   queryKey="traffic_data"
+*   parameters={{ period: "weekly" }}
+* />
+* ```
+*
+* @example Stacked area chart
+* ```tsx
+* <AreaChart
+*   queryKey="revenue_breakdown"
+*   parameters={{ groupBy: "product" }}
+*   stacked={true}
+* />
+* ```
+*/
+const AreaChart = createChart("area", "AreaChart");
+
+//#endregion
+export { AreaChart };
+//# sourceMappingURL=index.js.map

package/dist/react/charts/area/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/react/charts/area/index.tsx"],"sourcesContent":["import { createChart } from \"../create-chart\";\nimport type { AreaChartProps } from \"../types\";\n\n/**\n * Area Chart component.\n * Supports both JSON and Arrow data formats with automatic format selection.\n *\n * @example Simple usage\n * ```tsx\n * <AreaChart\n *   queryKey=\"traffic_data\"\n *   parameters={{ period: \"weekly\" }}\n * />\n * ```\n *\n * @example Stacked area chart\n * ```tsx\n * <AreaChart\n *   queryKey=\"revenue_breakdown\"\n *   parameters={{ groupBy: \"product\" }}\n *   stacked={true}\n * />\n * ```\n */\nexport const AreaChart = createChart<AreaChartProps>(\"area\", \"AreaChart\");\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,YAAY,YAA4B,QAAQ,YAAY"}

package/dist/react/charts/bar/index.d.ts

@@ -0,0 +1,43 @@
+import { BarChartProps } from "../types.js";
+import * as react_jsx_runtime275 from "react/jsx-runtime";
+
+//#region src/react/charts/bar/index.d.ts
+
+/**
+ * Bar Chart component.
+ * Supports both JSON and Arrow data formats with automatic format selection.
+ *
+ * @example Query mode with auto format selection
+ * ```tsx
+ * <BarChart
+ *   queryKey="top_contributors"
+ *   parameters={{ limit: 10 }}
+ * />
+ * ```
+ *
+ * @example Query mode with explicit Arrow format
+ * ```tsx
+ * <BarChart
+ *   queryKey="spend_data"
+ *   parameters={{ startDate, endDate }}
+ *   format="arrow"
+ * />
+ * ```
+ *
+ * @example Data mode with JSON array
+ * ```tsx
+ * <BarChart
+ *   data={[
+ *     { category: "A", value: 100 },
+ *     { category: "B", value: 200 },
+ *   ]}
+ * />
+ * ```
+ */
+declare const BarChart: {
+  (props: BarChartProps): react_jsx_runtime275.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { BarChart };
+//# sourceMappingURL=index.d.ts.map

package/dist/react/charts/bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/react/charts/bar/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAa"}

package/dist/react/charts/bar/index.js

@@ -0,0 +1,39 @@
+import { createChart } from "../create-chart.js";
+
+//#region src/react/charts/bar/index.tsx
+/**
+* Bar Chart component.
+* Supports both JSON and Arrow data formats with automatic format selection.
+*
+* @example Query mode with auto format selection
+* ```tsx
+* <BarChart
+*   queryKey="top_contributors"
+*   parameters={{ limit: 10 }}
+* />
+* ```
+*
+* @example Query mode with explicit Arrow format
+* ```tsx
+* <BarChart
+*   queryKey="spend_data"
+*   parameters={{ startDate, endDate }}
+*   format="arrow"
+* />
+* ```
+*
+* @example Data mode with JSON array
+* ```tsx
+* <BarChart
+*   data={[
+*     { category: "A", value: 100 },
+*     { category: "B", value: 200 },
+*   ]}
+* />
+* ```
+*/
+const BarChart = createChart("bar", "BarChart");
+
+//#endregion
+export { BarChart };
+//# sourceMappingURL=index.js.map

package/dist/react/charts/bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/react/charts/bar/index.tsx"],"sourcesContent":["import { createChart } from \"../create-chart\";\nimport type { BarChartProps } from \"../types\";\n\n/**\n * Bar Chart component.\n * Supports both JSON and Arrow data formats with automatic format selection.\n *\n * @example Query mode with auto format selection\n * ```tsx\n * <BarChart\n *   queryKey=\"top_contributors\"\n *   parameters={{ limit: 10 }}\n * />\n * ```\n *\n * @example Query mode with explicit Arrow format\n * ```tsx\n * <BarChart\n *   queryKey=\"spend_data\"\n *   parameters={{ startDate, endDate }}\n *   format=\"arrow\"\n * />\n * ```\n *\n * @example Data mode with JSON array\n * ```tsx\n * <BarChart\n *   data={[\n *     { category: \"A\", value: 100 },\n *     { category: \"B\", value: 200 },\n *   ]}\n * />\n * ```\n */\nexport const BarChart = createChart<BarChartProps>(\"bar\", \"BarChart\");\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,WAAW,YAA2B,OAAO,WAAW"}

package/dist/react/charts/base.d.ts

@@ -0,0 +1,89 @@
+import { ChartColorPalette, ChartData, ChartType, Orientation } from "./types.js";
+import * as react_jsx_runtime282 from "react/jsx-runtime";
+
+//#region src/react/charts/base.d.ts
+interface BaseChartProps {
+  /** Chart data (Arrow Table or JSON array) - format is auto-detected */
+  data: ChartData;
+  /** Chart type */
+  chartType: ChartType;
+  /** X-axis field key (auto-detected from schema if not provided) */
+  xKey?: string;
+  /** Y-axis field key(s) (auto-detected from schema if not provided) */
+  yKey?: string | string[];
+  /** Chart orientation @default "vertical" */
+  orientation?: Orientation;
+  /** Chart height in pixels @default 300 */
+  height?: number;
+  /** Chart title */
+  title?: string;
+  /** Show legend @default true */
+  showLegend?: boolean;
+  /**
+   * Color palette to use. Auto-selected based on chart type if not specified.
+   * - "categorical": Distinct colors for different categories (bar, pie, line)
+   * - "sequential": Gradient for magnitude (heatmap)
+   * - "diverging": Two-tone for positive/negative (correlation)
+   */
+  colorPalette?: ChartColorPalette;
+  /** Custom colors (overrides colorPalette) */
+  colors?: string[];
+  /** Show data point symbols (line/area charts) @default false */
+  showSymbol?: boolean;
+  /** Smooth line curves (line/area charts) @default true */
+  smooth?: boolean;
+  /** Stack series @default false */
+  stacked?: boolean;
+  /** Symbol size for scatter charts @default 8 */
+  symbolSize?: number;
+  /** Show area fill for radar charts @default true */
+  showArea?: boolean;
+  /** Inner radius for pie/donut (0-100) @default 0 */
+  innerRadius?: number;
+  /** Show labels on pie/donut slices @default true */
+  showLabels?: boolean;
+  /** Label position for pie/donut @default "outside" */
+  labelPosition?: "outside" | "inside" | "center";
+  /** Y-axis field key for heatmap (the row dimension) */
+  yAxisKey?: string;
+  /** Min value for heatmap color scale */
+  min?: number;
+  /** Max value for heatmap color scale */
+  max?: number;
+  /** Additional ECharts options to merge */
+  options?: Record<string, unknown>;
+  /** Additional CSS classes */
+  className?: string;
+}
+/**
+ * Base chart component that handles both Arrow and JSON data.
+ * Renders using ECharts for consistent output across both formats.
+ */
+declare function BaseChart({
+  data,
+  chartType,
+  xKey,
+  yKey,
+  orientation,
+  height,
+  title,
+  showLegend,
+  colorPalette,
+  colors: customColors,
+  showSymbol,
+  smooth,
+  stacked,
+  symbolSize,
+  showArea,
+  innerRadius,
+  showLabels,
+  labelPosition,
+  yAxisKey,
+  min,
+  max,
+  options: customOptions,
+  className
+}: BaseChartProps): react_jsx_runtime282.JSX.Element;
+//#endregion
+export { BaseChart, BaseChartProps };
+//# sourceMappingURL=base.d.ts.map

package/dist/react/charts/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","names":[],"sources":["../../../src/react/charts/base.tsx"],"sourcesContent":[],"mappings":";;;;UA0CiB,cAAA;;QAET;EAFS;EAAc,SAAA,EAIlB,SAJkB;;MAIlB,CAAA,EAAA,MAAA;;MAmBI,CAAA,EAAA,MAAA,GAAA,MAAA,EAAA;;EA0BC,WAAA,CAAA,EAvCF,WAuCE;EAaF;EAAS,MAAA,CAAA,EAAA,MAAA;;OAEvB,CAAA,EAAA,MAAA;;YAEA,CAAA,EAAA,OAAA;;;;;;;cAOA,CAAA,EAlDe,iBAkDf;;QAEA,CAAA,EAAA,MAAA,EAAA;;YAEA,CAAA,EAAA,OAAA;;QAEA,CAAA,EAAA,OAAA;;SAEA,CAAA,EAAA,OAAA;;YAEA,CAAA,EAAA,MAAA;;UAEA,CAAA,EAAA,OAAA;;aACe,CAAA,EAAA,MAAA;EAAA;;;;;;;;;;;YArCL;;;;;;;;iBAaI,SAAA;;;;;;;;;;UAUN;;;;;;;;;;;;WAYC;;GAER,iBAAc,oBAAA,CAAA,GAAA,CAAA"}

package/dist/react/charts/base.js

@@ -0,0 +1,123 @@
+import { normalizeChartData, normalizeHeatmapData } from "./normalize.js";
+import { buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption } from "./options.js";
+import { useThemeColors } from "./theme.js";
+import ReactECharts from "echarts-for-react";
+import { useCallback, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react/charts/base.tsx
+/**
+* Determines the appropriate color palette for a chart type.
+* - Heatmaps use sequential (low → high intensity)
+* - All other charts use categorical (distinct categories)
+*/
+function getDefaultPalette(chartType) {
+	switch (chartType) {
+		case "heatmap": return "sequential";
+		default: return "categorical";
+	}
+}
+/**
+* Base chart component that handles both Arrow and JSON data.
+* Renders using ECharts for consistent output across both formats.
+*/
+function BaseChart({ data, chartType, xKey, yKey, orientation, height = 300, title, showLegend = true, colorPalette, colors: customColors, showSymbol = false, smooth = true, stacked = false, symbolSize = 8, showArea = true, innerRadius = 0, showLabels = true, labelPosition = "outside", yAxisKey, min, max, options: customOptions, className }) {
+	const themeColors = useThemeColors(colorPalette ?? getDefaultPalette(chartType));
+	const colors = customColors ?? themeColors;
+	const echartsInstanceRef = useRef(null);
+	const chartRefCallback = useCallback((node) => {
+		if (echartsInstanceRef.current && !echartsInstanceRef.current.isDisposed()) echartsInstanceRef.current.dispose();
+		if (node) echartsInstanceRef.current = node.getEchartsInstance();
+		else {
+			if (echartsInstanceRef.current && !echartsInstanceRef.current.isDisposed()) echartsInstanceRef.current.dispose();
+			echartsInstanceRef.current = null;
+		}
+	}, []);
+	const normalized = useMemo(() => chartType === "heatmap" ? normalizeHeatmapData(data, xKey, yAxisKey, yKey) : normalizeChartData(data, xKey, yKey, orientation), [
+		data,
+		xKey,
+		yKey,
+		yAxisKey,
+		orientation,
+		chartType
+	]);
+	const option = useMemo(() => {
+		const { xData, yFields, chartType: detectedChartType } = normalized;
+		if (xData.length === 0) return null;
+		const isHeatmap = chartType === "heatmap";
+		const baseCtx = {
+			xData,
+			yDataMap: "yDataMap" in normalized ? normalized.yDataMap : {},
+			yFields,
+			colors,
+			title,
+			showLegend
+		};
+		const isPie = chartType === "pie" || chartType === "donut";
+		const isRadar = chartType === "radar";
+		const isHorizontal = !isPie && !isRadar && !isHeatmap && (orientation === "horizontal" || detectedChartType === "categorical" && !orientation && chartType === "bar");
+		const isTimeSeries = detectedChartType === "timeseries" && !isHorizontal && !isRadar && !isHeatmap;
+		let opt;
+		if (isHeatmap && "yAxisData" in normalized && "heatmapData" in normalized) {
+			const heatmapNorm = normalized;
+			opt = buildHeatmapOption({
+				...baseCtx,
+				yAxisData: heatmapNorm.yAxisData,
+				heatmapData: heatmapNorm.heatmapData,
+				min: min ?? heatmapNorm.min,
+				max: max ?? heatmapNorm.max,
+				showLabels
+			});
+		} else if (isRadar) opt = buildRadarOption(baseCtx, showArea);
+		else if (isPie) opt = buildPieOption(baseCtx, chartType, innerRadius, showLabels, labelPosition);
+		else if (isHorizontal) opt = buildHorizontalBarOption(baseCtx, stacked);
+		else opt = buildCartesianOption({
+			...baseCtx,
+			chartType,
+			isTimeSeries,
+			stacked,
+			smooth,
+			showSymbol,
+			symbolSize
+		});
+		return customOptions ? {
+			...opt,
+			...customOptions
+		} : opt;
+	}, [
+		normalized,
+		colors,
+		title,
+		showLegend,
+		chartType,
+		orientation,
+		innerRadius,
+		showLabels,
+		labelPosition,
+		stacked,
+		smooth,
+		showSymbol,
+		symbolSize,
+		showArea,
+		min,
+		max,
+		customOptions
+	]);
+	if (!option) return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center h-full text-muted-foreground",
+		children: "No data"
+	});
+	return /* @__PURE__ */ jsx(ReactECharts, {
+		ref: chartRefCallback,
+		option,
+		style: { height },
+		className,
+		opts: { renderer: "canvas" },
+		notMerge: false,
+		lazyUpdate: true
+	});
+}
+
+//#endregion
+export { BaseChart };
+//# sourceMappingURL=base.js.map

package/dist/react/charts/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","names":["baseCtx: OptionBuilderContext","opt: Record<string, unknown>"],"sources":["../../../src/react/charts/base.tsx"],"sourcesContent":["import type { ECharts } from \"echarts\";\nimport ReactECharts from \"echarts-for-react\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { normalizeChartData, normalizeHeatmapData } from \"./normalize\";\nimport {\n  buildCartesianOption,\n  buildHeatmapOption,\n  buildHorizontalBarOption,\n  buildPieOption,\n  buildRadarOption,\n  type OptionBuilderContext,\n} from \"./options\";\nimport { useThemeColors } from \"./theme\";\nimport type {\n  ChartColorPalette,\n  ChartData,\n  ChartType,\n  Orientation,\n} from \"./types\";\n\n// ============================================================================\n// Palette Selection\n// ============================================================================\n\n/**\n * Determines the appropriate color palette for a chart type.\n * - Heatmaps use sequential (low → high intensity)\n * - All other charts use categorical (distinct categories)\n */\nfunction getDefaultPalette(chartType: ChartType): ChartColorPalette {\n  switch (chartType) {\n    case \"heatmap\":\n      return \"sequential\";\n    default:\n      return \"categorical\";\n  }\n}\n\n// ============================================================================\n// Component Props\n// ============================================================================\n\nexport interface BaseChartProps {\n  /** Chart data (Arrow Table or JSON array) - format is auto-detected */\n  data: ChartData;\n  /** Chart type */\n  chartType: ChartType;\n  /** X-axis field key (auto-detected from schema if not provided) */\n  xKey?: string;\n  /** Y-axis field key(s) (auto-detected from schema if not provided) */\n  yKey?: string | string[];\n  /** Chart orientation @default \"vertical\" */\n  orientation?: Orientation;\n  /** Chart height in pixels @default 300 */\n  height?: number;\n  /** Chart title */\n  title?: string;\n  /** Show legend @default true */\n  showLegend?: boolean;\n  /**\n   * Color palette to use. Auto-selected based on chart type if not specified.\n   * - \"categorical\": Distinct colors for different categories (bar, pie, line)\n   * - \"sequential\": Gradient for magnitude (heatmap)\n   * - \"diverging\": Two-tone for positive/negative (correlation)\n   */\n  colorPalette?: ChartColorPalette;\n  /** Custom colors (overrides colorPalette) */\n  colors?: string[];\n  /** Show data point symbols (line/area charts) @default false */\n  showSymbol?: boolean;\n  /** Smooth line curves (line/area charts) @default true */\n  smooth?: boolean;\n  /** Stack series @default false */\n  stacked?: boolean;\n  /** Symbol size for scatter charts @default 8 */\n  symbolSize?: number;\n  /** Show area fill for radar charts @default true */\n  showArea?: boolean;\n  /** Inner radius for pie/donut (0-100) @default 0 */\n  innerRadius?: number;\n  /** Show labels on pie/donut slices @default true */\n  showLabels?: boolean;\n  /** Label position for pie/donut @default \"outside\" */\n  labelPosition?: \"outside\" | \"inside\" | \"center\";\n  /** Y-axis field key for heatmap (the row dimension) */\n  yAxisKey?: string;\n  /** Min value for heatmap color scale */\n  min?: number;\n  /** Max value for heatmap color scale */\n  max?: number;\n  /** Additional ECharts options to merge */\n  options?: Record<string, unknown>;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n// ============================================================================\n// Base Chart Component\n// ============================================================================\n\n/**\n * Base chart component that handles both Arrow and JSON data.\n * Renders using ECharts for consistent output across both formats.\n */\nexport function BaseChart({\n  data,\n  chartType,\n  xKey,\n  yKey,\n  orientation,\n  height = 300,\n  title,\n  showLegend = true,\n  colorPalette,\n  colors: customColors,\n  showSymbol = false,\n  smooth = true,\n  stacked = false,\n  symbolSize = 8,\n  showArea = true,\n  innerRadius = 0,\n  showLabels = true,\n  labelPosition = \"outside\",\n  yAxisKey,\n  min,\n  max,\n  options: customOptions,\n  className,\n}: BaseChartProps) {\n  // Determine the appropriate color palette based on chart type\n  const resolvedPalette = colorPalette ?? getDefaultPalette(chartType);\n  const themeColors = useThemeColors(resolvedPalette);\n  const colors = customColors ?? themeColors;\n\n  // Store ECharts instance directly to avoid stale ref issues on unmount\n  const echartsInstanceRef = useRef<ECharts | null>(null);\n\n  // Callback ref pattern: captures the ECharts instance when ReactECharts mounts\n  // This ensures we always have a stable reference to the actual instance\n  const chartRefCallback = useCallback((node: ReactECharts | null) => {\n    // Dispose previous instance if component is being replaced\n    if (\n      echartsInstanceRef.current &&\n      !echartsInstanceRef.current.isDisposed()\n    ) {\n      echartsInstanceRef.current.dispose();\n    }\n\n    // Store the new instance\n    if (node) {\n      echartsInstanceRef.current = node.getEchartsInstance();\n    } else {\n      // Component unmounting - dispose the stored instance\n      if (\n        echartsInstanceRef.current &&\n        !echartsInstanceRef.current.isDisposed()\n      ) {\n        echartsInstanceRef.current.dispose();\n      }\n      echartsInstanceRef.current = null;\n    }\n  }, []);\n\n  // Memoize data normalization\n  const normalized = useMemo(\n    () =>\n      chartType === \"heatmap\"\n        ? normalizeHeatmapData(data, xKey, yAxisKey, yKey)\n        : normalizeChartData(data, xKey, yKey, orientation),\n    [data, xKey, yKey, yAxisKey, orientation, chartType],\n  );\n\n  // Memoize option building\n  const option = useMemo(() => {\n    const { xData, yFields, chartType: detectedChartType } = normalized;\n\n    if (xData.length === 0) return null;\n\n    // Determine chart mode first (needed to handle yDataMap)\n    const isHeatmap = chartType === \"heatmap\";\n\n    // Heatmaps use heatmapData instead of yDataMap\n    // For other charts, yDataMap is required\n    const yDataMap = \"yDataMap\" in normalized ? normalized.yDataMap : {};\n\n    const baseCtx: OptionBuilderContext = {\n      xData,\n      yDataMap,\n      yFields,\n      colors,\n      title,\n      showLegend,\n    };\n    const isPie = chartType === \"pie\" || chartType === \"donut\";\n    const isRadar = chartType === \"radar\";\n    const isHorizontal =\n      !isPie &&\n      !isRadar &&\n      !isHeatmap &&\n      (orientation === \"horizontal\" ||\n        (detectedChartType === \"categorical\" &&\n          !orientation &&\n          chartType === \"bar\"));\n    const isTimeSeries =\n      detectedChartType === \"timeseries\" &&\n      !isHorizontal &&\n      !isRadar &&\n      !isHeatmap;\n\n    // Build option based on chart type\n    let opt: Record<string, unknown>;\n\n    if (isHeatmap && \"yAxisData\" in normalized && \"heatmapData\" in normalized) {\n      const heatmapNorm = normalized as {\n        yAxisData: (string | number)[];\n        heatmapData: [number, number, number][];\n        min: number;\n        max: number;\n      } & typeof normalized;\n      opt = buildHeatmapOption({\n        ...baseCtx,\n        yAxisData: heatmapNorm.yAxisData,\n        heatmapData: heatmapNorm.heatmapData,\n        min: min ?? heatmapNorm.min,\n        max: max ?? heatmapNorm.max,\n        showLabels,\n      });\n    } else if (isRadar) {\n      opt = buildRadarOption(baseCtx, showArea);\n    } else if (isPie) {\n      opt = buildPieOption(\n        baseCtx,\n        chartType as \"pie\" | \"donut\",\n        innerRadius,\n        showLabels,\n        labelPosition,\n      );\n    } else if (isHorizontal) {\n      opt = buildHorizontalBarOption(baseCtx, stacked);\n    } else {\n      opt = buildCartesianOption({\n        ...baseCtx,\n        chartType,\n        isTimeSeries,\n        stacked,\n        smooth,\n        showSymbol,\n        symbolSize,\n      });\n    }\n\n    // Merge custom options\n    return customOptions ? { ...opt, ...customOptions } : opt;\n  }, [\n    normalized,\n    colors,\n    title,\n    showLegend,\n    chartType,\n    orientation,\n    innerRadius,\n    showLabels,\n    labelPosition,\n    stacked,\n    smooth,\n    showSymbol,\n    symbolSize,\n    showArea,\n    min,\n    max,\n    customOptions,\n  ]);\n\n  if (!option) {\n    return (\n      <div className=\"flex items-center justify-center h-full text-muted-foreground\">\n        No data\n      </div>\n    );\n  }\n\n  return (\n    <ReactECharts\n      ref={chartRefCallback}\n      option={option}\n      style={{ height }}\n      className={className}\n      opts={{ renderer: \"canvas\" }}\n      notMerge={false}\n      lazyUpdate={true}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA6BA,SAAS,kBAAkB,WAAyC;AAClE,SAAQ,WAAR;EACE,KAAK,UACH,QAAO;EACT,QACE,QAAO;;;;;;;AAsEb,SAAgB,UAAU,EACxB,MACA,WACA,MACA,MACA,aACA,SAAS,KACT,OACA,aAAa,MACb,cACA,QAAQ,cACR,aAAa,OACb,SAAS,MACT,UAAU,OACV,aAAa,GACb,WAAW,MACX,cAAc,GACd,aAAa,MACb,gBAAgB,WAChB,UACA,KACA,KACA,SAAS,eACT,aACiB;CAGjB,MAAM,cAAc,eADI,gBAAgB,kBAAkB,UAAU,CACjB;CACnD,MAAM,SAAS,gBAAgB;CAG/B,MAAM,qBAAqB,OAAuB,KAAK;CAIvD,MAAM,mBAAmB,aAAa,SAA8B;AAElE,MACE,mBAAmB,WACnB,CAAC,mBAAmB,QAAQ,YAAY,CAExC,oBAAmB,QAAQ,SAAS;AAItC,MAAI,KACF,oBAAmB,UAAU,KAAK,oBAAoB;OACjD;AAEL,OACE,mBAAmB,WACnB,CAAC,mBAAmB,QAAQ,YAAY,CAExC,oBAAmB,QAAQ,SAAS;AAEtC,sBAAmB,UAAU;;IAE9B,EAAE,CAAC;CAGN,MAAM,aAAa,cAEf,cAAc,YACV,qBAAqB,MAAM,MAAM,UAAU,KAAK,GAChD,mBAAmB,MAAM,MAAM,MAAM,YAAY,EACvD;EAAC;EAAM;EAAM;EAAM;EAAU;EAAa;EAAU,CACrD;CAGD,MAAM,SAAS,cAAc;EAC3B,MAAM,EAAE,OAAO,SAAS,WAAW,sBAAsB;AAEzD,MAAI,MAAM,WAAW,EAAG,QAAO;EAG/B,MAAM,YAAY,cAAc;EAMhC,MAAMA,UAAgC;GACpC;GACA,UAJe,cAAc,aAAa,WAAW,WAAW,EAAE;GAKlE;GACA;GACA;GACA;GACD;EACD,MAAM,QAAQ,cAAc,SAAS,cAAc;EACnD,MAAM,UAAU,cAAc;EAC9B,MAAM,eACJ,CAAC,SACD,CAAC,WACD,CAAC,cACA,gBAAgB,gBACd,sBAAsB,iBACrB,CAAC,eACD,cAAc;EACpB,MAAM,eACJ,sBAAsB,gBACtB,CAAC,gBACD,CAAC,WACD,CAAC;EAGH,IAAIC;AAEJ,MAAI,aAAa,eAAe,cAAc,iBAAiB,YAAY;GACzE,MAAM,cAAc;AAMpB,SAAM,mBAAmB;IACvB,GAAG;IACH,WAAW,YAAY;IACvB,aAAa,YAAY;IACzB,KAAK,OAAO,YAAY;IACxB,KAAK,OAAO,YAAY;IACxB;IACD,CAAC;aACO,QACT,OAAM,iBAAiB,SAAS,SAAS;WAChC,MACT,OAAM,eACJ,SACA,WACA,aACA,YACA,cACD;WACQ,aACT,OAAM,yBAAyB,SAAS,QAAQ;MAEhD,OAAM,qBAAqB;GACzB,GAAG;GACH;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;AAIJ,SAAO,gBAAgB;GAAE,GAAG;GAAK,GAAG;GAAe,GAAG;IACrD;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,KAAI,CAAC,OACH,QACE,oBAAC;EAAI,WAAU;YAAgE;GAEzE;AAIV,QACE,oBAAC;EACC,KAAK;EACG;EACR,OAAO,EAAE,QAAQ;EACN;EACX,MAAM,EAAE,UAAU,UAAU;EAC5B,UAAU;EACV,YAAY;GACZ"}

package/dist/react/charts/chart-error-boundary.js

@@ -0,0 +1,37 @@
+import { Component } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react/charts/chart-error-boundary.tsx
+var ErrorBoundary = class extends Component {
+	constructor(..._args) {
+		super(..._args);
+		this.state = { hasError: false };
+	}
+	static getDerivedStateFromError() {
+		return { hasError: true };
+	}
+	componentDidCatch(error) {
+		this.props.onError(error);
+	}
+	render() {
+		if (this.state.hasError) return this.props.fallback;
+		return this.props.children;
+	}
+};
+/**
+* Error boundary component for charts
+* @param children - The children to render
+* @param fallback - The fallback component to render when an error occurs
+* @returns - The rendered chart component with error boundary
+*/
+function ChartErrorBoundary({ children, fallback }) {
+	return /* @__PURE__ */ jsx(ErrorBoundary, {
+		fallback,
+		onError: (error) => console.error("Chart render error:", error),
+		children
+	});
+}
+
+//#endregion
+export { ChartErrorBoundary };
+//# sourceMappingURL=chart-error-boundary.js.map

package/dist/react/charts/chart-error-boundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-error-boundary.js","names":[],"sources":["../../../src/react/charts/chart-error-boundary.tsx"],"sourcesContent":["import { Component } from \"react\";\n\nclass ErrorBoundary extends Component<\n  {\n    children: React.ReactNode;\n    fallback: React.ReactNode;\n    onError: (error: Error) => void;\n  },\n  { hasError: boolean }\n> {\n  state = { hasError: false };\n\n  static getDerivedStateFromError() {\n    return { hasError: true };\n  }\n\n  componentDidCatch(error: Error) {\n    this.props.onError(error);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return this.props.fallback;\n    }\n    return this.props.children;\n  }\n}\n\n/**\n * Error boundary component for charts\n * @param children - The children to render\n * @param fallback - The fallback component to render when an error occurs\n * @returns - The rendered chart component with error boundary\n */\nexport function ChartErrorBoundary({\n  children,\n  fallback,\n}: {\n  children: React.ReactNode;\n  fallback: React.ReactNode;\n}) {\n  return (\n    <ErrorBoundary\n      fallback={fallback}\n      onError={(error) => console.error(\"Chart render error:\", error)}\n    >\n      {children}\n    </ErrorBoundary>\n  );\n}\n"],"mappings":";;;;AAEA,IAAM,gBAAN,cAA4B,UAO1B;;;eACQ,EAAE,UAAU,OAAO;;CAE3B,OAAO,2BAA2B;AAChC,SAAO,EAAE,UAAU,MAAM;;CAG3B,kBAAkB,OAAc;AAC9B,OAAK,MAAM,QAAQ,MAAM;;CAG3B,SAAS;AACP,MAAI,KAAK,MAAM,SACb,QAAO,KAAK,MAAM;AAEpB,SAAO,KAAK,MAAM;;;;;;;;;AAUtB,SAAgB,mBAAmB,EACjC,UACA,YAIC;AACD,QACE,oBAAC;EACW;EACV,UAAU,UAAU,QAAQ,MAAM,uBAAuB,MAAM;EAE9D;GACa"}

package/dist/react/charts/constants.d.ts

@@ -0,0 +1,22 @@
+import { DATE_FIELD_PATTERNS, METADATA_DATE_PATTERNS, NAME_FIELD_PATTERNS } from "../../js/constants.js";
+
+//#region src/react/charts/constants.d.ts
+/** CSS variable names for categorical chart colors (distinct categories) */
+declare const CHART_COLOR_VARS_CATEGORICAL: readonly ["--chart-cat-1", "--chart-cat-2", "--chart-cat-3", "--chart-cat-4", "--chart-cat-5", "--chart-cat-6", "--chart-cat-7", "--chart-cat-8"];
+/** CSS variable names for sequential chart colors (low → high) */
+declare const CHART_COLOR_VARS_SEQUENTIAL: readonly ["--chart-seq-1", "--chart-seq-2", "--chart-seq-3", "--chart-seq-4", "--chart-seq-5", "--chart-seq-6", "--chart-seq-7", "--chart-seq-8"];
+/** CSS variable names for diverging chart colors (negative ↔ positive) */
+declare const CHART_COLOR_VARS_DIVERGING: readonly ["--chart-div-1", "--chart-div-2", "--chart-div-3", "--chart-div-4", "--chart-div-5", "--chart-div-6", "--chart-div-7", "--chart-div-8"];
+/** Legacy: CSS variable names for chart colors (aliases to categorical) */
+declare const CHART_COLOR_VARS: readonly ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5", "--chart-6", "--chart-7", "--chart-8"];
+/** Fallback categorical colors */
+declare const FALLBACK_COLORS_CATEGORICAL: string[];
+/** Fallback sequential colors (light → dark blue) */
+declare const FALLBACK_COLORS_SEQUENTIAL: string[];
+/** Fallback diverging colors (blue → red) */
+declare const FALLBACK_COLORS_DIVERGING: string[];
+/** Legacy: Fallback colors (aliases to categorical) */
+declare const FALLBACK_COLORS: string[];
+//#endregion
+export { CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, FALLBACK_COLORS, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL };
+//# sourceMappingURL=constants.d.ts.map

package/dist/react/charts/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","names":[],"sources":["../../../src/react/charts/constants.ts"],"sourcesContent":[],"mappings":";;;;cAgBa;AAAb;AAYa,cAAA,2BASH,EAAA,SAAA,CAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,CAAA;AAGV;AAYa,cAZA,0BAqBH,EAAA,SAAA,CAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,CAAA;AAOV;AAYa,cA5BA,gBAqCZ,EAAA,SAAA,CAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,CAAA;AAGD;AAYa,cApCA,2BAoC6C,EAAA,MAAA,EAAA;;cAxB7C;;cAYA;;cAYA"}

package/dist/react/charts/constants.js

@@ -0,0 +1,86 @@
+import { DATE_FIELD_PATTERNS, METADATA_DATE_PATTERNS, NAME_FIELD_PATTERNS } from "../../js/constants.js";
+
+//#region src/react/charts/constants.ts
+/** CSS variable names for categorical chart colors (distinct categories) */
+const CHART_COLOR_VARS_CATEGORICAL = [
+	"--chart-cat-1",
+	"--chart-cat-2",
+	"--chart-cat-3",
+	"--chart-cat-4",
+	"--chart-cat-5",
+	"--chart-cat-6",
+	"--chart-cat-7",
+	"--chart-cat-8"
+];
+/** CSS variable names for sequential chart colors (low → high) */
+const CHART_COLOR_VARS_SEQUENTIAL = [
+	"--chart-seq-1",
+	"--chart-seq-2",
+	"--chart-seq-3",
+	"--chart-seq-4",
+	"--chart-seq-5",
+	"--chart-seq-6",
+	"--chart-seq-7",
+	"--chart-seq-8"
+];
+/** CSS variable names for diverging chart colors (negative ↔ positive) */
+const CHART_COLOR_VARS_DIVERGING = [
+	"--chart-div-1",
+	"--chart-div-2",
+	"--chart-div-3",
+	"--chart-div-4",
+	"--chart-div-5",
+	"--chart-div-6",
+	"--chart-div-7",
+	"--chart-div-8"
+];
+/** Legacy: CSS variable names for chart colors (aliases to categorical) */
+const CHART_COLOR_VARS = [
+	"--chart-1",
+	"--chart-2",
+	"--chart-3",
+	"--chart-4",
+	"--chart-5",
+	"--chart-6",
+	"--chart-7",
+	"--chart-8"
+];
+/** Fallback categorical colors */
+const FALLBACK_COLORS_CATEGORICAL = [
+	"hsla(221, 83%, 53%, 1)",
+	"hsla(160, 60%, 45%, 1)",
+	"hsla(291, 47%, 51%, 1)",
+	"hsla(35, 92%, 55%, 1)",
+	"hsla(349, 72%, 52%, 1)",
+	"hsla(189, 75%, 42%, 1)",
+	"hsla(271, 55%, 60%, 1)",
+	"hsla(142, 55%, 45%, 1)"
+];
+/** Fallback sequential colors (light → dark blue) */
+const FALLBACK_COLORS_SEQUENTIAL = [
+	"hsla(221, 70%, 94%, 1)",
+	"hsla(221, 72%, 85%, 1)",
+	"hsla(221, 74%, 74%, 1)",
+	"hsla(221, 76%, 63%, 1)",
+	"hsla(221, 78%, 52%, 1)",
+	"hsla(221, 80%, 42%, 1)",
+	"hsla(221, 82%, 32%, 1)",
+	"hsla(221, 84%, 24%, 1)"
+];
+/** Fallback diverging colors (blue → red) */
+const FALLBACK_COLORS_DIVERGING = [
+	"hsla(221, 80%, 35%, 1)",
+	"hsla(221, 70%, 50%, 1)",
+	"hsla(221, 55%, 65%, 1)",
+	"hsla(221, 35%, 82%, 1)",
+	"hsla(10, 35%, 82%, 1)",
+	"hsla(10, 60%, 65%, 1)",
+	"hsla(10, 72%, 50%, 1)",
+	"hsla(10, 80%, 40%, 1)"
+];
+/** Legacy: Fallback colors (aliases to categorical) */
+const FALLBACK_COLORS = FALLBACK_COLORS_CATEGORICAL;
+
+//#endregion
+export { CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, FALLBACK_COLORS, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL };
+//# sourceMappingURL=constants.js.map

package/dist/react/charts/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/react/charts/constants.ts"],"sourcesContent":["// ============================================================================\n// Shared Constants for Chart Components\n// ============================================================================\n\n// Re-export field patterns from shared constants\nexport {\n  DATE_FIELD_PATTERNS,\n  METADATA_DATE_PATTERNS,\n  NAME_FIELD_PATTERNS,\n} from \"@/js/constants\";\n\n// ============================================================================\n// Chart Color Palettes\n// ============================================================================\n\n/** CSS variable names for categorical chart colors (distinct categories) */\nexport const CHART_COLOR_VARS_CATEGORICAL = [\n  \"--chart-cat-1\",\n  \"--chart-cat-2\",\n  \"--chart-cat-3\",\n  \"--chart-cat-4\",\n  \"--chart-cat-5\",\n  \"--chart-cat-6\",\n  \"--chart-cat-7\",\n  \"--chart-cat-8\",\n] as const;\n\n/** CSS variable names for sequential chart colors (low → high) */\nexport const CHART_COLOR_VARS_SEQUENTIAL = [\n  \"--chart-seq-1\",\n  \"--chart-seq-2\",\n  \"--chart-seq-3\",\n  \"--chart-seq-4\",\n  \"--chart-seq-5\",\n  \"--chart-seq-6\",\n  \"--chart-seq-7\",\n  \"--chart-seq-8\",\n] as const;\n\n/** CSS variable names for diverging chart colors (negative ↔ positive) */\nexport const CHART_COLOR_VARS_DIVERGING = [\n  \"--chart-div-1\",\n  \"--chart-div-2\",\n  \"--chart-div-3\",\n  \"--chart-div-4\",\n  \"--chart-div-5\",\n  \"--chart-div-6\",\n  \"--chart-div-7\",\n  \"--chart-div-8\",\n] as const;\n\n/** Legacy: CSS variable names for chart colors (aliases to categorical) */\nexport const CHART_COLOR_VARS = [\n  \"--chart-1\",\n  \"--chart-2\",\n  \"--chart-3\",\n  \"--chart-4\",\n  \"--chart-5\",\n  \"--chart-6\",\n  \"--chart-7\",\n  \"--chart-8\",\n] as const;\n\n// ============================================================================\n// Fallback Colors (when CSS variables unavailable)\n// ============================================================================\n\n/** Fallback categorical colors */\nexport const FALLBACK_COLORS_CATEGORICAL = [\n  \"hsla(221, 83%, 53%, 1)\", // Blue\n  \"hsla(160, 60%, 45%, 1)\", // Teal\n  \"hsla(291, 47%, 51%, 1)\", // Purple\n  \"hsla(35, 92%, 55%, 1)\", // Amber\n  \"hsla(349, 72%, 52%, 1)\", // Rose\n  \"hsla(189, 75%, 42%, 1)\", // Cyan\n  \"hsla(271, 55%, 60%, 1)\", // Lavender\n  \"hsla(142, 55%, 45%, 1)\", // Emerald\n];\n\n/** Fallback sequential colors (light → dark blue) */\nexport const FALLBACK_COLORS_SEQUENTIAL = [\n  \"hsla(221, 70%, 94%, 1)\",\n  \"hsla(221, 72%, 85%, 1)\",\n  \"hsla(221, 74%, 74%, 1)\",\n  \"hsla(221, 76%, 63%, 1)\",\n  \"hsla(221, 78%, 52%, 1)\",\n  \"hsla(221, 80%, 42%, 1)\",\n  \"hsla(221, 82%, 32%, 1)\",\n  \"hsla(221, 84%, 24%, 1)\",\n];\n\n/** Fallback diverging colors (blue → red) */\nexport const FALLBACK_COLORS_DIVERGING = [\n  \"hsla(221, 80%, 35%, 1)\", // Strong negative\n  \"hsla(221, 70%, 50%, 1)\",\n  \"hsla(221, 55%, 65%, 1)\",\n  \"hsla(221, 35%, 82%, 1)\", // Weak negative\n  \"hsla(10, 35%, 82%, 1)\", // Weak positive\n  \"hsla(10, 60%, 65%, 1)\",\n  \"hsla(10, 72%, 50%, 1)\",\n  \"hsla(10, 80%, 40%, 1)\", // Strong positive\n];\n\n/** Legacy: Fallback colors (aliases to categorical) */\nexport const FALLBACK_COLORS = FALLBACK_COLORS_CATEGORICAL;\n"],"mappings":";;;;AAgBA,MAAa,+BAA+B;CAC1C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;AAGD,MAAa,8BAA8B;CACzC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;AAGD,MAAa,6BAA6B;CACxC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;AAGD,MAAa,mBAAmB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;AAOD,MAAa,8BAA8B;CACzC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;AAGD,MAAa,6BAA6B;CACxC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;AAGD,MAAa,4BAA4B;CACvC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;AAGD,MAAa,kBAAkB"}

package/dist/react/charts/create-chart.d.ts

@@ -0,0 +1,26 @@
+import { ChartType, UnifiedChartProps } from "./types.js";
+import * as react_jsx_runtime283 from "react/jsx-runtime";
+
+//#region src/react/charts/create-chart.d.ts
+
+/**
+ * Factory function to create chart components.
+ * Eliminates boilerplate by generating components with the same pattern.
+ *
+ * @param chartType - The ECharts chart type
+ * @param displayName - Component display name for React DevTools
+ * @returns A typed chart component
+ *
+ * @example
+ * ```tsx
+ * export const BarChart = createChart<BarChartProps>("bar", "BarChart");
+ * export const LineChart = createChart<LineChartProps>("line", "LineChart");
+ * ```
+ */
+declare function createChart<TProps extends UnifiedChartProps>(chartType: ChartType, displayName: string): {
+  (props: TProps): react_jsx_runtime283.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { createChart };
+//# sourceMappingURL=create-chart.d.ts.map

package/dist/react/charts/create-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-chart.d.ts","names":[],"sources":["../../../src/react/charts/create-chart.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAkBA;;;;;;;;;;;iBAAgB,2BAA2B,8BAC9B;UAGe,SAAM,oBAAA,CAAA,GAAA,CAAA"}

package/dist/react/charts/create-chart.js

@@ -0,0 +1,55 @@
+import { BaseChart } from "./base.js";
+import { ChartWrapper } from "./wrapper.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react/charts/create-chart.tsx
+/**
+* Factory function to create chart components.
+* Eliminates boilerplate by generating components with the same pattern.
+*
+* @param chartType - The ECharts chart type
+* @param displayName - Component display name for React DevTools
+* @returns A typed chart component
+*
+* @example
+* ```tsx
+* export const BarChart = createChart<BarChartProps>("bar", "BarChart");
+* export const LineChart = createChart<LineChartProps>("line", "LineChart");
+* ```
+*/
+function createChart(chartType, displayName) {
+	const Component = (props) => {
+		const { queryKey, parameters, format, transformer, data, height = 300, className, ariaLabel, testId, ...chartProps } = props;
+		return /* @__PURE__ */ jsx(ChartWrapper, {
+			...data !== void 0 ? {
+				data,
+				height,
+				className,
+				ariaLabel,
+				testId
+			} : {
+				queryKey,
+				parameters,
+				format,
+				transformer,
+				height,
+				className,
+				ariaLabel,
+				testId: testId ?? `${chartType}-chart-${queryKey}`
+			},
+			children: (chartData) => /* @__PURE__ */ jsx(BaseChart, {
+				data: chartData,
+				chartType,
+				height,
+				className,
+				...chartProps
+			})
+		});
+	};
+	Component.displayName = displayName;
+	return Component;
+}
+
+//#endregion
+export { createChart };
+//# sourceMappingURL=create-chart.js.map