forked from iRaySpace/erpnext-scripts
-
Notifications
You must be signed in to change notification settings - Fork 0
/
charts_page.js
98 lines (83 loc) · 1.8 KB
/
charts_page.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
frappe.provide('testmodule.setup');
frappe.pages['dashboard-test'].on_page_load = function(wrapper) {
frappe.ui.make_app_page({
parent: wrapper,
title: 'Dashboard',
single_column: true
});
wrapper.setup = new testmodule.setup.SetupHelper(wrapper);
window.cur_setup = wrapper.setup;
};
testmodule.setup.SetupHelper = class SetupHelper {
constructor(wrapper) {
this.wrapper = $(wrapper).find('.layout-main-section');
this.page = wrapper.page;
const assets = [
'assets/testmodule/css/setup.css'
];
frappe.require(assets, () => {
this.make();
});
}
make() {
this.prepare_charts();
this.make_charts();
}
prepare_charts() {
this.wrapper.append(`
<div class="dashboard">
<section class="chart-container">
</section>
</div>
`);
}
make_charts() {
this.dashboard = new Dashboard({
wrapper: this.wrapper.find('.chart-container')
});
}
};
class Dashboard {
constructor({ wrapper }) {
this.wrapper = wrapper;
this.make();
}
make() {
this.make_dom();
// Charts data
const data = {
labels: ['12am-3am', '3am-6pm', '6am-9am', '9am-12am', '12pm-3pm', '3pm-6pm', '6pm-9pm', '9am-12am'],
datasets: [
{
name: 'Some Data', type: 'bar',
values: [25, 40, 30, 35, 8, 52, 17, -4]
},
{
name: 'Another Set', type: 'line',
values: [25, 50, -10, 15, 18, 32, 27, 14]
}
]
};
// Making charts
this.make_charts(data);
}
make_dom() {
this.wrapper.append(`
<div class="charts">
<div class="simple-chart">
</div>
</div>
`);
}
make_charts(data) {
this.$charts = $('<div id="chart1"></div>').hide().appendTo('.simple-chart');
this.chart = new Chart('#chart1', {
title: 'Test Chart',
data: data,
type: 'axis-mixed',
height: 250,
colors: ['#7cd6fd', '#743ee2']
});
this.$charts.show();
}
}