From 6871f0435318d3a7282f7d3eca37899a6fbfb74b Mon Sep 17 00:00:00 2001
From: Pascal Stump <pascal.stump@honignerd.ch>
Date: Mon, 10 Feb 2020 09:54:32 +0100
Subject: [PATCH 1/2] add form fields for Marker-Color-Range settings

If Marker-Color is set to Ramp, Range will appear with the selection:
 - Auto (default), additional field:
   - Mid (default=null): set mid-point of color domain
 - Between, additional fields:
   - Min (default=0): set lower bound of color domain
   - Max (default=1): set upper bound of color domain

See plotly reference: cauto, cmin, cmax, cmid
---
 src/module.ts                |  4 ++++
 src/partials/tab_traces.html | 40 ++++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/src/module.ts b/src/module.ts
index 3c52a39..e3ee1f9 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -62,6 +62,10 @@ class PlotlyPanelCtrl extends MetricsPanelCtrl {
           width: 0,
         },
         showscale: false,
+        cauto: true,
+        cmin: 0,
+        cmax: 1,
+        cmid: null,
       },
       color_option: 'ramp',
     },
diff --git a/src/partials/tab_traces.html b/src/partials/tab_traces.html
index 047b6d7..a39b717 100644
--- a/src/partials/tab_traces.html
+++ b/src/partials/tab_traces.html
@@ -154,6 +154,46 @@ <h5 class="section-heading">Markers</h5>
             on-change="ctrl.editor.onColorChanged()"></metric-segment>
         </div>
 
+        <div class="gf-form" ng-if="ctrl.editor.trace.settings.color_option != 'solid'">
+          <label class="gf-form-label width-7">- Range</label>
+          <div class="gf-form-select-wrapper max-width-14">
+            <select class="gf-form-input" 
+              ng-model="ctrl.editor.trace.settings.marker.cauto" 
+              ng-change="ctrl.editor.onColorChanged()">
+              <option ng-value="true">Auto</option>
+              <option nb-value="false">Between</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="gf-form" ng-if="ctrl.editor.trace.settings.marker.cauto != true && ctrl.editor.trace.settings.color_option != 'solid'">
+          <label class="gf-form-label width-7">-- Min</label>
+          <input class="gf-form-input width-10"
+            placeholder="min" 
+            type="number"
+            ng-model="ctrl.editor.trace.settings.marker.cmin" 
+            ng-blur="ctrl.editor.onColorChanged()"
+          />
+        </div>
+        <div class="gf-form" ng-if="ctrl.editor.trace.settings.marker.cauto != true && ctrl.editor.trace.settings.color_option != 'solid'">
+          <label class="gf-form-label width-7">-- Max</label>
+          <input class="gf-form-input width-10"
+            placeholder="max" 
+            type="number"
+            ng-model="ctrl.editor.trace.settings.marker.cmax" 
+            ng-blur="ctrl.editor.onColorChanged()"
+          />
+        </div>
+        <div class="gf-form" ng-if="ctrl.editor.trace.settings.marker.cauto == true && ctrl.editor.trace.settings.color_option != 'solid'">
+          <label class="gf-form-label width-7">-- Mid</label>
+          <input class="gf-form-input width-10"
+            placeholder="mid" 
+            type="number"
+            ng-model="ctrl.editor.trace.settings.marker.cmid" 
+            ng-blur="ctrl.editor.onColorChanged()"
+          />
+        </div>
+
         <div class="gf-form" ng-if="ctrl.editor.trace.settings.color_option != 'solid'">
           <label class="gf-form-label width-7">- Scale</label>
           <div class="gf-form-select-wrapper max-width-14">

From e84a1aaa2aec44d02fe130335fe3cad7b0c2f922 Mon Sep 17 00:00:00 2001
From: Pascal Stump <pascal.stump@honignerd.ch>
Date: Thu, 20 Feb 2020 16:03:28 +0100
Subject: [PATCH 2/2] add hovertemplate, text type and align

- hovertemplate (default='')
  - Creates a textarea to define the hovertemplate when the metric
    text is chosen.
- text type (default=None) selectbox
  - None: standard
  - Date: converts the selected metric into Date type (usefull for hovertemplate)
- Align (default=Auto) of hovertext
  - Auto: standard
  - Left: left aligned
  - Right: right aligned

see also plotly hovertemplate, hoverlabel.align
---
 src/module.ts                | 31 ++++++++++++++++++++++++++++++-
 src/partials/tab_traces.html | 35 ++++++++++++++++++++++++++++++++++-
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/src/module.ts b/src/module.ts
index e3ee1f9..16e0522 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -67,6 +67,13 @@ class PlotlyPanelCtrl extends MetricsPanelCtrl {
         cmax: 1,
         cmid: null,
       },
+      hover: {
+        type: '',
+        hovertemplate: '',
+        hoverlabel: {
+          align: '',
+        },
+      },
       color_option: 'ramp',
     },
   };
@@ -690,6 +697,20 @@ class PlotlyPanelCtrl extends MetricsPanelCtrl {
       if (mode) {
         trace.mode = mode.substring(1);
       }
+
+      if (config.settings.hover) {
+        if (config.settings.hover.hovertemplate) {
+          trace.hovertemplate = config.settings.hover.hovertemplate;
+        }
+        if (config.settings.hover.hoverlabel) {
+          trace.hoverlabel = config.settings.hover.hoverlabel;
+        }
+        if (config.settings.hover.type) {
+          trace.hovertype = config.settings.hover.type;
+        } else {
+          trace.hovertype = '';
+        }
+      }
       return trace;
     });
   }
@@ -735,7 +756,15 @@ class PlotlyPanelCtrl extends MetricsPanelCtrl {
           if (!vals) {
             vals = zero;
           }
-          _.set(trace, v.path, vals);
+          let tempVals = vals;
+          if (v.path === 'text' && trace.hovertype === 'Date'){
+            let tempDate: Date[] = [];
+            vals.forEach( x => {
+              tempDate.push(new Date(x));
+            });
+            tempVals = tempDate;
+          }
+          _.set(trace, v.path, tempVals);
         });
       }
     });
diff --git a/src/partials/tab_traces.html b/src/partials/tab_traces.html
index a39b717..b2aac6a 100644
--- a/src/partials/tab_traces.html
+++ b/src/partials/tab_traces.html
@@ -295,7 +295,40 @@ <h5 class="section-heading">Text</h5>
           get-options="ctrl.editor.getSeriesSegs(true)" 
           on-change="ctrl.editor.onTextMetricChanged()"></metric-segment>
       </div>
-      
+
+      <div class="gf-form" ng-if="ctrl.editor.trace.mapping.text">
+        <label class="gf-form-label width-7">Type</label>
+        <div class="gf-form-select-wrapper max-width-14">
+          <select class="gf-form-input"
+            ng-model="ctrl.editor.trace.settings.hover.type"
+            ng-change="ctrl.editor.onColorChanged()">
+            <option value="">None</option>
+            <option value="Date">Date</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="gf-form" ng-if="ctrl.editor.trace.mapping.text">
+        <label class="gf-form-label width-7">Align</label>
+        <div class="gf-form-select-wrapper max-width-14">
+          <select class="gf-form-input"
+            ng-model="ctrl.editor.trace.settings.hover.hoverlabel.align"
+            ng-change="ctrl.editor.onColorChanged()">
+            <option value="">Auto</option>
+            <option value="left">Left</option>
+            <option value="right">Right</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="gf-form" ng-if="ctrl.editor.trace.mapping.text">
+        <label class="gf-form-label width-7">Template</label>
+        <textarea class="gf-form-textarea"
+          ng-model="ctrl.editor.trace.settings.hover.hovertemplate"
+          ng-blur="ctrl.editor.onColorChanged()">
+        </textarea>
+      </div>
+
       <div class="gf-form" ng-if="ctrl.editor.trace.mapping.text">
         <label class="gf-form-label width-7">Show</label>
         <div class="gf-form-select-wrapper max-width-14">