From 2fccd0c8cacebeed46cc920c9386b8d8d53f706e Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 23 Jan 2024 17:49:45 +0100
Subject: [PATCH] Let user pick the linewidth

---
 src/components/main/routes/Dashboard.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/main/routes/Dashboard.tsx b/src/components/main/routes/Dashboard.tsx
index c9111f7..8de2c1f 100644
--- a/src/components/main/routes/Dashboard.tsx
+++ b/src/components/main/routes/Dashboard.tsx
@@ -38,10 +38,15 @@ const fetchWeekForecastData = async function (dateTime, cb) {
   cb(chartData);
 };
 
-const WeatherChart = function ({ data }) {
+const WeatherChart = function ({ data, lineWidth }) {
   return (
     <LineChart width={400} height={400} data={data}>
-      <Line type="monotone" dataKey="avgtemp_c" stroke="#8884d8" />
+      <Line
+        type="monotone"
+        dataKey="avgtemp_c"
+        stroke="#8884d8"
+        strokeWidth={lineWidth}
+      />
       <Line type="monotone" dataKey="mintemp_c" stroke="#8884d8" />
       <Line type="monotone" dataKey="maxtemp_c" stroke="#8884d8" />
       <CartesianGrid stroke="#ccc" />
@@ -52,7 +57,9 @@ const WeatherChart = function ({ data }) {
 };
 
 export const Dashboard = function ({ state, updateState }) {
+  const lineWidth = path(["options", "lineWidth"], state);
   const defaultDate = path(["options", "defaultDate"], state);
+
   const minimumDate = minDate(new Date());
 
   // Make sure the default date entered by the user is bigger than the minimum date that the API allows.
@@ -89,7 +96,11 @@ export const Dashboard = function ({ state, updateState }) {
         className="flex items-center justify-center"
         style={{ minHeight: 400, minWidth: 400 }}
       >
-        {data ? <WeatherChart data={data} /> : "Loading..."}
+        {data ? (
+          <WeatherChart data={data} lineWidth={lineWidth} />
+        ) : (
+          "Loading..."
+        )}
       </div>
     </div>
   );