Skip to content
This repository was archived by the owner on Mar 30, 2024. It is now read-only.

Commit be23a99

Browse files
kimbtechkimbtech
committed
Graphes Update
1 parent a272d52 commit be23a99

File tree

4 files changed

+91
-38
lines changed

4 files changed

+91
-38
lines changed

‎VERSION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
latest
2-
0.2.4
2+
0.2.5
33
0.2
44
0

‎php/load/graphs/BarDailyWork.js‎

Lines changed: 78 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,59 +5,107 @@ function createGraph(combiData, plainData, singleDayData, canvas){
55
* The function should return the ChartJS object.
66
*/
77

8-
let plotdata = {};
9-
plainData.forEach(data => {
10-
let date = new Date(data.begin * 1000);
8+
function getLabelFromTimestamp(t) {
9+
let date = new Date(t * 1000);
1110
let day = (date.getDate() > 9 ? '' : '0') + date.getDate();
1211
let month = (date.getMonth() + 1 > 9 ? '' : '0') + (date.getMonth() + 1);
13-
14-
let key = `${day}.${month}.${date.getFullYear()}`;
15-
if (!plotdata.hasOwnProperty(key)) {
16-
plotdata[key] = 0;
17-
}
1812

19-
plotdata[key] += data.duration;
20-
});
13+
return `${day}.${month}.${date.getFullYear()}`;
14+
}
2115

22-
Object.keys(plotdata).forEach(key => {
23-
plotdata[key] = Math.round((plotdata[key] / 3600) * 100) / 100;
16+
// get time span and all categories
17+
var minDate = Number.MAX_SAFE_INTEGER;
18+
var maxDate = -1;
19+
var allCategories = {}
20+
plainData.forEach(data => {
21+
if( data.begin < minDate ){
22+
minDate = data.begin;
23+
}
24+
if( data.end > maxDate ){
25+
maxDate = data.end;
26+
}
27+
if( !allCategories.hasOwnProperty(data.category)){
28+
allCategories[data.category] = 0;
29+
}
2430
});
2531

26-
let plotdataValues = [];
32+
// fill (empty) categories in each day
33+
let plotdata = {};
2734
let plotdataLabels = [];
28-
plotdataLabels = Object.keys(plotdata).sort((a,b) => {
29-
return (b.split('.').reverse().join('-') < a.split('.').reverse().join('-')) -1;
30-
});
31-
plotdataLabels.forEach(key => {
32-
plotdataValues.push( plotdata[key] );
35+
for( timestamp = minDate; timestamp <= maxDate; timestamp += 86400){
36+
let label = getLabelFromTimestamp(timestamp);
37+
plotdata[label] = Object.assign({}, allCategories);
38+
plotdataLabels.push(label)
39+
}
40+
41+
// fill with data
42+
plainData.forEach(data => {
43+
plotdata[getLabelFromTimestamp(data.begin)][data.category] += data.duration;
44+
});
45+
46+
// convert to hours
47+
Object.keys(plotdata).forEach(function(label) {
48+
Object.keys(plotdata[label]).forEach(function(category) {
49+
plotdata[label][category] = Math.round((plotdata[label][category] / 3600) * 100) / 100;
3350
});
34-
51+
});
52+
3553
/**
3654
* Colors from
3755
* chartjs-plugin-colorschemes MIT License
3856
* Copyright (c) 2019 Akihiko Kusanagi
3957
* https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/src/colorschemes/colorschemes.tableau.js
4058
*/
59+
const baseColors = ['#4E79A7', '#A0CBE8', '#F28E2B', '#FFBE7D', '#59A14F', '#8CD17D', '#B6992D', '#F1CE63', '#499894', '#86BCB6', '#E15759', '#FF9D9A', '#79706E', '#BAB0AC', '#D37295', '#FABFD2', '#B07AA1', '#D4A6C8', '#9D7660', '#D7B5A6'];
60+
61+
var categoryDatasetIdMap = {};
62+
var chartData = {
63+
labels : plotdataLabels,
64+
datasets: []
65+
};
66+
67+
var datasetIndex = 0;
68+
plotdataLabels.forEach(function(label) {
69+
Object.keys(plotdata[label]).forEach(function(category) {
70+
if(!categoryDatasetIdMap.hasOwnProperty(category)){
71+
categoryDatasetIdMap[category] = datasetIndex;
72+
chartData.datasets.push({
73+
label : category,
74+
backgroundColor: baseColors[datasetIndex % baseColors.length],
75+
data: []
76+
});
77+
datasetIndex++;
78+
}
79+
chartData.datasets[categoryDatasetIdMap[category]].data.push(
80+
plotdata[label][category]
81+
);
82+
});
83+
});
84+
4185
let config = {
4286
type: 'bar',
43-
data: {
44-
datasets: [{
45-
data: plotdataValues,
46-
label: 'Daily work',
47-
backgroundColor: '#A0CBE8',
48-
borderColor: '#4E79A7',
49-
borderWidth: 1
50-
}],
51-
labels: plotdataLabels
52-
},
87+
data: chartData,
5388
options: {
5489
responsive: true,
5590
tooltips: {
5691
callbacks: {
5792
label: function(tooltipItem, chartData) {
58-
return `Daily work: ${chartData.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]} hours`;
93+
return `${chartData.datasets[tooltipItem.datasetIndex].label} ${chartData.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]} hours`;
94+
},
95+
title : function(tooltipItem, chartData) {
96+
var daySum = chartData.datasets.reduce((p,c) => p + c.data[tooltipItem[0].index], 0);
97+
return `${tooltipItem[0].label}: ${daySum} hours`;
5998
}
6099
}
100+
},
101+
scales: {
102+
xAxes: [{
103+
stacked: true,
104+
beginAtZero: true
105+
}],
106+
yAxes: [{
107+
stacked: true
108+
}]
61109
}
62110
}
63111
};

‎php/load/graphs/BarDayTimes.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,16 +74,18 @@ function createGraph(combiData, plainData, singleDayData, canvas){
7474
tooltips: {
7575
callbacks: {
7676
label: function(tooltipItem, chartData) {
77-
return `${chartData.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]} hours`;
77+
return `${chartData.datasets[tooltipItem.datasetIndex].label} ${chartData.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]} hours`;
7878
},
79-
title : function(tooltipItem) {
80-
return `${tooltipItem[0].label}:00 - ${tooltipItem[0].label}:59`;
79+
title : function(tooltipItem, chartData) {
80+
var daySum = chartData.datasets.reduce((p,c) => p + c.data[tooltipItem[0].index], 0);
81+
return `${tooltipItem[0].label}:00 - ${tooltipItem[0].label}:59: ${daySum} hours`;
8182
}
8283
}
8384
},
8485
scales: {
8586
xAxes: [{
8687
stacked: true,
88+
beginAtZero: true
8789
}],
8890
yAxes: [{
8991
stacked: true

‎php/load/graphs/BarDays.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,12 @@ function createGraph(combiData, plainData, singleDayData, canvas){
3535
labels : ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
3636
datasets: []
3737
};
38-
var index = 0;
39-
Object.keys(plotdata).forEach( (category) => {
38+
Object.keys(plotdata).forEach( (category, index) => {
4039
chartData.datasets.push({
4140
label : category,
4241
backgroundColor: baseColors[index % baseColors.length],
4342
data: plotdata[category]
4443
});
45-
index++;
4644
})
4745

4846
var config = {
@@ -53,13 +51,18 @@ function createGraph(combiData, plainData, singleDayData, canvas){
5351
tooltips: {
5452
callbacks: {
5553
label: function(tooltipItem, chartData) {
56-
return `${chartData.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]} hours`;
54+
return `${chartData.datasets[tooltipItem.datasetIndex].label} ${chartData.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]} hours`;
55+
},
56+
title : function(tooltipItem, chartData) {
57+
var daySum = chartData.datasets.reduce((p,c) => p + c.data[tooltipItem[0].index], 0);
58+
return `${tooltipItem[0].label}: ${daySum} hours`;
5759
}
5860
}
5961
},
6062
scales: {
6163
xAxes: [{
6264
stacked: true,
65+
beginAtZero: true
6366
}],
6467
yAxes: [{
6568
stacked: true

0 commit comments

Comments
 (0)