PieChart: sort legend descending, update placeholder to show default field display values limit (#36062)

This commit is contained in:
Ashley Harrison 2021-06-23 15:32:37 +01:00 committed by GitHub
parent d427b57c0e
commit 15171ffa3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 30 deletions

View File

@ -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

View File

@ -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,