From b36314d03f97db2a30681d5f40157c932e280d8b Mon Sep 17 00:00:00 2001
From: Oscar Kilhed <oscar.kilhed@grafana.com>
Date: Tue, 2 Mar 2021 13:18:03 +0100
Subject: [PATCH] PieChart: Add color changing options to pie chart (#31588)

* Allow changing of series color for PieChart

* Use useTheme hook

* Remove duplicate import
---
 .../src/utils/OptionsUIBuilders.ts            |  1 +
 .../src/components/PieChart/PieChart.tsx      | 19 +++++-
 .../plugins/panel/piechart/PieChartPanel.tsx  | 65 +++++++++++--------
 3 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/packages/grafana-data/src/utils/OptionsUIBuilders.ts b/packages/grafana-data/src/utils/OptionsUIBuilders.ts
index 0c63d9f9292..cd62939c409 100644
--- a/packages/grafana-data/src/utils/OptionsUIBuilders.ts
+++ b/packages/grafana-data/src/utils/OptionsUIBuilders.ts
@@ -186,6 +186,7 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
   ) {
     return this.addCustomEditor({
       ...config,
+      defaultValue: config.defaultValue ?? [],
       id: config.path,
       editor: standardEditorsRegistry.get('multi-select').editor as any,
     });
diff --git a/packages/grafana-ui/src/components/PieChart/PieChart.tsx b/packages/grafana-ui/src/components/PieChart/PieChart.tsx
index 8d93f8ce618..63bca6fdb48 100644
--- a/packages/grafana-ui/src/components/PieChart/PieChart.tsx
+++ b/packages/grafana-ui/src/components/PieChart/PieChart.tsx
@@ -31,6 +31,7 @@ interface SvgProps {
   pieType: PieChartType;
   displayLabels?: PieChartLabels[];
   useGradients?: boolean;
+  onSeriesColorChange?: (label: string, color: string) => void;
 }
 export interface Props extends SvgProps {
   legendOptions?: PieChartLegendOptions;
@@ -52,7 +53,14 @@ const defaultLegendOptions: PieChartLegendOptions = {
   values: [PieChartLegendValues.Percent],
 };
 
-export const PieChart: FC<Props> = ({ values, legendOptions = defaultLegendOptions, width, height, ...restProps }) => {
+export const PieChart: FC<Props> = ({
+  values,
+  legendOptions = defaultLegendOptions,
+  onSeriesColorChange,
+  width,
+  height,
+  ...restProps
+}) => {
   const getLegend = (values: DisplayValue[], legendOptions: PieChartLegendOptions) => {
     if (legendOptions.displayMode === LegendDisplayMode.Hidden) {
       return undefined;
@@ -65,7 +73,7 @@ export const PieChart: FC<Props> = ({ values, legendOptions = defaultLegendOptio
         color: value.color ?? FALLBACK_COLOR,
         yAxis: 1,
         getDisplayValues: () => {
-          const valuesToShow = legendOptions.values;
+          const valuesToShow = legendOptions.values ?? [];
           let displayValues = [];
 
           if (valuesToShow.includes(PieChartLegendValues.Value)) {
@@ -90,7 +98,12 @@ export const PieChart: FC<Props> = ({ values, legendOptions = defaultLegendOptio
     });
 
     return (
-      <VizLegend items={legendItems} placement={legendOptions.placement} displayMode={legendOptions.displayMode} />
+      <VizLegend
+        items={legendItems}
+        onSeriesColorChange={onSeriesColorChange}
+        placement={legendOptions.placement}
+        displayMode={legendOptions.displayMode}
+      />
     );
   };
 
diff --git a/public/app/plugins/panel/piechart/PieChartPanel.tsx b/public/app/plugins/panel/piechart/PieChartPanel.tsx
index 08df09bcf5f..cc341fb90ed 100644
--- a/public/app/plugins/panel/piechart/PieChartPanel.tsx
+++ b/public/app/plugins/panel/piechart/PieChartPanel.tsx
@@ -1,33 +1,46 @@
-import React, { PureComponent } from 'react';
-import { config } from 'app/core/config';
-import { PieChart } from '@grafana/ui';
+import React, { useCallback } from 'react';
+import { PieChart, useTheme } from '@grafana/ui';
 import { PieChartOptions } from './types';
 import { getFieldDisplayValues, PanelProps } from '@grafana/data';
+import { changeSeriesColorConfigFactory } from '../timeseries/overrides/colorSeriesConfigFactory';
 
 interface Props extends PanelProps<PieChartOptions> {}
 
-export class PieChartPanel extends PureComponent<Props> {
-  render() {
-    const { width, height, options, data, replaceVariables, fieldConfig, timeZone } = this.props;
+export const PieChartPanel: React.FC<Props> = ({
+  width,
+  height,
+  options,
+  data,
+  onFieldConfigChange,
+  replaceVariables,
+  fieldConfig,
+  timeZone,
+}) => {
+  const onSeriesColorChange = useCallback(
+    (label: string, color: string) => {
+      onFieldConfigChange(changeSeriesColorConfigFactory(label, color, fieldConfig));
+    },
+    [fieldConfig, onFieldConfigChange]
+  );
 
-    const values = getFieldDisplayValues({
-      fieldConfig,
-      reduceOptions: options.reduceOptions,
-      data: data.series,
-      theme: config.theme,
-      replaceVariables: replaceVariables,
-      timeZone,
-    }).map((v) => v.display);
+  const values = getFieldDisplayValues({
+    fieldConfig,
+    reduceOptions: options.reduceOptions,
+    data: data.series,
+    theme: useTheme(),
+    replaceVariables: replaceVariables,
+    timeZone,
+  }).map((v) => v.display);
 
-    return (
-      <PieChart
-        width={width}
-        height={height}
-        values={values}
-        pieType={options.pieType}
-        displayLabels={options.displayLabels}
-        legendOptions={options.legend}
-      />
-    );
-  }
-}
+  return (
+    <PieChart
+      width={width}
+      height={height}
+      values={values}
+      onSeriesColorChange={onSeriesColorChange}
+      pieType={options.pieType}
+      displayLabels={options.displayLabels}
+      legendOptions={options.legend}
+    />
+  );
+};