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

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

@@ -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 legendItems = displayValues
-    const hidden = value.field.custom.hideFrom.viz;
+    // Since the pie chart is always sorted, let's sort the legend as well.
-    const display = value.display;
+    .sort((a, b) => b.display.numeric - a.display.numeric)
-    return {
+    .map<VizLegendItem>((value, idx) => {
-      label: display.title ?? '',
+      const hidden = value.field.custom.hideFrom.viz;
-      color: display.color ?? FALLBACK_COLOR,
+      const display = value.display;
-      yAxis: 1,
+      return {
-      disabled: hidden,
+        label: display.title ?? '',
-      getItemKey: () => (display.title ?? '') + idx,
+        color: display.color ?? FALLBACK_COLOR,
-      getDisplayValues: () => {
+        yAxis: 1,
-        const valuesToShow = legendOptions.values ?? [];
+        disabled: hidden,
-        let displayValues = [];
+        getItemKey: () => (display.title ?? '') + idx,
+        getDisplayValues: () => {
+          const valuesToShow = legendOptions.values ?? [];
+          let displayValues = [];
 
-        if (valuesToShow.includes(PieChartLegendValues.Value)) {
+          if (valuesToShow.includes(PieChartLegendValues.Value)) {
-          displayValues.push({ numeric: display.numeric, text: formattedValueToString(display), title: 'Value' });
+            displayValues.push({ numeric: display.numeric, text: formattedValueToString(display), title: 'Value' });
-        }
+          }
 
-        if (valuesToShow.includes(PieChartLegendValues.Percent)) {
+          if (valuesToShow.includes(PieChartLegendValues.Percent)) {
-          const fractionOfTotal = hidden ? 0 : display.numeric / total;
+            const fractionOfTotal = hidden ? 0 : display.numeric / total;
-          const percentOfTotal = fractionOfTotal * 100;
+            const percentOfTotal = fractionOfTotal * 100;
 
-          displayValues.push({
+            displayValues.push({
-            numeric: fractionOfTotal,
+              numeric: fractionOfTotal,
-            percent: percentOfTotal,
+              percent: percentOfTotal,
-            text: hidden ? '-' : percentOfTotal.toFixed(0) + '%',
+              text: hidden ? '-' : percentOfTotal.toFixed(0) + '%',
-            title: valuesToShow.length > 1 ? 'Percent' : undefined,
+              title: valuesToShow.length > 1 ? 'Percent' : undefined,
-          });
+            });
-        }
+          }
 
-        return displayValues;
+          return displayValues;
-      },
+        },
-    };
+      };
-  });
+    });
 
   return (
     <VizLegend

public/app/plugins/panel/stat/types.ts

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