Remove unnecessary user interaction with donut chart

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>

src/components/HeatMap.tsx

@@ -40,33 +40,33 @@ function GitHubCalendarHeatmap({
     const dayGoalTime = goal;
     const weekGoalTime = 5 * dayGoalTime;
 
-    const getColorForValue = (value: number, goalTime: number): string => {
+    const getColorForValue = (value: number, goalTime: number, zeroColor: string): string => {
         const buckets = [
             {
                 min: -Infinity,
                 max: 0,
-                color: '#eeeeee'
+                color: zeroColor,
             },
             {
                 min: 0,
                 max: 0.40,
-                color: '#d6e685'
+                color: '#d6e685',
             },
             {
                 min: 0.40,
                 max: 0.50,
-                color: '#8cc665'
+                color: '#8cc665',
             },
             {
                 min: 0.50,
                 max: 0.90,
-                color: '#44a340'
+                color: '#44a340',
             },
             {
                 min: 0.90,
                 // If penalising overtime, the max is 1.125, otherwise it's infinity (ie this is the last bucket)
                 max: penaliseOvertime ? 1.125 : Infinity,
-                color: '#1e6823'
+                color: '#1e6823',
             },
             {
                 min: 1.125,
@@ -116,7 +116,7 @@ function GitHubCalendarHeatmap({
                 const dayOfWeek = (date.getDay() + 6) % 7;
                 const x = weekIndex * (squareSize + padding);
                 const y = dayOfWeek * (squareSize + padding);
-                const color = getColorForValue(count, dayGoalTime);
+                const color = getColorForValue(count, dayGoalTime, dFns.isWeekend(date) ? '#d4d4d4' : '#eeeeee');
 
                 return (
                     <rect
@@ -137,7 +137,7 @@ function GitHubCalendarHeatmap({
                     const x = weekIndex * (squareSize + padding);
                     const y = 7 * (squareSize + padding) + weekTotalPadding; // Position for the week total
                     const count = getWeekTotal(weekIndex);
-                    const color = getColorForValue(count, weekGoalTime);
+                    const color = getColorForValue(count, weekGoalTime, '#eeeeee');
 
                     return (
                         <rect