dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-17 23:45:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

charts

Browse Source
This commit is contained in:
Jan Prochazka
2020-12-06 11:01:58 +01:00
parent 3bb22ddc36
commit fd2747d166
3 changed files with 45 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/web/src/charts/ChartEditor.js
View File

@@ -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">

29
packages/web/src/charts/DataChart.js
View File

@@ -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) => ({
label: dataColumn,
data: freeData.rows.map((row) => row[dataColumn]),
backgroundColor: chartType != 'line' ? colors : null,
borderColor: chartType == 'line' ? colors : null,
borderWidth: 1,
})),
datasets: dataColumns.map((dataColumn, columnIndex) => {
if (chartType == 'line' || chartType == 'bar') {
backgroundColor = colors[columnIndex];
borderColor = saturateByTenth(backgroundColor);
} else {
backgroundColor = colors;
}
return {
label: dataColumn,
data: freeData.rows.map((row) => row[dataColumn]),
backgroundColor,
borderColor,
borderWidth: 1,
};
}),
};
return res;

32
packages/web/src/charts/chartDataLoader.ts
View File

@@ -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;
}