Browse Source

[search] Enable selected countries/states on Datamaps

Enrico Berti 11 years ago
parent
commit
13802d6

+ 28 - 26
apps/search/static/js/charts.ko.js

@@ -106,19 +106,27 @@ ko.bindingHandlers.lineChart = {
 };
 
 ko.bindingHandlers.mapChart = {
-  init: function (element, valueAccessor) {
+  render: function (element, valueAccessor) {
+
     var _options = valueAccessor();
 
+    $(element).empty();
+
     $(element).css("position", "relative");
     $(element).css("marginLeft", "auto");
     $(element).css("marginRight", "auto");
-
-    if (typeof _options.maxWidth != "undefined") {
-      var _max = _options.maxWidth * 1;
-      if ($(element).width() > _max) {
-        $(element).width(_max);
+//
+//    if (typeof _options.maxWidth != "undefined") {
+//      var _max = _options.maxWidth * 1;
+//      if ($(element).width() > _max) {
+//        $(element).width(_max);
+//      }
+//    }
+//
+    if (typeof _options.maxWidth != "undefined"){
+        var _max = _options.maxWidth*1;
+        $(element).width(Math.min($(element).parent().width(), _max));
       }
-    }
 
     $(element).height($(element).width() / 2.23);
 
@@ -159,7 +167,7 @@ ko.bindingHandlers.mapChart = {
       });
     }
     else {
-      _fills["defaultFill"] = HueColors.BLUE;
+      _fills["defaultFill"] = HueColors.LIGHT_BLUE;
       _fills["selected"] = HueColors.DARK_BLUE;
       $(_data).each(function(cnt, item) {
     	var _place = item.label.toUpperCase();
@@ -168,7 +176,8 @@ ko.bindingHandlers.mapChart = {
             fillKey: "selected",
             id: _place,
             cat: item.obj.cat,
-            value: item.obj.value
+            value: item.obj.value,
+            selected: item.obj.selected
           };
           _maphovers[_place] = item.value;
         }
@@ -218,12 +227,13 @@ ko.bindingHandlers.mapChart = {
           borderColor: HueColors.DARK_BLUE,
           highlightOnHover: true,
           highlightFillColor: HueColors.DARK_BLUE,
-          highlightBorderColor: HueColors.DARK_BLUE,
+          highlightBorderColor: HueColors.BLUE,
+          selectedBorderColor: HueColors.GRAY,
           popupTemplate: function(geography, data) {
         	var _hover = '';
         	if (data != null) {
-        	  _hover = '<br/>' + mapHovers[data.id];	
-        	}            
+        	  _hover = '<br/>' + mapHovers[data.id];
+        	}
             return '<div class="hoverinfo" style="text-align: center"><strong>' + geography.properties.name + '</strong>' + _hover + '</div>'
           }
         }
@@ -233,23 +243,15 @@ ko.bindingHandlers.mapChart = {
 
     createDatamap(element, _options, _fills, _mapdata, _noncountries, _maphovers)
 
-
-    nv.utils.windowResize(_map.update);
-    $(element).parents(".card-widget").on("resize", function(){
-      $(element).empty();
-      if (typeof _options.maxWidth != "undefined"){
-        var _max = _options.maxWidth*1;
-        if ($(element).width() > _max){
-          $(element).width(_max);
-        }
-      }
-      $(element).height($(element).width() / 2.23);
-      createDatamap(element, _options, _fills, _mapdata, _noncountries, _maphovers)
+    $(element).parents(".card-widget").one("resize", function(){
+      ko.bindingHandlers.mapChart.render(element, valueAccessor);
     });
   },
+  init: function (element, valueAccessor) {
+    ko.bindingHandlers.mapChart.render(element, valueAccessor)
+  },
   update: function (element, valueAccessor) {
-    var value = valueAccessor();
-    // do something with the updated value
+    ko.bindingHandlers.mapChart.render(element, valueAccessor);
   }
 };
 

+ 3 - 3
apps/search/static/js/nv.d3.datamaps.js

@@ -35,7 +35,6 @@
         hideAntarctica: true,
         borderWidth: 1,
         borderColor: '#FDFDFD',
-        selectedBorderColor: '#EE8081',
         popupTemplate: function(geography, data) {
           return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong></div>';
         },
@@ -43,6 +42,7 @@
         highlightOnHover: true,
         highlightFillColor: '#FC8D59',
         highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
+        selectedBorderColor: '#666666',
         highlightBorderWidth: 2
     },
     bubblesConfig: {
@@ -153,14 +153,14 @@
       })
       .style('stroke-width', function(d) {
         var strokeWidth = geoConfig.borderWidth;
-        if ( colorCodeData[d.id] && colorCodeData[d.id].isSelected ) {
+        if ( colorCodeData[d.id] && colorCodeData[d.id].selected ) {
           strokeWidth = 2;
         }
         return strokeWidth;
       })
       .style('stroke', function(d) {
         var strokeColor = geoConfig.borderColor;
-        if ( colorCodeData[d.id] && colorCodeData[d.id].isSelected ) {
+        if ( colorCodeData[d.id] && colorCodeData[d.id].selected ) {
           strokeColor = geoConfig.selectedBorderColor;
         }
         return strokeColor;

+ 5 - 3
desktop/core/static/js/hue.colors.js

@@ -49,7 +49,9 @@ var HueColors = {
     }
     return _bands;
   },
-  LIGHT_BLUE: "#f7fbff",
-  BLUE: "#c7d2e1",
-  DARK_BLUE: "#08306b"
+  LIGHT_BLUE: "#DBE8F1",
+  BLUE: "#87BAD5",
+  DARK_BLUE: "#338BB8",
+  PURPLE: "#C0B1E9",
+  GRAY: "#666666"
 };