Improved tooltip number formatting

resources/frontend_client/app/card/card.charting.js

@@ -44,6 +44,19 @@ var MIN_PIXELS_PER_TICK = {
     y: 50
 };
 
+var precisionNumberFormatter = d3.format(".2r");
+var fixedNumberFormatter = d3.format(",.f");
+
+function formatNumber(number) {
+    if (number > -1 && number < 1) {
+        // numbers between 1 and -1 round to 2 significant digits with extra 0s stripped off
+        return precisionNumberFormatter(number).replace(/\.?0+$/, "");
+    } else {
+        // anything else rounds to at most 2 decimal points
+        return fixedNumberFormatter(d3.round(number, 2));
+    }
+}
+
 /// return pair of [min, max] values from items in array DATA, using VALUEACCESSOR to retrieve values for each item
 /// VALUEACCESSOR may be an accessor function like fn(ITEM) or can be a string/integer key/index into ITEM which will
 /// use a function like fn(item) { return item(KEY); }
@@ -368,17 +381,15 @@ function applyChartTooltips(dcjsChart, card, cols) {
         // We should only ever have one tooltip on screen, right?
         Array.prototype.forEach.call(document.querySelectorAll('.ChartTooltip'), (t) => t.parentNode.removeChild(t));
 
-        var valueFormatter = d3.format(',.0f');
-
         var tip = d3.tip()
             .attr('class', 'ChartTooltip')
             .direction('n')
             .offset([-10, 0])
             .html(function(d) {
-                var values = String(d.data.value);
+                var values = formatNumber(d.data.value);
                 if (card.display === 'pie') {
                     // TODO: this is not the ideal way to calculate the percentage, but it works for now
-                    values += " (" + valueFormatter((d.endAngle - d.startAngle) / Math.PI * 50) + '%)'
+                    values += " (" + formatNumber((d.endAngle - d.startAngle) / Math.PI * 50) + '%)'
                 }
                 return '<div><span class="ChartTooltip-name">' + d.data.key + '</span></div>' +
                     '<div><span class="ChartTooltip-value">' + values + '</span></div>';