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

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}
         />
       </StyledOptionControlWrapper>
+      {!isPieChart && (
+        <>
+          <StyledLabel>Series Color</StyledLabel>
+          <StyledOptionControlWrapper orientation={"HORIZONTAL"}>
+            <ColorPickerComponent
+              changeColor={(
+                event: React.ChangeEvent<HTMLTextAreaElement> | 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
+            />
+          </StyledOptionControlWrapper>
+        </>
+      )}
       <StyledLabel>Series Data</StyledLabel>
       <StyledDynamicInput
         className={"t--property-control-chart-series-data-control"}
@@ -215,6 +240,7 @@ class ChartDataControl extends BaseControl<ControlProps> {
           deleteOption={this.deleteOption}
           evaluated={get(evaluatedValue, `${firstKey}`)}
           index={firstKey}
+          isPieChart
           item={data}
           length={1}
           theme={this.props.theme}

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<HTMLDivElement>(null);
     const inputGroupRef = useRef<HTMLInputElement>(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}
           />
 

app/client/src/widgets/ChartWidget/component/index.tsx

@@ -117,6 +117,7 @@ class ChartComponent extends React.Component<ChartComponentProps> {
   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<ChartComponentProps> {
 
     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<ChartComponentProps> {
       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<ChartComponentProps> {
   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<Record<
@@ -230,6 +238,11 @@ class ChartComponent extends React.Component<ChartComponentProps> {
       >> = this.getSeriesChartData(get(item, "data", []), categories);
       return {
         seriesName: item.seriesName,
+        color: item.color
+          ? item.color
+          : index === 0
+          ? this.props.primaryColor
+          : "",
         data: seriesChartData,
       };
     });

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 {