|
1
|
|
|
/** |
|
2
|
|
|
* Analytics |
|
3
|
|
|
* |
|
4
|
|
|
* SPDX-FileCopyrightText: 2019-2024 Marcel Scherello |
|
5
|
|
|
* SPDX-License-Identifier: AGPL-3.0-or-later |
|
6
|
|
|
*/ |
|
7
|
|
|
|
|
8
|
|
|
/** global: OCA */ |
|
9
|
|
|
/** global: OCP */ |
|
10
|
|
|
/** global: OC */ |
|
11
|
|
|
/** global: table */ |
|
12
|
|
|
/** global: Chart */ |
|
13
|
|
|
/** global: cloner */ |
|
14
|
|
|
/** global: _ */ |
|
15
|
|
|
|
|
16
|
|
|
'use strict'; |
|
17
|
|
|
let OCA; |
|
18
|
|
|
OCA = {}; |
|
19
|
|
|
|
|
20
|
|
|
if (!OCA.Analytics) { |
|
21
|
|
|
/** |
|
22
|
|
|
* @namespace |
|
23
|
|
|
*/ |
|
24
|
|
|
OCA.Analytics = { |
|
25
|
|
|
initialDocumentTitle: null, |
|
26
|
|
|
isDataset: false, |
|
27
|
|
|
currentReportData: {}, |
|
28
|
|
|
chartObject: null, |
|
29
|
|
|
// flexible mapping depending on type required by the used chart library |
|
30
|
|
|
chartTypeMapping: { |
|
31
|
|
|
'datetime': 'line', |
|
32
|
|
|
'column': 'bar', |
|
33
|
|
|
'columnSt': 'bar', // map stacked type also to base type; needed in filter |
|
34
|
|
|
'columnSt100': 'bar', // map stacked type also to base type; needed in filter |
|
35
|
|
|
'area': 'line', |
|
36
|
|
|
'line': 'line', |
|
37
|
|
|
'doughnut': 'doughnut' |
|
38
|
|
|
}, |
|
39
|
|
|
datasources: [], |
|
40
|
|
|
datasourceOptions: [], |
|
41
|
|
|
datasets: [], |
|
42
|
|
|
reports: [], |
|
43
|
|
|
unsavedFilters: null, |
|
44
|
|
|
refreshTimer: null, |
|
45
|
|
|
currentXhrRequest: null, |
|
46
|
|
|
}; |
|
47
|
|
|
} |
|
48
|
|
|
|
|
49
|
|
|
OCA.Analytics.UI = { |
|
50
|
|
|
|
|
51
|
|
|
initApplication: function () { |
|
52
|
|
|
OCA.Analytics.Visualization.hideElement('analytics-intro'); |
|
53
|
|
|
OCA.Analytics.Visualization.hideElement('analytics-content'); |
|
54
|
|
|
OCA.Analytics.Visualization.hideElement('analytics-loading'); |
|
55
|
|
|
OCA.Analytics.Visualization.showElement('analytics-content'); |
|
56
|
|
|
document.getElementById('chartContainer').innerHTML = ''; |
|
57
|
|
|
document.getElementById('chartContainer').innerHTML = '<button id="chartZoomReset" hidden>Reset Zoom</button><canvas id="myChart" ></canvas>'; |
|
58
|
|
|
document.getElementById('chartZoomReset').addEventListener('click', OCA.Analytics.UI.handleZoomResetButton); |
|
59
|
|
|
|
|
60
|
|
|
OCA.Analytics.currentReportData = JSON.parse(document.getElementById('data').value); |
|
61
|
|
|
// if the user uses a special time parser (e.g. DD.MM), the data needs to be sorted differently |
|
62
|
|
|
OCA.Analytics.currentReportData = OCA.Analytics.Visualization.sortDates(OCA.Analytics.currentReportData); |
|
63
|
|
|
OCA.Analytics.currentReportData.data = OCA.Analytics.Visualization.formatDates(OCA.Analytics.currentReportData.data); |
|
64
|
|
|
|
|
65
|
|
|
let ctx = document.getElementById('myChart').getContext('2d'); |
|
66
|
|
|
OCA.Analytics.Visualization.buildChart(ctx, OCA.Analytics.currentReportData, OCA.Analytics.UI.getDefaultChartOptions()); |
|
67
|
|
|
}, |
|
68
|
|
|
|
|
69
|
|
|
getDefaultChartOptions: function () { |
|
70
|
|
|
return { |
|
71
|
|
|
maintainAspectRatio: false, |
|
72
|
|
|
responsive: true, |
|
73
|
|
|
scales: { |
|
74
|
|
|
'primary': { |
|
75
|
|
|
type: 'linear', |
|
76
|
|
|
stacked: false, |
|
77
|
|
|
position: 'left', |
|
78
|
|
|
display: true, |
|
79
|
|
|
grid: { |
|
80
|
|
|
display: true, |
|
81
|
|
|
}, |
|
82
|
|
|
ticks: { |
|
83
|
|
|
callback: function (value) { |
|
84
|
|
|
return value.toLocaleString(); |
|
85
|
|
|
}, |
|
86
|
|
|
}, |
|
87
|
|
|
}, |
|
88
|
|
|
'secondary': { |
|
89
|
|
|
type: 'linear', |
|
90
|
|
|
stacked: false, |
|
91
|
|
|
position: 'right', |
|
92
|
|
|
display: false, |
|
93
|
|
|
grid: { |
|
94
|
|
|
display: false, |
|
95
|
|
|
}, |
|
96
|
|
|
ticks: { |
|
97
|
|
|
callback: function (value) { |
|
98
|
|
|
return value.toLocaleString(); |
|
99
|
|
|
}, |
|
100
|
|
|
}, |
|
101
|
|
|
}, |
|
102
|
|
|
'xAxes': { |
|
103
|
|
|
type: 'category', |
|
104
|
|
|
time: { |
|
105
|
|
|
parser: 'YYYY-MM-DD HH:mm', |
|
106
|
|
|
tooltipFormat: 'LL', |
|
107
|
|
|
}, |
|
108
|
|
|
distribution: 'linear', |
|
109
|
|
|
grid: { |
|
110
|
|
|
display: false |
|
111
|
|
|
}, |
|
112
|
|
|
display: true, |
|
113
|
|
|
}, |
|
114
|
|
|
}, |
|
115
|
|
|
animation: { |
|
116
|
|
|
duration: 0 // general animation time |
|
117
|
|
|
}, |
|
118
|
|
|
|
|
119
|
|
|
tooltips: { |
|
120
|
|
|
callbacks: { |
|
121
|
|
|
label: function (tooltipItem, data) { |
|
122
|
|
|
// let datasetLabel = data.datasets[tooltipItem.datasetIndex].label || ''; |
|
123
|
|
|
let datasetLabel = data.datasets[tooltipItem.datasetIndex].label || data.labels[tooltipItem.index]; |
|
124
|
|
|
if (tooltipItem.yLabel !== '') { |
|
125
|
|
|
return datasetLabel + ': ' + parseFloat(tooltipItem.yLabel).toLocaleString(); |
|
126
|
|
|
} else { |
|
|
|
|
|
|
127
|
|
|
return datasetLabel; |
|
128
|
|
|
} |
|
129
|
|
|
} |
|
130
|
|
|
} |
|
131
|
|
|
}, |
|
132
|
|
|
|
|
133
|
|
|
plugins: { |
|
134
|
|
|
datalabels: { |
|
135
|
|
|
display: false, |
|
136
|
|
|
formatter: (value, ctx) => { |
|
137
|
|
|
let sum = 0; |
|
138
|
|
|
let dataArr = ctx.chart.data.datasets[0].data; |
|
139
|
|
|
dataArr.map(data => { |
|
140
|
|
|
sum += data; |
|
141
|
|
|
}); |
|
142
|
|
|
value = (value * 100 / sum).toFixed(0); |
|
143
|
|
|
if (value > 5) { |
|
144
|
|
|
return value + "%"; |
|
145
|
|
|
} else { |
|
|
|
|
|
|
146
|
|
|
return ''; |
|
147
|
|
|
} |
|
148
|
|
|
}, |
|
149
|
|
|
}, |
|
150
|
|
|
}, |
|
151
|
|
|
}; |
|
152
|
|
|
}, |
|
153
|
|
|
} |
|
154
|
|
|
|
|
155
|
|
|
document.addEventListener('DOMContentLoaded', function () { |
|
156
|
|
|
OCA.Analytics.UI.initApplication(); |
|
157
|
|
|
OCA.Analytics.Visualization.hideElement('analytics-warning'); |
|
158
|
|
|
}); |
Rello /
analytics
Loading history...