Преглед изворни кода

[search] Added maxWidth for Pie chart

Enrico Berti пре 11 година
родитељ
комит
6acb6f2
2 измењених фајлова са 20 додато и 3 уклоњено
  1. 2 0
      apps/search/src/search/templates/search2.mako
  2. 18 3
      apps/search/static/js/charts.ko.js

+ 2 - 0
apps/search/src/search/templates/search2.mako

@@ -742,12 +742,14 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
       <!-- ko if: type() == 'range' -->
       <div data-bind="pieChart: {data: {counts: $parent.counts, widget_id: $parent.id}, field: field, fqs: $root.query.fqs,
         transformer: rangePieChartDataTransformer,
+        maxWidth: 250,
         onClick: function(d){ viewModel.query.selectRangeFacet({count: d.data.obj.value, widget_id: d.data.obj.widget_id, from: d.data.obj.from, to: d.data.obj.to, cat: d.data.obj.field}) }, 
         onComplete: function(){ viewModel.getWidgetById($parent.id).isLoading(false)} }" />
       <!-- /ko -->
       <!-- ko if: type() != 'range' -->
       <div data-bind="pieChart: {data: {counts: $parent.counts, widget_id: $parent.id}, field: field, fqs: $root.query.fqs,
         transformer: pieChartDataTransformer,
+        maxWidth: 250,
         onClick: function(d){viewModel.query.toggleFacet({facet: d.data.obj, widget_id: d.data.obj.widget_id})},
         onComplete: function(){viewModel.getWidgetById($parent.id).isLoading(false)}}" />
       <!-- /ko -->

+ 18 - 3
apps/search/static/js/charts.ko.js

@@ -19,6 +19,12 @@ ko.bindingHandlers.pieChart = {
     init: function (element, valueAccessor) {
       var _options = valueAccessor();
       var _data = _options.transformer(_options.data);
+      $(element).css("marginLeft", "auto");
+      $(element).css("marginRight", "auto");
+      if (typeof _options.maxWidth != "undefined"){
+        var _max = _options.maxWidth*1;
+        $(element).width(Math.min($(element).parent().width(), _max));
+      }
 
       nv.addGraph(function () {
         var _chart = nv.models.growingPieChart()
@@ -46,12 +52,21 @@ ko.bindingHandlers.pieChart = {
 
         nv.utils.windowResize(_chart.update);
         $(element).height($(element).width());
+        $(element).parents(".card-widget").on("resize", function(){
+          if (typeof _options.maxWidth != "undefined"){
+            var _max = _options.maxWidth*1;
+            $(element).width(Math.min($(element).parent().width(), _max));
+          }
+          $(element).height($(element).width());
+          _chart.update();
+        });
+
         return _chart;
       }, function () {
         d3.selectAll(".nv-slice").on('click',
-                function (d, i) {
-                  _options.onClick(d);
-                });
+          function (d, i) {
+            _options.onClick(d);
+          });
       });
     },
     update: function (element, valueAccessor) {