blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

remove responsive container

This commit is contained in:
saml33 2023-07-10 23:24:38 +10:00
parent 0c707b2c73
commit 854fdec3b5
2 changed files with 42 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/account/HealthContributions.tsx
View File

@ -98,7 +98,7 @@ const HealthContributions = ({ hideView }: { hideView: () => void }) => {
<div className="mx-auto grid max-w-[1140px] grid-cols-2 gap-8 p-6"> <div className="mx-auto grid max-w-[1140px] grid-cols-2 gap-8 p-6">
<div className="col-span-1 flex h-full flex-col items-center"> <div className="col-span-1 flex h-full flex-col items-center">
<Tooltip content={t('account:tooltip-init-health')}> <Tooltip content={t('account:tooltip-init-health')}>
<h3 className="tooltip-underline mb-3 text-base"> <h3 className="tooltip-underline mb-6 text-base">
{t('account:init-health')} {t('account:init-health')}
</h3> </h3>
</Tooltip> </Tooltip>
@ -106,7 +106,7 @@ const HealthContributions = ({ hideView }: { hideView: () => void }) => {
</div> </div>
<div className="col-span-1 flex flex-col items-center"> <div className="col-span-1 flex flex-col items-center">
<Tooltip content={t('account:tooltip-maint-health')}> <Tooltip content={t('account:tooltip-maint-health')}>
<h3 className="tooltip-underline mb-3 text-base"> <h3 className="tooltip-underline mb-6 text-base">
{t('account:maint-health')} {t('account:maint-health')}
</h3> </h3>
</Tooltip> </Tooltip>

79
components/account/HealthContributionsChart.tsx
View File

@ -4,7 +4,7 @@ import {
Cell, Cell,
Pie, Pie,
PieChart, PieChart,
ResponsiveContainer, // ResponsiveContainer,
Sector, Sector,
SectorProps, SectorProps,
} from 'recharts' } from 'recharts'
@ -78,8 +78,8 @@ const HealthContributionsChart = ({ data }: { data: HealthContribution[] }) => {
<Sector <Sector
cx={cx} cx={cx}
cy={cy} cy={cy}
innerRadius={innerRadius} innerRadius={innerRadius! - 4}
outerRadius={outerRadius! + 4} outerRadius={outerRadius}
startAngle={startAngle} startAngle={startAngle}
endAngle={endAngle} endAngle={endAngle}
fill={fill} fill={fill}
@ -114,42 +114,43 @@ const HealthContributionsChart = ({ data }: { data: HealthContribution[] }) => {
return filteredData.length ? ( return filteredData.length ? (
<div className="flex h-full w-full flex-col items-center"> <div className="flex h-full w-full flex-col items-center">
<div className="relative h-[248px] w-full"> <div className="relative">
<ResponsiveContainer width="100%" height="100%"> {/* <ResponsiveContainer width="100%" height="100%"> */}
<PieChart width={size} height={size}> <PieChart width={size} height={size}>
<Pie <Pie
cursor="pointer" cursor="pointer"
data={filteredData} data={filteredData}
dataKey="contribution" dataKey="contribution"
cx="50%" cx="50%"
cy="50%" cy="50%"
outerRadius={outerRadius} outerRadius={outerRadius}
innerRadius={innerRadius} innerRadius={innerRadius}
minAngle={2} minAngle={2}
startAngle={90} startAngle={90}
endAngle={450} endAngle={450}
activeIndex={activeIndex} paddingAngle={1}
activeShape={renderActiveShape} activeIndex={activeIndex}
onClick={handleLegendClick} activeShape={renderActiveShape}
onMouseEnter={handleMouseEnter} onClick={handleLegendClick}
onMouseLeave={handleMouseLeave} onMouseEnter={handleMouseEnter}
> onMouseLeave={handleMouseLeave}
{filteredData.map((entry, index) => { >
const fillColor = entry.isAsset {filteredData.map((entry, index) => {
? COLORS.UP[theme] const fillColor = entry.isAsset
: COLORS.DOWN[theme] ? COLORS.UP[theme]
return ( : COLORS.DOWN[theme]
<Cell return (
key={`cell-${index}`} <Cell
fill={fillColor} key={`cell-${index}`}
opacity={1 / ((index + 1) / 2.5)} fill={fillColor}
stroke="none" opacity={1 / ((index + 1) / 2.5)}
/> stroke="none"
) />
})} )
</Pie> })}
</PieChart> </Pie>
</ResponsiveContainer> </PieChart>
{/* </ResponsiveContainer> */}
{chartHeroValue ? ( {chartHeroValue ? (
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center"> <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
<p>{chartHeroAsset}</p> <p>{chartHeroAsset}</p>