show high/low on trade chart
This commit is contained in:
parent
dd4a6d4aed
commit
c3fa10f26f
|
@ -171,7 +171,7 @@ const MenuItem = ({
|
||||||
return (
|
return (
|
||||||
<Link href={pagePath} shallow={true}>
|
<Link href={pagePath} shallow={true}>
|
||||||
<a
|
<a
|
||||||
className={`default-transition flex cursor-pointer px-4 md:hover:text-th-primary ${
|
className={`default-transition flex cursor-pointer px-4 focus:text-th-primary focus:outline-none md:hover:text-th-primary ${
|
||||||
active ? 'text-th-primary' : 'text-th-fgd-1'
|
active ? 'text-th-primary' : 'text-th-fgd-1'
|
||||||
} ${hideIconBg ? 'py-1' : 'py-2'}`}
|
} ${hideIconBg ? 'py-1' : 'py-2'}`}
|
||||||
>
|
>
|
||||||
|
|
|
@ -1,4 +1,10 @@
|
||||||
import { FunctionComponent, useCallback, useEffect, useState } from 'react'
|
import {
|
||||||
|
FunctionComponent,
|
||||||
|
useCallback,
|
||||||
|
useEffect,
|
||||||
|
useMemo,
|
||||||
|
useState,
|
||||||
|
} from 'react'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||||
import {
|
import {
|
||||||
|
@ -18,7 +24,6 @@ import { formatFixedDecimals } from '../../utils/numbers'
|
||||||
import SheenLoader from '../shared/SheenLoader'
|
import SheenLoader from '../shared/SheenLoader'
|
||||||
import { COLORS } from '../../styles/colors'
|
import { COLORS } from '../../styles/colors'
|
||||||
import { useTheme } from 'next-themes'
|
import { useTheme } from 'next-themes'
|
||||||
import { SwitchHorizontalIcon } from '@heroicons/react/solid'
|
|
||||||
|
|
||||||
dayjs.extend(relativeTime)
|
dayjs.extend(relativeTime)
|
||||||
|
|
||||||
|
@ -89,6 +94,32 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
||||||
const [daysToShow, setDaysToShow] = useState(1)
|
const [daysToShow, setDaysToShow] = useState(1)
|
||||||
const { theme } = useTheme()
|
const { theme } = useTheme()
|
||||||
|
|
||||||
|
const [min, max] = useMemo(() => {
|
||||||
|
if (chartData.length) {
|
||||||
|
const prices = chartData.map((d: any) => d.price)
|
||||||
|
return [Math.min(...prices), Math.max(...prices)]
|
||||||
|
}
|
||||||
|
return ['', '']
|
||||||
|
}, [chartData])
|
||||||
|
|
||||||
|
const CustomizedLabel = (props: any) => {
|
||||||
|
const { x, y, value } = props
|
||||||
|
if (value === min || value === max) {
|
||||||
|
return (
|
||||||
|
<text
|
||||||
|
x={x}
|
||||||
|
y={y}
|
||||||
|
dy={value === min ? 16 : -8}
|
||||||
|
fill={theme === 'Light' ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.8)'}
|
||||||
|
fontSize={10}
|
||||||
|
textAnchor="middle"
|
||||||
|
>
|
||||||
|
{value}
|
||||||
|
</text>
|
||||||
|
)
|
||||||
|
} else return <div />
|
||||||
|
}
|
||||||
|
|
||||||
const handleMouseMove = (coords: any) => {
|
const handleMouseMove = (coords: any) => {
|
||||||
if (coords.activePayload) {
|
if (coords.activePayload) {
|
||||||
setMouseData(coords.activePayload[0].payload)
|
setMouseData(coords.activePayload[0].payload)
|
||||||
|
@ -363,6 +394,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
||||||
}
|
}
|
||||||
strokeWidth={1.5}
|
strokeWidth={1.5}
|
||||||
fill="url(#gradientArea)"
|
fill="url(#gradientArea)"
|
||||||
|
label={<CustomizedLabel />}
|
||||||
/>
|
/>
|
||||||
<XAxis
|
<XAxis
|
||||||
dataKey="time"
|
dataKey="time"
|
||||||
|
|
Loading…
Reference in New Issue