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

pass monthlyActivity

This commit is contained in:
Hristo Nedelkov 2023-10-04 11:16:23 +03:00
parent 3bd6a1f6f1
commit b8dd036712
2 changed files with 198 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,80 +7,11 @@ 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 data: DataItem[] = [
{
name: 'Jan',
pv: 0,
pa: 0,
},
{
name: 'Feb',
pv: 0,
pa: 0,
},
{
name: 'Mar',
pv: 0,
pa: 0,
},
{
name: 'Apr',
pv: 0,
pa: 0,
},
{
name: 'May',
pv: 0,
pa: 0,
},
{
name: 'Aug',
pv: 0,
pa: 0,
},
{
name: 'Jun',
pv: 0,
pa: 0,
},
{
name: 'Jul',
pv: 1,
pa: 0,
},
{
name: 'Sep',
pv: 0,
pa: 0,
},
{
name: 'Oct',
pv: 0,
pa: 0,
},
{
name: 'Nov',
pv: 1,
pa: 1,
},
{
name: 'Dec',
pv: 1,
pa: 1,
},
]
type DataItem = {
name?: string
pa: number
pv: number
}
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 })
const [startMonth, endMonth] = getMonthIndicesFromRange(dateRange) const [startMonth, endMonth] = getMonthIndicesFromRange(dateRange)
const filteredMonths = data.slice(startMonth, endMonth + 1)
const handleRangeSelect = ( const handleRangeSelect = (
range: DateRange | undefined, range: DateRange | undefined,
@ -165,7 +96,7 @@ const DeviceUptime = () => {
height: '100%', height: '100%',
}} }}
> >
<UptimeChart data={filteredMonths} /> <UptimeChart startMonth={startMonth} endMonth={endMonth} monthlyActivity={[0, 10, 30, 40, 50, 10, 70, 10,60, 30, 10, 0, 0]} />
</Stack> </Stack>
</XStack> </XStack>
</YStack> </YStack>

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

@ -1,26 +1,207 @@
import { BarChart, Bar, ResponsiveContainer, XAxis } from 'recharts'
const data: DataItem[] = [
{
name: 'Jan',
'ten': 1,
'twenty': 1,
'thirty': 1,
'forty': 1,
'fifty': 1,
'sixty': 1,
'seventy': 1,
'eighty': 1,
'ninety': 1,
'hundred': 1,
},
{
name: 'Feb',
'ten': 1,
'twenty': 1,
'thirty': 1,
'forty': 1,
'fifty': 1,
'sixty': 1,
'seventy': 1,
'eighty': 1,
'ninety': 1,
'hundred': 1,
},
{
name: 'Mar',
'ten': 1,
'twenty': 1,
'thirty': 1,
'forty': 1,
'fifty': 1,
'sixty': 1,
'seventy': 1,
'eighty': 1,
'ninety': 1,
'hundred': 1,
},
{
name: 'Apr',
'ten': 1,
'twenty': 1,
'thirty': 1,
'forty': 1,
'fifty': 1,
'sixty': 1,
'seventy': 1,
'eighty': 1,
'ninety': 1,
'hundred': 1,
},
{
name: 'May',
'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',
'ten': 1,
'twenty': 1,
'thirty': 1,
'forty': 1,
'fifty': 1,
'sixty': 1,
'seventy': 1,
'eighty': 1,
'ninety': 1,
'hundred': 1,
},
{
name: 'Jul',
'ten': 1,
'twenty': 1,
'thirty': 1,
'forty': 1,
'fifty': 1,
'sixty': 1,
'seventy': 1,
'eighty': 1,
'ninety': 1,
'hundred': 1,
},
{
name: 'Sep',
'ten': 1,
'twenty': 1,
'thirty': 1,
'forty': 1,
'fifty': 1,
'sixty': 1,
'seventy': 1,
'eighty': 1,
'ninety': 1,
'hundred': 1,
},
{
name: 'Oct',
'ten': 1,
'twenty': 1,
'thirty': 1,
'forty': 1,
'fifty': 1,
'sixty': 1,
'seventy': 1,
'eighty': 1,
'ninety': 1,
'hundred': 1,
},
{
name: 'Nov',
'ten': 1,
'twenty': 1,
'thirty': 1,
'forty': 1,
'fifty': 1,
'sixty': 1,
'seventy': 1,
'eighty': 1,
'ninety': 1,
'hundred': 1,
},
{
name: 'Dec',
'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 = { type DataItem = {
name?: string name: string;
pa: number ten: number;
pv: number twenty: number;
} thirty: number;
forty: number;
fifty: number;
sixty: number;
seventy: number;
eighty: number;
ninety: number;
hundred: number;
};
type UptimeChartProps = { type UptimeChartProps = {
data: DataItem[] monthlyActivity: number[];
} startMonth: number;
endMonth: number;
};
const UptimeChart = ({ monthlyActivity, startMonth, endMonth }: UptimeChartProps) => {
// Transform the data array to have multiple entries for each month
const filteredData = data.slice(startMonth, endMonth + 1);
const UptimeChart = ({ data }: UptimeChartProps) => {
return ( return (
<ResponsiveContainer> <ResponsiveContainer>
<BarChart data={data} style={{ backgroundColor: '#F0F2F5' }}> <BarChart data={filteredData} style={{ backgroundColor: '#F0F2F5' }}>
<Bar dataKey="pv" barSize={2} fill="#E95460" /> <Bar dataKey="ten" barSize={10} fill="#E95460" />
{/* @NOTE: We can add as many Bar items as we need and use them for each day of the month */} <Bar dataKey="twenty" barSize={10} fill="#E95460" />
<Bar dataKey="pa" barSize={2} fill="#E95460" /> <Bar dataKey="thirty" barSize={10} fill="#E95460" />
{data[0].name && <XAxis dataKey="name" fontSize={'10px'} tickMargin={10} />} <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> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
) );
} };
export default UptimeChart export default UptimeChart;