PieChart: Update text color and minor changes (#31546)

devenv/dev-dashboards/panel-piechart/panel_test_piechart.json

@@ -56,13 +56,8 @@
         "displayLabels": [
           "name"
         ],        
-        "labelOptions": {
-          "showName": true,
-          "showPercent": false,
-          "showValue": false
-        },
         "legend": {
-          "displayColumns": [],
+          "values": [],
           "displayMode": "list",
           "placement": "right"
         },
@@ -131,13 +126,8 @@
           "name",
           "percent"
         ],        
-        "labelOptions": {
-          "showName": true,
-          "showPercent": true,
-          "showValue": false
-        },
         "legend": {
-          "displayColumns": [
+          "values": [
             "percent"
           ],
           "displayMode": "list",
@@ -205,13 +195,8 @@
         "displayLabels": [
           "name"
         ],        
-        "labelOptions": {
-          "showName": true,
-          "showPercent": false,
-          "showValue": false
-        },
         "legend": {
-          "displayColumns": [],
+          "values": [],
           "displayMode": "hidden",
           "placement": "right"
         },
@@ -277,13 +262,8 @@
         "displayLabels": [
           "percent"
         ],      
-        "labelOptions": {
-          "showName": false,
-          "showPercent": true,
-          "showValue": false
-        },
         "legend": {
-          "displayColumns": [
+          "values": [
             "percent"
           ],
           "displayMode": "table",
@@ -351,13 +331,8 @@
         "displayLabels": [
           "value"
         ],        
-        "labelOptions": {
-          "showName": false,
-          "showPercent": false,
-          "showValue": true
-        },
         "legend": {
-          "displayColumns": [
+          "values": [
             "value"
           ],
           "displayMode": "table",
@@ -425,13 +400,8 @@
         "displayLabels": [
           "name"
         ],        
-        "labelOptions": {
-          "showName": true,
-          "showPercent": false,
-          "showValue": false
-        },
         "legend": {
-          "displayColumns": [],
+          "values": [],
           "displayMode": "list",
           "placement": "bottom"
         },
@@ -495,13 +465,8 @@
       "id": 10,
       "options": {
         "displayLabels": [],        
-        "labelOptions": {
-          "showName": true,
-          "showPercent": false,
-          "showValue": false
-        },
         "legend": {
-          "displayColumns": ["percent", "value"],
+          "values": ["percent", "value"],
           "displayMode": "table",
           "placement": "bottom"
         },

packages/grafana-ui/src/components/PieChart/PieChart.tsx

@@ -19,7 +19,7 @@ export enum PieChartLabels {
   Percent = 'percent',
 }
 
-export enum LegendColumns {
+export enum PieChartLegendValues {
   Value = 'value',
   Percent = 'percent',
 }
@@ -42,14 +42,14 @@ export enum PieChartType {
 }
 
 export interface PieChartLegendOptions extends VizLegendOptions {
-  displayColumns: LegendColumns[];
+  values: PieChartLegendValues[];
 }
 
 const defaultLegendOptions: PieChartLegendOptions = {
   displayMode: LegendDisplayMode.List,
   placement: 'right',
   calcs: [],
-  displayColumns: [LegendColumns.Percent],
+  values: [PieChartLegendValues.Percent],
 };
 
 export const PieChart: FC<Props> = ({ values, legendOptions = defaultLegendOptions, width, height, ...restProps }) => {
@@ -65,20 +65,22 @@ export const PieChart: FC<Props> = ({ values, legendOptions = defaultLegendOptio
         color: value.color ?? FALLBACK_COLOR,
         yAxis: 1,
         getDisplayValues: () => {
+          const valuesToShow = legendOptions.values;
           let displayValues = [];
 
-          if (legendOptions.displayColumns.includes(LegendColumns.Value)) {
+          if (valuesToShow.includes(PieChartLegendValues.Value)) {
             displayValues.push({ numeric: value.numeric, text: formattedValueToString(value), title: 'Value' });
           }
 
-          if (legendOptions.displayColumns.includes(LegendColumns.Percent)) {
+          if (valuesToShow.includes(PieChartLegendValues.Percent)) {
             const fractionOfTotal = value.numeric / total;
             const percentOfTotal = fractionOfTotal * 100;
+
             displayValues.push({
               numeric: fractionOfTotal,
               percent: percentOfTotal,
               text: percentOfTotal.toFixed(0) + '%',
-              title: 'Percent',
+              title: valuesToShow.length > 1 ? 'Percent' : undefined,
             });
           }
 
@@ -192,6 +194,7 @@ export const PieChartSvg: FC<SvgProps> = ({
                         innerRadius={layout.innerRadius}
                         displayLabels={displayLabels}
                         total={total}
+                        color={theme.colors.text}
                       />
                     )}
                   </g>
@@ -216,7 +219,8 @@ const PieLabel: FC<{
   innerRadius: number;
   displayLabels: PieChartLabels[];
   total: number;
-}> = ({ arc, outerRadius, innerRadius, displayLabels, total }) => {
+  color: string;
+}> = ({ arc, outerRadius, innerRadius, displayLabels, total, color }) => {
   const labelRadius = innerRadius === 0 ? outerRadius / 6 : innerRadius;
   const [labelX, labelY] = getLabelPos(arc, outerRadius, labelRadius);
   const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.3;
@@ -232,7 +236,7 @@ const PieLabel: FC<{
   return (
     <g>
       <text
-        fill="white"
+        fill={color}
         x={labelX}
         y={labelY}
         dy=".33em"

packages/grafana-ui/src/components/index.ts

@@ -17,7 +17,13 @@ export { LoadingPlaceholder, LoadingPlaceholderProps } from './LoadingPlaceholde
 export { ColorPicker, SeriesColorPicker } from './ColorPicker/ColorPicker';
 export { SeriesColorPickerPopover, SeriesColorPickerPopoverWithTheme } from './ColorPicker/SeriesColorPickerPopover';
 export { EmptySearchResult } from './EmptySearchResult/EmptySearchResult';
-export { PieChart, PieChartType, PieChartLabels, PieChartLegendOptions } from './PieChart/PieChart';
+export {
+  PieChart,
+  PieChartType,
+  PieChartLabels,
+  PieChartLegendOptions,
+  PieChartLegendValues,
+} from './PieChart/PieChart';
 export { UnitPicker } from './UnitPicker/UnitPicker';
 export { StatsPicker } from './StatsPicker/StatsPicker';
 export { RefreshPicker, defaultIntervals } from './RefreshPicker/RefreshPicker';

public/app/plugins/panel/piechart/module.tsx

@@ -2,8 +2,7 @@ import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/dat
 import { PieChartPanel } from './PieChartPanel';
 import { PieChartOptions } from './types';
 import { addStandardDataReduceOptions } from '../stat/types';
-import { LegendDisplayMode, PieChartType } from '@grafana/ui';
+import { LegendDisplayMode, PieChartType, PieChartLabels, PieChartLegendValues } from '@grafana/ui';
-import { LegendColumns, PieChartLabels } from '@grafana/ui/src/components/PieChart/PieChart';
 
 export const plugin = new PanelPlugin<PieChartOptions>(PieChartPanel)
   .useFieldConfig({
@@ -76,11 +75,11 @@ export const plugin = new PanelPlugin<PieChartOptions>(PieChartPanel)
       })
       .addMultiSelect({
         name: 'Legend values',
-        path: 'legend.displayColumns',
+        path: 'legend.values',
         settings: {
           options: [
-            { value: LegendColumns.Percent, label: 'Percent' },
+            { value: PieChartLegendValues.Percent, label: 'Percent' },
-            { value: LegendColumns.Value, label: 'Value' },
+            { value: PieChartLegendValues.Value, label: 'Value' },
           ],
         },
         showIf: (c) => c.legend.displayMode !== LegendDisplayMode.Hidden,