Add snowfall to weather chart

src/api/queries/weather.tsx

@@ -19,6 +19,7 @@ export const useWeather = (
   const cloudCover = `Cloud_Cover_${location.latitude},${location.longitude}`
   const windSpeed = `Wind_Speed_${location.latitude},${location.longitude}`
   const rain = `Rain_${location.latitude},${location.longitude}`
+  const snowfall = `Snowfall_${location.latitude},${location.longitude}`
 
   const { isSuccess, data } = useQueries({
     queries: [
@@ -41,6 +42,11 @@ export const useWeather = (
         queryKey: ['predictions', rain, startTime, endTime],
         queryFn: () => predictions(rain, startTime, endTime),
         enabled
+      },
+      {
+        queryKey: ['predictions', snowfall, startTime, endTime],
+        queryFn: () => predictions(snowfall, startTime, endTime),
+        enabled
       }
     ],
     combine: (results) => {
@@ -69,6 +75,12 @@ export const useWeather = (
           average: 0,
           values: []
         },
+        snowfall: {
+          minimum: 0,
+          maximum: 0,
+          average: 0,
+          values: []
+        },
         cloudCover: 0,
         windSpeed: 0
       }
@@ -89,6 +101,12 @@ export const useWeather = (
       average: Math.avg(data[rain].value.slice(0, 24)), // FIXME: API returns 48 values
       values: data[rain].value.slice(0, 24) // FIXME: API returns 48 values
     },
+    snowfall: {
+      minimum: Math.min(...data[snowfall].value.slice(0, 24)), // FIXME: API returns 48 values
+      maximum: Math.max(...data[snowfall].value.slice(0, 24)), // FIXME: API returns 48 values
+      average: Math.avg(data[snowfall].value.slice(0, 24)), // FIXME: API returns 48 values
+      values: data[snowfall].value.slice(0, 24) // FIXME: API returns 48 values
+    },
     cloudCover: Math.avg(data[cloudCover].value.slice(0, 24)), // FIXME: API returns 48 values
     windSpeed: Math.avg(data[windSpeed].value.slice(0, 24)) // FIXME: API returns 48 values
   }

src/components/cards/weather.tsx

@@ -76,6 +76,11 @@ function WeatherDetail(props: {
             name: 'Rain',
             type: 'column',
             data: forecast.rain.values
+          },
+          {
+            name: 'Snowfall',
+            type: 'column',
+            data: forecast.snowfall.values
           }
         ]}
       />

src/components/charts/temperature.tsx

@@ -25,6 +25,7 @@ export default function Temperature(props: TemperatureProps): ReactElement {
     chart: {
       id: 'temperature',
       type: 'line',
+      stacked: true,
       background: 'transparent',
       zoom: {
         enabled: false
@@ -36,7 +37,7 @@ export default function Temperature(props: TemperatureProps): ReactElement {
         enabled: false
       }
     },
-    colors: ['#0369A1', '#BAE6FD'],
+    colors: ['#0369A1', '#BAE6FD', '#F1F5F9'],
     stroke: {
       curve: 'straight',
       width: 2
@@ -68,6 +69,15 @@ export default function Temperature(props: TemperatureProps): ReactElement {
         title: {
           text: 'Rain'
         }
+      },
+      {
+        opposite: true,
+        labels: {
+          formatter: (value) => `${Math.round(value)} mm`
+        },
+        title: {
+          text: 'Snowfall'
+        }
       }
     ],
     series: props.series,

src/types.tsx

@@ -18,6 +18,12 @@ export interface Forecast {
     average: number
     values: number[]
   }
+  snowfall: {
+    minimum: number
+    maximum: number
+    average: number
+    values: number[]
+  }
   cloudCover: number
   windSpeed: number
 }