diff --git a/src/components/CandleChart.tsx b/src/components/CandleChart.tsx index 06dae8d1..7139f095 100644 --- a/src/components/CandleChart.tsx +++ b/src/components/CandleChart.tsx @@ -6,7 +6,7 @@ import utc from 'dayjs/plugin/utc'; import { ITokenCandleData } from '../interfaces/common'; import { getTransformedCandleData } from '../utils/metricsUtils'; -import { formatStringToPrice } from '../utils/numberUtils'; +import { formatStringToPriceWithPrecision } from '../utils/numberUtils'; dayjs.extend(utc); @@ -159,7 +159,7 @@ const CandleChart = ({ chartData }: LineChartProps) => { )} {value && (

- {formatStringToPrice(value?.toString() as string)} + {formatStringToPriceWithPrecision(value?.toString() as string)}

)}
diff --git a/src/components/PriceLineChart.tsx b/src/components/PriceLineChart.tsx new file mode 100644 index 00000000..dcde99b7 --- /dev/null +++ b/src/components/PriceLineChart.tsx @@ -0,0 +1,96 @@ +import { useMemo, useState } from 'react'; +import { XAxis, AreaChart, Area, Tooltip, ResponsiveContainer } from 'recharts'; + +import dayjs from 'dayjs'; + +import { IHistoricalData } from '../interfaces/common'; + +import Loader from './Loader'; + +import { formatStringToPriceWithPrecision } from '../utils/numberUtils'; +import { getTransformedPriceData } from '../utils/metricsUtils'; + +import { INITIAL_CHART_LABELS } from '../constants'; + +interface ILineChartProps { + chartData: IHistoricalData[]; + aggregatedValue: string; +} + +const Chart = ({ chartData, aggregatedValue }: ILineChartProps) => { + const [value, setValue] = useState(aggregatedValue); + const [dateLabel, setDateLabel] = useState(''); + + const formattedPriceData = useMemo(() => { + return getTransformedPriceData(chartData); + }, [chartData]); + + return ( +
+
+
+

+ {INITIAL_CHART_LABELS.PRICE}{' '} +

+

+ {formatStringToPriceWithPrecision(value?.toString() as string)} +

+ {dateLabel ? ( +

{dayjs(dateLabel).format('MMM D, YYYY')}

+ ) : ( +

-

+ )} +
+
+ {chartData.length !== 0 ? ( + + { + if (e && e.activePayload) { + const { time: currTime, value: currValue } = e.activePayload[0]?.payload; + if (currTime !== dateLabel || value !== currValue) { + setValue(currValue); + setDateLabel(currTime); + } + } + }} + width={500} + height={300} + data={formattedPriceData} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5, + }} + onMouseLeave={() => { + setValue(aggregatedValue); + setDateLabel(''); + }} + > + + + + + + + dayjs(time).format('D')} + minTickGap={10} + interval="preserveStart" + /> + + + + + ) : ( + + )} +
+ ); +}; + +export default Chart; diff --git a/src/constants/index.ts b/src/constants/index.ts index ee54be31..a014bac5 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -127,6 +127,7 @@ export const TOKENS_PER_PAGE = 10; export enum INITIAL_CHART_LABELS { TVL_LINE_CHART = 'TVL', VOLUME_BAR_CHART = 'Volume 24H', + PRICE = 'Price', } export enum CHART_DATA { diff --git a/src/interfaces/common.ts b/src/interfaces/common.ts index 50a57947..c8e98107 100644 --- a/src/interfaces/common.ts +++ b/src/interfaces/common.ts @@ -51,6 +51,7 @@ export interface IHistoricalData { tvl: string; time: string; volume: string; + price: string; } export interface ITokenHistoricalData { diff --git a/src/pages/AnalyticsTokenDetails.tsx b/src/pages/AnalyticsTokenDetails.tsx index 0e9d2703..4bedab22 100644 --- a/src/pages/AnalyticsTokenDetails.tsx +++ b/src/pages/AnalyticsTokenDetails.tsx @@ -7,7 +7,7 @@ import Loader from '../components/Loader'; import { viewTitleMapping } from './Analytics'; import Icon from '../components/Icon'; import LineChart from '../components/LineChart'; -import CandleChart from '../components/CandleChart'; +import PriceLineChart from '../components/PriceLineChart'; import BarChart from '../components/BarChart'; import Button from '../components/Button'; @@ -62,7 +62,8 @@ const AnalyticsTokenDetials = () => { const aggregatedValue = tokenData.metrics[tokenData.metrics.length - 1].volume; return ; } else if (chartToShow === ChartToShowEnum.price) { - return ; + const aggregatedValue = tokenData.metrics[tokenData.metrics.length - 1].price; + return ; } else return null; } };