Update token prices graph

HeliSwap · Jun 27, 2024 · 2f772ec · 2f772ec
1 parent 64c2ef0
commit 2f772ec
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 4 deletions.
diff --git 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 && (
         <p className="text-headline text-bold mt-3">
-          {formatStringToPrice(value?.toString() as string)}
+          {formatStringToPriceWithPrecision(value?.toString() as string)}
         </p>
       )}
       <div ref={chartRef} />

diff --git a/src/components/PriceLineChart.tsx 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<string>(aggregatedValue);
+  const [dateLabel, setDateLabel] = useState<string>('');
+
+  const formattedPriceData = useMemo(() => {
+    return getTransformedPriceData(chartData);
+  }, [chartData]);
+
+  return (
+    <div style={{ minHeight: '392px' }}>
+      <div className="d-flex justify-content-between align-items-start">
+        <div>
+          <p className="text-main text-gray d-flex align-items-center">
+            {INITIAL_CHART_LABELS.PRICE}{' '}
+          </p>
+          <p className="text-headline text-bold mt-3">
+            {formatStringToPriceWithPrecision(value?.toString() as string)}
+          </p>
+          {dateLabel ? (
+            <p className="text-small">{dayjs(dateLabel).format('MMM D, YYYY')}</p>
+          ) : (
+            <p className="text-small">-</p>
+          )}
+        </div>
+      </div>
+      {chartData.length !== 0 ? (
+        <ResponsiveContainer height={300}>
+          <AreaChart
+            onMouseMove={(e: any) => {
+              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('');
+            }}
+          >
+            <defs>
+              <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopOpacity={0.5} />
+                <stop offset="100%" stopOpacity={0} />
+              </linearGradient>
+            </defs>
+            <XAxis
+              dataKey="time"
+              axisLine={false}
+              tickLine={false}
+              tickFormatter={time => dayjs(time).format('D')}
+              minTickGap={10}
+              interval="preserveStart"
+            />
+            <Tooltip cursor={{ stroke: '#8884d8' }} contentStyle={{ display: 'none' }} />
+            <Area dataKey="value" type="monotone" strokeWidth={2} stroke="#E541EE" fill="#19193F" />
+          </AreaChart>
+        </ResponsiveContainer>
+      ) : (
+        <Loader />
+      )}
+    </div>
+  );
+};
+
+export default Chart;
diff --git 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
@@ -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
@@ -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 <BarChart chartData={tokenData.metrics} aggregatedValue={Number(aggregatedValue)} />;
       } else if (chartToShow === ChartToShowEnum.price) {
-        return <CandleChart chartData={tokenData.priceCandles} />;
+        const aggregatedValue = tokenData.metrics[tokenData.metrics.length - 1].price;
+        return <PriceLineChart chartData={tokenData.metrics} aggregatedValue={aggregatedValue} />;
       } else return null;
     }
   };