Kaynağa Gözat

[search] Added first version of multiBar

Enrico Berti 11 yıl önce
ebeveyn
işleme
886b03c
1 değiştirilmiş dosya ile 76 ekleme ve 17 silme
  1. 76 17
      apps/search/src/search/templates/search2.mako

+ 76 - 17
apps/search/src/search/templates/search2.mako

@@ -456,7 +456,7 @@ ${ commonheader(_('Search'), "search", user, "60px") | n,unicode }
     <a href="javascript:void(0)"><i class="fa fa-plus"></i></a>
     <a href="javascript:void(0)"><i class="fa fa-minus"></i></a>
 
-    <span data-bind="text: counts" />
+    <div data-bind="barChart: {data: counts, field: field}" />
   </div>
   <!-- /ko -->
 </script>
@@ -478,7 +478,7 @@ ${ commonheader(_('Search'), "search", user, "60px") | n,unicode }
       ${ _('Field') }: <input type="text" data-bind="value: field" />
     </div>  
 
-    <div data-bind="pieChart: counts" />
+    <div data-bind="pieChart: {data: counts}" />
   </div>
   <!-- /ko -->
 </script>
@@ -578,11 +578,12 @@ $(document).ready(function () {
     }
   };
 
+
   ko.bindingHandlers.pieChart = {
     init: function (element, valueAccessor) {
-      var value = valueAccessor();
+      var _options = valueAccessor();
       var _data = [];
-      $(value).each(function (cnt, item) {
+      $(_options.data).each(function (cnt, item) {
         _data.push({
           label: item.value,
           value: item.count,
@@ -592,28 +593,86 @@ $(document).ready(function () {
 
       nv.addGraph(function () {
         var chart = nv.models.pieChart()
-            .x(function (d) {
-              return d.label
-            })
-            .y(function (d) {
-              return d.value
-            })
-            .height($(element).width())
-            .showLabels(true).showLegend(false);
+                .x(function (d) {
+                  return d.label
+                })
+                .y(function (d) {
+                  return d.value
+                })
+                .height($(element).width())
+                .showLabels(true).showLegend(false);
 
         var _d3 = ($(element).find('svg').length > 0) ? d3.select($(element).find('svg')[0]) : d3.select($(element)[0]).append('svg');
 
         _d3.datum(_data)
-            .transition().duration(350)
-            .call(chart);
+                .transition().duration(350)
+                .call(chart);
         nv.utils.windowResize(chart.update);
         $(element).height($(element).width());
         return chart;
       }, function () {
         d3.selectAll(".nv-slice").on('click',
-            function (d, i) {
-              viewModel.query.selectFacet(d.data.obj);
-            });
+                function (d, i) {
+                  viewModel.query.selectFacet(d.data.obj);
+                });
+      });
+    },
+    update: function (element, valueAccessor) {
+      var value = valueAccessor();
+      // do something with the updated value
+    }
+  };
+
+  ko.bindingHandlers.barChart = {
+    init: function (element, valueAccessor) {
+      var _options = valueAccessor();
+      var _data = [];
+      for (var i = 0; i < _options.data.length; i = i + 2) {
+        _data.push({
+          series: 0,
+          x: _options.data[i],
+          y: _options.data[i + 1]
+        });
+      }
+      $(element).height(300);
+
+      nv.addGraph(function () {
+        var chart = nv.models.multiBarChart()
+                .margin({bottom: 100})
+                .transitionDuration(300);
+
+        chart.multibar
+                .hideable(true);
+
+        chart.xAxis
+                .showMaxMin(true)
+                .tickFormat(d3.format(',0f'));
+
+        chart.yAxis
+                .tickFormat(d3.format(',0f'));
+
+        var _d3 = ($(element).find('svg').length > 0) ? d3.select($(element).find('svg')[0]) : d3.select($(element)[0]).append('svg');
+        _d3.datum([
+                  {
+                    key: _options.field,
+                    values: _data
+                  }
+                ])
+                .call(chart);
+
+        nv.utils.windowResize(chart.update);
+
+        return chart;
+      }, function () {
+        d3.selectAll(".nv-bar").on('click',
+                function (d, i) {
+                  viewModel.query.selectFacet({
+                    count: d.y,
+                    selected: false,
+                    value: d.x,
+                    cat: _options.field
+                  });
+                });
       });
     },
     update: function (element, valueAccessor) {