Skip to content

Commit

Permalink
feat(ui): sidebar charts
Browse files Browse the repository at this point in the history
  • Loading branch information
@NovaT82
NovaT82 committed Aug 14, 2024
1 parent d05b636 commit 9f5ae80
Show file tree
Hide file tree
Showing 7 changed files with 406 additions and 140 deletions.
52 changes: 50 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"@emotion/styled": "^11.13.0",
"@mui/material": "^5.16.7",
"@tauri-apps/api": "^1",
"echarts-for-react": "^3.0.2",
"globals": "^15.9.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
2 changes: 0 additions & 2 deletions src/containers/SideBar/Miner/Miner.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import Tile from './components/Tile.tsx';
import { MinerContainer, TileContainer } from './styles.ts';
import AutoMiner from './components/AutoMiner.tsx';
import Scheduler from './components/Scheduler.tsx';
import ModeSelect from './components/ModeSelect.tsx';
import { useAppStatusStore } from '../../../store/useAppStatusStore.ts';

Expand Down Expand Up @@ -36,7 +35,6 @@ function Miner() {
return (
<MinerContainer>
<AutoMiner />
<Scheduler />
<TileContainer>
<Tile title="Resources" stats="CPU" />
<ModeSelect />
Expand Down
21 changes: 12 additions & 9 deletions src/containers/SideBar/SideBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,35 @@ import Miner from './Miner/Miner';
import Wallet from './components/Wallet';
import Heading from './components/Heading';
import Milestones from './components/Milestone';
import MinerUptimeChart from './components/MinerUptimeChart.tsx';
import HashRateChart from './components/HashRateChart.tsx';
import {
SideBarContainer,
SideBarInner,
HeadingContainer,
BottomContainer,
} from './styles';
import TestButtons from './TestButtons';
import {useTheme} from '@mui/material/styles';

import {useUIStore} from '../../store/useUIStore.ts';
import { useTheme } from '@mui/material/styles';
import { useUIStore } from '../../store/useUIStore.ts';
import { Divider } from '@mui/material';

function SideBar() {
const theme = useTheme();
const sidebarOpen = useUIStore((state) => state.sidebarOpen);
return (
<SideBarContainer theme={theme} sidebaropen={sidebarOpen}>
<HeadingContainer>
<Heading/>
<Heading />
</HeadingContainer>
<SideBarInner>
<Miner/>
<Milestones/>
{/*<TestButtons />*/}
<Miner />
<MinerUptimeChart />
<Divider />
<HashRateChart />
</SideBarInner>
<BottomContainer>
<Wallet/>
<Milestones />
<Wallet />
</BottomContainer>
</SideBarContainer>
);
Expand Down
108 changes: 108 additions & 0 deletions src/containers/SideBar/components/HashRateChart.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import ReactECharts from 'echarts-for-react';
import { useTheme } from '@mui/material/styles';
import { Typography, Stack } from '@mui/material';

interface TooltipParams {
dataIndex: number;
}

function formatHash(number: number) {
const suffixes = ['', 'K', 'M', 'G', 'T', 'P'];
let suffixIndex = 0;
while (number >= 1000 && suffixIndex < suffixes.length - 1) {
number /= 1000;
suffixIndex++;
}
return number.toFixed(1) + ' ' + suffixes[suffixIndex] + 'H';
}

const HashRateChartGannt = () => {
const theme = useTheme();
const chartHeight = 150;

const data = [
{ hashRate: 2725148000, blockNo: 8703 },
{ hashRate: 2425148500, blockNo: 8704 },
{ hashRate: 2325149000, blockNo: 8705 },
{ hashRate: 2725149500, blockNo: 8706 },
{ hashRate: 2625150000, blockNo: 8707 },
{ hashRate: 2825150500, blockNo: 8708 },
{ hashRate: 2725151000, blockNo: 8709 },
{ hashRate: 2325151500, blockNo: 8710 },
{ hashRate: 2425152000, blockNo: 8711 },
{ hashRate: 2925152500, blockNo: 8712 },
{ hashRate: 2925153000, blockNo: 8713 },
{ hashRate: 3325153500, blockNo: 8714 },
{ hashRate: 3625154000, blockNo: 8715 },
{ hashRate: 3225154500, blockNo: 8716 },
{ hashRate: 3425155000, blockNo: 8717 },
{ hashRate: 3325155500, blockNo: 8718 },
{ hashRate: 2725156000, blockNo: 8719 },
{ hashRate: 3025156500, blockNo: 8720 },
{ hashRate: 3125157000, blockNo: 8721 },
];

const option = {
height: chartHeight,
tooltip: {
trigger: 'axis',
formatter: (params: TooltipParams[]) => {
const { hashRate, blockNo } = data[params[0].dataIndex];
return `<strong>${formatHash(hashRate)}</strong> at <br />block <strong>${blockNo}</strong>`;
},
},
xAxis: {
type: 'category',
data: data?.map((item) => item.blockNo),
axisLabel: {
show: false,
},
},
yAxis: {
type: 'value',
axisLabel: {
formatter: formatHash,
},
},
grid: {
left: '0',
right: '0',
bottom: '20',
top: '10',
containLabel: true,
},
series: [
{
name: 'Hash Rate',
type: 'line',
data: data?.map((item) => item.hashRate),
smooth: false,
itemStyle: {
color: '#F3B927',
},
},
],
};

return (
<Stack direction="column" spacing={0.5}>
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2">Network Hash Rate</Typography>
<Typography variant="body2">
<span
style={{
color: theme.palette.text.primary,
fontFamily: 'PoppinsSemiBold',
}}
>
2M
</span>{' '}
AVG block time
</Typography>
</Stack>
<ReactECharts style={{ height: chartHeight }} option={option} />
</Stack>
);
};

export default HashRateChartGannt;
106 changes: 106 additions & 0 deletions src/containers/SideBar/components/MinerUptimeChart.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import React from 'react';
import ReactECharts from 'echarts-for-react';
import { useTheme } from '@mui/material/styles';
import { Typography, Stack } from '@mui/material';

const MinerUptimeChart: React.FC = () => {
const theme = useTheme();
const chartHeight = 25;

const uptime = [
{ status: 'on', time: '00:00:00' },
{ status: 'off', time: '01:00:00' },
{ status: 'off', time: '02:00:00' },
{ status: 'on', time: '03:00:00' },
{ status: 'on', time: '04:00:00' },
{ status: 'off', time: '05:00:00' },
{ status: 'on', time: '06:00:00' },
{ status: 'on', time: '07:00:00' },
{ status: 'on', time: '08:00:00' },
{ status: 'off', time: '09:00:00' },
{ status: 'on', time: '10:00:00' },
{ status: 'off', time: '11:00:00' },
{ status: 'on', time: '12:00:00' },
{ status: 'on', time: '13:00:00' },
{ status: 'on', time: '14:00:00' },
{ status: 'off', time: '15:00:00' },
{ status: 'on', time: '16:00:00' },
{ status: 'off', time: '17:00:00' },
{ status: 'on', time: '18:00:00' },
{ status: 'on', time: '19:00:00' },
{ status: 'off', time: '20:00:00' },
{ status: 'off', time: '21:00:00' },
{ status: 'on', time: '22:00:00' },
{ status: 'off', time: '23:00:00' },
];

const data = uptime.map(({ status }) => ({
value: 1,
itemStyle: {
color:
status === 'on'
? theme.palette.success.main
: theme.palette.divider,
},
}));

const option = {
height: chartHeight,
xAxis: {
type: 'category',
data: uptime.map((_, index) => index + 1),
show: false,
},
yAxis: {
type: 'value',
min: 0,
max: 1,
show: false,
},
series: [
{
data: data,
type: 'bar',
itemStyle: {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
color: (params: any) =>
params.value === 'on'
? theme.palette.success.main
: theme.palette.divider,
borderRadius: 3,
},
},
],
grid: {
left: '0',
right: '0',
bottom: '0',
top: '0',
containLabel: false,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
// eslint-disable-next-line @typescript-eslint/no-explicit-any
formatter: (params: any) => {
const { status, time } = uptime[params[0].dataIndex];
const color =
status === 'on'
? theme.palette.success.main
: theme.palette.divider;
return `<span style="color: ${color};">&#9679;</span> <strong>${status === 'on' ? 'Online' : 'Offline'}</strong> <br />at ${time}`;
},
},
};

return (
<Stack direction="column" spacing={0.5}>
<Typography variant="body2">24h Miner Uptime</Typography>
<ReactECharts style={{ height: chartHeight }} option={option} />
</Stack>
);
};

export default MinerUptimeChart;
Loading

0 comments on commit 9f5ae80

Please sign in to comment.