-
Notifications
You must be signed in to change notification settings - Fork 1
/
tiny-charts.ts
104 lines (80 loc) · 2.54 KB
/
tiny-charts.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: teal; icon-glyph: chart-line;
/*
* author: https://github.com/Nodman
* small chart, for now supports only area chart
*/
'use strict'
const SCRIPT_NAME = 'tiny-charts'
export class TinyCharts {
context: DrawContext
width: number
height: number
strokeColor?: Color
fillColor?: Color
constructor(width: number, height: number) {
this.width = width
this.height = height
}
private createContext() {
this.context = new DrawContext()
this.context.size = new Size(this.width, this.height)
this.context.opaque = false
this.context.respectScreenScale = true
this.context.setLineWidth(1)
}
private normalizeData(data: number[]) {
const maxValue = Math.max(...data)
const normalized = data.map(value => value / (maxValue / 1e2))
return normalized
}
private getCoordinates(data: number[], index: number) {
const y = this.height - (this.height * data[index]) / 100
const x = index * (this.width / (data.length - 1))
return { x, y }
}
setFillColor(color: Color) {
this.fillColor = color
}
setStrokeColor(color: Color) {
this.strokeColor = color
}
drawAreaChart(rawData: number[]) {
this.createContext()
const data = this.normalizeData(rawData)
const startingPoint = this.getCoordinates(data, 0)
const path = new Path()
path.move(new Point(startingPoint.x, startingPoint.y))
for (let index = 0; index < data.length - 1; index++) {
const point = this.getCoordinates(data, index)
const nextPoint = this.getCoordinates(data, index + 1)
const pointX = (point.x + nextPoint.x) / 2
const pointY = (point.y + nextPoint.y) / 2
const controlx1 = (pointX + point.x) / 2
const controlx2 = (pointX + nextPoint.x) / 2
path.addQuadCurve(new Point(pointX, pointY), new Point(controlx1, point.y))
path.addQuadCurve(new Point(nextPoint.x, nextPoint.y), new Point(controlx2, nextPoint.y))
}
path.addLine(new Point(this.width, this.height))
path.addLine(new Point(0, this.height))
path.closeSubpath()
if (this.strokeColor) {
this.context.setStrokeColor(this.strokeColor)
this.context.addPath(path)
this.context.strokePath()
}
if (this.fillColor) {
this.context.setFillColor(this.fillColor)
this.context.addPath(path)
this.context.fillPath()
}
}
getContext() {
return this.context
}
getImage() {
return this.context.getImage()
}
}
Script.complete()