From 99924ac1dffe2c34346f839c71f15fa65846710b Mon Sep 17 00:00:00 2001 From: litoral05 Date: Mon, 1 Jun 2026 12:23:37 +0100 Subject: [PATCH] Fixes responsiveness on the charts --- .../climate/hooks/useClimateChartSeries.ts | 55 ---------- .../climate/pages/ClimateChartsPage.tsx | 32 +++--- src/features/meteo/pages/MeteoChartsPage.tsx | 32 ++++-- src/features/synoptic/pages/SynopticPage.tsx | 101 +++++++++++------- 4 files changed, 101 insertions(+), 119 deletions(-) diff --git a/src/features/climate/hooks/useClimateChartSeries.ts b/src/features/climate/hooks/useClimateChartSeries.ts index 58061fa..b27cd30 100644 --- a/src/features/climate/hooks/useClimateChartSeries.ts +++ b/src/features/climate/hooks/useClimateChartSeries.ts @@ -130,59 +130,4 @@ function rangeToMs(range: WorkspaceChartTimeRange) { case "30d": return 30 * 24 * 60 * 60 * 1000; } -} - -function intervalToMs(interval: WorkspaceChartInterval) { - switch (interval) { - case "1m": - return 60 * 1000; - case "5m": - return 5 * 60 * 1000; - case "15m": - return 15 * 60 * 1000; - case "1h": - return 60 * 60 * 1000; - } -} - -function aggregatePoints( - points: WorkspaceChartPoint[], - interval: WorkspaceChartInterval, -): WorkspaceChartPoint[] { - const bucketMs = intervalToMs(interval); - - if (bucketMs === 0) { - return points; - } - - const buckets = new Map(); - - for (const point of points) { - const time = new Date(point.timestamp).getTime(); - - if (!Number.isFinite(time)) { - continue; - } - - const bucketTime = Math.floor(time / bucketMs) * bucketMs; - - const values = buckets.get(bucketTime) ?? []; - - if (point.value !== null && Number.isFinite(point.value)) { - values.push(point.value); - } - - buckets.set(bucketTime, values); - } - - return Array.from(buckets.entries()) - .sort(([a], [b]) => a - b) - .map(([bucketTime, values]) => ({ - timestamp: new Date(bucketTime).toISOString(), - value: average(values), - })); -} - -function average(values: number[]) { - return values.reduce((sum, value) => sum + value, 0) / values.length; } \ No newline at end of file diff --git a/src/features/climate/pages/ClimateChartsPage.tsx b/src/features/climate/pages/ClimateChartsPage.tsx index c17c02f..9671f8e 100644 --- a/src/features/climate/pages/ClimateChartsPage.tsx +++ b/src/features/climate/pages/ClimateChartsPage.tsx @@ -537,7 +537,7 @@ export function ClimateChartsPage({ theme }: ClimateChartsPageProps) { }, [layoutMode]); return ( -
+
Colocar em novo espaço @@ -858,10 +858,10 @@ function WorkspaceChartContainer({ }} className={ canReceiveMove - ? "relative rounded-[7px] ring-2 ring-[#4FD1C5]/50 transition" + ? "relative min-h-0 overflow-hidden rounded-[7px] ring-2 ring-[#4FD1C5]/50 transition" : isMoving - ? "relative rounded-[7px] opacity-60 ring-2 ring-[#4FD1C5]" - : "relative rounded-[7px]" + ? "relative min-h-0 overflow-hidden rounded-[7px] opacity-60 ring-2 ring-[#4FD1C5]" + : "relative min-h-0 overflow-hidden rounded-[7px]" } >
@@ -1462,15 +1462,19 @@ function EmptyVariableList({ theme }: { theme: "dark" | "light" }) { } function layoutGridClass(layoutMode: ChartLayoutMode) { - if (layoutMode === "twoColumns") { - return "grid gap-4 2xl:grid-cols-2"; - } - if (layoutMode === "fourGrid") { - return "grid gap-4 2xl:grid-cols-2"; + return "grid min-h-0 flex-1 grid-cols-2 grid-rows-2 gap-3 overflow-hidden"; } - return "grid gap-4"; + if (layoutMode === "twoColumns") { + return "grid min-h-0 flex-1 grid-cols-2 gap-3 overflow-hidden"; + } + + if (layoutMode === "twoRows") { + return "grid min-h-0 flex-1 grid-rows-2 gap-3 overflow-hidden"; + } + + return "grid min-h-0 flex-1 gap-3 overflow-hidden"; } function getVisibleSlotCount(layoutMode: ChartLayoutMode) { @@ -1566,8 +1570,8 @@ function EmptyWorkspace({
diff --git a/src/features/meteo/pages/MeteoChartsPage.tsx b/src/features/meteo/pages/MeteoChartsPage.tsx index a9c4561..9341db2 100644 --- a/src/features/meteo/pages/MeteoChartsPage.tsx +++ b/src/features/meteo/pages/MeteoChartsPage.tsx @@ -539,7 +539,7 @@ export function MeteoChartsPage({ }, [layoutMode]); return ( -
+
Colocar em novo espaço @@ -869,10 +869,10 @@ function WorkspaceChartContainer({ }} className={ canReceiveMove - ? "relative rounded-[7px] ring-2 ring-[#4FD1C5]/50 transition" + ? "relative min-h-0 overflow-hidden rounded-[7px] ring-2 ring-[#4FD1C5]/50 transition" : isMoving - ? "relative rounded-[7px] opacity-60 ring-2 ring-[#4FD1C5]" - : "relative rounded-[7px]" + ? "relative min-h-0 overflow-hidden rounded-[7px] opacity-60 ring-2 ring-[#4FD1C5]" + : "relative min-h-0 overflow-hidden rounded-[7px]" } >
@@ -1630,9 +1630,19 @@ function EmptyVariableList({ theme }: { theme: "dark" | "light" }) { } function layoutGridClass(layoutMode: ChartLayoutMode) { - if (layoutMode === "twoColumns") return "grid gap-4 2xl:grid-cols-2"; - if (layoutMode === "fourGrid") return "grid gap-4 2xl:grid-cols-2"; - return "grid gap-4"; + if (layoutMode === "fourGrid") { + return "grid min-h-0 flex-1 grid-cols-2 grid-rows-2 gap-3 overflow-hidden"; + } + + if (layoutMode === "twoColumns") { + return "grid min-h-0 flex-1 grid-cols-2 gap-3 overflow-hidden"; + } + + if (layoutMode === "twoRows") { + return "grid min-h-0 flex-1 grid-rows-2 gap-3 overflow-hidden"; + } + + return "grid min-h-0 flex-1 gap-3 overflow-hidden"; } function getVisibleSlotCount(layoutMode: ChartLayoutMode) { @@ -1728,8 +1738,8 @@ function EmptyWorkspace({
diff --git a/src/features/synoptic/pages/SynopticPage.tsx b/src/features/synoptic/pages/SynopticPage.tsx index 180f28a..9e92edf 100644 --- a/src/features/synoptic/pages/SynopticPage.tsx +++ b/src/features/synoptic/pages/SynopticPage.tsx @@ -361,10 +361,10 @@ export function SynopticPage({ theme }: SynopticPageProps) { return (
-
- +
+ -
+
-
- +
+
@@ -419,7 +420,7 @@ function WorkspaceBar() {
- } label="Novo" /> - } label="Guardar" primary /> - } label="Atualizar" /> + } label="Novo" /> + } label="Guardar" primary /> + } label="Atualizar" /> -
+
Alterações guardadas
@@ -442,10 +443,12 @@ function WorkspaceBar() { } function WorkspaceButton({ + isDark, icon, label, primary, }: { + isDark: boolean; icon: ReactNode; label: string; primary?: boolean; @@ -465,7 +468,11 @@ function WorkspaceButton({ return (
-
-
@@ -719,6 +730,7 @@ function Toolbar() { } function CanvasMock({ + isDark, canvasRef, items, variablesById, @@ -728,6 +740,7 @@ function CanvasMock({ onCardPointerMove, onCardPointerUp, }: { + isDark: boolean; canvasRef: RefObject; items: MapItem[]; variablesById: Map; @@ -738,7 +751,7 @@ function CanvasMock({ onCardPointerUp: (event: PointerEvent) => void; }) { return ( -
+
{items.length === 0 && ( -
-

+

+

Arraste variáveis para a imagem

@@ -783,7 +796,7 @@ function CanvasMock({ ); })} -

+
@@ -795,7 +808,7 @@ function CanvasMock({
-
+
100%
@@ -928,17 +941,17 @@ function PropertiesPanel({