ag/gymflow
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 1 Wiki Activity

Stats charts minor fix

Browse Source
This commit is contained in:
aodulov
2025-11-27 08:18:11 +02:00
parent 350a25e318
commit b4cc722a79
1 changed files with 114 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/Stats.tsx
View File

@@ -74,18 +74,18 @@ const Stats: React.FC<StatsProps> = ({ sessions, lang }) => {
<p className="text-xs text-on-surface-variant mt-1">{t('volume_subtitle', lang)}</p> <p className="text-xs text-on-surface-variant mt-1">{t('volume_subtitle', lang)}</p>
</div> </div>
</div> </div>
<div className="h-64 w-full"> <div className="h-64 min-h-64 w-full">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height={256}>
<LineChart data={volumeData}> <LineChart data={volumeData}>
<CartesianGrid strokeDasharray="3 3" stroke="#49454F" vertical={false} opacity={0.5} /> <CartesianGrid strokeDasharray="3 3" stroke="#49454F" vertical={false} opacity={0.5} />
<XAxis dataKey="date" stroke="#CAC4D0" fontSize={12} tickLine={false} axisLine={false} dy={10} /> <XAxis dataKey="date" stroke="#CAC4D0" fontSize={12} tickLine={false} axisLine={false} dy={10} />
<YAxis stroke="#CAC4D0" fontSize={12} tickLine={false} axisLine={false} tickFormatter={(val) => `${(val/1000).toFixed(1)}k`} /> <YAxis stroke="#CAC4D0" fontSize={12} tickLine={false} axisLine={false} tickFormatter={(val) => `${(val / 1000).toFixed(1)}k`} />
<Tooltip <Tooltip
contentStyle={{ backgroundColor: '#2B2930', borderColor: '#49454F', color: '#E6E0E9', borderRadius: '12px' }} contentStyle={{ backgroundColor: '#2B2930', borderColor: '#49454F', color: '#E6E0E9', borderRadius: '12px' }}
itemStyle={{ color: '#D0BCFF' }} itemStyle={{ color: '#D0BCFF' }}
formatter={(val: number) => [`${val.toLocaleString()} kg`, t('volume_title', lang)]} formatter={(val: number) => [`${val.toLocaleString()} kg`, t('volume_title', lang)]}
/> />
<Line type="monotone" dataKey="work" stroke="#D0BCFF" strokeWidth={3} dot={{r: 4, fill: '#D0BCFF'}} activeDot={{r: 6}} /> <Line type="monotone" dataKey="work" stroke="#D0BCFF" strokeWidth={3} dot={{ r: 4, fill: '#D0BCFF' }} activeDot={{ r: 6 }} />
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
@@ -94,15 +94,15 @@ const Stats: React.FC<StatsProps> = ({ sessions, lang }) => {
{/* Sets Chart */} {/* Sets Chart */}
<div className="bg-surface-container p-5 rounded-[24px] shadow-elevation-1 border border-outline-variant/20"> <div className="bg-surface-container p-5 rounded-[24px] shadow-elevation-1 border border-outline-variant/20">
<h3 className="text-title-medium font-medium text-on-surface mb-6">{t('sets_title', lang)}</h3> <h3 className="text-title-medium font-medium text-on-surface mb-6">{t('sets_title', lang)}</h3>
<div className="h-64 w-full"> <div className="h-64 min-h-64 w-full">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height={256}>
<BarChart data={setsData}> <BarChart data={setsData}>
<CartesianGrid strokeDasharray="3 3" stroke="#49454F" vertical={false} opacity={0.5} /> <CartesianGrid strokeDasharray="3 3" stroke="#49454F" vertical={false} opacity={0.5} />
<XAxis dataKey="date" stroke="#CAC4D0" fontSize={12} tickLine={false} axisLine={false} dy={10} /> <XAxis dataKey="date" stroke="#CAC4D0" fontSize={12} tickLine={false} axisLine={false} dy={10} />
<YAxis stroke="#CAC4D0" fontSize={12} tickLine={false} axisLine={false} /> <YAxis stroke="#CAC4D0" fontSize={12} tickLine={false} axisLine={false} />
<Tooltip <Tooltip
contentStyle={{ backgroundColor: '#2B2930', borderColor: '#49454F', color: '#E6E0E9', borderRadius: '12px' }} contentStyle={{ backgroundColor: '#2B2930', borderColor: '#49454F', color: '#E6E0E9', borderRadius: '12px' }}
cursor={{fill: 'rgba(255,255,255,0.05)'}} cursor={{ fill: 'rgba(255,255,255,0.05)' }}
/> />
<Bar dataKey="sets" fill="#CCC2DC" radius={[4, 4, 0, 0]} /> <Bar dataKey="sets" fill="#CCC2DC" radius={[4, 4, 0, 0]} />
</BarChart> </BarChart>
@@ -113,8 +113,8 @@ const Stats: React.FC<StatsProps> = ({ sessions, lang }) => {
{/* Body Weight Chart */} {/* Body Weight Chart */}
<div className="bg-surface-container p-5 rounded-[24px] shadow-elevation-1 border border-outline-variant/20"> <div className="bg-surface-container p-5 rounded-[24px] shadow-elevation-1 border border-outline-variant/20">
<h3 className="text-title-medium font-medium text-on-surface mb-6">{t('weight_title', lang)}</h3> <h3 className="text-title-medium font-medium text-on-surface mb-6">{t('weight_title', lang)}</h3>
<div className="h-64 w-full"> <div className="h-64 min-h-64 w-full">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height={256}>
<LineChart data={weightData}> <LineChart data={weightData}>
<CartesianGrid strokeDasharray="3 3" stroke="#49454F" vertical={false} opacity={0.5} /> <CartesianGrid strokeDasharray="3 3" stroke="#49454F" vertical={false} opacity={0.5} />
<XAxis dataKey="date" stroke="#CAC4D0" fontSize={12} tickLine={false} axisLine={false} dy={10} /> <XAxis dataKey="date" stroke="#CAC4D0" fontSize={12} tickLine={false} axisLine={false} dy={10} />
@@ -124,7 +124,7 @@ const Stats: React.FC<StatsProps> = ({ sessions, lang }) => {
itemStyle={{ color: '#6EE7B7' }} itemStyle={{ color: '#6EE7B7' }}
formatter={(val: number) => [`${val} kg`, t('weight_kg', lang)]} formatter={(val: number) => [`${val} kg`, t('weight_kg', lang)]}
/> />
<Line type="monotone" dataKey="weight" stroke="#6EE7B7" strokeWidth={3} dot={{r: 4, fill: '#6EE7B7'}} activeDot={{r: 6}} /> <Line type="monotone" dataKey="weight" stroke="#6EE7B7" strokeWidth={3} dot={{ r: 4, fill: '#6EE7B7' }} activeDot={{ r: 6 }} />
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>