Răsfoiți Sursa

[search] Added barChart code for handling time data

Enrico Berti 11 ani în urmă
părinte
comite
620e2312e9

+ 15 - 3
apps/search/src/search/templates/search2.mako

@@ -243,7 +243,7 @@ ${ commonheader(_('Search'), "search", user, "60px") | n,unicode }
 </script>
 
 <script type="text/html" id="row-template">
-  <div class="emptyRow" data-bind="visible: widgets().length == 0 && $index()==0 && $root.isEditing() && $parent.size() > 4">
+  <div class="emptyRow" data-bind="visible: widgets().length == 0 && $index()==0 && $root.isEditing() && $parent.size() > 4 && $parent.rows().length == 1">
     <img src="/search/static/art/hint_arrow_flipped.png" style="float:left; margin-right: 10px"/>
     <div style="float:left; text-align: center; width: 260px">${_('Drag any of the widgets inside your empty row')}</div>
     <div class="clearfix"></div>
@@ -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>
 
-    <div data-bind="barChart: {data: counts, field: field, transformer: barChartDataTransformer, onClick: function(d){viewModel.query.selectFacet({count: d.y,selected: false,value: d.x,cat: field})}}" />
+    <div data-bind="timelineChart: {data: counts, field: field, label: label, transformer: timelineChartDataTransformer, onClick: function(d){viewModel.query.selectFacet({count: d.y,selected: false,value: d.x,cat: field})}}" />
   </div>
   <!-- /ko -->
 </script>
@@ -481,7 +481,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>
 
-    <div data-bind="barChart: {data: counts, field: field, transformer: barChartDataTransformer, onClick: function(d){viewModel.query.selectFacet({count: d.y,selected: false,value: d.x,cat: field})}}" />
+    <div data-bind="barChart: {data: counts, field: field, label: label, transformer: barChartDataTransformer, onClick: function(d){viewModel.query.selectFacet({count: d.y,selected: false,value: d.x,cat: field})}}" />
   </div>
   <!-- /ko -->
 </script>
@@ -597,6 +597,18 @@ function barChartDataTransformer(data) {
   return _data;
 }
 
+function timelineChartDataTransformer(data) {
+  var _data = [];
+  for (var i = 0; i < data.length; i = i + 2) {
+    _data.push({
+      series: 0,
+      x: new Date(moment(data[i]).valueOf()),
+      y: data[i + 1]
+    });
+  }
+  return _data;
+}
+
 $(document).ready(function () {
 
   $(document).on("click", ".widget-settings-pill", function(){

+ 65 - 42
apps/search/static/js/charts.ko.js

@@ -21,7 +21,7 @@ ko.bindingHandlers.pieChart = {
       var _data = _options.transformer(_options.data);
 
       nv.addGraph(function () {
-        var chart = nv.models.pieChart()
+        var _chart = nv.models.pieChart()
                 .x(function (d) {
                   return d.label
                 })
@@ -35,10 +35,10 @@ ko.bindingHandlers.pieChart = {
 
         _d3.datum(_data)
                 .transition().duration(350)
-                .call(chart);
-        nv.utils.windowResize(chart.update);
+                .call(_chart);
+        nv.utils.windowResize(_chart.update);
         $(element).height($(element).width());
-        return chart;
+        return _chart;
       }, function () {
         d3.selectAll(".nv-slice").on('click',
                 function (d, i) {
@@ -52,49 +52,72 @@ ko.bindingHandlers.pieChart = {
     }
   };
 
-  ko.bindingHandlers.barChart = {
-    init: function (element, valueAccessor) {
-      var _options = valueAccessor();
-      var _data = _options.transformer(_options.data);
+ko.bindingHandlers.barChart = {
+  init: function (element, valueAccessor) {
+    barChart(element, valueAccessor(), false);
+  },
+  update: function (element, valueAccessor) {
+    var value = valueAccessor();
+    // do something with the updated value
+  }
+};
 
-      $(element).height(300);
+ko.bindingHandlers.timelineChart = {
+  init: function (element, valueAccessor) {
+    barChart(element, valueAccessor(), true);
+  },
+  update: function (element, valueAccessor) {
+    var value = valueAccessor();
+    // do something with the updated value
+  }
+};
 
-      nv.addGraph(function () {
-        var chart = nv.models.multiBarChart()
-                .margin({bottom: 100})
-                .transitionDuration(300);
+function barChart(element, options, isTimeline) {
 
-        chart.multibar
-                .hideable(true);
+  var _data = options.transformer(options.data);
+  $(element).height(300);
 
-        chart.xAxis
-                .showMaxMin(true)
-                .tickFormat(d3.format(',0f'));
+  if (isTimeline) {
+    console.log(_data);
+  }
 
-        chart.yAxis
-                .tickFormat(d3.format(',0f'));
+  nv.addGraph(function () {
+    var _chart = nv.models.multiBarChart()
+        .margin({bottom: 100})
+        .transitionDuration(300);
 
-        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);
+    _chart.multibar
+        .hideable(true);
+    if (isTimeline) {
+      _chart.xAxis
+          .showMaxMin(true)
+          .tickFormat(d3.time.format("%Y-%m-%d %H:%M:%S"));
+    }
+    else {
+      _chart.xAxis
+          .showMaxMin(true)
+          .tickFormat(d3.format(',0f'));
+    }
+    _chart.yAxis
+        .tickFormat(d3.format(',0f'));
 
-        nv.utils.windowResize(chart.update);
+    var _d3 = ($(element).find('svg').length > 0) ? d3.select($(element).find('svg')[0]) : d3.select($(element)[0]).append('svg');
+    _d3.datum([
+          {
+            key: options.label,
+            values: _data
+          }
+        ])
+        .call(_chart);
 
-        return chart;
-      }, function () {
-        d3.selectAll(".nv-bar").on('click',
-                function (d, i) {
-                  _options.onClick(d);
-                });
-      });
-    },
-    update: function (element, valueAccessor) {
-      var value = valueAccessor();
-      // do something with the updated value
-    }
-  };
+    nv.utils.windowResize(_chart.update);
+
+    return _chart;
+  }, function () {
+    d3.selectAll(".nv-bar").on('click',
+        function (d, i) {
+          options.onClick(d);
+        });
+  });
+
+}