Skip to content
This repository was archived by the owner on Jul 22, 2025. It is now read-only.

Add chart controls #1544

Merged
juliangruber merged 5 commits into from
May 22, 2024
Merged

Add chart controls #1544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f8b8ba7
generate mock data
davelange May 14, 2024
61b4b06
adjust scheduled reward viz
davelange May 14, 2024
6badc72
fixes
davelange May 20, 2024
9a00de0
add filtered
davelange May 21, 2024
e9c1b3a
fix scheduled rewards gen
davelange May 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions renderer/src/pages/dashboard/Chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,12 @@ const Chart = ({ historicalRewards }: {historicalRewards: RewardsRecord[]}) => {
},
{
label: 'Scheduled rewards',
data: historicalRewards.map(record => record.totalScheduledRewards),
data: historicalRewards.map(record =>
record.totalScheduledRewards + record.totalRewardsReceived),
borderColor: '#ddd',
fill: true,
backgroundColor: '#eee'
border: false,
fill: '-1',
backgroundColor: '#ddd'
}
]
}
Expand Down
55 changes: 55 additions & 0 deletions renderer/src/pages/dashboard/ChartController.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { useMemo, useState } from 'react'
import { RewardsRecord } from 'src/hooks/StationRewards'
import Chart from './Chart'

const timeRanges = ['1d', '7d', '1m', '1y', 'all'] as const
type TimeRange = typeof timeRanges[number]

const timeRangeInDays = {
'1d': 1,
'7d': 7,
'1m': 31,
'1y': 365
}

function getDataInTimeRange (data: RewardsRecord[], timeRange: TimeRange) {
if (timeRange === 'all') {
return data
}

const currentDate = new Date()
const cutOffDate = new Date().setDate(currentDate.getDate() - timeRangeInDays[timeRange])

return data.filter(record => new Date(record.timestamp).getTime() > cutOffDate)
}

const ChartController = ({ historicalRewards }: {historicalRewards: RewardsRecord[]}) => {
const [timeRange, setTimeRange] = useState<TimeRange>('1m')

const filteredHistoricalRewards = useMemo(
() => getDataInTimeRange(historicalRewards, timeRange),
[timeRange, historicalRewards]
)

return (
<div>
<div className='flex gap-4'>
{timeRanges.map(value => (
<button
type='button'
className={
`border px-2 uppercase ${value === timeRange ? 'border-black' : 'border-grayscale-400'}`
}
key={value}
onClick={() => setTimeRange(value)}
>
{value}
</button>
))}
</div>
<Chart historicalRewards={filteredHistoricalRewards} />
</div>
)
}

export default ChartController
4 changes: 2 additions & 2 deletions renderer/src/pages/dashboard/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import useStationRewards from 'src/hooks/StationRewards'
import { formatFilValue } from 'src/lib/utils'
import Chart from 'src/pages/dashboard/Chart'
import Activity from 'src/pages/dashboard/Activity'
import ChartController from './ChartController'

const Dashboard = (): JSX.Element => {
const { historicalRewards, totalRewardsReceived, scheduledRewards } = useStationRewards()
Expand All @@ -19,7 +19,7 @@ const Dashboard = (): JSX.Element => {
<p>{formatFilValue(scheduledRewards)} FIL</p>
</div>
<div className='w-full my-4'>
<Chart historicalRewards={historicalRewards} />
<ChartController historicalRewards={historicalRewards} />
</div>
</div>
</section>
Expand Down
70 changes: 44 additions & 26 deletions renderer/src/pages/dashboard/mockData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,45 @@
export const mockData = [
{
timestamp: '2024-05-09',
totalRewardsReceived: 0.2,
totalScheduledRewards: 0.2
},
{
timestamp: '2024-05-10',
totalRewardsReceived: 0.2,
totalScheduledRewards: 0.3
},
{
timestamp: '2024-05-11',
totalRewardsReceived: 0.2,
totalScheduledRewards: 0.4
},
{
timestamp: '2024-05-12',
totalRewardsReceived: 0.2,
totalScheduledRewards: 0.5
},
{
timestamp: '2024-05-13',
totalRewardsReceived: 0.7,
totalScheduledRewards: 0.7
import { RewardsRecord } from 'src/hooks/StationRewards'

function getRandomNumber (min: number, max: number) {
return Math.random() * (max - min) + min
}

const mockData: RewardsRecord[] = []

const config = {
recordsCount: 300,
minReward: 0.05,
maxReward: 0.1,
payoutFrequency: 7
}

const currentDate = new Date()
const date = new Date(new Date().setDate(currentDate.getDate() - (config.recordsCount - 1)))

let rewardsAccumulatedInWindow = 0

for (let index = 0; index < config.recordsCount; index++) {
const prevRecord = mockData.at(-1)
const timestamp = date.toISOString()
const amount = getRandomNumber(config.minReward, config.maxReward)
rewardsAccumulatedInWindow += amount

if (index % config.payoutFrequency === 0) {
mockData.push({
timestamp,
totalRewardsReceived: (prevRecord?.totalRewardsReceived || 0) + rewardsAccumulatedInWindow,
totalScheduledRewards: 0
})
rewardsAccumulatedInWindow = 0
} else {
mockData.push({
timestamp,
totalRewardsReceived: prevRecord?.totalRewardsReceived || 0,
totalScheduledRewards: (prevRecord?.totalScheduledRewards || 0) + amount
})
}
]

date.setDate(date.getDate() + 1)
}

export { mockData }