From 51916683ac9369c06d87998c22243991487b8e8d Mon Sep 17 00:00:00 2001 From: Linkie Link Date: Fri, 24 Nov 2023 10:32:54 +0100 Subject: [PATCH] feat: added ChartLoading component --- src/components/Chart.tsx | 119 --------------------- src/components/Chart/ChartBody.tsx | 117 ++++++++++++++++++++ src/components/Chart/ChartLoading.tsx | 93 ++++++++++++++++ src/components/Chart/index.tsx | 16 +++ src/components/Stats/StatsTrading.tsx | 68 ++++++------ src/styles/globals.css | 6 ++ src/types/interfaces/components/Chart.d.ts | 3 + src/utils/math.ts | 2 +- src/utils/messages.ts | 2 +- 9 files changed, 275 insertions(+), 151 deletions(-) delete mode 100644 src/components/Chart.tsx create mode 100644 src/components/Chart/ChartBody.tsx create mode 100644 src/components/Chart/ChartLoading.tsx create mode 100644 src/components/Chart/index.tsx create mode 100644 src/types/interfaces/components/Chart.d.ts diff --git a/src/components/Chart.tsx b/src/components/Chart.tsx deleted file mode 100644 index 66a55c9a..00000000 --- a/src/components/Chart.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import classNames from 'classnames' -import moment from 'moment' -import { - Area, - AreaChart, - CartesianGrid, - ResponsiveContainer, - Tooltip, - XAxis, - YAxis, -} from 'recharts' - -import Card from 'components/Card' -import Text from 'components/Text' -import { DEFAULT_SETTINGS } from 'constants/defaultSettings' -import { LocalStorageKeys } from 'constants/localStorageKeys' -import useLocalStorage from 'hooks/useLocalStorage' -import { formatValue } from 'utils/formatters' - -interface Props { - data: { date: string; value: number }[] - title: string -} - -export default function Chart(props: Props) { - const [reduceMotion] = useLocalStorage( - LocalStorageKeys.REDUCE_MOTION, - DEFAULT_SETTINGS.reduceMotion, - ) - - return ( - -
- - - - - - - - - - { - return moment(value).format('DD MMM') - }} - padding={{ left: 10, right: 20 }} - axisLine={false} - tickLine={false} - fontSize={12} - dataKey='date' - dy={10} - /> - { - return formatValue(value, { - minDecimals: 0, - maxDecimals: 0, - prefix: '$', - abbreviated: true, - }) - }} - /> - { - if (payload && payload.length) { - const value = Number(payload[0].value) ?? 0 - return ( -
- - {moment(label).format('DD MMM YYYY')} - - - {formatValue(value, { minDecimals: 0, maxDecimals: 0, prefix: '$' })} - -
- ) - } - }} - /> - - - -
- - ) -} diff --git a/src/components/Chart/ChartBody.tsx b/src/components/Chart/ChartBody.tsx new file mode 100644 index 00000000..c2d91647 --- /dev/null +++ b/src/components/Chart/ChartBody.tsx @@ -0,0 +1,117 @@ +import classNames from 'classnames' +import moment from 'moment' +import { + Area, + AreaChart, + CartesianGrid, + ResponsiveContainer, + Tooltip, + XAxis, + YAxis, +} from 'recharts' + +import Text from 'components/Text' +import { DEFAULT_SETTINGS } from 'constants/defaultSettings' +import { LocalStorageKeys } from 'constants/localStorageKeys' +import useLocalStorage from 'hooks/useLocalStorage' +import { formatValue } from 'utils/formatters' + +interface Props { + data: ChartData + height?: number +} + +export default function ChartBody(props: Props) { + const [reduceMotion] = useLocalStorage( + LocalStorageKeys.REDUCE_MOTION, + DEFAULT_SETTINGS.reduceMotion, + ) + const height = props.height ?? 400 + + return ( +
+ + + + + + + + + + { + return moment(value).format('DD MMM') + }} + padding={{ left: 10, right: 20 }} + axisLine={false} + tickLine={false} + fontSize={12} + dataKey='date' + dy={10} + /> + { + return formatValue(value, { + minDecimals: 0, + maxDecimals: 0, + prefix: '$', + abbreviated: true, + }) + }} + /> + { + if (payload && payload.length) { + const value = Number(payload[0].value) ?? 0 + return ( +
+ + {moment(label).format('DD MMM YYYY')} + + + {formatValue(value, { minDecimals: 0, maxDecimals: 0, prefix: '$' })} + +
+ ) + } + }} + /> + + + +
+ ) +} diff --git a/src/components/Chart/ChartLoading.tsx b/src/components/Chart/ChartLoading.tsx new file mode 100644 index 00000000..5748a729 --- /dev/null +++ b/src/components/Chart/ChartLoading.tsx @@ -0,0 +1,93 @@ +import moment from 'moment' +import { Area, AreaChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from 'recharts' +import classNames from 'classnames' + +import { DEFAULT_SETTINGS } from 'constants/defaultSettings' +import { LocalStorageKeys } from 'constants/localStorageKeys' +import useLocalStorage from 'hooks/useLocalStorage' + +interface Props { + height?: number +} + +function createLoadingData() { + const data = [] + const dataValues = [0, 20, 40, 30, 60, 50, 100] + const startDate = moment().subtract(7, 'days') + const endDate = moment() + const days = endDate.diff(startDate, 'days') + for (let i = 0; i < days; i++) { + const date = moment(startDate).add(i, 'days') + data.push({ + date: date.format('YYYY-MM-DD'), + value: dataValues[i], + }) + } + return data +} + +export default function Chart(props: Props) { + const [reduceMotion] = useLocalStorage( + LocalStorageKeys.REDUCE_MOTION, + DEFAULT_SETTINGS.reduceMotion, + ) + const height = props.height ?? 400 + const loadingData = createLoadingData() + + return ( +
+ + + + + + + + + + { + return '...' + }} + padding={{ left: 10, right: 20 }} + axisLine={false} + tickLine={false} + fontSize={12} + dataKey='date' + dy={10} + /> + { + return '...' + }} + /> + + + +
+ ) +} diff --git a/src/components/Chart/index.tsx b/src/components/Chart/index.tsx new file mode 100644 index 00000000..74999058 --- /dev/null +++ b/src/components/Chart/index.tsx @@ -0,0 +1,16 @@ +import Card from 'components/Card' +import ChartBody from 'components/Chart/ChartBody' +import ChartLoading from 'components/Chart/ChartLoading' + +interface Props { + data: ChartData | null + title: string +} + +export default function Chart(props: Props) { + return ( + + {props.data === null ? : } + + ) +} diff --git a/src/components/Stats/StatsTrading.tsx b/src/components/Stats/StatsTrading.tsx index 6b11d459..aaa6e79c 100644 --- a/src/components/Stats/StatsTrading.tsx +++ b/src/components/Stats/StatsTrading.tsx @@ -1,36 +1,44 @@ +import { useEffect, useState } from 'react' + import Chart from 'components/Chart' export default function StatsTrading() { - const totalSwapVolume = [ - { - date: '2023-11-15', - value: 2501271, - }, - { - date: '2023-11-16', - value: 2804718, - }, - { - date: '2023-11-17', - value: 4901520, - }, - { - date: '2023-11-18', - value: 6500000, - }, - { - date: '2023-11-19', - value: 7486720, - }, - { - date: '2023-11-20', - value: 8412721, - }, - { - date: '2023-11-21', - value: 10432321, - }, - ] + const [totalSwapVolume, setTotalSwapVolume] = useState(null) + + useEffect(() => { + setTimeout(() => { + setTotalSwapVolume([ + { + date: '2023-11-15', + value: 2501271, + }, + { + date: '2023-11-16', + value: 2804718, + }, + { + date: '2023-11-17', + value: 4901520, + }, + { + date: '2023-11-18', + value: 6500000, + }, + { + date: '2023-11-19', + value: 7486720, + }, + { + date: '2023-11-20', + value: 8412721, + }, + { + date: '2023-11-21', + value: 10432321, + }, + ]) + }, 6000) + }) return } diff --git a/src/styles/globals.css b/src/styles/globals.css index 46ceede1..233c354b 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -61,3 +61,9 @@ table tr:last-child td { border-bottom-width: 0; } + +.recharts-dot { + stroke: theme('colors.body'); + fill: theme('colors.martian-red'); + r: 5px; +} diff --git a/src/types/interfaces/components/Chart.d.ts b/src/types/interfaces/components/Chart.d.ts new file mode 100644 index 00000000..aae7d262 --- /dev/null +++ b/src/types/interfaces/components/Chart.d.ts @@ -0,0 +1,3 @@ +type ChartDataItem = { date: string; value: number } + +type ChartData = ChartDataItem[] diff --git a/src/utils/math.ts b/src/utils/math.ts index 53cc40b1..ed7be0de 100644 --- a/src/utils/math.ts +++ b/src/utils/math.ts @@ -1,4 +1,4 @@ -import { BN } from './helpers' +import { BN } from 'utils/helpers' export const devideByPotentiallyZero = (numerator: number, denominator: number): number => { if (denominator === 0) return 0 diff --git a/src/utils/messages.ts b/src/utils/messages.ts index 1f269788..b0669af7 100644 --- a/src/utils/messages.ts +++ b/src/utils/messages.ts @@ -1,4 +1,4 @@ -import { formatAmountWithSymbol } from './formatters' +import { formatAmountWithSymbol } from 'utils/formatters' export function getNoBalanceMessage(symbol: string) { return `You don't have an ${symbol} balance in your account.`