chart colors

packages/web/src/charts/ChartEditor.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Chart from 'react-chartjs-2';
+import _ from 'lodash';
 import styled from 'styled-components';
 import useTheme from '../theme/useTheme';
 import useDimensions from '../utility/useDimensions';
@@ -14,6 +15,7 @@ import { getConnectionInfo } from '../utility/metadataLoaders';
 import { findEngineDriver } from 'dbgate-tools';
 import { FormFieldTemplateTiny } from '../utility/formStyle';
 import { ManagerInnerContainer } from '../datagrid/ManagerStyles';
+import { presetPrimaryColors } from '@ant-design/colors';
 
 const LeftContainer = styled.div`
   background-color: ${(props) => props.theme.manager_background};
@@ -110,7 +112,20 @@ export default function ChartEditor({ data, config, setConfig, sql, conid, datab
                   </FormSelectField>
                 )}
                 {availableColumnNames.map((col) => (
-                  <FormCheckboxField label={col} name={`dataColumn_${col}`} key={col} />
+                  <React.Fragment key={col}>
+                    <FormCheckboxField label={col} name={`dataColumn_${col}`} />
+                    {config[`dataColumn_${col}`] && (
+                      <FormSelectField label="Color" name={`dataColumnColor_${col}`}>
+                        <option value="">Random</option>
+
+                        {_.keys(presetPrimaryColors).map((color) => (
+                          <option value={color} key={color}>
+                            {_.startCase(color)}
+                          </option>
+                        ))}
+                      </FormSelectField>
+                    )}
+                  </React.Fragment>
                 ))}
               </ManagerInnerContainer>
             </WidgetColumnBarItem>

packages/web/src/charts/DataChart.js

@@ -6,13 +6,14 @@ import styled from 'styled-components';
 import useDimensions from '../utility/useDimensions';
 import { useForm } from '../utility/FormProvider';
 import { saturateByTenth } from '../theme/colorUtil';
+import useTheme from '../theme/useTheme';
 
 const ChartWrapper = styled.div`
   flex: 1;
   overflow: hidden;
 `;
 
-function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartType) {
+function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartType, dataColumnColors, theme) {
   if (!freeData || !labelColumn || !dataColumns || dataColumns.length == 0) return {};
   const colors = randomcolor({
     count: _.max([freeData.rows.length, dataColumns.length, 1]),
@@ -24,8 +25,14 @@ function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartTyp
     labels: freeData.rows.map((x) => x[labelColumn]),
     datasets: dataColumns.map((dataColumn, columnIndex) => {
       if (chartType == 'line' || chartType == 'bar') {
-        backgroundColor = colors[columnIndex];
+        const color = dataColumnColors[dataColumn];
-        borderColor = saturateByTenth(backgroundColor);
+        if (color) {
+          backgroundColor = theme.main_palettes[color][4];
+          borderColor = theme.main_palettes[color][7];
+        } else {
+          backgroundColor = colors[columnIndex];
+          borderColor = saturateByTenth(backgroundColor);
+        }
       } else {
         backgroundColor = colors;
       }
@@ -52,13 +59,23 @@ export function extractDataColumns(values) {
   }
   return dataColumns;
 }
+export function extractDataColumnColors(values, dataColumns) {
+  const res = {};
+  for (const column of dataColumns) {
+    const color = values[`dataColumnColor_${column}`];
+    if (color) res[column] = color;
+  }
+  return res;
+}
 
 export default function DataChart({ data }) {
   const [containerRef, { height: containerHeight, width: containerWidth }] = useDimensions();
   const { values } = useForm();
+  const theme = useTheme();
 
   const { labelColumn } = values;
   const dataColumns = extractDataColumns(values);
+  const dataColumnColors = extractDataColumnColors(values, dataColumns);
 
   return (
     <ChartWrapper ref={containerRef}>
@@ -66,7 +83,15 @@ export default function DataChart({ data }) {
         key={`${values.chartType}|${containerWidth}|${containerHeight}`}
         width={containerWidth}
         height={containerHeight}
-        data={createChartData(data, labelColumn, dataColumns, values.colorSeed || '5', values.chartType)}
+        data={createChartData(
+          data,
+          labelColumn,
+          dataColumns,
+          values.colorSeed || '5',
+          values.chartType,
+          dataColumnColors,
+          theme
+        )}
         type={values.chartType}
       />
     </ChartWrapper>