status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update UptimeChart to work without labels

This commit is contained in:
Hristo Nedelkov 2023-10-06 10:54:52 +03:00
parent b4d0f44ba3
commit 19c0b5f867
2 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
View File

@ -96,7 +96,7 @@ const DeviceUptime = () => {
height: '100%', height: '100%',
}} }}
> >
<UptimeChart startMonth={startMonth} endMonth={endMonth} monthlyActivity={[10, 1, 3, 4, 5, 1, 7, 1,6, 3, 1, 9]} /> <UptimeChart startMonth={startMonth} endMonth={endMonth} monthlyActivity={[10, 1, 3, 4, 5, 1, 7, 1,6, 3, 1, 9]} withLabels={true}/>
</Stack> </Stack>
</XStack> </XStack>
</YStack> </YStack>

7
src/pages/Dashboard/UptimeChart/UptimeChart.tsx
View File

@ -178,6 +178,7 @@ type UptimeChartProps = {
monthlyActivity: number[]; monthlyActivity: number[];
startMonth: number; startMonth: number;
endMonth: number; endMonth: number;
withLabels: boolean;
}; };
const updateMonthlyValues = (data: any, monthlyActivity: any) => { const updateMonthlyValues = (data: any, monthlyActivity: any) => {
@ -203,7 +204,7 @@ const updateMonthlyValues = (data: any, monthlyActivity: any) => {
return data; return data;
} }
const UptimeChart = ({ monthlyActivity, startMonth, endMonth }: UptimeChartProps) => { const UptimeChart = ({ monthlyActivity, startMonth, endMonth, withLabels }: UptimeChartProps) => {
const updatedData = updateMonthlyValues(data, monthlyActivity); const updatedData = updateMonthlyValues(data, monthlyActivity);
console.log(updatedData) console.log(updatedData)
@ -213,7 +214,7 @@ const UptimeChart = ({ monthlyActivity, startMonth, endMonth }: UptimeChartProps
return ( return (
<ResponsiveContainer> <ResponsiveContainer>
<BarChart data={filteredData} style={{ backgroundColor: '#F0F2F5' }}> <BarChart data={filteredData} style={{ backgroundColor: '#F0F2F5' }}>
<Bar dataKey="one" barSize={10} fill="#E95460" /> <Bar dataKey="one" barSize={withLabels ? 10 : 1} fill="#E95460" />
<Bar dataKey="two" barSize={10} fill="#E95460" /> <Bar dataKey="two" barSize={10} fill="#E95460" />
<Bar dataKey="three" barSize={10} fill="#E95460" /> <Bar dataKey="three" barSize={10} fill="#E95460" />
<Bar dataKey="four" barSize={10} fill="#E95460" /> <Bar dataKey="four" barSize={10} fill="#E95460" />
@ -223,7 +224,7 @@ const UptimeChart = ({ monthlyActivity, startMonth, endMonth }: UptimeChartProps
<Bar dataKey="eight" barSize={10} fill="#E95460" /> <Bar dataKey="eight" barSize={10} fill="#E95460" />
<Bar dataKey="nine" barSize={10} fill="#E95460" /> <Bar dataKey="nine" barSize={10} fill="#E95460" />
<Bar dataKey="ten" barSize={10} fill="#E95460" /> <Bar dataKey="ten" barSize={10} fill="#E95460" />
<XAxis dataKey="name" fontSize={'10px'} tickMargin={10} /> {withLabels && <XAxis dataKey="name" fontSize={'10px'} tickMargin={10} />}
</BarChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
); );