From dbb825d29546646b4346ee0d82e97402dda376cd Mon Sep 17 00:00:00 2001
From: Kilerd Chan <blove694@gmail.com>
Date: Fri, 18 Oct 2024 22:44:23 +0800
Subject: [PATCH] feat: remove dot and only active dot on hover

Signed-off-by: Kilerd Chan <blove694@gmail.com>
---
 frontend/src/components/AccountBalanceHistoryGraph.tsx | 6 ++++--
 frontend/src/components/ReportGraph.tsx                | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/AccountBalanceHistoryGraph.tsx b/frontend/src/components/AccountBalanceHistoryGraph.tsx
index 27e67868..4469cd38 100644
--- a/frontend/src/components/AccountBalanceHistoryGraph.tsx
+++ b/frontend/src/components/AccountBalanceHistoryGraph.tsx
@@ -81,10 +81,12 @@ export function AccountBalanceHistoryGraph(props: Props) {
       >
         <CartesianGrid vertical={false} />
         <XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} />
-        <YAxis hide type="number" domain={[minAmount, maxAmount]} yAxisId="default" scale="log" padding={{ top: 20, bottom: 20 }} />
+        <YAxis hide type="number" domain={[minAmount, maxAmount]} yAxisId="default" scale="log"
+               padding={{ top: 20, bottom: 20 }} />
         <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
         {series.map((it) => (
-          <Line dataKey={it.name} type="monotone" stroke={it.color} strokeWidth={2} dot yAxisId="default" />
+          <Line dataKey={it.name} type="monotone" stroke={it.color} strokeWidth={2} dot={false} activeDot
+                yAxisId="default" />
         ))}
       </LineChart>
     </ChartContainer>
diff --git a/frontend/src/components/ReportGraph.tsx b/frontend/src/components/ReportGraph.tsx
index e41cdc3e..4b9d45f9 100644
--- a/frontend/src/components/ReportGraph.tsx
+++ b/frontend/src/components/ReportGraph.tsx
@@ -59,7 +59,8 @@ export default function ReportGraph(props: Props) {
         <ComposedChart accessibilityLayer data={data}>
           <XAxis dataKey="date" tickLine={false} tickMargin={10} axisLine={false} />
 
-          <YAxis hide type="number" domain={total_domain} yAxisId="left" scale="log" padding={{ top: 20, bottom: 20 }} />
+          <YAxis hide type="number" domain={total_domain} yAxisId="left" scale="log"
+                 padding={{ top: 20, bottom: 20 }} />
           <YAxis hide type="number" domain={[0, max_income]} yAxisId="right" padding={{ top: 20, bottom: 0 }} />
 
           <ChartTooltip content={<ChartTooltipContent />} />
@@ -67,7 +68,8 @@ export default function ReportGraph(props: Props) {
 
           <Bar dataKey="income" stackId="a" fill="#3b82f6" yAxisId="right" />
           <Bar dataKey="expense" stackId="a" fill="#ef4444" yAxisId="right" />
-          <Line type="monotone" dataKey="total" stroke="var(--color-total)" strokeWidth={2} dot={true} yAxisId="left" />
+          <Line type="monotone" dataKey="total" stroke="var(--color-total)" strokeWidth={2} dot={false} activeDot
+                yAxisId="left" />
         </ComposedChart>
       </ChartContainer>
     </>