sky conditions chart

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 <></>;
+  }
+}