GPQAPP

1
export default class Sparkline {
2
  constructor(element, options = {}) {
3
    this.element = element;
4
    this.options = { ...Sparkline.options, ...options };
5

6
    init: {
7
      this.element.innerHTML = "<canvas></canvas>";
8
      this.canvas = this.element.firstChild;
9
      this.context = this.canvas.getContext("2d");
10
      this.ratio = window.devicePixelRatio || 1;
11

12
      if (this.options.tooltip) {
13
        this.canvas.style.position = "relative";
14
        this.canvas.addEventListener('mousemove', e => {
15
          const x = e.offsetX || e.layerX || 0;
16
          const delta = ((this.options.width - this.options.dotRadius * 2) / (this._points.length - 1));
17
          const index = minmax(0, Math.round((x - this.options.dotRadius) / delta), this._points.length - 1);
18

19
          this.canvas.title = this.options.tooltip(this._points[index], index, this._points);
20
        }, false);
21
      }
22
    }
23
  }
24

25
  set points(points) {
26
    this.draw(points);
27
  }
28

29
  get points() {
30
    return this._points;
31
  }
32

33
  draw(points = []) {
34
    this._points = points;
35

36
    this.canvas.width = this.options.width * this.ratio;
37
    this.canvas.style.width = `${this.options.width}px`;
38

39
    const pxHeight = this.options.height || this.element.offsetHeight;
40
    this.canvas.height = pxHeight * this.ratio;
41
    this.canvas.style.height = `${pxHeight}px`;
42

43
    const lineWidth = this.options.lineWidth * this.ratio;
44
    const offsetX = Math.max(this.options.dotRadius * this.ratio, lineWidth / 2);
45
    const offsetY = Math.max(this.options.dotRadius * this.ratio, lineWidth / 2);
46
    const width = this.canvas.width - offsetX * 2;
47
    const height = this.canvas.height - offsetY * 2;
48

49
    const minValue = Math.min.apply(Math, points);
50
    const maxValue = Math.max.apply(Math, points);
51
    const bottomValue = this.options.minValue != undefined ? this.options.minValue : Math.min(minValue, this.options.maxMinValue != undefined ? this.options.maxMinValue : minValue);
52
    const topValue = this.options.maxValue != undefined ? this.options.maxValue : Math.max(maxValue, this.options.minMaxValue != undefined ? this.options.minMaxValue : maxValue);
53
    let minX = offsetX;
54
    let maxX = offsetX;
55

56
    let x = offsetX;
57
    const y = index => (topValue === bottomValue)
58
      ? offsetY + height / 2
59
      : (offsetY + height) - ((points[index] - bottomValue) / (topValue - bottomValue)) * height;
60
    const delta = width / (points.length - 1);
61

62
    const line = (style, x, y) => {
63
      if (!style) return;
64

65
      this.context.save();
66
      this.context.strokeStyle = style.color || 'black';
67
      this.context.lineWidth = (style.width || 1) * this.ratio;
68
      this.context.globalAlpha = style.alpha || 1;
69
      this.context.beginPath();
70
      this.context.moveTo(style.direction != 'right' ? offsetX : x, y);
71
      this.context.lineTo(style.direction != 'left' ? width + offsetX : x, y);
72
      this.context.stroke();
73
      this.context.restore();
74
    }
75

76
    const dot = (color, lineStyle, x, y) => {
77
      this.context.beginPath();
78
      this.context.fillStyle = color;
79
      this.context.arc(x, y, this.options.dotRadius * this.ratio, 0, Math.PI * 2, false);
80
      this.context.fill();
81
      line(lineStyle, x, y);
82
    }
83

84
    this.context.save();
85

86
    this.context.strokeStyle = this.options.lineColor;
87
    this.context.fillStyle = this.options.lineColor;
88
    this.context.lineWidth = lineWidth;
89
    this.context.lineCap = 'round';
90
    this.context.lineJoin = 'round';
91

92
    if (this.options.fillBelow && points.length > 1) {
93
      this.context.save();
94
      this.context.beginPath();
95
      this.context.moveTo(x, y(0));
96
      for (let i = 1; i < points.length; i++) {
97
        x += delta;
98

99
        minX = points[i] == minValue ? x : minX;
100
        maxX = points[i] == maxValue ? x : maxX;
101

102
        this.context.lineTo(x, y(i));
103
      }
104
      this.context.lineTo(width + offsetX, height + offsetY + lineWidth / 2);
105
      this.context.lineTo(offsetX, height + offsetY + lineWidth / 2);
106
      this.context.fill();
107
      if (this.options.fillLighten > 0) {
108
        this.context.fillStyle = 'white';
109
        this.context.globalAlpha = this.options.fillLighten;
110
        this.context.fill();
111
        this.context.globalAlpha = 1;
112
      } else if (this.options.fillLighten < 0) {
113
        this.context.fillStyle = 'black';
114
        this.context.globalAlpha = -this.options.fillLighten;
115
        this.context.fill();
116
      }
117
      this.context.restore();
118
    }
119

120
    x = offsetX;
121
    this.context.beginPath();
122
    this.context.moveTo(x, y(0));
123
    for (let i = 1; i < points.length; i++) {
124
      x += delta;
125
      this.context.lineTo(x, y(i));
126
    }
127
    this.context.stroke();
128

129
    this.context.restore();
130

131
    line(this.options.bottomLine, 0, offsetY);
132
    line(this.options.topLine, 0, height + offsetY + lineWidth / 2);
133

134
    dot(this.options.startColor, this.options.startLine, offsetX + (points.length == 1 ? width / 2 : 0), y(0));
135
    dot(this.options.endColor, this.options.endLine, offsetX + (points.length == 1 ? width / 2 : width), y(points.length - 1));
136
    dot(this.options.minColor, this.options.minLine, minX + (points.length == 1 ? width / 2 : 0), y(points.indexOf(minValue)));
137
    dot(this.options.maxColor, this.options.maxLine, maxX + (points.length == 1 ? width / 2 : 0), y(points.indexOf(maxValue)));
138
  }
139

140
  static init(element, options) {
141
    return new Sparkline(element, options);
142
  }
143

144
  static draw(element, points, options) {
145
    const sparkline = new Sparkline(element, options);
146
    sparkline.draw(points);
147
    return sparkline;
148
  }
149
}
150

151
Sparkline.options = {
152
  width: 100,
153
  height: null,
154
  lineColor: "black",
155
  lineWidth: 1.5,
156
  startColor: "transparent",
157
  endColor: "black",
158
  maxColor: "transparent",
159
  minColor: "transparent",
160
  minValue: null,
161
  maxValue: null,
162
  minMaxValue: null,
163
  maxMinValue: null,
164
  dotRadius: 2.5,
165
  tooltip: null,
166
  fillBelow: true,
167
  fillLighten: 0.5,
168
  startLine: false,
169
  endLine: false,
170
  minLine: false,
171
  maxLine: false,
172
  bottomLine: false,
173
  topLine: false,
174
  averageLine: false
175
};
176

177
function minmax(a, b, c) {
178
  return Math.max(a, Math.min(b, c));
179
}
180