From 0fe36f7a55999e56f8251e31a08891a73992016f Mon Sep 17 00:00:00 2001 From: 0xoscario <0xoscario@gmail.com> Date: Wed, 2 Oct 2024 11:42:51 -0400 Subject: [PATCH 1/2] fix: update for mobile responsiveness --- src/components/AreaTimelineChart/index.tsx | 150 +++++++++++++++++++++ src/pages/DragonPage/QuickBurnChart.tsx | 30 +---- src/utils/index.ts | 77 ++++------- 3 files changed, 185 insertions(+), 72 deletions(-) create mode 100644 src/components/AreaTimelineChart/index.tsx diff --git a/src/components/AreaTimelineChart/index.tsx b/src/components/AreaTimelineChart/index.tsx new file mode 100644 index 000000000..c545b8976 --- /dev/null +++ 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; + yAxisValues?: Array; + categories?: Array; + width?: number | string; + height?: number | string; +} +const AreaTimelineChart: React.FC = ({ + 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 `
${formatDateFromTimeStamp( + data[dataPointIndex][0] / 1000, + 'HH:mm MMM DD, YYYY', + )} + ${formatCompact(series[seriesIndex][dataPointIndex])} +
`; + }, + }, + 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 ( + + + + + {yAxisValues && ( + + {yAxisValues.map((value, index) => ( +

+ {// this is to show small numbers less than 0.0001 + `${value > 0.0001 ? formatCompact(value) : formatNumber(value)}`} +

+ ))} + + )} + + ); +}; + +export default AreaTimelineChart; diff --git a/src/pages/DragonPage/QuickBurnChart.tsx b/src/pages/DragonPage/QuickBurnChart.tsx index 810c342ad..930ea38b1 100644 --- a/src/pages/DragonPage/QuickBurnChart.tsx +++ b/src/pages/DragonPage/QuickBurnChart.tsx @@ -6,19 +6,17 @@ 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 AreaTimelineChart from 'components/AreaTimelineChart'; import { getQuickBurnChartDates, 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 +51,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)); @@ -85,14 +83,7 @@ const QuickBurnChart: React.FC = () => { {chartData && chartData.globals ? formatNumber(chartData.globals.totalBurned) : '0'}{' '} - QUICK • $ - {formatNumber( - Number( - chartData && chartData.globals - ? chartData.globals.totalBurned - : 0, - ) * quickPrice, - )} + QUICK @@ -112,20 +103,13 @@ const QuickBurnChart: React.FC = () => { {isLoading ? ( ) : chartData && chartData.chartData ? ( - - Number(value.amount), - )} + value.timestamp)} - width='100%' - height={250} - categories={getQuickBurnChartDates( - chartData.chartData, - durationIndex, - )} /> ) : ( <> diff --git a/src/utils/index.ts b/src/utils/index.ts index dd36d629c..f2fb9c23b 100755 --- 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; } From 7b1ce76710d375a1c962202fe311321455c14aaf Mon Sep 17 00:00:00 2001 From: 0xoscario <0xoscario@gmail.com> Date: Wed, 2 Oct 2024 11:47:08 -0400 Subject: [PATCH 2/2] fix: add total burn amount --- src/pages/DragonPage/QuickBurnChart.tsx | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/pages/DragonPage/QuickBurnChart.tsx b/src/pages/DragonPage/QuickBurnChart.tsx index 930ea38b1..e05f0a619 100644 --- a/src/pages/DragonPage/QuickBurnChart.tsx +++ b/src/pages/DragonPage/QuickBurnChart.tsx @@ -1,23 +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 AreaTimelineChart from 'components/AreaTimelineChart'; -import { - getQuickBurnChartDates, - appendedZeroChartData, - formatNumber, -} from 'utils'; +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, ); @@ -83,7 +79,14 @@ const QuickBurnChart: React.FC = () => { {chartData && chartData.globals ? formatNumber(chartData.globals.totalBurned) : '0'}{' '} - QUICK + QUICK • $ + {formatNumber( + Number( + chartData && chartData.globals + ? chartData.globals.totalBurned + : 0, + ) * quickPrice, + )}