Merge pull request #19844 from liviuconcioiu/profiling

MauricioFauth · web-flow · commit ec4161ba4795 · 2025-09-13T13:45:17.000-03:00
Improve createProfilingChart function and remove duplicate code
diff --git a/resources/js/modules/functions/createProfilingChart.ts b/resources/js/modules/functions/createProfilingChart.ts
@@ -1,15 +1,16 @@
 import { CommonParams } from '../common.ts';
 
 /**
- * Creates a Profiling Chart. Used in sql.js
- * and in server/status/monitor.js
+ * Creates a Profiling Chart. Used in sql.ts
+ * and in server/status/monitor.ts
  *
  * @param {string} target
- * @param {any[]} data
+ * @param {any[]} chartData
+ * @param {string} legendPosition
  *
  * @return {object}
  */
-export default function createProfilingChart (target, data) {
+export default function createProfilingChart (target, chartData, legendPosition) {
     const lang = CommonParams.get('lang');
     const numberFormat = new Intl.NumberFormat(lang.replace('_', '-'), {
         style: 'unit',
@@ -20,10 +21,10 @@ export default function createProfilingChart (target, data) {
 
     return new window.Chart(target, {
         type: 'pie',
-        data: { labels: data.map(row => row[0]), datasets: [{ data: data.map(row => row[1]) }] },
+        data: { labels: chartData.labels, datasets: [{ data: chartData.data }] },
         options: {
             plugins: {
-                legend: { position: 'right' },
+                legend: { position: legendPosition },
                 tooltip: { callbacks: { label: context => context.parsed ? numberFormat.format(context.parsed) : '' } },
             },
         },
diff --git a/resources/js/server/status/monitor.ts b/resources/js/server/status/monitor.ts
@@ -2211,7 +2211,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
                     return false;
                 });
 
-                profilingChart = createProfilingChart('queryProfilingCanvas', chartData);
+                profilingChart = createProfilingChart('queryProfilingCanvas', chartData, 'right');
             }
         });
 
diff --git a/resources/js/sql.ts b/resources/js/sql.ts
@@ -4,6 +4,7 @@ import { AJAX } from './modules/ajax.ts';
 import { checkFormElementInRange, checkSqlQuery, prepareForAjaxRequest } from './modules/functions.ts';
 import { Navigation } from './modules/navigation.ts';
 import { CommonParams } from './modules/common.ts';
+import createProfilingChart from './modules/functions/createProfilingChart.ts';
 import highlightSql from './modules/sql-highlight.ts';
 import { ajaxRemoveMessage, ajaxShowMessage } from './modules/ajax-message.ts';
 import { escapeBacktick, escapeHtml } from './modules/functions/escape.ts';
@@ -1369,27 +1370,7 @@ function buildProfilingChart () {
         return;
     }
 
-    const lang = CommonParams.get('lang');
-    const numberFormat = new Intl.NumberFormat(lang.replace('_', '-'), {
-        style: 'unit',
-        unit: 'second',
-        unitDisplay: 'long',
-        notation: 'engineering',
-    });
-
-    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) : '' } },
-            },
-        },
-    });
+    createProfilingChart('profilingChartCanvas', chartData, 'bottom');
 }
 
 /**

Original file line number	Diff line number	Diff line change
`@@ -2211,7 +2211,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {`
`2211`	`2211`	`return false;`
`2212`	`2212`	`});`
`2213`	`2213`
`2214`		`- profilingChart = createProfilingChart('queryProfilingCanvas', chartData);`
	`2214`	`+ profilingChart = createProfilingChart('queryProfilingCanvas', chartData, 'right');`
`2215`	`2215`	`}`
`2216`	`2216`	`});`
`2217`	`2217`