mirror of
https://github.com/status-im/nimbus-gui.git
synced 2025-03-02 03:50:40 +00:00
fix device uptime
This commit is contained in:
Hristo Nedelkov
parent
b8dd036712
commit
710dadc861
@ -96,7 +96,7 @@ const DeviceUptime = () => {
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<UptimeChart startMonth={startMonth} endMonth={endMonth} monthlyActivity={[0, 10, 30, 40, 50, 10, 70, 10,60, 30, 10, 0, 0]} />
|
||||
<UptimeChart startMonth={startMonth} endMonth={endMonth} monthlyActivity={[10, 1, 3, 4, 5, 1, 7, 1,6, 3, 1, 9]} />
|
||||
</Stack>
|
||||
</XStack>
|
||||
</YStack>
|
||||
|
||||
@ -2,175 +2,176 @@
|
||||
const data: DataItem[] = [
|
||||
{
|
||||
name: 'Jan',
|
||||
'one': 1,
|
||||
'two': 1,
|
||||
'three': 1,
|
||||
'four': 1,
|
||||
'five': 1,
|
||||
'six': 1,
|
||||
'seven': 1,
|
||||
'eight': 1,
|
||||
'nine': 1,
|
||||
'ten': 1,
|
||||
'twenty': 1,
|
||||
'thirty': 1,
|
||||
'forty': 1,
|
||||
'fifty': 1,
|
||||
'sixty': 1,
|
||||
'seventy': 1,
|
||||
'eighty': 1,
|
||||
'ninety': 1,
|
||||
'hundred': 1,
|
||||
},
|
||||
{
|
||||
name: 'Feb',
|
||||
'one': 1,
|
||||
'two': 1,
|
||||
'three': 1,
|
||||
'four': 1,
|
||||
'five': 1,
|
||||
'six': 1,
|
||||
'seven': 1,
|
||||
'eight': 1,
|
||||
'nine': 1,
|
||||
'ten': 1,
|
||||
'twenty': 1,
|
||||
'thirty': 1,
|
||||
'forty': 1,
|
||||
'fifty': 1,
|
||||
'sixty': 1,
|
||||
'seventy': 1,
|
||||
'eighty': 1,
|
||||
'ninety': 1,
|
||||
'hundred': 1,
|
||||
},
|
||||
{
|
||||
name: 'Mar',
|
||||
'one': 1,
|
||||
'two': 1,
|
||||
'three': 1,
|
||||
'four': 1,
|
||||
'five': 1,
|
||||
'six': 1,
|
||||
'seven': 1,
|
||||
'eight': 1,
|
||||
'nine': 1,
|
||||
'ten': 1,
|
||||
'twenty': 1,
|
||||
'thirty': 1,
|
||||
'forty': 1,
|
||||
'fifty': 1,
|
||||
'sixty': 1,
|
||||
'seventy': 1,
|
||||
'eighty': 1,
|
||||
'ninety': 1,
|
||||
'hundred': 1,
|
||||
},
|
||||
{
|
||||
name: 'Apr',
|
||||
'one': 1,
|
||||
'two': 1,
|
||||
'three': 1,
|
||||
'four': 1,
|
||||
'five': 1,
|
||||
'six': 1,
|
||||
'seven': 1,
|
||||
'eight': 1,
|
||||
'nine': 1,
|
||||
'ten': 1,
|
||||
'twenty': 1,
|
||||
'thirty': 1,
|
||||
'forty': 1,
|
||||
'fifty': 1,
|
||||
'sixty': 1,
|
||||
'seventy': 1,
|
||||
'eighty': 1,
|
||||
'ninety': 1,
|
||||
'hundred': 1,
|
||||
},
|
||||
{
|
||||
name: 'May',
|
||||
'one': 1,
|
||||
'two': 1,
|
||||
'three': 1,
|
||||
'four': 1,
|
||||
'five': 1,
|
||||
'six': 1,
|
||||
'seven': 1,
|
||||
'eight': 1,
|
||||
'nine': 1,
|
||||
'ten': 1,
|
||||
'twenty': 1,
|
||||
'thirty': 1,
|
||||
'forty': 1,
|
||||
'fifty': 1,
|
||||
'sixty': 1,
|
||||
'seventy': 1,
|
||||
'eighty': 1,
|
||||
'ninety': 1,
|
||||
'hundred': 1,
|
||||
},
|
||||
{
|
||||
name: 'Aug',
|
||||
'ten': 1,
|
||||
'twenty': 1,
|
||||
'thirty': 1,
|
||||
'forty': 1,
|
||||
'fifty': 1,
|
||||
'sixty': 1,
|
||||
'seventy': 1,
|
||||
'eighty': 1,
|
||||
'ninety': 1,
|
||||
'hundred': 1,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Jun',
|
||||
'one': 1,
|
||||
'two': 1,
|
||||
'three': 1,
|
||||
'four': 1,
|
||||
'five': 1,
|
||||
'six': 1,
|
||||
'seven': 1,
|
||||
'eight': 1,
|
||||
'nine': 1,
|
||||
'ten': 1,
|
||||
'twenty': 1,
|
||||
'thirty': 1,
|
||||
'forty': 1,
|
||||
'fifty': 1,
|
||||
'sixty': 1,
|
||||
'seventy': 1,
|
||||
'eighty': 1,
|
||||
'ninety': 1,
|
||||
'hundred': 1,
|
||||
},
|
||||
{
|
||||
name: 'Jul',
|
||||
'one': 1,
|
||||
'two': 1,
|
||||
'three': 1,
|
||||
'four': 1,
|
||||
'five': 1,
|
||||
'six': 1,
|
||||
'seven': 1,
|
||||
'eight': 1,
|
||||
'nine': 1,
|
||||
'ten': 1,
|
||||
},
|
||||
{
|
||||
name: 'Aug',
|
||||
'one': 1,
|
||||
'two': 1,
|
||||
'three': 1,
|
||||
'four': 1,
|
||||
'five': 1,
|
||||
'six': 1,
|
||||
'seven': 1,
|
||||
'eight': 1,
|
||||
'nine': 1,
|
||||
'ten': 1,
|
||||
'twenty': 1,
|
||||
'thirty': 1,
|
||||
'forty': 1,
|
||||
'fifty': 1,
|
||||
'sixty': 1,
|
||||
'seventy': 1,
|
||||
'eighty': 1,
|
||||
'ninety': 1,
|
||||
'hundred': 1,
|
||||
},
|
||||
{
|
||||
name: 'Sep',
|
||||
'one': 1,
|
||||
'two': 1,
|
||||
'three': 1,
|
||||
'four': 1,
|
||||
'five': 1,
|
||||
'six': 1,
|
||||
'seven': 1,
|
||||
'eight': 1,
|
||||
'nine': 1,
|
||||
'ten': 1,
|
||||
'twenty': 1,
|
||||
'thirty': 1,
|
||||
'forty': 1,
|
||||
'fifty': 1,
|
||||
'sixty': 1,
|
||||
'seventy': 1,
|
||||
'eighty': 1,
|
||||
'ninety': 1,
|
||||
'hundred': 1,
|
||||
},
|
||||
{
|
||||
name: 'Oct',
|
||||
'one': 1,
|
||||
'two': 1,
|
||||
'three': 1,
|
||||
'four': 1,
|
||||
'five': 1,
|
||||
'six': 1,
|
||||
'seven': 1,
|
||||
'eight': 1,
|
||||
'nine': 1,
|
||||
'ten': 1,
|
||||
'twenty': 1,
|
||||
'thirty': 1,
|
||||
'forty': 1,
|
||||
'fifty': 1,
|
||||
'sixty': 1,
|
||||
'seventy': 1,
|
||||
'eighty': 1,
|
||||
'ninety': 1,
|
||||
'hundred': 1,
|
||||
},
|
||||
{
|
||||
name: 'Nov',
|
||||
'one': 1,
|
||||
'two': 1,
|
||||
'three': 1,
|
||||
'four': 1,
|
||||
'five': 1,
|
||||
'six': 1,
|
||||
'seven': 1,
|
||||
'eight': 1,
|
||||
'nine': 1,
|
||||
'ten': 1,
|
||||
'twenty': 1,
|
||||
'thirty': 1,
|
||||
'forty': 1,
|
||||
'fifty': 1,
|
||||
'sixty': 1,
|
||||
'seventy': 1,
|
||||
'eighty': 1,
|
||||
'ninety': 1,
|
||||
'hundred': 1,
|
||||
},
|
||||
{
|
||||
name: 'Dec',
|
||||
'one': 0,
|
||||
'two': 0,
|
||||
'three': 0,
|
||||
'four': 0,
|
||||
'five': 0,
|
||||
'six': 0,
|
||||
'seven': 0,
|
||||
'eight': 0,
|
||||
'nine': 0,
|
||||
'ten': 0,
|
||||
'twenty': 0,
|
||||
'thirty': 0,
|
||||
'forty': 0,
|
||||
'fifty': 0,
|
||||
'sixty': 0,
|
||||
'seventy': 0,
|
||||
'eighty': 0,
|
||||
'ninety': 0,
|
||||
'hundred': 0,
|
||||
},
|
||||
]
|
||||
import { BarChart, Bar, ResponsiveContainer, XAxis } from 'recharts';
|
||||
|
||||
type DataItem = {
|
||||
name: string;
|
||||
one: number;
|
||||
two: number;
|
||||
three: number;
|
||||
four: number;
|
||||
five: number;
|
||||
six: number;
|
||||
seven: number;
|
||||
eight: number;
|
||||
nine: number;
|
||||
ten: number;
|
||||
twenty: number;
|
||||
thirty: number;
|
||||
forty: number;
|
||||
fifty: number;
|
||||
sixty: number;
|
||||
seventy: number;
|
||||
eighty: number;
|
||||
ninety: number;
|
||||
hundred: number;
|
||||
};
|
||||
|
||||
type UptimeChartProps = {
|
||||
@ -179,25 +180,50 @@ type UptimeChartProps = {
|
||||
endMonth: number;
|
||||
};
|
||||
|
||||
const UptimeChart = ({ monthlyActivity, startMonth, endMonth }: UptimeChartProps) => {
|
||||
// Transform the data array to have multiple entries for each month
|
||||
|
||||
const updateMonthlyValues = (data:any, monthlyActivity:any) => {
|
||||
|
||||
if (!Array.isArray(monthlyActivity) || monthlyActivity.length !== 12) {
|
||||
console.error("monthlyActivity should be an array with 12 values");
|
||||
return;
|
||||
}
|
||||
const keys = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const month = data[i];
|
||||
const activity = monthlyActivity[i];
|
||||
|
||||
for (let j = 0; j < keys.length; j++) {
|
||||
if (j < activity) {
|
||||
month[keys[j]] = 1;
|
||||
} else {
|
||||
month[keys[j]] = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
const UptimeChart = ({ monthlyActivity, startMonth, endMonth }: UptimeChartProps) => {
|
||||
|
||||
const updatedData = updateMonthlyValues(data, monthlyActivity);
|
||||
console.log(updatedData)
|
||||
const filteredData = data.slice(startMonth, endMonth + 1);
|
||||
|
||||
filteredData
|
||||
return (
|
||||
<ResponsiveContainer>
|
||||
<BarChart data={filteredData} style={{ backgroundColor: '#F0F2F5' }}>
|
||||
<Bar dataKey="one" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="two" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="three" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="four" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="five" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="six" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="seven" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="eight" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="nine" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="ten" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="twenty" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="thirty" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="forty" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="fifty" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="sixty" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="seventy" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="eighty" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="ninety" barSize={10} fill="#E95460" />
|
||||
<Bar dataKey="hundred" barSize={10} fill="#E95460" />
|
||||
<XAxis dataKey="name" fontSize={'10px'} tickMargin={10} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user