From 0d33b5742809f4438baa08e513861ffe0bed9c41 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 23 Jun 2021 10:53:58 -0400
Subject: [PATCH] PieChart: sort legend descending, update placeholder to show
 default field display values limit (#36062) (#36081)

(cherry picked from commit 15171ffa3be29481f98937635973a5d724ae1a63)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
---
 .../plugins/panel/piechart/PieChartPanel.tsx  | 61 ++++++++++---------
 public/app/plugins/panel/stat/types.ts        |  2 +-
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/public/app/plugins/panel/piechart/PieChartPanel.tsx b/public/app/plugins/panel/piechart/PieChartPanel.tsx
index 42118ea62bc..7c9a5814241 100644
--- a/public/app/plugins/panel/piechart/PieChartPanel.tsx
+++ b/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 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
diff --git a/public/app/plugins/panel/stat/types.ts b/public/app/plugins/panel/stat/types.ts
index b32f3af9db5..b43c6248609 100644
--- a/public/app/plugins/panel/stat/types.ts
+++ b/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,