Pi-Hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2026-05-08 09:39:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add chartjs-adapter-moment.js

Browse Source 
Signed-off-by: Christian König <ckoenig@posteo.de>
This commit is contained in:
Christian König
2022-09-23 23:38:00 +02:00
parent 6d971c1430
commit c14c491ea5
5 changed files with 127 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/pi-hole/js/db_graph.js
+107 -107
View File
@@ -120,25 +120,25 @@ function updateQueriesOverTime() {
interval = computeInterval(from, until);
// Default displaying axis scaling
timeLineChart.options.scales.xAxes[0].time.unit = "hour";
timeLineChart.options.scales.xAxes.time.unit = "hour";
var duration = until - from;
// Xaxis scaling based on selected daterange
if (duration > 4 * 365 * 24 * 60 * 60) {
// If the requested data is more than 4 years, set ticks interval to year
timeLineChart.options.scales.xAxes[0].time.unit = "year";
timeLineChart.options.scales.xAxes.time.unit = "year";
} else if (duration >= 366 * 24 * 60 * 60) {
// If the requested data is more than 1 year, set ticks interval to quarter
timeLineChart.options.scales.xAxes[0].time.unit = "quarter";
timeLineChart.options.scales.xAxes.time.unit = "quarter";
} else if (duration >= 92 * 24 * 60 * 60) {
// If the requested data is more than 3 months, set ticks interval to months
timeLineChart.options.scales.xAxes[0].time.unit = "month";
timeLineChart.options.scales.xAxes.time.unit = "month";
} else if (duration >= 31 * 24 * 60 * 60) {
// If the requested data is 1 month or more, set ticks interval to weeks
timeLineChart.options.scales.xAxes[0].time.unit = "week";
timeLineChart.options.scales.xAxes.time.unit = "week";
} else if (duration > 3 * 24 * 60 * 60) {
// If the requested data is more than 3 days (72 hours), set ticks interval to days
timeLineChart.options.scales.xAxes[0].time.unit = "day";
timeLineChart.options.scales.xAxes.time.unit = "day";
}
$.getJSON(
@@ -196,9 +196,9 @@ function updateQueriesOverTime() {
}
}
timeLineChart.options.scales.xAxes[0].ticks.min = from * 1000;
timeLineChart.options.scales.xAxes[0].ticks.max = until * 1000;
timeLineChart.options.scales.xAxes[0].display = true;
timeLineChart.options.scales.xAxes.ticks.min = from * 1000;
timeLineChart.options.scales.xAxes.ticks.max = until * 1000;
timeLineChart.options.scales.xAxes.display = true;
$("#queries-over-time .overlay").hide();
timeoutWarning.hide();
timeLineChart.update();
@@ -243,135 +243,135 @@ $(function () {
],
},
options: {
tooltips: {
enabled: true,
itemSort: function (a, b) {
return b.datasetIndex - a.datasetIndex;
responsive: true,
plugins: {
legend: {
display: false,
},
mode: "x-axis",
callbacks: {
title: function (tooltipItem) {
var label = tooltipItem[0].xLabel;
var time = new Date(label);
var fromDate =
time.getFullYear() +
"-" +
utils.padNumber(time.getMonth() + 1) +
"-" +
utils.padNumber(time.getDate());
var fromTime =
utils.padNumber(time.getHours()) +
":" +
utils.padNumber(time.getMinutes()) +
":" +
utils.padNumber(time.getSeconds());
time = new Date(time.valueOf() + 1000 * interval);
var untilDate =
time.getFullYear() +
"-" +
utils.padNumber(time.getMonth() + 1) +
"-" +
utils.padNumber(time.getDate());
var untilTime =
utils.padNumber(time.getHours()) +
":" +
utils.padNumber(time.getMinutes()) +
":" +
utils.padNumber(time.getSeconds());
tooltip: {
enabled: true,
yAlign: "bottom",
mode: "index",
itemSort: function (a, b) {
return b.datasetIndex - a.datasetIndex;
},
callbacks: {
label: function (tooltipLabel) {
var label = tooltipLabel.dataset.label;
// Add percentage only for blocked queries
if (tooltipLabel.datasetIndex === 0) {
var percentage = 0;
var permitted = parseInt(tooltipLabel.parsed._stacks.y[1], 10);
var blocked = parseInt(tooltipLabel.parsed._stacks.y[0], 10);
if (permitted + blocked > 0) {
percentage = (100 * blocked) / (permitted + blocked);
}
if (fromDate === untilDate) {
// Abbreviated form for intervals on the same day
// We split title in two lines on small screens
if ($(window).width() < 992) {
untilTime += "\n";
label += ": " + tooltipLabel.parsed.y + " (" + percentage.toFixed(1) + "%)";
} else {
label += ": " + tooltipLabel.parsed.y;
}
return ("Queries from " + fromTime + " to " + untilTime + " on " + fromDate).split(
"\n "
);
}
return label;
},
title: function (tooltipTitle) {
var title = tooltipTitle[0].label;
var time = new Date(title);
var fromDate =
time.getFullYear() +
"-" +
utils.padNumber(time.getMonth() + 1) +
"-" +
utils.padNumber(time.getDate());
var fromTime =
utils.padNumber(time.getHours()) +
":" +
utils.padNumber(time.getMinutes()) +
":" +
utils.padNumber(time.getSeconds());
time = new Date(time.valueOf() + 1000 * interval);
var untilDate =
time.getFullYear() +
"-" +
utils.padNumber(time.getMonth() + 1) +
"-" +
utils.padNumber(time.getDate());
var untilTime =
utils.padNumber(time.getHours()) +
":" +
utils.padNumber(time.getMinutes()) +
":" +
utils.padNumber(time.getSeconds());
// Full tooltip for intervals spanning more than one day
// We split title in two lines on small screens
if ($(window).width() < 992) {
fromDate += "\n";
}
if (fromDate === untilDate) {
// Abbreviated form for intervals on the same day
// We split title in two lines on small screens
if ($(window).width() < 992) {
untilTime += "\n";
}
return (
"Queries from " +
fromDate +
" " +
fromTime +
" to " +
untilDate +
" " +
untilTime
).split("\n ");
},
label: function (tooltipItems, data) {
if (tooltipItems.datasetIndex === 0) {
var percentage = 0;
var permitted = parseInt(data.datasets[1].data[tooltipItems.index], 10);
var blocked = parseInt(data.datasets[0].data[tooltipItems.index], 10);
if (permitted + blocked > 0) {
percentage = (100 * blocked) / (permitted + blocked);
return ("Queries from " + fromTime + " to " + untilTime + " on " + fromDate).split(
"\n "
);
}
// Full tooltip for intervals spanning more than one day
// We split title in two lines on small screens
if ($(window).width() < 992) {
fromDate += "\n";
}
return (
data.datasets[tooltipItems.datasetIndex].label +
": " +
tooltipItems.yLabel +
" (" +
percentage.toFixed(1) +
"%)"
);
}
return data.datasets[tooltipItems.datasetIndex].label + ": " + tooltipItems.yLabel;
"Queries from " +
fromDate +
" " +
fromTime +
" to " +
untilDate +
" " +
untilTime
).split("\n ");
},
},
},
},
legend: {
display: false,
},
scales: {
xAxes: [
xAxes:
{
type: "time",
stacked: true,
time: {
unit: "hour",
displayFormats: {
minute: "HH:mm",
hour: "HH:mm",
day: "MMM DD",
week: "MMM DD",
month: "MMM",
quarter: "YYYY MMM",
year: "YYYY",
},
offset: false,
time: {
unit: "hour",
displayFormats: {
minute: "HH:mm",
hour: "HH:mm",
day: "MMM DD",
week: "MMM DD",
month: "MMM",
quarter: "YYYY MMM",
year: "YYYY",
},
},
gridLines: {
color: gridColor,
zeroLineColor: gridColor,
},
ticks: {
fontColor: ticksColor,
},
},
],
yAxes: [
yAxes:
{
stacked: true,
beginAtZero: true,
ticks: {
beginAtZero: true,
fontColor: ticksColor,
},
gridLines: {
color: gridColor,
grid: {
color: gridColor,
drawBorder: false,
},
},
],
},
elements: {
line: {
scripts/pi-hole/js/index.js
+10 -18
View File
@@ -315,7 +315,7 @@ function updateQueryTypesPie() {
queryTypePieChart.data.datasets[0] = dd;
queryTypePieChart.data.labels = k;
$("#query-types-pie .overlay").hide();
queryTypePieChart.chart.config.options.cutoutPercentage = 50;
queryTypePieChart.options.cutout = '50%';
queryTypePieChart.update();
// Don't use rotation animation for further updates
queryTypePieChart.options.animation.duration = 0;
@@ -561,7 +561,7 @@ function updateForwardDestinationsPie() {
forwardDestinationPieChart.data.datasets[0] = dd;
// and push it at once
$("#forward-destinations-pie .overlay").hide();
forwardDestinationPieChart.chart.config.options.cutoutPercentage = 50;
forwardDestinationPieChart.options.cutout = '50%';
forwardDestinationPieChart.update();
// Don't use rotation animation for further updates
forwardDestinationPieChart.options.animation.duration = 0;
@@ -937,7 +937,7 @@ $(function () {
display: false,
},
scales: {
xAxes: [
xAxes:
{
type: "time",
stacked: true,
@@ -950,27 +950,23 @@ $(function () {
},
gridLines: {
color: gridColor,
zeroLineColor: gridColor,
},
ticks: {
fontColor: ticksColor,
},
},
],
yAxes: [
yAxes:
{
stacked: true,
beginAtZero: true,
ticks: {
beginAtZero: true,
fontColor: ticksColor,
precision: 0,
},
gridLines: {
color: gridColor,
zeroLineColor: gridColor,
},
},
],
},
elements: {
line: {
@@ -1024,7 +1020,7 @@ $(function () {
display: false,
},
scales: {
xAxes: [
xAxes:
{
type: "time",
stacked: true,
@@ -1037,27 +1033,23 @@ $(function () {
},
gridLines: {
color: gridColor,
zeroLineColor: gridColor,
},
ticks: {
fontColor: ticksColor,
},
},
],
yAxes: [
yAxes:
{
beginAtZero: true,
ticks: {
beginAtZero: true,
fontColor: ticksColor,
precision: 0,
},
stacked: true,
gridLines: {
color: gridColor,
zeroLineColor: gridColor,
},
},
],
},
elements: {
line: {
@@ -1154,7 +1146,7 @@ $(function () {
animation: {
duration: 750,
},
cutoutPercentage: 0,
cutout: '0%',
},
});
@@ -1194,7 +1186,7 @@ $(function () {
animation: {
duration: 750,
},
cutoutPercentage: 0,
cutout: '0%',
},
});
scripts/pi-hole/php/header.php
+2 -1
View File
@@ -93,7 +93,8 @@ $cacheVer = filemtime(__FILE__);
<script src="scripts/vendor/datatables.select.min.js?v=<?php echo $cacheVer; ?>"></script>
<script src="scripts/vendor/datatables.buttons.min.js?v=<?php echo $cacheVer; ?>"></script>
<script src="scripts/vendor/moment.min.js?v=<?php echo $cacheVer; ?>"></script>
<script src="scripts/vendor/Chart.min.js?v=<?php echo $cacheVer; ?>"></script>
<script src="scripts/vendor/chart.min.js?v=<?php echo $cacheVer; ?>"></script>
<script src="scripts/vendor/chartjs-adapter-moment.js?v=<?php echo $cacheVer; ?>"></script>
<?php } ?>
<script src="style/vendor/font-awesome/js/all.min.js?v=<?php echo $cacheVer; ?>"></script>
<script src="scripts/pi-hole/js/utils.js?v=<?php echo $cacheVer; ?>"></script>
scripts/vendor/Chart.min.js → scripts/vendor/chart.min.js
Vendored
View File
scripts/vendor/chartjs-adapter-moment.js
Vendored
+8
View File
@@ -0,0 +1,8 @@
/*!
* chartjs-adapter-moment v1.0.0
* https://www.chartjs.org
* (c) 2021 chartjs-adapter-moment Contributors
* Released under the MIT license
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("moment"),require("chart.js")):"function"==typeof define&&define.amd?define(["moment","chart.js"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).moment,e.Chart)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=n(e);const a={datetime:"MMM D, YYYY, h:mm:ss a",millisecond:"h:mm:ss.SSS a",second:"h:mm:ss a",minute:"h:mm a",hour:"hA",day:"MMM D",week:"ll",month:"MMM YYYY",quarter:"[Q]Q - YYYY",year:"YYYY"};t._adapters._date.override("function"==typeof f.default?{_id:"moment",formats:function(){return a},parse:function(e,t){return"string"==typeof e&&"string"==typeof t?e=f.default(e,t):e instanceof f.default||(e=f.default(e)),e.isValid()?e.valueOf():null},format:function(e,t){return f.default(e).format(t)},add:function(e,t,n){return f.default(e).add(t,n).valueOf()},diff:function(e,t,n){return f.default(e).diff(f.default(t),n)},startOf:function(e,t,n){return e=f.default(e),"isoWeek"===t?(n=Math.trunc(Math.min(Math.max(0,n),6)),e.isoWeekday(n).startOf("day").valueOf()):e.startOf(t).valueOf()},endOf:function(e,t){return f.default(e).endOf(t).valueOf()}}:{})}));
//# sourceMappingURL=chartjs-adapter-moment.min.js.map