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

HUE-2173 [dashboard] Port timeline to the nested facets

Romain Rigaux пре 8 година
родитељ
комит
35a2e09

+ 5 - 4
desktop/libs/dashboard/src/dashboard/api.py

@@ -392,7 +392,7 @@ def _create_facet(collection, user, facet_id, facet_label, facet_field, widget_t
       facet_type = 'field'
 
     if widget_type in ('bucket-widget', 'pie2-widget', 'timeline-widget', 'tree2-widget', 'text-facet-widget', 'hit-widget', 'gradient-map-widget'):
-      properties = {'canRange': False, 'stacked': False, 'limit': 10} # Lighter weight top nested facet
+      # properties = {'canRange': False, 'stacked': False, 'limit': 10} # TODO: Lighter weight top nested facet
 
       if widget_type == 'text-facet-widget':
         properties['type'] = facet_type
@@ -403,10 +403,11 @@ def _create_facet(collection, user, facet_id, facet_label, facet_field, widget_t
       facet['limit'] = 10
 
       if range_properties:
+        # TODO: timeline still uses properties from top properties
         facet.update(range_properties)
-        facet['initial_gap'] = properties['gap']
-        facet['initial_start'] = properties['start']
-        facet['initial_end'] = properties['end']
+        facet['initial_gap'] = facet['gap']
+        facet['initial_start'] = facet['start']
+        facet['initial_end'] = facet['end']
         facet['stacked'] = False
         facet['type'] = 'range'
       else:

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

@@ -1511,6 +1511,24 @@ var Collection = function (vm, collection) {
     vm.search();
   }
 
+  self.rangeZoomOut2 = function (facet_json) {
+    var facet_id = ko.mapping.toJS(facet_json).id;
+    var facet = self.getFacetById(facet_id).properties.facets()[0]; // 1 dimension only currently
+
+    vm.query.removeFilter(ko.mapping.fromJS({'id': facet_id}));
+    if (facet.gap() != null) { // Bar, line charts don't have gap
+      facet.gap(facet.initial_gap());
+    }
+    if (facet.initial_start() != null) { // Bar and line charts
+      facet.start(facet.initial_start());
+      facet.end(facet.initial_end());
+      facet.min(facet.initial_start());
+      facet.max(facet.initial_end());
+    }
+
+    vm.search();
+  }
+
   self.translateSelectedField = function (index, direction, template) {
     var array = template.fieldsSelected();
     if (self.template == template) {

+ 48 - 49
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -1224,13 +1224,13 @@ ${ dashboard.layout_skeleton(suffix='search') }
         </select>&nbsp;
       </span>
       <span class="facet-field-label">${ _('Zoom') }</span>
-      <a href="javascript:void(0)" data-bind="click: $root.collection.rangeZoomOut"><i class="fa fa-search-minus"></i> ${ _('reset') }</a>
+      <a href="javascript:void(0)" data-bind="click: $root.collection.rangeZoomOut2"><i class="fa fa-search-minus"></i> ${ _('reset') }</a>
       <span class="facet-field-label" data-bind="visible: $root.query.multiqs().length > 1">${ _('Group by') }</span>
       <select class="input-medium" data-bind="visible: $root.query.multiqs().length > 1, options: $root.query.multiqs, optionsValue: 'id', optionsText: 'label', value: $root.query.selectedMultiq"></select>
     </div>
 
     <span data-bind="template: { name: 'data-grid' }"></span>
-  <!-- /ko -->
+    <!-- /ko -->
   </div>
   <!-- /ko -->
 </script>
@@ -1493,9 +1493,9 @@ ${ dashboard.layout_skeleton(suffix='search') }
         </div>
       </div>
 
-         <div data-bind="visible: $parent.hasRetrievedResults() && $parent.results().length > 0 && template.showChart()">
-           <div data-bind="visible: ! template.hasDataForChart()" style="padding: 10px">${ _('Please select the chart parameters on the left.') }</div>
-           <div class="grid-chart-container" data-bind="visible: template.hasDataForChart" style="overflow-x: auto">
+      <div data-bind="visible: $parent.hasRetrievedResults() && $parent.results().length > 0 && template.showChart()">
+        <div data-bind="visible: ! template.hasDataForChart()" style="padding: 10px">${ _('Please select the chart parameters on the left.') }</div>
+        <div class="grid-chart-container" data-bind="visible: template.hasDataForChart" style="overflow-x: auto">
 
         <!-- ko if: widgetType() == 'bucket-widget' -->
           <!-- ko with: $parent -->
@@ -1547,8 +1547,8 @@ ${ dashboard.layout_skeleton(suffix='search') }
             <div class="clearfix"></div>
           <!-- /ko -->
 
-           <!-- /ko -->
-         <!-- /ko -->
+          <!-- /ko -->
+        <!-- /ko -->
 
         <!-- ko if: widgetType() == 'gradient-map-widget' -->
           <!-- ko with: $parent -->
@@ -1561,7 +1561,7 @@ ${ dashboard.layout_skeleton(suffix='search') }
               },
               onComplete: function(){ var widget = searchViewModel.getWidgetById($parent.id()); if (widget != null) { widget.isLoading(false)}; } }" />
            <!-- /ko -->
-         <!-- /ko -->
+        <!-- /ko -->
 
         <!-- ko if: widgetType() == 'timeline-widget' -->
           <!-- ko with: $parent -->
@@ -1576,54 +1576,53 @@ ${ dashboard.layout_skeleton(suffix='search') }
           <!-- /ko -->
         <!-- /ko -->
 
+        <!-- ko if: widgetType() == 'pie2-widget' -->
+          <!-- 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){ searchViewModel.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(){ searchViewModel.getWidgetById($parent.id()).isLoading(false)} }" />
+          <div class="clearfix"></div>
+          <!-- /ko -->
 
-    <!-- ko if: widgetType() == 'pie2-widget' -->
-      <!-- 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){ searchViewModel.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(){ searchViewModel.getWidgetById($parent.id()).isLoading(false)} }" />
-      <div class="clearfix"></div>
-      <!-- /ko -->
-
-      <!-- ko if: type() == 'range-up' -->
-      <div data-bind="pieChart: {data: {counts: $parent.counts(), widget_id: $parent.id()}, field: field, fqs: $root.query.fqs,
-        transformer: rangeUpPieChartDataTransformer,
-        rangeUp: true,
-        maxWidth: 250,
-        onClick: function(d){ searchViewModel.query.selectRangeUpFacet({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, 'exclude': false, is_up: d.data.obj.is_up}) },
-        onComplete: function(){ searchViewModel.getWidgetById($parent.id()).isLoading(false)} }" />
-      <div class="clearfix"></div>
-      <!-- /ko -->
+          <!-- ko if: type() == 'range-up' -->
+          <div data-bind="pieChart: {data: {counts: $parent.counts(), widget_id: $parent.id()}, field: field, fqs: $root.query.fqs,
+            transformer: rangeUpPieChartDataTransformer,
+            rangeUp: true,
+            maxWidth: 250,
+            onClick: function(d){ searchViewModel.query.selectRangeUpFacet({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, 'exclude': false, is_up: d.data.obj.is_up}) },
+            onComplete: function(){ searchViewModel.getWidgetById($parent.id()).isLoading(false)} }" />
+          <div class="clearfix"></div>
+          <!-- /ko -->
 
-      <!-- ko if: type().indexOf('range') == -1 -->
-      <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){ searchViewModel.query.toggleFacet({facet: d.data.obj, widget_id: d.data.obj.widget_id}) },
-        onComplete: function(){ searchViewModel.getWidgetById($parent.id()).isLoading(false)} }" />
-      <div class="clearfix"></div>
-      <!-- /ko -->
-    <!-- /ko -->
+          <!-- ko if: type().indexOf('range') == -1 -->
+          <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){ searchViewModel.query.toggleFacet({facet: d.data.obj, widget_id: d.data.obj.widget_id}) },
+            onComplete: function(){ searchViewModel.getWidgetById($parent.id()).isLoading(false)} }" />
+          <div class="clearfix"></div>
+          <!-- /ko -->
+        <!-- /ko -->
 
-         <!-- ko if: widgetType() == 'resultset-widget' -->
-            <div data-bind="attr:{'id': 'pieChart_'+id()}, pieChart: {data: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data}, fqs: ko.observableArray([]),
-                  transformer: pieChartDataTransformerGrid, maxWidth: 350, parentSelector: '.chart-container' }, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.PIECHART" class="chart"></div>
+        <!-- ko if: widgetType() == 'resultset-widget' -->
+          <div data-bind="attr:{'id': 'pieChart_'+id()}, pieChart: {data: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data}, fqs: ko.observableArray([]),
+                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,
-                  transformer: multiSerieDataTransformerGrid, stacked: false, showLegend: true},  stacked: true, showLegend: true, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.BARCHART" 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,
+                transformer: multiSerieDataTransformerGrid, stacked: false, showLegend: true},  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},
-                  transformer: multiSerieDataTransformerGrid, showControls: false }, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.LINECHART" class="chart"></div>
+          <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>
 
-            <div data-bind="attr: {'id': 'leafletMapChart_'+id()}, leafletMapChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data},
-                  transformer: leafletMapChartDataTransformerGrid, showControls: false, height: 380, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.MAP, forceRedraw: true}" class="chart"></div>
-            <div class="clearfix"></div>
-         <!-- /ko -->
+          <div data-bind="attr: {'id': 'leafletMapChart_'+id()}, leafletMapChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data},
+                transformer: leafletMapChartDataTransformerGrid, showControls: false, height: 380, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.MAP, forceRedraw: true}" class="chart"></div>
+          <div class="clearfix"></div>
+        <!-- /ko -->
 
-           </div>
-         </div>
+       </div>
+     </div>
 
     </div>
   </div>