token stats chart height
This commit is contained in:
parent
e55619237a
commit
52a5c08292
|
@ -32,6 +32,7 @@ interface DetailedAreaChartProps {
|
||||||
data: any[]
|
data: any[]
|
||||||
daysToShow?: string
|
daysToShow?: string
|
||||||
domain?: AxisDomain
|
domain?: AxisDomain
|
||||||
|
heightClass?: string
|
||||||
hideChange?: boolean
|
hideChange?: boolean
|
||||||
hideChart?: () => void
|
hideChart?: () => void
|
||||||
loading?: boolean
|
loading?: boolean
|
||||||
|
@ -57,6 +58,7 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
|
||||||
data,
|
data,
|
||||||
daysToShow = '1',
|
daysToShow = '1',
|
||||||
domain,
|
domain,
|
||||||
|
heightClass,
|
||||||
hideChange,
|
hideChange,
|
||||||
hideChart,
|
hideChart,
|
||||||
loading,
|
loading,
|
||||||
|
@ -108,7 +110,11 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
|
||||||
<ContentBox hideBorder hidePadding>
|
<ContentBox hideBorder hidePadding>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<SheenLoader className="flex flex-1">
|
<SheenLoader className="flex flex-1">
|
||||||
<div className="h-[448px] w-full rounded-lg bg-th-bkg-2" />
|
<div
|
||||||
|
className={`${
|
||||||
|
heightClass ? heightClass : 'h-96'
|
||||||
|
} w-full rounded-lg bg-th-bkg-2`}
|
||||||
|
/>
|
||||||
</SheenLoader>
|
</SheenLoader>
|
||||||
) : data.length ? (
|
) : data.length ? (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
|
@ -223,7 +229,9 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="-mt-1 h-96 w-auto">
|
<div
|
||||||
|
className={`-mt-1 ${heightClass ? heightClass : 'h-96'} w-auto`}
|
||||||
|
>
|
||||||
{setDaysToShow ? (
|
{setDaysToShow ? (
|
||||||
<div className="absolute -top-1 right-0 -mb-2 flex justify-end">
|
<div className="absolute -top-1 right-0 -mb-2 flex justify-end">
|
||||||
<ChartRangeButtons
|
<ChartRangeButtons
|
||||||
|
@ -323,7 +331,11 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex h-96 items-center justify-center p-4 text-th-fgd-3">
|
<div
|
||||||
|
className={`flex ${
|
||||||
|
heightClass ? heightClass : 'h-96'
|
||||||
|
} items-center justify-center p-4 text-th-fgd-3`}
|
||||||
|
>
|
||||||
<div className="">
|
<div className="">
|
||||||
<NoSymbolIcon className="mx-auto mb-1 h-6 w-6 text-th-fgd-4" />
|
<NoSymbolIcon className="mx-auto mb-1 h-6 w-6 text-th-fgd-4" />
|
||||||
<p className="text-th-fgd-4">{t('chart-unavailable')}</p>
|
<p className="text-th-fgd-4">{t('chart-unavailable')}</p>
|
||||||
|
|
|
@ -114,15 +114,15 @@ const TokenStats = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ContentBox hideBorder hidePadding>
|
<ContentBox hideBorder hidePadding>
|
||||||
<div className="grid grid-cols-2 gap-x-6">
|
<div className="grid grid-cols-2">
|
||||||
{loadingStats ? (
|
{loadingStats ? (
|
||||||
<div className="col-span-2 py-4 px-6 md:col-span-1">
|
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
|
||||||
<SheenLoader className="flex flex-1">
|
<SheenLoader className="flex flex-1">
|
||||||
<div className="h-96 w-full rounded-lg bg-th-bkg-2" />
|
<div className="h-96 w-full rounded-lg bg-th-bkg-2" />
|
||||||
</SheenLoader>
|
</SheenLoader>
|
||||||
</div>
|
</div>
|
||||||
) : totalValues.length ? (
|
) : totalValues.length ? (
|
||||||
<div className="col-span-2 py-4 px-6 md:col-span-1">
|
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
|
||||||
<DetailedAreaChart
|
<DetailedAreaChart
|
||||||
data={totalValues.concat([
|
data={totalValues.concat([
|
||||||
{
|
{
|
||||||
|
@ -132,6 +132,7 @@ const TokenStats = () => {
|
||||||
},
|
},
|
||||||
])}
|
])}
|
||||||
daysToShow={'999'}
|
daysToShow={'999'}
|
||||||
|
heightClass="h-72"
|
||||||
prefix="$"
|
prefix="$"
|
||||||
tickFormat={(x) => `$${x.toFixed(2)}`}
|
tickFormat={(x) => `$${x.toFixed(2)}`}
|
||||||
title={t('total-deposit-value')}
|
title={t('total-deposit-value')}
|
||||||
|
@ -141,13 +142,13 @@ const TokenStats = () => {
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
{loadingStats ? (
|
{loadingStats ? (
|
||||||
<div className="col-span-2 border-t border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:border-t-0 md:pl-6">
|
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:pl-6">
|
||||||
<SheenLoader className="flex flex-1">
|
<SheenLoader className="flex flex-1">
|
||||||
<div className="h-96 w-full rounded-lg bg-th-bkg-2" />
|
<div className="h-96 w-full rounded-lg bg-th-bkg-2" />
|
||||||
</SheenLoader>
|
</SheenLoader>
|
||||||
</div>
|
</div>
|
||||||
) : totalValues.length ? (
|
) : totalValues.length ? (
|
||||||
<div className="col-span-2 border-t border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:border-t-0 md:pl-6">
|
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:pl-6">
|
||||||
<DetailedAreaChart
|
<DetailedAreaChart
|
||||||
data={totalValues.concat([
|
data={totalValues.concat([
|
||||||
{
|
{
|
||||||
|
@ -157,6 +158,7 @@ const TokenStats = () => {
|
||||||
},
|
},
|
||||||
])}
|
])}
|
||||||
daysToShow={'999'}
|
daysToShow={'999'}
|
||||||
|
heightClass="h-72"
|
||||||
prefix="$"
|
prefix="$"
|
||||||
tickFormat={(x) => `$${x.toFixed(2)}`}
|
tickFormat={(x) => `$${x.toFixed(2)}`}
|
||||||
title={t('total-borrow-value')}
|
title={t('total-borrow-value')}
|
||||||
|
|
Loading…
Reference in New Issue