stronk/LivepeerEvents
1
0
Fork 0
mirror of https://github.com/stronk-dev/LivepeerEvents.git synced 2025-07-05 02:35:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

Make score prettier

Browse Source
This commit is contained in:
Marco van Dijk 2022-04-17 01:42:15 +02:00
parent d4b69833cf
commit 6572385906
2 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -19,6 +19,7 @@
"https": "^1.0.0",
"md5": "^2.3.0",
"react": "^17.0.2",
"react-circular-progressbar": "^2.0.4",
"react-dom": "^17.0.2",
"react-indiana-drag-scroll": "^2.1.0",
"react-markdown": "^7.1.1",

36
src/components/WinnerStat.js
View File

@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react'
import Address from '../components/OrchAddressViewer';
import { Popover } from '@mantine/core';
import ScoreView from './scoreViewer';
import { CircularProgressbar } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';
const Winner = (obj) => {
const [thisScore, setThisScore] = useState(0);
@ -26,21 +28,37 @@ const Winner = (obj) => {
let scoreObj = null;
if (thisScore) {
scoreObj =
<Popover className="strokeSmollLeft" style={{ minWidth: '100px', cursor: 'pointer' }}
<Popover className="strokeSmollLeft" style={{ cursor: 'pointer', marginTop: '0.2em', marginBottom: '0.2em' }}
opened={opened}
onClose={() => setOpened(false)}
target={
<div className="strokeSmollLeft" onClick={() => setOpened((o) => !o)} >
<div className="rowAlignLeft" >
<h4>Global Score</h4>
</div>
<div className="rowAlignRight" >
<span>{(thisScore * 10).toFixed(1)}</span>
</div>
<div className="strokeSmollLeft" style={{ width: '4em', height: '4em', marginLeft: '2em' }} onClick={() => setOpened((o) => !o)} >
<CircularProgressbar value={thisScore} maxValue={1} text={`${((thisScore * 10).toFixed(1))}`}
styles={{
root: {},
path: {
stroke: `rgba(20, 153, 53, ${thisScore})`,
strokeLinecap: 'round',
transition: 'stroke-dashoffset 0.5s ease 0s',
transformOrigin: 'center center',
},
trail: {
stroke: '#d66400',
strokeLinecap: 'rounnd',
transformOrigin: 'center center',
},
text: {
fill: 'rgba(0, 0, 0, 0.875)',
fontSize: '32px',
},
background: {
fill: '#3e98c7',
},
}}/>
</div>
}
width={260}
position="bottom"
position="right"
withArrow
>
<ScoreView score={obj.stats.scores[obj.address]} />