Enhance farm dashboard components by refactoring to accept data props, improving API integration for dynamic data rendering. Updated FarmDashboardWrapper to fetch and manage card data, ensuring components like EconomicOverview, AnomalyDetectionCard, and others utilize the new data structure. Removed hardcoded values and added error handling for better resilience.

src/views/dashboards/farm/SensorRadarChart.tsx

@@ -18,18 +18,17 @@ import OptionMenu from '@core/components/option-menu'
 // Styled Component Imports
 const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
 
-// Vars - Today vs ideal ranges (normalized 0-100)
-const series = [
-  { name: 'Today', data: [75, 65, 80, 70, 85, 60] },
-  { name: 'Ideal', data: [80, 70, 75, 75, 90, 50] }
-]
+interface SensorRadarChartProps {
+  data?: Record<string, unknown>
+}
 
-const labels = ['Temp', 'Humidity', 'pH', 'EC', 'Light', 'Wind']
-
-const SensorRadarChart = () => {
+const SensorRadarChart = ({ data }: SensorRadarChartProps) => {
+  const series = (data?.series as Array<{ name: string; data: number[] }>) ?? []
+  const labels = (data?.labels as string[]) ?? []
   const theme = useTheme()
   const textDisabled = 'var(--mui-palette-text-disabled)'
   const divider = 'var(--mui-palette-divider)'
+  if (series.length === 0) return null
 
   const options: ApexOptions = {
     chart: {
@@ -61,7 +60,7 @@ const SensorRadarChart = () => {
         show: true,
         style: {
           fontSize: '13px',
-          colors: Array(6).fill(textDisabled)
+          colors: Array(labels.length || 6).fill(textDisabled)
         }
       }
     },