tidy up weather component

Author: tariknz

src/app/storage/defaultDashboard.ts

@@ -65,8 +65,8 @@ export const defaultDashboard: DashboardLayout = {
       layout: {
         x: 1000,
         y: 1000,
-        width: 400,
-        height: 700,
+        width: 150,
+        height: 330,
       },
     },
   ],

src/frontend/components/Weather/Weather.stories.tsx

@@ -4,6 +4,11 @@ import { TelemetryDecorator } from '../../../../.storybook/telemetryDecorator';
 
 export default {
   component: Weather,
+  decorators: [(Story) => (
+    <div style={{ width: '150px' }}>
+      <Story />
+    </div>
+  )],
 } as Meta;
 
 type Story = StoryObj<typeof Weather>;

src/frontend/components/Weather/Weather.tsx

@@ -1,6 +1,6 @@
 import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { useTrackTemperature } from './hooks/useTrackTemperature';
-import { useTrackWeather } from './hooks/useWeather';
+import { useTrackWeather } from './hooks/useTrackWeather';
 import { WeatherTemp } from './WeatherTemp/WeatherTemp';
 import { WeatherTrackWetness } from './WeatherTrackWetness/WeatherTrackWetness';
 import { WindDirection } from './WindDirection/WindDirection';
@@ -19,17 +19,17 @@ export const Weather = () => {
 
   return (
     <div
-      className="h-full inline-flex flex-row bg-slate-800/25 rounded-sm"
+      className="w-full inline-flex flex-row bg-slate-800/25 rounded-sm"
       ref={parent}
     >
-      <div className="flex flex-col p-2 basis-full rounded-sm gap-2">
-        <WeatherTemp title="Track Temp" value={trackTemp.trackTemp} />
-        <WeatherTemp title="Air Temp" value={trackTemp.airTemp} />
+      <div className="flex flex-col p-2 w-full rounded-sm gap-2">
+        <WeatherTemp title="Track" value={trackTemp.trackTemp} />
+        <WeatherTemp title="Air" value={trackTemp.airTemp} />
+        <WindDirection speed={windSpeed} direction={windDirectionValue} />
         <WeatherTrackWetness
           trackWetnessPct={trackWetnessPct}
           trackState={weather.trackState}
         />
-        <WindDirection speed={windSpeed} direction={windDirectionValue} />
       </div>
     </div>
   );

src/frontend/components/Weather/WeatherTemp/WeatherTemp.tsx

@@ -7,12 +7,12 @@ export interface WeatherTempProps {
 
 export const WeatherTemp = ({ title, value }: WeatherTempProps) => {
   return (
-    <div className="font-extrabold text-xl uppercase text-center bg-slate-800 p-2 rounded-sm items-center">
-      <div className="flex flex-row gap-x-2 items-center">
+    <div className="bg-slate-800/70 p-2 rounded-sm w-full">
+      <div className="flex flex-row gap-x-2 items-center text-sm">
         <Thermometer />
         <span className="grow">{title}</span>
+        <div className="text-center">{value}</div>
       </div>
-      <div className="font-bold text-lg text-center">{value}</div>
     </div>
   );
 };

src/frontend/components/Weather/WeatherTrackWetness/WeatherTrackWetness.tsx

@@ -10,21 +10,18 @@ export const WeatherTrackWetness = ({
   trackState,
 }: WeatherTrackWetnessProps) => {
   return (
-    <div className="font-extrabold text-xl uppercase text-center bg-slate-800 p-2 rounded-sm items-center">
-      TRACK WETNESS
-      <div className="font-bold text-lg text-center">
-        <div className="flex items-center flex-row gap-x-1">
-          <Sun />
-          <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 align-center">
-            <div
-              style={{ width: `${trackWetnessPct}%` }}
-              className={`bg-blue-600 h-2.5 rounded-full`}
-            ></div>
-          </div>
-          <Drop />
+    <div className="bg-slate-800/70 p-2 rounded-sm">
+      <div className="flex items-center flex-row gap-x-1 mt-1">
+        <Sun />
+        <div className="w-full bg-gray-700 rounded-full h-2.5">
+          <div
+            style={{ width: `${trackWetnessPct}%` }}
+            className="bg-blue-600 h-2.5 rounded-full"
+          ></div>
         </div>
-        <div className="font-normal">{trackState ?? 'Unknown'}</div>
+        <Drop />
       </div>
+      <div className="text-center text-sm mt-1">{trackState ?? 'Unknown'}</div>
     </div>
   );
 };

src/frontend/components/Weather/WindDirection/WindDirection.tsx

@@ -1,4 +1,5 @@
 import { useAutoAnimate } from '@formkit/auto-animate/react';
+import { Wind } from '@phosphor-icons/react';
 
 export interface WindDirectionProps {
   speed: number;
@@ -8,23 +9,27 @@ export interface WindDirectionProps {
 export const WindDirection = ({ speed, direction }: WindDirectionProps) => {
   const [parent] = useAutoAnimate();
   return (
-    <div className="font-extrabold text-xl uppercase text-center bg-slate-800 p-2 rounded-sm items-center">
+    <div className="bg-slate-800/70 p-2 rounded-sm">
+      <div className="flex flex-row gap-x-2 items-center text-sm mb-3">
+        <Wind />
+        <span className="grow">Wind</span>
+      </div>
       <div
         id="wind"
         ref={parent}
-        className="flex shrink h-full relative min-h-[200px] bg-slate-800"
+        className="flex aspect-square relative w-full max-w-[120px] mx-auto"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="-2 -2 64 64"
-          className={`absolute stroke-current stroke-4 w-full h-full box-border fill-none  origin-center transform-gpu`}
+          viewBox="0 0 60 60"
+          className="absolute stroke-current stroke-[3] w-full h-full box-border fill-none origin-center transform-gpu"
           style={{
             rotate: `calc(${direction} * 1rad + 0.5turn)`,
           }}
         >
-          <path d="M50.0262 7.6624A29.9248 29.9248 90 0160 30c0 16.5685-13.4315 30-30 30S0 46.5685 0 30A29.9254 29.9254 90 0110.0078 7.632M21.5147 8.5 30 .0147 38.4853 8.5" />
+          <path d="M48 8A28 28 90 0158 30c0 15.464-12.536 28-28 28S2 45.464 2 30A28 28 90 0112 8M22 9 30 1l8 8" />
         </svg>
-        <div className="absolute w-full h-full flex justify-center items-center text-[50px]">
+        <div className="absolute w-full h-full flex justify-center items-center text-[32px]">
           {speed.toFixed()}
         </div>
       </div>

src/frontend/components/Weather/hooks/useTrackTemperature.spec.tsx

@@ -0,0 +1,59 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useTrackTemperature } from './useTrackTemperature';
+import type { TelemetryVar } from '@irdashies/types';
+import { useTelemetry } from '@irdashies/context';
+
+vi.mock('@irdashies/context');
+
+describe('useTrackTemperature', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  const mockTelemetryVar = (value: number[], unit?: string): TelemetryVar<number[]> => ({
+    value,
+    name: 'Mock',
+    description: 'Mock telemetry variable',
+    unit: unit ?? '',
+    countAsTime: false,
+    length: value.length,
+    varType: 0,
+  });
+
+  it('should return the track temperature', () => {
+    vi.mocked(useTelemetry).mockImplementation((key) => {
+      const mockValues = {
+        TrackTempCrew: mockTelemetryVar([25], 'C'),
+        AirTemp: mockTelemetryVar([25], 'C'),
+      };
+      return mockValues[key as keyof typeof mockValues];
+    });
+
+    const { result } = renderHook(() => useTrackTemperature());
+
+    expect(result.current.trackTemp).toBe('25°C');
+    expect(result.current.airTemp).toBe('25°C');
+  });
+  it('should return an empty string if the telemetry variable is not found', () => {
+    vi.mocked(useTelemetry).mockImplementation(() => {
+      return mockTelemetryVar([], '');
+    });
+
+    const { result } = renderHook(() => useTrackTemperature());
+
+    expect(result.current.trackTemp).toBe('0°C');
+    expect(result.current.airTemp).toBe('0°C');
+  });
+
+  it('should return temperature in Fahrenheit if the unit is Fahrenheit', () => {
+    vi.mocked(useTelemetry).mockImplementation(() => {
+      return mockTelemetryVar([77], 'F');
+    });
+
+    const { result } = renderHook(() => useTrackTemperature());
+
+    expect(result.current.trackTemp).toBe('77°F');
+    expect(result.current.airTemp).toBe('77°F');
+  });
+});

src/frontend/components/Weather/hooks/useTrackTemperature.tsx

@@ -8,13 +8,13 @@ export const useTrackTemperature = () => {
   const trackTemp = useMemo(() => {
     const trackTemp = trackTempVal?.value[0] ?? 0;
     if (trackTemp === null || trackTemp === undefined) return '';
-    return `${trackTemp.toFixed(0)}°${trackTempVal?.unit ?? 'C'}`;
+    return `${trackTemp.toFixed(0)}°${trackTempVal?.unit || 'C'}`;
   }, [trackTempVal?.unit, trackTempVal?.value]);
 
   const airTemp = useMemo(() => {
     const airTemp = airTempVal?.value[0] ?? 0;
     if (airTemp === null || airTemp === undefined) return '';
-    return `${airTemp.toFixed(0)}°${airTempVal?.unit ?? 'C'}`;
+    return `${airTemp.toFixed(0)}°${airTempVal?.unit || 'C'}`;
   }, [airTempVal?.unit, airTempVal?.value]);
 
   return { trackTemp, airTemp };

src/frontend/components/Weather/hooks/useTrackWeather.spec.tsx

@@ -0,0 +1,84 @@
+import { useTelemetry } from '@irdashies/context';
+import { TelemetryVar } from '@irdashies/types';
+import { renderHook } from '@testing-library/react';
+import { describe, beforeEach, vi, it, expect } from 'vitest';
+import { useTrackWeather } from './useTrackWeather';
+
+vi.mock('@irdashies/context');
+
+describe('useTrackWeather', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  const mockTelemetryVar = (value: number[]): TelemetryVar<number[]> => ({
+    value,
+    name: 'Mock',
+    description: 'Mock telemetry variable',
+    unit: '',
+    countAsTime: false,
+    length: value.length,
+    varType: 0,
+  });
+
+  it('should return track weather data from telemetry values', () => {
+    vi.mocked(useTelemetry).mockImplementation((key) => {
+      const mockValues = {
+        TrackWetness: mockTelemetryVar([2]),
+        YawNorth: mockTelemetryVar([45]),
+        WindDir: mockTelemetryVar([270]),
+        WindVel: mockTelemetryVar([8.3]),
+      };
+      return mockValues[key as keyof typeof mockValues];
+    });
+
+    const { result } = renderHook(() => useTrackWeather());
+
+    expect(result.current).toEqual({
+      trackState: 'Mostly Dry',
+      trackMoisture: mockTelemetryVar([2]),
+      windDirection: mockTelemetryVar([270]),
+      windVelo: mockTelemetryVar([8.3]),
+      windYaw: mockTelemetryVar([45]),
+    });
+  });
+
+  it('should handle undefined telemetry values', () => {
+    const mockFn = vi.fn();
+    mockFn.mockReturnValue(undefined);
+    vi.mocked(useTelemetry).mockImplementation(mockFn);
+
+    const { result } = renderHook(() => useTrackWeather());
+
+    expect(result.current).toEqual({
+      trackState: '',
+      trackMoisture: undefined,
+      windDirection: undefined,
+      windVelo: undefined,
+      windYaw: undefined,
+    });
+  });
+
+  it('should return correct track state for different wetness levels', () => {
+    const testCases = [
+      { wetness: 0, expected: '' },
+      { wetness: 1, expected: 'Dry' },
+      { wetness: 2, expected: 'Mostly Dry' },
+      { wetness: 3, expected: 'Very Lightly Wet' },
+      { wetness: 4, expected: 'Lightly Wet' },
+      { wetness: 5, expected: 'Moderately Wet' },
+      { wetness: 6, expected: 'Very Wet' },
+      { wetness: 7, expected: 'Extremely Wet' },
+      { wetness: 8, expected: '' }, // Invalid wetness level
+    ];
+
+    testCases.forEach(({ wetness, expected }) => {
+      vi.mocked(useTelemetry).mockImplementation((key) => {
+        return key === 'TrackWetness' ? mockTelemetryVar([wetness]) : mockTelemetryVar([0]);
+      });
+
+      const { result } = renderHook(() => useTrackWeather());
+      expect(result.current.trackState).toBe(expected);
+    });
+  });
+});

src/frontend/components/Weather/hooks/useWeather.tsx renamed to src/frontend/components/Weather/hooks/useTrackWeather.tsx

@@ -1,4 +1,4 @@
-import { useTelemetry, useTelemetryValue } from '@irdashies/context';
+import { useTelemetry } from '@irdashies/context';
 import { useMemo } from 'react';
 
 const wetnessLevels: Record<number, string> = {
@@ -12,24 +12,6 @@ const wetnessLevels: Record<number, string> = {
   7: 'Extremely Wet',
 };
 
-export const useWeather = () => {
-  const humidity = useTelemetryValue('RelativeHumidity');
-  const weatherType = useTelemetryValue('WeatherType');
-  const trackAirTemp = useTelemetryValue('AirTemp');
-  const trackSurfaceTemp = useTelemetryValue('PlayerTrackSurface');
-  const windVelocity = useTelemetryValue('WindVel');
-  const windDirection = useTelemetryValue('WindDir');
-
-  return {
-    humidity,
-    weatherType,
-    trackAirTemp,
-    trackSurfaceTemp,
-    windVelocity,
-    windDirection,
-  };
-};
-
 export const useTrackWeather = () => {
   const trackMoisture = useTelemetry('TrackWetness');
   const windYaw = useTelemetry('YawNorth');