Merge pull request #16 from superKalo/feature/chart-tooltip

Feature / Beautify Chart Tooltips
superKalo · Oct 16, 2017 · 8de05e1 · 8de05e1
2 parents 89926f2 + c174bd4
commit 8de05e1
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 16 deletions.
diff --git a/css/style.css b/css/style.css
@@ -91,7 +91,7 @@ small {
     position: absolute;
     top: 50%;
     left: 50%;
-    margin-left: -32px;
+    margin-left: -29px;
     margin-top: -30px; /* magic number */
     transition: all 1s;
     opacity: 0;
@@ -111,7 +111,7 @@ small {
     border: 3px solid #4F78E2;
 }
 .la-ball-pulse-sync {
-    width: 64px;
+    width: 58px;
     height: 18px;
 }
 .la-ball-pulse-sync > div {

diff --git a/index.html b/index.html
@@ -58,6 +58,7 @@ <h2 class="chart-period mb text-center">
     <script src="node_modules/super-repo/lib/index.js"></script>
 
     <script src="js/browser-extension-api.js"></script>
+    <script src="js/utils.js"></script>
     <script src="js/settings.js"></script>
     <script src="js/message.js"></script>
     <script src="js/loader.js"></script>

diff --git a/js/bitcoin.js b/js/bitcoin.js
@@ -92,12 +92,7 @@ window.App.Bitcoin = {
 
     $priceNow: document.querySelector('#price-now'),
     setPriceNow(_price) {
-        /**
-         * Beautify the price.
-         * https://stackoverflow.com/a/14467460/1333836
-         */
-        const price = Math.round(_price).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
-        this.$priceNow.textContent = `$${price}`;
+        this.$priceNow.textContent = App.Utils.formatPrice(Math.round(_price));
     },
 
     $lastUpdated: document.querySelector('#last-updated'),

diff --git a/js/chart.js b/js/chart.js
@@ -20,6 +20,7 @@ window.App.Chart = function(el) {
                 pointBorderColor: '#4F78E2',
                 pointBorderWidth: 3,
                 pointRadius: 5,
+                pointHoverRadius: 5,
                 data: [],
                 borderWidth: 2,
                 fill: false,
@@ -28,10 +29,11 @@ window.App.Chart = function(el) {
             }]
         },
         options: {
+            showAllTooltips: true,
             layout: {
                 padding: {
-                    left: 0,
-                    right: 0,
+                    left: 40,
+                    right: 40,
                     top: 10,
                     bottom: 0
                 }
@@ -40,16 +42,21 @@ window.App.Chart = function(el) {
             tooltips: {
                 mode: 'index',
                 intersect: false,
-                backgroundColor: '#B0C4F6',
+                backgroundColor: 'rgba(79, 120, 226, 0.85)',
                 titleFontStyle: 'normal',
                 titleFontColor: '#000',
-                bodyFontColor: '#4F78E2',
-                bodyFontStyle: 'bold',
-                borderColor: '#4F78E2',
+                bodyFontColor: '#fff',
+                bodyFontStyle: 'normal',
+                borderColor: 'rgba(0,0,0,0)',
                 borderWidth: 2,
                 cornerRadius: 3,
-                caretPadding: 5,
-                displayColors: false
+                caretPadding: 10,
+                caretSize: 10,
+                displayColors: false,
+                callbacks: {
+                    title: () => '',
+                    label: tooltipItem => App.Utils.formatPrice(tooltipItem.yLabel)
+                }
             },
             legend: {
                 display: false
@@ -106,6 +113,82 @@ window.App.Chart.prototype.prepareData = function(_data) {
     };
 }
 
+/**
+ * Make tooltips always visible.
+ * https://github.com/chartjs/Chart.js/issues/1861
+ */
+window.App.Chart.prototype.alwaysVisibleTooltipsPlugin = function() {
+    Chart.pluginService.register({
+        beforeRender: function (chart) {
+            if (chart.config.options.showAllTooltips) {
+                // create an array of tooltips
+                // we can't use the chart tooltip because there is only one tooltip per chart
+                chart.pluginTooltips = [];
+                chart.config.data.datasets.forEach(function (dataset, i) {
+
+                    chart.getDatasetMeta(i).data.forEach(function (sector, j) {
+                        chart.pluginTooltips.push(new Chart.Tooltip({
+                            _chart: chart.chart,
+                            _chartInstance: chart,
+                            _data: chart.data,
+                            _options: chart.options.tooltips,
+                            _active: [sector]
+                        }, chart));
+                    });
+                });
+
+                // turn off normal tooltips
+                chart.options.tooltips.enabled = false;
+            }
+        },
+        afterDraw: function (chart, easing) {
+            if (chart.config.options.showAllTooltips) {
+                // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
+                // if (!chart.allTooltipsOnce) {
+                //     if (easing !== 1)
+                //         return;
+                //     chart.allTooltipsOnce = true;
+                // }
+
+                // turn on tooltips
+                chart.options.tooltips.enabled = true;
+
+                /**
+                 * If too many tooltips appear - the chart becomes unreadable,
+                 * therefore - filter out the tooltips.
+                 */
+                const tooltipsLength = chart.pluginTooltips.length;
+                const displayTooltipsFilter = (i) => {
+                    if (tooltipsLength <= 5) {
+                        return i % 3 === 0;
+                    } else if (tooltipsLength <= 7) {
+                        return i % 3 === 0;
+                    } else if (tooltipsLength <= 12) {
+                        return i % 4 === 0 || i+1 === tooltipsLength;
+                    } else if (tooltipsLength <= 24) {
+                        return i % 8 === 0 || i+1 === tooltipsLength;
+                    } else if (tooltipsLength <= 31) {
+                        return i % 10 === 0 || i+1 === tooltipsLength;
+                    }
+
+                    return (i) % 24 === 0 || i+1 === tooltipsLength;
+                };
+
+                Chart.helpers.each(chart.pluginTooltips, function (tooltip, i) {
+                    if (displayTooltipsFilter(i)) {
+                        tooltip.initialize();
+                        tooltip.update();
+                        // we don't actually need this since we are not animating tooltips
+                        tooltip.pivot();
+                        tooltip.transition(easing).draw();
+                    }
+                });
+                chart.options.tooltips.enabled = true;
+            }
+        }
+    });
+};
+
 window.App.Chart.prototype.init = function(_data) {
     const { labels, values } = this.prepareData(_data);
 
@@ -116,6 +199,8 @@ window.App.Chart.prototype.init = function(_data) {
         return;
     }
 
+    this.alwaysVisibleTooltipsPlugin();
+
     this.config.data.labels = labels;
     this.config.data.datasets[0].data = values;
 

diff --git a/js/utils.js b/js/utils.js
@@ -0,0 +1,13 @@
+window.App = window.App || {};
+
+window.App.Utils = {
+    /**
+     * Beautify the price number.
+     * https://stackoverflow.com/a/14467460/1333836
+     */
+    formatPrice(_p) {
+        const price = _p.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
+
+        return `$${price}`;
+    }
+}