Pepperi API Design
Search…
Generic Resource
PEPPERI NOTIFICATION SERVICE
Actions Queue
CPI Node
TODO training
Powered By GitBook
Charts interface
Describes the interface of the chart script JS
The chart script file must export (using AMD module export) a class that will receive an HTML element from the container and renders it however it wants and configuration, the configuration currently only has a "label" which is the title of the chart. The class must contain a constructor and a function called update() whose function is to prepare the data into the chart. The container will call this function after the instance is created and after the data is sent.
1
{
2
groups: ["ActionDate"],
3
series: ["Series 1", "Series 2"],
4
values: [
5
{ "ActionDate": "01/01/2021", "Series 1": this.getRandomNumber(), "Series 2": this.getRandomNumber() },
6
{ "ActionDate": "01/02/2021", "Series 1": this.getRandomNumber(), "Series 2": this.getRandomNumber() },
7
{ "ActionDate": "01/03/2021", "Series 1": this.getRandomNumber(), "Series 2": this.getRandomNumber() },
8
{ "ActionDate": "01/04/2021", "Series 1": this.getRandomNumber(), "Series 2": this.getRandomNumber() },
9
{ "ActionDate": "01/05/2021", "Series 1": this.getRandomNumber(), "Series 2": this.getRandomNumber() },
10
{ "ActionDate": "01/06/2021", "Series 1": this.getRandomNumber(), "Series 2": this.getRandomNumber() }
11
​
12
]
13
}
Copied!
In addition to class, The chart script file must export an array of dependencies it used. For example, if he used chart js:
1
const deps = [
2
'https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js'
3
];
Copied!

Full JS Example:

This is an example of a real chart including the implementation of the class and dependencies
1
// AMD module
2
// define is used to define named or unnamed modules based using the following
3
define(['exports'], function (exports) {
4
​
5
class MyChart {
6
7
// element - an html div that can be using to render the chart
8
constructor(element, configuration) {
9
10
element.innerHTML = `<div style="border:1px solid #000000;">
11
<canvas></canvas>
12
</div>`;
13
14
this.data = {};
15
16
const ctx = element.querySelector('canvas');
17
const myChart = new Chart(ctx, {
18
type: 'bar',
19
options: {
20
scales: {
21
yAxes: [{
22
ticks: {
23
beginAtZero: true
24
}
25
}]
26
}
27
}
28
});
29
}
30
31
// The container will call this function after instance creaed
32
update() {
33
let myDatasets=[];
34
var datasetData = [];
35
var datasetBGColors = [];
36
for (let i=0; i<this.data.series.length; i++) {
37
datasetData.push(this.data.values[0][this.data.series[i]]);
38
let color = this.getRandomColor();
39
datasetBGColors.push('rgba('+color+', 0.2)');
40
};
41
const dataSet = {
42
data: datasetData,
43
backgroundColor: datasetBGColors,
44
borderWidth: 1
45
}
46
myDatasets.push(dataSet);
47
48
this.chart.data = {
49
datasets: myDatasets,
50
labels: this.data.series
51
}
52
this.chart.update();
53
}
54
}
55
const deps = [
56
'https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js'
57
];
58
​
59
exports['default'] = MyChart;
60
exports.deps = deps;
61
​
62
Object.defineProperty(exports, '__esModule', { value: true });
63
});
Copied!
​
​
Last modified 1mo ago
Copy link