diff --git a/src/pages/OverviewPage.tsx b/src/pages/OverviewPage.tsx
index d45dc43..f414b8c 100644
--- a/src/pages/OverviewPage.tsx
+++ b/src/pages/OverviewPage.tsx
@@ -42,7 +42,8 @@ export function OverviewPage() {
});
const selectedMetricLabel = dailyUserMetricOptions.find((option) => option.value === selectedMetric)?.label ?? "방문자";
const chartData = toChartData(dailyUserMetricsQuery.data?.dailyMetrics, selectedMetric);
- const chartMaxValue = resolveChartMaxValue(chartData);
+ const chartTicks = resolveChartTicks(chartData);
+ const chartDomain = resolveChartDomain(chartTicks);
return (
@@ -105,7 +106,7 @@ export function OverviewPage() {
yField="value"
height={320}
shapeField="smooth"
- scale={{ y: { domain: [0, chartMaxValue] } }}
+ scale={{ y: { domain: chartDomain, tickMethod: () => chartTicks } }}
axis={{ y: { labelFormatter: formatCountLabel } }}
tooltip={{
title: (item: { date?: string }) => item.date ?? "",
@@ -128,9 +129,21 @@ function toChartData(metrics: AdminDailyUserMetricRes[] = [], metricKey: DailyUs
}));
}
-function resolveChartMaxValue(data: { value: number }[]) {
- const maxValue = Math.max(0, ...data.map((item) => item.value));
- return maxValue > 0 ? maxValue : 1;
+function resolveChartTicks(data: { value: number }[]) {
+ const values = data.map((item) => Math.round(item.value));
+ const uniqueValues = Array.from(new Set(values)).sort((a, b) => a - b);
+ return uniqueValues.length > 0 ? uniqueValues : [0];
+}
+
+function resolveChartDomain(ticks: number[]) {
+ const minValue = ticks[0] ?? 0;
+ const maxValue = ticks[ticks.length - 1] ?? 0;
+
+ if (minValue === maxValue) {
+ return minValue === 0 ? [0, 1] : [0, minValue];
+ }
+
+ return [minValue, maxValue];
}
function formatCountLabel(value: string | number) {