mirror of
https://github.com/grafana/grafana.git
synced 2025-02-11 16:15:42 -06:00
PieChart: sort legend descending, update placeholder to show default field display values limit (#36062)
This commit is contained in:
parent
d427b57c0e
commit
15171ffa3b
@ -80,39 +80,42 @@ function getLegend(props: Props, displayValues: FieldDisplay[]) {
|
||||
})
|
||||
.reduce((acc, item) => item.display.numeric + acc, 0);
|
||||
|
||||
const legendItems = displayValues.map<VizLegendItem>((value, idx) => {
|
||||
const hidden = value.field.custom.hideFrom.viz;
|
||||
const display = value.display;
|
||||
return {
|
||||
label: display.title ?? '',
|
||||
color: display.color ?? FALLBACK_COLOR,
|
||||
yAxis: 1,
|
||||
disabled: hidden,
|
||||
getItemKey: () => (display.title ?? '') + idx,
|
||||
getDisplayValues: () => {
|
||||
const valuesToShow = legendOptions.values ?? [];
|
||||
let displayValues = [];
|
||||
const legendItems = displayValues
|
||||
// Since the pie chart is always sorted, let's sort the legend as well.
|
||||
.sort((a, b) => b.display.numeric - a.display.numeric)
|
||||
.map<VizLegendItem>((value, idx) => {
|
||||
const hidden = value.field.custom.hideFrom.viz;
|
||||
const display = value.display;
|
||||
return {
|
||||
label: display.title ?? '',
|
||||
color: display.color ?? FALLBACK_COLOR,
|
||||
yAxis: 1,
|
||||
disabled: hidden,
|
||||
getItemKey: () => (display.title ?? '') + idx,
|
||||
getDisplayValues: () => {
|
||||
const valuesToShow = legendOptions.values ?? [];
|
||||
let displayValues = [];
|
||||
|
||||
if (valuesToShow.includes(PieChartLegendValues.Value)) {
|
||||
displayValues.push({ numeric: display.numeric, text: formattedValueToString(display), title: 'Value' });
|
||||
}
|
||||
if (valuesToShow.includes(PieChartLegendValues.Value)) {
|
||||
displayValues.push({ numeric: display.numeric, text: formattedValueToString(display), title: 'Value' });
|
||||
}
|
||||
|
||||
if (valuesToShow.includes(PieChartLegendValues.Percent)) {
|
||||
const fractionOfTotal = hidden ? 0 : display.numeric / total;
|
||||
const percentOfTotal = fractionOfTotal * 100;
|
||||
if (valuesToShow.includes(PieChartLegendValues.Percent)) {
|
||||
const fractionOfTotal = hidden ? 0 : display.numeric / total;
|
||||
const percentOfTotal = fractionOfTotal * 100;
|
||||
|
||||
displayValues.push({
|
||||
numeric: fractionOfTotal,
|
||||
percent: percentOfTotal,
|
||||
text: hidden ? '-' : percentOfTotal.toFixed(0) + '%',
|
||||
title: valuesToShow.length > 1 ? 'Percent' : undefined,
|
||||
});
|
||||
}
|
||||
displayValues.push({
|
||||
numeric: fractionOfTotal,
|
||||
percent: percentOfTotal,
|
||||
text: hidden ? '-' : percentOfTotal.toFixed(0) + '%',
|
||||
title: valuesToShow.length > 1 ? 'Percent' : undefined,
|
||||
});
|
||||
}
|
||||
|
||||
return displayValues;
|
||||
},
|
||||
};
|
||||
});
|
||||
return displayValues;
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<VizLegend
|
||||
|
@ -49,7 +49,7 @@ export function addStandardDataReduceOptions<T extends SingleStatBaseOptions>(
|
||||
description: 'Max number of rows to display',
|
||||
category: valueOptionsCategory,
|
||||
settings: {
|
||||
placeholder: '5000',
|
||||
placeholder: '25',
|
||||
integer: true,
|
||||
min: 1,
|
||||
max: 5000,
|
||||
|
Loading…
Reference in New Issue
Block a user