Display trace legends in the order in which traces are given to Plot.ly.

For autotrace, this is the order in which traces are created from the data, which in turn is the order in the data.
For manual traces, this is the order of the traces.

Author: Jim Hague

src/module.ts

@@ -95,6 +95,7 @@ class PlotlyPanelCtrl extends MetricsPanelCtrl {
         showlegend: false,
         legend: {
           orientation: 'h',
+          traceorder: 'normal',
         },
         dragmode: 'lasso', // (enumerated: "zoom" | "pan" | "select" | "lasso" | "orbit" | "turntable" )
         hovermode: 'closest',

src/partials/tab_display.html

@@ -104,14 +104,24 @@ <h5 class="section-heading">Options</h5>
       on-change="ctrl.editor.onConfigChanged()"></gf-form-switch>
 
     <div class="gf-form" ng-if="ctrl.cfg.layout.showlegend">
-        <label class="gf-form-label width-7">- Orientation</label>
-        <div class="gf-form-select-wrapper max-width-14">
-          <select class="gf-form-input" ng-model="ctrl.cfg.layout.legend.orientation" ng-change="ctrl.onConfigChanged()">
-            <option value="h">Horizontal</option>
-            <option value="v">Vertical</option>
-          </select>
-        </div>
+      <label class="gf-form-label width-7">- Orientation</label>
+      <div class="gf-form-select-wrapper max-width-14">
+        <select class="gf-form-input" ng-model="ctrl.cfg.layout.legend.orientation" ng-change="ctrl.onConfigChanged()">
+          <option value="h">Horizontal</option>
+          <option value="v">Vertical</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="gf-form" ng-if="ctrl.cfg.layout.showlegend">
+      <label class="gf-form-label width-7">- Order</label>
+      <div class="gf-form-select-wrapper max-width-14">
+        <select class="gf-form-input" ng-model="ctrl.cfg.layout.legend.traceorder" ng-change="ctrl.onConfigChanged()">
+          <option value="normal">Normal</option>
+          <option value="reversed">Reversed</option>
+        </select>
       </div>
+    </div>
   </div>
 
   <div ng-repeat="axis in ctrl.editor.axis" class="section gf-form-group">