IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Added support for visualise the graph using a Line chart in the query tool. Fixes #7485

Browse Source
This commit is contained in:
Akshay Joshi
2022-06-22 17:18:51 +05:30
parent 41ceda01d0
commit 93bc1f3c57
38 changed files with 693 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
web/pgadmin/dashboard/__init__.py
View File

@@ -21,7 +21,8 @@ from pgadmin.utils.ajax import precondition_required
from pgadmin.utils.driver import get_driver
from pgadmin.utils.menu import Panel
from pgadmin.utils.preferences import Preferences
from pgadmin.utils.constants import PREF_LABEL_DISPLAY, MIMETYPE_APP_JS
from pgadmin.utils.constants import PREF_LABEL_DISPLAY, MIMETYPE_APP_JS, \
PREF_LABEL_REFRESH_RATES
from config import PG_DEFAULT_DRIVER
@@ -73,7 +74,7 @@ class DashboardModule(PgAdminModule):
"""
help_string = gettext('The number of seconds between graph samples.')
# Register options for the PG and PPAS help paths
# Register options for Dashboards
self.dashboard_preference = Preferences(
'dashboards', gettext('Dashboards')
)
@@ -82,7 +83,7 @@ class DashboardModule(PgAdminModule):
'dashboards', 'session_stats_refresh',
gettext("Session statistics refresh rate"), 'integer',
1, min_val=1, max_val=999999,
category_label=gettext('Graphs'),
category_label=PREF_LABEL_REFRESH_RATES,
help_str=help_string
)
@@ -90,7 +91,7 @@ class DashboardModule(PgAdminModule):
'dashboards', 'tps_stats_refresh',
gettext("Transaction throughput refresh rate"), 'integer',
1, min_val=1, max_val=999999,
category_label=gettext('Graphs'),
category_label=PREF_LABEL_REFRESH_RATES,
help_str=help_string
)
@@ -98,7 +99,7 @@ class DashboardModule(PgAdminModule):
'dashboards', 'ti_stats_refresh',
gettext("Tuples in refresh rate"), 'integer',
1, min_val=1, max_val=999999,
category_label=gettext('Graphs'),
category_label=PREF_LABEL_REFRESH_RATES,
help_str=help_string
)
@@ -106,7 +107,7 @@ class DashboardModule(PgAdminModule):
'dashboards', 'to_stats_refresh',
gettext("Tuples out refresh rate"), 'integer',
1, min_val=1, max_val=999999,
category_label=gettext('Graphs'),
category_label=PREF_LABEL_REFRESH_RATES,
help_str=help_string
)
@@ -114,7 +115,7 @@ class DashboardModule(PgAdminModule):
'dashboards', 'bio_stats_refresh',
gettext("Block I/O statistics refresh rate"), 'integer',
1, min_val=1, max_val=999999,
category_label=gettext('Graphs'),
category_label=PREF_LABEL_REFRESH_RATES,
help_str=help_string
)
@@ -134,23 +135,6 @@ class DashboardModule(PgAdminModule):
'will be displayed on dashboards.')
)
self.graph_data_points = self.dashboard_preference.register(
'display', 'graph_data_points',
gettext("Show graph data points?"), 'boolean', False,
category_label=PREF_LABEL_DISPLAY,
help_str=gettext('If set to True, data points will be '
'visible on graph lines.')
)
self.graph_mouse_track = self.dashboard_preference.register(
'display', 'graph_mouse_track',
gettext("Show mouse hover tooltip?"), 'boolean', True,
category_label=PREF_LABEL_DISPLAY,
help_str=gettext('If set to True, tooltip will appear on mouse '
'hover on the graph lines giving the data point '
'details')
)
self.long_running_query_threshold = self.dashboard_preference.register(
'display', 'long_running_query_threshold',
gettext('Long running query thresholds'), 'threshold',
@@ -160,6 +144,36 @@ class DashboardModule(PgAdminModule):
'dashboard.')
)
# Register options for Graphs
self.graphs_preference = Preferences(
'graphs', gettext('Graphs')
)
self.graph_data_points = self.graphs_preference.register(
'graphs', 'graph_data_points',
gettext("Show graph data points?"), 'boolean', False,
category_label=PREF_LABEL_DISPLAY,
help_str=gettext('If set to True, data points will be '
'visible on graph lines.')
)
self.use_diff_point_style = self.graphs_preference.register(
'graphs', 'use_diff_point_style',
gettext("Use different data point styles?"), 'boolean', False,
category_label=PREF_LABEL_DISPLAY,
help_str=gettext('If set to True, data points will be visible '
'in a different style on each graph lines.')
)
self.graph_mouse_track = self.graphs_preference.register(
'graphs', 'graph_mouse_track',
gettext("Show mouse hover tooltip?"), 'boolean', True,
category_label=PREF_LABEL_DISPLAY,
help_str=gettext('If set to True, tooltip will appear on mouse '
'hover on the graph lines giving the data point '
'details')
)
def get_exposed_url_endpoints(self):
"""
Returns:

21
web/pgadmin/dashboard/static/js/Graphs.jsx
View File

@@ -7,7 +7,7 @@
//
//////////////////////////////////////////////////////////////
import React, { useEffect, useRef, useState, useReducer, useCallback, useMemo } from 'react';
import {LineChart} from 'sources/chartjs';
import { LineChart, DATA_POINT_STYLE, DATA_POINT_SIZE } from 'sources/chartjs';
import {ChartContainer, DashboardRowCol, DashboardRow} from './Dashboard';
import url_for from 'sources/url_for';
import axios from 'axios';
@@ -17,10 +17,9 @@ import {useInterval, usePrevious} from 'sources/custom_hooks';
import PropTypes from 'prop-types';
export const X_AXIS_LENGTH = 75;
export const POINT_SIZE = 2;
/* Transform the labels data to suit ChartJS */
export function transformData(labels, refreshRate) {
export function transformData(labels, refreshRate, use_diff_point_style) {
const colors = ['#00BCD4', '#9CCC65', '#E64A19'];
let datasets = Object.keys(labels).map((label, i)=>{
return {
@@ -28,7 +27,8 @@ export function transformData(labels, refreshRate) {
data: labels[label] || [],
borderColor: colors[i],
backgroundColor: colors[i],
pointHitRadius: POINT_SIZE,
pointHitRadius: DATA_POINT_SIZE,
pointStyle: use_diff_point_style ? DATA_POINT_STYLE[i] : 'circle'
};
}) || [];
@@ -225,11 +225,11 @@ export default function Graphs({preferences, sid, did, pageVisible, enablePoll=t
<div data-testid='graph-poll-delay' className='d-none'>{pollDelay}</div>
{chartDrawnOnce &&
<GraphsWrapper
sessionStats={transformData(sessionStats, preferences['session_stats_refresh'])}
tpsStats={transformData(tpsStats, preferences['tps_stats_refresh'])}
tiStats={transformData(tiStats, preferences['ti_stats_refresh'])}
toStats={transformData(toStats, preferences['to_stats_refresh'])}
bioStats={transformData(bioStats, preferences['bio_stats_refresh'])}
sessionStats={transformData(sessionStats, preferences['session_stats_refresh'], preferences['use_diff_point_style'])}
tpsStats={transformData(tpsStats, preferences['tps_stats_refresh'], preferences['use_diff_point_style'])}
tiStats={transformData(tiStats, preferences['ti_stats_refresh'], preferences['use_diff_point_style'])}
toStats={transformData(toStats, preferences['to_stats_refresh'], preferences['use_diff_point_style'])}
bioStats={transformData(bioStats, preferences['bio_stats_refresh'], preferences['use_diff_point_style'])}
errorMsg={errorMsg}
showTooltip={preferences['graph_mouse_track']}
showDataPoints={preferences['graph_data_points']}
@@ -261,10 +261,9 @@ export function GraphsWrapper(props) {
const toStatsLegendRef = useRef();
const bioStatsLegendRef = useRef();
const options = useMemo(()=>({
normalized: true,
elements: {
point: {
radius: props.showDataPoints ? POINT_SIZE : 0,
radius: props.showDataPoints ? DATA_POINT_SIZE : 0,
},
},
plugins: {