浏览代码

HUE-5969 [charts] Aggregation of line and bar chart

jdesjean 7 年之前
父节点
当前提交
7ae1de0

+ 31 - 6
desktop/core/src/desktop/static/desktop/js/ko.charts.js

@@ -158,13 +158,38 @@
 
 
   ko.bindingHandlers.barChart = {
   ko.bindingHandlers.barChart = {
     init: function (element, valueAccessor) {
     init: function (element, valueAccessor) {
-      window.setTimeout(function () {
-        barChartBuilder(element, valueAccessor(), false);
-      }, 0);
+      var _options = ko.unwrap(valueAccessor());
+      if (_options.type && _options.type() == "line"){
+        window.setTimeout(function(){
+          lineChartBuilder(element, valueAccessor(), false);
+        }, 0);
+        $(element).data("type", "line");
+      }
+      else {
+        window.setTimeout(function(){
+          barChartBuilder(element, valueAccessor(), false);
+        }, 0);
+        $(element).data("type", "bar");
+      }
     },
     },
     update: function (element, valueAccessor) {
     update: function (element, valueAccessor) {
-      var _options = valueAccessor();
-
+      var _options = ko.unwrap(valueAccessor());
+      if (_options.type && _options.type() != $(element).data("type")){
+        if ($(element).find("svg").length > 0) {
+          $(element).find("svg").remove();
+        }
+        if (_options.type() == "line"){
+          window.setTimeout(function(){
+            lineChartBuilder(element, valueAccessor(), false);
+          }, 0);
+        }
+        else {
+          window.setTimeout(function(){
+            barChartBuilder(element, valueAccessor(), false);
+          }, 0);
+        }
+        $(element).data("type", _options.type());
+      }
       var _datum = _options.transformer(_options.datum);
       var _datum = _options.transformer(_options.datum);
       var _chart = $(element).data("chart");
       var _chart = $(element).data("chart");
 
 
@@ -979,7 +1004,7 @@
           }
           }
         }).call(_chart);
         }).call(_chart);
 
 
-      if (_chart.selectBars) {
+      if (_chart.selectBars && options.fqs) {
         var _field = (typeof options.field == "function") ? options.field() : options.field;
         var _field = (typeof options.field == "function") ? options.field() : options.field;
         $.each(options.fqs(), function (cnt, item) {
         $.each(options.fqs(), function (cnt, item) {
           if (item.id() == options.datum.widget_id) {
           if (item.id() == options.datum.widget_id) {

+ 5 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/js/search.ko.js

@@ -604,8 +604,13 @@ var Collection = function (vm, collection) {
     }
     }
   });
   });
 
 
+  collection.template.chartSettings = $.extend(collection.template.chartSettings, collection.template.chartSettings.chartType == 'lines' && { // Retire line chart
+    chartType: 'bars',
+    chartSelectorType: 'line'
+  });
   collection.template.chartSettings = $.extend({
   collection.template.chartSettings = $.extend({
     chartType: 'bars',
     chartType: 'bars',
+    chartSelectorType: 'bar',
     chartSorting: 'none',
     chartSorting: 'none',
     chartScatterGroup: null,
     chartScatterGroup: null,
     chartScatterSize: null,
     chartScatterSize: null,

+ 27 - 11
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -872,6 +872,16 @@ ${ dashboard.layout_skeleton(suffix='search') }
 
 
 <script type="text/html" id="grid-chart-settings">
 <script type="text/html" id="grid-chart-settings">
 <!-- ko if: $parent.widgetType() == 'resultset-widget' -->
 <!-- ko if: $parent.widgetType() == 'resultset-widget' -->
+  <ul class="nav nav-list" style="border: none; background-color: #FFF" data-bind="visible: [ko.HUE_CHARTS.TYPES.TIMELINECHART, ko.HUE_CHARTS.TYPES.BARCHART].indexOf(chartType()) >= 0">
+    <li class="nav-header">${_('Chart Type')}</li>
+  </ul>
+  <div data-bind="visible: [ko.HUE_CHARTS.TYPES.TIMELINECHART, ko.HUE_CHARTS.TYPES.BARCHART].indexOf(chartType()) >= 0">
+    <select class="input-medium" data-bind="options: $root.timelineChartTypes,
+                 optionsText: 'label',
+                 optionsValue: 'value',
+                 value: $root.collection.template.chartSettings.chartSelectorType">
+    </select>
+  </div>
   <ul class="nav nav-list" style="border: none; background-color: #FFF" data-bind="visible: chartType() != ''">
   <ul class="nav nav-list" style="border: none; background-color: #FFF" data-bind="visible: chartType() != ''">
     <li data-bind="visible: [ko.HUE_CHARTS.TYPES.MAP, ko.HUE_CHARTS.TYPES.GRADIENTMAP, ko.HUE_CHARTS.TYPES.PIECHART].indexOf(chartType()) == -1" class="nav-header">${_('x-axis')}</li>
     <li data-bind="visible: [ko.HUE_CHARTS.TYPES.MAP, ko.HUE_CHARTS.TYPES.GRADIENTMAP, ko.HUE_CHARTS.TYPES.PIECHART].indexOf(chartType()) == -1" class="nav-header">${_('x-axis')}</li>
     <li data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.GRADIENTMAP" class="nav-header">${_('region')}</li>
     <li data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.GRADIENTMAP" class="nav-header">${_('region')}</li>
@@ -1329,7 +1339,8 @@ ${ dashboard.layout_skeleton(suffix='search') }
         }
         }
       },
       },
       onSelectRange: function(from, to){ searchViewModel.collection.selectTimelineFacet({from: from, to: to, cat: field, widget_id: $parent.id()}) },
       onSelectRange: function(from, to){ searchViewModel.collection.selectTimelineFacet({from: from, to: to, cat: field, widget_id: $parent.id()}) },
-      onComplete: function(){ searchViewModel.getWidgetById($parent.id()).isLoading(false); huePubSub.publish('gridster.autoheight'); } }"
+      onComplete: function(){ searchViewModel.getWidgetById($parent.id()).isLoading(false); huePubSub.publish('gridster.autoheight'); },
+      type: $root.collection.getFacetById($parent.id()).properties.timelineChartType }"
     />
     />
     <div class="clearfix"></div>
     <div class="clearfix"></div>
     <!-- /ko -->
     <!-- /ko -->
@@ -1357,7 +1368,6 @@ ${ dashboard.layout_skeleton(suffix='search') }
             <i class="fa fa-superscript fa-fw" data-bind="visible: template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.COUNTER"></i>
             <i class="fa fa-superscript fa-fw" data-bind="visible: template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.COUNTER"></i>
             % endif
             % endif
             <i class="hcha hcha-bar-chart fa-fw" data-bind="visible: template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.BARCHART"></i>
             <i class="hcha hcha-bar-chart fa-fw" data-bind="visible: template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.BARCHART"></i>
-            <i class="hcha hcha-line-chart fa-fw" data-bind="visible: template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.LINECHART" style="display: none;"></i>
             <i class="hcha hcha-pie-chart fa-fw" data-bind="visible: template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.PIECHART" style="display: none;"></i>
             <i class="hcha hcha-pie-chart fa-fw" data-bind="visible: template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.PIECHART" style="display: none;"></i>
             <i class="fa fa-fw fa-line-chart" data-bind="visible: template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.TIMELINECHART" style="display: none;"></i>
             <i class="fa fa-fw fa-line-chart" data-bind="visible: template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.TIMELINECHART" style="display: none;"></i>
             <i class="hcha hcha-map-chart fa-fw" data-bind="visible: template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.GRADIENTMAP" style="display: none;"></i>
             <i class="hcha hcha-map-chart fa-fw" data-bind="visible: template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.GRADIENTMAP" style="display: none;"></i>
@@ -1383,12 +1393,6 @@ ${ dashboard.layout_skeleton(suffix='search') }
                 <i class="hcha hcha-bar-chart fa-fw"></i> ${_('Bars')}
                 <i class="hcha hcha-bar-chart fa-fw"></i> ${_('Bars')}
               </a>
               </a>
             </li>
             </li>
-            <li>
-              <a href="javascript:void(0)"
-                 data-bind="css: {'active': template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.LINECHART}, click: function(){ template.showChart(true); template.chartSettings.chartType(ko.HUE_CHARTS.TYPES.LINECHART); template.showGrid(false); huePubSub.publish('gridChartForceUpdate');}">
-                <i class="hcha hcha-line-chart fa-fw"></i> ${_('Lines')}
-              </a>
-            </li>
             <li>
             <li>
               <a href="javascript:void(0)"
               <a href="javascript:void(0)"
                  data-bind="css: {'active': template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.PIECHART}, click: function(){ template.showChart(true); template.chartSettings.chartType(ko.HUE_CHARTS.TYPES.PIECHART); template.showGrid(false); huePubSub.publish('gridChartForceUpdate');}">
                  data-bind="css: {'active': template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.PIECHART}, click: function(){ template.showChart(true); template.chartSettings.chartType(ko.HUE_CHARTS.TYPES.PIECHART); template.showGrid(false); huePubSub.publish('gridChartForceUpdate');}">
@@ -1590,7 +1594,8 @@ ${ dashboard.layout_skeleton(suffix='search') }
                 }
                 }
               },
               },
               onSelectRange: function(from, to){ searchViewModel.collection.selectTimelineFacet2({from: from, to: to, cat: field, widget_id: $parent.id()}) },
               onSelectRange: function(from, to){ searchViewModel.collection.selectTimelineFacet2({from: from, to: to, cat: field, widget_id: $parent.id()}) },
-              onComplete: function(){ searchViewModel.getWidgetById($parent.id()).isLoading(false); huePubSub.publish('gridster.autoheight'); } }"
+              onComplete: function(){ searchViewModel.getWidgetById($parent.id()).isLoading(false); huePubSub.publish('gridster.autoheight'); },
+              type: $root.collection.getFacetById($parent.id()).properties.timelineChartType }"
             />
             />
             <div class="clearfix"></div>
             <div class="clearfix"></div>
           <!-- /ko -->
           <!-- /ko -->
@@ -1604,7 +1609,8 @@ ${ dashboard.layout_skeleton(suffix='search') }
               onClick: function(d) {
               onClick: function(d) {
                 $root.query.togglePivotFacet({facet: d.obj, widget_id: id()});
                 $root.query.togglePivotFacet({facet: d.obj, widget_id: id()});
               },
               },
-              onComplete: function(){ searchViewModel.getWidgetById($parent.id()).isLoading(false); huePubSub.publish('gridster.autoheight'); } }"
+              onComplete: function(){ searchViewModel.getWidgetById($parent.id()).isLoading(false); huePubSub.publish('gridster.autoheight'); },
+              type: $root.collection.getFacetById($parent.id()).properties.timelineChartType }"
             />
             />
             <div class="clearfix"></div>
             <div class="clearfix"></div>
           <!-- /ko -->
           <!-- /ko -->
@@ -1684,7 +1690,7 @@ ${ dashboard.layout_skeleton(suffix='search') }
                 transformer: pieChartDataTransformerGrid, maxWidth: 350, parentSelector: '.chart-container' }, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.PIECHART" class="chart"></div>
                 transformer: pieChartDataTransformerGrid, maxWidth: 350, parentSelector: '.chart-container' }, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.PIECHART" class="chart"></div>
 
 
           <div data-bind="attr:{'id': 'barChart_'+id()}, barChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data}, fqs: ko.observableArray([]), hideSelection: true,
           <div data-bind="attr:{'id': 'barChart_'+id()}, barChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data}, fqs: ko.observableArray([]), hideSelection: true,
-                transformer: multiSerieDataTransformerGrid, stacked: false, showLegend: true},  stacked: true, showLegend: true, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.BARCHART" class="chart"></div>
+                transformer: multiSerieDataTransformerGrid, stacked: false, showLegend: true, type: $root.collection.template.chartSettings.chartSelectorType},  stacked: true, showLegend: true, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.BARCHART" class="chart"></div>
 
 
           <div data-bind="attr:{'id': 'lineChart_'+id()}, lineChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data},
           <div data-bind="attr:{'id': 'lineChart_'+id()}, lineChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data},
                 transformer: multiSerieDataTransformerGrid, showControls: false }, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.LINECHART" class="chart"></div>
                 transformer: multiSerieDataTransformerGrid, showControls: false }, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.LINECHART" class="chart"></div>
@@ -1761,6 +1767,16 @@ ${ dashboard.layout_skeleton(suffix='search') }
           </select>
           </select>
         </div>
         </div>
       <!-- /ko -->
       <!-- /ko -->
+      <!-- ko if: ['bar', 'line'].indexOf(properties.timelineChartType()) >= 0 -->
+      <div class="inline-block" style="padding-bottom: 10px; padding-right: 20px">
+        <span class="facet-field-label">${ _('Chart Type') }</span>
+        <select class="input-small" data-bind="options: $root.timelineChartTypes,
+                     optionsText: 'label',
+                     optionsValue: 'value',
+                     value: properties.timelineChartType">
+        </select>
+      </div>
+       <!-- /ko -->
 
 
       <!-- ko if: properties.canRange -->
       <!-- ko if: properties.canRange -->
         <div class="inline-block" style="padding-bottom: 10px; padding-right: 20px">
         <div class="inline-block" style="padding-bottom: 10px; padding-right: 20px">

+ 4 - 0
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -28,6 +28,10 @@ var EditorViewModel = (function() {
   var Result = function (snippet, result) {
   var Result = function (snippet, result) {
     var self = this;
     var self = this;
 
 
+    snippet = $.extend(snippet, snippet.chartType == 'lines' && { // Retire line chart
+        chartType: 'bars',
+        chartTimelineType: 'line'
+    });
     self.id = ko.observable(typeof result.id != "undefined" && result.id != null ? result.id : UUID());
     self.id = ko.observable(typeof result.id != "undefined" && result.id != null ? result.id : UUID());
     self.type = ko.observable(typeof result.type != "undefined" && result.type != null ? result.type : 'table');
     self.type = ko.observable(typeof result.type != "undefined" && result.type != null ? result.type : 'table');
     self.hasResultset = ko.observable(typeof result.hasResultset != "undefined" && result.hasResultset != null ? result.hasResultset : true)
     self.hasResultset = ko.observable(typeof result.hasResultset != "undefined" && result.hasResultset != null ? result.hasResultset : true)

+ 2 - 8
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -1258,7 +1258,7 @@ ${ sqlSyntaxDropdown.sqlSyntaxDropdown() }
 
 
 <script type="text/html" id="snippet-chart-settings${ suffix }">
 <script type="text/html" id="snippet-chart-settings${ suffix }">
   <div>
   <div>
-    <!-- ko if: chartType() != '' && chartType() == ko.HUE_CHARTS.TYPES.TIMELINECHART -->
+    <!-- ko if: chartType() != '' && [ko.HUE_CHARTS.TYPES.TIMELINECHART, ko.HUE_CHARTS.TYPES.BARCHART].indexOf(chartType()) >= 0  -->
     <ul class="nav nav-list" style="border: none; background-color: #FFF">
     <ul class="nav nav-list" style="border: none; background-color: #FFF">
       <li class="nav-header">${_('type')}</li>
       <li class="nav-header">${_('type')}</li>
     </ul>
     </ul>
@@ -1512,7 +1512,7 @@ ${ sqlSyntaxDropdown.sqlSyntaxDropdown() }
 
 
                 <!-- ko if: chartType() == ko.HUE_CHARTS.TYPES.BARCHART -->
                 <!-- ko if: chartType() == ko.HUE_CHARTS.TYPES.BARCHART -->
                 <div data-bind="attr:{'id': 'barChart_'+id()}, barChart: {skipWindowResize: true, datum: {counts: result.data, sorting: chartSorting(), snippet: $data, limit: chartLimit()}, fqs: ko.observableArray([]), hideSelection: true,
                 <div data-bind="attr:{'id': 'barChart_'+id()}, barChart: {skipWindowResize: true, datum: {counts: result.data, sorting: chartSorting(), snippet: $data, limit: chartLimit()}, fqs: ko.observableArray([]), hideSelection: true,
-                      transformer: editorMultiSerieDataTransformer, stacked: false, showLegend: true, isPivot: typeof chartXPivot() !== 'undefined'},  stacked: true, showLegend: true, visible: chartType() == ko.HUE_CHARTS.TYPES.BARCHART" class="chart"></div>
+                      transformer: editorMultiSerieDataTransformer, stacked: false, showLegend: true, isPivot: typeof chartXPivot() !== 'undefined', type: chartTimelineType},  stacked: true, showLegend: true, visible: chartType() == ko.HUE_CHARTS.TYPES.BARCHART" class="chart"></div>
                 <!-- /ko -->
                 <!-- /ko -->
 
 
                 <!-- ko if: chartType() == ko.HUE_CHARTS.TYPES.LINECHART -->
                 <!-- ko if: chartType() == ko.HUE_CHARTS.TYPES.LINECHART -->
@@ -1854,7 +1854,6 @@ ${ sqlSyntaxDropdown.sqlSyntaxDropdown() }
     <div class="dropdown">
     <div class="dropdown">
       <a class="snippet-side-btn" style="padding-right:0" href="javascript: void(0)" data-bind="css: {'active': $data.showChart }, click: function() { $data.showChart(true); }" >
       <a class="snippet-side-btn" style="padding-right:0" href="javascript: void(0)" data-bind="css: {'active': $data.showChart }, click: function() { $data.showChart(true); }" >
         <i class="hcha fa-fw hcha-bar-chart" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.BARCHART" title="${ _('Bars') }"></i>
         <i class="hcha fa-fw hcha-bar-chart" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.BARCHART" title="${ _('Bars') }"></i>
-        <i class="hcha fa-fw hcha-line-chart" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.LINECHART" title="${ _('Lines') }"></i>
         <i class="hcha fa-fw hcha-timeline-chart" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.TIMELINECHART" title="${ _('Time') }"></i>
         <i class="hcha fa-fw hcha-timeline-chart" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.TIMELINECHART" title="${ _('Time') }"></i>
         <i class="hcha fa-fw hcha-pie-chart" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.PIECHART" title="${ _('Pie') }"></i>
         <i class="hcha fa-fw hcha-pie-chart" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.PIECHART" title="${ _('Pie') }"></i>
         <i class="fa fa-fw fa-dot-circle-o" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.SCATTERCHART" title="${ _('Scatter') }"></i>
         <i class="fa fa-fw fa-dot-circle-o" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.SCATTERCHART" title="${ _('Scatter') }"></i>
@@ -1871,11 +1870,6 @@ ${ sqlSyntaxDropdown.sqlSyntaxDropdown() }
             <i class="hcha hcha-bar-chart"></i> ${_('Bars')}
             <i class="hcha hcha-bar-chart"></i> ${_('Bars')}
           </a>
           </a>
         </li>
         </li>
-        <li>
-          <a href="javascript:void(0)" data-bind="css: {'active': chartType() == ko.HUE_CHARTS.TYPES.LINECHART}, click: function(){ $data.showChart(true); chartType(ko.HUE_CHARTS.TYPES.LINECHART); }">
-            <i class="hcha hcha-line-chart"></i> ${_('Lines')}
-          </a>
-        </li>
         <li data-bind="visible: result.cleanedDateTimeMeta().length > 0">
         <li data-bind="visible: result.cleanedDateTimeMeta().length > 0">
           <a href="javascript:void(0)" data-bind="css: {'active': chartType() == ko.HUE_CHARTS.TYPES.TIMELINECHART}, click: function(){ $data.showChart(true); chartType(ko.HUE_CHARTS.TYPES.TIMELINECHART); }">
           <a href="javascript:void(0)" data-bind="css: {'active': chartType() == ko.HUE_CHARTS.TYPES.TIMELINECHART}, click: function(){ $data.showChart(true); chartType(ko.HUE_CHARTS.TYPES.TIMELINECHART); }">
             <i class="hcha hcha-timeline-chart"></i> ${_('Time')}
             <i class="hcha hcha-timeline-chart"></i> ${_('Time')}