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

form style refactor + charts

Browse Source
This commit is contained in:
Jan Prochazka
2020-12-06 10:23:57 +01:00
parent 0c4d5b5356
commit 3bb22ddc36
10 changed files with 131 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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