Skip to content
This repository was archived by the owner on Sep 19, 2022. It is now read-only.

Commit 87e11fc

Browse files
melangermelanger
committed
Replace Google charts with Chart.js
- goal: self hosting to allow strict CSP - added: sorting data in database - removed: sorting on the tables - removed: Google Chart tables - added: custom implementation of drawTable with Bootstrap classes - added: pie legend items are hyperlinks (visually noticable) - added: chart localization - added: identifier escaping in JS - removed: time range picker - added: pan and zoom ability (instead of time range picker) - added: charts are responsive - removed: links from SP detail (same as IdP detail) - added: in login timeline chart, points with value zero for missing dates - added: some Bootstrap CSS - added: Chart.js, Hammer.js and Moment.js - removed: Google Charts API - removed: numbers inside pie charts
1 parent a92e247 commit 87e11fc

19 files changed

+464
-145
lines changed

‎dictionaries/Proxystatistics.definition.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@
6363
"en": "Count",
6464
"cs": "Počet"
6565
},
66+
"templates/other": {
67+
"en": "other",
68+
"cs": "ostatní"
69+
},
6670
"templates/graphs_logins": {
6771
"en": "Number of logins",
6872
"cs": "Počet přihlášení"

‎lib/Auth/Process/DatabaseCommand.php‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,8 @@ public static function getLoginCountPerDay($days)
129129
"SELECT year, month, day, SUM(count) AS count " .
130130
"FROM " . $table_name . " " .
131131
"WHERE service != '' " .
132-
"GROUP BY year DESC,month DESC,day DESC"
132+
"GROUP BY year,month,day " .
133+
"ORDER BY year ASC,month ASC,day ASC"
133134
);
134135
} else {
135136
$stmt = $conn->prepare(
@@ -138,7 +139,8 @@ public static function getLoginCountPerDay($days)
138139
"WHERE service != '' AND " .
139140
"CONCAT(year,'-',LPAD(month,2,'00'),'-',LPAD(day,2,'00')) " .
140141
"BETWEEN CURDATE() - INTERVAL ? DAY AND CURDATE()" .
141-
"GROUP BY year DESC,month DESC,day DESC"
142+
"GROUP BY year,month,day " .
143+
"ORDER BY year ASC,month ASC,day ASC"
142144
);
143145
$stmt->bind_param('d', $days);
144146
}
@@ -160,7 +162,8 @@ public static function getLoginCountPerDayForService($days, $spIdentifier)
160162
"SELECT year, month, day, SUM(count) AS count " .
161163
"FROM " . $table_name . " " .
162164
"WHERE service=? " .
163-
"GROUP BY year DESC,month DESC,day DESC"
165+
"GROUP BY year,month,day " .
166+
"ORDER BY year ASC,month ASC,day ASC"
164167
);
165168
$stmt->bind_param('s', $spIdentifier);
166169
} else {
@@ -170,7 +173,8 @@ public static function getLoginCountPerDayForService($days, $spIdentifier)
170173
"WHERE service=? " .
171174
"AND CONCAT(year,'-',LPAD(month,2,'00'),'-',LPAD(day,2,'00')) " .
172175
"BETWEEN CURDATE() - INTERVAL ? DAY AND CURDATE() " .
173-
"GROUP BY year DESC,month DESC,day DESC"
176+
"GROUP BY year,month,day " .
177+
"ORDER BY year ASC,month ASC,day ASC"
174178
);
175179
$stmt->bind_param('sd', $spIdentifier, $days);
176180
}
@@ -192,7 +196,8 @@ public static function getLoginCountPerDayForIdp($days, $idpIdentifier)
192196
"SELECT year, month, day, SUM(count) AS count " .
193197
"FROM " . $table_name . " " .
194198
"WHERE sourceIdP=? " .
195-
"GROUP BY year DESC,month DESC,day DESC"
199+
"GROUP BY year,month,day " .
200+
"ORDER BY year ASC,month ASC,day ASC"
196201
);
197202
$stmt->bind_param('s', $idpIdentifier);
198203
} else {
@@ -202,7 +207,8 @@ public static function getLoginCountPerDayForIdp($days, $idpIdentifier)
202207
"WHERE sourceIdP=? " .
203208
"AND CONCAT(year,'-',LPAD(month,2,'00'),'-',LPAD(day,2,'00')) " .
204209
"BETWEEN CURDATE() - INTERVAL ? DAY AND CURDATE() " .
205-
"GROUP BY year DESC,month DESC,day DESC"
210+
"GROUP BY year,month,day " .
211+
"ORDER BY year ASC,month ASC,day ASC"
206212
);
207213
$stmt->bind_param('sd', $idpIdentifier, $days);
208214
}

‎templates/charts.include.php‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<?php
2+
use SimpleSAML\Module;
3+
4+
$this->data['jquery'] = ['core' => true, 'ui' => true, 'css' => true];
5+
$this->data['head'] = '<link rel="stylesheet" media="screen" type="text/css" href="' .
6+
Module::getModuleUrl('proxystatistics/statisticsproxy.css') . '" />';
7+
$this->data['head'] .= '<link rel="stylesheet" type="text/css" href="' .
8+
Module::getModuleUrl('proxystatistics/Chart.min.css') . '">';
9+
$this->data['head'] .= '<script type="text/javascript" src="' .
10+
Module::getModuleUrl('proxystatistics/moment.min.js').'"></script>';
11+
if ($this->getLanguage() === 'cs') {
12+
$this->data['head'] .= '<script type="text/javascript" src="' .
13+
Module::getModuleUrl('proxystatistics/moment.cs.min.js').'"></script>';
14+
}
15+
$this->data['head'] .= '<script type="text/javascript" src="' .
16+
Module::getModuleUrl('proxystatistics/Chart.min.js').'"></script>';
17+
$this->data['head'] .= '<script type="text/javascript" src="' .
18+
Module::getModuleUrl('proxystatistics/hammer.min.js').'"></script>';
19+
$this->data['head'] .= '<script type="text/javascript" src="' .
20+
Module::getModuleUrl('proxystatistics/chartjs-plugin-zoom.min.js').'"></script>';

‎templates/functions.include.php‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<?php
2+
function pieChart($id)
3+
{
4+
?>
5+
<div class="pie-chart-container row">
6+
<div class="canvas-container col-md-6">
7+
<canvas id="<?php echo $id;?>" class="pieChart chart-<?php echo $id;?>"></canvas>
8+
</div>
9+
<div class="legend-container col-md-6"></div>
10+
</div>
11+
<?php
12+
}

‎templates/identityProviders-tpl.php‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
?>
1111

1212
<?php
13-
require 'timeRange.include.php';
13+
require_once 'timeRange.include.php';
14+
require_once 'functions.include.php';
1415
?>
1516

1617
<h2><?php echo $this->t('{proxystatistics:Proxystatistics:templates/graphs_id_providers}'); ?></h2>
@@ -19,9 +20,9 @@
1920
</div>
2021
<div class="row">
2122
<div class="col-md-8">
22-
<div id="idpsChartDetail" class="pieChart chart-idpsChart"></div>
23+
<?php pieChart('idpsChart'); ?>
2324
</div>
2425
<div class="col-md-4">
25-
<div id="idpsTable" class="table"></div>
26+
<div id="idpsTable" class="table-container"></div>
2627
</div>
2728
</div>

‎templates/idpDetail-tpl.php‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,9 @@
1313
$lastDays = $this->data['lastDays'];
1414
$idpEntityId = $this->data['entityId'];
1515

16-
$this->data['jquery'] = ['core' => true, 'ui' => true, 'css' => true];
17-
$this->data['head'] = '<link rel="stylesheet" media="screen" type="text/css" href="' .
18-
Module::getModuleUrl('proxystatistics/statisticsproxy.css') . '" />';
19-
$this->data['head'] .= '<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>';
16+
require_once 'charts.include.php';
17+
require_once 'functions.include.php';
18+
2019
$this->data['head'] .= '<meta name="loginCountPerDay" id="loginCountPerDay" content="' .
2120
htmlspecialchars(json_encode(
2221
DatabaseCommand::getLoginCountPerDayForIdp($lastDays, $idpEntityId),
@@ -66,10 +65,7 @@
6665
<div><?php echo $this->t('{proxystatistics:Proxystatistics:templates/idpDetail_dashboard_legend}'); ?></div>
6766
</div>
6867

69-
<div id="loginsDashboard">
70-
<div id="line_div"></div>
71-
<div id="control_div"></div>
72-
</div>
68+
<?php require_once 'loginsDashboard.include.php'; ?>
7369

7470
<div class="<?php echo $this->data['idpDetailGraphClass'] ?>">
7571
<h3><?php echo $this->t('{proxystatistics:Proxystatistics:templates/idpDetail_graph_header}'); ?></h3>
@@ -78,10 +74,10 @@
7874
</div>
7975
<div class="row">
8076
<div class="col-md-8">
81-
<div id="accessedSpsChartDetail" class="pieChart"></div>
77+
<?php pieChart('accessedSpsChartDetail'); ?>
8278
</div>
8379
<div class="col-md-4">
84-
<div id="accessedSpsTable" class="table"></div>
80+
<div id="accessedSpsTable" class="table-container"></div>
8581
</div>
8682
</div>
8783
</div>

‎templates/loginsDashboard.include.php‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="canvas-container">
2+
<canvas id="loginsDashboard"<?php echo $this->getLanguage() === 'cs' ? ' data-locale="cs"' : '';?>
3+
height="250"></canvas>
4+
</div>

‎templates/serviceProviders-tpl.php‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
?>
1010

1111
<?php
12-
require 'timeRange.include.php';
12+
require_once 'timeRange.include.php';
13+
require_once 'functions.include.php';
1314
?>
1415

1516
<h2><?php echo $this->t('{proxystatistics:Proxystatistics:templates/graphs_service_providers}'); ?></h2>
@@ -18,9 +19,9 @@
1819
</div>
1920
<div class="row">
2021
<div class="col-md-8">
21-
<div id="spsChartDetail" class="pieChart chart-spsChart"></div>
22+
<?php pieChart('spsChart'); ?>
2223
</div>
2324
<div class="col-md-4">
24-
<div id="spsTable" class="table"></div>
25+
<div id="spsTable" class="table-container"></div>
2526
</div>
2627
</div>

‎templates/spDetail-tpl.php‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,9 @@
1313
$lastDays = $this->data['lastDays'];
1414
$spIdentifier = $this->data['identifier'];
1515

16-
$this->data['jquery'] = ['core' => true, 'ui' => true, 'css' => true];
17-
$this->data['head'] = '<link rel="stylesheet" media="screen" type="text/css" href="' .
18-
Module::getModuleUrl('proxystatistics/statisticsproxy.css') . '" />';
19-
$this->data['head'] .= '<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>';
16+
require_once 'charts.include.php';
17+
require_once 'functions.include.php';
18+
2019
$this->data['head'] .= '<meta name="loginCountPerDay" id="loginCountPerDay" content="' .
2120
htmlspecialchars(json_encode(
2221
DatabaseCommand::getLoginCountPerDayForService($lastDays, $spIdentifier),
@@ -56,20 +55,15 @@
5655
</a>
5756
</div>
5857

59-
<?php
60-
require 'timeRange.include.php';
61-
?>
58+
<?php require_once 'timeRange.include.php'; ?>
6259

6360
<h3><?php echo $this->t('{proxystatistics:Proxystatistics:templates/spDetail_dashboard_header}'); ?></h3>
6461

6562
<div class="legend">
6663
<div><?php echo $this->t('{proxystatistics:Proxystatistics:templates/spDetail_dashboard_legend}'); ?></div>
6764
</div>
6865

69-
<div id="loginsDashboard">
70-
<div id="line_div"></div>
71-
<div id="control_div"></div>
72-
</div>
66+
<?php require_once 'loginsDashboard.include.php'; ?>
7367

7468
<div class="<?php echo $this->data['spDetailGraphClass'] ?>">
7569
<h3><?php echo $this->t('{proxystatistics:Proxystatistics:templates/spDetail_graph_header}'); ?></h3>
@@ -78,10 +72,10 @@
7872
</div>
7973
<div class="row">
8074
<div class="col-md-8">
81-
<div id="usedIdPsChartDetail" class="pieChart"></div>
75+
<?php pieChart('usedIdPsChartDetail'); ?>
8276
</div>
8377
<div class="col-md-4">
84-
<div id="usedIdPsTable" class="table"></div>
78+
<div id="usedIdPsTable" class="table-container"></div>
8579
</div>
8680
</div>
8781
</div>

‎templates/statistics-tpl.php‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,7 @@
2323
Logger::warning('Missing configuration: config.php - instance_name is not set.');
2424
}
2525

26-
$this->data['jquery'] = ['core' => true, 'ui' => true, 'css' => true];
27-
$this->data['head'] = '<link rel="stylesheet" media="screen" type="text/css" href="' .
28-
Module::getModuleUrl('proxystatistics/statisticsproxy.css') . '" />';
29-
$this->data['head'] .= '<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>';
26+
require_once 'charts.include.php';
3027

3128
if (!isset($this->data['lastDays'])) {
3229
$this->data['lastDays'] = 0;
@@ -50,6 +47,7 @@
5047
'tables_identity_provider' => $this->t('{proxystatistics:Proxystatistics:templates/tables_identity_provider}'),
5148
'tables_service_provider' => $this->t('{proxystatistics:Proxystatistics:templates/tables_service_provider}'),
5249
'count' => $this->t('{proxystatistics:Proxystatistics:templates/count}'),
50+
'other' => $this->t('{proxystatistics:Proxystatistics:templates/other}'),
5351
])).'">';
5452
$this->includeAtTemplateBase('includes/header.php');
5553
?>

0 commit comments

Comments
 (0)