From 0395457e515b12aa5632f1579b0e2418aee93183 Mon Sep 17 00:00:00 2001 From: Souma Ghosh <103924539+souma-ghosh@users.noreply.github.com> Date: Fri, 9 Dec 2022 12:47:21 +0530 Subject: [PATCH] feat: Add Series Colour property for default charts (#18229) * Adds functionality for Series Color property * fix an issue where chart was breaking when color property is not provided * Changes Series Color field to Color Picker type input Default color set as primary theme color * Under development - Some bug fixes to the series colour feature * Fix issue with second series color not being applied correctly New property placeholderText for ColorPickerComponentV2 Disable series color feature for Pie Chart Code clean up --- .../propertyControls/ChartDataControl.tsx | 26 +++++++++++++++++++ .../ColorPickerComponentV2.tsx | 5 ++-- .../widgets/ChartWidget/component/index.tsx | 15 ++++++++++- .../src/widgets/ChartWidget/constants.ts | 1 + 4 files changed, 44 insertions(+), 3 deletions(-) diff --git a/app/client/src/components/propertyControls/ChartDataControl.tsx b/app/client/src/components/propertyControls/ChartDataControl.tsx index 8e7711cf1d..c1989914ce 100644 --- a/app/client/src/components/propertyControls/ChartDataControl.tsx +++ b/app/client/src/components/propertyControls/ChartDataControl.tsx @@ -17,6 +17,7 @@ import { AllChartData, ChartData } from "widgets/ChartWidget/constants"; import { generateReactKey } from "utils/generators"; import { AutocompleteDataType } from "utils/autocomplete/CodemirrorTernService"; import CodeEditor from "components/editorComponents/LazyCodeEditorWrapper"; +import ColorPickerComponent from "./ColorPickerComponentV2"; const Wrapper = styled.div` background-color: ${(props) => @@ -89,8 +90,10 @@ type RenderComponentProps = { evaluated: { seriesName: string; data: Array<{ x: string; y: string }> | any; + color: string; }; theme: EditorTheme; + isPieChart?: boolean; }; const expectedSeriesName: CodeEditorExpected = { @@ -115,6 +118,7 @@ function DataControlComponent(props: RenderComponentProps) { deleteOption, evaluated, index, + isPieChart, item, length, updateOption, @@ -158,6 +162,27 @@ function DataControlComponent(props: RenderComponentProps) { theme={props.theme} /> + {!isPieChart && ( + <> + Series Color + + | string, + ) => { + let value: string = event as string; + if (typeof event !== "string") { + value = event.target.value; + } + updateOption(index, "color", value); + }} + color={item.color || ""} + placeholderText="enter color hexcode" + showApplicationColors + /> + + + )} Series Data { deleteOption={this.deleteOption} evaluated={get(evaluatedValue, `${firstKey}`)} index={firstKey} + isPieChart item={data} length={1} theme={this.props.theme} diff --git a/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx b/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx index 72caa0db39..aa6cbe4e4c 100644 --- a/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx +++ b/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx @@ -43,6 +43,7 @@ interface ColorPickerProps { evaluatedColorValue?: string; autoFocus?: boolean; isOpen?: boolean; + placeholderText?: string; portalContainer?: HTMLElement; } @@ -312,7 +313,7 @@ const POPOVER_MODFIER = { const ColorPickerComponent = React.forwardRef( (props: ColorPickerProps, containerRef: any) => { - const { isOpen: isOpenProp = false } = props; + const { isOpen: isOpenProp = false, placeholderText } = props; const popupRef = useRef(null); const inputGroupRef = useRef(null); // isClick is used to track whether the input field is in focus by mouse click or by keyboard @@ -528,7 +529,7 @@ const ColorPickerComponent = React.forwardRef( } onChange={handleChangeColor} onClick={handleInputClick} - placeholder="enter color name or hex" + placeholder={placeholderText || "enter color name or hex"} value={color} /> diff --git a/app/client/src/widgets/ChartWidget/component/index.tsx b/app/client/src/widgets/ChartWidget/component/index.tsx index de01dc7d20..c8bde55f49 100644 --- a/app/client/src/widgets/ChartWidget/component/index.tsx +++ b/app/client/src/widgets/ChartWidget/component/index.tsx @@ -117,6 +117,7 @@ class ChartComponent extends React.Component { getChartData = () => { const chartData: AllChartData = this.props.chartData; const dataLength = Object.keys(chartData).length; + const chartType = this.props.chartType; // if datalength is zero, just pass a empty datum if (dataLength === 0) { @@ -130,6 +131,7 @@ class ChartComponent extends React.Component { const firstKey = Object.keys(chartData)[0] as string; let data = get(chartData, `${firstKey}.data`, []) as ChartDataPoint[]; + const color = chartData[firstKey] && chartData[firstKey].color; if (!Array.isArray(data)) { data = []; @@ -148,6 +150,12 @@ class ChartComponent extends React.Component { return { label: item.x, value: item.y, + color: + chartType === "PIE_CHART" + ? "" + : color + ? color + : this.props.primaryColor, }; }); }; @@ -221,7 +229,7 @@ class ChartComponent extends React.Component { getChartDataset = (chartData: AllChartData) => { const categories: string[] = this.getChartCategoriesMultiSeries(chartData); - const dataset = Object.keys(chartData).map((key: string) => { + const dataset = Object.keys(chartData).map((key: string, index) => { const item = get(chartData, `${key}`); const seriesChartData: Array { >> = this.getSeriesChartData(get(item, "data", []), categories); return { seriesName: item.seriesName, + color: item.color + ? item.color + : index === 0 + ? this.props.primaryColor + : "", data: seriesChartData, }; }); diff --git a/app/client/src/widgets/ChartWidget/constants.ts b/app/client/src/widgets/ChartWidget/constants.ts index 5465a2a770..8eeeb271c1 100644 --- a/app/client/src/widgets/ChartWidget/constants.ts +++ b/app/client/src/widgets/ChartWidget/constants.ts @@ -15,6 +15,7 @@ export interface ChartDataPoint { export interface ChartData { seriesName?: string; data: ChartDataPoint[]; + color?: string; } export interface CustomFusionChartConfig {