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

format

This commit is contained in:
Hristo Nedelkov 2023-10-06 11:14:09 +03:00
parent b364d77b02
commit d9115e2a81
5 changed files with 176 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx
View File

@ -4,10 +4,8 @@ import { Stack, XStack, YStack } from 'tamagui'
import UptimeChart from '../UptimeChart/UptimeChart' import UptimeChart from '../UptimeChart/UptimeChart'
import Icon from '../../../components/General/Icon' import Icon from '../../../components/General/Icon'
const ConsensusUptimeCard = () => { const ConsensusUptimeCard = () => {
const monthlyActivity = [3,0,5,4,6,7,8,9,10,1,2,3] const monthlyActivity = [3, 0, 5, 4, 6, 7, 8, 9, 10, 1, 2, 3]
return ( return (
<Shadow <Shadow
variant="$2" variant="$2"
@ -41,7 +39,12 @@ const ConsensusUptimeCard = () => {
height: '100%', height: '100%',
}} }}
> >
<UptimeChart monthlyActivity={monthlyActivity} startMonth={0} endMonth={1} withLabels={false}/> <UptimeChart
monthlyActivity={monthlyActivity}
startMonth={0}
endMonth={1}
withLabels={false}
/>
</Stack> </Stack>
</XStack> </XStack>
</YStack> </YStack>

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

@ -7,7 +7,6 @@ import UptimeChart from '../UptimeChart/UptimeChart'
import Icon from '../../../components/General/Icon' import Icon from '../../../components/General/Icon'
import { getMonthIndicesFromRange } from '../../../utilities' import { getMonthIndicesFromRange } from '../../../utilities'
const DeviceUptime = () => { const DeviceUptime = () => {
const [isCalendarVisible, setIsCalendarVisible] = useState(false) const [isCalendarVisible, setIsCalendarVisible] = useState(false)
const [dateRange, setDateRange] = useState<DateRange>({ from: undefined, to: undefined }) const [dateRange, setDateRange] = useState<DateRange>({ from: undefined, to: undefined })
@ -96,7 +95,12 @@ const DeviceUptime = () => {
height: '100%', height: '100%',
}} }}
> >
<UptimeChart startMonth={startMonth} endMonth={endMonth} monthlyActivity={[10, 1, 3, 4, 5, 1, 7, 1,6, 3, 1, 9]} withLabels={true}/> <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>

12
src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx
View File

@ -3,10 +3,9 @@ import { Stack, XStack, YStack } from 'tamagui'
import Icon from '../../../components/General/Icon' import Icon from '../../../components/General/Icon'
import UptimeChart from '../UptimeChart/UptimeChart' import UptimeChart from '../UptimeChart/UptimeChart'
const ExecutionUptime = () => { const ExecutionUptime = () => {
const monthlyActivity = [3,0,5,4,6,7,0,9,10,1,2,3] const monthlyActivity = [3, 0, 5, 4, 6, 7, 0, 9, 10, 1, 2, 3]
return ( return (
<Shadow <Shadow
variant="$2" variant="$2"
@ -40,7 +39,12 @@ const ExecutionUptime = () => {
height: '100%', height: '100%',
}} }}
> >
<UptimeChart monthlyActivity={monthlyActivity} startMonth={0} endMonth={8} withLabels={false} /> <UptimeChart
monthlyActivity={monthlyActivity}
startMonth={0}
endMonth={8}
withLabels={false}
/>
</Stack> </Stack>
</XStack> </XStack>
</YStack> </YStack>

6
src/pages/Dashboard/UptimeChart/UptimeChart.stories.tsx
View File

@ -23,7 +23,9 @@ type Story = StoryObj<typeof meta>
export const WithMonths: Story = { export const WithMonths: Story = {
args: { args: {
monthlyActivity: [3, 2, 5, 4, 6, 7, 8, 0, 10, 0, 0, 3],
monthlyActivity:[3, 2, 5, 4, 6, 7, 8, 0, 10, 0, 0, 3], startMonth: 0, endMonth: 12, withLabels: true startMonth: 0,
endMonth: 12,
withLabels: true,
}, },
} }

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

@ -1,214 +1,213 @@
import { BarChart, Bar, ResponsiveContainer, XAxis } from 'recharts'; import { BarChart, Bar, ResponsiveContainer, XAxis } from 'recharts'
const data: DataItem[] = [ const data: DataItem[] = [
{ {
name: 'Jan', name: 'Jan',
'one': 1, one: 1,
'two': 1, two: 1,
'three': 1, three: 1,
'four': 1, four: 1,
'five': 1, five: 1,
'six': 1, six: 1,
'seven': 1, seven: 1,
'eight': 1, eight: 1,
'nine': 1, nine: 1,
'ten': 1, ten: 1,
}, },
{ {
name: 'Feb', name: 'Feb',
'one': 1, one: 1,
'two': 1, two: 1,
'three': 1, three: 1,
'four': 1, four: 1,
'five': 1, five: 1,
'six': 1, six: 1,
'seven': 1, seven: 1,
'eight': 1, eight: 1,
'nine': 1, nine: 1,
'ten': 1, ten: 1,
}, },
{ {
name: 'Mar', name: 'Mar',
'one': 1, one: 1,
'two': 1, two: 1,
'three': 1, three: 1,
'four': 1, four: 1,
'five': 1, five: 1,
'six': 1, six: 1,
'seven': 1, seven: 1,
'eight': 1, eight: 1,
'nine': 1, nine: 1,
'ten': 1, ten: 1,
}, },
{ {
name: 'Apr', name: 'Apr',
'one': 1, one: 1,
'two': 1, two: 1,
'three': 1, three: 1,
'four': 1, four: 1,
'five': 1, five: 1,
'six': 1, six: 1,
'seven': 1, seven: 1,
'eight': 1, eight: 1,
'nine': 1, nine: 1,
'ten': 1, ten: 1,
}, },
{ {
name: 'May', name: 'May',
'one': 1, one: 1,
'two': 1, two: 1,
'three': 1, three: 1,
'four': 1, four: 1,
'five': 1, five: 1,
'six': 1, six: 1,
'seven': 1, seven: 1,
'eight': 1, eight: 1,
'nine': 1, nine: 1,
'ten': 1, ten: 1,
}, },
{ {
name: 'Jun', name: 'Jun',
'one': 1, one: 1,
'two': 1, two: 1,
'three': 1, three: 1,
'four': 1, four: 1,
'five': 1, five: 1,
'six': 1, six: 1,
'seven': 1, seven: 1,
'eight': 1, eight: 1,
'nine': 1, nine: 1,
'ten': 1, ten: 1,
}, },
{ {
name: 'Jul', name: 'Jul',
'one': 1, one: 1,
'two': 1, two: 1,
'three': 1, three: 1,
'four': 1, four: 1,
'five': 1, five: 1,
'six': 1, six: 1,
'seven': 1, seven: 1,
'eight': 1, eight: 1,
'nine': 1, nine: 1,
'ten': 1, ten: 1,
}, },
{ {
name: 'Aug', name: 'Aug',
'one': 1, one: 1,
'two': 1, two: 1,
'three': 1, three: 1,
'four': 1, four: 1,
'five': 1, five: 1,
'six': 1, six: 1,
'seven': 1, seven: 1,
'eight': 1, eight: 1,
'nine': 1, nine: 1,
'ten': 1, ten: 1,
}, },
{ {
name: 'Sep', name: 'Sep',
'one': 1, one: 1,
'two': 1, two: 1,
'three': 1, three: 1,
'four': 1, four: 1,
'five': 1, five: 1,
'six': 1, six: 1,
'seven': 1, seven: 1,
'eight': 1, eight: 1,
'nine': 1, nine: 1,
'ten': 1, ten: 1,
}, },
{ {
name: 'Oct', name: 'Oct',
'one': 1, one: 1,
'two': 1, two: 1,
'three': 1, three: 1,
'four': 1, four: 1,
'five': 1, five: 1,
'six': 1, six: 1,
'seven': 1, seven: 1,
'eight': 1, eight: 1,
'nine': 1, nine: 1,
'ten': 1, ten: 1,
}, },
{ {
name: 'Nov', name: 'Nov',
'one': 1, one: 1,
'two': 1, two: 1,
'three': 1, three: 1,
'four': 1, four: 1,
'five': 1, five: 1,
'six': 1, six: 1,
'seven': 1, seven: 1,
'eight': 1, eight: 1,
'nine': 1, nine: 1,
'ten': 1, ten: 1,
}, },
{ {
name: 'Dec', name: 'Dec',
'one': 0, one: 0,
'two': 0, two: 0,
'three': 0, three: 0,
'four': 0, four: 0,
'five': 0, five: 0,
'six': 0, six: 0,
'seven': 0, seven: 0,
'eight': 0, eight: 0,
'nine': 0, nine: 0,
'ten': 0, ten: 0,
}, },
] ]
type DataItem = { type DataItem = {
name: string; name: string
one: number; one: number
two: number; two: number
three: number; three: number
four: number; four: number
five: number; five: number
six: number; six: number
seven: number; seven: number
eight: number; eight: number
nine: number; nine: number
ten: number; ten: number
}; }
type UptimeChartProps = { type UptimeChartProps = {
monthlyActivity: number[]; monthlyActivity: number[]
startMonth: number; startMonth: number
endMonth: number; endMonth: number
withLabels: boolean; withLabels: boolean
}; }
const updateMonthlyValues = (data: any, monthlyActivity: any) => { const updateMonthlyValues = (data: any, monthlyActivity: any) => {
if (!Array.isArray(monthlyActivity) || monthlyActivity.length !== 12) { if (!Array.isArray(monthlyActivity) || monthlyActivity.length !== 12) {
console.error("monthlyActivity should be an array with 12 values"); console.error('monthlyActivity should be an array with 12 values')
return; return
} }
const keys = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten']; const keys = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten']
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
const month = data[i]; const month = data[i]
const activity = monthlyActivity[i]; const activity = monthlyActivity[i]
for (let j = 0; j < keys.length; j++) { for (let j = 0; j < keys.length; j++) {
if (j < activity) { if (j < activity) {
month[keys[j]] = 1; month[keys[j]] = 1
} else { } else {
month[keys[j]] = 0; month[keys[j]] = 0
} }
} }
} }
return data; return data
} }
const UptimeChart = ({ monthlyActivity, startMonth, endMonth, withLabels }: UptimeChartProps) => { const UptimeChart = ({ monthlyActivity, startMonth, endMonth, withLabels }: UptimeChartProps) => {
const updatedData = updateMonthlyValues(data, monthlyActivity)
const updatedData = updateMonthlyValues(data, monthlyActivity);
console.log(updatedData) console.log(updatedData)
const filteredData = data.slice(startMonth, endMonth + 1); const filteredData = data.slice(startMonth, endMonth + 1)
filteredData filteredData
return ( return (
@ -227,7 +226,7 @@ const UptimeChart = ({ monthlyActivity, startMonth, endMonth, withLabels }: Upti
{withLabels && <XAxis dataKey="name" fontSize={'10px'} tickMargin={10} />} {withLabels && <XAxis dataKey="name" fontSize={'10px'} tickMargin={10} />}
</BarChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
); )
}; }
export default UptimeChart; export default UptimeChart