Merge pull request #32 from superKalo/feature/tooltip-min-max

Feature / Display Tooltip Only for the Min and Max Values per Period
superKalo · Jan 16, 2018 · 53441b3 · 53441b3
2 parents 7a8e555 + 4e985d4
commit 53441b3
Showing 1 changed file with 20 additions and 16 deletions.
diff --git a/src/js/chart.js b/src/js/chart.js
@@ -138,28 +138,32 @@ window.App.Chart.prototype.alwaysVisibleTooltipsPlugin = function() {
                 chart.pluginTooltips = [];
                 chart.config.data.datasets.forEach(function (dataset, i) {
                     /**
-                     * If too many tooltips appear - the chart becomes unreadable,
-                     * therefore - filter out the tooltips.
+                     * Display only the tooltips with the min and the max values.
+                     * Filter out all the rest.
                      */
-                    const tooltipsLength = chart.getDatasetMeta(i).data.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;
+                    const tooltipsMaxValue = Math.max(...dataset.data);
+                    const tooltipsMinValue = Math.min(...dataset.data);
+
+                    // Mega dummy mechanism to catch duplicated values.
+                    let tooltipsMaxValueDisplayed = false;
+                    let tooltipsMinValueDisplayed = false;
+
+                    const displayTooltipsFilter = (value) => {
+                        if (value === tooltipsMaxValue && !tooltipsMaxValueDisplayed) {
+                            tooltipsMaxValueDisplayed = true;
+                            return true;
+                        } else if (value === tooltipsMinValue && !tooltipsMinValueDisplayed) {
+                            tooltipsMinValueDisplayed = true;
+                            return true;
                         }
 
-                        return (i) % 24 === 0 || i+1 === tooltipsLength;
+                        return false;
                     };
 
                     chart.getDatasetMeta(i).data.forEach(function (sector, j) {
-                        if (displayTooltipsFilter(j)) {
+                        const toolTipValue = dataset.data[j];
+
+                        if (displayTooltipsFilter(toolTipValue)) {
                             chart.pluginTooltips.push(new Chart.Tooltip({
                                 _chart: chart.chart,
                                 _chartInstance: chart,