Box style widget

dfinity · Aug 22, 2024 · 9277444 · 9277444
1 parent 70a5353
commit 9277444
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 16 deletions.
diff --git a/...e-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/Styles.tsx b/...e-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/Styles.tsx
@@ -6,20 +6,13 @@ export const paperStyle: SxProps<Theme> = {
   p: 2,
 };
 
-export const boxStyleLeft: SxProps<Theme> = {
+export const boxStyleWidget = (justifyContent: 'left' | 'right', alignItems?: 'flex-start' | 'center' | 'flex-end'): SxProps<Theme> => ({
   display: 'flex',
   flexWrap: 'wrap',
-  justifyContent: 'left',
+  justifyContent: justifyContent,
+  alignItems: alignItems || 'stretch',
   gap: 2,
-};
-
-export const boxStyleRight: SxProps<Theme> = {
-  display: 'flex',
-  flexWrap: 'wrap',
-  justifyContent: 'right',
-  alignItems: 'left',
-  gap: 2,
-};
+});
 
 export const paperStyleWidget: SxProps<Theme> = {
     p: 2, 

diff --git a/...ustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/NodeChart.tsx b/...ustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/NodeChart.tsx
@@ -6,7 +6,7 @@ import { Box, Grid, Paper, Typography } from '@mui/material';
 import { useParams } from 'react-router-dom';
 import DailyPerformanceChart from './DailyPerformanceChart';
 import NodeInfo from './NodeInfo';
-import { paperStyle, boxStyleLeft, boxStyleRight } from '../Styles';
+import { paperStyle, boxStyleWidget } from '../Styles';
 import { NodeRewardsResponse } from '../../../declarations/trustworthy-node-metrics/trustworthy-node-metrics.did';
 
 export interface NodeChartProps {
@@ -15,14 +15,14 @@ export interface NodeChartProps {
 }
 
 const NodeMetricsStats: React.FC<{ stats: NodeRewardsResponse['rewards_stats'] }> = ({ stats }) => (
-    <Box sx={boxStyleLeft}>
+    <Box sx={boxStyleWidget('left')}>
         <WidgetNumber value={stats.blocks_proposed.toString()} title="Blocks Proposed Total" />
         <WidgetNumber value={stats.blocks_failed.toString()} title="Blocks Failed Total" />
     </Box>
 );
 
 const NodePerformanceStats: React.FC<{ failureRateAvg: string, rewardPercent: string }> = ({ failureRateAvg, rewardPercent }) => (
-    <Box sx={boxStyleRight}>
+    <Box sx={boxStyleWidget('right')}>
         <WidgetNumber value={failureRateAvg} title="Failure Rate Assigned" />
         <WidgetNumber value={rewardPercent} title="Rewards Percent Assigned" />
         <WidgetNumber value={"100%"} title="Rewards Percent Unassigned" />

diff --git a/...trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/Widgets.tsx b/...trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/Widgets.tsx
@@ -1,6 +1,6 @@
 import { Box, Paper, Stack, Typography } from '@mui/material';
 import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge';
-import { boxStyleRight, paperStyleWidget } from '../Styles';
+import { boxStyleWidget, paperStyleWidget } from '../Styles';
 
 import React from 'react';
 
@@ -24,7 +24,7 @@ export function WidgetNumber({ value, title }: { value: string, title: string })
 export function WidgetGauge({ value, title }: { value: number, title: string }) {
   return (
     <Box 
-      sx={boxStyleRight}
+      sx={boxStyleWidget('right')}
     >
       <Paper 
         elevation={15}