getredash/redash#2796 Improve counter text scaling (#2840)

client/app/assets/less/inc/visualizations/counter-render.less

@@ -3,52 +3,43 @@ counter-renderer {
   text-align: center;
   padding: 15px 10px;
   overflow: hidden;
-}
 
-counter-renderer counter {
-  margin: 0;
-  padding: 0;
-  display: block;
-  font-size: 80px;
-  overflow: hidden;
-  height: 200px;
-}
+  counter {
+    margin: 0;
+    padding: 0;
+    font-size: 80px;
+    line-height: normal;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-counter-renderer value,
-counter-renderer counter-name,
-counter-renderer counter-target {
-  font-size: 1em;
-  line-height: 1em;
-  display: block;
-}
+    value,
+    counter-target {
+      font-size: 1em;
+      display: block;
+    }
 
-counter-renderer value .ruler,
-counter-renderer counter-name .ruler,
-counter-renderer counter-target .ruler {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font: inherit;
-  line-height: inherit;
-  margin: 0;
-  padding: 0;
-}
+    counter-name {
+      font-size: 0.5em;
+      display: block;
+    }
 
-counter-renderer counter-target {
-  color: #ccc;
-}
+    &.positive value {
+      color: #5cb85c;
+    }
 
-counter-renderer counter.positive value {
-  color: #5cb85c;
-}
+    &.negative value {
+      color: #d9534f;
+    }
+  }
 
-counter-renderer counter.negative value {
-  color: #d9534f;
-  margin-right: 15px;
-}
+  counter-target {
+    color: #ccc;
+  }
 
-counter-renderer counter-name {
-  font-size: 0.5em;
-  display: block;
+  counter-name {
+    font-size: 0.5em;
+    display: block;
+  }
 }

client/app/visualizations/counter/counter-editor.html

@@ -7,7 +7,7 @@
       <a ng-click="changeTab('format')">Format</a>
     </li>
   </ul>
-  <div ng-show="currentTab == 'general'">
+  <div ng-show="currentTab == 'general'" class="m-t-10 m-b-10">
     <div class="form-group">
       <label class="col-lg-6">Counter Value Column Name</label>
       <div class="col-lg-6">
@@ -36,13 +36,15 @@
     </div>
     <div class="form-group">
       <div class="col-lg-6">
-        <input type="checkbox" ng-model="visualization.options.countRow">
-        <i class="input-helper"></i> Count Rows
+        <label>
+          <input type="checkbox" ng-model="visualization.options.countRow">
+          Count Rows
+        </label>
       </div>
     </div>
   </div>
 
-  <div ng-show="currentTab == 'format'">
+  <div ng-show="currentTab == 'format'" class="m-t-10 m-b-10">
     <div class="form-group">
       <label class="col-lg-6">Formatting Decimal Place</label>
       <div class="col-lg-6">

client/app/visualizations/counter/counter.html

@@ -1,16 +1,17 @@
 <counter
   ng-class="{'positive': targetValue && trendPositive, 'negative': targetValue && !trendPositive}"
-  ng-style="{'font-size': fontSize}" resize-event="handleResize()">
-  <value ng-if="isNumber"><span class="ruler"
-    title="{{stringPrefix}}{{counterValue|number}}{{stringSuffix}}"
-  >{{stringPrefix}}{{counterValue|number}}{{stringSuffix}}</span></value>
-  <value ng-if="!isNumber"><span class="ruler"
-    title="{{stringPrefix}}{{counterValue}}{{stringSuffix}}"
-  >{{stringPrefix}}{{counterValue}}{{stringSuffix}}</span></value>
-  <counter-target ng-if="targetValue"
-    title="({{targetValue|number}})"
-  ><span class="ruler">({{targetValue|number}})</span></counter-target>
-  <counter-name><span class="ruler"
-    title="{{visualization.name}}"
-  >{{visualization.name}}</span></counter-name>
+  resize-event="handleResize()"
+>
+  <div ng-style="{
+    '-o-transform': 'scale(' + scale + ')',
+    '-ms-transform': 'scale(' + scale + ')',
+    '-moz-transform': 'scale(' + scale + ')',
+    '-webkit-transform': 'scale(' + scale + ')',
+    'transform': 'scale(' + scale + ')'
+  }">
+    <value ng-if="isNumber">{{stringPrefix}}{{counterValue | number}}{{stringSuffix}}</value>
+    <value ng-if="!isNumber">{{stringPrefix}}{{counterValue}}{{stringSuffix}}</value>
+    <counter-target ng-if="targetValue" title="({{targetValue | number}})">({{targetValue | number}})</counter-target>
+    <counter-name>{{visualization.name}}</counter-name>
+  </div>
 </counter>

client/app/visualizations/counter/index.js

@@ -1,5 +1,5 @@
 import numberFormat from 'underscore.string/numberFormat';
-import { isNumber, chain } from 'lodash';
+import { isNumber } from 'lodash';
 
 import counterTemplate from './counter.html';
 import counterEditorTemplate from './counter-editor.html';
@@ -23,33 +23,15 @@ function CounterRenderer($timeout) {
     link($scope, $element) {
       $scope.fontSize = '1em';
 
-      const rootNode = $element[0].querySelector('counter');
+      $scope.scale = 1;
+      const root = $element[0].querySelector('counter');
+      const container = $element[0].querySelector('counter > div');
       $scope.handleResize = () => {
-        const rootMeasures = {
-          height: Math.floor(rootNode.offsetHeight),
-          fontSize: parseFloat(window.getComputedStyle(rootNode).fontSize),
-        };
-        const rulers = rootNode.querySelectorAll('.ruler');
-        const rulerMeasures = chain(rulers)
-          .map(ruler => ({
-            height: ruler.offsetHeight,
-            fontSize: parseFloat(window.getComputedStyle(ruler).fontSize),
-          }))
-          .reduce((result, value) => ({
-            height: result.height + value.height,
-            fontSize: result.fontSize + value.fontSize,
-          }))
-          .value();
-
-        /* eslint-disable function-paren-newline */
-        const fontSize = Math.floor(
-          rootMeasures.height /
-            rulerMeasures.height *
-            rulerMeasures.fontSize /
-            (rulerMeasures.fontSize / rootMeasures.fontSize),
+        const scale = Math.min(
+          root.offsetWidth / container.offsetWidth,
+          root.offsetHeight / container.offsetHeight,
         );
-        /* eslint-enable function-paren-newline */
-        $scope.fontSize = fontSize + 'px';
+        $scope.scale = Math.floor(scale * 100) / 100; // keep only two decimal places
       };
 
       const refreshData = () => {