🌿 PlantCare — Smart Plant Monitor

\n \n\n\n","label",[153,64],"frontend","pulls","branches",1,"forks","envVars",{"_162":26,"_164":26},"connections",{"_162":26,"_163":26},"count","unfilledCount","emptyCount",{"_32":251,"_13":242,"_62":236,"_42":-5,"_34":35,"_146":252,"_147":139,"_36":253,"_38":26,"_65":206,"_149":-5,"_66":24,"_151":-5,"_182":254,"_17":255},{"_32":243,"_13":244,"_62":245,"_42":236,"_34":35,"_146":246,"_147":139,"_36":247,"_38":26,"_65":198,"_149":248,"_66":24,"_151":-5,"_182":249,"_17":250},{"_32":233,"_13":234,"_62":235,"_42":236,"_34":35,"_146":237,"_147":139,"_36":238,"_38":26,"_65":198,"_149":239,"_66":24,"_151":-5,"_182":240,"_17":241},{"_32":228,"_13":153,"_62":145,"_42":-5,"_34":35,"_146":229,"_147":139,"_36":230,"_38":26,"_65":206,"_149":-5,"_66":24,"_151":-5,"_182":231,"_17":232},{"_32":220,"_13":221,"_62":222,"_42":145,"_34":35,"_146":223,"_147":139,"_36":224,"_38":26,"_65":21,"_149":225,"_66":24,"_151":-5,"_182":226,"_17":227},{"_32":144,"_13":64,"_62":63,"_42":145,"_34":35,"_146":39,"_147":139,"_36":217,"_38":26,"_65":21,"_149":150,"_66":24,"_151":-5,"_182":218,"_17":219},{"_32":209,"_13":210,"_62":211,"_42":145,"_34":35,"_146":212,"_147":139,"_36":213,"_38":26,"_65":21,"_149":214,"_66":24,"_151":-5,"_182":215,"_17":216},{"_32":203,"_13":202,"_62":195,"_42":-5,"_34":35,"_146":204,"_147":139,"_36":205,"_38":26,"_65":206,"_149":-5,"_66":24,"_151":-5,"_182":207,"_17":208},{"_32":192,"_13":193,"_62":194,"_42":195,"_34":35,"_146":196,"_147":139,"_36":197,"_38":26,"_65":198,"_149":199,"_66":24,"_151":-5,"_182":200,"_17":201},{"_32":185,"_13":186,"_62":187,"_42":-5,"_34":35,"_146":108,"_147":139,"_36":188,"_38":26,"_65":21,"_149":189,"_66":24,"_151":-5,"_182":190,"_17":191},{"_32":176,"_13":177,"_62":178,"_42":-5,"_34":35,"_146":156,"_147":139,"_36":179,"_38":26,"_65":180,"_149":181,"_66":24,"_151":-5,"_182":183,"_17":184},"dca266b6-2dac-11f1-b5c0-42dde27851f2","main.ts","dca26792-2dac-11f1-b5c0-42dde27851f2",["D",1775035588438],"http","export { default } from \"./backend/index.ts\";\n","children",[],[177],"9a9e39ce-2dad-11f1-bb61-42dde27851f2","README.md","9a9e3a82-2dad-11f1-bb61-42dde27851f2",["D",1775035907178],"# 🌿 PlantCare — Smart Plant Health Monitoring System\n\nA full-stack IoT-inspired smart plant health dashboard with real-time sensor monitoring, AI-based health analysis, automation controls, and trend visualization.\n\n## ✨ Features\n\n| Feature | Details |\n|---|---|\n| 📊 Live Dashboard | Soil moisture, temperature, humidity with progress bars |\n| 🚨 Smart Alerts | Color-coded warnings (🟢 Healthy / 🟡 Moderate / 🔴 Critical) |\n| 🧠 AI Decisions | Stress level analysis with actionable suggestions |\n| ⚙️ Automation | Auto watering & cooling fan toggle controls |\n| 📈 Trend Chart | Line graph of last 20 readings (Chart.js) |\n| 🏗️ Architecture | System diagram showing full IoT data flow |\n| 📡 REST API | POST sensor data from real Arduino/ESP32 |\n\n## 🏗️ System Architecture\n\n```mermaid\nflowchart LR\n A[🌡️ Sensors\\nMoisture • Temp • Humidity] -->|Analog Signal| B[🤖 Microcontroller\\nArduino / ESP32]\n B -->|HTTP POST /api/reading| C[☁️ Cloud API\\nVal Town Backend]\n C -->|SQLite Storage| D[(Database\\nSensor History)]\n C -->|analyzeHealth| E[🧠 AI Engine\\nStress Analysis]\n E -->|JSON Response| F[📱 Dashboard\\nReact UI]\n F -->|Toggle Controls| C\n```\n\n## 📁 Project Structure\n\n```\nplant-health-monitor/\n├── main.ts # HTTP entrypoint\n├── backend/\n│ ├── index.ts # Hono routes\n│ └── database.ts # SQLite queries\n├── shared/\n│ └── types.ts # Types + AI health analysis\n└── frontend/\n ├── index.html # HTML shell\n ├── style.css # Green eco theme\n └── app.tsx # React dashboard\n```\n\n## 🔌 API Endpoints\n\n### `GET /api/status`\nReturns latest sensor reading + AI health analysis + automation state.\n\n### `GET /api/history?limit=20`\nReturns last N readings for chart rendering.\n\n### `POST /api/reading`\nIngest real sensor data from Arduino/ESP32:\n```json\n{ \"soilMoisture\": 45, \"temperature\": 28, \"humidity\": 60 }\n```\n\n### `POST /api/simulate`\nGenerate a simulated sensor reading (for demo/testing).\n\n### `GET|POST /api/automation`\nRead or update watering/fan automation state.\n\n## 🤖 AI Health Logic\n\n| Condition | Score | Alert |\n|---|---|---|\n| Moisture < 20% | +3 | 🚨 Critical dry |\n| Moisture < 40% | +1 | ⚠️ Low moisture |\n| Temp > 38°C | +3 | 🔥 Critical heat |\n| Temp > 32°C | +1 | 🌡️ Too warm |\n| Temp < 10°C | +2 | 🥶 Too cold |\n| Humidity < 30% | +1 | 💨 Dry air |\n| Humidity > 85% | +1 | 🌧️ Fungal risk |\n\n- Score 0 → **Healthy** 🟢 \n- Score 1–2 → **Moderate** 🟡 \n- Score 3+ → **Critical** 🔴\n\n## 🌱 Connecting a Real Sensor (Arduino/ESP32)\n\n```cpp\n// Arduino / ESP32 snippet\n#include \n#include \n\nHTTPClient http;\nhttp.begin(\"https://your-val-endpoint.web.val.run/api/reading\");\nhttp.addHeader(\"Content-Type\", \"application/json\");\n\nString body = \"{\\\"soilMoisture\\\":\" + String(moistureVal) +\n \",\\\"temperature\\\":\" + String(tempVal) +\n \",\\\"humidity\\\":\" + String(humidityVal) + \"}\";\n\nint code = http.POST(body);\n```\n",[],[186],"f5af35c6-2dac-11f1-869a-42dde27851f2","types.ts","f5af36e8-2dac-11f1-869a-42dde27851f2","eab94864-2dac-11f1-a5ae-42dde27851f2",5,["D",1775035630463],"script","export interface SensorReading {\n id?: number;\n timestamp: string;\n soilMoisture: number; // 0-100 %\n temperature: number; // Celsius\n humidity: number; // 0-100 %\n}\n\nexport interface PlantStatus {\n health: \"Healthy\" | \"Moderate\" | \"Critical\";\n color: \"green\" | \"yellow\" | \"red\";\n alerts: string[];\n suggestions: string[];\n autoWater: boolean;\n autoFan: boolean;\n}\n\nexport interface AutomationState {\n autoWater: boolean;\n autoFan: boolean;\n}\n\nexport function analyzeHealth(reading: SensorReading, automation: AutomationState): PlantStatus {\n const alerts: string[] = [];\n const suggestions: string[] = [];\n let stressScore = 0;\n\n // Soil moisture analysis\n if (reading.soilMoisture < 20) {\n stressScore += 3;\n alerts.push(\"🚨 Soil is critically dry!\");\n suggestions.push(\"💧 Water your plant immediately — soil moisture is below 20%.\");\n } else if (reading.soilMoisture < 40) {\n stressScore += 1;\n alerts.push(\"⚠️ Soil moisture is low.\");\n suggestions.push(\"💧 Consider watering soon — moisture is under 40%.\");\n }\n\n // Temperature analysis\n if (reading.temperature > 38) {\n stressScore += 3;\n alerts.push(\"🔥 Temperature is critically high!\");\n suggestions.push(\"❄️ Activate cooling immediately — temperature exceeds 38°C.\");\n } else if (reading.temperature > 32) {\n stressScore += 1;\n alerts.push(\"🌡️ Temperature is above optimal range.\");\n suggestions.push(\"🌬️ Consider turning on the fan — temperature is above 32°C.\");\n } else if (reading.temperature < 10) {\n stressScore += 2;\n alerts.push(\"🥶 Temperature is too cold for most plants.\");\n suggestions.push(\"🌿 Move plant to a warmer location.\");\n }\n\n // Humidity analysis\n if (reading.humidity < 30) {\n stressScore += 1;\n alerts.push(\"💨 Air humidity is too low.\");\n suggestions.push(\"🌫️ Mist the leaves or use a humidifier.\");\n } else if (reading.humidity > 85) {\n stressScore += 1;\n alerts.push(\"🌧️ Humidity is very high — risk of fungal growth.\");\n suggestions.push(\"🌀 Improve air circulation to reduce humidity.\");\n }\n\n let health: PlantStatus[\"health\"];\n let color: PlantStatus[\"color\"];\n\n if (stressScore === 0) {\n health = \"Healthy\";\n color = \"green\";\n suggestions.push(\"✅ Plant conditions are optimal. Keep it up!\");\n } else if (stressScore <= 2) {\n health = \"Moderate\";\n color = \"yellow\";\n } else {\n health = \"Critical\";\n color = \"red\";\n }\n\n return {\n health,\n color,\n alerts,\n suggestions,\n autoWater: automation.autoWater,\n autoFan: automation.autoFan,\n };\n}\n",[],[202,193],"shared","eab947a6-2dac-11f1-a5ae-42dde27851f2",4,["D",1775035612067],"directory",[173],[202],"36ee554e-2dad-11f1-a442-42dde27851f2","style.css","36ee5652-2dad-11f1-a442-42dde27851f2",9,["D",1775035739931],"/* ── PlantCare Global Styles ── */\n:root {\n --green-dark: #1a4731;\n --green-mid: #2d7a4f;\n --green-light: #4caf82;\n --green-pale: #e8f5ee;\n --green-accent: #34d970;\n --yellow: #f5c842;\n --yellow-light: #fff8dc;\n --red: #e63946;\n --red-light: #fff0f0;\n --blue: #2196f3;\n --blue-light: #e3f2fd;\n --gray-100: #f4f6f4;\n --gray-200: #e2e8e4;\n --gray-500: #6b7c74;\n --gray-700: #374840;\n --white: #ffffff;\n --shadow: 0 4px 20px rgba(45, 122, 79, 0.12);\n --shadow-hover: 0 8px 32px rgba(45, 122, 79, 0.2);\n --radius: 16px;\n --radius-sm: 10px;\n --transition: 0.25s ease;\n}\n\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\nbody {\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n background: var(--gray-100);\n color: var(--gray-700);\n min-height: 100vh;\n}\n\n/* ── Header ── */\n.header {\n background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 100%);\n color: white;\n padding: 0 24px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: sticky;\n top: 0;\n z-index: 100;\n box-shadow: 0 2px 16px rgba(0,0,0,0.2);\n}\n.header-brand { display: flex; align-items: center; gap: 12px; }\n.header-brand h1 { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.5px; }\n.header-brand .logo { font-size: 1.8rem; }\n.header-right { display: flex; align-items: center; gap: 16px; }\n.live-badge {\n display: flex; align-items: center; gap: 6px;\n background: rgba(255,255,255,0.15);\n padding: 5px 12px;\n border-radius: 20px;\n font-size: 0.8rem;\n font-weight: 600;\n}\n.live-dot {\n width: 8px; height: 8px;\n border-radius: 50%;\n background: var(--green-accent);\n animation: pulse 1.5s infinite;\n}\n@keyframes pulse {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.5; transform: scale(1.4); }\n}\n.source-link {\n color: rgba(255,255,255,0.7);\n text-decoration: none;\n font-size: 0.8rem;\n}\n.source-link:hover { color: white; }\n\n/* ── Layout ── */\n.container { max-width: 1200px; margin: 0 auto; padding: 24px 20px; }\n\n/* ── Health Banner ── */\n.health-banner {\n border-radius: var(--radius);\n padding: 20px 28px;\n margin-bottom: 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 12px;\n transition: var(--transition);\n}\n.health-banner.green { background: linear-gradient(135deg, #1e7c4a, #2d9e63); color: white; }\n.health-banner.yellow { background: linear-gradient(135deg, #c78f00, #e5a800); color: white; }\n.health-banner.red { background: linear-gradient(135deg, #b0222d, #d9323d); color: white; }\n.health-banner-left { display: flex; align-items: center; gap: 16px; }\n.health-icon { font-size: 2.8rem; }\n.health-title { font-size: 0.85rem; opacity: 0.85; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }\n.health-status { font-size: 1.8rem; font-weight: 800; }\n.health-timestamp { font-size: 0.8rem; opacity: 0.75; margin-top: 2px; }\n.simulate-btn {\n background: rgba(255,255,255,0.2);\n border: 2px solid rgba(255,255,255,0.4);\n color: white;\n padding: 10px 20px;\n border-radius: 30px;\n cursor: pointer;\n font-size: 0.85rem;\n font-weight: 600;\n transition: var(--transition);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.simulate-btn:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); }\n.simulate-btn:active { transform: translateY(0); }\n\n/* ── Sensor Cards ── */\n.section-title {\n font-size: 1rem;\n font-weight: 700;\n color: var(--green-dark);\n text-transform: uppercase;\n letter-spacing: 0.8px;\n margin-bottom: 14px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.cards-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 16px;\n margin-bottom: 28px;\n}\n.sensor-card {\n background: var(--white);\n border-radius: var(--radius);\n padding: 24px 20px;\n box-shadow: var(--shadow);\n transition: var(--transition);\n position: relative;\n overflow: hidden;\n}\n.sensor-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }\n.sensor-card::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 4px;\n}\n.sensor-card.moisture::before { background: linear-gradient(90deg, #2196f3, #64b5f6); }\n.sensor-card.temperature::before { background: linear-gradient(90deg, #ff6b35, #ff9a5c); }\n.sensor-card.humidity::before { background: linear-gradient(90deg, #26a69a, #4db6ac); }\n\n.card-icon {\n width: 48px; height: 48px;\n border-radius: 12px;\n display: flex; align-items: center; justify-content: center;\n font-size: 1.4rem;\n margin-bottom: 14px;\n}\n.card-icon.moisture { background: var(--blue-light); }\n.card-icon.temperature { background: #fff3e0; }\n.card-icon.humidity { background: #e0f2f1; }\n\n.card-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--gray-500); margin-bottom: 6px; }\n.card-value { font-size: 2.4rem; font-weight: 800; color: var(--gray-700); line-height: 1; }\n.card-unit { font-size: 1rem; font-weight: 400; color: var(--gray-500); }\n.card-bar { margin-top: 12px; height: 6px; background: var(--gray-200); border-radius: 3px; overflow: hidden; }\n.card-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }\n.moisture .card-bar-fill { background: linear-gradient(90deg, #2196f3, #64b5f6); }\n.temperature .card-bar-fill { background: linear-gradient(90deg, #ff6b35, #ff9a5c); }\n.humidity .card-bar-fill { background: linear-gradient(90deg, #26a69a, #4db6ac); }\n.card-status { font-size: 0.78rem; margin-top: 8px; font-weight: 600; }\n\n/* ── Two-col layout ── */\n.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }\n@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; } }\n\n/* ── Alerts Panel ── */\n.panel {\n background: var(--white);\n border-radius: var(--radius);\n padding: 22px 20px;\n box-shadow: var(--shadow);\n}\n.alert-item {\n display: flex; align-items: flex-start; gap: 10px;\n padding: 10px 14px;\n border-radius: var(--radius-sm);\n margin-bottom: 8px;\n font-size: 0.87rem;\n font-weight: 500;\n}\n.alert-item:last-child { margin-bottom: 0; }\n.alert-item.green { background: var(--green-pale); color: var(--green-dark); }\n.alert-item.yellow { background: var(--yellow-light); color: #7a5800; }\n.alert-item.red { background: var(--red-light); color: #8b0000; }\n.no-alerts { color: var(--gray-500); font-size: 0.88rem; text-align: center; padding: 20px 0; }\n\n/* ── AI Suggestions ── */\n.suggestion-item {\n display: flex; align-items: flex-start; gap: 10px;\n padding: 10px 14px;\n border-radius: var(--radius-sm);\n margin-bottom: 8px;\n font-size: 0.87rem;\n background: var(--green-pale);\n color: var(--green-dark);\n font-weight: 500;\n}\n\n/* ── Automation Controls ── */\n.automation-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin-bottom: 28px;\n}\n.control-card {\n background: var(--white);\n border-radius: var(--radius);\n padding: 22px 20px;\n box-shadow: var(--shadow);\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: var(--transition);\n}\n.control-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }\n.control-left { display: flex; align-items: center; gap: 14px; }\n.control-icon { font-size: 2rem; }\n.control-name { font-size: 0.95rem; font-weight: 700; color: var(--gray-700); }\n.control-sub { font-size: 0.78rem; color: var(--gray-500); margin-top: 2px; }\n\n/* Toggle switch */\n.toggle { position: relative; display: inline-block; width: 52px; height: 28px; }\n.toggle input { opacity: 0; width: 0; height: 0; }\n.slider {\n position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;\n background-color: var(--gray-200);\n transition: .3s;\n border-radius: 28px;\n}\n.slider:before {\n position: absolute; content: \"\";\n height: 20px; width: 20px;\n left: 4px; bottom: 4px;\n background-color: white;\n transition: .3s;\n border-radius: 50%;\n box-shadow: 0 2px 6px rgba(0,0,0,0.2);\n}\ninput:checked + .slider { background-color: var(--green-light); }\ninput:checked + .slider:before { transform: translateX(24px); }\n.toggle-label { font-size: 0.75rem; font-weight: 700; margin-top: 4px; text-align: center; color: var(--gray-500); }\ninput:checked ~ .toggle-label { color: var(--green-mid); }\n\n/* ── Chart ── */\n.chart-panel {\n background: var(--white);\n border-radius: var(--radius);\n padding: 22px 20px 18px;\n box-shadow: var(--shadow);\n margin-bottom: 28px;\n}\n.chart-container { position: relative; height: 260px; }\n\n/* ── Architecture Diagram ── */\n.arch-panel {\n background: var(--white);\n border-radius: var(--radius);\n padding: 24px 20px;\n box-shadow: var(--shadow);\n margin-bottom: 28px;\n}\n.arch-flow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px;\n padding: 20px 0;\n}\n.arch-node {\n display: flex; flex-direction: column; align-items: center;\n background: var(--green-pale);\n border: 2px solid var(--green-light);\n border-radius: var(--radius);\n padding: 16px 20px;\n min-width: 110px;\n text-align: center;\n transition: var(--transition);\n}\n.arch-node:hover { background: var(--green-light); color: white; transform: translateY(-2px); box-shadow: var(--shadow); }\n.arch-node .node-icon { font-size: 1.8rem; margin-bottom: 6px; }\n.arch-node .node-title { font-size: 0.78rem; font-weight: 700; color: var(--green-dark); text-transform: uppercase; letter-spacing: 0.5px; }\n.arch-node .node-sub { font-size: 0.7rem; color: var(--gray-500); margin-top: 2px; }\n.arch-node:hover .node-title, .arch-node:hover .node-sub { color: white; }\n.arch-arrow { font-size: 1.5rem; color: var(--green-mid); padding: 0 4px; }\n\n/* ── Footer ── */\n.footer {\n text-align: center;\n padding: 20px;\n color: var(--gray-500);\n font-size: 0.82rem;\n}\n.footer a { color: var(--green-mid); text-decoration: none; }\n\n/* ── Loading ── */\n.loading {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n height: 100vh;\n gap: 16px;\n color: var(--green-mid);\n}\n.spinner {\n width: 48px; height: 48px;\n border: 4px solid var(--green-pale);\n border-top-color: var(--green-mid);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n}\n@keyframes spin { to { transform: rotate(360deg); } }\n\n/* ── Responsive ── */\n@media (max-width: 480px) {\n .health-banner { padding: 16px 18px; }\n .health-status { font-size: 1.4rem; }\n .automation-grid { grid-template-columns: 1fr; }\n .header-brand h1 { font-size: 1.1rem; }\n .card-value { font-size: 2rem; }\n}\n",[],[153,210],["D",1775035683776],[],[153,64],"5c462178-2dad-11f1-88b9-42dde27851f2","app.tsx","5c462236-2dad-11f1-88b9-42dde27851f2",10,["D",1775035802582],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// ── Types ────────────────────────────────────────────────────\ninterface SensorReading {\n id?: number;\n timestamp: string;\n soilMoisture: number;\n temperature: number;\n humidity: number;\n}\ninterface PlantStatus {\n health: \"Healthy\" | \"Moderate\" | \"Critical\";\n color: \"green\" | \"yellow\" | \"red\";\n alerts: string[];\n suggestions: string[];\n}\ninterface AutomationState {\n autoWater: boolean;\n autoFan: boolean;\n}\n\n// ── Chart.js chart component ─────────────────────────────────\ndeclare const Chart: any;\n\nfunction TrendChart({ history }: { history: SensorReading[] }) {\n const canvasRef = useRef(null);\n const chartRef = useRef(null);\n\n useEffect(() => {\n if (!canvasRef.current || history.length === 0) return;\n const labels = history.map((r) => {\n const d = new Date(r.timestamp);\n return `${d.getHours().toString().padStart(2,\"0\")}:${d.getMinutes().toString().padStart(2,\"0\")}`;\n });\n\n if (chartRef.current) {\n chartRef.current.data.labels = labels;\n chartRef.current.data.datasets[0].data = history.map((r) => r.soilMoisture);\n chartRef.current.data.datasets[1].data = history.map((r) => r.temperature);\n chartRef.current.data.datasets[2].data = history.map((r) => r.humidity);\n chartRef.current.update();\n } else {\n chartRef.current = new Chart(canvasRef.current, {\n type: \"line\",\n data: {\n labels,\n datasets: [\n {\n label: \"Soil Moisture (%)\",\n data: history.map((r) => r.soilMoisture),\n borderColor: \"#2196f3\",\n backgroundColor: \"rgba(33,150,243,0.08)\",\n tension: 0.4,\n fill: true,\n pointRadius: 3,\n pointHoverRadius: 5,\n },\n {\n label: \"Temperature (°C)\",\n data: history.map((r) => r.temperature),\n borderColor: \"#ff6b35\",\n backgroundColor: \"rgba(255,107,53,0.08)\",\n tension: 0.4,\n fill: true,\n pointRadius: 3,\n pointHoverRadius: 5,\n },\n {\n label: \"Humidity (%)\",\n data: history.map((r) => r.humidity),\n borderColor: \"#26a69a\",\n backgroundColor: \"rgba(38,166,154,0.08)\",\n tension: 0.4,\n fill: true,\n pointRadius: 3,\n pointHoverRadius: 5,\n },\n ],\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n interaction: { mode: \"index\", intersect: false },\n plugins: {\n legend: { position: \"top\", labels: { font: { size: 12, weight: \"600\" }, padding: 16, usePointStyle: true } },\n tooltip: { backgroundColor: \"#1a4731\", titleColor: \"#fff\", bodyColor: \"#e8f5ee\", padding: 10, cornerRadius: 8 },\n },\n scales: {\n x: { grid: { color: \"rgba(0,0,0,0.04)\" }, ticks: { font: { size: 11 } } },\n y: { grid: { color: \"rgba(0,0,0,0.04)\" }, ticks: { font: { size: 11 } }, min: 0, max: 100 },\n },\n },\n });\n }\n }, [history]);\n\n return

History · index.html