Counter visualization

rd_ui/app/index.html

@@ -141,6 +141,7 @@
 <script src="/scripts/visualizations/base.js"></script>
 <script src="/scripts/visualizations/chart.js"></script>
 <script src="/scripts/visualizations/cohort.js"></script>
+<script src="/scripts/visualizations/counter.js"></script>
 <script src="/scripts/visualizations/table.js"></script>
 <script src="/scripts/visualizations/pivot.js"></script>
 <script src="/scripts/directives/directives.js"></script>

rd_ui/app/scripts/visualizations/counter.js

@@ -0,0 +1,61 @@
+'use strict';
+
+(function() {
+  var module = angular.module('redash.visualization');
+
+  module.config(['VisualizationProvider', function(VisualizationProvider) {
+      var renderTemplate =
+        '<counter-renderer ' +
+        'options="visualization.options" query-result="queryResult">' +
+        '</counter-renderer>';
+
+      var editTemplate = '<counter-editor></counter-editor>';
+      var defaultOptions = {};
+
+      VisualizationProvider.registerVisualization({
+        type: 'COUNTER',
+        name: 'Counter',
+        renderTemplate: renderTemplate,
+        editorTemplate: editTemplate,
+        defaultOptions: defaultOptions
+      });
+    }
+  ]);
+
+  module.directive('counterRenderer', function() {
+    return {
+      restrict: 'E',
+      templateUrl: '/views/visualizations/counter.html',
+      link: function($scope, elm, attrs) {
+        $scope.visualization.options.rowNumber =
+          $scope.visualization.options.rowNumber || 0;
+
+        $scope.$watch('queryResult && queryResult.getData() && visualization.options',
+          function() {
+            var queryData = $scope.queryResult.getData();
+            if (queryData) {
+              var rowNumber = $scope.visualization.options.rowNumber || 0;
+              var counterColName = $scope.visualization.options.counterColName || 'counter';
+              var targetColName = $scope.visualization.options.targetColName || 'target';
+
+              $scope.counterValue = queryData[rowNumber][counterColName];
+              $scope.targetValue = queryData[rowNumber][targetColName];
+
+              if ($scope.targetValue) {
+                $scope.delta = $scope.counterValue - $scope.targetValue;
+                $scope.trendPositive = $scope.delta >= 0;
+              }
+            }
+          }, true);
+      }
+    }
+  });
+
+  module.directive('counterEditor', function() {
+    return {
+      restrict: 'E',
+      templateUrl: '/views/visualizations/counter_editor.html'
+    }
+  });
+
+})();

rd_ui/app/styles/redash.css

@@ -270,6 +270,35 @@ to add those CSS styles here. */
 pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
     overflow: auto;
 }
+counter-renderer {
+    display: block;
+    text-align: center;
+    padding: 30px 0;
+}
+counter-renderer counter {
+    margin: 0 auto;
+    background: #f9f9f9;
+    padding: 15px 50px;
+    display: block;;
+}
+counter-renderer value,
+counter-renderer counter-target {
+    font-size: 130px;
+}
+counter-renderer counter-target {
+    color: #ccc;
+}
+counter-renderer counter.positive value {
+    color: #5cb85c;
+}
+counter-renderer counter.negative value {
+    color: #d9534f;
+    margin-right: 15px;
+}
+counter-renderer counter-name {
+    font-size: 40px;
+    display: block;
+}
 
 .rd-widget-textbox p {
     margin-bottom: 0;

rd_ui/app/views/visualizations/counter.html

@@ -0,0 +1,5 @@
+<counter ng-class="{'positive': targetValue && trendPositive, 'negative': targetValue && !trendPositive}">
+  <value>{{counterValue}}</value>
+  <counter-target ng-if="targetValue">({{targetValue}})</counter-target>
+  <counter-name>{{visualization.name}}</counter-name>
+</counter>

rd_ui/app/views/visualizations/counter_editor.html

@@ -0,0 +1,20 @@
+<div class="form-horizontal">
+  <div class="form-group">
+    <label class="col-lg-6">Row Number</label>
+    <div class="col-lg-6">
+      <input type="number" ng-model="visualization.options.rowNumber" class="form-control">
+    </div>
+  </div>
+  <div class="form-group">
+    <label class="col-lg-6">Counter Column Name</label>
+    <div class="col-lg-6">
+      <select ng-options="name for name in queryResult.columnNames" ng-model="visualization.options.counterColName" class="form-control"></select>
+    </div>
+  </div>
+  <div class="form-group">
+    <label class="col-lg-6">Target Column Name</label>
+    <div class="col-lg-6">
+      <select ng-options="name for name in queryResult.columnNames" ng-model="visualization.options.targetColName" class="form-control"></select>
+    </div>
+  </div>
+</div>