Skip to content

Commit 0c938d6

Browse files
sxjerusxjeru
committed
feat: enhance dashboard line styles and update date-fns and react-day-picker dependencies
1 parent 5b1f004 commit 0c938d6

4 files changed

Lines changed: 121 additions & 42 deletions

File tree

‎app/page.tsx‎

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,23 @@ function buildHourlySeries(series: UsageSeriesPoint[], rangeHours?: number) {
113113
return filled;
114114
}
115115

116+
function buildHourlyLineStyle(pointCount: number, baseStrokeWidth: number) {
117+
const safeCount = Math.max(0, pointCount);
118+
const density = Math.min(1, Math.max(0, (safeCount - 36) / 120));
119+
const minStrokeWidth = 1.2;
120+
const strokeWidth = Number((baseStrokeWidth - (baseStrokeWidth - minStrokeWidth) * density).toFixed(2));
121+
const showDot = safeCount <= 72;
122+
const dotRadius = safeCount <= 24 ? 3 : safeCount <= 48 ? 2.5 : 2;
123+
const activeDotRadius = safeCount <= 72 ? 6 : safeCount <= 120 ? 5 : 4;
124+
125+
return {
126+
strokeWidth,
127+
showDot,
128+
dotRadius,
129+
activeDotRadius
130+
};
131+
}
132+
116133
export default function DashboardPage() {
117134
const [mounted, setMounted] = useState(false);
118135
const [prices, setPrices] = useState<ModelPrice[]>([]);
@@ -746,6 +763,16 @@ export default function DashboardPage() {
746763
return buildHourlySeries(overviewData.byHour, hours);
747764
}, [hourRange, overviewData?.byHour]);
748765

766+
const hourlyLineStyle = useMemo(
767+
() => buildHourlyLineStyle(hourlySeries.length, 3),
768+
[hourlySeries.length]
769+
);
770+
771+
const fullscreenHourlyLineStyle = useMemo(
772+
() => buildHourlyLineStyle(hourlySeries.length, fullscreenHourlyMode === "area" ? 2.3 : 3),
773+
[hourlySeries.length, fullscreenHourlyMode]
774+
);
775+
749776
useEffect(() => {
750777
if (fullscreenChart === "stacked") {
751778
setFullscreenHourlyMode("area");
@@ -1802,9 +1829,11 @@ export default function DashboardPage() {
18021829
dataKey="requests"
18031830
name="请求数"
18041831
stroke={darkMode ? "#60a5fa" : "#3b82f6"}
1805-
strokeWidth={3}
1806-
dot={{ r: 3, fill: darkMode ? "#60a5fa" : "#3b82f6", stroke: "#fff", strokeWidth: 1, fillOpacity: 0.2 }}
1807-
activeDot={{ r: 6, stroke: "#fff", strokeWidth: 2 }}
1832+
strokeWidth={hourlyLineStyle.strokeWidth}
1833+
dot={hourlyLineStyle.showDot
1834+
? { r: hourlyLineStyle.dotRadius, fill: darkMode ? "#60a5fa" : "#3b82f6", stroke: "#fff", strokeWidth: 1, fillOpacity: 0.2 }
1835+
: false}
1836+
activeDot={{ r: hourlyLineStyle.activeDotRadius, stroke: "#fff", strokeWidth: 2 }}
18081837
/>
18091838
</ComposedChart>
18101839
</ResponsiveContainer>
@@ -2547,10 +2576,12 @@ export default function DashboardPage() {
25472576
dataKey="requests"
25482577
name="请求数"
25492578
stroke={darkMode ? "#60a5fa" : "#3b82f6"}
2550-
strokeWidth={fullscreenHourlyMode === "area" ? 2.3 : 3}
2579+
strokeWidth={fullscreenHourlyLineStyle.strokeWidth}
25512580
strokeOpacity={1}
2552-
dot={{ r: 3, fill: darkMode ? "#60a5fa" : "#3b82f6", stroke: "#fff", strokeWidth: 1, fillOpacity: 0.2 }}
2553-
activeDot={{ r: 6, stroke: "#fff", strokeWidth: 2 }}
2581+
dot={fullscreenHourlyLineStyle.showDot
2582+
? { r: fullscreenHourlyLineStyle.dotRadius, fill: darkMode ? "#60a5fa" : "#3b82f6", stroke: "#fff", strokeWidth: 1, fillOpacity: 0.2 }
2583+
: false}
2584+
activeDot={{ r: fullscreenHourlyLineStyle.activeDotRadius, stroke: "#fff", strokeWidth: 2 }}
25542585
/>
25552586
</ComposedChart>
25562587
</ResponsiveContainer>

‎app/records/page.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -384,27 +384,27 @@ export default function RecordsPage() {
384384
const dayPickerClassNames = useMemo(
385385
() => ({
386386
months: "flex flex-col gap-2",
387-
month: "space-y-2",
388-
caption: "flex items-center justify-between px-2 py-2 text-sm text-slate-200",
389-
caption_label: "text-sm font-semibold text-slate-100",
390-
nav: "flex items-center gap-2",
391-
nav_button: "h-7 w-7 rounded-md text-slate-300 hover:bg-slate-800/80",
392-
nav_button_previous: "hover:bg-slate-800/80",
393-
nav_button_next: "hover:bg-slate-800/80",
394-
table: "w-full border-separate border-spacing-y-2",
395-
head_row: "text-xs text-slate-500",
396-
head_cell: "pb-1",
397-
tbody: "",
398-
row: "w-full",
399-
cell: "p-0",
400-
day: "h-8 w-full text-sm text-slate-200 hover:!bg-indigo-500 hover:!text-white rounded-none hover:!rounded-md relative z-10 transition-all",
401-
day_today: "text-indigo-300 font-semibold",
402-
day_selected: "!bg-indigo-500 !text-white font-semibold rounded-none hover:!bg-indigo-600 hover:!text-white",
403-
day_range_start: "!bg-indigo-500 !text-white font-semibold !rounded-l-lg hover:!bg-indigo-600 hover:!text-white",
404-
day_range_end: "!bg-indigo-500 !text-white font-semibold !rounded-r-lg hover:!bg-indigo-600 hover:!text-white",
405-
day_range_middle: "!bg-indigo-500/25 !text-indigo-100 rounded-none hover:!bg-indigo-500/40 hover:!text-white hover:!rounded-none",
406-
day_outside: "text-slate-600",
407-
day_disabled: "text-slate-600"
387+
month: "relative space-y-2",
388+
month_caption: "px-2 py-2 pr-18 text-sm text-slate-200",
389+
caption: "px-2 py-2 pr-18 text-sm text-slate-200",
390+
caption_label: "relative top-[2px] text-sm font-semibold text-slate-100",
391+
nav: "absolute right-2 top-2 z-10 flex items-center gap-2",
392+
button_previous: "h-7 w-7 rounded-md text-slate-300 hover:bg-slate-800/80",
393+
button_next: "h-7 w-7 rounded-md text-slate-300 hover:bg-slate-800/80",
394+
month_grid: "w-full border-separate border-spacing-y-2",
395+
weekdays: "text-xs text-slate-500",
396+
weekday: "pb-1",
397+
weeks: "",
398+
week: "w-full",
399+
day: "p-0",
400+
day_button: "h-8 w-full text-sm text-slate-200 hover:!bg-indigo-500 hover:!text-white rounded-none hover:!rounded-md relative z-10 transition-all",
401+
today: "text-indigo-300 font-semibold",
402+
selected: "!bg-indigo-500 !text-white font-semibold rounded-none hover:!bg-indigo-600 hover:!text-white",
403+
range_start: "!bg-indigo-500 !text-white font-semibold !rounded-l-lg hover:!bg-indigo-600 hover:!text-white",
404+
range_end: "!bg-indigo-500 !text-white font-semibold !rounded-r-lg hover:!bg-indigo-600 hover:!text-white",
405+
range_middle: "!bg-indigo-500/25 !text-indigo-100 rounded-none hover:!bg-indigo-500/40 hover:!text-white hover:!rounded-none",
406+
outside: "text-slate-600",
407+
disabled: "text-slate-600"
408408
}),
409409
[]
410410
);

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@
1414
"dependencies": {
1515
"@vercel/analytics": "^1.4.1",
1616
"@vercel/postgres": "^0.10.0",
17-
"date-fns": "^3.6.0",
17+
"date-fns": "^4.1.0",
1818
"drizzle-orm": "^0.45.1",
1919
"lucide-react": "^0.563.0",
2020
"next": "16.1.6",
2121
"react": "19.2.4",
2222
"react-dom": "19.2.3",
23-
"react-day-picker": "^8.10.1",
23+
"react-day-picker": "9.13.2",
2424
"recharts": "^3.7.0",
2525
"zod": "^4.3.6"
2626
},

0 commit comments

Comments
 (0)