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>
   );