feat: remove dot and only active dot on hover

Signed-off-by: Kilerd Chan <[email protected]>
zhang-accounting · Oct 18, 2024 · dbb825d · dbb825d
1 parent 78791e1
commit dbb825d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -59,15 +59,17 @@ 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 />} />
           <CartesianGrid vertical={false} />
 
           <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>
     </>