#58, support fixed ratio

Author: ryantxu

README.md

@@ -43,6 +43,8 @@ env GITHUB_TOKEN=your_token yarn release-it patch
 - Add basic annotations support #57 (tchernobog)
 - Improve loading times for plotly.js and support loading from CDN
 - Assume date x-axis when 'auto' and the mapping has 'time'
+- Support Fixed-Ratio Axes
+
 
 ##### v0.0.5
 

src/module.ts

@@ -77,6 +77,8 @@ class PlotlyPanelCtrl extends MetricsPanelCtrl {
   static defaults = {
     pconfig: {
       loadFromCDN: false,
+      showAnnotations: true,
+      fixScale: '',
       traces: [PlotlyPanelCtrl.defaultTrace],
       settings: {
         type: 'scatter',
@@ -390,6 +392,19 @@ class PlotlyPanelCtrl extends MetricsPanelCtrl {
       // Set the second axis
       layout.yaxis2 = PlotlyPanelCtrl.yaxis2;
     }
+
+    if(this.cfg.fixScale) {
+      if('x'=== this.cfg.fixScale) {
+        layout.yaxis.scaleanchor = 'x';
+      }
+      else if('y'=== this.cfg.fixScale) {
+        layout.xaxis.scaleanchor = 'y';
+      }
+      else if('z'=== this.cfg.fixScale) {
+        layout.xaxis.scaleanchor = 'z';
+        layout.yaxis.scaleanchor = 'z';
+      }
+    }
     return layout;
   }
 
@@ -561,7 +576,7 @@ class PlotlyPanelCtrl extends MetricsPanelCtrl {
 
     // Support Annotations
     let annotationPromise = Promise.resolve();
-    if (this.is3d()) {
+    if (!this.cfg.showAnnotations || this.is3d()) {
       this.annotations.clear();
       if (this.layout) {
         if (this.layout.shapes) {
@@ -738,6 +753,10 @@ class PlotlyPanelCtrl extends MetricsPanelCtrl {
 
       // Updates the layout and redraw
       if (this.initialized && this.graphDiv) {
+        if(!this.cfg.showAnnotations) {
+          this.annotations.clear();
+        }
+
         const s = this.cfg.settings;
         const options = {
           showLink: false,

src/partials/tab_display.html

@@ -31,6 +31,26 @@ <h5 class="section-heading">Options</h5>
       </div>
     </div>
 
+    <div class="gf-form">
+      <label class="gf-form-label width-7">Fix Scale</label>
+      <div class="gf-form-select-wrapper max-width-14">
+        <select class="gf-form-input" 
+          ng-model="ctrl.cfg.fixScale" 
+          ng-change="ctrl.editor.onConfigChanged()">
+          <option value="">independent</option>
+          <option value="x">X Axis (1:1)</option>
+          <option value="y">Y Axis (1:1)</option>
+        </select>
+      </div>
+    </div>
+
+    <gf-form-switch 
+      class="gf-form" 
+      label="Annotations" 
+      label-class="gf-form-label width-7" 
+      checked="ctrl.cfg.showAnnotations" 
+      on-change="ctrl.editor.onConfigChanged()"></gf-form-switch>
+
     <gf-form-switch 
       class="gf-form" 
       label="Use CDN"