active chart - load data from query

packages/web/src/charts/ChartEditor.js

@@ -8,6 +8,10 @@ import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar
 import { FormCheckboxField, FormSelectField, FormTextField } from '../utility/forms';
 import DataChart from './DataChart';
 import { FormProviderCore } from '../utility/FormProvider';
+import { loadChartData, loadChartStructure } from './chartDataLoader';
+import useExtensions from '../utility/useExtensions';
+import { getConnectionInfo } from '../utility/metadataLoaders';
+import { findEngineDriver } from 'dbgate-tools';
 
 const LeftContainer = styled.div`
   background-color: ${(props) => props.theme.manager_background};
@@ -15,10 +19,57 @@ const LeftContainer = styled.div`
   flex: 1;
 `;
 
-export default function ChartEditor({ data, config, setConfig }) {
+export default function ChartEditor({ data, config, setConfig, sql, conid, database }) {
   const [managerSize, setManagerSize] = React.useState(0);
   const theme = useTheme();
-  const availableColumnNames = data ? data.structure.columns.map((x) => x.columnName) : [];
+  const extensions = useExtensions();
+
+  const [availableColumnNames, setAvailableColumnNames] = React.useState([]);
+  const [loadedData, setLoadedData] = React.useState(null);
+
+  const getDriver = async () => {
+    const conn = await getConnectionInfo({ conid });
+    if (!conn) return;
+    const driver = findEngineDriver(conn, extensions);
+    return driver;
+  };
+
+  const handleLoadColumns = async () => {
+    const driver = await getDriver();
+    if (!driver) return;
+    const columns = await loadChartStructure(driver, conid, database, sql);
+    setAvailableColumnNames(columns);
+  };
+
+  const handleLoadData = async () => {
+    const driver = await getDriver();
+    if (!driver) return;
+    const loaded = await loadChartData(driver, conid, database, sql, config);
+    if (!loaded) return;
+    const { columns, rows } = loaded;
+    setLoadedData({
+      structure: columns,
+      rows,
+    });
+  };
+
+  React.useEffect(() => {
+    if (sql && conid && database) {
+      handleLoadColumns();
+    }
+  }, [sql, conid, database, extensions]);
+
+  React.useEffect(() => {
+    if (data) {
+      setAvailableColumnNames(data ? data.structure.columns.map((x) => x.columnName) : []);
+    }
+  }, [data]);
+
+  React.useEffect(() => {
+    if (config.labelColumn && sql && conid && database) {
+      handleLoadData();
+    }
+  }, [config, sql, conid, database]);
 
   return (
     <FormProviderCore values={config} setValues={setConfig}>
@@ -38,14 +89,16 @@ export default function ChartEditor({ data, config, setConfig }) {
               <FormTextField label="Color seed" name="colorSeed" />
             </WidgetColumnBarItem>
             <WidgetColumnBarItem title="Data" name="data">
-              <FormSelectField label="Label column" name="labelColumn">
-                <option value=""></option>
-                {availableColumnNames.map((col) => (
-                  <option value={col} key={col}>
-                    {col}
-                  </option>
-                ))}
-              </FormSelectField>
+              {availableColumnNames.length > 0 && (
+                <FormSelectField label="Label column" name="labelColumn">
+                  <option value=""></option>
+                  {availableColumnNames.map((col) => (
+                    <option value={col} key={col}>
+                      {col}
+                    </option>
+                  ))}
+                </FormSelectField>
+              )}
               {availableColumnNames.map((col) => (
                 <FormCheckboxField label={col} name={`dataColumn_${col}`} key={col} />
               ))}
@@ -53,7 +106,7 @@ export default function ChartEditor({ data, config, setConfig }) {
           </WidgetColumnBar>
         </LeftContainer>
 
-        <DataChart data={data} />
+        <DataChart data={data || loadedData} />
       </HorizontalSplitter>
     </FormProviderCore>
   );

packages/web/src/charts/DataChart.js

@@ -84,17 +84,22 @@ function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartTyp
   return res;
 }
 
-export default function DataChart({ data }) {
-  const [containerRef, { height: containerHeight, width: containerWidth }] = useDimensions();
-  const { values } = useForm();
-
-  const { labelColumn } = values;
+export function extractDataColumns(values) {
   const dataColumns = [];
   for (const key in values) {
     if (key.startsWith('dataColumn_') && values[key]) {
       dataColumns.push(key.substring('dataColumn_'.length));
     }
   }
+  return dataColumns;
+}
+
+export default function DataChart({ data }) {
+  const [containerRef, { height: containerHeight, width: containerWidth }] = useDimensions();
+  const { values } = useForm();
+
+  const { labelColumn } = values;
+  const dataColumns = extractDataColumns(values);
 
   return (
     <ChartWrapper ref={containerRef}>

packages/web/src/charts/chartDataLoader.ts

@@ -0,0 +1,83 @@
+import { dumpSqlSelect, Select } from 'dbgate-sqltree';
+import { EngineDriver } from 'dbgate-types';
+import axios from '../utility/axios';
+import { extractDataColumns } from './DataChart';
+
+export async function loadChartStructure(driver: EngineDriver, conid, database, sql) {
+  const select: Select = {
+    commandType: 'select',
+    selectAll: true,
+    topRecords: 1,
+    from: {
+      subQueryString: sql,
+      alias: 'subq',
+    },
+  };
+
+  const dmp = driver.createDumper();
+  dumpSqlSelect(dmp, select);
+  const resp = await axios.post('database-connections/query-data', { conid, database, sql: dmp.s });
+  return resp.data.columns.map((x) => x.columnName);
+}
+
+export async function loadChartData(driver: EngineDriver, conid, database, sql, config) {
+  const dataColumns = extractDataColumns(config);
+  const { labelColumn } = config;
+  if (!labelColumn || !dataColumns || dataColumns.length == 0) return null;
+
+  const select: Select = {
+    commandType: 'select',
+    // columns:[
+    //     {
+    //         exprType:'call',
+    //         func:'SUM',
+    //         args: [
+    //             {
+    //                 exprType: 'column',
+    //                 columnName,
+    //                 source: { alias: 'subq' },
+    //             }
+    //         ]
+    //     }
+    // ],
+
+    columns: [
+      {
+        exprType: 'column',
+        source: { alias: 'subq' },
+        columnName: labelColumn,
+        alias: labelColumn,
+      },
+      // @ts-ignore
+      ...dataColumns.map((columnName) => ({
+        exprType: 'call',
+        func: 'SUM',
+        args: [
+          {
+            exprType: 'column',
+            columnName,
+            source: { alias: 'subq' },
+          },
+        ],
+        alias: columnName,
+      })),
+    ],
+    topRecords: 500,
+    from: {
+      subQueryString: sql,
+      alias: 'subq',
+    },
+    groupBy: [
+      {
+        exprType: 'column',
+        source: { alias: 'subq' },
+        columnName: labelColumn,
+      },
+    ],
+  };
+
+  const dmp = driver.createDumper();
+  dumpSqlSelect(dmp, select);
+  const resp = await axios.post('database-connections/query-data', { conid, database, sql: dmp.s });
+  return resp.data;
+}