charts

packages/web/src/charts/ChartEditor.js

@@ -71,7 +71,7 @@ export default function ChartEditor({ data, config, setConfig, sql, conid, datab
     if (config.labelColumn && sql && conid && database) {
       handleLoadData();
     }
-  }, [config, sql, conid, database]);
+  }, [config, sql, conid, database, availableColumnNames]);
 
   return (
     <FormProviderCore values={config} setValues={setConfig} template={FormFieldTemplateTiny}>
@@ -90,12 +90,17 @@ export default function ChartEditor({ data, config, setConfig, sql, conid, datab
                 <option value="scatter">Scatter</option> */}
                 </FormSelectField>
                 <FormSelectField label="Color set" name="colorSeed">
-                  <option value="1">1</option>
+                  <option value="a">1</option>
                   <option value="2">2</option>
                   <option value="3">3</option>
                   <option value="4">4</option>
                   <option value="5">5</option>
                 </FormSelectField>
+                <FormSelectField label="Truncate from" name="truncateFrom">
+                  <option value="begin">Begin</option>
+                  <option value="end">End (most recent data for datetime)</option>
+                </FormSelectField>
+                <FormTextField label="Truncate limit" name="truncateLimit" />
               </ManagerInnerContainer>
             </WidgetColumnBarItem>
             <WidgetColumnBarItem title="Data" name="data">

packages/web/src/charts/DataChart.js

@@ -1,9 +1,11 @@
 import React from 'react';
+import _ from 'lodash';
 import Chart from 'react-chartjs-2';
 import randomcolor from 'randomcolor';
 import styled from 'styled-components';
 import useDimensions from '../utility/useDimensions';
 import { useForm } from '../utility/FormProvider';
+import { saturateByTenth } from '../theme/colorUtil';
 
 const ChartWrapper = styled.div`
   flex: 1;
@@ -13,18 +15,29 @@ const ChartWrapper = styled.div`
 function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartType) {
   if (!freeData || !labelColumn || !dataColumns || dataColumns.length == 0) return {};
   const colors = randomcolor({
-    count: freeData.rows.length,
+    count: _.max([freeData.rows.length, dataColumns.length, 1]),
     seed: colorSeed,
   });
+  let backgroundColor = null;
+  let borderColor = null;
   const res = {
     labels: freeData.rows.map((x) => x[labelColumn]),
-    datasets: dataColumns.map((dataColumn) => ({
+    datasets: dataColumns.map((dataColumn, columnIndex) => {
-      label: dataColumn,
+      if (chartType == 'line' || chartType == 'bar') {
-      data: freeData.rows.map((row) => row[dataColumn]),
+        backgroundColor = colors[columnIndex];
-      backgroundColor: chartType != 'line' ? colors : null,
+        borderColor = saturateByTenth(backgroundColor);
-      borderColor: chartType == 'line' ? colors : null,
+      } else {
-      borderWidth: 1,
+        backgroundColor = colors;
-    })),
+      }
+
+      return {
+        label: dataColumn,
+        data: freeData.rows.map((row) => row[dataColumn]),
+        backgroundColor,
+        borderColor,
+        borderWidth: 1,
+      };
+    }),
   };
 
   return res;

packages/web/src/charts/chartDataLoader.ts

@@ -1,6 +1,7 @@
 import { dumpSqlSelect, Select } from 'dbgate-sqltree';
 import { EngineDriver } from 'dbgate-types';
 import axios from '../utility/axios';
+import _ from 'lodash';
 import { extractDataColumns } from './DataChart';
 
 export async function loadChartStructure(driver: EngineDriver, conid, database, sql) {
@@ -22,24 +23,11 @@ export async function loadChartStructure(driver: EngineDriver, conid, database,
 
 export async function loadChartData(driver: EngineDriver, conid, database, sql, config) {
   const dataColumns = extractDataColumns(config);
-  const { labelColumn } = config;
+  const { labelColumn, truncateFrom, truncateLimit } = 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: [
       {
@@ -62,7 +50,7 @@ export async function loadChartData(driver: EngineDriver, conid, database, sql,
         alias: columnName,
       })),
     ],
-    topRecords: 500,
+    topRecords: truncateLimit || 100,
     from: {
       subQueryString: sql,
       alias: 'subq',
@@ -74,10 +62,24 @@ export async function loadChartData(driver: EngineDriver, conid, database, sql,
         columnName: labelColumn,
       },
     ],
+    orderBy: [
+      {
+        exprType: 'column',
+        source: { alias: 'subq' },
+        columnName: labelColumn,
+        direction: truncateFrom == 'end' ? 'DESC' : 'ASC',
+      },
+    ],
   };
 
   const dmp = driver.createDumper();
   dumpSqlSelect(dmp, select);
   const resp = await axios.post('database-connections/query-data', { conid, database, sql: dmp.s });
+  if (truncateFrom == 'end' && resp.data.rows) {
+    return {
+      ...resp.data,
+      rows: _.reverse([...resp.data.rows]),
+    };
+  }
   return resp.data;
 }