signalk-polar-performance-plugin 0.0.18 → 0.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/plugin/index.js +15 -2
- package/public/index.html +56 -9
package/package.json
CHANGED
package/plugin/index.js
CHANGED
|
@@ -544,7 +544,19 @@ module.exports = function (app) {
|
|
|
544
544
|
}
|
|
545
545
|
|
|
546
546
|
function getChartData () {
|
|
547
|
-
|
|
547
|
+
var backgroundColor = []
|
|
548
|
+
var borderColor = []
|
|
549
|
+
for (let c = 0; c < 8; c++) {
|
|
550
|
+
let r = 0 + (c*10)
|
|
551
|
+
let g = 130 + (c*20 % 100)
|
|
552
|
+
let b = 80 + (c*30 % 120)
|
|
553
|
+
let color = r + ', ' + g + ', ' + b
|
|
554
|
+
backgroundColor.push('rgba(' + color + ', 1)')
|
|
555
|
+
borderColor.push('rgba(' + color + ', 0.8)')
|
|
556
|
+
}
|
|
557
|
+
app.debug(backgroundColor)
|
|
558
|
+
app.debug(borderColor)
|
|
559
|
+
|
|
548
560
|
|
|
549
561
|
var data = {
|
|
550
562
|
labels: [],
|
|
@@ -560,7 +572,8 @@ module.exports = function (app) {
|
|
|
560
572
|
data.datasets[index] = {
|
|
561
573
|
data: [],
|
|
562
574
|
pointRadius: [],
|
|
563
|
-
|
|
575
|
+
backgroundColor: backgroundColor[index],
|
|
576
|
+
borderColor: borderColor[index],
|
|
564
577
|
fill: false,
|
|
565
578
|
label: tws + ' kts'
|
|
566
579
|
}
|
package/public/index.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<script type='text/javascript' src="./Chart.min.js"></script>
|
|
4
4
|
<script type='text/javascript' src='/jquery/dist/jquery.min.js'></script>
|
|
5
5
|
<title>Polar performance</title>
|
|
6
|
-
<body>
|
|
6
|
+
<body style="background-color:#020202;">
|
|
7
7
|
|
|
8
8
|
<canvas id="myChart" style="width:100%;max-width:1200px"></canvas>
|
|
9
9
|
|
|
@@ -18,22 +18,65 @@ function showChart (data) {
|
|
|
18
18
|
type: "scatter",
|
|
19
19
|
data: data,
|
|
20
20
|
options: {
|
|
21
|
-
legend: {
|
|
21
|
+
legend: {
|
|
22
|
+
display: true,
|
|
23
|
+
labels: {
|
|
24
|
+
fontSize: 16,
|
|
25
|
+
fontColor: 'white'
|
|
26
|
+
}
|
|
27
|
+
},
|
|
22
28
|
spanGaps: true,
|
|
23
29
|
scales: {
|
|
24
30
|
x: {
|
|
25
|
-
type: 'linear'
|
|
31
|
+
type: 'linear',
|
|
32
|
+
ticks: {
|
|
33
|
+
color: 'white',
|
|
34
|
+
font: {
|
|
35
|
+
size: 14
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
y: {
|
|
40
|
+
type: 'linear',
|
|
41
|
+
ticks: {
|
|
42
|
+
color: 'white',
|
|
43
|
+
font: {
|
|
44
|
+
size: 14
|
|
45
|
+
}
|
|
46
|
+
}
|
|
26
47
|
},
|
|
27
48
|
xAxes: [{
|
|
28
49
|
scaleLabel: {
|
|
29
50
|
display: true,
|
|
30
|
-
labelString: 'True wind angle (TWA)'
|
|
51
|
+
labelString: 'True wind angle (TWA)',
|
|
52
|
+
fontColor: 'white',
|
|
53
|
+
fontSize: 16
|
|
54
|
+
},
|
|
55
|
+
ticks: {
|
|
56
|
+
display: true,
|
|
57
|
+
fontColor: 'white',
|
|
58
|
+
fontSize: 16,
|
|
59
|
+
},
|
|
60
|
+
gridLines: {
|
|
61
|
+
color: 'rgba(180,180,180,0.7)',
|
|
62
|
+
lineWidth: 1
|
|
31
63
|
}
|
|
32
64
|
}],
|
|
33
65
|
yAxes: [{
|
|
34
66
|
scaleLabel: {
|
|
35
67
|
display: true,
|
|
36
|
-
labelString: 'Target boat speed (POL SPD)'
|
|
68
|
+
labelString: 'Target boat speed (POL SPD)',
|
|
69
|
+
fontColor: 'white',
|
|
70
|
+
fontSize: 14
|
|
71
|
+
},
|
|
72
|
+
ticks: {
|
|
73
|
+
display: true,
|
|
74
|
+
fontColor: 'white',
|
|
75
|
+
fontSize: 14,
|
|
76
|
+
},
|
|
77
|
+
gridLines: {
|
|
78
|
+
color: 'rgba(180,180,180,0.7)',
|
|
79
|
+
lineWidth: 1
|
|
37
80
|
}
|
|
38
81
|
}],
|
|
39
82
|
},
|
|
@@ -47,15 +90,19 @@ function showChart (data) {
|
|
|
47
90
|
return label
|
|
48
91
|
}
|
|
49
92
|
},
|
|
50
|
-
backgroundColor: '#
|
|
51
|
-
titleFontSize:
|
|
93
|
+
backgroundColor: '#666',
|
|
94
|
+
titleFontSize: 18,
|
|
52
95
|
titleFontColor: '#0066ff',
|
|
53
|
-
bodyFontColor: '#
|
|
54
|
-
bodyFontSize:
|
|
96
|
+
bodyFontColor: '#ddd',
|
|
97
|
+
bodyFontSize: 18,
|
|
55
98
|
displayColors: false
|
|
56
99
|
}
|
|
57
100
|
}
|
|
58
101
|
})
|
|
102
|
+
|
|
103
|
+
var ctx = document.getElementById("myChart")
|
|
104
|
+
ctx.style.backgroundColor = 'rgba(0,0,0,0.8)'
|
|
105
|
+
ctx.style.fontColor = 'white'
|
|
59
106
|
}
|
|
60
107
|
</script>
|
|
61
108
|
|