@prismiq/react 0.1.0

package/dist/chunk-NK7HKX2J.cjs

@@ -0,0 +1,2459 @@
+'use strict';
+
+var chunkLMTG3LRC_cjs = require('./chunk-LMTG3LRC.cjs');
+var chunk4AVL6GQK_cjs = require('./chunk-4AVL6GQK.cjs');
+var react = require('react');
+var ReactEChartsCore = require('echarts-for-react/esm/core');
+var echarts = require('echarts/core');
+var charts = require('echarts/charts');
+var components = require('echarts/components');
+var renderers = require('echarts/renderers');
+var jsxRuntime = require('react/jsx-runtime');
+var ReactEChartsCore2 = require('echarts-for-react/lib/core');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var ReactEChartsCore__default = /*#__PURE__*/_interopDefault(ReactEChartsCore);
+var echarts__namespace = /*#__PURE__*/_interopNamespace(echarts);
+var ReactEChartsCore2__default = /*#__PURE__*/_interopDefault(ReactEChartsCore2);
+
+// 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__namespace.use([
+  charts.BarChart,
+  charts.LineChart,
+  charts.PieChart,
+  charts.ScatterChart,
+  components.TitleComponent,
+  components.TooltipComponent,
+  components.GridComponent,
+  components.LegendComponent,
+  components.MarkLineComponent,
+  components.MarkPointComponent,
+  components.DataZoomComponent,
+  renderers.CanvasRenderer
+]);
+function EChartWrapper({
+  option,
+  loading = false,
+  height = 300,
+  width = "100%",
+  theme: themeOverride,
+  onEvents,
+  className
+}) {
+  const { theme, resolvedMode } = chunkLMTG3LRC_cjs.useTheme();
+  const chartRef = react.useRef(null);
+  const prevOptionRef = react.useRef("");
+  const themedOption = applyThemeToOption(option, theme);
+  const shouldSetOption = react.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 = react.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__ */ jsxRuntime.jsxs("div", { style: containerStyle, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        @keyframes prismiq-spin {
+          to { transform: rotate(360deg); }
+        }
+      ` }),
+    loading && /* @__PURE__ */ jsxRuntime.jsx("div", { style: loadingStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: spinnerStyle }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ReactEChartsCore__default.default,
+      {
+        ref: chartRef,
+        echarts: echarts__namespace,
+        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 } = chunkLMTG3LRC_cjs.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__ */ jsxRuntime.jsxs("span", { style: containerStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: arrowStyle, children: getArrow() }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { style: valueStyle, children: [
+      Math.abs(trend.value).toFixed(1),
+      "%"
+    ] }),
+    trend.label && /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle, children: trend.label })
+  ] });
+}
+echarts__namespace.use([charts.LineChart, components.GridComponent, renderers.CanvasRenderer]);
+function Sparkline({
+  data,
+  color,
+  height = 40,
+  width = "100%"
+}) {
+  const { theme } = chunkLMTG3LRC_cjs.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__ */ jsxRuntime.jsx(
+    ReactEChartsCore2__default.default,
+    {
+      echarts: echarts__namespace,
+      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 } = chunkLMTG3LRC_cjs.useTheme();
+  const containerRef = react.useRef(null);
+  const [containerSize, setContainerSize] = react.useState({ width: 300, height: 200 });
+  react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("style", { children: `
+        @keyframes prismiq-pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+      ` }),
+        centered ? loading ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              ...skeletonStyle,
+              width: "120px",
+              height: "32px"
+            }
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("p", { style: valueStyle, children: formattedValue }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
+            loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...skeletonStyle, width: "80px", height: "14px" } }) : /* @__PURE__ */ jsxRuntime.jsx("h3", { style: titleStyle, children: title }),
+            trend && !loading && /* @__PURE__ */ jsxRuntime.jsx(
+              TrendIndicator,
+              {
+                trend,
+                trendPositive,
+                size
+              }
+            )
+          ] }),
+          loading ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                ...skeletonStyle,
+                width: "120px",
+                height: size === "sm" ? "20px" : size === "lg" ? "32px" : "24px",
+                marginTop: theme.spacing.xs
+              }
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("p", { style: valueStyle, children: formattedValue }),
+          sparklineData && sparklineData.length > 0 && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { style: sparklineContainerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Sparkline,
+            {
+              data: sparklineData,
+              color: sparklineColor,
+              height: config.sparklineHeight
+            }
+          ) }),
+          sparklineData && loading && /* @__PURE__ */ jsxRuntime.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 } = chunkLMTG3LRC_cjs.useTheme();
+  const yColumns = react.useMemo(
+    () => Array.isArray(yAxis) ? yAxis : [yAxis],
+    [yAxis]
+  );
+  const chartData = react.useMemo(
+    () => toChartData(data, xAxis, yColumns),
+    [data, xAxis, yColumns]
+  );
+  const dateFormatter = react.useMemo(
+    () => xAxisFormat ? chunk4AVL6GQK_cjs.createDateFormatter(xAxisFormat) : null,
+    [xAxisFormat]
+  );
+  const formattedCategories = react.useMemo(() => {
+    if (!dateFormatter) return chartData.categories;
+    return chartData.categories.map((cat) => dateFormatter(cat));
+  }, [chartData.categories, dateFormatter]);
+  const seriesColors = react.useMemo(
+    () => colors || getChartColors(theme, yColumns.length),
+    [colors, theme, yColumns.length]
+  );
+  const isEmpty = isChartDataEmpty(data);
+  const option = react.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 = react.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 = react.useMemo(() => {
+    if (!onDataPointClick && !crossFilter?.enabled) return void 0;
+    return {
+      click: handleClick
+    };
+  }, [onDataPointClick, crossFilter?.enabled, handleClick]);
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 } = chunkLMTG3LRC_cjs.useTheme();
+  const yColumns = react.useMemo(
+    () => Array.isArray(yAxis) ? yAxis : [yAxis],
+    [yAxis]
+  );
+  const rawChartData = react.useMemo(
+    () => toChartData(data, xAxis, yColumns, seriesColumn),
+    [data, xAxis, yColumns, seriesColumn]
+  );
+  const chartData = react.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 = react.useMemo(
+    () => xAxisFormat ? chunk4AVL6GQK_cjs.createDateFormatter(xAxisFormat) : null,
+    [xAxisFormat]
+  );
+  const formattedCategories = react.useMemo(() => {
+    if (!dateFormatter) {
+      return chartData.categories;
+    }
+    return chartData.categories.map((cat) => dateFormatter(cat));
+  }, [chartData.categories, dateFormatter]);
+  const seriesColors = react.useMemo(
+    () => colors || getChartColors(theme, chartData.series.length),
+    [colors, theme, chartData.series.length]
+  );
+  const isEmpty = isChartDataEmpty(data);
+  const option = react.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 = react.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 = react.useMemo(() => {
+    if (!onDataPointClick && !crossFilter?.enabled) return void 0;
+    return {
+      click: handleClick
+    };
+  }, [onDataPointClick, crossFilter?.enabled, handleClick]);
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 } = chunkLMTG3LRC_cjs.useTheme();
+  const yColumns = react.useMemo(
+    () => Array.isArray(yAxis) ? yAxis : [yAxis],
+    [yAxis]
+  );
+  const chartData = react.useMemo(
+    () => toChartData(data, xAxis, yColumns),
+    [data, xAxis, yColumns]
+  );
+  const dateFormatter = react.useMemo(
+    () => xAxisFormat ? chunk4AVL6GQK_cjs.createDateFormatter(xAxisFormat) : null,
+    [xAxisFormat]
+  );
+  const formattedCategories = react.useMemo(() => {
+    if (!dateFormatter) return chartData.categories;
+    return chartData.categories.map((cat) => dateFormatter(cat));
+  }, [chartData.categories, dateFormatter]);
+  const seriesColors = react.useMemo(
+    () => colors || getChartColors(theme, yColumns.length),
+    [colors, theme, yColumns.length]
+  );
+  const isEmpty = isChartDataEmpty(data);
+  const option = react.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 = react.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 = react.useMemo(() => {
+    if (!onDataPointClick && !crossFilter?.enabled) return void 0;
+    return {
+      click: handleClick
+    };
+  }, [onDataPointClick, crossFilter?.enabled, handleClick]);
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 } = chunkLMTG3LRC_cjs.useTheme();
+  const containerRef = react.useRef(null);
+  const [containerWidth, setContainerWidth] = react.useState(0);
+  react.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 = react.useMemo(
+    () => toChartData(data, labelColumn, [valueColumn]),
+    [data, labelColumn, valueColumn]
+  );
+  const dateFormatter = react.useMemo(
+    () => labelFormat ? chunk4AVL6GQK_cjs.createDateFormatter(labelFormat) : null,
+    [labelFormat]
+  );
+  const formattedCategories = react.useMemo(() => {
+    if (!dateFormatter) return chartData.categories;
+    return chartData.categories.map((cat) => dateFormatter(cat));
+  }, [chartData.categories, dateFormatter]);
+  const pieData = react.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 = react.useMemo(
+    () => colors || getChartColors(theme, pieData.length),
+    [colors, theme, pieData.length]
+  );
+  const isEmpty = isChartDataEmpty(data);
+  const option = react.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 = react.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 = react.useMemo(() => {
+    if (!onDataPointClick && !crossFilter?.enabled) return void 0;
+    return {
+      click: handleClick
+    };
+  }, [onDataPointClick, crossFilter?.enabled, handleClick]);
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { ref: containerRef, style: { height, width }, className });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, style: { height, width }, children: /* @__PURE__ */ jsxRuntime.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 } = chunkLMTG3LRC_cjs.useTheme();
+  const { points, colorCategories } = react.useMemo(
+    () => extractScatterData(data, xAxis, yAxis, sizeColumn, colorColumn, labelColumn),
+    [data, xAxis, yAxis, sizeColumn, colorColumn, labelColumn]
+  );
+  const categoryColors = react.useMemo(
+    () => getChartColors(theme, Math.max(colorCategories.length, 1)),
+    [theme, colorCategories.length]
+  );
+  const isEmpty = isChartDataEmpty(data) || points.length === 0;
+  const option = react.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 = react.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__ */ jsxRuntime.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__ */ jsxRuntime.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;
+}
+
+exports.AreaChart = AreaChart;
+exports.BarChart = BarChart2;
+exports.EChartWrapper = EChartWrapper;
+exports.LineChart = LineChart3;
+exports.MetricCard = MetricCard;
+exports.PieChart = PieChart2;
+exports.ScatterChart = ScatterChart2;
+exports.Sparkline = Sparkline;
+exports.TrendIndicator = TrendIndicator;
+exports.adjustColorOpacity = adjustColorOpacity;
+exports.applyThemeToOption = applyThemeToOption;
+exports.createChartTheme = createChartTheme;
+exports.createEmptyStateGraphic = createEmptyStateGraphic;
+exports.createGradientColor = createGradientColor;
+exports.createMarkLines = createMarkLines;
+exports.dataPointsToChartData = dataPointsToChartData;
+exports.formatAxisLabel = formatAxisLabel;
+exports.formatCompact = formatCompact;
+exports.formatMetricValue = formatMetricValue;
+exports.getChartColors = getChartColors;
+exports.isChartDataEmpty = isChartDataEmpty;
+exports.isQueryResult = isQueryResult;
+exports.queryResultToChartData = queryResultToChartData;
+exports.suggestChartType = suggestChartType;
+exports.toChartData = toChartData;
+//# sourceMappingURL=chunk-NK7HKX2J.cjs.map
+//# sourceMappingURL=chunk-NK7HKX2J.cjs.map