fixing bugs, adding options

Author: stormpython

public/lib/vectormap_controller.js

@@ -4,20 +4,20 @@ var module = require('ui/modules').get('vectormap');
 
 module.controller('VectormapController', function ($scope) {
   $scope.$watch('esResponse', function (resp) {
-    if (!resp) {
+    if (!resp || !resp.aggregations) {
       $scope.data = null;
       return;
     }
 
     var geoCodeAggId = _.first(_.pluck($scope.vis.aggs.bySchemaName['segment'], 'id'));
     var metricsAgg = _.first($scope.vis.aggs.bySchemaName['metric']);
-
-    var buckets = resp.aggregations[geoCodeAggId].buckets;
+    var buckets = resp.aggregations[geoCodeAggId] && resp.aggregations[geoCodeAggId].buckets;
 
     $scope.data = {};
 
     buckets.forEach(function (bucket) {
-      $scope.data[bucket.key.toUpperCase()] = metricsAgg.getValue(bucket);
+      var prefix = $scope.vis.params.mapType === 'us_aea' ? 'US-' : '';
+      $scope.data[prefix + bucket.key.toUpperCase()] = metricsAgg.getValue(bucket);
     });
   });
 });

public/lib/vectormap_directive.js

@@ -1,5 +1,6 @@
 var _ = require('lodash');
 var $ = require('jquery');
+var numeral = require('numeral');
 
 // jvectormap - version 2.0.3
 require('plugins/vectormap/lib/jvectormap/jquery-jvectormap.min');
@@ -10,7 +11,23 @@ var module = require('ui/modules').get('vectormap');
 module.directive('vectormap', function () {
   function link (scope, element) {
 
-    //element.html('<center><img src="img/load_big.gif"></center>');
+    function onSizeChange() {
+      return {
+        width: element.parent().width(),
+        height: element.parent().height()
+      };
+    }
+
+    function displayFormat(val) {
+      var formats = {
+        number: '0[.]0a',
+        bytes: '0[.]0b',
+        currency: '$0[.]00a',
+        percentage: '0%'
+      }
+
+      return formats[val] || formats.number;
+    }
 
     scope.$watch('data',function(){
       render();
@@ -29,51 +46,38 @@ module.directive('vectormap', function () {
       render();
     });
 
-    element.bind('resize', function () {
-      scope.$apply();
-    });
-
-    function onSizeChange() {
-      return { width: element.parent().width(), height: element.parent().height() };
-    }
-
     function render() {
-      element.css({ 
-        height: element.parent().height(), 
-        width: element.parent().width()
+      element.css({
+        height: element.parent().height(),
+        width: '100%'
       });
 
       element.text('');
 
+      // Remove previously drawn vector map
       $('.jvectormap-zoomin, .jvectormap-zoomout, .jvectormap-label').remove();
-      
+
       require(['plugins/vectormap/lib/jvectormap/maps/map.' + scope.options.mapType], function () {
         element.vectorMap({
           map: scope.options.mapType,
           regionStyle: { initial: { fill: '#8c8c8c' }},
-          zoomOnScroll: false,
+          zoomOnScroll: scope.options.zoomOnScroll,
           backgroundColor: null,
           series: {
             regions: [{
               values: scope.data,
-              scale: scope.options.colors,
+              scale: [scope.options.minColor, scope.options.maxColor],
               normalizeFunction: 'polynomial'
             }]
           },
-          onRegionLabelShow: function(event, label, code) {
-            element.children('.map-legend').show();
+          onRegionTipShow: function(event, el, code) {
+            if (!scope.data) { return; }
+
             var count = _.isUndefined(scope.data[code]) ? 0 : scope.data[code];
-            element.children('.map-legend').text(label.text() + ": " + count);
-          },
-          onRegionOut: function() {
-            $('.map-legend').hide();
+            el.html(el.html() + ": " + numeral(count).format(displayFormat(scope.options.tipNumberFormat)));
           }
         });
       });
-
-      element.prepend('<span class="map-legend"></span>');
-
-      $('.map-legend').hide();
     }
   }
 

public/vectormap.js

@@ -17,7 +17,10 @@ function VectormapProvider(Private) {
     params: {
       defaults: {
         mapType: 'world_mill',
-        colors: ['#A0E2E2', '#265656']
+        minColor: '#A0E2E2',
+        maxColor: '#265656',
+        zoomOnScroll: false,
+        tipNumberFormat: 'number'
       },
       editor: require('plugins/vectormap/vectormap_vis_params.html')
     },

public/vectormap_vis_params.html

@@ -1,6 +1,6 @@
 <div class="form-group">
   <div class="form-group">
-    <label>Map Type</label>
+    <h3>Map Type</h3>
     <select ng-model="vis.params.mapType" class="form-control">
       <option value="world_mill" selected="selected">World</option>
       <option value="africa_mill">Africa</option>
@@ -12,4 +12,24 @@
       <option value="us_aea">USA</option>
     </select>
   </div>
+
+  <!-- Color Scale -->
+  <div class="form-group">
+    <h3>Map Color Scale</h3>
+    <label>Min Color: </label>
+    <input type="text" ng-model="vis.params.minColor"><br>
+    <label>Max Color: </label>
+    <input type="text" ng-model="vis.params.maxColor">
+  </div>
+
+  <!-- Tooltip Number Format Type -->
+  <div class="form-group">
+    <h3>Tooltip Number Format</h3>
+    <select ng-model="vis.params.tipNumberFormat" class="form-control">
+      <option value="number" selected="selected">number</option>
+      <option value="bytes">bytes</option>
+      <option value="currency">currency</option>
+      <option value="percentage">percentage</option>
+    </select>
+  </div>
 </div>