IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-01-06 22:23:11 -06:00
Code Issues Packages Projects Releases Wiki Activity

Format dashboard graph metrics for better readability. #6016

Browse Source
This commit is contained in:
Rohit Bhati 2024-11-07 22:00:45 +05:30 committed by GitHub
parent 2e61eb0990
commit 173cfb72b2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,7 @@ import {useInterval, usePrevious} from 'sources/custom_hooks';
import PropTypes from 'prop-types';
import StreamingChart from '../../../static/js/components/PgChart/StreamingChart';
import { Grid, useTheme } from '@mui/material';
import { getChartColor } from '../../../static/js/utils';
import { getChartColor, toPrettySize } from '../../../static/js/utils';
export const X_AXIS_LENGTH = 75;
@ -253,36 +253,35 @@ export function GraphsWrapper(props) {
lineBorderWidth: props.lineBorderWidth,
theme: props.theme,
}), [props.showTooltip, props.showDataPoints, props.lineBorderWidth, props.theme]);
return (
<>
<Grid container spacing={0.5}>
<Grid item md={6}>
<ChartContainer id='sessions-graph' title={props.isDatabase ? gettext('Database sessions') : gettext('Server sessions')}
datasets={props.sessionStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.sessionStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
<StreamingChart data={props.sessionStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} valueFormatter={(v)=>toPrettySize(v, '')}/>
</ChartContainer>
</Grid>
<Grid item md={6}>
<ChartContainer id='tps-graph' title={gettext('Transactions per second')} datasets={props.tpsStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.tpsStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
<StreamingChart data={props.tpsStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} valueFormatter={(v)=>toPrettySize(v, '')}/>
</ChartContainer>
</Grid>
</Grid>
<Grid container spacing={0.5} style={{marginTop: '4px', marginBottom: '4px'}}>
<Grid item md={4}>
<ChartContainer id='ti-graph' title={gettext('Tuples in')} datasets={props.tiStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.tiStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
<StreamingChart data={props.tiStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} valueFormatter={(v)=>toPrettySize(v, '')}/>
</ChartContainer>
</Grid>
<Grid item md={4}>
<ChartContainer id='to-graph' title={gettext('Tuples out')} datasets={props.toStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.toStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
<StreamingChart data={props.toStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} valueFormatter={(v)=>toPrettySize(v, '')}/>
</ChartContainer>
</Grid>
<Grid item md={4}>
<ChartContainer id='bio-graph' title={gettext('Block I/O')} datasets={props.bioStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.bioStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
<StreamingChart data={props.bioStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} valueFormatter={(v)=>toPrettySize(v, '')}/>
</ChartContainer>
</Grid>
</Grid>