Browse Source

[search] Implemented text squeezer for the Hit Widget

Enrico Berti 10 years ago
parent
commit
8dd6f9b63f

+ 1 - 0
apps/search/src/search/static/search/css/search.css

@@ -523,4 +523,5 @@ em {
   padding: .5em;
   padding-left: 0;
   letter-spacing: .1em;
+  line-height: 1.45;
 }

+ 27 - 15
apps/search/src/search/templates/search.mako

@@ -1084,22 +1084,14 @@ ${ dashboard.layout_skeleton() }
 
   <!-- 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">
-      <span class="facet-field-label">${ _('Metric') }</span>
-      <select data-bind="value: properties.function">
-        <option value="unique" selected="selected" label="${ _('Unique Count') }">${ _('Unique Count') }</option>
-        <option value="avg" label="${ _('Average') }">${ _('Average') }</option>
-        <option value="sum" label="${ _('Sum') }">${ _('Sum') }</option>
-        <option value="min" label="${ _('Min') }">${ _('Min') }</option>
-        <option value="max" label="${ _('Max') }">${ _('Max') }</option>
-        <option value="sumsq" label="${ _('Sum of square') }">${ _('Sum of square') }</option>
-        <option value="percentile" label="${ _('Percentiles') }">${ _('Percentiles') }</option>
-      </select>
+    <div data-bind="with: $root.collection.getFacetById($parent.id())">
+      <div data-bind="visible: $root.isEditing" style="margin-bottom: 20px">
+        <span class="facet-field-label">${ _('Metric') }</span>
+        <select data-bind="options: HIT_OPTIONS, optionsText: 'label', optionsValue: 'value', value: properties.function"></select>
+      </div>
+      <div data-bind="visible: ! $root.isEditing(), text: getHitOption(properties.function())" class="muted"></div>
     </div>
-
-    <span data-bind="text: 'max', visible: ! $root.isEditing()"></span>
-    </br>
-    <span class="big-counter" data-bind="text: counts"></span>
+    <span class="big-counter" data-bind="textSqueezer: counts"></span>
   </div>
   <!-- /ko -->
 </script>
@@ -1461,6 +1453,7 @@ ${ dashboard.import_layout() }
 
 <script src="${ static('search/js/search.utils.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('search/js/lzstring.min.js') }" type="text/javascript" charset="utf-8"></script>
+<script src="${ static('desktop/js/jquery.textsqueezer.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/bootstrap-editable.min.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/js/ko.editable.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/shortcut.js') }" type="text/javascript" charset="utf-8"></script>
@@ -1491,6 +1484,25 @@ var viewModel;
 
 nv.dev = false;
 
+var HIT_OPTIONS = [
+  { value: "unique", label: "${ _('Unique Count') }" },
+  { value: "avg", label: "${ _('Average') }" },
+  { value: "sum", label: "${ _('Sum') }" },
+  { value: "min", label: "${ _('Min') }" },
+  { value: "max", label: "${ _('Max') }" },
+  { value: "sumsq", label: "${ _('Sum of square') }" },
+  { value: "percentile", label: "${ _('Percentiles') }" }
+];
+
+function getHitOption(value){
+  for (var i=0;i<HIT_OPTIONS.length;i++){
+    if (HIT_OPTIONS[i].value == value){
+      return HIT_OPTIONS[i].label;
+    }
+  }
+  return '';
+}
+
 var lastWindowScrollPosition = 0;
 
 function pieChartDataTransformer(data) {

+ 21 - 0
desktop/core/src/desktop/static/desktop/css/common_dashboard.css

@@ -158,6 +158,27 @@
   color: #CCC;
 }
 
+@media (max-width: 1438px) {
+  .draggable-widget {
+    width: 50px;
+  }
+
+  .draggable-widget a {
+    font-size: 24px;
+  }
+}
+
+@media (max-width: 1300px) {
+  .draggable-widget {
+    width: 40px;
+  }
+
+  .draggable-widget a {
+    font-size: 20px;
+  }
+}
+
+
 .layout-container {
   width: 100px;
   float: left;

+ 57 - 0
desktop/core/src/desktop/static/desktop/js/jquery.textsqueezer.js

@@ -0,0 +1,57 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+(function ($) {
+  $.fn.textSqueezer = function (options) {
+    var settings = $.extend({
+         maxIterations : 40,
+         decimalPrecision: -1
+      }, options),
+        iters = 0,
+        startSqueeze = function (el) {
+          $(el).removeAttr("style");
+          if (settings.decimalPrecision > -1){
+            var _n = parseFloat($(el).text());
+            if ($.isNumeric(_n)){
+              $(el).text(+_n.toFixed(settings.decimalPrecision));
+            }
+          }
+          iters = 0;
+          squeeze(el);
+        },
+        squeeze = function (el) {
+          iters++;
+          var $el = $(el);
+          var _fontStep = 2;
+          // limit on iters to avoid stackoverflow for very long strings
+          if (iters < settings.maxIterations && $el.width() > $el.parent().width()) {
+            $el.css('font-size', (($el.css('font-size').substr(0, 2) - _fontStep)) + 'px').css('line-height', (($el.css('font-size').substr(0, 2))) + 'px');
+            squeeze(el);
+          }
+        }
+
+    return this.each(function () {
+      var that = this;
+      $(window).resize(function () {
+        startSqueeze(that);
+      });
+      $(this).on("redraw", function () {
+        startSqueeze(that);
+      });
+      startSqueeze(this);
+    });
+  };
+}(jQuery));

+ 15 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -1319,3 +1319,18 @@ ko.bindingHandlers.timepicker = {
 
     }
 }
+
+ko.bindingHandlers.textSqueezer = {
+  init: function (element, valueAccessor) {
+    var value = valueAccessor();
+    $(element).text(ko.unwrap(value));
+    $(element).textSqueezer({
+      decimalPrecision: 2
+    });
+  },
+  update: function (element, valueAccessor) {
+    var value = valueAccessor();
+    $(element).text(ko.unwrap(value));
+    $(element).trigger("redraw");
+  }
+};