Remove unnecessary user interaction with donut chart

2024-02-28 17:18:56 +00:00 · 2024-02-28 17:18:56 +00:00 · 89558cdd1a
commit 89558cdd1a
parent d6b319e6a5
1 changed files with 8 additions and 2 deletions
--- a/src/components/Donut.tsx
+++ b/src/components/Donut.tsx
@ -8,7 +8,12 @@ export type DonutChartData = {
    value: number;
 }[];

-export function Donut({data, centerLabel, formatter, hoverSuffix}: {
+export function Donut({
+                          data,
+                          centerLabel,
+                          formatter,
+                          hoverSuffix
+                      }: {
    data: DonutChartData,
    formatter: (value: number) => string,
    centerLabel: string,
@ -71,12 +76,13 @@ export function Donut({data, centerLabel, formatter, hoverSuffix}: {
                                strokeWidth="3"
                                strokeDasharray={`${value * normalisingFactor} ${100 - value * normalisingFactor}`}
                                strokeDashoffset={100 - (offset * normalisingFactor) + 25}
+                                style={{outline: 'none'}}
                            />
                        )
                    })
                }

-                <g className="chart-text">
+                <g className="chart-text" style={{ userSelect: 'none'}}>
                    <text x="50%" y="50%" className="chart-number">
                        {formatter(total)}
                    </text>