@prismiq/react 0.1.0

package/dist/chunk-2H5WTH4K.js

@@ -0,0 +1,2409 @@
+import { useTheme } from './chunk-T6STUE7E.js';
+import { createDateFormatter } from './chunk-EX74SI67.js';
+import { useRef, useCallback, useState, useEffect, useMemo } from 'react';
+import ReactEChartsCore from 'echarts-for-react/esm/core';
+import * as echarts from 'echarts/core';
+import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts';
+import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, MarkLineComponent, MarkPointComponent, DataZoomComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import ReactEChartsCore2 from 'echarts-for-react/lib/core';
+
+// src/charts/utils.ts
+function queryResultToChartData(result, xColumn, yColumns, seriesColumn) {
+  const xIndex = result.columns.indexOf(xColumn);
+  if (xIndex === -1) {
+    return { categories: [], series: [] };
+  }
+  if (seriesColumn) {
+    const seriesIndex = result.columns.indexOf(seriesColumn);
+    if (seriesIndex === -1) {
+      return { categories: [], series: [] };
+    }
+    const xValuesSet = /* @__PURE__ */ new Set();
+    result.rows.forEach((row) => {
+      const xValue = row[xIndex];
+      xValuesSet.add(xValue === null ? "" : String(xValue));
+    });
+    const categories2 = Array.from(xValuesSet).sort();
+    const seriesNamesSet = /* @__PURE__ */ new Set();
+    result.rows.forEach((row) => {
+      const seriesValue = row[seriesIndex];
+      seriesNamesSet.add(seriesValue === null ? "" : String(seriesValue));
+    });
+    const seriesNames = Array.from(seriesNamesSet).sort();
+    const series2 = yColumns.flatMap((yColName) => {
+      const yIndex = result.columns.indexOf(yColName);
+      if (yIndex === -1) {
+        return [];
+      }
+      return seriesNames.map((seriesName) => {
+        const data = categories2.map((category) => {
+          const row = result.rows.find((r) => {
+            const rowSeriesValue = r[seriesIndex];
+            const rowXValue = r[xIndex];
+            return String(rowSeriesValue) === seriesName && String(rowXValue) === category;
+          });
+          if (!row) {
+            return null;
+          }
+          const value = row[yIndex];
+          if (value === null || value === void 0) {
+            return null;
+          }
+          return typeof value === "number" ? value : Number(value);
+        });
+        return {
+          name: seriesName,
+          data
+        };
+      });
+    });
+    return { categories: categories2, series: series2 };
+  }
+  const categories = result.rows.map((row) => {
+    const value = row[xIndex];
+    return value === null ? "" : String(value);
+  });
+  const series = yColumns.map((colName) => {
+    const yIndex = result.columns.indexOf(colName);
+    if (yIndex === -1) {
+      return null;
+    }
+    const data = result.rows.map((row) => {
+      const value = row[yIndex];
+      if (value === null || value === void 0) {
+        return null;
+      }
+      return typeof value === "number" ? value : Number(value);
+    });
+    return {
+      name: colName,
+      data
+    };
+  }).filter((s) => s !== null);
+  return { categories, series };
+}
+function dataPointsToChartData(data, xColumn, yColumns, seriesColumn) {
+  if (seriesColumn) {
+    const xValuesSet = /* @__PURE__ */ new Set();
+    data.forEach((point) => {
+      const xValue = point[xColumn];
+      xValuesSet.add(xValue === null ? "" : String(xValue));
+    });
+    const categories2 = Array.from(xValuesSet).sort();
+    const seriesNamesSet = /* @__PURE__ */ new Set();
+    data.forEach((point) => {
+      const seriesValue = point[seriesColumn];
+      seriesNamesSet.add(seriesValue === null ? "" : String(seriesValue));
+    });
+    const seriesNames = Array.from(seriesNamesSet).sort();
+    const series2 = yColumns.flatMap((yColName) => {
+      return seriesNames.map((seriesName) => {
+        const seriesData = categories2.map((category) => {
+          const point = data.find((p) => {
+            const pSeriesValue = p[seriesColumn];
+            const pXValue = p[xColumn];
+            return String(pSeriesValue) === seriesName && String(pXValue) === category;
+          });
+          if (!point) {
+            return null;
+          }
+          const value = point[yColName];
+          if (value === null || value === void 0) {
+            return null;
+          }
+          return typeof value === "number" ? value : Number(value);
+        });
+        return {
+          name: seriesName,
+          data: seriesData
+        };
+      });
+    });
+    return { categories: categories2, series: series2 };
+  }
+  const categories = data.map((point) => {
+    const value = point[xColumn];
+    return value === null ? "" : String(value);
+  });
+  const series = yColumns.map((colName) => ({
+    name: colName,
+    data: data.map((point) => {
+      const value = point[colName];
+      if (value === null || value === void 0) {
+        return null;
+      }
+      return typeof value === "number" ? value : Number(value);
+    })
+  }));
+  return { categories, series };
+}
+function isQueryResult(data) {
+  return data !== null && typeof data === "object" && "columns" in data && "rows" in data && Array.isArray(data.columns) && Array.isArray(data.rows);
+}
+function toChartData(data, xColumn, yColumns, seriesColumn) {
+  if (isQueryResult(data)) {
+    return queryResultToChartData(data, xColumn, yColumns, seriesColumn);
+  }
+  return dataPointsToChartData(data, xColumn, yColumns, seriesColumn);
+}
+function createChartTheme(theme) {
+  return {
+    color: theme.chart.colors,
+    backgroundColor: "transparent",
+    textStyle: {
+      fontFamily: theme.fonts.sans,
+      color: theme.colors.text
+    },
+    title: {
+      textStyle: {
+        color: theme.colors.text,
+        fontSize: 16,
+        fontWeight: 600
+      }
+    },
+    legend: {
+      textStyle: {
+        color: theme.colors.textMuted,
+        fontSize: 12
+      }
+    },
+    xAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: { color: theme.chart.axisColor }
+      },
+      axisTick: {
+        show: true,
+        lineStyle: { color: theme.chart.axisColor }
+      },
+      axisLabel: {
+        color: theme.colors.textMuted,
+        fontSize: 11
+      },
+      splitLine: {
+        show: false,
+        lineStyle: { color: theme.chart.gridColor }
+      }
+    },
+    yAxis: {
+      axisLine: {
+        show: false,
+        lineStyle: { color: theme.chart.axisColor }
+      },
+      axisTick: {
+        show: false,
+        lineStyle: { color: theme.chart.axisColor }
+      },
+      axisLabel: {
+        color: theme.colors.textMuted,
+        fontSize: 11
+      },
+      splitLine: {
+        show: true,
+        lineStyle: { color: theme.chart.gridColor, type: "dashed" }
+      }
+    },
+    tooltip: {
+      backgroundColor: theme.chart.tooltipBackground,
+      borderColor: theme.colors.border,
+      borderWidth: 1,
+      textStyle: {
+        color: theme.name === "dark" ? "#f9fafb" : "#ffffff",
+        fontSize: 12
+      },
+      padding: [8, 12]
+    },
+    grid: {
+      left: 60,
+      right: 20,
+      top: 40,
+      bottom: 40,
+      containLabel: false
+    }
+  };
+}
+function applyThemeToOption(option, theme) {
+  const chartTheme = createChartTheme(theme);
+  return {
+    ...option,
+    // Disable animations to prevent sizing issues with notMerge=false
+    // Charts will still look good but won't animate on data changes
+    animation: false,
+    color: option.color || chartTheme.color,
+    backgroundColor: chartTheme.backgroundColor,
+    textStyle: {
+      ...chartTheme.textStyle,
+      ...typeof option.textStyle === "object" ? option.textStyle : {}
+    },
+    tooltip: {
+      ...chartTheme.tooltip,
+      ...typeof option.tooltip === "object" ? option.tooltip : {}
+    },
+    xAxis: mergeAxisConfig(option.xAxis, chartTheme.xAxis),
+    yAxis: mergeAxisConfig(option.yAxis, chartTheme.yAxis),
+    grid: {
+      ...chartTheme.grid,
+      ...typeof option.grid === "object" ? option.grid : {}
+    }
+  };
+}
+function mergeAxisConfig(axisOption, themeAxis) {
+  if (Array.isArray(axisOption)) {
+    return axisOption.map(
+      (axis) => mergeAxisConfig(axis, themeAxis)
+    );
+  }
+  if (typeof axisOption === "object" && axisOption !== null) {
+    return {
+      ...themeAxis,
+      ...axisOption,
+      axisLine: {
+        ...themeAxis.axisLine,
+        ...axisOption.axisLine || {}
+      },
+      axisLabel: {
+        ...themeAxis.axisLabel,
+        ...axisOption.axisLabel || {}
+      },
+      splitLine: {
+        ...themeAxis.splitLine,
+        ...axisOption.splitLine || {}
+      }
+    };
+  }
+  return themeAxis;
+}
+function formatAxisLabel(value, format, options) {
+  const { currencySymbol = "$", decimals = 2, compactNotation } = options || {};
+  switch (format) {
+    case "currency":
+      if (compactNotation) {
+        return `${currencySymbol}${formatCompactAtThreshold(value, compactNotation, decimals)}`;
+      }
+      return `${currencySymbol}${value.toLocaleString(void 0, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals
+      })}`;
+    case "percent":
+      return `${(value * 100).toFixed(decimals)}%`;
+    case "compact":
+      return formatCompact(value, decimals);
+    case "number":
+    default:
+      return value.toLocaleString(void 0, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals
+      });
+  }
+}
+function formatCompact(value, decimals = 1) {
+  const absValue = Math.abs(value);
+  const sign = value < 0 ? "-" : "";
+  if (absValue >= 1e9) {
+    return `${sign}${(absValue / 1e9).toFixed(decimals)}B`;
+  }
+  if (absValue >= 1e6) {
+    return `${sign}${(absValue / 1e6).toFixed(decimals)}M`;
+  }
+  if (absValue >= 1e3) {
+    return `${sign}${(absValue / 1e3).toFixed(decimals)}K`;
+  }
+  return `${sign}${absValue.toFixed(decimals)}`;
+}
+function formatCompactAtThreshold(value, notation, decimals = 0) {
+  const absValue = Math.abs(value);
+  const sign = value < 0 ? "-" : "";
+  const thresholds = {
+    K: { threshold: 1e3, divisor: 1e3 },
+    M: { threshold: 1e6, divisor: 1e6 },
+    B: { threshold: 1e9, divisor: 1e9 },
+    T: { threshold: 1e12, divisor: 1e12 }
+  };
+  const config = thresholds[notation];
+  if (absValue >= config.threshold) {
+    const formatted = (absValue / config.divisor).toFixed(decimals);
+    return `${sign}${formatted}${notation}`;
+  }
+  return `${sign}${absValue.toLocaleString(void 0, {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals
+  })}`;
+}
+function formatMetricValue(value, format = "number", options) {
+  if (typeof value === "string") {
+    return value;
+  }
+  const { currencySymbol = "$", decimals = 0, compactNotation } = options || {};
+  switch (format) {
+    case "currency":
+      if (compactNotation) {
+        const compactValue = formatCompactAtThreshold(value, compactNotation, decimals);
+        return `${currencySymbol}${compactValue}`;
+      }
+      return `${currencySymbol}${value.toLocaleString(void 0, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals
+      })}`;
+    case "percent":
+      return `${(value * 100).toFixed(decimals)}%`;
+    case "compact":
+      return formatCompact(value, decimals);
+    case "number":
+    default:
+      if (compactNotation) {
+        return formatCompactAtThreshold(value, compactNotation, decimals);
+      }
+      return value.toLocaleString(void 0, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals
+      });
+  }
+}
+var DEFAULT_COLOR = "#3b82f6";
+function getChartColors(theme, count) {
+  const themeColors = theme.chart.colors;
+  if (themeColors.length === 0) {
+    return Array(count).fill(DEFAULT_COLOR);
+  }
+  const result = [];
+  for (let i = 0; i < count; i++) {
+    const color = themeColors[i % themeColors.length];
+    result.push(color ?? DEFAULT_COLOR);
+  }
+  return result;
+}
+function createGradientColor(color, opacity = 0.2) {
+  return {
+    type: "linear",
+    x: 0,
+    y: 0,
+    x2: 0,
+    y2: 1,
+    colorStops: [
+      { offset: 0, color: adjustColorOpacity(color, opacity) },
+      { offset: 1, color: adjustColorOpacity(color, 0.02) }
+    ]
+  };
+}
+function adjustColorOpacity(hexColor, opacity) {
+  const hex = hexColor.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+function createMarkLines(lines, theme) {
+  return {
+    silent: true,
+    symbol: "none",
+    data: lines.map((line) => ({
+      yAxis: line.value,
+      label: {
+        show: !!line.label,
+        formatter: line.label || "",
+        position: "end",
+        color: line.color || theme.colors.textMuted,
+        fontSize: 11
+      },
+      lineStyle: {
+        color: line.color || theme.colors.textMuted,
+        type: line.lineStyle || "dashed",
+        width: 1
+      }
+    }))
+  };
+}
+function isChartDataEmpty(data) {
+  if (isQueryResult(data)) {
+    return data.rows.length === 0;
+  }
+  return data.length === 0;
+}
+function createEmptyStateGraphic(message = "No data available") {
+  return {
+    type: "text",
+    left: "center",
+    top: "middle",
+    style: {
+      text: message,
+      fontSize: 14,
+      fill: "#9ca3af"
+    }
+  };
+}
+echarts.use([
+  BarChart,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  MarkLineComponent,
+  MarkPointComponent,
+  DataZoomComponent,
+  CanvasRenderer
+]);
+function EChartWrapper({
+  option,
+  loading = false,
+  height = 300,
+  width = "100%",
+  theme: themeOverride,
+  onEvents,
+  className
+}) {
+  const { theme, resolvedMode } = useTheme();
+  const chartRef = useRef(null);
+  const prevOptionRef = useRef("");
+  const themedOption = applyThemeToOption(option, theme);
+  const shouldSetOption = useCallback(
+    (_prevProps, props) => {
+      const newOptionString = JSON.stringify(props.option);
+      if (prevOptionRef.current === newOptionString) {
+        return false;
+      }
+      prevOptionRef.current = newOptionString;
+      return true;
+    },
+    []
+  );
+  const effectiveTheme = themeOverride || resolvedMode;
+  const handleResize = useCallback(() => {
+    if (chartRef.current) {
+      const chartInstance = chartRef.current.getEchartsInstance();
+      chartInstance?.resize();
+    }
+  }, []);
+  const containerStyle = {
+    width: typeof width === "number" ? `${width}px` : width,
+    height: typeof height === "number" ? `${height}px` : height,
+    position: "relative"
+  };
+  const loadingStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.colors.surface,
+    opacity: 0.9,
+    zIndex: 10
+  };
+  const spinnerStyle = {
+    width: "32px",
+    height: "32px",
+    border: `3px solid ${theme.colors.border}`,
+    borderTopColor: theme.colors.primary,
+    borderRadius: "50%",
+    animation: "prismiq-spin 0.8s linear infinite"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle, className, children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes prismiq-spin {
+          to { transform: rotate(360deg); }
+        }
+      ` }),
+    loading && /* @__PURE__ */ jsx("div", { style: loadingStyle, children: /* @__PURE__ */ jsx("div", { style: spinnerStyle }) }),
+    /* @__PURE__ */ jsx(
+      ReactEChartsCore,
+      {
+        ref: chartRef,
+        echarts,
+        option: themedOption,
+        notMerge: false,
+        lazyUpdate: true,
+        shouldSetOption,
+        theme: effectiveTheme === "dark" ? "dark" : void 0,
+        onEvents,
+        style: { width: "100%", height: "100%" },
+        opts: { renderer: "canvas" },
+        onChartReady: handleResize
+      }
+    )
+  ] });
+}
+function TrendIndicator({
+  trend,
+  trendPositive = "up",
+  size = "md"
+}) {
+  const { theme } = useTheme();
+  const isPositive = trend.direction === "up" && trendPositive === "up" || trend.direction === "down" && trendPositive === "down";
+  const isNegative = trend.direction === "up" && trendPositive === "down" || trend.direction === "down" && trendPositive === "up";
+  const getColor = () => {
+    if (trend.direction === "flat") {
+      return theme.colors.textMuted;
+    }
+    if (isPositive) {
+      return theme.colors.success;
+    }
+    if (isNegative) {
+      return theme.colors.error;
+    }
+    return theme.colors.textMuted;
+  };
+  const getArrow = () => {
+    switch (trend.direction) {
+      case "up":
+        return "\u2191";
+      // up arrow
+      case "down":
+        return "\u2193";
+      // down arrow
+      case "flat":
+      default:
+        return "\u2192";
+    }
+  };
+  const sizeStyles = {
+    sm: { fontSize: theme.fontSizes.xs },
+    md: { fontSize: theme.fontSizes.sm },
+    lg: { fontSize: theme.fontSizes.base }
+  };
+  const containerStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+    color: getColor(),
+    ...sizeStyles[size]
+  };
+  const arrowStyle = {
+    fontWeight: 600
+  };
+  const valueStyle = {
+    fontWeight: 500
+  };
+  const labelStyle = {
+    color: theme.colors.textMuted,
+    marginLeft: "4px"
+  };
+  return /* @__PURE__ */ jsxs("span", { style: containerStyle, children: [
+    /* @__PURE__ */ jsx("span", { style: arrowStyle, children: getArrow() }),
+    /* @__PURE__ */ jsxs("span", { style: valueStyle, children: [
+      Math.abs(trend.value).toFixed(1),
+      "%"
+    ] }),
+    trend.label && /* @__PURE__ */ jsx("span", { style: labelStyle, children: trend.label })
+  ] });
+}
+echarts.use([LineChart, GridComponent, CanvasRenderer]);
+function Sparkline({
+  data,
+  color,
+  height = 40,
+  width = "100%"
+}) {
+  const { theme } = useTheme();
+  const lineColor = color || theme.chart.colors[0] || theme.colors.primary;
+  if (!data || data.length === 0) {
+    return null;
+  }
+  const option = {
+    animation: false,
+    grid: {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    },
+    xAxis: {
+      type: "category",
+      show: false,
+      data: data.map((_, i) => i)
+    },
+    yAxis: {
+      type: "value",
+      show: false,
+      min: "dataMin",
+      max: "dataMax"
+    },
+    series: [
+      {
+        type: "line",
+        data,
+        smooth: true,
+        symbol: "none",
+        lineStyle: {
+          color: lineColor,
+          width: 2
+        },
+        areaStyle: {
+          color: createGradientColor(lineColor, 0.3)
+        }
+      }
+    ]
+  };
+  return /* @__PURE__ */ jsx(
+    ReactEChartsCore2,
+    {
+      echarts: echarts,
+      option,
+      style: { width, height },
+      opts: { renderer: "canvas" },
+      notMerge: true,
+      lazyUpdate: true
+    }
+  );
+}
+function MetricCard({
+  title,
+  value,
+  format = "number",
+  currencySymbol = "$",
+  decimals = 0,
+  compactNotation,
+  trend,
+  trendPositive = "up",
+  sparklineData,
+  sparklineColor,
+  size = "md",
+  loading = false,
+  centered = false,
+  className,
+  onClick
+}) {
+  const { theme } = useTheme();
+  const containerRef = useRef(null);
+  const [containerSize, setContainerSize] = useState({ width: 300, height: 200 });
+  useEffect(() => {
+    const measureSize = () => {
+      if (containerRef.current) {
+        setContainerSize({
+          width: containerRef.current.offsetWidth,
+          height: containerRef.current.offsetHeight
+        });
+      }
+    };
+    measureSize();
+    window.addEventListener("resize", measureSize);
+    const resizeObserver = new ResizeObserver(measureSize);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    return () => {
+      window.removeEventListener("resize", measureSize);
+      resizeObserver.disconnect();
+    };
+  }, []);
+  const formattedValueForSizing = formatMetricValue(value, format, {
+    currencySymbol,
+    decimals,
+    compactNotation
+  });
+  const calculateResponsiveFontSize = () => {
+    if (!centered) {
+      const sizeMap = {
+        sm: theme.fontSizes.xl,
+        md: theme.fontSizes["2xl"],
+        lg: "28px"
+      };
+      return sizeMap[size];
+    }
+    const { width: containerWidth, height: containerHeight } = containerSize;
+    const availableWidth = containerWidth - 32;
+    const charCount = formattedValueForSizing.length || 1;
+    const maxFontByWidth = availableWidth / (charCount * 0.6);
+    const maxFontByHeight = containerHeight * 0.25;
+    const scaledSize = Math.max(24, Math.min(96, Math.min(maxFontByWidth, maxFontByHeight)));
+    return `${scaledSize}px`;
+  };
+  const sizeConfig = {
+    sm: {
+      padding: theme.spacing.md,
+      titleSize: theme.fontSizes.xs,
+      valueSize: theme.fontSizes.xl,
+      sparklineHeight: 32
+    },
+    md: {
+      padding: theme.spacing.lg,
+      titleSize: theme.fontSizes.sm,
+      valueSize: theme.fontSizes["2xl"],
+      sparklineHeight: 40
+    },
+    lg: {
+      padding: theme.spacing.xl,
+      titleSize: theme.fontSizes.base,
+      valueSize: "28px",
+      sparklineHeight: 50
+    }
+  };
+  const config = sizeConfig[size];
+  const responsiveValueSize = calculateResponsiveFontSize();
+  const containerStyle = {
+    backgroundColor: theme.colors.surface,
+    border: `1px solid ${theme.colors.border}`,
+    borderRadius: theme.radius.lg,
+    padding: centered ? theme.spacing.md : config.padding,
+    cursor: onClick ? "pointer" : "default",
+    transition: "box-shadow 0.2s ease, border-color 0.2s ease",
+    position: "relative",
+    overflow: "hidden",
+    ...centered && {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%"
+    }
+  };
+  const headerStyle = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    marginBottom: theme.spacing.sm
+  };
+  const titleStyle = {
+    fontSize: config.titleSize,
+    fontWeight: 500,
+    color: theme.colors.textMuted,
+    margin: 0
+  };
+  const valueStyle = {
+    fontSize: responsiveValueSize,
+    fontWeight: 600,
+    color: theme.colors.text,
+    margin: 0,
+    lineHeight: 1.2,
+    ...centered && {
+      textAlign: "center"
+    }
+  };
+  const sparklineContainerStyle = {
+    marginTop: theme.spacing.md
+  };
+  const skeletonStyle = {
+    backgroundColor: theme.colors.border,
+    borderRadius: theme.radius.sm,
+    animation: "prismiq-pulse 1.5s ease-in-out infinite"
+  };
+  const formattedValue = formattedValueForSizing;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      style: containerStyle,
+      className,
+      onClick,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: onClick ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      } : void 0,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes prismiq-pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+      ` }),
+        centered ? loading ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...skeletonStyle,
+              width: "120px",
+              height: "32px"
+            }
+          }
+        ) : /* @__PURE__ */ jsx("p", { style: valueStyle, children: formattedValue }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { style: headerStyle, children: [
+            loading ? /* @__PURE__ */ jsx("div", { style: { ...skeletonStyle, width: "80px", height: "14px" } }) : /* @__PURE__ */ jsx("h3", { style: titleStyle, children: title }),
+            trend && !loading && /* @__PURE__ */ jsx(
+              TrendIndicator,
+              {
+                trend,
+                trendPositive,
+                size
+              }
+            )
+          ] }),
+          loading ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                ...skeletonStyle,
+                width: "120px",
+                height: size === "sm" ? "20px" : size === "lg" ? "32px" : "24px",
+                marginTop: theme.spacing.xs
+              }
+            }
+          ) : /* @__PURE__ */ jsx("p", { style: valueStyle, children: formattedValue }),
+          sparklineData && sparklineData.length > 0 && !loading && /* @__PURE__ */ jsx("div", { style: sparklineContainerStyle, children: /* @__PURE__ */ jsx(
+            Sparkline,
+            {
+              data: sparklineData,
+              color: sparklineColor,
+              height: config.sparklineHeight
+            }
+          ) }),
+          sparklineData && loading && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                ...skeletonStyle,
+                width: "100%",
+                height: `${config.sparklineHeight}px`,
+                marginTop: theme.spacing.md
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function BarChart2({
+  data,
+  xAxis,
+  yAxis,
+  orientation = "vertical",
+  stacked = false,
+  showDataLabels = false,
+  showLegend = true,
+  legendPosition = "top",
+  referenceLines,
+  colors,
+  xAxisLabel,
+  yAxisLabel,
+  xAxisFormat,
+  yAxisFormat = "number",
+  currencySymbol = "$",
+  compactNotation,
+  decimalDigits = 0,
+  loading = false,
+  error,
+  height = 300,
+  width = "100%",
+  className,
+  onDataPointClick,
+  crossFilter,
+  selectedValue
+}) {
+  const { theme } = useTheme();
+  const yColumns = useMemo(
+    () => Array.isArray(yAxis) ? yAxis : [yAxis],
+    [yAxis]
+  );
+  const chartData = useMemo(
+    () => toChartData(data, xAxis, yColumns),
+    [data, xAxis, yColumns]
+  );
+  const dateFormatter = useMemo(
+    () => xAxisFormat ? createDateFormatter(xAxisFormat) : null,
+    [xAxisFormat]
+  );
+  const formattedCategories = useMemo(() => {
+    if (!dateFormatter) return chartData.categories;
+    return chartData.categories.map((cat) => dateFormatter(cat));
+  }, [chartData.categories, dateFormatter]);
+  const seriesColors = useMemo(
+    () => colors || getChartColors(theme, yColumns.length),
+    [colors, theme, yColumns.length]
+  );
+  const isEmpty = isChartDataEmpty(data);
+  const option = useMemo(() => {
+    if (isEmpty) {
+      return {
+        graphic: createEmptyStateGraphic()
+      };
+    }
+    const isHorizontal = orientation === "horizontal";
+    const categoryAxis = {
+      type: "category",
+      data: formattedCategories,
+      name: isHorizontal ? yAxisLabel : xAxisLabel,
+      nameLocation: "middle",
+      nameGap: 35,
+      axisLabel: {
+        rotate: isHorizontal ? 0 : formattedCategories.length > 10 ? 45 : 0,
+        interval: 0,
+        hideOverlap: true
+      }
+    };
+    const valueAxis = {
+      type: "value",
+      name: isHorizontal ? xAxisLabel : yAxisLabel,
+      nameLocation: "middle",
+      nameGap: 50,
+      axisLabel: {
+        formatter: (value) => formatAxisLabel(value, yAxisFormat, {
+          currencySymbol,
+          decimals: decimalDigits,
+          compactNotation
+        })
+      }
+    };
+    const series = chartData.series.map((s, index) => {
+      const baseColor = seriesColors[index] ?? theme.colors.primary;
+      return {
+        type: "bar",
+        name: s.name,
+        data: s.data.map((value, dataIndex) => {
+          const categoryValue = chartData.categories[dataIndex];
+          const isSelected = selectedValue != null && categoryValue === selectedValue;
+          const isOther = selectedValue != null && categoryValue !== selectedValue;
+          return {
+            value,
+            itemStyle: {
+              color: baseColor,
+              opacity: isOther ? 0.3 : 1,
+              borderRadius: stacked ? 0 : [4, 4, 0, 0],
+              // Highlight selected bar
+              ...isSelected && {
+                borderColor: theme.colors.primary,
+                borderWidth: 2
+              }
+            }
+          };
+        }),
+        stack: stacked ? "stack" : void 0,
+        label: showDataLabels ? {
+          show: true,
+          position: isHorizontal ? "right" : "top",
+          formatter: (params) => {
+            const rawValue = typeof params.value === "object" && params.value !== null ? params.value.value : params.value;
+            return rawValue !== null && rawValue !== void 0 ? formatAxisLabel(rawValue, yAxisFormat, {
+              currencySymbol,
+              decimals: decimalDigits,
+              compactNotation
+            }) : "";
+          },
+          fontSize: 10,
+          color: theme.colors.textMuted
+        } : void 0,
+        emphasis: {
+          focus: "series",
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.2)"
+          }
+        },
+        markLine: index === 0 && referenceLines ? createMarkLines(referenceLines, theme) : void 0
+      };
+    });
+    const legend = showLegend ? {
+      show: yColumns.length > 1,
+      data: chartData.series.map((s) => s.name),
+      selectedMode: "multiple",
+      [legendPosition === "left" || legendPosition === "right" ? "orient" : "orient"]: legendPosition === "left" || legendPosition === "right" ? "vertical" : "horizontal",
+      [legendPosition]: legendPosition === "left" || legendPosition === "right" ? 10 : legendPosition === "top" ? 10 : void 0,
+      bottom: legendPosition === "bottom" ? 10 : void 0
+    } : void 0;
+    const grid = {
+      left: legendPosition === "left" ? 100 : 60,
+      right: legendPosition === "right" ? 100 : 20,
+      top: legendPosition === "top" ? 50 : 40,
+      bottom: legendPosition === "bottom" ? 50 : 40,
+      containLabel: false
+    };
+    return {
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow"
+        },
+        formatter: (params) => {
+          if (!Array.isArray(params) || params.length === 0) return "";
+          const firstParam = params[0];
+          if (!firstParam) return "";
+          const header = `<div style="font-weight: 600; margin-bottom: 4px;">${firstParam.name}</div>`;
+          const items = params.map(
+            (p) => {
+              const rawValue = typeof p.value === "object" && p.value !== null ? p.value.value : p.value;
+              return `<div>${p.marker} ${p.seriesName}: ${rawValue !== null && rawValue !== void 0 ? formatAxisLabel(rawValue, yAxisFormat, {
+                currencySymbol,
+                decimals: decimalDigits,
+                compactNotation
+              }) : "-"}</div>`;
+            }
+          ).join("");
+          return header + items;
+        }
+      },
+      legend,
+      grid,
+      xAxis: isHorizontal ? valueAxis : categoryAxis,
+      yAxis: isHorizontal ? categoryAxis : valueAxis,
+      series
+    };
+  }, [
+    isEmpty,
+    orientation,
+    chartData,
+    formattedCategories,
+    xAxisLabel,
+    yAxisLabel,
+    yAxisFormat,
+    stacked,
+    seriesColors,
+    showDataLabels,
+    showLegend,
+    legendPosition,
+    referenceLines,
+    theme,
+    yColumns.length,
+    selectedValue,
+    crossFilter?.enabled
+  ]);
+  const handleClick = useCallback(
+    (params) => {
+      const p = params;
+      const rawValue = typeof p.value === "object" ? p.value?.value : p.value;
+      const clickParams = {
+        seriesName: p.seriesName ?? "",
+        dataIndex: p.dataIndex ?? 0,
+        value: rawValue ?? 0,
+        name: p.name ?? ""
+      };
+      onDataPointClick?.(clickParams);
+    },
+    [onDataPointClick]
+  );
+  const handleEvents = useMemo(() => {
+    if (!onDataPointClick && !crossFilter?.enabled) return void 0;
+    return {
+      click: handleClick
+    };
+  }, [onDataPointClick, crossFilter?.enabled, handleClick]);
+  if (error) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: typeof height === "number" ? `${height}px` : height,
+          width: typeof width === "number" ? `${width}px` : width,
+          color: theme.colors.error,
+          fontSize: theme.fontSizes.sm
+        },
+        className,
+        children: [
+          "Error loading chart: ",
+          error.message
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    EChartWrapper,
+    {
+      option,
+      loading,
+      height,
+      width,
+      className,
+      onEvents: handleEvents
+    }
+  );
+}
+function LineChart3({
+  data,
+  xAxis,
+  yAxis,
+  seriesColumn,
+  maxSeries,
+  smooth = false,
+  showArea = false,
+  showPoints = false,
+  showDataLabels = false,
+  showLegend = true,
+  referenceLines,
+  colors,
+  xAxisLabel,
+  yAxisLabel,
+  xAxisFormat,
+  yAxisFormat = "number",
+  loading = false,
+  error,
+  height = 300,
+  width = "100%",
+  className,
+  onDataPointClick,
+  crossFilter,
+  selectedValue
+}) {
+  const { theme } = useTheme();
+  const yColumns = useMemo(
+    () => Array.isArray(yAxis) ? yAxis : [yAxis],
+    [yAxis]
+  );
+  const rawChartData = useMemo(
+    () => toChartData(data, xAxis, yColumns, seriesColumn),
+    [data, xAxis, yColumns, seriesColumn]
+  );
+  const chartData = useMemo(() => {
+    if (!maxSeries || rawChartData.series.length <= maxSeries) {
+      return rawChartData;
+    }
+    const seriesWithTotals = rawChartData.series.map((s) => ({
+      ...s,
+      total: s.data.reduce((sum, val) => sum + (val ?? 0), 0)
+    }));
+    const topSeries = seriesWithTotals.sort((a, b) => (b.total ?? 0) - (a.total ?? 0)).slice(0, maxSeries).map(({ total: _total, ...rest }) => rest);
+    return {
+      categories: rawChartData.categories,
+      series: topSeries
+    };
+  }, [rawChartData, maxSeries]);
+  const dateFormatter = useMemo(
+    () => xAxisFormat ? createDateFormatter(xAxisFormat) : null,
+    [xAxisFormat]
+  );
+  const formattedCategories = useMemo(() => {
+    if (!dateFormatter) {
+      return chartData.categories;
+    }
+    return chartData.categories.map((cat) => dateFormatter(cat));
+  }, [chartData.categories, dateFormatter]);
+  const seriesColors = useMemo(
+    () => colors || getChartColors(theme, chartData.series.length),
+    [colors, theme, chartData.series.length]
+  );
+  const isEmpty = isChartDataEmpty(data);
+  const option = useMemo(() => {
+    if (isEmpty) {
+      return {
+        graphic: createEmptyStateGraphic()
+      };
+    }
+    const series = chartData.series.map((s, index) => {
+      const color = seriesColors[index] ?? theme.colors.primary;
+      const seriesData = s.data.map((value, dataIndex) => {
+        const categoryValue = chartData.categories[dataIndex];
+        const isSelected = selectedValue != null && categoryValue === selectedValue;
+        const isOther = selectedValue != null && categoryValue !== selectedValue;
+        return {
+          value,
+          itemStyle: {
+            color,
+            opacity: isOther ? 0.3 : 1,
+            // Highlight selected point
+            ...isSelected && {
+              borderColor: theme.colors.primary,
+              borderWidth: 3
+            }
+          },
+          symbolSize: isSelected ? 10 : showPoints ? 6 : 0
+        };
+      });
+      return {
+        type: "line",
+        name: s.name,
+        data: seriesData,
+        smooth: smooth ? 0.3 : false,
+        symbol: showPoints || selectedValue != null ? "circle" : "none",
+        symbolSize: showPoints ? 6 : 0,
+        itemStyle: {
+          color
+        },
+        lineStyle: {
+          color,
+          width: 2,
+          opacity: selectedValue != null ? 0.5 : 1
+        },
+        areaStyle: showArea ? {
+          color: createGradientColor(color, selectedValue != null ? 0.15 : 0.3)
+        } : void 0,
+        label: showDataLabels ? {
+          show: true,
+          position: "top",
+          formatter: (params) => params.value !== null ? formatAxisLabel(params.value, yAxisFormat) : "",
+          fontSize: 10,
+          color: theme.colors.textMuted
+        } : void 0,
+        emphasis: {
+          focus: "series",
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.2)"
+          }
+        },
+        markLine: index === 0 && referenceLines ? createMarkLines(referenceLines, theme) : void 0,
+        // Enable cursor pointer when cross-filter is enabled
+        cursor: crossFilter?.enabled ? "pointer" : "default"
+      };
+    });
+    const legend = showLegend ? {
+      show: chartData.series.length > 1,
+      data: chartData.series.map((s) => s.name),
+      selectedMode: "multiple",
+      top: 10
+    } : void 0;
+    return {
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "cross",
+          label: {
+            backgroundColor: theme.chart.tooltipBackground
+          }
+        },
+        formatter: (params) => {
+          if (!Array.isArray(params) || params.length === 0) return "";
+          const firstParam = params[0];
+          if (!firstParam) return "";
+          const header = `<div style="font-weight: 600; margin-bottom: 4px;">${firstParam.name}</div>`;
+          const items = params.map(
+            (p) => `<div>${p.marker} ${p.seriesName}: ${p.value !== null ? formatAxisLabel(p.value, yAxisFormat) : "-"}</div>`
+          ).join("");
+          return header + items;
+        }
+      },
+      legend,
+      grid: {
+        left: 60,
+        right: 20,
+        top: legend ? 50 : 40,
+        bottom: 40
+      },
+      xAxis: {
+        type: "category",
+        data: formattedCategories,
+        name: xAxisLabel,
+        nameLocation: "middle",
+        nameGap: 35,
+        axisLabel: {
+          rotate: formattedCategories.length > 10 ? 45 : 0,
+          interval: 0,
+          hideOverlap: true
+        },
+        boundaryGap: false
+      },
+      yAxis: {
+        type: "value",
+        name: yAxisLabel,
+        nameLocation: "middle",
+        nameGap: 50,
+        axisLabel: {
+          formatter: (value) => formatAxisLabel(value, yAxisFormat)
+        }
+      },
+      series
+    };
+  }, [
+    isEmpty,
+    chartData,
+    formattedCategories,
+    smooth,
+    showPoints,
+    showArea,
+    showDataLabels,
+    showLegend,
+    referenceLines,
+    seriesColors,
+    xAxisLabel,
+    yAxisLabel,
+    yAxisFormat,
+    theme,
+    selectedValue,
+    crossFilter?.enabled
+  ]);
+  const handleClick = useCallback(
+    (params) => {
+      const p = params;
+      const rawValue = typeof p.value === "object" ? p.value?.value : p.value;
+      const clickParams = {
+        seriesName: p.seriesName ?? "",
+        dataIndex: p.dataIndex ?? 0,
+        value: rawValue ?? 0,
+        name: p.name ?? ""
+      };
+      onDataPointClick?.(clickParams);
+    },
+    [onDataPointClick]
+  );
+  const handleEvents = useMemo(() => {
+    if (!onDataPointClick && !crossFilter?.enabled) return void 0;
+    return {
+      click: handleClick
+    };
+  }, [onDataPointClick, crossFilter?.enabled, handleClick]);
+  if (error) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: typeof height === "number" ? `${height}px` : height,
+          width: typeof width === "number" ? `${width}px` : width,
+          color: theme.colors.error,
+          fontSize: theme.fontSizes.sm
+        },
+        className,
+        children: [
+          "Error loading chart: ",
+          error.message
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    EChartWrapper,
+    {
+      option,
+      loading,
+      height,
+      width,
+      className,
+      onEvents: handleEvents
+    }
+  );
+}
+function AreaChart({
+  data,
+  xAxis,
+  yAxis,
+  stacked = true,
+  stackType = "normal",
+  smooth = false,
+  showLegend = true,
+  opacity = 0.7,
+  colors,
+  xAxisLabel,
+  yAxisLabel,
+  xAxisFormat,
+  loading = false,
+  error,
+  height = 300,
+  width = "100%",
+  className,
+  onDataPointClick,
+  crossFilter,
+  selectedValue
+}) {
+  const { theme } = useTheme();
+  const yColumns = useMemo(
+    () => Array.isArray(yAxis) ? yAxis : [yAxis],
+    [yAxis]
+  );
+  const chartData = useMemo(
+    () => toChartData(data, xAxis, yColumns),
+    [data, xAxis, yColumns]
+  );
+  const dateFormatter = useMemo(
+    () => xAxisFormat ? createDateFormatter(xAxisFormat) : null,
+    [xAxisFormat]
+  );
+  const formattedCategories = useMemo(() => {
+    if (!dateFormatter) return chartData.categories;
+    return chartData.categories.map((cat) => dateFormatter(cat));
+  }, [chartData.categories, dateFormatter]);
+  const seriesColors = useMemo(
+    () => colors || getChartColors(theme, yColumns.length),
+    [colors, theme, yColumns.length]
+  );
+  const isEmpty = isChartDataEmpty(data);
+  const option = useMemo(() => {
+    if (isEmpty) {
+      return {
+        graphic: createEmptyStateGraphic()
+      };
+    }
+    let processedData = chartData;
+    if (stacked && stackType === "percent") {
+      const totals = chartData.categories.map((_, catIndex) => {
+        let total = 0;
+        chartData.series.forEach((s) => {
+          const val = s.data[catIndex];
+          if (val !== null && val !== void 0) {
+            total += val;
+          }
+        });
+        return total;
+      });
+      processedData = {
+        categories: chartData.categories,
+        series: chartData.series.map((s) => ({
+          ...s,
+          data: s.data.map((val, catIndex) => {
+            if (val === null) return null;
+            const total = totals[catIndex] ?? 1;
+            return total > 0 ? val / total * 100 : 0;
+          })
+        }))
+      };
+    }
+    const series = processedData.series.map((s, index) => {
+      const color = seriesColors[index] ?? theme.colors.primary;
+      const seriesData = s.data.map((value, dataIndex) => {
+        const categoryValue = processedData.categories[dataIndex];
+        const isSelected = selectedValue != null && categoryValue === selectedValue;
+        const isOther = selectedValue != null && categoryValue !== selectedValue;
+        return {
+          value,
+          itemStyle: {
+            opacity: isOther ? 0.3 : 1
+          },
+          // Show marker on selected point
+          symbol: isSelected ? "circle" : "none",
+          symbolSize: isSelected ? 8 : 0
+        };
+      });
+      const baseOpacity = selectedValue != null ? opacity * 0.5 : opacity;
+      return {
+        type: "line",
+        name: s.name,
+        data: seriesData,
+        stack: stacked ? "stack" : void 0,
+        smooth: smooth ? 0.3 : false,
+        symbol: selectedValue != null ? "circle" : "none",
+        symbolSize: 6,
+        itemStyle: {
+          color
+        },
+        lineStyle: {
+          color,
+          width: 1
+        },
+        areaStyle: {
+          color: stacked ? adjustColorOpacity(color, baseOpacity) : createGradientColor(color, baseOpacity)
+        },
+        emphasis: {
+          focus: "series"
+        },
+        // Enable cursor pointer when cross-filter is enabled
+        cursor: crossFilter?.enabled ? "pointer" : "default"
+      };
+    });
+    const legend = showLegend ? {
+      show: yColumns.length > 1,
+      data: processedData.series.map((s) => s.name),
+      selectedMode: "multiple",
+      top: 10
+    } : void 0;
+    const yAxisFormat = stacked && stackType === "percent" ? "percent" : "number";
+    return {
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "cross",
+          label: {
+            backgroundColor: theme.chart.tooltipBackground
+          }
+        },
+        formatter: (params) => {
+          if (!Array.isArray(params) || params.length === 0) return "";
+          const firstParam = params[0];
+          if (!firstParam) return "";
+          const header = `<div style="font-weight: 600; margin-bottom: 4px;">${firstParam.name}</div>`;
+          const items = params.map((p) => {
+            if (p.value === null) {
+              return `<div>${p.marker} ${p.seriesName}: -</div>`;
+            }
+            const formatted = stackType === "percent" ? `${p.value.toFixed(1)}%` : formatAxisLabel(p.value, "compact");
+            return `<div>${p.marker} ${p.seriesName}: ${formatted}</div>`;
+          }).join("");
+          return header + items;
+        }
+      },
+      legend,
+      grid: {
+        left: 60,
+        right: 20,
+        top: legend ? 50 : 40,
+        bottom: 40
+      },
+      xAxis: {
+        type: "category",
+        data: formattedCategories,
+        name: xAxisLabel,
+        nameLocation: "middle",
+        nameGap: 35,
+        axisLabel: {
+          rotate: formattedCategories.length > 10 ? 45 : 0,
+          interval: 0,
+          hideOverlap: true
+        },
+        boundaryGap: false
+      },
+      yAxis: {
+        type: "value",
+        name: yAxisLabel,
+        nameLocation: "middle",
+        nameGap: 50,
+        max: stackType === "percent" ? 100 : void 0,
+        axisLabel: {
+          formatter: (value) => {
+            if (stackType === "percent") {
+              return `${value.toFixed(0)}%`;
+            }
+            return formatAxisLabel(value, yAxisFormat);
+          }
+        }
+      },
+      series
+    };
+  }, [
+    isEmpty,
+    chartData,
+    formattedCategories,
+    stacked,
+    stackType,
+    smooth,
+    showLegend,
+    opacity,
+    seriesColors,
+    xAxisLabel,
+    yAxisLabel,
+    theme,
+    yColumns.length,
+    selectedValue,
+    crossFilter?.enabled
+  ]);
+  const handleClick = useCallback(
+    (params) => {
+      const p = params;
+      const rawValue = typeof p.value === "object" ? p.value?.value : p.value;
+      const clickParams = {
+        seriesName: p.seriesName ?? "",
+        dataIndex: p.dataIndex ?? 0,
+        value: rawValue ?? 0,
+        name: p.name ?? ""
+      };
+      onDataPointClick?.(clickParams);
+    },
+    [onDataPointClick]
+  );
+  const handleEvents = useMemo(() => {
+    if (!onDataPointClick && !crossFilter?.enabled) return void 0;
+    return {
+      click: handleClick
+    };
+  }, [onDataPointClick, crossFilter?.enabled, handleClick]);
+  if (error) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: typeof height === "number" ? `${height}px` : height,
+          width: typeof width === "number" ? `${width}px` : width,
+          color: theme.colors.error,
+          fontSize: theme.fontSizes.sm
+        },
+        className,
+        children: [
+          "Error loading chart: ",
+          error.message
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    EChartWrapper,
+    {
+      option,
+      loading,
+      height,
+      width,
+      className,
+      onEvents: handleEvents
+    }
+  );
+}
+function PieChart2({
+  data,
+  labelColumn,
+  valueColumn,
+  variant = "pie",
+  donutRatio = 0.5,
+  showLabels = true,
+  labelPosition = "outside",
+  showPercentage = false,
+  showLegend = true,
+  colors,
+  startAngle = 90,
+  sortSlices = "none",
+  loading = false,
+  error,
+  height = 300,
+  width = "100%",
+  className,
+  onDataPointClick,
+  crossFilter,
+  selectedValue,
+  labelFormat
+}) {
+  const { theme } = useTheme();
+  const containerRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  useEffect(() => {
+    const measureWidth = () => {
+      if (containerRef.current) {
+        setContainerWidth(containerRef.current.offsetWidth);
+      }
+    };
+    measureWidth();
+    window.addEventListener("resize", measureWidth);
+    return () => window.removeEventListener("resize", measureWidth);
+  }, []);
+  const isNarrow = containerWidth < 300;
+  const legendOrient = isNarrow ? "horizontal" : "vertical";
+  const legendPosition = isNarrow ? { bottom: 0, left: "center" } : { left: "55%", top: "middle" };
+  const chartData = useMemo(
+    () => toChartData(data, labelColumn, [valueColumn]),
+    [data, labelColumn, valueColumn]
+  );
+  const dateFormatter = useMemo(
+    () => labelFormat ? createDateFormatter(labelFormat) : null,
+    [labelFormat]
+  );
+  const formattedCategories = useMemo(() => {
+    if (!dateFormatter) return chartData.categories;
+    return chartData.categories.map((cat) => dateFormatter(cat));
+  }, [chartData.categories, dateFormatter]);
+  const pieData = useMemo(() => {
+    if (chartData.series.length === 0) {
+      return [];
+    }
+    const series = chartData.series[0];
+    if (!series) {
+      return [];
+    }
+    const items = formattedCategories.map((name, index) => ({
+      name,
+      value: series.data[index] ?? 0
+    }));
+    if (sortSlices === "asc") {
+      items.sort((a, b) => (a.value || 0) - (b.value || 0));
+    } else if (sortSlices === "desc") {
+      items.sort((a, b) => (b.value || 0) - (a.value || 0));
+    }
+    return items;
+  }, [formattedCategories, chartData.series, sortSlices]);
+  const seriesColors = useMemo(
+    () => colors || getChartColors(theme, pieData.length),
+    [colors, theme, pieData.length]
+  );
+  const isEmpty = isChartDataEmpty(data);
+  const option = useMemo(() => {
+    if (isEmpty) {
+      return {
+        graphic: createEmptyStateGraphic()
+      };
+    }
+    const total = pieData.reduce((sum, item) => sum + (item.value || 0), 0);
+    const innerRadius = variant === "donut" ? `${donutRatio * 50}%` : "0%";
+    let outerRadius;
+    let center;
+    if (showLegend) {
+      if (isNarrow) {
+        outerRadius = "55%";
+        center = ["50%", "35%"];
+      } else {
+        outerRadius = "50%";
+        center = ["25%", "50%"];
+      }
+    } else {
+      outerRadius = labelPosition === "outside" ? "60%" : "75%";
+      center = ["50%", "50%"];
+    }
+    const effectiveLabelPosition = showLegend && labelPosition === "outside" ? "inside" : labelPosition;
+    const effectiveShowLabels = showLegend && labelPosition === "outside" ? false : showLabels;
+    const label = effectiveShowLabels ? {
+      show: true,
+      position: effectiveLabelPosition,
+      formatter: (params) => {
+        if (showPercentage) {
+          return effectiveLabelPosition === "inside" ? `${params.percent.toFixed(0)}%` : `${params.name}: ${params.percent.toFixed(1)}%`;
+        }
+        return effectiveLabelPosition === "inside" ? formatAxisLabel(params.value, "compact") : `${params.name}: ${formatAxisLabel(params.value, "compact")}`;
+      },
+      color: effectiveLabelPosition === "inside" ? "#ffffff" : theme.colors.text,
+      fontSize: effectiveLabelPosition === "inside" ? 11 : 12
+    } : { show: false };
+    const labelLine = effectiveShowLabels && effectiveLabelPosition === "outside" ? {
+      show: true,
+      length: 10,
+      length2: 10,
+      lineStyle: {
+        color: theme.colors.border
+      }
+    } : { show: false };
+    const legend = showLegend ? {
+      show: true,
+      orient: legendOrient,
+      ...legendPosition,
+      selectedMode: "multiple",
+      data: pieData.map((item) => item.name),
+      formatter: (name) => {
+        const item = pieData.find((d) => d.name === name);
+        if (!item || total === 0) return name;
+        const percent = (item.value || 0) / total * 100;
+        return `${name} (${percent.toFixed(1)}%)`;
+      },
+      textStyle: {
+        fontSize: isNarrow ? 11 : 12
+      },
+      itemGap: isNarrow ? 6 : 8,
+      itemWidth: isNarrow ? 12 : 14,
+      itemHeight: isNarrow ? 12 : 14
+    } : void 0;
+    return {
+      tooltip: {
+        trigger: "item",
+        formatter: (params) => {
+          const formatted = formatAxisLabel(params.value, "number");
+          return `${params.marker} ${params.name}<br/>Value: ${formatted}<br/>Percent: ${params.percent.toFixed(1)}%`;
+        }
+      },
+      legend,
+      series: [
+        {
+          type: "pie",
+          radius: [innerRadius, outerRadius],
+          center,
+          startAngle,
+          data: pieData.map((item, index) => {
+            const baseColor = seriesColors[index] ?? theme.colors.primary;
+            const isSelected = selectedValue != null && item.name === selectedValue;
+            const isOther = selectedValue != null && item.name !== selectedValue;
+            return {
+              ...item,
+              itemStyle: {
+                color: baseColor,
+                opacity: isOther ? 0.3 : 1,
+                // Highlight selected slice
+                ...isSelected && {
+                  borderColor: theme.colors.primary,
+                  borderWidth: 3,
+                  shadowBlur: 15,
+                  shadowColor: "rgba(0, 0, 0, 0.3)"
+                }
+              }
+            };
+          }),
+          label,
+          labelLine,
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: "rgba(0, 0, 0, 0.2)"
+            },
+            // Disable emphasis label to avoid conflict with legend and tooltip
+            label: {
+              show: false
+            }
+          },
+          // Enable cursor pointer when cross-filter is enabled
+          cursor: crossFilter?.enabled ? "pointer" : "default",
+          animationType: "scale",
+          animationEasing: "elasticOut"
+        }
+      ]
+    };
+  }, [
+    isEmpty,
+    pieData,
+    variant,
+    donutRatio,
+    showLabels,
+    labelPosition,
+    showPercentage,
+    showLegend,
+    startAngle,
+    seriesColors,
+    theme,
+    selectedValue,
+    crossFilter?.enabled,
+    isNarrow,
+    legendOrient,
+    legendPosition
+  ]);
+  const handleClick = useCallback(
+    (params) => {
+      const p = params;
+      const clickParams = {
+        seriesName: p.seriesName ?? valueColumn,
+        dataIndex: p.dataIndex ?? 0,
+        value: p.value ?? 0,
+        name: p.name ?? ""
+      };
+      onDataPointClick?.(clickParams);
+    },
+    [onDataPointClick, valueColumn]
+  );
+  const handleEvents = useMemo(() => {
+    if (!onDataPointClick && !crossFilter?.enabled) return void 0;
+    return {
+      click: handleClick
+    };
+  }, [onDataPointClick, crossFilter?.enabled, handleClick]);
+  if (error) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: typeof height === "number" ? `${height}px` : height,
+          width: typeof width === "number" ? `${width}px` : width,
+          color: theme.colors.error,
+          fontSize: theme.fontSizes.sm
+        },
+        className,
+        children: [
+          "Error loading chart: ",
+          error.message
+        ]
+      }
+    );
+  }
+  if (containerWidth === 0) {
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, style: { height, width }, className });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, style: { height, width }, children: /* @__PURE__ */ jsx(
+    EChartWrapper,
+    {
+      option,
+      loading,
+      height,
+      width,
+      className,
+      onEvents: handleEvents
+    }
+  ) });
+}
+function extractScatterData(data, xColumn, yColumn, sizeColumn, colorColumn, labelColumn) {
+  const points = [];
+  const colorSet = /* @__PURE__ */ new Set();
+  if (isQueryResult(data)) {
+    const xIndex = data.columns.indexOf(xColumn);
+    const yIndex = data.columns.indexOf(yColumn);
+    const sizeIndex = sizeColumn ? data.columns.indexOf(sizeColumn) : -1;
+    const colorIndex = colorColumn ? data.columns.indexOf(colorColumn) : -1;
+    const labelIndex = labelColumn ? data.columns.indexOf(labelColumn) : -1;
+    if (xIndex === -1 || yIndex === -1) {
+      return { points: [], colorCategories: [] };
+    }
+    data.rows.forEach((row, index) => {
+      const x = row[xIndex];
+      const y = row[yIndex];
+      if (x !== null && y !== null) {
+        const size = sizeIndex >= 0 ? row[sizeIndex] : void 0;
+        const color = colorIndex >= 0 ? String(row[colorIndex]) : void 0;
+        const label = labelIndex >= 0 ? String(row[labelIndex]) : void 0;
+        if (color) colorSet.add(color);
+        points.push({
+          x: typeof x === "number" ? x : Number(x),
+          y: typeof y === "number" ? y : Number(y),
+          size: size !== null && size !== void 0 ? Number(size) : void 0,
+          color,
+          label,
+          index
+        });
+      }
+    });
+  } else {
+    data.forEach((point, index) => {
+      const x = point[xColumn];
+      const y = point[yColumn];
+      if (x !== null && x !== void 0 && y !== null && y !== void 0) {
+        const size = sizeColumn ? point[sizeColumn] : void 0;
+        const color = colorColumn ? String(point[colorColumn]) : void 0;
+        const label = labelColumn ? String(point[labelColumn]) : void 0;
+        if (color) colorSet.add(color);
+        points.push({
+          x: typeof x === "number" ? x : Number(x),
+          y: typeof y === "number" ? y : Number(y),
+          size: size !== null && size !== void 0 ? Number(size) : void 0,
+          color,
+          label,
+          index
+        });
+      }
+    });
+  }
+  return { points, colorCategories: Array.from(colorSet) };
+}
+function calculateTrendline(points) {
+  if (points.length < 2) return null;
+  const n = points.length;
+  let sumX = 0;
+  let sumY = 0;
+  let sumXY = 0;
+  let sumX2 = 0;
+  let minX = Infinity;
+  let maxX = -Infinity;
+  points.forEach((p) => {
+    sumX += p.x;
+    sumY += p.y;
+    sumXY += p.x * p.y;
+    sumX2 += p.x * p.x;
+    minX = Math.min(minX, p.x);
+    maxX = Math.max(maxX, p.x);
+  });
+  const denominator = n * sumX2 - sumX * sumX;
+  if (denominator === 0) return null;
+  const slope = (n * sumXY - sumX * sumY) / denominator;
+  const intercept = (sumY - slope * sumX) / n;
+  return { slope, intercept, minX, maxX };
+}
+function ScatterChart2({
+  data,
+  xAxis,
+  yAxis,
+  sizeColumn,
+  colorColumn,
+  minSize = 10,
+  maxSize = 50,
+  showLabels = false,
+  labelColumn,
+  showTrendline = false,
+  xAxisLabel,
+  yAxisLabel,
+  loading = false,
+  error,
+  height = 300,
+  width = "100%",
+  className,
+  onDataPointClick
+}) {
+  const { theme } = useTheme();
+  const { points, colorCategories } = useMemo(
+    () => extractScatterData(data, xAxis, yAxis, sizeColumn, colorColumn, labelColumn),
+    [data, xAxis, yAxis, sizeColumn, colorColumn, labelColumn]
+  );
+  const categoryColors = useMemo(
+    () => getChartColors(theme, Math.max(colorCategories.length, 1)),
+    [theme, colorCategories.length]
+  );
+  const isEmpty = isChartDataEmpty(data) || points.length === 0;
+  const option = useMemo(() => {
+    if (isEmpty) {
+      return {
+        graphic: createEmptyStateGraphic()
+      };
+    }
+    let sizeScale = () => minSize;
+    if (sizeColumn) {
+      const sizes = points.map((p) => p.size).filter((s) => s !== void 0);
+      if (sizes.length > 0) {
+        const minSizeVal = Math.min(...sizes);
+        const maxSizeVal = Math.max(...sizes);
+        const sizeRange = maxSizeVal - minSizeVal || 1;
+        sizeScale = (val) => {
+          const normalized = (val - minSizeVal) / sizeRange;
+          return minSize + normalized * (maxSize - minSize);
+        };
+      }
+    }
+    const seriesMap = /* @__PURE__ */ new Map();
+    if (colorColumn && colorCategories.length > 0) {
+      colorCategories.forEach((cat) => {
+        seriesMap.set(cat, []);
+      });
+      points.forEach((p) => {
+        const cat = p.color || "default";
+        const arr = seriesMap.get(cat);
+        if (arr) {
+          arr.push([
+            p.x,
+            p.y,
+            p.size !== void 0 ? sizeScale(p.size) : minSize,
+            p.label,
+            String(p.index)
+          ]);
+        }
+      });
+    } else {
+      seriesMap.set("data", points.map((p) => [
+        p.x,
+        p.y,
+        p.size !== void 0 ? sizeScale(p.size) : minSize,
+        p.label,
+        String(p.index)
+      ]));
+    }
+    const series = Array.from(seriesMap.entries()).map(
+      ([name, seriesData], index) => ({
+        type: "scatter",
+        name,
+        data: seriesData,
+        symbolSize: (dataItem) => dataItem[2],
+        itemStyle: {
+          color: categoryColors[index] ?? theme.colors.primary
+        },
+        label: showLabels ? {
+          show: true,
+          position: "top",
+          formatter: (params) => params.data[3] || "",
+          fontSize: 10,
+          color: theme.colors.textMuted
+        } : void 0,
+        emphasis: {
+          focus: "series",
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.2)"
+          }
+        }
+      })
+    );
+    if (showTrendline) {
+      const trend = calculateTrendline(points);
+      if (trend) {
+        const y1 = trend.slope * trend.minX + trend.intercept;
+        const y2 = trend.slope * trend.maxX + trend.intercept;
+        series.push({
+          type: "line",
+          name: "Trendline",
+          data: [
+            [trend.minX, y1],
+            [trend.maxX, y2]
+          ],
+          symbol: "none",
+          lineStyle: {
+            color: theme.colors.textMuted,
+            type: "dashed",
+            width: 2
+          },
+          silent: true
+        });
+      }
+    }
+    const legend = colorColumn && colorCategories.length > 1 ? {
+      show: true,
+      data: colorCategories,
+      top: 10
+    } : void 0;
+    return {
+      tooltip: {
+        trigger: "item",
+        formatter: (params) => {
+          if (!params.data) return "";
+          const [x, y, , label] = params.data;
+          let html = `${params.marker}`;
+          if (colorColumn) {
+            html += ` ${params.seriesName}<br/>`;
+          }
+          if (label) {
+            html += `${label}<br/>`;
+          }
+          html += `${xAxis}: ${formatAxisLabel(x, "number")}<br/>`;
+          html += `${yAxis}: ${formatAxisLabel(y, "number")}`;
+          return html;
+        }
+      },
+      legend,
+      grid: {
+        left: 60,
+        right: 20,
+        top: legend ? 50 : 40,
+        bottom: 40
+      },
+      xAxis: {
+        type: "value",
+        name: xAxisLabel || xAxis,
+        nameLocation: "middle",
+        nameGap: 35,
+        axisLabel: {
+          formatter: (value) => formatAxisLabel(value, "compact")
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: "dashed"
+          }
+        }
+      },
+      yAxis: {
+        type: "value",
+        name: yAxisLabel || yAxis,
+        nameLocation: "middle",
+        nameGap: 50,
+        axisLabel: {
+          formatter: (value) => formatAxisLabel(value, "compact")
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: "dashed"
+          }
+        }
+      },
+      series
+    };
+  }, [
+    isEmpty,
+    points,
+    colorColumn,
+    colorCategories,
+    categoryColors,
+    sizeColumn,
+    minSize,
+    maxSize,
+    showLabels,
+    showTrendline,
+    xAxis,
+    yAxis,
+    xAxisLabel,
+    yAxisLabel,
+    theme
+  ]);
+  const handleEvents = useMemo(() => {
+    if (!onDataPointClick) return void 0;
+    return {
+      click: (params) => {
+        const p = params;
+        if (!p.data) return;
+        const [x, y, , , indexStr] = p.data;
+        const clickParams = {
+          seriesName: p.seriesName ?? "",
+          dataIndex: indexStr ? parseInt(indexStr, 10) : p.dataIndex ?? 0,
+          value: y,
+          name: String(x)
+        };
+        onDataPointClick(clickParams);
+      }
+    };
+  }, [onDataPointClick]);
+  if (error) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: typeof height === "number" ? `${height}px` : height,
+          width: typeof width === "number" ? `${width}px` : width,
+          color: theme.colors.error,
+          fontSize: theme.fontSizes.sm
+        },
+        className,
+        children: [
+          "Error loading chart: ",
+          error.message
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    EChartWrapper,
+    {
+      option,
+      loading,
+      height,
+      width,
+      className,
+      onEvents: handleEvents
+    }
+  );
+}
+
+// src/charts/autoSuggest.ts
+function categorizeColumn(dataType) {
+  const normalizedType = dataType.toLowerCase();
+  if (normalizedType.includes("date") || normalizedType.includes("time") || normalizedType.includes("timestamp")) {
+    return "date";
+  }
+  if (normalizedType.includes("int") || normalizedType.includes("numeric") || normalizedType.includes("decimal") || normalizedType.includes("float") || normalizedType.includes("double") || normalizedType.includes("real") || normalizedType.includes("money")) {
+    return "numeric";
+  }
+  if (normalizedType.includes("char") || normalizedType.includes("text") || normalizedType.includes("varchar") || normalizedType.includes("bool") || normalizedType.includes("uuid")) {
+    return "categorical";
+  }
+  return "unknown";
+}
+function countUniqueValues(result, columnIndex) {
+  const uniqueValues = /* @__PURE__ */ new Set();
+  result.rows.forEach((row) => {
+    uniqueValues.add(row[columnIndex]);
+  });
+  return uniqueValues.size;
+}
+function analyzeColumns(result, selections) {
+  return selections.map((sel) => {
+    const columnIndex = result.columns.indexOf(sel.alias || sel.column);
+    const typeIndex = columnIndex !== -1 ? columnIndex : 0;
+    const dataType = result.column_types[typeIndex] || "unknown";
+    return {
+      name: sel.alias || sel.column,
+      category: categorizeColumn(dataType),
+      uniqueCount: columnIndex !== -1 ? countUniqueValues(result, columnIndex) : 0,
+      hasAggregation: sel.aggregation !== "none"
+    };
+  });
+}
+function suggestChartType(result, columns) {
+  const suggestions = [];
+  if (!result || result.rows.length === 0 || columns.length === 0) {
+    return [];
+  }
+  const analyzedColumns = analyzeColumns(result, columns);
+  const dateColumns = analyzedColumns.filter((c) => c.category === "date");
+  const numericColumns = analyzedColumns.filter((c) => c.category === "numeric");
+  const categoricalColumns = analyzedColumns.filter((c) => c.category === "categorical");
+  const aggregatedColumns = analyzedColumns.filter((c) => c.hasAggregation);
+  if (result.rows.length === 1 && numericColumns.length === 1) {
+    const numericCol = numericColumns[0];
+    if (numericCol) {
+      const colIndex = result.columns.indexOf(numericCol.name);
+      const value = colIndex !== -1 ? result.rows[0]?.[colIndex] : 0;
+      suggestions.push({
+        type: "metric",
+        confidence: 0.95,
+        reason: "Single numeric value is best displayed as a metric card",
+        config: {
+          title: numericCol.name,
+          value: typeof value === "number" ? value : 0,
+          format: "number"
+        }
+      });
+    }
+  }
+  if (dateColumns.length >= 1 && numericColumns.length >= 1) {
+    const dateCol = dateColumns[0];
+    if (dateCol) {
+      const xAxis = dateCol.name;
+      const yAxis = numericColumns.map((c) => c.name);
+      suggestions.push({
+        type: "line",
+        confidence: 0.9,
+        reason: "Time series data is best visualized as a line chart",
+        config: {
+          xAxis,
+          yAxis: yAxis.length === 1 ? yAxis[0] : yAxis,
+          smooth: true,
+          showPoints: result.rows.length <= 20
+        }
+      });
+      if (numericColumns.length > 1) {
+        suggestions.push({
+          type: "area",
+          confidence: 0.75,
+          reason: "Multiple time series can be compared with stacked area chart",
+          config: {
+            xAxis,
+            yAxis,
+            stacked: true,
+            smooth: true
+          }
+        });
+      }
+    }
+  }
+  if (categoricalColumns.length >= 1 && numericColumns.length >= 1) {
+    const categoryCol = categoricalColumns[0];
+    if (categoryCol) {
+      const xAxis = categoryCol.name;
+      const yAxis = numericColumns.map((c) => c.name);
+      const uniqueCount = categoryCol.uniqueCount;
+      if (uniqueCount <= 20) {
+        suggestions.push({
+          type: "bar",
+          confidence: 0.85,
+          reason: "Categorical data with numeric values is best shown as a bar chart",
+          config: {
+            xAxis,
+            yAxis: yAxis.length === 1 ? yAxis[0] : yAxis,
+            orientation: uniqueCount > 10 ? "horizontal" : "vertical",
+            stacked: numericColumns.length > 1
+          }
+        });
+      }
+      if (uniqueCount <= 7 && numericColumns.length === 1) {
+        const numericCol = numericColumns[0];
+        if (numericCol) {
+          suggestions.push({
+            type: "pie",
+            confidence: 0.8,
+            reason: "Small number of categories is well suited for a pie chart",
+            config: {
+              labelColumn: xAxis,
+              valueColumn: numericCol.name,
+              variant: uniqueCount <= 5 ? "donut" : "pie",
+              showPercentage: true
+            }
+          });
+        }
+      }
+    }
+  }
+  if (numericColumns.length >= 2 && dateColumns.length === 0) {
+    const hasEnoughPoints = result.rows.length >= 5;
+    const numericCol0 = numericColumns[0];
+    const numericCol1 = numericColumns[1];
+    const numericCol2 = numericColumns[2];
+    if (hasEnoughPoints && numericCol0 && numericCol1) {
+      suggestions.push({
+        type: "scatter",
+        confidence: 0.7,
+        reason: "Two numeric columns can show correlation in a scatter plot",
+        config: {
+          xAxis: numericCol0.name,
+          yAxis: numericCol1.name,
+          sizeColumn: numericCol2?.name,
+          showTrendline: true
+        }
+      });
+    }
+  }
+  if (numericColumns.length > 1 && categoricalColumns.length >= 1 && dateColumns.length === 0 && aggregatedColumns.length > 0) {
+    const categoryCol = categoricalColumns[0];
+    if (categoryCol) {
+      const xAxis = categoryCol.name;
+      const yAxis = numericColumns.map((c) => c.name);
+      const hasBarSuggestion = suggestions.some(
+        (s) => s.type === "bar" && s.confidence >= 0.85
+      );
+      if (!hasBarSuggestion) {
+        suggestions.push({
+          type: "bar",
+          confidence: 0.65,
+          reason: "Multiple numeric metrics can be compared with grouped bars",
+          config: {
+            xAxis,
+            yAxis,
+            orientation: "vertical",
+            stacked: false,
+            showLegend: true
+          }
+        });
+      }
+    }
+  }
+  if (suggestions.length === 0 && analyzedColumns.length >= 2) {
+    const firstCol = analyzedColumns[0];
+    const secondCol = analyzedColumns[1];
+    if (firstCol && secondCol) {
+      suggestions.push({
+        type: "bar",
+        confidence: 0.5,
+        reason: "Default visualization for the selected data",
+        config: {
+          xAxis: firstCol.name,
+          yAxis: secondCol.name
+        }
+      });
+    }
+  }
+  suggestions.sort((a, b) => b.confidence - a.confidence);
+  return suggestions;
+}
+
+export { AreaChart, BarChart2 as BarChart, EChartWrapper, LineChart3 as LineChart, MetricCard, PieChart2 as PieChart, ScatterChart2 as ScatterChart, Sparkline, TrendIndicator, adjustColorOpacity, applyThemeToOption, createChartTheme, createEmptyStateGraphic, createGradientColor, createMarkLines, dataPointsToChartData, formatAxisLabel, formatCompact, formatMetricValue, getChartColors, isChartDataEmpty, isQueryResult, queryResultToChartData, suggestChartType, toChartData };
+//# sourceMappingURL=chunk-2H5WTH4K.js.map
+//# sourceMappingURL=chunk-2H5WTH4K.js.map