Browse Source

HUE-8190 [dashboard] Support switching an existing widget to text facet

Romain Rigaux 7 years ago
parent
commit
6ddc00b231

+ 1 - 0
desktop/core/src/desktop/static/desktop/js/ko.charts.js

@@ -22,6 +22,7 @@
       LINECHART: "lines",
       LINECHART: "lines",
       BARCHART: "bars",
       BARCHART: "bars",
       TIMELINECHART: "timeline",
       TIMELINECHART: "timeline",
+      TEXTSELECT: "textselect",
       POINTCHART: "points",
       POINTCHART: "points",
       PIECHART: "pie",
       PIECHART: "pie",
       MAP: "map",
       MAP: "map",

+ 2 - 1
desktop/libs/dashboard/src/dashboard/static/dashboard/js/search.ko.js

@@ -858,7 +858,8 @@ var Collection = function (vm, collection) {
             newValue == ko.HUE_CHARTS.TYPES.PIECHART ? 'pie2-widget' :
             newValue == ko.HUE_CHARTS.TYPES.PIECHART ? 'pie2-widget' :
             (newValue == ko.HUE_CHARTS.TYPES.TIMELINECHART ? 'timeline-widget' :
             (newValue == ko.HUE_CHARTS.TYPES.TIMELINECHART ? 'timeline-widget' :
             (newValue == ko.HUE_CHARTS.TYPES.GRADIENTMAP ? 'gradient-map-widget' :
             (newValue == ko.HUE_CHARTS.TYPES.GRADIENTMAP ? 'gradient-map-widget' :
-            (newValue == ko.HUE_CHARTS.TYPES.COUNTER ? 'hit-widget' : 'bucket-widget')))
+            (newValue == ko.HUE_CHARTS.TYPES.COUNTER ? 'hit-widget' :
+            (newValue == ko.HUE_CHARTS.TYPES.TEXTSELECT ? 'text-facet-widget' : 'bucket-widget'))))
         );
         );
       });
       });
 
 

+ 17 - 0
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -733,16 +733,21 @@ ${ dashboard.layout_skeleton(suffix='search') }
 
 
 
 
 <script type="text/html" id="text-facet-widget">
 <script type="text/html" id="text-facet-widget">
+  ## When coming from a widget chart switch
+  <!-- ko if: typeof isLoading !== 'undefined' -->
   <div class="widget-spinner" data-bind="visible: isLoading()">
   <div class="widget-spinner" data-bind="visible: isLoading()">
     <i class="fa fa-spinner fa-spin"></i>
     <i class="fa fa-spinner fa-spin"></i>
   </div>
   </div>
+  <!-- /ko -->
 
 
   <!-- ko if: $root.getFacetFromQuery(id()).has_data() -->
   <!-- ko if: $root.getFacetFromQuery(id()).has_data() -->
   <div class="row-fluid" data-bind="with: $root.getFacetFromQuery(id())">
   <div class="row-fluid" data-bind="with: $root.getFacetFromQuery(id())">
+    <!-- ko if: typeof isLoading !== 'undefined' -->
     <div data-bind="visible: $root.isGridster() || $root.isEditing(), with: $root.collection.getFacetById($parent.id())" style="margin-bottom: 20px">
     <div data-bind="visible: $root.isGridster() || $root.isEditing(), with: $root.collection.getFacetById($parent.id())" style="margin-bottom: 20px">
       <span data-bind="template: { name: 'facet-toggle2', afterRender: function(){ $root.getWidgetById($parent.id()).isLoading(false); } }">
       <span data-bind="template: { name: 'facet-toggle2', afterRender: function(){ $root.getWidgetById($parent.id()).isLoading(false); } }">
       </span>
       </span>
     </div>
     </div>
+    <!-- /ko -->
     <div class="clearfix"></div>
     <div class="clearfix"></div>
     <div data-bind="with: $root.collection.getFacetById($parent.id())">
     <div data-bind="with: $root.collection.getFacetById($parent.id())">
       <!-- ko if: properties.facets()[0].type() == 'field' -->
       <!-- ko if: properties.facets()[0].type() == 'field' -->
@@ -1366,6 +1371,7 @@ ${ dashboard.layout_skeleton(suffix='search') }
              data-bind="css: {'active': template.showChart() }, click: function(){ template.showChart(true); template.showGrid(false); huePubSub.publish('gridChartForceUpdate'); }">
              data-bind="css: {'active': template.showChart() }, click: function(){ template.showChart(true); template.showGrid(false); huePubSub.publish('gridChartForceUpdate'); }">
             % if HAS_REPORT_ENABLED.get():
             % if HAS_REPORT_ENABLED.get():
             <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>
+            <i class="fa fa-sort-amount-asc fa-fw" data-bind="visible: template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.TEXTSELECT"></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-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>
@@ -1386,6 +1392,13 @@ ${ dashboard.layout_skeleton(suffix='search') }
                 <i class="fa fa-superscript fa-fw"></i> ${_('Counter')}
                 <i class="fa fa-superscript fa-fw"></i> ${_('Counter')}
               </a>
               </a>
             </li>
             </li>
+            <li>
+              <a href="javascript:void(0)"
+                 data-bind="css: {'active': template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.TEXTSELECT}, click: function(){ template.showChart(true); template.chartSettings.chartType(ko.HUE_CHARTS.TYPES.TEXTSELECT); template.showGrid(false); huePubSub.publish('gridChartForceUpdate');}"
+                 class="active">
+                <i class="fa fa-sort-amount-asc fa-fw"></i> ${_('Text select')}
+              </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.BARCHART}, click: function(){ template.showChart(true); template.chartSettings.chartType(ko.HUE_CHARTS.TYPES.BARCHART); template.showGrid(false); huePubSub.publish('gridChartForceUpdate');}"
                  data-bind="css: {'active': template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.BARCHART}, click: function(){ template.showChart(true); template.chartSettings.chartType(ko.HUE_CHARTS.TYPES.BARCHART); template.showGrid(false); huePubSub.publish('gridChartForceUpdate');}"
@@ -1574,6 +1587,10 @@ ${ dashboard.layout_skeleton(suffix='search') }
           <!-- /ko -->
           <!-- /ko -->
         <!-- /ko -->
         <!-- /ko -->
 
 
+        <!-- ko if: widgetType() == 'text-facet-widget' -->
+          <span data-bind="template: { name: 'text-facet-widget' }"></span>
+        <!-- /ko -->
+
         <!-- ko if: widgetType() == 'bucket-widget' -->
         <!-- ko if: widgetType() == 'bucket-widget' -->
           <!-- ko with: $parent -->
           <!-- ko with: $parent -->