blockworks-foundation
/
mango-ui-v2
mirror of https://github.com/blockworks-foundation/mango-ui-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

filter stats chart by time range

This commit is contained in:
saml33 2021-07-11 10:39:20 +10:00
parent ca6514bb38
commit cae7d92a16
1 changed files with 68 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
components/Chart.tsx
View File

@ -4,6 +4,7 @@ import useDimensions from 'react-cool-dimensions'
const Chart = ({ title, xAxis, yAxis, data, labelFormat, type }) => {
const [mouseData, setMouseData] = useState<string | null>(null)
const [filterData, setFilterData] = useState(null)
// @ts-ignore
const { observe, width, height } = useDimensions()
@ -17,40 +18,78 @@ const Chart = ({ title, xAxis, yAxis, data, labelFormat, type }) => {
setMouseData(null)
}
const handleFilterData = (time) => {
const startFrom = time
? new Date(Date.now() - time * 24 * 60 * 60 * 1000).getTime()
: null
return startFrom
? data.filter((d) => new Date(d.time).getTime() > startFrom)
: data
}
return (
<div className="h-full w-full" ref={observe}>
<div className="absolute h-full w-full pb-4">
<div className="pb-0.5 text-xs text-th-fgd-3">{title}</div>
{mouseData ? (
<>
<div className="pb-1 text-xl text-th-fgd-1">
{labelFormat(mouseData[yAxis])}
</div>
<div className="text-xs font-normal text-th-fgd-4">
{new Date(mouseData[xAxis]).toDateString()}
</div>
</>
) : data.length > 0 && data[data.length - 1][yAxis] ? (
<>
<div className="pb-1 text-xl text-th-fgd-1">
{labelFormat(data[data.length - 1][yAxis])}
</div>
<div className="text-xs font-normal text-th-fgd-4">
{new Date(data[data.length - 1][xAxis]).toDateString()}
</div>
</>
) : (
<>
<div className="animate-pulse bg-th-bkg-3 h-8 mt-1 rounded w-48" />
<div className="animate-pulse bg-th-bkg-3 h-4 mt-1 rounded w-24" />
</>
)}
<div className="h-52 w-full" ref={observe}>
<div className="flex items-start justify-between w-full">
<div>
<div className="pb-0.5 text-xs text-th-fgd-3">{title}</div>
{mouseData ? (
<>
<div className="pb-1 text-xl text-th-fgd-1">
{labelFormat(mouseData[yAxis])}
</div>
<div className="text-xs font-normal text-th-fgd-4">
{new Date(mouseData[xAxis]).toDateString()}
</div>
</>
) : data.length > 0 && data[data.length - 1][yAxis] ? (
<>
<div className="pb-1 text-xl text-th-fgd-1">
{labelFormat(data[data.length - 1][yAxis])}
</div>
<div className="text-xs font-normal text-th-fgd-4">
{new Date(data[data.length - 1][xAxis]).toDateString()}
</div>
</>
) : (
<>
<div className="animate-pulse bg-th-bkg-3 h-8 mt-1 rounded w-48" />
<div className="animate-pulse bg-th-bkg-3 h-4 mt-1 rounded w-24" />
</>
)}
</div>
<div className="flex h-5">
<button
className={`default-transition font-bold mx-3 text-th-fgd-1 text-xs hover:text-th-primary focus:outline-none ${
filterData === 7 && 'text-th-primary'
}`}
onClick={() => setFilterData(7)}
>
7D
</button>
<button
className={`default-transition font-bold mx-3 text-th-fgd-1 text-xs hover:text-th-primary focus:outline-none ${
filterData === 30 && 'text-th-primary'
}`}
onClick={() => setFilterData(30)}
>
30D
</button>
<button
className={`default-transition font-bold ml-3 text-th-fgd-1 text-xs hover:text-th-primary focus:outline-none ${
!filterData && 'text-th-primary'
}`}
onClick={() => setFilterData(null)}
>
ALL
</button>
</div>
</div>
{width > 0 && type === 'area' ? (
<AreaChart
width={width}
height={height}
data={data}
data={data ? handleFilterData(filterData) : null}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
>
@ -81,7 +120,7 @@ const Chart = ({ title, xAxis, yAxis, data, labelFormat, type }) => {
<BarChart
width={width}
height={height}
data={data}
data={data ? handleFilterData(filterData) : null}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
>