Merge pull request #6 from lucianavlop/chart-render-bug

Bugfix: Chart not rendering correctly

Dockerfile

@@ -1,5 +1,5 @@
 # build
-FROM node:14 AS builder
+FROM node:16 AS builder
 
 WORKDIR /app
 

docker-compose.yaml

@@ -1,16 +1,16 @@
 version: "3.5"
 
 services:
-    daithi-dashboard:
-        image: daithi-dashboard
-        container_name: daithi-dashboard
-        restart: "no"
+    electricity-prices-dashboard:
+        image: electricity-prices-dashboard
+        container_name: electricity-prices-dashboard
+        restart: always
         ports:
             - 3000:80
         networks:
-            - dash
+            - elec-prices
 
 networks:
-    dash:
+    elec-prices:
         driver: bridge
-        name: dash
+        name: elec-prices

src/components/PriceChart.tsx

@@ -105,7 +105,7 @@ const DailyChart: React.FC<DailyChartProps> = ({
             },
         }
         return chartOptions
-    }, [theme, chartId])
+    }, [theme])
 
     const cheapPeriod = useMemo(() => {
         if (!showCheapPeriod) return Array<null>(prices.length).fill(null)
@@ -151,14 +151,15 @@ const DailyChart: React.FC<DailyChartProps> = ({
                 return null
             }
         })
-    }, [prices, showCurrentPrice])
+    }, [prices, showExpensivePeriod])
 
-    const averageDataset = useMemo(() => {
-        return Array<number>(prices.length).fill(median)
-    }, [prices, median])
+    const averageDataset = useMemo(
+        () => Array<number>(prices.length).fill(median),
+        [prices, median],
+    )
 
-    useEffect(() => {
-        const chartData: ChartData<"line", (number | null)[]> = {
+    const chartData: ChartData<"line", (number | null)[]> = useMemo(() => {
+        return {
             labels: prices.map(item =>
                 format(new Date(item.dateTime), dateFormat),
             ),
@@ -230,7 +231,21 @@ const DailyChart: React.FC<DailyChartProps> = ({
                 },
             ],
         }
+    }, [
+        averageDataset,
+        cheapPeriod,
+        currentPriceDataset,
+        dateFormat,
+        expensivePeriod,
+        prices,
+        theme.palette.info.main,
+        theme.palette.primary.main,
+        theme.palette.secondary.main,
+        theme.palette.success.main,
+        theme.palette.warning.main,
+    ])
 
+    useEffect(() => {
         const chartCanvas = document.getElementById(
             ID_PREFIX + chartId,
         ) as HTMLCanvasElement
@@ -252,7 +267,7 @@ const DailyChart: React.FC<DailyChartProps> = ({
                 chart.destroy()
             }
         }
-    }, [theme, prices, cheapPeriod])
+    }, [chartData])
 
     return <canvas id={ID_PREFIX + chartId} />
 }

src/pages/Dashboard.tsx

@@ -13,7 +13,7 @@ import {
 import { Container, Grid } from "@mui/material"
 import Metric from "components/Metric"
 
-function DashboardContent() {
+const DashboardContent: React.FC = () => {
     const [currentDate, setCurrentDate] = useState(new Date())
     const [pricesToday, setPricesToday] = useState<Price[]>([])
     const [pricesTomorrow, setPricesTomorrow] = useState<Price[] | null>(null)