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;
}
};