updates for dashboard UI responsiveness for cards and pie chart

Signed-off-by: Ankit Kokane <97180942+thedudeontitan@users.noreply.github.com> Update OrgPieChart.js Signed-off-by: Ankit <97180942+thedudeontitan@users.noreply.github.com>
hyperledger-labs · Jul 24, 2023 · 1bc693b · 1bc693b
1 parent b9fedec
commit 1bc693b
Show file tree

Hide file tree

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

diff --git a/client/src/components/View/DashboardView.js b/client/src/components/View/DashboardView.js
@@ -56,17 +56,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': {
@@ -80,8 +90,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',
@@ -107,6 +123,11 @@ const styles = theme => {
 		},
 		center: {
 			textAlign: 'center'
+		},
+		pie: {
+			[theme.breakpoints.up('md')]: {
+				marginLeft: '25%'
+			}
 		}
 	};
 };
@@ -281,7 +302,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>