Răsfoiți Sursa

HUE-2173 [search] Skeleton of Analytic gradient map widget

Romain Rigaux 9 ani în urmă
părinte
comite
054afea

+ 6 - 5
apps/search/src/search/static/search/js/search.ko.js

@@ -1339,12 +1339,12 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
   self.draggableFacet = ko.observable(bareWidgetBuilder("Facet", "facet-widget"));
   self.draggableResultset = ko.observable(bareWidgetBuilder("Grid Results", "resultset-widget"));
   self.draggableHtmlResultset = ko.observable(bareWidgetBuilder("HTML Results", "html-resultset-widget"));
-  self.draggableHistogram = ko.observable(bareWidgetBuilder("Histogram", "histogram-widget"));
-  self.draggableBar = ko.observable(bareWidgetBuilder("Bar Chart", "bar-widget"));
-  self.draggableMap = ko.observable(bareWidgetBuilder("Map", "map-widget"));
+  self.draggableHistogram = ko.observable(bareWidgetBuilder("Histogram", "histogram-widget")); // Deprecated
+  self.draggableBar = ko.observable(bareWidgetBuilder("Bar Chart", "bar-widget")); // Deprecated
+  self.draggableMap = ko.observable(bareWidgetBuilder("Map", "map-widget")); // Deprecated
   self.draggableLeafletMap = ko.observable(bareWidgetBuilder("Marker Map", "leafletmap-widget"));
-  self.draggableLine = ko.observable(bareWidgetBuilder("Line Chart", "line-widget"));
-  self.draggablePie = ko.observable(bareWidgetBuilder("Pie Chart", "pie-widget"));
+  self.draggableLine = ko.observable(bareWidgetBuilder("Line Chart", "line-widget")); // Deprecated
+  self.draggablePie = ko.observable(bareWidgetBuilder("Pie Chart", "pie-widget")); // Deprecated
   self.draggablePie2 = ko.observable(bareWidgetBuilder("Pie Chart", "pie2-widget"));
   self.draggableFilter = ko.observable(bareWidgetBuilder("Filter Bar", "filter-widget"));
   self.draggableTree = ko.observable(bareWidgetBuilder("Tree", "tree-widget"));
@@ -1352,6 +1352,7 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
   self.draggableCounter = ko.observable(bareWidgetBuilder("Counter", "hit-widget"));
   self.draggableBucket = ko.observable(bareWidgetBuilder("Chart", "bucket-widget"));
   self.draggableTimeline = ko.observable(bareWidgetBuilder("Timeline", "timeline-widget"));
+  self.draggableGradienMap = ko.observable(bareWidgetBuilder("Gradient Map", "gradient-map-widget"));
 
   self.availableDateFields = ko.computed(function() {
     return $.grep(self.collection.availableFacetFields(), function(field) { return DATE_TYPES.indexOf(field.type()) != -1; });

+ 85 - 2
apps/search/src/search/templates/search.mako

@@ -272,7 +272,7 @@ ${ commonheader(_('Search'), "search", user, request, "80px") | n,unicode }
                        <i class="hcha hcha-timeline-chart"></i>
          </a>
     </div>
-    <div data-bind="css: { 'draggable-widget': true, 'disabled': ! availableDraggableMap() },
+    <div data-bind="visible: ! $root.isLatest(), css: { 'draggable-widget': true, 'disabled': ! availableDraggableMap() },
                     draggable: {data: draggableMap(), isEnabled: availableDraggableMap,
                     options: {'start': function(event, ui){lastWindowScrollPosition = $(window).scrollTop();$('.card-body').slideUp('fast');},
                               'stop': function(event, ui){$('.card-body').slideDown('fast', function(){$(window).scrollTop(lastWindowScrollPosition)});}}}"
@@ -281,6 +281,15 @@ ${ commonheader(_('Search'), "search", user, request, "80px") | n,unicode }
                        <i class="hcha hcha-map-chart"></i>
          </a>
    </div>
+    <div data-bind="visible: $root.isLatest(), css: { 'draggable-widget': true, 'disabled': ! availableDraggableMap() },
+                    draggable: {data: draggableGradienMap(), isEnabled: availableDraggableMap,
+                    options: {'start': function(event, ui){lastWindowScrollPosition = $(window).scrollTop();$('.card-body').slideUp('fast');},
+                              'stop': function(event, ui){$('.card-body').slideDown('fast', function(){$(window).scrollTop(lastWindowScrollPosition)});}}}"
+         title="${_('Gradient Map')}" rel="tooltip" data-placement="top">
+         <a data-bind="style: { cursor: $root.availableDraggableMap() ? 'move' : 'default' }">
+                       <i class="hcha hcha-map-chart"></i>
+         </a>
+   </div>   
       </%def>
 </%dashboard:layout_toolbar>
 
@@ -378,7 +387,7 @@ ${ dashboard.layout_skeleton() }
       </div>
     <!-- /ko -->
 
-    <!-- ko if: widgetType() == 'map-widget' -->
+    <!-- ko if: widgetType() == 'map-widget' || widgetType() == 'gradient-map-widget' -->
       <div class="facet-field-cnt">
         <span class="spinedit-cnt">
           <span class="facet-field-label facet-field-label-fixed-width">
@@ -1928,6 +1937,80 @@ ${ dashboard.layout_skeleton() }
 </script>
 
 
+<script type="text/html" id="gradient-map-widget">
+  <!-- ko if: $root.getFacetFromQuery(id()).has_data() -->
+  <div class="row-fluid" data-bind="with: $root.getFacetFromQuery(id())">
+    <div data-bind="visible: $root.isEditing, with: $root.collection.getFacetById($parent.id())" style="margin-bottom: 20px">
+      <div class="floating-facet-toggle-section">
+        <span data-bind="template: { name: 'facet-toggle', afterRender: function(){ $root.getWidgetById($parent.id()).isLoading(false); } }">
+        </span>
+      </div>
+      <div class="dimensions-header margin-bottom-10" data-bind="visible: $root.isEditing() && $data.properties.facets().length > 0">
+        <span class="muted">${ _('Selected dimension') }</span>
+      </div>
+      <div data-bind="foreach: $data.properties.facets, visible: $root.isEditing">
+        <div class="filter-box">
+          <div class="title">
+            <a data-bind="click: function() { $root.collection.removePivotFacetValue({'pivot_facet': $parent, 'value': $data}); }" class="pull-right" href="javascript:void(0)">
+              <i class="fa fa-times"></i>
+            </a>
+            <span data-bind="text: field"></span>
+            &nbsp;
+          </div>
+
+          <div class="content">
+            <div class="facet-field-cnt">
+              <span class="spinedit-cnt">
+                <span class="facet-field-label facet-field-label-fixed-width">
+                  ${ _('Limit') }
+                </span>
+                <input type="text" class="input-medium" data-bind="spinedit: limit"/>
+              </span>
+            </div>
+
+            <div class="facet-field-cnt">
+              <span class="spinedit-cnt">
+                <span class="facet-field-label facet-field-label-fixed-width">
+                  ${ _('Min Count') }
+                </span>
+                <input type="text" class="input-medium" data-bind="spinedit: mincount"/>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="clearfix"></div>
+    </div>
+
+    <div class="margin-bottom-10" data-bind="visible: ! $root.isEditing()">
+      <div data-bind="with: $root.collection.getFacetById($parent.id())">
+        <!-- ko if: $data.properties.facets().length == 1 -->
+          <div class="margin-bottom-10">
+            <span data-bind="text: $data.properties.facets()[0].field"></span>
+          </div>
+        <!-- /ko -->
+      </div>
+    </div>
+
+    <div data-bind="with: $root.collection.getFacetById($parent.id())">
+      <div data-bind="mapChart: {data: {counts: $parent.counts(), scope: $root.collection.getFacetById($parent.id()).properties.scope()},
+        transformer: mapChartDataTransformer,
+        maxWidth: 750,
+        isScale: true,
+        onClick: function(d) {
+          $root.query.togglePivotFacet({facet: {'fq_fields': d.fields, 'fq_values': d.value}, widget_id: id()});
+        },
+        onComplete: function(){ var widget = viewModel.getWidgetById($parent.id()); if (widget != null) { widget.isLoading(false)}; } }" />
+    </div>
+  </div>
+  <!-- /ko -->
+  <div class="widget-spinner" data-bind="visible: isLoading()">
+    <!--[if !IE]> --><i class="fa fa-spinner fa-spin"></i><!-- <![endif]-->
+    <!--[if IE]><img src="${ static('desktop/art/spinner.gif') }" /><![endif]-->
+  </div>
+</script>
+
+
 <script type="text/html" id="leafletmap-widget">
   <div class="row-fluid">
     <div data-bind="visible: $root.isEditing" style="margin-top: 10px; margin-bottom: 20px;" class="leaflet-align">

+ 6 - 0
apps/search/src/search/views.py

@@ -519,6 +519,12 @@ def _create_facet(collection, user, facet_id, facet_label, facet_field, widget_t
     facet_type = 'pivot'
   elif widget_type == 'hit-widget':
     facet_type = 'function'
+  elif widget_type == 'gradient-map-widget':
+    facet_type = 'nested'
+    properties['facets'] = []
+    properties['facets_form'] = {'field': '', 'mincount': 1, 'limit': 10, 'aggregate': 'count'}
+    properties['scope'] = 'world'
+    properties['limit'] = 100
   else:
     solr_api = SolrApi(SOLR_URL.get(), user)
     range_properties = _new_range_facet(solr_api, collection, facet_field, widget_type)