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

Commit e0069bb

Browse files
kimbtechkimbtech
committed
Stats GUI Update && New Graphs
1 parent c4967ec commit e0069bb

File tree

11 files changed

+324
-68
lines changed

11 files changed

+324
-68
lines changed

‎README.md‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,11 +74,21 @@ It is possible to create custom graph-views for the stats view.
7474
### Create your own stats function
7575
> See an example e.g. [PieCategory](https://github.com/KIMB-technologies/TaskTimeTerminateServer/blob/master/php/load/graphs/PieCategory.js)
7676
77-
When the user selects a graph and clicks on *Display Graph* the corresponding JS-file is loaded and the the function `createGraph(data, canvas)`
77+
When the user selects a graph and clicks on *Display Graph* the corresponding JS-file is loaded and the the function `createGraph(combiData, plainData, singleDayData, canvas)`
7878
of this file will be executed. In a file like [PieCategory](https://github.com/KIMB-technologies/TaskTimeTerminateServer/blob/master/php/load/graphs/PieCategory.js)
79-
such function like `createGraph(data, canvas)` can be defined.
79+
such function like `createGraph(combiData, plainData, singleDayData, canvas)` can be defined.
80+
81+
Each function gets four parameters, three `*Data` and one `canvas`.
82+
The parameter `*Data` are arrays containing objects with datasets, they all represent the same current data selection of the user, but haven different formats.
83+
- `combiData`
84+
- `[{"category":"Test","name":"My Task","duration":3600,"times":1,"days":["23.09", ...],"devices":["Server", ...]}, ...]`
85+
- `plainData`
86+
- This array may be very large and the system may not deliver all user selected datasets (when they become too much).
87+
- `[{"name":"My Task","category":"Test","begin":1600866000,"end":1600869600,"duration":3600,"device":"Server"}, ...]`
88+
- `singleDayData`
89+
- Will be `false` if more than one day selected by user.
90+
- `[{"Begin":"15:00","Category":"Test","Name":"My Task","Time":" 1h 0m"}, ...]`
8091

81-
Each function gets two parameters `data` which is an array containing objects with datasets.
8292
The object `canvas` is a connector to the canvas on the page, where the chart should show up.
8393
It can be directly used with `new Chart(canvas, chartData)`.
8494

‎php/core/Stats.php‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313

1414
class Stats {
1515

16+
// max plain data elements for plots
17+
const MAX_PLAIN_ELEMENTS = 2000;
18+
1619
private Template $temp;
1720
private Login $login;
1821

@@ -33,9 +36,11 @@ public function __construct( Template $temp, Login $login ) {
3336

3437
private function displayContent(array $data) : void {
3538
$this->temp->setContent('COMBIDATA', json_encode($data['combi']));
36-
$this->temp->setContent('TABLEA', $this->arrayToTable($data['main']));
39+
$this->temp->setContent('PLAINDATA', json_encode(array_slice($data['plain'], 0, self::MAX_PLAIN_ELEMENTS)));
40+
$this->temp->setContent('TABLEA', $this->arrayToTable($data['table']));
3741
if(isset($data['today'])){
3842
$this->temp->setContent('TABLEB', $this->arrayToTable($data['today']) );
43+
$this->temp->setContent('SINGLEDAYDATA', json_encode($data['today']));
3944
}
4045
}
4146

@@ -131,6 +136,7 @@ private function paramsToCmd() : array {
131136
return array();
132137
}
133138
else{
139+
$this->temp->setContent('CMDDISABLE','');
134140
$this->temp->setContent('CMD', 'ttt s ' . implode(' ', $cmd));
135141
return $cmd;
136142
}

‎php/core/templates/edit_en.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,9 @@ <h3>Add task</h3>
9595
$(elements[1]).val(o.selectedMonth+1);
9696
$(elements[2]).val(o.selectedDay);
9797
},
98-
{},
98+
{
99+
dateFormat : "yy-mm-dd"
100+
},
99101
[pos.left, pos.top]
100102
);
101103
}

‎php/core/templates/login_en.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
<label for="group" class="col-sm-2 col-form-label">Username</label>
44
<div class="col-sm-10">
55
<input type="text" placeholder="Username" name="group" id="group" class="form-control">
6-
<small id="group" class="form-text text-muted">aka. Account or Group</small>
6+
<small class="form-text text-muted">aka. Account or Group</small>
77
</div>
88
</div>
99
<div class="form-group row">
1010
<label for="password" class="col-sm-2 col-form-label">Password</label>
1111
<div class="col-sm-10">
1212
<input type="password" placeholder="Password" name="password" id="password" class="form-control">
13-
<small id="group" class="form-text text-muted">The system admin may reset your password!</small>
13+
<small class="form-text text-muted">The system admin may reset your password!</small>
1414
</div>
1515
</div>
1616
<div class="form-group row">

‎php/core/templates/stats.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"%%NOTEDISABLE%%" : "disable",
3+
"%%CMDDISABLE%%" : "disable",
34
"%%NOTEMSG%%" : "",
45
"%%TODAY%%" : "",
56
"multiples" : {
@@ -11,6 +12,8 @@
1112
"%%TABLEA%%" : "",
1213
"%%TABLEB%%" : "",
1314
"%%COMBIDATA%%" : "[]",
15+
"%%PLAINDATA%%" : "[]",
16+
"%%SINGLEDAYDATA%%" : "false",
1417
"%%CMD%%" : "",
1518
"%%GRAPHES%%" : ""
1619
}

‎php/core/templates/stats_en.html‎

Lines changed: 138 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -3,71 +3,156 @@
33
</div>
44

55
<h3>Select data</h3>
6-
<form action="%%SERVERURL%%/?task=stats" method="post">
7-
<p>
8-
Timespan:<br>
9-
<select name="time">
10-
<option value="today" selected>Today</option>
11-
<option value="day">Day</option>
12-
<option value="week">Week</option>
13-
<option value="month">Month</option>
14-
<option value="range">Range</option>
15-
<option value="all">All</option>
16-
</select>
17-
<span id="rangeblock" class="disable">
18-
from <input type="text" name="range-from" id="rf" placeholder="2020-03-04" pattern="\d{4}-\d{2}-\d{2}" style="width:100px;">
19-
to <input type="text" name="range-to" id="rt" placeholder="2020-03-04" value="%%TODAY%%" pattern="\d{4}-\d{2}-\d{2}" style="width:100px;">
20-
</span>
21-
</p>
22-
<p>
23-
Filter categories:<br>
24-
<input type="text" name="cats" placeholder="Hobby,Home">
25-
</p>
26-
<p>
27-
Filter tasks:<br>
28-
<input type="text" name="names" placeholder="Coding,Gaming">
29-
</p>
30-
<p>
31-
Filter Devices:<br>
32-
<select name="devices[]" multiple>
33-
<!--MULTIPLE-Devices-BEGIN-->
34-
<option value="%%VALUE%%" selected>%%NAME%%</option>
35-
<!--MULTIPLE-Devices-END-->
36-
</select>
37-
</p>
38-
<p><input type="submit" value="Show"></p>
39-
</form>
6+
<form action="%%SERVERURL%%/?task=stats" method="post">
7+
<div class="form-group row">
8+
<label for="time" class="col-sm-2 col-form-label">Timespan</label>
9+
<div class="col-sm-10">
10+
<select name="time" id="time" class="custom-select">
11+
<option value="today" selected>Today</option>
12+
<option value="day">Day</option>
13+
<option value="week">Week</option>
14+
<option value="month">Month</option>
15+
<option value="range">Range</option>
16+
<option value="all">All</option>
17+
</select>
18+
</div>
19+
</div>
20+
<div id="rangeblock" class="disable">
21+
<div class="form-group row">
22+
<div class="col-sm-2">&nbsp;</div>
23+
<label for="rf" class="col-sm-2 col-form-label">from</label>
24+
<div class="col-sm-6">
25+
<input type="text" name="range-from" id="rf" placeholder="2020-03-04" pattern="\d{4}-\d{2}-\d{2}" class="form-control">
26+
</div>
27+
<div class="col-sm-2">
28+
<button type="button" class="btn btn-light" id="fromDialog">&#x1F4C5;</button>
29+
</div>
30+
</div>
31+
<div class="form-group row">
32+
<div class="col-sm-2">&nbsp;</div>
33+
<label for="rf"class="col-sm-2 col-form-label">to</label>
34+
<div class="col-sm-6">
35+
<input type="text" name="range-to" id="rt" placeholder="2020-03-04" value="%%TODAY%%" pattern="\d{4}-\d{2}-\d{2}" class="form-control">
36+
</div>
37+
<div class="col-sm-2">
38+
<button type="button" class="btn btn-light" id="toDialog">&#x1F4C5;</button>
39+
</div>
40+
</div>
41+
</div>
42+
<div class="form-group row">
43+
<label for="cats" class="col-sm-2 col-form-label">Filter categories</label>
44+
<div class="col-sm-10">
45+
<input type="text" placeholder="Hobby,Home" name="cats" id="cats" class="form-control">
46+
</div>
47+
</div>
48+
<div class="form-group row">
49+
<label for="names" class="col-sm-2 col-form-label">Filter tasks</label>
50+
<div class="col-sm-10">
51+
<input type="text" placeholder="Coding,Gaming" name="names" id="names" class="form-control">
52+
</div>
53+
</div>
54+
<div class="form-group row">
55+
<label for="devices" class="col-sm-2 col-form-label">Filter Devices</label>
56+
<div class="col-sm-10">
57+
<select name="devices[]" id="devices" class="custom-select" size=4 multiple>
58+
<!--MULTIPLE-Devices-BEGIN-->
59+
<option value="%%VALUE%%" selected>%%NAME%%</option>
60+
<!--MULTIPLE-Devices-END-->
61+
</select>
62+
</div>
63+
</div>
64+
<div class="form-group row">
65+
<div class="col-sm-2">&nbsp;</div>
66+
<div class="col-sm-10">
67+
<input type="submit" value="Show" class="btn btn-secondary">
68+
</div>
69+
</div>
70+
</form>
71+
<input type="hidden" id="datepickerFrom">
72+
<input type="hidden" id="datepickerTo">
4073

4174
<script>
4275
$("select[name=time]").change(() => {
4376
if($("select[name=time]").val() == "range" ){
44-
$("span#rangeblock").removeClass("disable");
77+
$("div#rangeblock").removeClass("disable");
4578
}
4679
else {
47-
$("span#rangeblock").addClass("disable");
80+
$("div#rangeblock").addClass("disable");
4881
}
4982
});
83+
if(localStorage.hasOwnProperty( 'lastServerStats' )){
84+
var values = JSON.parse( localStorage.getItem( 'lastServerStats' ) );
85+
$.each(values, (k,v) => {
86+
$(v.tag + '[name="'+ k +'"]').val(v.value);
87+
});
88+
$("select[name=time]").trigger('change');
89+
}
90+
$("form").on("submit", () => {
91+
var values = {};
92+
$("input, select").each((k,v) => {
93+
values[$(v).attr("name")] = {
94+
value : $(v).val(),
95+
tag : $(v).prop("tagName")
96+
};
97+
});
98+
localStorage.setItem( 'lastServerStats', JSON.stringify(values));
99+
});
100+
function dateDialog(element, destination){
101+
var pos = $(destination).offset();
102+
$( element ).datepicker(
103+
"dialog",
104+
$(destination).val(),
105+
function(v,o) {
106+
var m = o.selectedMonth+1;
107+
var d = o.selectedDay;
108+
$(destination).val(o.selectedYear +'-'+ (m <= 9 ? '0' : '') + m + '-' + (d <= 9 ? '0' : '') + d);
109+
},
110+
{
111+
dateFormat : "yy-mm-dd"
112+
},
113+
[pos.left, pos.top]
114+
);
115+
}
116+
$("#fromDialog").click( (e) => {
117+
e.preventDefault();
118+
dateDialog("input#datepickerFrom", "input[name=range-from]");
119+
});
120+
$("#toDialog").click( (e) => {
121+
e.preventDefault();
122+
dateDialog("input#datepickerTo", "input[name=range-to]");
123+
});
50124
</script>
125+
51126
<h3>Tables</h3>
52-
<p><code>%%CMD%%</code></p>
127+
<div class="alert alert-info %%CMDDISABLE%%" role="alert">
128+
<h5 class="alert-heading">Client Command</h5>
129+
<p><code>%%CMD%%</code></p>
130+
</div>
53131

54-
<div style="margin-bottom: 10px;">
55-
%%TABLEA%%
56-
</div>
57-
<div>
58-
%%TABLEB%%
59-
</div>
132+
<div style="margin-bottom: 10px;">
133+
%%TABLEA%%
134+
</div>
135+
<div>
136+
%%TABLEB%%
137+
</div>
60138

61139
<h3>Graph</h3>
62-
<select id="graphselect">
63-
</select>
64-
<button id="displaygraph">Display Graph</button>
140+
<div class="form-inline">
141+
<div class="input-group">
142+
<select id="graphselect" class="custom-select" name="graph">
143+
</select>
144+
</div> &nbsp;
145+
<button id="displaygraph" class="btn btn-secondary">Display Graph</button>
146+
</div>
65147

66-
<div style="width: 99%;">
67-
<canvas id="maingraph"></canvas>
68-
</div>
148+
149+
<div style="width: 99%;">
150+
<canvas id="maingraph"></canvas>
151+
</div>
69152
<script>
70153
var combiData = %%COMBIDATA%%;
154+
var plainData = %%PLAINDATA%%;
155+
var singleDayData = %%SINGLEDAYDATA%%;
71156
var graphes = %%GRAPHES%%;
72157
var loadUrl = "%%SERVERURL%%/load/graphs/";
73158

@@ -78,14 +163,16 @@ <h3>Graph</h3>
78163
var chart = null;
79164

80165
$("button#displaygraph").click( () => {
81-
var url = loadUrl + $("select#graphselect").val() + '.js';
166+
var url = loadUrl + $("select#graphselect").val() + '.js?%%VERSIONSEED%%';
82167
$.getScript( url, () => {
83-
if( typeof createGraph === "function" && combiData.length > 0 ){
168+
if( typeof createGraph === "function" && ( combiData.length > 0 || plainData.length > 0 || singleDayData !== false ) ){
84169
if(chart !== null){
85170
chart.destroy();
86171
}
87172
chart = createGraph(
88173
combiData,
174+
plainData,
175+
singleDayData,
89176
document.getElementById('maingraph').getContext('2d')
90177
);
91178
}

‎php/core/ttt/TTTStats.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,8 @@ private function printDataset(array $data) : void {
183183
$d['Time'] = TTTTime::secToTime($d['Time']);
184184
}
185185

186-
$this->printData($table, 'main');
186+
$this->printData($table, 'table');
187+
$this->printData($data, 'plain');
187188
$this->printData($combi, 'combi');
188189

189190

0 commit comments

Comments
 (0)