1
0

controller.bubble.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. 'use strict';
  2. module.exports = function(Chart) {
  3. var helpers = Chart.helpers;
  4. Chart.defaults.bubble = {
  5. hover: {
  6. mode: 'single'
  7. },
  8. scales: {
  9. xAxes: [{
  10. type: 'linear', // bubble should probably use a linear scale by default
  11. position: 'bottom',
  12. id: 'x-axis-0' // need an ID so datasets can reference the scale
  13. }],
  14. yAxes: [{
  15. type: 'linear',
  16. position: 'left',
  17. id: 'y-axis-0'
  18. }]
  19. },
  20. tooltips: {
  21. callbacks: {
  22. title: function() {
  23. // Title doesn't make sense for scatter since we format the data as a point
  24. return '';
  25. },
  26. label: function(tooltipItem, data) {
  27. var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
  28. var dataPoint = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
  29. return datasetLabel + ': (' + tooltipItem.xLabel + ', ' + tooltipItem.yLabel + ', ' + dataPoint.r + ')';
  30. }
  31. }
  32. }
  33. };
  34. Chart.controllers.bubble = Chart.DatasetController.extend({
  35. dataElementType: Chart.elements.Point,
  36. update: function(reset) {
  37. var me = this;
  38. var meta = me.getMeta();
  39. var points = meta.data;
  40. // Update Points
  41. helpers.each(points, function(point, index) {
  42. me.updateElement(point, index, reset);
  43. });
  44. },
  45. updateElement: function(point, index, reset) {
  46. var me = this;
  47. var meta = me.getMeta();
  48. var xScale = me.getScaleForId(meta.xAxisID);
  49. var yScale = me.getScaleForId(meta.yAxisID);
  50. var custom = point.custom || {};
  51. var dataset = me.getDataset();
  52. var data = dataset.data[index];
  53. var pointElementOptions = me.chart.options.elements.point;
  54. var dsIndex = me.index;
  55. helpers.extend(point, {
  56. // Utility
  57. _xScale: xScale,
  58. _yScale: yScale,
  59. _datasetIndex: dsIndex,
  60. _index: index,
  61. // Desired view properties
  62. _model: {
  63. x: reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(typeof data === 'object' ? data : NaN, index, dsIndex, me.chart.isCombo),
  64. y: reset ? yScale.getBasePixel() : yScale.getPixelForValue(data, index, dsIndex),
  65. // Appearance
  66. radius: reset ? 0 : custom.radius ? custom.radius : me.getRadius(data),
  67. // Tooltip
  68. hitRadius: custom.hitRadius ? custom.hitRadius : helpers.getValueAtIndexOrDefault(dataset.hitRadius, index, pointElementOptions.hitRadius)
  69. }
  70. });
  71. // Trick to reset the styles of the point
  72. Chart.DatasetController.prototype.removeHoverStyle.call(me, point, pointElementOptions);
  73. var model = point._model;
  74. model.skip = custom.skip ? custom.skip : (isNaN(model.x) || isNaN(model.y));
  75. point.pivot();
  76. },
  77. getRadius: function(value) {
  78. return value.r || this.chart.options.elements.point.radius;
  79. },
  80. setHoverStyle: function(point) {
  81. var me = this;
  82. Chart.DatasetController.prototype.setHoverStyle.call(me, point);
  83. // Radius
  84. var dataset = me.chart.data.datasets[point._datasetIndex];
  85. var index = point._index;
  86. var custom = point.custom || {};
  87. var model = point._model;
  88. model.radius = custom.hoverRadius ? custom.hoverRadius : (helpers.getValueAtIndexOrDefault(dataset.hoverRadius, index, me.chart.options.elements.point.hoverRadius)) + me.getRadius(dataset.data[index]);
  89. },
  90. removeHoverStyle: function(point) {
  91. var me = this;
  92. Chart.DatasetController.prototype.removeHoverStyle.call(me, point, me.chart.options.elements.point);
  93. var dataVal = me.chart.data.datasets[point._datasetIndex].data[point._index];
  94. var custom = point.custom || {};
  95. var model = point._model;
  96. model.radius = custom.radius ? custom.radius : me.getRadius(dataVal);
  97. }
  98. });
  99. };