Replace jqplot with chart.js for system monitor profiling chart

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>

public/themes/bootstrap/scss/_common.scss

@@ -514,10 +514,6 @@ div {
       &.CodeMirror-scroll {
         height: auto;
       }
-
-      &#queryProfiling {
-        height: 300px;
-      }
     }
 
     td.explain {

public/themes/metro/scss/_common.scss

@@ -767,10 +767,6 @@ div {
       &.CodeMirror-scroll {
         height: auto;
       }
-
-      &#queryProfiling {
-        height: 300px;
-      }
     }
 
     td.explain {

public/themes/pmahomme/scss/_common.scss

@@ -700,10 +700,6 @@ div {
       &.CodeMirror-scroll {
         height: auto;
       }
-
-      &#queryProfiling {
-        height: 300px;
-      }
     }
 
     td.explain {

resources/js/src/modules/functions/createProfilingChart.ts

@@ -1,4 +1,4 @@
-import $ from 'jquery';
+import { CommonParams } from '../common.ts';
 
 /**
  * Creates a Profiling Chart. Used in sql.js
@@ -10,63 +10,22 @@ import $ from 'jquery';
  * @return {object}
  */
 export default function createProfilingChart (target, data) {
-    // create the chart
-    var factory = new window.JQPlotChartFactory();
-    var chart = factory.createChart(window.ChartType.PIE, target);
-
-    // create the data table and add columns
-    var dataTable = new window.DataTable();
-    dataTable.addColumn(window.ColumnType.STRING, '');
-    dataTable.addColumn(window.ColumnType.NUMBER, '');
-    dataTable.setData(data);
-
-    var windowWidth = $(window).width();
-    var location = 's';
-    if (windowWidth > 768) {
-        location = 'se';
-    }
-
-    // draw the chart and return the chart object
-    chart.draw(dataTable, {
-        seriesDefaults: {
-            rendererOptions: {
-                showDataLabels: true
-            }
-        },
-        highlighter: {
-            tooltipLocation: 'se',
-            sizeAdjust: 0,
-            tooltipAxes: 'pieref',
-            formatString: '%s, %.9Ps'
-        },
-        legend: {
-            show: true,
-            location: location,
-            rendererOptions: {
-                numberColumns: 2
-            }
-        },
-        // from https://web.archive.org/web/20190321233412/http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines
-        seriesColors: [
-            '#fce94f',
-            '#fcaf3e',
-            '#e9b96e',
-            '#8ae234',
-            '#729fcf',
-            '#ad7fa8',
-            '#ef2929',
-            '#888a85',
-            '#c4a000',
-            '#ce5c00',
-            '#8f5902',
-            '#4e9a06',
-            '#204a87',
-            '#5c3566',
-            '#a40000',
-            '#babdb6',
-            '#2e3436'
-        ]
+    const lang = CommonParams.get('lang');
+    const numberFormat = new Intl.NumberFormat(lang.replace('_', '-'), {
+        style: 'unit',
+        unit: 'second',
+        unitDisplay: 'long',
+        notation: 'engineering',
     });
 
-    return chart;
+    return new window.Chart(target, {
+        type: 'pie',
+        data: { labels: data.map(row => row[0]), datasets: [{ data: data.map(row => row[1]) }] },
+        options: {
+            plugins: {
+                legend: { position: 'right' },
+                tooltip: { callbacks: { label: context => context.parsed ? numberFormat.format(context.parsed) : '' } },
+            },
+        },
+    });
 }

resources/js/src/server/status/monitor.ts

@@ -2210,7 +2210,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
             },
             width: 'auto',
             height: 'auto',
-            resizable: false,
+            resizable: true,
             // @ts-ignore
             buttons: dlgBtns,
             close: function () {
@@ -2346,23 +2346,23 @@ AJAX.registerOnload('server/status/monitor.js', function () {
                 $('#queryAnalyzerDialog').find('div.placeHolder td.chart').append(
                     '<b>' + window.Messages.strProfilingResults + ' ' + $('#profiling_docu').html() + '</b> ' +
                     '(<a href="#showNums">' + window.Messages.strTable + '</a>, <a href="#showChart">' + window.Messages.strChart + '</a>)<br>' +
-                    numberTable + ' <div id="queryProfiling"></div>');
+                    numberTable + ' <div style="height: 500px"><canvas id="queryProfilingCanvas" role="img"></canvas></div>');
 
                 $('#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);
             }
         });
 

resources/templates/server/status/monitor/index.twig

@@ -213,7 +213,7 @@
   </p>
 </div>
 
-<div id="queryAnalyzerDialog" title="{{ t('Query analyzer') }}" class="hide">
+<div id="queryAnalyzerDialog" title="{{ t('Query analyzer') }}" class="overflow-y-scroll hide">
   <textarea id="sqlquery"></textarea>
   <br>
   <div class="placeHolder"></div>