sparkline.mjs 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. export default class Sparkline {
  2. constructor(element, options = {}) {
  3. this.element = element;
  4. this.options = { ...Sparkline.options, ...options };
  5. init: {
  6. this.element.innerHTML = "<canvas></canvas>";
  7. this.canvas = this.element.firstChild;
  8. this.context = this.canvas.getContext("2d");
  9. this.ratio = window.devicePixelRatio || 1;
  10. if (this.options.tooltip) {
  11. this.canvas.style.position = "relative";
  12. this.canvas.addEventListener('mousemove', e => {
  13. const x = e.offsetX || e.layerX || 0;
  14. const delta = ((this.options.width - this.options.dotRadius * 2) / (this._points.length - 1));
  15. const index = minmax(0, Math.round((x - this.options.dotRadius) / delta), this._points.length - 1);
  16. this.canvas.title = this.options.tooltip(this._points[index], index, this._points);
  17. }, false);
  18. }
  19. }
  20. }
  21. set points(points) {
  22. this.draw(points);
  23. }
  24. get points() {
  25. return this._points;
  26. }
  27. draw(points = []) {
  28. this._points = points;
  29. this.canvas.width = this.options.width * this.ratio;
  30. this.canvas.style.width = `${this.options.width}px`;
  31. const pxHeight = this.options.height || this.element.offsetHeight;
  32. this.canvas.height = pxHeight * this.ratio;
  33. this.canvas.style.height = `${pxHeight}px`;
  34. const lineWidth = this.options.lineWidth * this.ratio;
  35. const offsetX = Math.max(this.options.dotRadius * this.ratio, lineWidth / 2);
  36. const offsetY = Math.max(this.options.dotRadius * this.ratio, lineWidth / 2);
  37. const width = this.canvas.width - offsetX * 2;
  38. const height = this.canvas.height - offsetY * 2;
  39. const minValue = Math.min.apply(Math, points);
  40. const maxValue = Math.max.apply(Math, points);
  41. const bottomValue = this.options.minValue != undefined ? this.options.minValue : Math.min(minValue, this.options.maxMinValue != undefined ? this.options.maxMinValue : minValue);
  42. const topValue = this.options.maxValue != undefined ? this.options.maxValue : Math.max(maxValue, this.options.minMaxValue != undefined ? this.options.minMaxValue : maxValue);
  43. let minX = offsetX;
  44. let maxX = offsetX;
  45. let x = offsetX;
  46. const y = index => (topValue === bottomValue)
  47. ? offsetY + height / 2
  48. : (offsetY + height) - ((points[index] - bottomValue) / (topValue - bottomValue)) * height;
  49. const delta = width / (points.length - 1);
  50. const line = (style, x, y) => {
  51. if (!style) return;
  52. this.context.save();
  53. this.context.strokeStyle = style.color || 'black';
  54. this.context.lineWidth = (style.width || 1) * this.ratio;
  55. this.context.globalAlpha = style.alpha || 1;
  56. this.context.beginPath();
  57. this.context.moveTo(style.direction != 'right' ? offsetX : x, y);
  58. this.context.lineTo(style.direction != 'left' ? width + offsetX : x, y);
  59. this.context.stroke();
  60. this.context.restore();
  61. }
  62. const dot = (color, lineStyle, x, y) => {
  63. this.context.beginPath();
  64. this.context.fillStyle = color;
  65. this.context.arc(x, y, this.options.dotRadius * this.ratio, 0, Math.PI * 2, false);
  66. this.context.fill();
  67. line(lineStyle, x, y);
  68. }
  69. this.context.save();
  70. this.context.strokeStyle = this.options.lineColor;
  71. this.context.fillStyle = this.options.lineColor;
  72. this.context.lineWidth = lineWidth;
  73. this.context.lineCap = 'round';
  74. this.context.lineJoin = 'round';
  75. if (this.options.fillBelow && points.length > 1) {
  76. this.context.save();
  77. this.context.beginPath();
  78. this.context.moveTo(x, y(0));
  79. for (let i = 1; i < points.length; i++) {
  80. x += delta;
  81. minX = points[i] == minValue ? x : minX;
  82. maxX = points[i] == maxValue ? x : maxX;
  83. this.context.lineTo(x, y(i));
  84. }
  85. this.context.lineTo(width + offsetX, height + offsetY + lineWidth / 2);
  86. this.context.lineTo(offsetX, height + offsetY + lineWidth / 2);
  87. this.context.fill();
  88. if (this.options.fillLighten > 0) {
  89. this.context.fillStyle = 'white';
  90. this.context.globalAlpha = this.options.fillLighten;
  91. this.context.fill();
  92. this.context.globalAlpha = 1;
  93. } else if (this.options.fillLighten < 0) {
  94. this.context.fillStyle = 'black';
  95. this.context.globalAlpha = -this.options.fillLighten;
  96. this.context.fill();
  97. }
  98. this.context.restore();
  99. }
  100. x = offsetX;
  101. this.context.beginPath();
  102. this.context.moveTo(x, y(0));
  103. for (let i = 1; i < points.length; i++) {
  104. x += delta;
  105. this.context.lineTo(x, y(i));
  106. }
  107. this.context.stroke();
  108. this.context.restore();
  109. line(this.options.bottomLine, 0, offsetY);
  110. line(this.options.topLine, 0, height + offsetY + lineWidth / 2);
  111. dot(this.options.startColor, this.options.startLine, offsetX + (points.length == 1 ? width / 2 : 0), y(0));
  112. dot(this.options.endColor, this.options.endLine, offsetX + (points.length == 1 ? width / 2 : width), y(points.length - 1));
  113. dot(this.options.minColor, this.options.minLine, minX + (points.length == 1 ? width / 2 : 0), y(points.indexOf(minValue)));
  114. dot(this.options.maxColor, this.options.maxLine, maxX + (points.length == 1 ? width / 2 : 0), y(points.indexOf(maxValue)));
  115. }
  116. static init(element, options) {
  117. return new Sparkline(element, options);
  118. }
  119. static draw(element, points, options) {
  120. const sparkline = new Sparkline(element, options);
  121. sparkline.draw(points);
  122. return sparkline;
  123. }
  124. }
  125. Sparkline.options = {
  126. width: 100,
  127. height: null,
  128. lineColor: "black",
  129. lineWidth: 1.5,
  130. startColor: "transparent",
  131. endColor: "black",
  132. maxColor: "transparent",
  133. minColor: "transparent",
  134. minValue: null,
  135. maxValue: null,
  136. minMaxValue: null,
  137. maxMinValue: null,
  138. dotRadius: 2.5,
  139. tooltip: null,
  140. fillBelow: true,
  141. fillLighten: 0.5,
  142. startLine: false,
  143. endLine: false,
  144. minLine: false,
  145. maxLine: false,
  146. bottomLine: false,
  147. topLine: false,
  148. averageLine: false
  149. };
  150. function minmax(a, b, c) {
  151. return Math.max(a, Math.min(b, c));
  152. }