Working on graph

ui/src/components/Metars/SkyConditions.tsx

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