1 | /* |
||
2 | * charts.js |
||
3 | * Copyright (c) 2017 [email protected] |
||
4 | * |
||
5 | * This file is part of Firefly III. |
||
6 | * |
||
7 | * Firefly III is free software: you can redistribute it and/or modify |
||
8 | * it under the terms of the GNU General Public License as published by |
||
9 | * the Free Software Foundation, either version 3 of the License, or |
||
10 | * (at your option) any later version. |
||
11 | * |
||
12 | * Firefly III is distributed in the hope that it will be useful, |
||
13 | * but WITHOUT ANY WARRANTY; without even the implied warranty of |
||
14 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||
15 | * GNU General Public License for more details. |
||
16 | * |
||
17 | * You should have received a copy of the GNU General Public License |
||
18 | * along with Firefly III. If not, see <http://www.gnu.org/licenses/>. |
||
19 | */ |
||
20 | /** global: Chart, defaultChartOptions, accounting, defaultPieOptions, noDataForChart, todayText */ |
||
21 | var allCharts = {}; |
||
22 | |||
23 | |||
24 | /* |
||
25 | Make some colours: |
||
26 | */ |
||
27 | var colourSet = [ |
||
28 | [53, 124, 165], |
||
29 | [0, 141, 76], |
||
30 | [219, 139, 11], |
||
31 | [202, 25, 90], |
||
32 | [85, 82, 153], |
||
33 | [66, 133, 244], |
||
34 | [219, 68, 55], |
||
35 | [244, 180, 0], |
||
36 | [15, 157, 88], |
||
37 | [171, 71, 188], |
||
38 | [0, 172, 193], |
||
39 | [255, 112, 67], |
||
40 | [158, 157, 36], |
||
41 | [92, 107, 192], |
||
42 | [240, 98, 146], |
||
43 | [0, 121, 107], |
||
44 | [194, 24, 91] |
||
45 | ]; |
||
46 | |||
47 | var fillColors = []; |
||
48 | var strokePointHighColors = []; |
||
49 | |||
50 | |||
51 | for (var i = 0; i < colourSet.length; i++) { |
||
52 | fillColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.5)"); |
||
53 | strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)"); |
||
54 | } |
||
55 | |||
56 | Chart.defaults.global.legend.display = false; |
||
57 | Chart.defaults.global.animation.duration = 0; |
||
58 | Chart.defaults.global.responsive = true; |
||
59 | Chart.defaults.global.maintainAspectRatio = false; |
||
60 | |||
61 | /** |
||
62 | * |
||
63 | * @param data |
||
64 | * @returns {{}} |
||
65 | */ |
||
66 | function colorizeData(data) { |
||
67 | var newData = {}; |
||
68 | newData.datasets = []; |
||
69 | |||
70 | for (var i = 0; i < data.count; i++) { |
||
71 | newData.labels = data.labels; |
||
72 | var dataset = data.datasets[i]; |
||
73 | dataset.fill = false; |
||
74 | dataset.backgroundColor = dataset.borderColor = fillColors[i]; |
||
75 | newData.datasets.push(dataset); |
||
76 | } |
||
77 | return newData; |
||
78 | } |
||
79 | |||
80 | /** |
||
81 | * Function to draw a line chart: |
||
82 | * @param URI |
||
83 | * @param container |
||
84 | */ |
||
85 | function lineChart(URI, container) { |
||
86 | "use strict"; |
||
87 | |||
88 | var colorData = true; |
||
89 | var options = $.extend(true, {}, defaultChartOptions); |
||
90 | var chartType = 'line'; |
||
91 | |||
92 | drawAChart(URI, container, chartType, options, colorData); |
||
93 | } |
||
94 | |||
95 | /** |
||
96 | * Function to draw a chart with double Y Axes and stacked columns. |
||
97 | * |
||
98 | * @param URI |
||
99 | * @param container |
||
100 | */ |
||
101 | function doubleYChart(URI, container) { |
||
102 | "use strict"; |
||
103 | |||
104 | var colorData = true; |
||
105 | var options = $.extend(true, {}, defaultChartOptions); |
||
106 | options.scales.yAxes = [ |
||
107 | // y axis 0: |
||
108 | { |
||
109 | display: true, |
||
110 | ticks: { |
||
111 | callback: function (tickValue) { |
||
112 | "use strict"; |
||
113 | return accounting.formatMoney(tickValue); |
||
114 | |||
115 | }, |
||
116 | beginAtZero: true |
||
117 | }, |
||
118 | position: "left", |
||
119 | "id": "y-axis-0" |
||
120 | }, |
||
121 | // and y axis 1: |
||
122 | { |
||
123 | display: true, |
||
124 | ticks: { |
||
125 | callback: function (tickValue) { |
||
126 | "use strict"; |
||
127 | return accounting.formatMoney(tickValue); |
||
128 | |||
129 | }, |
||
130 | beginAtZero: true |
||
131 | }, |
||
132 | position: "right", |
||
133 | "id": "y-axis-1" |
||
134 | } |
||
135 | |||
136 | ]; |
||
137 | options.stacked = true; |
||
138 | options.scales.xAxes[0].stacked = true; |
||
139 | |||
140 | var chartType = 'bar'; |
||
141 | |||
142 | drawAChart(URI, container, chartType, options, colorData); |
||
143 | } |
||
144 | |||
145 | /** |
||
146 | * Function to draw a chart with double Y Axes and non stacked columns. |
||
147 | * |
||
148 | * @param URI |
||
149 | * @param container |
||
150 | */ |
||
151 | function doubleYNonStackedChart(URI, container) { |
||
152 | "use strict"; |
||
153 | |||
154 | var colorData = true; |
||
155 | var options = $.extend(true, {}, defaultChartOptions); |
||
156 | options.scales.yAxes = [ |
||
157 | // y axis 0: |
||
158 | { |
||
159 | display: true, |
||
160 | ticks: { |
||
161 | callback: function (tickValue) { |
||
162 | "use strict"; |
||
163 | return accounting.formatMoney(tickValue); |
||
164 | |||
165 | }, |
||
166 | beginAtZero: true |
||
167 | }, |
||
168 | position: "left", |
||
169 | "id": "y-axis-0" |
||
170 | }, |
||
171 | // and y axis 1: |
||
172 | { |
||
173 | display: true, |
||
174 | ticks: { |
||
175 | callback: function (tickValue) { |
||
176 | "use strict"; |
||
177 | return accounting.formatMoney(tickValue); |
||
178 | |||
179 | }, |
||
180 | beginAtZero: true |
||
181 | }, |
||
182 | position: "right", |
||
183 | "id": "y-axis-1" |
||
184 | } |
||
185 | |||
186 | ]; |
||
187 | var chartType = 'bar'; |
||
188 | |||
189 | drawAChart(URI, container, chartType, options, colorData); |
||
190 | } |
||
191 | |||
192 | |||
193 | /** |
||
194 | * |
||
195 | * @param URI |
||
196 | * @param container |
||
197 | */ |
||
198 | function columnChart(URI, container) { |
||
199 | "use strict"; |
||
200 | var colorData = true; |
||
201 | var options = $.extend(true, {}, defaultChartOptions); |
||
202 | var chartType = 'bar'; |
||
203 | |||
204 | drawAChart(URI, container, chartType, options, colorData); |
||
205 | |||
206 | } |
||
207 | |||
208 | /** |
||
209 | * |
||
210 | * @param URI |
||
211 | * @param container |
||
212 | */ |
||
213 | function stackedColumnChart(URI, container) { |
||
214 | "use strict"; |
||
215 | |||
216 | var colorData = true; |
||
217 | var options = $.extend(true, {}, defaultChartOptions); |
||
218 | |||
219 | options.stacked = true; |
||
220 | options.scales.xAxes[0].stacked = true; |
||
221 | options.scales.yAxes[0].stacked = true; |
||
222 | |||
223 | var chartType = 'bar'; |
||
224 | |||
225 | drawAChart(URI, container, chartType, options, colorData); |
||
226 | } |
||
227 | |||
228 | /** |
||
229 | * |
||
230 | * @param URI |
||
231 | * @param container |
||
232 | */ |
||
233 | function pieChart(URI, container) { |
||
234 | "use strict"; |
||
235 | |||
236 | var colorData = false; |
||
237 | var options = $.extend(true, {}, defaultPieOptions); |
||
238 | var chartType = 'pie'; |
||
239 | |||
240 | drawAChart(URI, container, chartType, options, colorData); |
||
241 | |||
242 | } |
||
243 | |||
244 | |||
245 | /** |
||
246 | * @param URI |
||
247 | * @param container |
||
248 | * @param chartType |
||
249 | * @param options |
||
250 | * @param colorData |
||
251 | * @param today |
||
0 ignored issues
–
show
Documentation
introduced
by
![]() |
|||
252 | */ |
||
253 | function drawAChart(URI, container, chartType, options, colorData) { |
||
254 | var containerObj = $('#' + container); |
||
255 | if (containerObj.length === 0) { |
||
256 | return; |
||
257 | } |
||
258 | |||
259 | |||
260 | $.getJSON(URI).done(function (data) { |
||
261 | containerObj.removeClass('general-chart-error'); |
||
262 | if (data.labels.length === 0) { |
||
263 | // remove the chart container + parent |
||
264 | var holder = $('#' + container).parent().parent(); |
||
265 | if (holder.hasClass('box') || holder.hasClass('box-body')) { |
||
266 | // find box-body: |
||
267 | var boxBody; |
||
268 | if (!holder.hasClass('box-body')) { |
||
269 | boxBody = holder.find('.box-body'); |
||
270 | } else { |
||
271 | boxBody = holder; |
||
272 | } |
||
273 | boxBody.empty().append($('<p>').append($('<em>').text(noDataForChart))); |
||
274 | } |
||
275 | return; |
||
276 | } |
||
277 | |||
278 | |||
279 | if (colorData) { |
||
280 | data = colorizeData(data); |
||
281 | } |
||
282 | |||
283 | if (allCharts.hasOwnProperty(container)) { |
||
284 | allCharts[container].data.datasets = data.datasets; |
||
285 | allCharts[container].data.labels = data.labels; |
||
286 | allCharts[container].update(); |
||
287 | } else { |
||
288 | // new chart! |
||
289 | var ctx = document.getElementById(container).getContext("2d"); |
||
290 | var chartOpts = { |
||
291 | type: chartType, |
||
292 | data: data, |
||
293 | options: options, |
||
294 | lineAtIndex: [], |
||
295 | annotation: {}, |
||
296 | }; |
||
297 | if (typeof drawVerticalLine !== 'undefined') { |
||
0 ignored issues
–
show
The variable
drawVerticalLine seems to be never declared. If this is a global, consider adding a /** global: drawVerticalLine */ comment.
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. ![]() |
|||
298 | if (drawVerticalLine !== '') { |
||
299 | // draw line using annotation plugin. |
||
300 | console.log('Will draw line'); |
||
0 ignored issues
–
show
|
|||
301 | chartOpts.options.annotation = { |
||
302 | annotations: [{ |
||
303 | type: 'line', |
||
304 | id: 'a-line-1', |
||
305 | mode: 'vertical', |
||
306 | scaleID: 'x-axis-0', |
||
307 | value: drawVerticalLine, |
||
308 | borderColor: 'red', |
||
309 | borderWidth: 1, |
||
310 | label: { |
||
311 | backgroundColor: 'rgba(0,0,0,0)', |
||
312 | fontFamily: "sans-serif", |
||
313 | fontSize: 12, |
||
314 | fontColor: "#333", |
||
315 | position: "right", |
||
316 | xAdjust: -20, |
||
317 | yAdjust: -125, |
||
318 | enabled: true, |
||
319 | content: todayText |
||
320 | } |
||
321 | }] |
||
322 | }; |
||
323 | } |
||
324 | } |
||
325 | allCharts[container] = new Chart(ctx, chartOpts); |
||
326 | } |
||
327 | |||
328 | }).fail(function () { |
||
329 | $('#' + container).addClass('general-chart-error'); |
||
330 | }); |
||
331 | } |
||
332 |