-
Notifications
You must be signed in to change notification settings - Fork 2
/
MMM-JsonGraph.js
102 lines (85 loc) · 2.48 KB
/
MMM-JsonGraph.js
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
'use strict';
Module.register("MMM-JsonGraph", {
jsonData: null,
// Default module config.
defaults: {
url: "",
arrayName: null,
xAxisName: "",
textValue: "",
updateInterval: 15000
},
start: function () {
this.getJson();
this.scheduleUpdate();
},
getStyles: function () {
return ["MMM-JsonGraph.css"];
},
scheduleUpdate: function () {
var self = this;
setInterval(function () {
self.getJson();
}, this.config.updateInterval);
},
// Request node_helper to get json from url
getJson: function () {
this.sendSocketNotification("MMM-JsonGraph_GET_JSON", this.config.url);
},
socketNotificationReceived: function (notification, payload) {
if (notification === "MMM-JsonGraph_JSON_RESULT") {
console.log("MMM-JsonGraph_JSON_RESULT", payload);
// Only continue if the notification came from the request we made
// This way we can load the module more than once
if (payload.url === this.config.url) {
this.jsonData = payload.data;
this.updateDom(500);
}
}
},
// Override dom generator.
getDom: function () {
var wrapper = document.createElement("div");
wrapper.className = "xsmall";
if (!this.jsonData) {
wrapper.innerHTML = "Awaiting json data...";
return wrapper;
}
wrapper.innerHTML = this.createGraph(this.jsonData);
return wrapper;
},
createGraph: function (json) {
var items = [];
if (this.config.arrayName) {
items = this.jsonData[this.config.arrayName];
}
else {
items = this.jsonData;
}
// Check if items is of type array
if (!(items instanceof Array)) {
return "Json data is not of type array! " +
"Maybe the config arrayName is not used and should be, or is configured wrong";
}
var rects = "";
var xAxisName = this.config.xAxisName;
var maxValue = Math.max.apply(Math, items.map(function (o) { return o[xAxisName]; }))
var indexHeight = 0;
items.forEach(element => {
var xAxisValue = element[this.config.xAxisName];
var width = (xAxisValue / maxValue) * 100;
var height = 20 * indexHeight;
rects += `<g class="mmmJsonGraph-bar">
<rect width="` + width + `%" height="19" y="` + height + `"></rect>
<text x="10" y="` + (height + 8) + `" dy=".35em">` + element[this.config.textValue] + `</text>
</g>`;
indexHeight++;
});
return `
<figure>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="chart" width="300" height="` + items.length * 20 + `" role="img">
` + rects + `
</svg>
</figure>`;
}
});