From 6cda25211e2e332af1d7f8574745e0e06197e758 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maur=C3=ADcio=20Meneghini=20Fauth?= Date: Sat, 17 Jun 2023 21:23:44 -0300 Subject: [PATCH] Replace jqPlot with Chart.js for the profiling chart MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Maurício Meneghini Fauth --- js/src/sql.ts | 54 +++++++++----- libraries/classes/Html/Generator.php | 3 +- libraries/classes/Profiling.php | 5 +- libraries/classes/Sql.php | 9 +-- public/themes/bootstrap/scss/_common.scss | 16 ----- public/themes/metro/scss/_common.scss | 10 --- public/themes/original/scss/_common.scss | 13 ---- public/themes/pmahomme/scss/_common.scss | 16 ----- templates/sql/profiling_chart.twig | 10 +-- test/classes/Html/GeneratorTest.php | 4 +- test/classes/SqlTest.php | 87 +++++++++++++++-------- webpack.config.cjs | 1 + 12 files changed, 103 insertions(+), 125 deletions(-) diff --git a/js/src/sql.ts b/js/src/sql.ts index 91bf09e9f3..fd97b00cc0 100644 --- a/js/src/sql.ts +++ b/js/src/sql.ts @@ -5,7 +5,6 @@ import { Navigation } from './modules/navigation.ts'; import { CommonParams } from './modules/common.ts'; import highlightSql from './modules/sql-highlight.ts'; import { ajaxRemoveMessage, ajaxShowMessage } from './modules/ajax-message.ts'; -import createProfilingChart from './modules/functions/createProfilingChart.ts'; import { escapeHtml } from './modules/functions/escape.ts'; import refreshMainContent from './modules/functions/refreshMainContent.ts'; import isStorageSupported from './modules/functions/isStorageSupported.ts'; @@ -1323,27 +1322,45 @@ AJAX.registerOnload('sql.js', function () { } }); -/** - * Profiling Chart - */ -function makeProfilingChart () { - if ($('#profilingchart').length === 0 || - $('#profilingchart').html().length !== 0 || - ! $.jqplot || ! $.jqplot.Highlighter || ! $.jqplot.PieRenderer - ) { +function buildProfilingChart () { + const profilingChartCanvas = document.getElementById('profilingChartCanvas') as HTMLCanvasElement; + if (! profilingChartCanvas) { return; } - var data = []; - $.each(JSON.parse($('#profilingChartData').html()), function (key, value) { - data.push([key, parseFloat(value)]); + const chartDataJson = profilingChartCanvas.getAttribute('data-chart-data'); + let chartData = null; + try { + chartData = JSON.parse(chartDataJson); + } catch (e) { + return; + } + + if (! (chartData && 'labels' in chartData && 'data' in chartData)) { + return; + } + + const lang = CommonParams.get('lang'); + const numberFormat = new Intl.NumberFormat(lang.replace('_', '-'), { + style: 'unit', + unit: 'second', + unitDisplay: 'long', + notation: 'engineering', }); - // Remove chart and data divs contents - $('#profilingchart').html('').show(); - $('#profilingChartData').html(''); - - createProfilingChart('profilingchart', data); + new window.Chart(profilingChartCanvas, { + type: 'pie', + data: { + labels: chartData.labels, + datasets: [{ data: chartData.data }], + }, + options: { + plugins: { + legend: { position: 'bottom' }, + tooltip: { callbacks: { label: context => context.parsed ? numberFormat.format(context.parsed) : '' } }, + }, + }, + }); } /** @@ -1390,8 +1407,8 @@ function initProfilingTables () { } AJAX.registerOnload('sql.js', function () { - Sql.makeProfilingChart(); Sql.initProfilingTables(); + buildProfilingChart(); }); const Sql = { @@ -1407,7 +1424,6 @@ const Sql = { browseForeignDialog: browseForeignDialog, getAutoSavedKey: getAutoSavedKey, checkSavedQuery: checkSavedQuery, - makeProfilingChart: makeProfilingChart, initProfilingTables: initProfilingTables, }; diff --git a/libraries/classes/Html/Generator.php b/libraries/classes/Html/Generator.php index 8eec86eefa..c6bc210603 100644 --- a/libraries/classes/Html/Generator.php +++ b/libraries/classes/Html/Generator.php @@ -644,7 +644,8 @@ class Generator $retval .= '
' . "\n"; $retval .= '
' . "\n"; $retval .= '
' . "\n"; - $retval .= '
' . "\n"; + $retval .= '' . "\n"; $retval .= Url::getHiddenInputs($GLOBALS['db'], $GLOBALS['table']) . "\n"; $retval .= '' . "\n"; diff --git a/libraries/classes/Profiling.php b/libraries/classes/Profiling.php index 9a643603f8..6aa20807f9 100644 --- a/libraries/classes/Profiling.php +++ b/libraries/classes/Profiling.php @@ -73,10 +73,7 @@ final class Profiling $scripts = $response->getHeader()->getScripts(); $scripts->addFiles([ - 'chart.js', - 'vendor/jqplot/jquery.jqplot.js', - 'vendor/jqplot/plugins/jqplot.pieRenderer.js', - 'vendor/jqplot/plugins/jqplot.highlighter.js', + 'vendor/chart.umd.js', 'vendor/jquery/jquery.tablesorter.js', ]); } diff --git a/libraries/classes/Sql.php b/libraries/classes/Sql.php index 7a7df197c7..1f1330100d 100644 --- a/libraries/classes/Sql.php +++ b/libraries/classes/Sql.php @@ -27,6 +27,7 @@ use function __; use function array_column; use function array_keys; use function array_sum; +use function arsort; use function bin2hex; use function ceil; use function count; @@ -251,7 +252,7 @@ class Sql * @psalm-return array{ * total_time: float, * states: array}>, - * chart: array, + * chart: array{labels: list, data: list}, * profile: list * }|array{} */ @@ -263,7 +264,6 @@ class Sql } $states = []; - $chart = []; $profile = []; foreach ($profilingResults as $result) { $status = ucwords($result['Status']); @@ -275,14 +275,15 @@ class Sql if (! isset($states[$status])) { $states[$status] = ['total_time' => (float) $result['Duration'], 'calls' => 1]; - $chart[$status] = (float) $result['Duration']; } else { $states[$status]['calls']++; $states[$status]['total_time'] += $result['Duration']; - $chart[$status] += $result['Duration']; } } + arsort($states); + $chart = ['labels' => array_keys($states), 'data' => array_column($states, 'total_time')]; + return ['total_time' => $totalTime, 'states' => $states, 'chart' => $chart, 'profile' => $profile]; } diff --git a/public/themes/bootstrap/scss/_common.scss b/public/themes/bootstrap/scss/_common.scss index 0a5bd64c8f..eed6ecbbc7 100644 --- a/public/themes/bootstrap/scss/_common.scss +++ b/public/themes/bootstrap/scss/_common.scss @@ -566,22 +566,6 @@ div { // end serverstatus -// profiling - -div#profilingchart { - width: 850px; - height: 370px; - float: left; -} - -#profilingchart .jqplot-highlighter-tooltip { - top: auto !important; - left: 11px; - bottom: 24px; -} - -// end profiling - // table charting #resizer { border: 1px solid silver; diff --git a/public/themes/metro/scss/_common.scss b/public/themes/metro/scss/_common.scss index 62d3868043..8ab85fb5b8 100644 --- a/public/themes/metro/scss/_common.scss +++ b/public/themes/metro/scss/_common.scss @@ -817,16 +817,6 @@ div { /* end serverstatus */ -/* profiling */ - -div#profilingchart { - width: 850px; - height: 370px; - float: left; -} - -/* END profiling */ - /* table charting */ #resizer { diff --git a/public/themes/original/scss/_common.scss b/public/themes/original/scss/_common.scss index a1265ef261..3e7c6f3ca2 100644 --- a/public/themes/original/scss/_common.scss +++ b/public/themes/original/scss/_common.scss @@ -577,19 +577,6 @@ div#logTable { padding-left: 7px; } -/* profiling */ -div#profilingchart { - width: 850px; - height: 370px; - float: left; -} - -#profilingchart .jqplot-highlighter-tooltip { - top: auto !important; - left: 11px; - bottom: 24px; -} - textarea { &#sqlquery { width: 100%; diff --git a/public/themes/pmahomme/scss/_common.scss b/public/themes/pmahomme/scss/_common.scss index 4c1905e796..aedb16e115 100644 --- a/public/themes/pmahomme/scss/_common.scss +++ b/public/themes/pmahomme/scss/_common.scss @@ -752,22 +752,6 @@ div { // end serverstatus -// profiling - -div#profilingchart { - width: 850px; - height: 370px; - float: left; -} - -#profilingchart .jqplot-highlighter-tooltip { - top: auto !important; - left: 11px; - bottom: 24px; -} - -// end profiling - // table charting #resizer { border: 1px solid silver; diff --git a/templates/sql/profiling_chart.twig b/templates/sql/profiling_chart.twig index f1c9226ae5..7bc5cdf74a 100644 --- a/templates/sql/profiling_chart.twig +++ b/templates/sql/profiling_chart.twig @@ -63,17 +63,9 @@
-
{{ profiling.chart|json_encode() }}
-
+
- - diff --git a/test/classes/Html/GeneratorTest.php b/test/classes/Html/GeneratorTest.php index 5e1497eeb3..91ba726d89 100644 --- a/test/classes/Html/GeneratorTest.php +++ b/test/classes/Html/GeneratorTest.php @@ -494,7 +494,7 @@ SELECT 1;
- + @@ -546,7 +546,7 @@ $sql = "EXPLAIN SELECT 1;";
- +
diff --git a/test/classes/SqlTest.php b/test/classes/SqlTest.php index 8bc11d9f9f..913fd8f2fe 100644 --- a/test/classes/SqlTest.php +++ b/test/classes/SqlTest.php @@ -666,50 +666,75 @@ class SqlTest extends AbstractTestCase $expected = [ 'total_time' => 0.000299, 'states' => [ - 'Starting' => ['total_time' => 0.000017, 'calls' => 1], - 'Checking Permissions' => ['total_time' => 0.000003, 'calls' => 1], 'Opening Tables' => ['total_time' => 0.00016, 'calls' => 2], - 'After Opening Tables' => ['total_time' => 0.000006, 'calls' => 2], - 'System Lock' => ['total_time' => 0.000004, 'calls' => 2], + 'Sending Data' => ['total_time' => 0.000029, 'calls' => 1], + 'Starting' => ['total_time' => 0.000017, 'calls' => 1], 'Table Lock' => ['total_time' => 0.000015, 'calls' => 2], - 'Unlocking Tables' => ['total_time' => 0.000004, 'calls' => 2], 'Closing Tables' => ['total_time' => 0.000009, 'calls' => 3], + 'Reset For Next Command' => ['total_time' => 0.000009, 'calls' => 1], 'Init' => ['total_time' => 0.000007, 'calls' => 1], - 'Optimizing' => ['total_time' => 0.000004, 'calls' => 1], + 'Updating Status' => ['total_time' => 0.000007, 'calls' => 1], + 'After Opening Tables' => ['total_time' => 0.000006, 'calls' => 2], 'Statistics' => ['total_time' => 0.000006, 'calls' => 1], 'Preparing' => ['total_time' => 0.000006, 'calls' => 1], - 'Executing' => ['total_time' => 0.000002, 'calls' => 1], - 'Sending Data' => ['total_time' => 0.000029, 'calls' => 1], + 'System Lock' => ['total_time' => 0.000004, 'calls' => 2], + 'Unlocking Tables' => ['total_time' => 0.000004, 'calls' => 2], + 'Optimizing' => ['total_time' => 0.000004, 'calls' => 1], + 'Checking Permissions' => ['total_time' => 0.000003, 'calls' => 1], 'End Of Update Loop' => ['total_time' => 0.000003, 'calls' => 1], + 'Executing' => ['total_time' => 0.000002, 'calls' => 1], 'Query End' => ['total_time' => 0.000002, 'calls' => 1], 'Commit' => ['total_time' => 0.000002, 'calls' => 1], 'Starting Cleanup' => ['total_time' => 0.000002, 'calls' => 1], 'Freeing Items' => ['total_time' => 0.000002, 'calls' => 1], - 'Updating Status' => ['total_time' => 0.000007, 'calls' => 1], - 'Reset For Next Command' => ['total_time' => 0.000009, 'calls' => 1], ], 'chart' => [ - 'Starting' => 0.000017, - 'Checking Permissions' => 0.000003, - 'Opening Tables' => 0.00016, - 'After Opening Tables' => 0.000006, - 'System Lock' => 0.000004, - 'Table Lock' => 0.000015, - 'Unlocking Tables' => 0.000004, - 'Closing Tables' => 0.000009, - 'Init' => 0.000007, - 'Optimizing' => 0.000004, - 'Statistics' => 0.000006, - 'Preparing' => 0.000006, - 'Executing' => 0.000002, - 'Sending Data' => 0.000029, - 'End Of Update Loop' => 0.000003, - 'Query End' => 0.000002, - 'Commit' => 0.000002, - 'Starting Cleanup' => 0.000002, - 'Freeing Items' => 0.000002, - 'Updating Status' => 0.000007, - 'Reset For Next Command' => 0.000009, + 'labels' => [ + 'Opening Tables', + 'Sending Data', + 'Starting', + 'Table Lock', + 'Closing Tables', + 'Reset For Next Command', + 'Init', + 'Updating Status', + 'After Opening Tables', + 'Statistics', + 'Preparing', + 'System Lock', + 'Unlocking Tables', + 'Optimizing', + 'Checking Permissions', + 'End Of Update Loop', + 'Executing', + 'Query End', + 'Commit', + 'Starting Cleanup', + 'Freeing Items', + ], + 'data' => [ + 0.00016, + 0.000029, + 0.000017, + 0.000015, + 0.000009, + 0.000009, + 0.000007, + 0.000007, + 0.000006, + 0.000006, + 0.000006, + 0.000004, + 0.000004, + 0.000004, + 0.000003, + 0.000003, + 0.000002, + 0.000002, + 0.000002, + 0.000002, + 0.000002, + ], ], 'profile' => [ ['status' => 'Starting', 'duration' => '17 µ', 'duration_raw' => '0.000017'], diff --git a/webpack.config.cjs b/webpack.config.cjs index b95f815805..d0e946ba7f 100644 --- a/webpack.config.cjs +++ b/webpack.config.cjs @@ -160,6 +160,7 @@ module.exports = [ { from: rootPath + '/node_modules/updated-jqplot/build/plugins/jqplot.cursor.js', to: publicPath + '/js/vendor/jqplot/plugins/jqplot.cursor.js' }, { from: rootPath + '/node_modules/updated-jqplot/build/plugins/jqplot.highlighter.js', to: publicPath + '/js/vendor/jqplot/plugins/jqplot.highlighter.js' }, { from: rootPath + '/node_modules/chart.js/dist/chart.umd.js', to: publicPath + '/js/vendor/chart.umd.js' }, + { from: rootPath + '/node_modules/chart.js/dist/chart.umd.js.map', to: publicPath + '/js/vendor/chart.umd.js.map' }, ], }), new WebpackConcatPlugin({