dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-23 11:36: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/ChartEditor.js
View File

@@ -12,6 +12,8 @@ import { loadChartData, loadChartStructure } from './chartDataLoader';
import useExtensions from '../utility/useExtensions';
import { getConnectionInfo } from '../utility/metadataLoaders';
import { findEngineDriver } from 'dbgate-tools';
import { FormFieldTemplateTiny } from '../utility/formStyle';
import { ManagerInnerContainer } from '../datagrid/ManagerStyles';
const LeftContainer = styled.div`
background-color: ${(props) => props.theme.manager_background};
@@ -72,36 +74,46 @@ export default function ChartEditor({ data, config, setConfig, sql, conid, datab
}, [config, sql, conid, database]);
return (
<FormProviderCore values={config} setValues={setConfig}>
<FormProviderCore values={config} setValues={setConfig} template={FormFieldTemplateTiny}>
<HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
<LeftContainer theme={theme}>
<WidgetColumnBar>
<WidgetColumnBarItem title="Style" name="style" height="40%">
<FormSelectField label="Chart type" name="chartType">
<option value="bar">Bar</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>
<ManagerInnerContainer style={{ maxWidth: managerSize }}>
<FormSelectField label="Chart type" name="chartType">
<option value="bar">Bar</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>
<FormTextField label="Color seed" name="colorSeed" />
</FormSelectField>
<FormSelectField label="Color set" name="colorSeed">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</FormSelectField>
</ManagerInnerContainer>
</WidgetColumnBarItem>
<WidgetColumnBarItem title="Data" name="data">
{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} />
))}
<ManagerInnerContainer style={{ maxWidth: managerSize }}>
{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} />
))}
</ManagerInnerContainer>
</WidgetColumnBarItem>
</WidgetColumnBar>
</LeftContainer>

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