Allow to change order of legend items (getredash#5021)

* Allow to change order of legend items * Update tests
Zach-77 · Jul 13, 2020 · 81e7c72 · 81e7c72
1 parent 328f0f3
commit 81e7c72
Show file tree

Hide file tree

Showing 14 changed files with 117 additions and 54 deletions.
diff --git a/viz-lib/src/visualizations/chart/Editor/GeneralSettings.jsx b/viz-lib/src/visualizations/chart/Editor/GeneralSettings.jsx
@@ -173,23 +173,42 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
       )}
 
       {!includes(["custom", "heatmap"], options.globalSeriesType) && (
-        <Section>
-          <Select
-            label="Legend Placement"
-            data-test="Chart.LegendPlacement"
-            value={options.legend.enabled ? options.legend.placement : "hidden"}
-            onChange={handleLegendPlacementChange}>
-            <Select.Option value="hidden" data-test="Chart.LegendPlacement.HideLegend">
-              Hide legend
-            </Select.Option>
-            <Select.Option value="auto" data-test="Chart.LegendPlacement.Auto">
-              Right
-            </Select.Option>
-            <Select.Option value="below" data-test="Chart.LegendPlacement.Below">
-              Bottom
-            </Select.Option>
-          </Select>
-        </Section>
+        <React.Fragment>
+          <Section>
+            <Select
+              label="Legend Placement"
+              data-test="Chart.LegendPlacement"
+              value={options.legend.enabled ? options.legend.placement : "hidden"}
+              onChange={handleLegendPlacementChange}>
+              <Select.Option value="hidden" data-test="Chart.LegendPlacement.HideLegend">
+                Hide legend
+              </Select.Option>
+              <Select.Option value="auto" data-test="Chart.LegendPlacement.Auto">
+                Right
+              </Select.Option>
+              <Select.Option value="below" data-test="Chart.LegendPlacement.Below">
+                Bottom
+              </Select.Option>
+            </Select>
+          </Section>
+
+          {options.legend.enabled && (
+            <Section>
+              <Select
+                label="Legend Items Order"
+                data-test="Chart.LegendItemsOrder"
+                value={options.legend.traceorder}
+                onChange={traceorder => onOptionsChange({ legend: { traceorder } })}>
+                <Select.Option value="normal" data-test="Chart.LegendItemsOrder.Normal">
+                  Normal
+                </Select.Option>
+                <Select.Option value="reversed" data-test="Chart.LegendItemsOrder.Reversed">
+                  Reversed
+                </Select.Option>
+              </Select>
+            </Section>
+          )}
+        </React.Fragment>
       )}
 
       {includes(["box"], options.globalSeriesType) && (

diff --git a/viz-lib/src/visualizations/chart/getOptions.js b/viz-lib/src/visualizations/chart/getOptions.js
@@ -4,7 +4,7 @@ import { visualizationsSettings } from "@/visualizations/visualizationsSettings"
 const DEFAULT_OPTIONS = {
   globalSeriesType: "column",
   sortX: true,
-  legend: { enabled: true, placement: "auto" },
+  legend: { enabled: true, placement: "auto", traceorder: "normal" },
   yAxis: [{ type: "linear" }, { type: "linear", opposite: true }],
   xAxis: { type: "-", labels: { enabled: true } },
   error_y: { type: "data", visible: true },

diff --git a/viz-lib/src/visualizations/chart/plotly/applyLayoutFixes.js b/viz-lib/src/visualizations/chart/plotly/applyLayoutFixes.js
@@ -1,4 +1,4 @@
-import { find, pick, reduce } from "lodash";
+import { find, pick, extend } from "lodash";
 
 function fixLegendContainer(plotlyElement) {
   const legend = plotlyElement.querySelector(".legend");
@@ -20,15 +20,15 @@ function placeLegendNextToPlot(plotlyElement, layout, updatePlot) {
     prop => prop in plotlyElement.style
   );
 
-  layout.legend = {
+  layout.legend = extend({}, layout.legend, {
     orientation: "v",
     // vertical legend will be rendered properly, so just place it to the right
     // side of plot
     y: 1,
     x: 1,
     xanchor: "left",
     yanchor: "top",
-  };
+  });
 
   const legend = plotlyElement.querySelector(".legend");
   if (legend) {
@@ -56,7 +56,7 @@ function placeLegendBelowPlot(plotlyElement, layout, updatePlot) {
   // plot height), re-render plot again and offset legend to the space under
   // the plot.
   // Related issue: https://github.com/plotly/plotly.js/issues/1199
-  layout.legend = {
+  layout.legend = extend({}, layout.legend, {
     orientation: "h",
     // locate legend inside of plot area - otherwise plotly will preserve
     // some amount of space under the plot; also this will limit legend height
@@ -65,7 +65,7 @@ function placeLegendBelowPlot(plotlyElement, layout, updatePlot) {
     x: 0,
     xanchor: "left",
     yanchor: "bottom",
-  };
+  });
 
   // set `overflow: visible` to svg containing legend because later we will
   // position legend outside of it

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/box-single-axis.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/box-single-axis.json
@@ -4,7 +4,10 @@
       "globalSeriesType": "box",
       "xAxis": { "type": "-", "labels": { "enabled": true } },
       "yAxis": [{ "type": "linear" }, { "type": "linear", "opposite": true }],
-      "series": { "stacking": null, "error_y": { "type": "data", "visible": true } }
+      "series": { "stacking": null, "error_y": { "type": "data", "visible": true } },
+      "legend": {
+        "traceorder": "normal"
+      }
     },
     "series": [{ "name": "a" }]
   },
@@ -15,6 +18,9 @@
       "height": 300,
       "autosize": false,
       "showlegend": true,
+      "legend": {
+        "traceorder": "normal"
+      },
       "boxmode": "group",
       "boxgroupgap": 0.5,
       "xaxis": {

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/box-with-second-axis.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/box-with-second-axis.json
@@ -4,7 +4,10 @@
       "globalSeriesType": "box",
       "xAxis": { "type": "-", "labels": { "enabled": true } },
       "yAxis": [{ "type": "linear" }, { "type": "linear", "opposite": true }],
-      "series": { "stacking": null, "error_y": { "type": "data", "visible": true } }
+      "series": { "stacking": null, "error_y": { "type": "data", "visible": true } },
+      "legend": {
+        "traceorder": "normal"
+      }
     },
     "series": [{ "name": "a" }, { "name": "b", "yaxis": "y2" }]
   },
@@ -15,6 +18,9 @@
       "height": 300,
       "autosize": false,
       "showlegend": true,
+      "legend": {
+        "traceorder": "normal"
+      },
       "boxmode": "group",
       "boxgroupgap": 0.5,
       "xaxis": {

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/default-single-axis.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/default-single-axis.json
@@ -4,7 +4,10 @@
       "globalSeriesType": "column",
       "xAxis": { "type": "-", "labels": { "enabled": true } },
       "yAxis": [{ "type": "linear" }, { "type": "linear", "opposite": true }],
-      "series": { "stacking": null, "error_y": { "type": "data", "visible": true } }
+      "series": { "stacking": null, "error_y": { "type": "data", "visible": true } },
+      "legend": {
+        "traceorder": "normal"
+      }
     },
     "series": [{ "name": "a" }]
   },
@@ -15,6 +18,9 @@
       "height": 300,
       "autosize": false,
       "showlegend": true,
+      "legend": {
+        "traceorder": "normal"
+      },
       "xaxis": {
         "automargin": true,
         "showticklabels": true,

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/default-with-second-axis.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/default-with-second-axis.json
@@ -4,7 +4,10 @@
       "globalSeriesType": "column",
       "xAxis": { "type": "-", "labels": { "enabled": true } },
       "yAxis": [{ "type": "linear" }, { "type": "linear", "opposite": true }],
-      "series": { "stacking": null, "error_y": { "type": "data", "visible": true } }
+      "series": { "stacking": null, "error_y": { "type": "data", "visible": true } },
+      "legend": {
+        "traceorder": "normal"
+      }
     },
     "series": [{ "name": "a" }, { "name": "b", "yaxis": "y2" }]
   },
@@ -15,6 +18,9 @@
       "height": 300,
       "autosize": false,
       "showlegend": true,
+      "legend": {
+        "traceorder": "normal"
+      },
       "xaxis": {
         "automargin": true,
         "showticklabels": true,

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/default-with-stacking.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/default-with-stacking.json
@@ -2,7 +2,7 @@
   "input": {
     "options": {
       "globalSeriesType": "column",
-      "legend": { "enabled": false },
+      "legend": { "enabled": false, "traceorder": "normal" },
       "xAxis": { "type": "-", "labels": { "enabled": true } },
       "yAxis": [{ "type": "linear" }, { "type": "linear", "opposite": true }],
       "series": { "stacking": "stack", "error_y": { "type": "data", "visible": true } }
@@ -16,6 +16,9 @@
       "height": 300,
       "autosize": false,
       "showlegend": false,
+      "legend": {
+        "traceorder": "normal"
+      },
       "barmode": "relative",
       "xaxis": {
         "automargin": true,

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/default-without-legend.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/default-without-legend.json
@@ -2,7 +2,7 @@
   "input": {
     "options": {
       "globalSeriesType": "column",
-      "legend": { "enabled": false },
+      "legend": { "enabled": false, "traceorder": "normal" },
       "xAxis": { "type": "-", "labels": { "enabled": true } },
       "yAxis": [{ "type": "linear" }, { "type": "linear", "opposite": true }],
       "series": { "stacking": null, "error_y": { "type": "data", "visible": true } }
@@ -16,6 +16,9 @@
       "height": 300,
       "autosize": false,
       "showlegend": false,
+      "legend": {
+        "traceorder": "normal"
+      },
       "xaxis": {
         "automargin": true,
         "showticklabels": true,

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/pie-multiple-series.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/pie-multiple-series.json
@@ -2,13 +2,12 @@
   "input": {
     "options": {
       "globalSeriesType": "pie",
-      "textFormat": ""
+      "textFormat": "",
+      "legend": {
+        "traceorder": "normal"
+      }
     },
-    "series": [
-      { "name": "a" },
-      { "name": "b" },
-      { "name": "c" }
-    ]
+    "series": [{ "name": "a" }, { "name": "b" }, { "name": "c" }]
   },
   "output": {
     "layout": {
@@ -17,6 +16,9 @@
       "height": 300,
       "autosize": false,
       "showlegend": true,
+      "legend": {
+        "traceorder": "normal"
+      },
       "annotations": [
         {
           "x": 0.24,

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/pie-without-annotations.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/pie-without-annotations.json
@@ -2,11 +2,12 @@
   "input": {
     "options": {
       "globalSeriesType": "pie",
-      "textFormat": "{{ @@name }}"
+      "textFormat": "{{ @@name }}",
+      "legend": {
+        "traceorder": "normal"
+      }
     },
-    "series": [
-      { "name": "a" }
-    ]
+    "series": [{ "name": "a" }]
   },
   "output": {
     "layout": {
@@ -15,6 +16,9 @@
       "height": 300,
       "autosize": false,
       "showlegend": true,
+      "legend": {
+        "traceorder": "normal"
+      },
       "annotations": []
     }
   }

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/pie.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/pie.json
@@ -2,11 +2,12 @@
   "input": {
     "options": {
       "globalSeriesType": "pie",
-      "textFormat": ""
+      "textFormat": "",
+      "legend": {
+        "traceorder": "normal"
+      }
     },
-    "series": [
-      { "name": "a" }
-    ]
+    "series": [{ "name": "a" }]
   },
   "output": {
     "layout": {
@@ -15,6 +16,9 @@
       "height": 300,
       "autosize": false,
       "showlegend": true,
+      "legend": {
+        "traceorder": "normal"
+      },
       "annotations": [
         {
           "x": 0.49,

diff --git a/viz-lib/src/visualizations/chart/plotly/prepareLayout.js b/viz-lib/src/visualizations/chart/plotly/prepareLayout.js
@@ -1,4 +1,4 @@
-import { filter, has, isObject, isUndefined, map } from "lodash";
+import { isObject, isUndefined, filter, map } from "lodash";
 import { getPieDimensions } from "./preparePieData";
 import { calculateAxisRange } from "./utils";
 
@@ -110,7 +110,10 @@ export default function prepareLayout(element, options, data) {
     width: Math.max(5, Math.floor(element.offsetWidth)),
     height: Math.max(5, Math.floor(element.offsetHeight)),
     autosize: false,
-    showlegend: has(options, "legend") ? options.legend.enabled : true,
+    showlegend: options.legend.enabled,
+    legend: {
+      traceorder: options.legend.traceorder,
+    },
   };
 
   switch (options.globalSeriesType) {