IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

PieChart: Add color changing options to pie chart (#31588)

Browse Source 
* Allow changing of series color for PieChart

* Use useTheme hook

* Remove duplicate import
This commit is contained in:
Oscar Kilhed 2021-03-02 13:18:03 +01:00 committed by GitHub
parent 6a07a0fe93
commit b36314d03f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-data/src/utils/OptionsUIBuilders.ts
View File

@ -186,6 +186,7 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
) { ) {
return this.addCustomEditor({ return this.addCustomEditor({
...config, ...config,
defaultValue: config.defaultValue ?? [],
id: config.path, id: config.path,
editor: standardEditorsRegistry.get('multi-select').editor as any, editor: standardEditorsRegistry.get('multi-select').editor as any,
}); });

19
packages/grafana-ui/src/components/PieChart/PieChart.tsx
View File

@ -31,6 +31,7 @@ interface SvgProps {
pieType: PieChartType; pieType: PieChartType;
displayLabels?: PieChartLabels[]; displayLabels?: PieChartLabels[];
useGradients?: boolean; useGradients?: boolean;
onSeriesColorChange?: (label: string, color: string) => void;
} }
export interface Props extends SvgProps { export interface Props extends SvgProps {
legendOptions?: PieChartLegendOptions; legendOptions?: PieChartLegendOptions;
@ -52,7 +53,14 @@ const defaultLegendOptions: PieChartLegendOptions = {
values: [PieChartLegendValues.Percent], 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) => { const getLegend = (values: DisplayValue[], legendOptions: PieChartLegendOptions) => {
if (legendOptions.displayMode === LegendDisplayMode.Hidden) { if (legendOptions.displayMode === LegendDisplayMode.Hidden) {
return undefined; return undefined;
@ -65,7 +73,7 @@ export const PieChart: FC<Props> = ({ values, legendOptions = defaultLegendOptio
color: value.color ?? FALLBACK_COLOR, color: value.color ?? FALLBACK_COLOR,
yAxis: 1, yAxis: 1,
getDisplayValues: () => { getDisplayValues: () => {
const valuesToShow = legendOptions.values; const valuesToShow = legendOptions.values ?? [];
let displayValues = []; let displayValues = [];
if (valuesToShow.includes(PieChartLegendValues.Value)) { if (valuesToShow.includes(PieChartLegendValues.Value)) {
@ -90,7 +98,12 @@ export const PieChart: FC<Props> = ({ values, legendOptions = defaultLegendOptio
}); });
return ( return (
<VizLegend items={legendItems} placement={legendOptions.placement} displayMode={legendOptions.displayMode} /> <VizLegend
items={legendItems}
onSeriesColorChange={onSeriesColorChange}
placement={legendOptions.placement}
displayMode={legendOptions.displayMode}
/>
); );
}; };

65
public/app/plugins/panel/piechart/PieChartPanel.tsx
View File

@ -1,33 +1,46 @@
import React, { PureComponent } from 'react'; import React, { useCallback } from 'react';
import { config } from 'app/core/config'; import { PieChart, useTheme } from '@grafana/ui';
import { PieChart } from '@grafana/ui';
import { PieChartOptions } from './types'; import { PieChartOptions } from './types';
import { getFieldDisplayValues, PanelProps } from '@grafana/data'; import { getFieldDisplayValues, PanelProps } from '@grafana/data';
import { changeSeriesColorConfigFactory } from '../timeseries/overrides/colorSeriesConfigFactory';
interface Props extends PanelProps<PieChartOptions> {} interface Props extends PanelProps<PieChartOptions> {}
export class PieChartPanel extends PureComponent<Props> { export const PieChartPanel: React.FC<Props> = ({
render() { width,
const { width, height, options, data, replaceVariables, fieldConfig, timeZone } = this.props; height,
options,
data,
onFieldConfigChange,
replaceVariables,
fieldConfig,
timeZone,
}) => {
const onSeriesColorChange = useCallback(
(label: string, color: string) => {
onFieldConfigChange(changeSeriesColorConfigFactory(label, color, fieldConfig));
},
[fieldConfig, onFieldConfigChange]
);
const values = getFieldDisplayValues({ const values = getFieldDisplayValues({
fieldConfig, fieldConfig,
reduceOptions: options.reduceOptions, reduceOptions: options.reduceOptions,
data: data.series, data: data.series,
theme: config.theme, theme: useTheme(),
replaceVariables: replaceVariables, replaceVariables: replaceVariables,
timeZone, timeZone,
}).map((v) => v.display); }).map((v) => v.display);
return ( return (
<PieChart <PieChart
width={width} width={width}
height={height} height={height}
values={values} values={values}
pieType={options.pieType} onSeriesColorChange={onSeriesColorChange}
displayLabels={options.displayLabels} pieType={options.pieType}
legendOptions={options.legend} displayLabels={options.displayLabels}
/> legendOptions={options.legend}
); />
} );
} };