Merge pull request #1563 from 0xoscario/update-dragons-lair-page

Update dragons lair page
QuickSwap · Oct 3, 2024 · be251a6 · be251a6
2 parents 871e35e + 7b1ce76
commit be251a6
Show file tree

Hide file tree

Showing 3 changed files with 186 additions and 70 deletions.
diff --git a/src/components/AreaTimelineChart/index.tsx b/src/components/AreaTimelineChart/index.tsx
@@ -0,0 +1,150 @@
+import React from 'react';
+import { Box } from '@material-ui/core';
+import Chart from 'react-apexcharts';
+import { useIsDarkMode } from 'state/user/hooks';
+import { formatCompact, formatDateFromTimeStamp, formatNumber } from 'utils';
+import 'components/styles/AreaChart.scss';
+
+export interface AreaChartProps {
+  strokeColor?: string;
+  backgroundColor?: string;
+  gradientColor?: string | undefined;
+  data?: Array<any>;
+  yAxisValues?: Array<number>;
+  categories?: Array<string | null>;
+  width?: number | string;
+  height?: number | string;
+}
+const AreaTimelineChart: React.FC<AreaChartProps> = ({
+  strokeColor = '#00dced',
+  backgroundColor = '#004ce6',
+  gradientColor,
+  data = [],
+  yAxisValues,
+  width = 500,
+  height = 200,
+}) => {
+  const dark = useIsDarkMode();
+  const _gradientColor = gradientColor || (dark ? '#64fbd3' : '#D4F8FB');
+  const yMax = yAxisValues
+    ? Math.max(...yAxisValues.map((val) => Number(val)))
+    : 0;
+  const yMin = yAxisValues
+    ? Math.min(...yAxisValues.map((val) => Number(val)))
+    : 0;
+
+  const series = [
+    {
+      name: 'Burn Amounts',
+      data: data as [number, number][],
+    },
+  ];
+
+  const options = {
+    chart: {
+      sparkline: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+    },
+    stroke: {
+      width: 2,
+      colors: [strokeColor],
+      curve: 'smooth' as any,
+    },
+    markers: {
+      colors: [strokeColor],
+      strokeWidth: 0,
+    },
+    fill: {
+      type: 'gradient',
+      colors: [_gradientColor],
+      gradient: {
+        gradientToColors: [backgroundColor],
+        shadeIntensity: 1,
+        opacityFrom: 0.5,
+        opacityTo: 0.15,
+        stops: [0, 100],
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    grid: {
+      show: false,
+      padding: {
+        left: 0,
+        right: 0,
+      },
+      xaxis: {
+        lines: {
+          show: false,
+        },
+      },
+    },
+    legend: {
+      show: false,
+    },
+    tooltip: {
+      enabled: true,
+      theme: dark ? 'dark' : 'light',
+      fillSeriesColor: false,
+      custom: ({ series, seriesIndex, dataPointIndex }: any) => {
+        return `<div class="areaChartTooltip"><small>${formatDateFromTimeStamp(
+          data[dataPointIndex][0] / 1000,
+          'HH:mm MMM DD, YYYY',
+        )}</small><small><b>
+        ${formatCompact(series[seriesIndex][dataPointIndex])}
+      </b></small></div>`;
+      },
+    },
+    yaxis: {
+      show: false,
+      min: yAxisValues ? yMin : undefined,
+      max: yAxisValues ? yMax : undefined,
+      tickAmount: yAxisValues?.length,
+    },
+    xaxis: {
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+      tooltip: {
+        enabled: false,
+      },
+      type: 'datetime' as const,
+    },
+  };
+  return (
+    <Box display='flex' mt={2.5} width={width}>
+      <Box className='chartContainer'>
+        <Chart
+          options={options}
+          series={series}
+          type='area'
+          width='100%'
+          height={height}
+        />
+      </Box>
+      {yAxisValues && (
+        <Box className='yAxis'>
+          {yAxisValues.map((value, index) => (
+            <p key={index}>
+              {// this is to show small numbers less than 0.0001
+              `${value > 0.0001 ? formatCompact(value) : formatNumber(value)}`}
+            </p>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default AreaTimelineChart;
diff --git a/src/pages/DragonPage/QuickBurnChart.tsx b/src/pages/DragonPage/QuickBurnChart.tsx
@@ -1,25 +1,19 @@
 import React, { useState, useMemo } from 'react';
-import { Box, duration } from '@material-ui/core';
+import { Box } from '@material-ui/core';
 import 'pages/styles/dragon.scss';
 import { GlobalConst, GlobalData } from 'constants/index';
-import { getLimitedData } from 'utils';
 import { useActiveWeb3React } from 'hooks';
 import { useQuery } from '@tanstack/react-query';
 import Skeleton from '@material-ui/lab/Skeleton';
-import { AreaChart } from 'components';
-import {
-  getQuickBurnChartDates,
-  appendedZeroChartData,
-  formatNumber,
-} from 'utils';
+import AreaTimelineChart from 'components/AreaTimelineChart';
+import { appendedZeroChartData, formatNumber } from 'utils';
 import { useUSDCPriceFromAddress } from 'utils/useUSDCPrice';
 import { DLQUICK } from 'constants/v3/addresses';
 
 const QuickBurnChart: React.FC = () => {
   const { chainId } = useActiveWeb3React();
   const quickToken = DLQUICK[chainId];
   const { price: quickPrice } = useUSDCPriceFromAddress(quickToken?.address);
-
   const [durationIndex, setDurationIndex] = useState(
     GlobalConst.quickBurnChart.ONE_DAY_CHART,
   );
@@ -53,7 +47,7 @@ const QuickBurnChart: React.FC = () => {
   const yAxisValues = useMemo(() => {
     if (chartData && chartData.chartData) {
       const amounts: number[] = chartData.chartData.map((value: any) =>
-        Number(value.amount),
+        Number(value[1]),
       );
 
       const minVolume = Math.floor(Math.min(...amounts));
@@ -112,20 +106,13 @@ const QuickBurnChart: React.FC = () => {
           {isLoading ? (
             <Skeleton variant='rect' width='100%' height={223} />
           ) : chartData && chartData.chartData ? (
-            <AreaChart
-              data={chartData.chartData.map((value: any) =>
-                Number(value.amount),
-              )}
+            <AreaTimelineChart
+              width='100%'
+              height={250}
               strokeColor={'#3e92fe'}
               gradientColor={'#448aff'}
+              data={chartData.chartData}
               yAxisValues={yAxisValues}
-              dates={chartData.chartData.map((value: any) => value.timestamp)}
-              width='100%'
-              height={250}
-              categories={getQuickBurnChartDates(
-                chartData.chartData,
-                durationIndex,
-              )}
             />
           ) : (
             <></>

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -669,66 +669,45 @@ export function getLimitedData(data: any[], count: number) {
   return newArray;
 }
 export function appendedZeroChartData(data: any[], durationIndex) {
-  let newArray: any[] = [];
+  let newArray: number[][] = [];
   const now = dayjs().unix();
+  let sum = 0;
+  data.map((value) => {
+    sum += Number(value.amount);
+    newArray.push([Number(value.timestamp * 1000), sum]);
+  });
+
   if (durationIndex === GlobalConst.quickBurnChart.ONE_DAY_CHART) {
     const minTimestamp = now - 86400;
-    const step = 3600;
-    for (let i = 0; i < 24; i++) {
-      const timestamp = minTimestamp + i * step;
-      newArray.push({ amount: '0', timestamp });
+    if (newArray.length === 0) {
+      newArray.push([minTimestamp * 1000, 0]);
+      newArray.push([now * 1000, 0]);
+    } else {
+      newArray.unshift([minTimestamp * 1000, 0]);
+      newArray.push([now * 1000, newArray[newArray.length - 1][1]]);
     }
-    data.map((value) => {
-      const index = Math.floor((Number(value.timestamp) - minTimestamp) / step);
-      newArray[index].amount = (
-        Number(newArray[index].amount) + Number(value.amount)
-      ).toString();
-    });
   } else if (durationIndex === GlobalConst.quickBurnChart.ONE_WEEK_CHART) {
     const minTimestamp = now - 86400 * 7;
-    const step = Math.floor((86400 * 7) / 21);
-    for (let i = 0; i < 21; i++) {
-      const timestamp = minTimestamp + i * step;
-      newArray.push({ amount: '0', timestamp });
+    if (newArray.length === 0) {
+      newArray.push([minTimestamp * 1000, 0]);
+      newArray.push([now * 1000, 0]);
+    } else {
+      newArray.unshift([minTimestamp * 1000, 0]);
+      newArray.push([now * 1000, newArray[newArray.length - 1][1]]);
     }
-    data.map((value) => {
-      const index = Math.floor((Number(value.timestamp) - minTimestamp) / step);
-      newArray[index].amount = (
-        Number(newArray[index].amount) + Number(value.amount)
-      ).toString();
-    });
   } else if (durationIndex === GlobalConst.quickBurnChart.ONE_MONTH_CHART) {
-    // 31
-    const minTimestamp = now - 86400 * 31;
-    const step = 86400;
-    for (let i = 0; i < 31; i++) {
-      const timestamp = minTimestamp + i * step;
-      newArray.push({ amount: '0', timestamp });
+    const minTimestamp = now - 86400 * 30;
+    if (newArray.length === 0) {
+      newArray.push([minTimestamp * 1000, 0]);
+      newArray.push([now * 1000, 0]);
+    } else {
+      newArray.unshift([minTimestamp * 1000, 0]);
+      newArray.push([now * 1000, newArray[newArray.length - 1][1]]);
     }
-    data.map((value) => {
-      const index = Math.floor((Number(value.timestamp) - minTimestamp) / step);
-      newArray[index].amount = (
-        Number(newArray[index].amount) + Number(value.amount)
-      ).toString();
-    });
   } else {
-    //ALL
-    const minTimestamp = Number(data[0].timestamp);
-    const maxTimestamp = now;
-    const step = (maxTimestamp - minTimestamp) / 31;
-    // 31
-    for (let i = 0; i < 31; i++) {
-      const timestamp = Math.floor(minTimestamp + step * i);
-      newArray.push({ amount: '0', timestamp });
-    }
-    data.map((value) => {
-      const index = Math.floor((Number(value.timestamp) - minTimestamp) / step);
-      newArray[index].amount = (
-        Number(newArray[index].amount) + Number(value.amount)
-      ).toString();
-    });
+    newArray.push([now * 1000, newArray[newArray.length - 1][1]]);
   }
-  newArray = newArray.sort((a, b) => a.timestamp - b.timestamp);
+  newArray = newArray.sort((a, b) => a[0] - b[0]);
   return newArray;
 }