admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Positioning, sizing and sorting of the gadgets improved.

Browse Source
This commit is contained in:
Admin
2026-07-11 22:32:37 +03:30
parent ed8ff61205
commit 83f6003a2b
35 changed files with 1615 additions and 678 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/src/components/today/TodayAreaChart.tsx
View File

@@ -9,6 +9,7 @@ import {
XAxis,
YAxis,
} from 'recharts';
import { TodayChartFrame } from '@/components/today/TodayChartFrame';
import type { TodayChartBucket } from '@/types/today';
import {
TODAY_CHART_AXIS_COLOR,
@@ -23,44 +24,46 @@ interface TodayAreaChartProps {
export function TodayAreaChart({ data }: TodayAreaChartProps) {
return (
<ResponsiveContainer width="100%" height={220}>
<AreaChart data={data} margin={{ top: 8, right: 8, left: -12, bottom: 0 }}>
<defs>
<linearGradient id="todayAreaFill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor={TODAY_CHART_PRIMARY_COLOR} stopOpacity={0.45} />
<stop offset="100%" stopColor={TODAY_CHART_PRIMARY_COLOR} stopOpacity={0.05} />
</linearGradient>
</defs>
<CartesianGrid stroke={TODAY_CHART_GRID_COLOR} vertical={false} />
<XAxis
dataKey="label"
tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
tickLine={false}
interval={1}
/>
<YAxis
allowDecimals={false}
tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
axisLine={false}
tickLine={false}
width={32}
/>
<Tooltip
cursor={{ stroke: 'rgba(0, 188, 255, 0.25)' }}
contentStyle={TODAY_CHART_TOOLTIP_STYLE}
labelFormatter={(label) => String(label)}
/>
<Area
type="monotone"
dataKey="count"
stroke={TODAY_CHART_PRIMARY_COLOR}
strokeWidth={2}
fill="url(#todayAreaFill)"
dot={{ r: 3, fill: TODAY_CHART_PRIMARY_COLOR, strokeWidth: 0 }}
activeDot={{ r: 5, fill: TODAY_CHART_PRIMARY_COLOR }}
/>
</AreaChart>
</ResponsiveContainer>
<TodayChartFrame>
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={data} margin={{ top: 8, right: 8, left: -12, bottom: 0 }}>
<defs>
<linearGradient id="todayAreaFill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor={TODAY_CHART_PRIMARY_COLOR} stopOpacity={0.45} />
<stop offset="100%" stopColor={TODAY_CHART_PRIMARY_COLOR} stopOpacity={0.05} />
</linearGradient>
</defs>
<CartesianGrid stroke={TODAY_CHART_GRID_COLOR} vertical={false} />
<XAxis
dataKey="label"
tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
tickLine={false}
interval={1}
/>
<YAxis
allowDecimals={false}
tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
axisLine={false}
tickLine={false}
width={32}
/>
<Tooltip
cursor={{ stroke: 'rgba(0, 188, 255, 0.25)' }}
contentStyle={TODAY_CHART_TOOLTIP_STYLE}
labelFormatter={(label) => String(label)}
/>
<Area
type="monotone"
dataKey="count"
stroke={TODAY_CHART_PRIMARY_COLOR}
strokeWidth={2}
fill="url(#todayAreaFill)"
dot={{ r: 3, fill: TODAY_CHART_PRIMARY_COLOR, strokeWidth: 0 }}
activeDot={{ r: 5, fill: TODAY_CHART_PRIMARY_COLOR }}
/>
</AreaChart>
</ResponsiveContainer>
</TodayChartFrame>
);
}