Libraryless. Click here for Pure Java version (3244L/20K).
1 | // see https://jsfiddle.net/stefanreich/yLcus69t/4/ |
2 | |
3 | sclass HTMLGauge {
|
4 | S internalID = aRandomID(); |
5 | S id = "gauge-" + internalID; |
6 | S varName = "gauge_" + internalID; |
7 | |
8 | // add params for the div here like style or class |
9 | new MapSO divParams; |
10 | |
11 | // shared with all gauges |
12 | S headStuff() {
|
13 | ret [[ |
14 | <script src="https://code.highcharts.com/highcharts.js"></script> |
15 | <script src="https://code.highcharts.com/highcharts-more.js"></script> |
16 | <script src="https://code.highcharts.com/modules/solid-gauge.js"></script> |
17 | <script src="https://code.highcharts.com/modules/accessibility.js"></script> |
18 | ]]; |
19 | } |
20 | |
21 | S htmlAndJS() {
|
22 | ret makeDiv() + hjs(js()); |
23 | } |
24 | |
25 | S makeDiv() {
|
26 | ret div("", paramsPlus(divParams, +id));
|
27 | } |
28 | |
29 | S js() {
|
30 | ret replaceDollarVars2([[ |
31 | var ${varName}_gaugeOptions = {
|
32 | chart: { type: 'solidgauge' },
|
33 | title: null, |
34 | pane: {
|
35 | center: ['50%', '85%'], |
36 | size: '140%', |
37 | startAngle: -90, |
38 | endAngle: 90, |
39 | background: {
|
40 | backgroundColor: |
41 | Highcharts.defaultOptions.legend.backgroundColor || '#EEE', |
42 | innerRadius: '60%', |
43 | outerRadius: '100%', |
44 | shape: 'arc' |
45 | } |
46 | }, |
47 | |
48 | // the value axis |
49 | yAxis: {
|
50 | stops: [ |
51 | [0.6, '#55BF3B'], // green |
52 | [0.75, '#DDDF0D'], // yellow |
53 | [0.85, '#DF5353'] // red |
54 | ], |
55 | lineWidth: 0, |
56 | tickWidth: 0, |
57 | minorTickInterval: null, |
58 | tickAmount: 2, |
59 | title: { y: -70 },
|
60 | labels: { y: 16 }
|
61 | }, |
62 | |
63 | plotOptions: {
|
64 | solidgauge: {
|
65 | dataLabels: {
|
66 | y: 5, |
67 | borderWidth: 0, |
68 | useHTML: true |
69 | } |
70 | } |
71 | } |
72 | }; |
73 | |
74 | var $varName = Highcharts.chart('$id', Highcharts.merge(${varName}_gaugeOptions, {
|
75 | yAxis: {
|
76 | min: 0, |
77 | max: 200, |
78 | title: { text: 'RAM' }
|
79 | }, |
80 | |
81 | credits: {
|
82 | enabled: false |
83 | }, |
84 | |
85 | series: [{
|
86 | name: 'RAM used', |
87 | data: [80], |
88 | dataLabels: {
|
89 | format: |
90 | '<div style="text-align:center">' + |
91 | '<span style="font-size:25px">{y}</span><br/>' +
|
92 | '<span style="font-size:12px;opacity:0.4">GB</span>' + |
93 | '</div>' |
94 | }, |
95 | tooltip: { valueSuffix: ' GB' }
|
96 | }] |
97 | |
98 | })); |
99 | |
100 | function ${varName}_setValue(value) {
|
101 | point = ${varName}.series[0].points[0].update(value);
|
102 | } |
103 | ]], +varName, +id); |
104 | } |
105 | } |
download show line numbers debug dex old transpilations
Travelled to 5 computer(s): bhatertpkbcr, ekrmjmnbrukm, mqqgnosmbjvj, pyentgdyhuwx, vouqrxazstgt
No comments. add comment
| Snippet ID: | #1030661 |
| Snippet name: | HTMLGauge [dev.] |
| Eternal ID of this version: | #1030661/7 |
| Text MD5: | 9a18fd8715006da45f2ccb1f932eea41 |
| Transpilation MD5: | af39b3152cf1e85aaa9d9c81081435be |
| Author: | stefan |
| Category: | javax / html |
| Type: | JavaX fragment (include) |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2021-02-22 13:33:36 |
| Source code size: | 2934 bytes / 105 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 283 / 524 |
| Version history: | 6 change(s) |
| Referenced in: | [show references] |