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%',
}}
>
<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>
</XStack>
</YStack>

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

@ -178,6 +178,7 @@ type UptimeChartProps = {
monthlyActivity: number[];
startMonth: number;
endMonth: number;
withLabels: boolean;
};
const updateMonthlyValues = (data: any, monthlyActivity: any) => {
@ -203,7 +204,7 @@ const updateMonthlyValues = (data: any, monthlyActivity: any) => {
return data;
}
const UptimeChart = ({ monthlyActivity, startMonth, endMonth }: UptimeChartProps) => {
const UptimeChart = ({ monthlyActivity, startMonth, endMonth, withLabels }: UptimeChartProps) => {
const updatedData = updateMonthlyValues(data, monthlyActivity);
console.log(updatedData)
@ -213,7 +214,7 @@ const UptimeChart = ({ monthlyActivity, startMonth, endMonth }: UptimeChartProps
return (
<ResponsiveContainer>
<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="three" 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="nine" 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>
</ResponsiveContainer>
);