Advertisement
Guest User

Untitled

a guest
Mar 24th, 2017
60
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.00 KB | None | 0 0
  1. Chart.plugins.register({
  2. beforeRender: function (chart) {
  3. if (chart.config.options.showAllTooltips) {
  4. // create a namespace to persist plugin state (which unfortunately we have to do)
  5. if (!chart.showAllTooltipsPlugin) {
  6. chart.showAllTooltipsPlugin = {};
  7. }
  8.  
  9. // turn off normal tooltips in case it was also enabled (which is the global default)
  10. chart.options.tooltips.enabled = false;
  11.  
  12. // we can't use the chart tooltip because there is only one tooltip per chart which gets
  13. // re-positioned via animation steps.....so let's create a place to hold our tooltips
  14. chart.showAllTooltipsPlugin.tooltipsCollection = [];
  15.  
  16. // create a tooltip for each plot on the chart
  17. chart.config.data.datasets.forEach(function (dataset, i) {
  18. chart.getDatasetMeta(i).data.forEach(function (sector, j) {
  19. // but only create one for pie and doughnut charts if the plot is large enough to even see
  20. if (!_.contains(['doughnut', 'pie'], sector._chart.config.type) || sector._model.circumference > 0.1) {
  21. var tooltip;
  22.  
  23. // create a new tooltip based upon configuration
  24. if (chart.config.options.showAllTooltips.extendOut) {
  25. // this tooltip reverses the location of the carets from the default
  26. tooltip = new Chart.TooltipReversed({
  27. _chart: chart.chart,
  28. _chartInstance: chart,
  29. _data: chart.data,
  30. _options: chart.options.tooltips,
  31. _active: [sector]
  32. }, chart);
  33. } else {
  34. tooltip = new Chart.Tooltip({
  35. _chart: chart.chart,
  36. _chartInstance: chart,
  37. _data: chart.data,
  38. _options: chart.options.tooltips,
  39. _active: [sector]
  40. }, chart);
  41. }
  42.  
  43. // might as well initialize this now...it would be a waste to do it once we are looping over our tooltips
  44. tooltip.initialize();
  45.  
  46. // save the tooltips so they can be rendered later
  47. chart.showAllTooltipsPlugin.tooltipsCollection.push(tooltip);
  48. }
  49. });
  50. });
  51. }
  52. },
  53.  
  54. afterDraw: function (chart, easing) {
  55. if (chart.config.options.showAllTooltips) {
  56. // we want to wait until everything on the chart has been rendered before showing the
  57. // tooltips for the first time...otherwise it looks weird
  58. if (!chart.showAllTooltipsPlugin.initialRenderComplete) {
  59. // still animating until easing === 1
  60. if (easing !== 1) {
  61. return;
  62. }
  63.  
  64. // animation is complete, let's remember that fact
  65. chart.showAllTooltipsPlugin.initialRenderComplete = true;
  66. }
  67.  
  68. // at this point the chart has been fully rendered for the first time so start rendering tooltips
  69. Chart.helpers.each(chart.showAllTooltipsPlugin.tooltipsCollection, function (tooltip) {
  70. // create a namespace to persist plugin state within this tooltip (which unfortunately we have to do)
  71. if (!tooltip.showAllTooltipsPlugin) {
  72. tooltip.showAllTooltipsPlugin = {};
  73. }
  74.  
  75. // re-enable this tooltip otherise it won't be drawn (remember we disabled all tooltips in beforeRender)
  76. tooltip._options.enabled = true;
  77.  
  78. // perform standard tooltip setup (which determines it's alignment and x, y coordinates)
  79. tooltip.update(); // determines alignment/position and stores in _view
  80. tooltip.pivot(); // we don't actually need this since we are not animating tooltips, but let's be consistent
  81. tooltip.transition(easing).draw(); // render and animate the tooltip
  82.  
  83. // disable this tooltip in case something else tries to do something with it later
  84. tooltip._options.enabled = false;
  85. });
  86. }
  87. },
  88. });
  89.  
  90. // A 'reversed' tooltip places the caret on the opposite side from the current default.
  91. // In order to do this we just need to change the 'alignment' logic
  92. Chart.TooltipReversed = Chart.Tooltip.extend({
  93. // Note: tooltipSize is the size of the box (not including the caret)
  94. determineAlignment: function(tooltipSize) {
  95. var me = this;
  96. var model = me._model;
  97. var chart = me._chart;
  98. var chartArea = me._chartInstance.chartArea;
  99.  
  100. // set caret position to top or bottom if tooltip y position will extend outsite the chart top/bottom
  101. if (model.y < tooltipSize.height) {
  102. model.yAlign = 'top';
  103. } else if (model.y > (chart.height - tooltipSize.height)) {
  104. model.yAlign = 'bottom';
  105. }
  106.  
  107. var leftAlign, rightAlign; // functions to determine left, right alignment
  108. var overflowLeft, overflowRight; // functions to determine if left/right alignment causes tooltip to go outside chart
  109. var yAlign; // function to get the y alignment if the tooltip goes outside of the left or right edges
  110. var midX = (chartArea.left + chartArea.right) / 2;
  111. var midY = (chartArea.top + chartArea.bottom) / 2;
  112.  
  113. if (model.yAlign === 'center') {
  114. leftAlign = function(x) {
  115. return x >= midX;
  116. };
  117. rightAlign = function(x) {
  118. return x < midX;
  119. };
  120. } else {
  121. leftAlign = function(x) {
  122. return x <= (tooltipSize.width / 2);
  123. };
  124. rightAlign = function(x) {
  125. return x >= (chart.width - (tooltipSize.width / 2));
  126. };
  127. }
  128.  
  129. overflowLeft = function(x) {
  130. return x - tooltipSize.width < 0;
  131. };
  132. overflowRight = function(x) {
  133. return x + tooltipSize.width > chart.width;
  134. };
  135. yAlign = function(y) {
  136. return y <= midY ? 'bottom' : 'top';
  137. };
  138.  
  139. if (leftAlign(model.x)) {
  140. model.xAlign = 'left';
  141.  
  142. // Is tooltip too wide and goes over the right side of the chart.?
  143. if (overflowLeft(model.x)) {
  144. model.xAlign = 'center';
  145. model.yAlign = yAlign(model.y);
  146. }
  147. } else if (rightAlign(model.x)) {
  148. model.xAlign = 'right';
  149.  
  150. // Is tooltip too wide and goes outside left edge of canvas?
  151. if (overflowRight(model.x)) {
  152. model.xAlign = 'center';
  153. model.yAlign = yAlign(model.y);
  154. }
  155. }
  156. }
  157. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement