')
- ).addClass('float-start')
- );
- }
+ chartObj.chart = new window.Chart(
+ 'gridChartCanvas' + runtime.chartAI,
+ {
+ type: 'line',
+ data: { labels: [], datasets: datasets },
+ options: {
+ locale: CommonParams.get('lang').replace('_', '-'),
+ maintainAspectRatio: false,
+ plugins: {
+ title: { display: true, text: settings.title },
+ legend: { display: true, position: 'bottom' },
+ },
+ interaction: { mode: 'index' },
+ scales: {
+ // @ts-ignore
+ x: {
+ type: 'time',
+ ticks: { maxTicksLimit: 5 },
+ },
+ y: {
+ stacked: !! settings.stackSeries,
+ suggestedMin: settings.axes.yaxis.min,
+ suggestedMax: settings.axes.yaxis.max,
+ ticks: {
+ stepSize: settings.axes.yaxis.tickInterval,
+ callback: function (value, index, ticks) {
+ if (settings.axes.yaxis?.tickOptions?.formatString) {
+ return window.sprintf(settings.axes.yaxis.tickOptions.formatString, value);
+ }
- $('#gridchart' + runtime.chartAI)
- .parent()
- .append($legend);
+ if (settings.axes.yaxis?.tickOptions?.formatter) {
+ return settings.axes.yaxis.tickOptions.formatter(null, value);
+ }
+
+ // @ts-ignore
+ return window.Chart.Ticks.formatters.numeric.apply(this, [value, index, ticks]);
+ },
+ },
+ },
+ },
+ onClick: function (event) {
+ if (editMode) {
+ return;
+ }
+
+ // @ts-ignore
+ const minDate = new Date(event.chart.scales.x.ticks[0].value);
+ // @ts-ignore
+ const maxDate = new Date(event.chart.scales.x.ticks[4].value);
+ getLogAnalyseDialog(minDate, maxDate);
+ },
+ },
+ },
+ );
if (initialize !== true) {
runtime.charts['c' + runtime.chartAI] = chartObj;
buildRequiredDataList();
}
- // time span selection
- $('#gridchart' + runtime.chartAI).on('jqplotMouseDown', function (ev, gridpos, datapos) {
- drawTimeSpan = true;
- selectionTimeDiff.push(datapos.xaxis);
- if ($('#selection_box').length) {
- $('#selection_box').remove();
- }
-
- var selectionBox = $('
');
- // eslint-disable-next-line compat/compat
- $(document.body).append(selectionBox);
- selectionStartX = ev.pageX;
- selectionStartY = ev.pageY;
- selectionBox
- .attr({ id: 'selection_box' })
- .css({
- top: selectionStartY - gridpos.y,
- left: selectionStartX
- })
- .fadeIn();
- });
-
- $('#gridchart' + runtime.chartAI).on('jqplotMouseUp', function (ev, gridpos, datapos) {
- if (! drawTimeSpan || editMode) {
- return;
- }
-
- selectionTimeDiff.push(datapos.xaxis);
-
- if (selectionTimeDiff[1] <= selectionTimeDiff[0]) {
- selectionTimeDiff = [];
-
- return;
- }
-
- // get date from timestamp
- var min = new Date(Math.ceil(selectionTimeDiff[0]));
- var max = new Date(Math.ceil(selectionTimeDiff[1]));
- getLogAnalyseDialog(min, max);
- selectionTimeDiff = [];
- drawTimeSpan = false;
- });
-
- $('#gridchart' + runtime.chartAI).on('jqplotMouseMove', function (ev) {
- if (! drawTimeSpan || editMode) {
- return;
- }
-
- if (selectionStartX !== undefined) {
- $('#selection_box')
- .css({
- width: Math.ceil(ev.pageX - selectionStartX)
- })
- .fadeIn();
- }
- });
-
- $('#gridchart' + runtime.chartAI).on('jqplotMouseLeave', function () {
- drawTimeSpan = false;
- });
-
- // eslint-disable-next-line compat/compat
- $(document.body).on('mouseup', function () {
- if ($('#selection_box').length) {
- $('#selection_box').remove();
- }
- });
-
// Edit, Print icon only in edit mode
$('#chartGrid').find('div svg').find('*[zIndex=20], *[zIndex=21], *[zIndex=19]').toggle(editMode);
runtime.chartAI++;
}
- function getLogAnalyseDialog (min, max) {
+ function getLogAnalyseDialog (min: Date, max: Date) {
var $logAnalyseDialog = $('#logAnalyseDialog');
var $dateStart = $logAnalyseDialog.find('input[name="dateStart"]');
var $dateEnd = $logAnalyseDialog.find('input[name="dateEnd"]');
@@ -1535,7 +1497,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
$dateEnd.datepicker('setDate', max);
}
- function loadLog (type, min, max) {
+ function loadLog (type: string, min: Date, max: Date) {
var dateStart = Date.parse($('#logAnalyseDialog').find('input[name="dateStart"]').datepicker('getDate').toString()) || min;
var dateEnd = Date.parse($('#logAnalyseDialog').find('input[name="dateEnd"]').datepicker('getDate').toString()) || max;
@@ -1591,7 +1553,6 @@ AJAX.registerOnload('server/status/monitor.js', function () {
runtime.xmax += diff;
}
- // elem.chart.xAxis[0].setExtremes(runtime.xmin, runtime.xmax, false);
/* Calculate y value */
// If transform function given, use it
@@ -1630,7 +1591,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
// Set y value, if defined
if (value !== undefined) {
- elem.chart.series[j].data.push([chartData.x, value]);
+ elem.chart.data.datasets[j].data.push({ x: chartData.x, y: value });
if (value > elem.maxYLabel) {
elem.maxYLabel = value;
} else if (elem.maxYLabel === 0) {
@@ -1638,15 +1599,15 @@ AJAX.registerOnload('server/status/monitor.js', function () {
}
// free old data point values and update maxYLabel
- if (elem.chart.series[j].data.length > runtime.gridMaxPoints &&
- elem.chart.series[j].data[0][0] < runtime.xmin
+ if (elem.chart.data.datasets[j].data.length > runtime.gridMaxPoints &&
+ elem.chart.data.datasets[j].data[0].x < runtime.xmin
) {
// check if the next freeable point is highest
- if (elem.maxYLabel <= elem.chart.series[j].data[0][1]) {
- elem.chart.series[j].data.splice(0, elem.chart.series[j].data.length - runtime.gridMaxPoints);
- elem.maxYLabel = getMaxYLabel(elem.chart.series[j].data);
+ if (elem.maxYLabel <= elem.chart.data.datasets[j].data[0].y) {
+ elem.chart.data.datasets[j].data.splice(0, elem.chart.data.datasets[j].data.length - runtime.gridMaxPoints);
+ elem.maxYLabel = getMaxYLabel(elem.chart.data.datasets[j].data);
} else {
- elem.chart.series[j].data.splice(0, elem.chart.series[j].data.length - runtime.gridMaxPoints);
+ elem.chart.data.datasets[j].data.splice(0, elem.chart.data.datasets[j].data.length - runtime.gridMaxPoints);
}
}
@@ -1661,7 +1622,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
// update chart options
// keep ticks number/positioning consistent while refreshrate changes
var tickInterval = (runtime.xmax - runtime.xmin) / 5;
- elem.chart.axes.xaxis.ticks = [
+ elem.chart.data.labels = [
(runtime.xmax - tickInterval * 4),
(runtime.xmax - tickInterval * 3),
(runtime.xmax - tickInterval * 2),
@@ -1673,20 +1634,22 @@ AJAX.registerOnload('server/status/monitor.js', function () {
elem.title !== window.Messages.strQueryCacheEfficiency &&
elem.title !== window.Messages.strSystemMemory &&
elem.title !== window.Messages.strSystemSwap
+ && elem.maxYLabel > 0
) {
- elem.chart.axes.yaxis.max = Math.ceil(elem.maxYLabel * 1.1);
- elem.chart.axes.yaxis.tickInterval = Math.ceil(elem.maxYLabel * 1.1 / 5);
- } else if (elem.title === window.Messages.strSystemMemory ||
- elem.title === window.Messages.strSystemSwap
+ elem.chart.options.scales.y.max = Math.ceil(elem.maxYLabel * 1.1);
+ elem.chart.options.scales.y.ticks.stepSize = Math.ceil(elem.maxYLabel * 1.1 / 5);
+ } else if (
+ (elem.title === window.Messages.strSystemMemory || elem.title === window.Messages.strSystemSwap)
+ && total > 0
) {
- elem.chart.axes.yaxis.max = Math.ceil(total * 1.1 / 100) * 100;
- elem.chart.axes.yaxis.tickInterval = Math.ceil(total * 1.1 / 5);
+ elem.chart.options.scales.y.max = Math.ceil(total * 1.1 / 100) * 100;
+ elem.chart.options.scales.y.ticks.stepSize = Math.ceil(total * 1.1 / 5);
}
i++;
if (runtime.redrawCharts) {
- elem.chart.replot();
+ elem.chart.update('none');
}
});
@@ -1696,13 +1659,13 @@ AJAX.registerOnload('server/status/monitor.js', function () {
});
}
- /* Function to get highest plotted point's y label, to scale the chart,
- * TODO: make jqplot's autoscale:true work here
+ /**
+ * Function to get the highest plotted point's y label, to scale the chart.
*/
function getMaxYLabel (dataValues) {
- var maxY = dataValues[0][1];
+ var maxY = dataValues[0].y;
$.each(dataValues, function (k, v) {
- maxY = (v[1] > maxY) ? v[1] : maxY;
+ maxY = (v.y > maxY) ? v.y : maxY;
});
return maxY;
@@ -2247,7 +2210,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
},
width: 'auto',
height: 'auto',
- resizable: false,
+ resizable: true,
// @ts-ignore
buttons: dlgBtns,
close: function () {
@@ -2383,23 +2346,23 @@ AJAX.registerOnload('server/status/monitor.js', function () {
$('#queryAnalyzerDialog').find('div.placeHolder td.chart').append(
'
' + window.Messages.strProfilingResults + ' ' + $('#profiling_docu').html() + ' ' +
'(
' + window.Messages.strTable + ',
' + window.Messages.strChart + ')
' +
- numberTable + '
');
+ numberTable + '
');
$('#queryAnalyzerDialog').find('div.placeHolder a[href="#showNums"]').on('click', function () {
- $('#queryAnalyzerDialog').find('#queryProfiling').hide();
+ $('#queryAnalyzerDialog').find('#queryProfilingCanvas').hide();
$('#queryAnalyzerDialog').find('table.queryNums').show();
return false;
});
$('#queryAnalyzerDialog').find('div.placeHolder a[href="#showChart"]').on('click', function () {
- $('#queryAnalyzerDialog').find('#queryProfiling').show();
+ $('#queryAnalyzerDialog').find('#queryProfilingCanvas').show();
$('#queryAnalyzerDialog').find('table.queryNums').hide();
return false;
});
- profilingChart = createProfilingChart('queryProfiling', chartData);
+ profilingChart = createProfilingChart('queryProfilingCanvas', chartData);
}
});
diff --git a/resources/js/src/table/chart.ts b/resources/js/src/table/chart.ts
index c44c1c59de..f6d32050b4 100644
--- a/resources/js/src/table/chart.ts
+++ b/resources/js/src/table/chart.ts
@@ -3,6 +3,7 @@ import { AJAX } from '../modules/ajax.ts';
import { Functions } from '../modules/functions.ts';
import { ajaxRemoveMessage, ajaxShowMessage } from '../modules/ajax-message.ts';
import { escapeHtml } from '../modules/functions/escape.ts';
+import { ColumnType, DataTable } from '../modules/chart.ts';
var chartData = {};
var tempChartTitle;
@@ -72,20 +73,20 @@ function queryChart (data, columnNames, settings) {
};
// create the data table and add columns
- var dataTable = new window.DataTable();
+ const dataTable = new DataTable();
if (settings.type === 'timeline') {
- dataTable.addColumn(window.ColumnType.DATE, columnNames[settings.mainAxis]);
+ dataTable.addColumn(ColumnType.DATE, columnNames[settings.mainAxis]);
} else if (settings.type === 'scatter') {
- dataTable.addColumn(window.ColumnType.NUMBER, columnNames[settings.mainAxis]);
+ dataTable.addColumn(ColumnType.NUMBER, columnNames[settings.mainAxis]);
} else {
- dataTable.addColumn(window.ColumnType.STRING, columnNames[settings.mainAxis]);
+ dataTable.addColumn(ColumnType.STRING, columnNames[settings.mainAxis]);
}
var i;
var values = [];
if (settings.seriesColumn === null) {
$.each(settings.selectedSeries, function (index, element) {
- dataTable.addColumn(window.ColumnType.NUMBER, columnNames[element]);
+ dataTable.addColumn(ColumnType.NUMBER, columnNames[element]);
});
// set data to the data table
@@ -131,7 +132,7 @@ function queryChart (data, columnNames, settings) {
}
$.each(seriesNames, function (seriesName) {
- dataTable.addColumn(window.ColumnType.NUMBER, seriesName);
+ dataTable.addColumn(ColumnType.NUMBER, seriesName);
});
var valueMap = {};
diff --git a/resources/js/src/table/zoom_plot_jqplot.ts b/resources/js/src/table/zoom_search.ts
similarity index 99%
rename from resources/js/src/table/zoom_plot_jqplot.ts
rename to resources/js/src/table/zoom_search.ts
index 687985b8c6..bf85d5e5e8 100644
--- a/resources/js/src/table/zoom_plot_jqplot.ts
+++ b/resources/js/src/table/zoom_search.ts
@@ -109,7 +109,7 @@ function getType (field) {
/**
* Unbind all event handlers before tearing down a page
*/
-AJAX.registerTeardown('table/zoom_plot_jqplot.js', function () {
+AJAX.registerTeardown('table/zoom_search.js', function () {
$('#tableid_0').off('change');
$('#tableid_1').off('change');
$('#tableid_2').off('change');
@@ -120,7 +120,7 @@ AJAX.registerTeardown('table/zoom_plot_jqplot.js', function () {
$('button.button-reset').off('click');
});
-AJAX.registerOnload('table/zoom_plot_jqplot.js', function () {
+AJAX.registerOnload('table/zoom_search.js', function () {
let currentChart = null;
var searchedDataKey = null;
var xLabel = ($('#tableid_0').val() as string);
diff --git a/resources/templates/server/status/monitor/index.twig b/resources/templates/server/status/monitor/index.twig
index 98024d95fe..db592f80d9 100644
--- a/resources/templates/server/status/monitor/index.twig
+++ b/resources/templates/server/status/monitor/index.twig
@@ -74,7 +74,7 @@
{{ t("Your browser will refresh all displayed charts in a regular interval. You may add charts and change the refresh rate under 'Settings', or remove any chart using the cog icon on each respective chart.") }}
- {{ t('To display queries from the logs, select the relevant time span on any chart by holding down the left mouse button and panning over the chart. Once confirmed, this will load a table of grouped queries, there you may click on any occurring SELECT statements to further analyze them.') }}
+ {{ t('To display queries from the logs, click on any chart. Once confirmed, this will load a table of grouped queries, there you may click on any occurring SELECT statements to further analyze them.') }}
{{ get_image('s_attention') }}
@@ -213,7 +213,7 @@