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

charts

Browse Source
This commit is contained in:
Jan Prochazka
2020-12-05 18:33:19 +01:00
parent 23d9c9279c
commit 5434302aa5
4 changed files with 70 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/package.json
View File

@@ -19,6 +19,7 @@
"eslint-plugin-react": "^7.17.0", "eslint-plugin-react": "^7.17.0",
"json-stable-stringify": "^1.0.1", "json-stable-stringify": "^1.0.1",
"localforage": "^1.9.0", "localforage": "^1.9.0",
"randomcolor": "^0.6.2",
"react": "^16.12.0", "react": "^16.12.0",
"react-ace": "^8.0.0", "react-ace": "^8.0.0",
"react-chartjs-2": "^2.11.1", "react-chartjs-2": "^2.11.1",

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

@@ -5,7 +5,7 @@ import useTheme from '../theme/useTheme';
import useDimensions from '../utility/useDimensions'; import useDimensions from '../utility/useDimensions';
import { HorizontalSplitter } from '../widgets/Splitter'; import { HorizontalSplitter } from '../widgets/Splitter';
import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar'; import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar';
import { FormCheckboxField, FormSelectField } from '../utility/forms'; import { FormCheckboxField, FormSelectField, FormTextField } from '../utility/forms';
import DataChart from './DataChart'; import DataChart from './DataChart';
import { FormProviderCore } from '../utility/FormProvider'; import { FormProviderCore } from '../utility/FormProvider';
@@ -29,7 +29,13 @@ export default function ChartEditor({ data, config, setConfig }) {
<FormSelectField label="Chart type" name="chartType"> <FormSelectField label="Chart type" name="chartType">
<option value="bar">Bar</option> <option value="bar">Bar</option>
<option value="line">Line</option> <option value="line">Line</option>
{/* <option value="radar">Radar</option> */}
<option value="pie">Pie</option>
<option value="polarArea">Polar area</option>
{/* <option value="bubble">Bubble</option>
<option value="scatter">Scatter</option> */}
</FormSelectField> </FormSelectField>
<FormTextField label="Color seed" name="colorSeed" />
</WidgetColumnBarItem> </WidgetColumnBarItem>
<WidgetColumnBarItem title="Data" name="data"> <WidgetColumnBarItem title="Data" name="data">
<FormSelectField label="Label column" name="labelColumn"> <FormSelectField label="Label column" name="labelColumn">

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

@@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import _ from 'lodash' import _ from 'lodash';
import Chart from 'react-chartjs-2'; import Chart from 'react-chartjs-2';
import randomcolor from 'randomcolor';
import styled from 'styled-components'; import styled from 'styled-components';
import useTheme from '../theme/useTheme'; import useTheme from '../theme/useTheme';
import useDimensions from '../utility/useDimensions'; import useDimensions from '../utility/useDimensions';
@@ -8,64 +9,74 @@ import { HorizontalSplitter } from '../widgets/Splitter';
import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar'; import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar';
import { FormSelectField } from '../utility/forms'; import { FormSelectField } from '../utility/forms';
import { useForm } from '../utility/FormProvider'; import { useForm } from '../utility/FormProvider';
import { saturateByTenth } from '../theme/colorUtil';
const ChartWrapper = styled.div` const ChartWrapper = styled.div`
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
`; `;
const chartData = { // const chartData = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], // labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [ // datasets: [
{ // {
label: '# of Votes', // label: '# of Votes',
data: [12, 19, 3, 5, 2, 3], // data: [12, 19, 3, 5, 2, 3],
backgroundColor: [ // backgroundColor: [
'rgba(255, 99, 132, 0.2)', // 'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)', // 'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)', // 'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)', // 'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)', // 'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)', // 'rgba(255, 159, 64, 0.2)',
], // ],
borderColor: [ // borderColor: [
'rgba(255, 99, 132, 1)', // 'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)', // 'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)', // 'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)', // 'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)', // 'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)', // 'rgba(255, 159, 64, 1)',
], // ],
borderWidth: 1, // borderWidth: 1,
}, // },
], // ],
}; // };
function createChartData(freeData, labelColumn, dataColumns) { function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartType) {
if (!freeData || !labelColumn || !dataColumns || dataColumns.length == 0) return {}; if (!freeData || !labelColumn || !dataColumns || dataColumns.length == 0) return {};
const labels = _.uniq(freeData.rows.map((x) => x[labelColumn])); const labels = _.uniq(freeData.rows.map((x) => x[labelColumn]));
const colors = randomcolor({
count: labels.length,
seed: colorSeed,
});
const res = { const res = {
labels: freeData.rows.map((x) => x[labelColumn]), labels: freeData.rows.map((x) => x[labelColumn]),
datasets: dataColumns.map((dataColumn) => ({ datasets: dataColumns.map((dataColumn) => ({
label: dataColumn, label: dataColumn,
// data: [12, 19, 3, 5, 2, 3], // data: [12, 19, 3, 5, 2, 3],
data: freeData.rows.map((x) => x[dataColumn]), data: labels.map((label) =>
backgroundColor: [ _.sum(freeData.rows.filter((row) => row[labelColumn] == label).map((row) => row[dataColumn]))
'rgba(255, 99, 132, 0.2)', ),
'rgba(54, 162, 235, 0.2)', backgroundColor: chartType != 'line' ? colors : null,
'rgba(255, 206, 86, 0.2)', borderColor: chartType == 'line' ? colors : null,
'rgba(75, 192, 192, 0.2)', // borderColor: colors, // .map(saturateByTenth),
'rgba(153, 102, 255, 0.2)', // backgroundColor: [
'rgba(255, 159, 64, 0.2)', // 'rgba(255, 99, 132, 0.2)',
], // 'rgba(54, 162, 235, 0.2)',
borderColor: [ // 'rgba(255, 206, 86, 0.2)',
'rgba(255, 99, 132, 1)', // 'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 1)', // 'rgba(153, 102, 255, 0.2)',
'rgba(255, 206, 86, 1)', // 'rgba(255, 159, 64, 0.2)',
'rgba(75, 192, 192, 1)', // ],
'rgba(153, 102, 255, 1)', // borderColor: [
'rgba(255, 159, 64, 1)', // 'rgba(255, 99, 132, 1)',
], // 'rgba(54, 162, 235, 1)',
// 'rgba(255, 206, 86, 1)',
// 'rgba(75, 192, 192, 1)',
// 'rgba(153, 102, 255, 1)',
// 'rgba(255, 159, 64, 1)',
// ],
borderWidth: 1, borderWidth: 1,
})), })),
}; };
@@ -91,7 +102,7 @@ export default function DataChart({ data }) {
key={`${values.chartType}|${containerWidth}|${containerHeight}`} key={`${values.chartType}|${containerWidth}|${containerHeight}`}
width={containerWidth} width={containerWidth}
height={containerHeight} height={containerHeight}
data={createChartData(data, labelColumn, dataColumns)} data={createChartData(data, labelColumn, dataColumns, values.colorSeed || 1, values.chartType)}
type={values.chartType} type={values.chartType}
/> />
</ChartWrapper> </ChartWrapper>

5
yarn.lock
View File

@@ -9618,6 +9618,11 @@ randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
dependencies: dependencies:
safe-buffer "^5.1.0" safe-buffer "^5.1.0"
randomcolor@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/randomcolor/-/randomcolor-0.6.2.tgz#7a57362ae1a1278439aeed2c15e5deb8ea33f56d"
integrity sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A==
randomfill@^1.0.3: randomfill@^1.0.3:
version "1.0.4" version "1.0.4"
resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458" resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"