https://e-aair.org/js/chartist-plugin-tooltip.js

1(function (root, factory) {
2  if (typeof define === 'function' && define.amd) {
3    // AMD. Register as an anonymous module.
4    define(["chartist"], function (Chartist) {
5      return (root.returnExportsGlobal = factory(Chartist));
6    });
7  } else if (typeof exports === 'object') {
8    // Node. Does not work with strict CommonJS, but
9    // only CommonJS-like enviroments that support module.exports,
10    // like Node.
11    module.exports = factory(require("chartist"));
12  } else {
13    root['Chartist.plugins.tooltip'] = factory(Chartist);
14  }
15}(this, function (Chartist) {
16
17  /**
18  * Chartist.js plugin to display a data label on top of the points in a line chart.
19  *
20  */
21  /* global Chartist */
22  (function (window, document, Chartist) {
23    'use strict';
24
25    var defaultOptions = {
26      currency: undefined,
27      currencyFormatCallback: undefined,
28      tooltipOffset: {
29        x: 0,
30        y: -20
31      },
32      anchorToPoint: false,
33      appendToBody: false,
34      class: undefined,
35      pointClass: 'ct-point'
36    };
37
38    Chartist.plugins = Chartist.plugins || {};
39    Chartist.plugins.tooltip = function (options) {
40      options = Chartist.extend({}, defaultOptions, options);
41
42      return function tooltip(chart) {
43        var tooltipSelector = options.pointClass;
44        /*if (chart.constructor.name == Chartist.Bar.prototype.constructor.name) {
45          tooltipSelector = 'ct-bar';
46        } else if (chart.constructor.name ==  Chartist.Pie.prototype.constructor.name) {
47          // Added support for donut graph
48          if (chart.options.donut) {
49            tooltipSelector = 'ct-slice-donut';
50          } else {
51            tooltipSelector = 'ct-slice-pie';
52          }
53        }
54        */
55
56        var $chart = chart.container;
57        var $toolTip = $chart.querySelector('.chartist-tooltip');
58        if (!$toolTip) {
59          $toolTip = document.createElement('div');
60          $toolTip.className = (!options.class) ? 'chartist-tooltip' : 'chartist-tooltip ' + options.class;
61          if (!options.appendToBody) {
62            $chart.appendChild($toolTip);
63          } else {
64            document.body.appendChild($toolTip);
65          }
66        }
67        var height = $toolTip.offsetHeight;
68        var width = $toolTip.offsetWidth;
69
70        hide($toolTip);
71
72        function on(event, selector, callback) {
73          $chart.addEventListener(event, function (e) {
74            if (!selector || hasClass(e.target, selector))
75            callback(e);
76          });
77        }
78
79        on('mouseover', tooltipSelector, function (event) {
80          var $point = event.target;
81          var tooltipText = '';
82
83          var isPieChart = (chart instanceof Chartist.Pie) ? $point : $point.parentNode;
84          var seriesName = (isPieChart) ? $point.parentNode.getAttribute('ct:meta') || $point.parentNode.getAttribute('ct:series-name') : '';
85          var meta = $point.getAttribute('ct:meta') || seriesName || '';
86          var hasMeta = !!meta;
87          var value = $point.getAttribute('ct:value');
88
89          if (options.transformTooltipTextFnc && typeof options.transformTooltipTextFnc === 'function') {
90            value = options.transformTooltipTextFnc(value);
91          }
92
93          if (options.tooltipFnc && typeof options.tooltipFnc === 'function') {
94            tooltipText = options.tooltipFnc(meta, value);
95          } else {
96            if (options.metaIsHTML) {
97              var txt = document.createElement('textarea');
98              txt.innerHTML = meta;
99              meta = txt.value;
100            }
101
102            meta = '<span class="chartist-tooltip-meta">' + meta + '</span>';
103
104            if (hasMeta) {
105              tooltipText += meta + '<br>';
106            } else {
107              // For Pie Charts also take the labels into account
108              // Could add support for more charts here as well!
109              if (chart instanceof Chartist.Pie) {
110                var label = next($point, 'ct-label');
111                if (label) {
112                  tooltipText += text(label) + '<br>';
113                }
114              }
115            }
116
117            if (value) {
118              if (options.currency) {
119                if (options.currencyFormatCallback != undefined) {
120                  value = options.currencyFormatCallback(value, options);
121                } else {
122                  value = options.currency + value.replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, '$1,');
123                }
124              }
125              value = '<span class="chartist-tooltip-value">' + value + '</span>';
126              tooltipText += value;
127            }
128          }
129
130          if(tooltipText) {
131            $toolTip.innerHTML = tooltipText;
132            setPosition(event);
133            show($toolTip);
134
135            // Remember height and width to avoid wrong position in IE
136            height = $toolTip.offsetHeight;
137            width = $toolTip.offsetWidth;
138          }
139        });
140
141        on('mouseout', tooltipSelector, function () {
142          hide($toolTip);
143        });
144
145        on('mousemove', null, function (event) {
146          if (false === options.anchorToPoint)
147          setPosition(event);
148        });
149
150        function setPosition(event) {
151          height = height || $toolTip.offsetHeight;
152          width = width || $toolTip.offsetWidth;
153          var offsetX = - width / 2 + options.tooltipOffset.x
154          var offsetY = - height + options.tooltipOffset.y;
155          var anchorX, anchorY;
156
157          if (!options.appendToBody) {
158            var box = $chart.getBoundingClientRect();
159            var left = event.pageX - box.left - window.pageXOffset ;
160            var top = event.pageY - box.top - window.pageYOffset ;
161
162            if (true === options.anchorToPoint && event.target.x2 && event.target.y2) {
163              anchorX = parseInt(event.target.x2.baseVal.value);
164              anchorY = parseInt(event.target.y2.baseVal.value);
165            }
166
167            $toolTip.style.top = (anchorY || top) + offsetY + 'px';
168            $toolTip.style.left = (anchorX || left) + offsetX + 'px';
169          } else {
170            $toolTip.style.top = event.pageY + offsetY + 'px';
171            $toolTip.style.left = event.pageX + offsetX + 'px';
172          }
173        }
174      }
175    };
176
177    function show(element) {
178      if(!hasClass(element, 'tooltip-show')) {
179        element.className = element.className + ' tooltip-show';
180      }
181    }
182
183    function hide(element) {
184      var regex = new RegExp('tooltip-show' + '\\s*', 'gi');
185      element.className = element.className.replace(regex, '').trim();
186    }
187
188    function hasClass(element, className) {
189      return (' ' + element.getAttribute('class') + ' ').indexOf(' ' + className + ' ') > -1;
190    }
191
192    function next(element, className) {
193      do {
194        element = element.nextSibling;
195      } while (element && !hasClass(element, className));
196      return element;
197    }
198
199    function text(element) {
200      return element.innerText || element.textContent;
201    }
202
203  } (window, document, Chartist));
204
205  return Chartist.plugins.tooltip;
206
207}));