@quantumwake/terminal-ux-dashboard-components 0.1.10 → 0.1.12

package/dist/index.cjs

@@ -1684,6 +1684,36 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
 function ViewLoading() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "Loading..." });
 }
+var SQL_CHART_TYPES = /* @__PURE__ */ new Set(["bar", "grouped-bar", "pie", "line", "scatter", "heatmap"]);
+function panelToChartConfig(chartType, config) {
+  const cfg = { chartType, xFields: [], yFields: [], filters: config.filters || [] };
+  switch (chartType) {
+    case "bar":
+    case "grouped-bar":
+      if (config.group) cfg.xFields = [{ name: config.group }];
+      cfg.yFields = config.yFields?.length ? config.yFields : config.value ? [{ name: config.value, agg: config.agg }] : [];
+      break;
+    case "pie":
+      if (config.group) cfg.xFields = [{ name: config.group }];
+      break;
+    case "line":
+    case "scatter":
+      if (config.x) cfg.xFields = [{ name: config.x }];
+      if (config.y) cfg.yFields = [{ name: config.y }];
+      break;
+    case "heatmap":
+      if (config.row) cfg.xFields = [{ name: config.row }];
+      if (config.col) cfg.yFields = [{ name: config.col }];
+      if (config.value) cfg.valueField = { name: config.value, agg: config.agg };
+      break;
+  }
+  return cfg;
+}
+function panelSql(chartType, config) {
+  if (config.sql) return config.sql;
+  if (SQL_CHART_TYPES.has(chartType)) return buildChartSQL(panelToChartConfig(chartType, config)) || "";
+  return "";
+}
 function SqlPanel({ panel }) {
   const { runQuery, persistPanelData } = useDashboard();
   const { canRefresh } = useCapabilities();
@@ -1691,6 +1721,7 @@ function SqlPanel({ panel }) {
   runQueryRef.current = runQuery;
   const config = panel.config || {};
   const chartType = config.chartType || panel.type;
+  const sql = panelSql(chartType, config);
   const precomputed = config.data;
   const [rows, setRows] = react.useState(precomputed ?? null);
   const [error, setError] = react.useState(null);
@@ -1709,7 +1740,7 @@ function SqlPanel({ panel }) {
     let cancelled = false;
     setLoading(true);
     setError(null);
-    runQueryRef.current(config.sql || "").then(
+    runQueryRef.current(sql).then(
       (res) => {
         if (!cancelled) {
           setLoading(false);
@@ -1727,12 +1758,12 @@ function SqlPanel({ panel }) {
     return () => {
       cancelled = true;
     };
-  }, [config.sql, canRefresh]);
+  }, [sql, canRefresh]);
   const refresh = react.useCallback(async () => {
     setRefreshing(true);
     setError(null);
     try {
-      const res = await runQueryRef.current(config.sql || "");
+      const res = await runQueryRef.current(sql);
       const r = res?.rows || [];
       setRows(r);
       persistPanelData?.(panel.id, r, (/* @__PURE__ */ new Date()).toISOString());
@@ -1741,7 +1772,7 @@ function SqlPanel({ panel }) {
     } finally {
       setRefreshing(false);
     }
-  }, [config.sql, panel.id, persistPanelData]);
+  }, [sql, panel.id, persistPanelData]);
   const refreshBtn = canRefresh ? /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -1812,7 +1843,8 @@ function SqlPanel({ panel }) {
 function PanelContent({ panel, records, columns }) {
   const { type } = panel;
   const config = panel.config || {};
-  if (config.sql) {
+  const effType = config.chartType || type;
+  if (config.sql || SQL_CHART_TYPES.has(effType)) {
     return /* @__PURE__ */ jsxRuntime.jsx(SqlPanel, { panel });
   }
   if (!records?.length && type !== "insight") {