From 173cfb72b2fab8aa45b286a88812593dcf0c2993 Mon Sep 17 00:00:00 2001
From: Rohit Bhati <rohit.bhati@enterprisedb.com>
Date: Thu, 7 Nov 2024 22:00:45 +0530
Subject: [PATCH] Format dashboard graph metrics for better readability. #6016

---
 web/pgadmin/dashboard/static/js/Graphs.jsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/web/pgadmin/dashboard/static/js/Graphs.jsx b/web/pgadmin/dashboard/static/js/Graphs.jsx
index e8a7adf71..79f3d7743 100644
--- a/web/pgadmin/dashboard/static/js/Graphs.jsx
+++ b/web/pgadmin/dashboard/static/js/Graphs.jsx
@@ -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>