sky conditions chart

ui/src/components/Metars/MetarModal.tsx

@@ -15,6 +15,7 @@ import {
 import { useState } from 'react';
 import { Grid, Modal, Tooltip } from '@mantine/core';
 import './metars.css';
+import SkyConditions from './SkyConditions';
 
 interface MetarModalProps {
   airport: Airport;
@@ -137,7 +138,9 @@ function MetarInfo({ metar }: { metar: Metar }) {
           <span style={{ marginLeft: '0.5em' }}>
             {metar.wind_speed_kt != undefined && metar.wind_speed_kt > 0 ? `${metar.wind_speed_kt} KT` : 'CALM'}
           </span>
-          {/* {metar.sky_condition != undefined && metar.sky_condition.map((skyCondition) => <>test</>)} */}
+        </Grid.Col>
+        <Grid.Col className='gutter-row' span={6}>
+          <SkyConditions metar={metar} />
         </Grid.Col>
         <Grid.Col className='gutter-row' span={12}>
           {metar.wx_string && metar.wx_string.split(' ').map((wx) => <MetarIcon wx={wx} />)}

ui/src/components/Metars/SkyConditions.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { Metar, SkyCondition } from '@/api/metar.types';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Filler,
+  Legend
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Filler, Legend);
+
+export default function SkyConditions({ metar }: { metar: Metar }) {
+  function skyConditionColor(skyCondition: SkyCondition) {
+    if (skyCondition.sky_cover == 'CLR') {
+      return '#FFFFFF';
+    } else if (skyCondition.sky_cover == 'FEW') {
+      return '#19c4e6';
+    } else if (skyCondition.sky_cover == 'SCT') {
+      return '#6119e6';
+    } else if (skyCondition.sky_cover == 'BKN') {
+      return '#e6c019';
+    } else if (skyCondition.sky_cover == 'OVC') {
+      return '#e68019';
+    } else {
+      return '#e6194b';
+    }
+  }
+  function createDataset(skyCondition: SkyCondition) {
+    return {
+      fill: true,
+      label: skyCondition.sky_cover,
+      data: [skyCondition.cloud_base_ft_agl, skyCondition.cloud_base_ft_agl],
+      backgroundColor: skyConditionColor(skyCondition)
+    };
+  }
+  if (metar.sky_condition && metar.sky_condition.length > 0) {
+    console.log(metar);
+    const options = {
+      responsive: true,
+      plugins: {
+        legend: {
+          display: false
+        },
+        title: {
+          display: true,
+          text: 'Sky Conditions'
+        }
+      }
+    };
+    const data = {
+      labels: ['', ''],
+      datasets: metar.sky_condition.map((skyCondition) => createDataset(skyCondition))
+    };
+
+    return <Line options={options} data={data} />;
+  } else {
+    return <></>;
+  }
+}