🌿 PlantCare — Smart Plant Monitor

\n \n\n\n",[18,67],"5c462178-2dad-11f1-88b9-42dde27851f2",["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 · frontend