Working on graph

ui/src/components/Metars/SkyConditions.tsx

@@ -1,36 +1,12 @@
 'use client';
 
-import { Metar, SkyCondition } from '@/api/metar.types';
-import { Box } from '@mantine/core';
-import {
-  Customized,
-  Label,
-  LabelList,
-  Line,
-  LineChart,
-  ReferenceLine,
-  ResponsiveContainer,
-  XAxis,
-  YAxis
-} from 'recharts';
+import { Metar } from '@/api/metar.types';
+import { Box, Text } from '@mantine/core';
+import { CartesianGrid, LabelList, Line, LineChart, XAxis, YAxis } from 'recharts';
 
 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';
-    }
-  }
-  if (metar.sky_condition && metar.sky_condition.length > 0) {
+  if (metar.sky_condition && metar.sky_condition.length > 0 && metar.sky_condition[0].sky_cover != 'CLR') {
+    let maxHeight = 5000;
     const data: any = [
       {
         name: 'start'
@@ -42,11 +18,35 @@ export default function SkyConditions({ metar }: { metar: Metar }) {
     metar.sky_condition.forEach((skyCondition, index) => {
       data[0][index] = skyCondition.cloud_base_ft_agl;
       data[1][index] = skyCondition.cloud_base_ft_agl;
+      if (skyCondition.cloud_base_ft_agl > maxHeight) {
+        maxHeight = skyCondition.cloud_base_ft_agl;
+      }
     });
+    maxHeight = Math.ceil((maxHeight % 1000 == 0 ? maxHeight + 1 : maxHeight) / 1000) * 1000;
+    let interval;
+    if (maxHeight <= 5000) {
+      interval = 1;
+    } else if (maxHeight <= 10000) {
+      interval = 2;
+    } else if (maxHeight <= 15000) {
+      interval = 3;
+    } else if (maxHeight <= 20000) {
+      interval = 5;
+    } else {
+      interval = 10;
+    }
 
     return (
-      <LineChart data={data} width={350} height={300}>
-        <YAxis domain={[0, (dataMax: number) => (dataMax < 1000 ? 1000 : Math.ceil(dataMax / 1000) * 1000)]} />
+      <Box>
+        <Text>Sky Conditions</Text>
+        <LineChart data={data} width={350} height={300} margin={{ top: 10, right: 0, left: 0, bottom: 10 }}>
+          <CartesianGrid strokeDasharray='3 3' />
+          <YAxis
+            includeHidden
+            ticks={[0, 1000 * interval, 2000 * interval, 3000 * interval, 4000 * interval, 5000 * interval]}
+            domain={[0, maxHeight]}
+          />
+          <XAxis tick={false} />
           {metar.sky_condition.map((skyCondition, index) => (
             <Line
               key={`sky-condition-line-${index}`}
@@ -63,9 +63,15 @@ export default function SkyConditions({ metar }: { metar: Metar }) {
             </Line>
           ))}
         </LineChart>
+      </Box>
     );
   } else {
-    return <></>;
+    return (
+      <Box>
+        <Text>Sky Conditions</Text>
+        <Text>Clear</Text>
+      </Box>
+    );
   }
 }