Implements meteoChartsPage, fixed responsiveness overall

src/features/meteo/pages/MeteoPage.tsx

@@ -47,6 +47,7 @@ import { useAccumulatedHistory } from "../hooks/useAccumulatedHistory";
 import type { AccumulatedBucket } from "../hooks/useAccumulatedHistory";
 type MeteoPageProps = {
     theme: "dark" | "light";
+    onOpenMeteoCharts: () => void;
 };
 
 type ChartPoint = {
@@ -78,7 +79,7 @@ const HISTORY_KEYS = {
 
 type HistoryKey = (typeof HISTORY_KEYS)[keyof typeof HISTORY_KEYS];
 
-export function MeteoPage({ theme }: MeteoPageProps) {
+export function MeteoPage({ theme, onOpenMeteoCharts }: MeteoPageProps) {
     const { sensors } = useMeteoModuleStream();
     const weatherForecast = useWeatherForecast();
     const [weatherBoardOpen, setWeatherBoardOpen] = useState(false);
@@ -246,9 +247,11 @@ export function MeteoPage({ theme }: MeteoPageProps) {
 
                 <RealtimeChartPanel
                     theme={theme}
+                    onOpenMeteoCharts={onOpenMeteoCharts}
                     series={chartSeries}
                     historyLoading={historyLoading}
                     hours={HISTORY_HOURS}
+                    
                 />
             </div>
 
@@ -474,7 +477,7 @@ function formatAccumulatedValue(value: number | null, unit?: string) {
 
     if (unit === "Wh/m²") {
         return {
-            value: (value / 1000).toFixed(2),
+             value: value.toFixed(1),
             unit: "kWh/m²",
         };
     }
@@ -1153,15 +1156,18 @@ function windConsistency(
 
 function RealtimeChartPanel({
     theme,
+    onOpenMeteoCharts,
     series,
     historyLoading,
 }: {
     theme: "dark" | "light";
+    onOpenMeteoCharts: () => void;
     series: ChartSeries[];
     historyLoading: boolean;
     hours: number;
 }) {
     const [mode, setMode] = useState<WorkspaceChartMode>("line");
+
     const [timeRange, setTimeRange] = useState<WorkspaceChartTimeRange>("6h");
     const [interval, setInterval] = useState<WorkspaceChartInterval>("5m");
     const [visibleKeys, setVisibleKeys] = useState<HistoryKey[]>([
@@ -1212,6 +1218,7 @@ function RealtimeChartPanel({
                 <button
                     type="button"
                     className="rounded-[5px] border border-sky-400/20 bg-sky-400/10 px-3 py-2 text-xs font-black text-sky-200 transition hover:bg-sky-400/15"
+                    onClick={onOpenMeteoCharts}
                 >
                     Gráficos Personalizados
                 </button>