From ea2dc6664a102512525a36befb6243752afeb65b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maur=C3=ADcio=20Meneghini=20Fauth?= Date: Fri, 9 Dec 2022 15:57:30 -0300 Subject: [PATCH] Extract Functions.createProfilingChart() into a module MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Maurício Meneghini Fauth --- js/src/modules/functions.js | 71 ------------------ .../modules/functions/createProfilingChart.js | 73 +++++++++++++++++++ js/src/server/status/monitor.js | 6 +- js/src/server/status/queries.js | 7 +- js/src/sql.js | 3 +- 5 files changed, 79 insertions(+), 81 deletions(-) create mode 100644 js/src/modules/functions/createProfilingChart.js diff --git a/js/src/modules/functions.js b/js/src/modules/functions.js index 72950db7ee..9c7f2a11ae 100644 --- a/js/src/modules/functions.js +++ b/js/src/modules/functions.js @@ -9,7 +9,6 @@ import highlightSql from './sql-highlight.js'; import { ajaxRemoveMessage, ajaxShowMessage } from './ajax-message.js'; import handleCreateViewModal from './functions/handleCreateViewModal.js'; -/* global ChartType, ColumnType, DataTable, JQPlotChartFactory */ // js/chart.js /* global DatabaseStructure */ // js/database/structure.js /* global firstDayOfCalendar, maxInputVars, themeImagePath */ // templates/javascript/variables.twig @@ -1591,76 +1590,6 @@ Functions.showWarningForIntTypes = function () { } }; -/** - * Creates a Profiling Chart. Used in sql.js - * and in server/status/monitor.js - * - * @param target - * @param data - * - * @return {object} - */ -Functions.createProfilingChart = function (target, data) { - // create the chart - var factory = new JQPlotChartFactory(); - var chart = factory.createChart(ChartType.PIE, target); - - // create the data table and add columns - var dataTable = new DataTable(); - dataTable.addColumn(ColumnType.STRING, ''); - dataTable.addColumn(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' - ] - }); - return chart; -}; - /** * Formats a profiling duration nicely (in us and ms time). * Used in server/status/monitor.js diff --git a/js/src/modules/functions/createProfilingChart.js b/js/src/modules/functions/createProfilingChart.js new file mode 100644 index 0000000000..7421e48e1f --- /dev/null +++ b/js/src/modules/functions/createProfilingChart.js @@ -0,0 +1,73 @@ +import $ from 'jquery'; + +/* global ChartType, ColumnType, DataTable, JQPlotChartFactory */ // js/chart.js + +/** + * Creates a Profiling Chart. Used in sql.js + * and in server/status/monitor.js + * + * @param {string} target + * @param {any[]} data + * + * @return {object} + */ +export default function createProfilingChart (target, data) { + // create the chart + var factory = new JQPlotChartFactory(); + var chart = factory.createChart(ChartType.PIE, target); + + // create the data table and add columns + var dataTable = new DataTable(); + dataTable.addColumn(ColumnType.STRING, ''); + dataTable.addColumn(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' + ] + }); + return chart; +} diff --git a/js/src/server/status/monitor.js b/js/src/server/status/monitor.js index 0f7e0040d4..25ed7b132b 100644 --- a/js/src/server/status/monitor.js +++ b/js/src/server/status/monitor.js @@ -4,6 +4,7 @@ import { Functions } from '../../modules/functions.js'; import { CommonParams } from '../../modules/common.js'; import { Config } from '../../modules/config.js'; import tooltip from '../../modules/tooltip.js'; +import createProfilingChart from '../../modules/functions/createProfilingChart.js'; /** * @fileoverview Javascript functions used in server status monitor page @@ -2297,10 +2298,7 @@ AJAX.registerOnload('server/status/monitor.js', function () { return false; }); - profilingChart = Functions.createProfilingChart( - 'queryProfiling', - chartData - ); + profilingChart = createProfilingChart('queryProfiling', chartData); } }); return profilingChart; diff --git a/js/src/server/status/queries.js b/js/src/server/status/queries.js index 0bf8d12691..21a89e5c89 100644 --- a/js/src/server/status/queries.js +++ b/js/src/server/status/queries.js @@ -1,6 +1,6 @@ import $ from 'jquery'; import { AJAX } from '../../modules/ajax.js'; -import { Functions } from '../../modules/functions.js'; +import createProfilingChart from '../../modules/functions/createProfilingChart.js'; /** * @fileoverview Javascript functions used in server status query page @@ -33,10 +33,7 @@ AJAX.registerOnload('server/status/queries.js', function () { }); $('#serverstatusquerieschart').data( 'queryPieChart', - Functions.createProfilingChart( - 'serverstatusquerieschart', - cdata - ) + createProfilingChart('serverstatusquerieschart', cdata) ); } } catch (exception) { diff --git a/js/src/sql.js b/js/src/sql.js index b22ccd6aa2..4334f98242 100644 --- a/js/src/sql.js +++ b/js/src/sql.js @@ -6,6 +6,7 @@ import { CommonActions, CommonParams } from './modules/common.js'; import { Config } from './modules/config.js'; import highlightSql from './modules/sql-highlight.js'; import { ajaxRemoveMessage, ajaxShowMessage } from './modules/ajax-message.js'; +import createProfilingChart from './modules/functions/createProfilingChart.js'; /** * @fileoverview functions used wherever an sql query form is used @@ -1276,7 +1277,7 @@ Sql.makeProfilingChart = function () { $('#profilingchart').html('').show(); $('#profilingChartData').html(''); - Functions.createProfilingChart('profilingchart', data); + createProfilingChart('profilingchart', data); }; /**