chart colors

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];
-        borderColor = saturateByTenth(backgroundColor);
+        const color = dataColumnColors[dataColumn];
+        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>