updates for dashboard UI responsiveness for cards and pie chart

Signed-off-by: Ankit Kokane <[email protected]>
hyperledger-labs · May 16, 2023 · 976a84a · 976a84a
1 parent 8c5220e
commit 976a84a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 8 deletions.
diff --git a/client/src/components/Charts/OrgPieChart.js b/client/src/components/Charts/OrgPieChart.js
@@ -98,7 +98,7 @@ export class OrgPieChart extends Component {
 		const { classes } = this.props;
 		return (
 			<div className={classes.container}>
-				<PieChart width={485} height={290} className={classes.chart}>
+				<PieChart width={250} height={290} className={classes.chart}>
 					<Legend align="right" height={10} />
 					<Pie
 						data={data}

diff --git a/client/src/components/View/DashboardView.js b/client/src/components/View/DashboardView.js
@@ -41,17 +41,27 @@ const styles = theme => {
 			boxShadow: dark ? '1px 2px 2px rgb(215, 247, 247)' : undefined
 		},
 		count: {
-			marginTop: '55%',
-			color: dark ? '#ffffff' : undefined
+			color: dark ? '#ffffff' : undefined,
+			[theme.breakpoints.down('md')]: {
+				marginTop: '35%'
+			},
+			[theme.breakpoints.up('md')]: {
+				marginTop: '55%'
+			}
 		},
 		statistic: {
 			display: 'block',
 			float: 'left',
 			height: '100%',
 			width: '25%',
 			textAlign: 'center',
-			fontSize: '18pt',
-			color: dark ? '#ffffff' : '#000000'
+			color: dark ? '#ffffff' : '#000000',
+			[theme.breakpoints.down('md')]: {
+				fontSize: '8pt'
+			},
+			[theme.breakpoints.up('md')]: {
+				fontSize: '18pt'
+			}
 		},
 		vdivide: {
 			'&::after': {
@@ -65,8 +75,14 @@ const styles = theme => {
 		},
 		avatar: {
 			justifyContent: 'center',
-			marginLeft: '60%',
-			marginTop: '65%'
+			[theme.breakpoints.down('md')]: {
+				marginLeft: '25%',
+				marginTop: '15%'
+			},
+			[theme.breakpoints.up('md')]: {
+				marginLeft: '60%',
+				marginTop: '65%'
+			}
 		},
 		node: {
 			color: dark ? '#183a37' : '#21295c',
@@ -92,6 +108,11 @@ const styles = theme => {
 		},
 		center: {
 			textAlign: 'center'
+		},
+		pie: {
+			[theme.breakpoints.up('md')]: {
+				marginLeft: '25%'
+			}
 		}
 	};
 };
@@ -255,7 +276,9 @@ export class DashboardView extends Component {
 							<Card className={`${classes.section} ${classes.center}`}>
 								<h5>Transactions by Organization</h5>
 								<hr />
-								<OrgPieChart transactionByOrg={transactionByOrg} />
+								<div className={classes.pie}>
+									<OrgPieChart transactionByOrg={transactionByOrg} />
+								</div>
 							</Card>
 						</Col>
 					</Row>