Merge pull request #23 from flant/discrete_preset_of_solarized_colors

Solarized preset for discrete color mode

README.md

@@ -146,6 +146,8 @@ This plugin is based on "Heatmap" panel by Grafana and partly inspired by ideas
 
 ##### v0.0.3
 
+- Add solarized preset
+- Reorganize statuses editor for discrete mode
 - Separate options for vertical and horizontal spacing for cards
 - Add simple sort options for Y axis
 - Fix display null values as zero

dist/README.md

@@ -146,6 +146,8 @@ This plugin is based on "Heatmap" panel by Grafana and partly inspired by ideas
 
 ##### v0.0.3
 
+- Add solarized preset
+- Reorganize statuses editor for discrete mode
 - Separate options for vertical and horizontal spacing for cards
 - Add simple sort options for Y axis
 - Fix display null values as zero

dist/partials/options_editor.html

@@ -55,40 +55,70 @@
           <strong>Note:</strong> Multiple values displayed using color with least index<br/>
         </div>
 
-        <div class="gf-form" ng-repeat="threshold in ctrl.panel.color.thresholds">
+        <div class="gf-form" ng-show="ctrl.panel.color.thresholds.length == 0">
+          <label class="gf-form-label width-2">0</label>
+          <label class="gf-form-input width-30">No statuses defined. Add new status or use presets below.</label>
+        </div>
 
+        <div class="gf-form-inline" ng-repeat="threshold in ctrl.panel.color.thresholds">
+          <div class="gf-form">
             <label class="gf-form-label width-2">{{ $index }}</label>
-          <label class="gf-form-label width-9" ng-if="ctrl.panel.useMax">If bucket has value</label>
-          <label class="gf-form-label width-9" ng-if="!ctrl.panel.useMax">If bucket value ==</label>
+          </div>
+          <div class="gf-form">
+            <label class="gf-form-label width-9 query-keyword" ng-if="ctrl.panel.useMax">If bucket has value</label>
+            <label class="gf-form-label width-9 query-keyword" ng-if="!ctrl.panel.useMax">If bucket value ==</label>
             <input type="text" class="input-small gf-form-input width-4" ng-model="threshold.value" ng-change="ctrl.render()"/>
-          <label class="gf-form-label">
+            <label class="gf-form-label query-keyword">
               fill
             </label>
             <label class="gf-form-label">
               <spectrum-picker ng-model="threshold.color" ng-change="ctrl.render()"/>
             </label>
-          <label class="gf-form-label">set tooltip</label>
+          </div>
+          <div class="gf-form">
+            <label class="gf-form-label query-keyword">set tooltip</label>
             <input type="text" class="input-small gf-form-input width-9" ng-model="threshold.tooltip" ng-change="ctrl.render()"/>
-
+          </div>
+          <div class="gf-form">
             <label class="gf-form-label">
-            <a class="pointer" ng-click="ctrl.onEditorRemoveThreshold($index)">
+              <a class="pointer" tabindex="1" ng-click="ctrl.onEditorRemoveThreshold($index)">
                 <i class="fa fa-trash"/>
               </a>
             </label>
           </div>
-
-        <div class="gf-form">
-          <label class="gf-form-label"  ng-show="ctrl.panel.color.thresholds.length == 0">
-            <a class="pointer" ng-click="ctrl.onEditorAddThreeLights()">
-              Add trafic lights
-            </a>
-          </label>
-          <label class="gf-form-label">
-            <a class="pointer" ng-click="ctrl.onEditorAddThreshold()">
-              Add new status
-            </a>
-          </label>
         </div>
+
+        <div class="gf-form-inline">
+            <div class="gf-form"></div>
+          <div class="gf-form">
+            <button class="btn btn-inverse" ng-click="ctrl.onEditorAddThreshold()">
+              <i class="fa fa-plus"></i> Add new status
+            </button>
+          </div>
+          <div class="gf-form">
+            <button class="btn btn-inverse" ng-click="ctrl.onEditorRemoveThresholds()">
+                <i class="fa fa-minus"></i> Remove all
+            </button>
+          </div>
+        </div>
+
+        <div class="gf-form-inline" ng-show="ctrl.panel.color.thresholds.length == 0">
+          <div class="gf-form"></div>
+          <div class="gf-form">
+              <label class="gf-form-label">Presets</label>
+          </div>
+          <div class="gf-form">
+            <button class="btn" ng-click="ctrl.onEditorAddThreeLights()">
+              Red-Yellow-Green
+            </button>
+          </div>
+          <div class="gf-form">            
+            <button class="btn" ng-click="ctrl.onEditorAddSolarized()">
+              Solarized
+            </button>
+          </div>
+        </div>
+
     </div>
 
     <div class="gf-form" ng-show="ctrl.panel.color.mode !== 'discrete'">

dist/status_heatmap_ctrl.js

@@ -226,6 +226,11 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
             _this.render();
           };
 
+          _this.onEditorRemoveThresholds = function () {
+            _this.panel.color.thresholds = [];
+            _this.render();
+          };
+
           _this.onEditorAddThreeLights = function () {
             _this.panel.color.thresholds.push({ color: "red", value: 2, tooltip: "error" });
             _this.panel.color.thresholds.push({ color: "yellow", value: 1, tooltip: "warning" });
@@ -233,6 +238,18 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
             _this.render();
           };
 
+          _this.onEditorAddSolarized = function () {
+            _this.panel.color.thresholds.push({ color: "#b58900", value: 0, tooltip: "yellow" });
+            _this.panel.color.thresholds.push({ color: "#cb4b16", value: 1, tooltip: "orange" });
+            _this.panel.color.thresholds.push({ color: "#dc322f", value: 2, tooltip: "red" });
+            _this.panel.color.thresholds.push({ color: "#d33682", value: 3, tooltip: "magenta" });
+            _this.panel.color.thresholds.push({ color: "#6c71c4", value: 4, tooltip: "violet" });
+            _this.panel.color.thresholds.push({ color: "#268bd2", value: 5, tooltip: "blue" });
+            _this.panel.color.thresholds.push({ color: "#2aa198", value: 6, tooltip: "cyan" });
+            _this.panel.color.thresholds.push({ color: "#859900", value: 7, tooltip: "green" });
+            _this.render();
+          };
+
           _this.link = function (scope, elem, attrs, ctrl) {
             rendering(scope, elem, attrs, ctrl);
           };
@@ -354,6 +371,9 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
         // override calculateInterval for discrete color mode
 
 
+        /* https://ethanschoonover.com/solarized/ */
+
+
         // group values into buckets by target
 
 

src/partials/options_editor.html

@@ -55,40 +55,70 @@
           <strong>Note:</strong> Multiple values displayed using color with least index<br/>
         </div>
 
-        <div class="gf-form" ng-repeat="threshold in ctrl.panel.color.thresholds">
+        <div class="gf-form" ng-show="ctrl.panel.color.thresholds.length == 0">
+          <label class="gf-form-label width-2">0</label>
+          <label class="gf-form-input width-30">No statuses defined. Add new status or use presets below.</label>
+        </div>
 
+        <div class="gf-form-inline" ng-repeat="threshold in ctrl.panel.color.thresholds">
+          <div class="gf-form">
             <label class="gf-form-label width-2">{{ $index }}</label>
-          <label class="gf-form-label width-9" ng-if="ctrl.panel.useMax">If bucket has value</label>
-          <label class="gf-form-label width-9" ng-if="!ctrl.panel.useMax">If bucket value ==</label>
+          </div>
+          <div class="gf-form">
+            <label class="gf-form-label width-9 query-keyword" ng-if="ctrl.panel.useMax">If bucket has value</label>
+            <label class="gf-form-label width-9 query-keyword" ng-if="!ctrl.panel.useMax">If bucket value ==</label>
             <input type="text" class="input-small gf-form-input width-4" ng-model="threshold.value" ng-change="ctrl.render()"/>
-          <label class="gf-form-label">
+            <label class="gf-form-label query-keyword">
               fill
             </label>
             <label class="gf-form-label">
               <spectrum-picker ng-model="threshold.color" ng-change="ctrl.render()"/>
             </label>
-          <label class="gf-form-label">set tooltip</label>
+          </div>
+          <div class="gf-form">
+            <label class="gf-form-label query-keyword">set tooltip</label>
             <input type="text" class="input-small gf-form-input width-9" ng-model="threshold.tooltip" ng-change="ctrl.render()"/>
-
+          </div>
+          <div class="gf-form">
             <label class="gf-form-label">
-            <a class="pointer" ng-click="ctrl.onEditorRemoveThreshold($index)">
+              <a class="pointer" tabindex="1" ng-click="ctrl.onEditorRemoveThreshold($index)">
                 <i class="fa fa-trash"/>
               </a>
             </label>
           </div>
-
-        <div class="gf-form">
-          <label class="gf-form-label"  ng-show="ctrl.panel.color.thresholds.length == 0">
-            <a class="pointer" ng-click="ctrl.onEditorAddThreeLights()">
-              Add trafic lights
-            </a>
-          </label>
-          <label class="gf-form-label">
-            <a class="pointer" ng-click="ctrl.onEditorAddThreshold()">
-              Add new status
-            </a>
-          </label>
         </div>
+
+        <div class="gf-form-inline">
+            <div class="gf-form"></div>
+          <div class="gf-form">
+            <button class="btn btn-inverse" ng-click="ctrl.onEditorAddThreshold()">
+              <i class="fa fa-plus"></i> Add new status
+            </button>
+          </div>
+          <div class="gf-form">
+            <button class="btn btn-inverse" ng-click="ctrl.onEditorRemoveThresholds()">
+                <i class="fa fa-minus"></i> Remove all
+            </button>
+          </div>
+        </div>
+
+        <div class="gf-form-inline" ng-show="ctrl.panel.color.thresholds.length == 0">
+          <div class="gf-form"></div>
+          <div class="gf-form">
+              <label class="gf-form-label">Presets</label>
+          </div>
+          <div class="gf-form">
+            <button class="btn" ng-click="ctrl.onEditorAddThreeLights()">
+              Red-Yellow-Green
+            </button>
+          </div>
+          <div class="gf-form">            
+            <button class="btn" ng-click="ctrl.onEditorAddSolarized()">
+              Solarized
+            </button>
+          </div>
+        </div>
+
     </div>
 
     <div class="gf-form" ng-show="ctrl.panel.color.mode !== 'discrete'">

src/status_heatmap_ctrl.js

@@ -244,6 +244,11 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
     this.render();
   };
 
+  onEditorRemoveThresholds = () => {
+    this.panel.color.thresholds = [];
+    this.render();
+  };
+
   onEditorAddThreeLights = () => {
     this.panel.color.thresholds.push({color: "red", value: 2, tooltip: "error" });
     this.panel.color.thresholds.push({color: "yellow", value: 1, tooltip: "warning" });
@@ -251,6 +256,19 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
     this.render();
   };
   
+  /* https://ethanschoonover.com/solarized/ */
+  onEditorAddSolarized = () => {
+    this.panel.color.thresholds.push({color: "#b58900", value: 0, tooltip: "yellow" });
+    this.panel.color.thresholds.push({color: "#cb4b16", value: 1, tooltip: "orange" });
+    this.panel.color.thresholds.push({color: "#dc322f", value: 2, tooltip: "red" });
+    this.panel.color.thresholds.push({color: "#d33682", value: 3, tooltip: "magenta" });
+    this.panel.color.thresholds.push({color: "#6c71c4", value: 4, tooltip: "violet" });
+    this.panel.color.thresholds.push({color: "#268bd2", value: 5, tooltip: "blue" });
+    this.panel.color.thresholds.push({color: "#2aa198", value: 6, tooltip: "cyan" });
+    this.panel.color.thresholds.push({color: "#859900", value: 7, tooltip: "green" });
+    this.render();
+  }
+
   link = (scope, elem, attrs, ctrl) => {
     rendering(scope, elem, attrs, ctrl);
   };