DiogoVieira14/litoral-central-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes responsiveness on the charts

Browse Source
This commit is contained in:
litoral05
2026-06-01 12:23:37 +01:00
parent 6e44522782
commit 99924ac1df
4 changed files with 101 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/synoptic/pages/SynopticPage.tsx
+62 -39
View File
@@ -361,10 +361,10 @@ export function SynopticPage({ theme }: SynopticPageProps) {
return (
<div className={isDark ? "h-full text-white" : "h-full text-[#0F172A]"}>
<div className="flex h-[calc(100vh-104px)] min-h-[560px] min-w-[1024px] flex-col gap-2 overflow-hidden min-[1220px]:gap-3">
<WorkspaceBar />
<div className="flex h-[calc(100vh-104px)] min-h-0 min-w-0 flex-col gap-2 overflow-hidden min-[1220px]:gap-3">
<WorkspaceBar isDark={isDark} />
<main className="grid min-h-0 flex-1 grid-cols-[200px_minmax(520px,1fr)_220px] gap-2 overflow-hidden min-[1220px]:grid-cols-[220px_minmax(600px,1fr)_240px] min-[1450px]:grid-cols-[270px_minmax(720px,1fr)_290px] min-[1220px]:gap-3">
<main className="grid min-h-0 min-w-0 flex-1 grid-cols-[180px_minmax(0,1fr)_210px] gap-2 overflow-hidden min-[1180px]:grid-cols-[200px_minmax(0,1fr)_230px] min-[1320px]:grid-cols-[230px_minmax(0,1fr)_260px] min-[1450px]:grid-cols-[270px_minmax(0,1fr)_290px] min-[1220px]:gap-3">
<VariablesPanel
isDark={isDark}
variables={synoptic.variables}
@@ -379,10 +379,11 @@ export function SynopticPage({ theme }: SynopticPageProps) {
onVariablePointerUp={handleVariablePointerUp}
/>
<section className="relative min-h-0 overflow-hidden rounded-[8px] bg-[#0E1726]">
<Toolbar />
<section className={isDark ? "relative min-h-0 min-w-0 overflow-hidden rounded-[8px] bg-[#0E1726]" : "relative min-h-0 min-w-0 overflow-hidden rounded-[8px] border border-[#D7DEE8] bg-white"}>
<Toolbar isDark={isDark} />
<CanvasMock
isDark={isDark}
canvasRef={canvasRef}
items={items}
variablesById={variablesById}
@@ -408,7 +409,7 @@ export function SynopticPage({ theme }: SynopticPageProps) {
);
}
function WorkspaceBar() {
function WorkspaceBar({ isDark }: { isDark: boolean }) {
return (
<section className="flex h-[52px] shrink-0 items-center justify-between gap-3 bg-transparent min-[1220px]:h-[58px]">
<div className="min-w-0">
@@ -419,7 +420,7 @@ function WorkspaceBar() {
<div className="mt-2 flex items-center gap-2">
<button
type="button"
className="flex min-w-0 items-center gap-2 text-[15px] font-black leading-none tracking-[-0.03em] text-white"
className={isDark ? "flex min-w-0 items-center gap-2 text-[15px] font-black leading-none tracking-[-0.03em] text-white" : "flex min-w-0 items-center gap-2 text-[15px] font-black leading-none tracking-[-0.03em] text-[#0F172A]"}
>
<span className="truncate">Estufa Principal</span>
<ChevronDown className="h-4 w-4 shrink-0 text-[#7F8CA3]" />
@@ -428,11 +429,11 @@ function WorkspaceBar() {
</div>
<div className="flex min-w-0 items-center gap-2 overflow-x-auto pb-1">
<WorkspaceButton icon={<FolderPlus className="h-4 w-4" />} label="Novo" />
<WorkspaceButton icon={<Save className="h-4 w-4" />} label="Guardar" primary />
<WorkspaceButton icon={<RefreshCw className="h-4 w-4" />} label="Atualizar" />
<WorkspaceButton isDark={isDark} icon={<FolderPlus className="h-4 w-4" />} label="Novo" />
<WorkspaceButton isDark={isDark} icon={<Save className="h-4 w-4" />} label="Guardar" primary />
<WorkspaceButton isDark={isDark} icon={<RefreshCw className="h-4 w-4" />} label="Atualizar" />
<div className="ml-1 flex h-9 shrink-0 items-center gap-2 rounded-[6px] border border-[#263247] bg-[#0E1726] px-3 text-xs font-black text-[#A8B3C7] min-[1220px]:ml-3 min-[1220px]:px-4">
<div className={isDark ? "ml-1 flex h-9 shrink-0 items-center gap-2 rounded-[6px] border border-[#263247] bg-[#0E1726] px-3 text-xs font-black text-[#A8B3C7] min-[1220px]:ml-3 min-[1220px]:px-4" : "ml-1 flex h-9 shrink-0 items-center gap-2 rounded-[6px] border border-[#D7DEE8] bg-white px-3 text-xs font-black text-slate-600 min-[1220px]:ml-3 min-[1220px]:px-4"}>
<span className="h-2 w-2 rounded-full bg-[#18B8A6]" />
Alterações guardadas
</div>
@@ -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 (
<button
type="button"
className="flex h-9 shrink-0 items-center gap-2 rounded-[6px] border border-[#263247] bg-[#0E1726] px-3 text-xs font-black text-[#D7DEE8] transition hover:border-[#36506D] hover:text-white"
className={
isDark
? "flex h-9 shrink-0 items-center gap-2 rounded-[6px] border border-[#263247] bg-[#0E1726] px-3 text-xs font-black text-[#D7DEE8] transition hover:border-[#36506D] hover:text-white"
: "flex h-9 shrink-0 items-center gap-2 rounded-[6px] border border-[#D7DEE8] bg-white px-3 text-xs font-black text-slate-700 transition hover:bg-[#F8FAFC] hover:text-[#0F172A]"
}
>
{icon}
{label}
@@ -528,11 +535,11 @@ function VariablesPanel({
<aside
className={
isDark
? "flex min-h-0 flex-col rounded-[8px] border border-[#263247] bg-[#0E1726]"
: "flex min-h-0 flex-col rounded-[8px] border border-[#D7DEE8] bg-white"
? "flex min-h-0 min-w-0 flex-col rounded-[8px] border border-[#263247] bg-[#0E1726]"
: "flex min-h-0 min-w-0 flex-col rounded-[8px] border border-[#D7DEE8] bg-white"
}
>
<div className="flex h-12 shrink-0 items-center justify-between border-b border-[#263247]/70 px-3 min-[1450px]:px-4">
<div className={isDark ? "flex h-12 shrink-0 items-center justify-between border-b border-[#263247]/70 px-3 min-[1450px]:px-4" : "flex h-12 shrink-0 items-center justify-between border-b border-[#D7DEE8] px-3 min-[1450px]:px-4"}>
<div>
<h2 className="text-base font-black">Variáveis</h2>
<p className="text-[11px] font-bold text-[#7F8CA3]">
@@ -553,7 +560,9 @@ function VariablesPanel({
className={
activeGroup === item
? "shrink-0 border-b-2 border-[#18B8A6] pb-2 text-[#18B8A6]"
: "shrink-0 pb-2 text-[#7F8CA3] transition hover:text-white"
: isDark
? "shrink-0 pb-2 text-[#7F8CA3] transition hover:text-white"
: "shrink-0 pb-2 text-slate-500 transition hover:text-[#0F172A]"
}
>
{item}
@@ -617,7 +626,7 @@ function VariablesPanel({
</div>
{groupVariables.length === 0 ? (
<div className="border-t border-[#1C2A3D] px-3 py-3 text-[11px] font-bold text-[#7F8CA3]">
<div className={isDark ? "border-t border-[#1C2A3D] px-3 py-3 text-[11px] font-bold text-[#7F8CA3]" : "border-t border-[#E2E8F0] px-3 py-3 text-[11px] font-bold text-slate-500"}>
Sem variáveis disponíveis
</div>
) : (
@@ -684,7 +693,7 @@ function VariablesPanel({
);
}
function Toolbar() {
function Toolbar({ isDark }: { isDark: boolean }) {
const tools = [
{ label: "Selecionar", icon: <LocateFixed className="h-4 w-4" />, active: true },
{ label: "Mover", icon: <Move className="h-4 w-4" /> },
@@ -693,14 +702,16 @@ function Toolbar() {
return (
<div className="absolute left-3 right-3 top-3 z-20 flex items-start justify-between gap-2 min-[1450px]:left-4 min-[1450px]:right-4 min-[1450px]:top-4">
<div className="flex max-w-[calc(100%-88px)] items-center gap-1 overflow-x-auto rounded-[8px] border border-[#263247] bg-[#07101B]/92 p-1 shadow-xl backdrop-blur">
<div className={isDark ? "flex max-w-[calc(100%-88px)] items-center gap-1 overflow-x-auto rounded-[8px] border border-[#263247] bg-[#07101B]/92 p-1 shadow-xl backdrop-blur" : "flex max-w-[calc(100%-88px)] items-center gap-1 overflow-x-auto rounded-[8px] border border-[#D7DEE8] bg-white/92 p-1 shadow-xl backdrop-blur"}>
{tools.map((tool) => (
<button
key={tool.label}
className={
tool.active
? "flex h-9 shrink-0 items-center gap-2 rounded-[6px] border border-[#18B8A6] bg-[#18B8A6]/15 px-3 text-xs font-black text-[#18B8A6] min-[1450px]:px-4"
: "flex h-9 shrink-0 items-center gap-2 rounded-[6px] px-3 text-xs font-bold text-[#A8B3C7] transition hover:bg-white/10 hover:text-white min-[1450px]:px-4"
: isDark
? "flex h-9 shrink-0 items-center gap-2 rounded-[6px] px-3 text-xs font-bold text-[#A8B3C7] transition hover:bg-white/10 hover:text-white min-[1450px]:px-4"
: "flex h-9 shrink-0 items-center gap-2 rounded-[6px] px-3 text-xs font-bold text-slate-600 transition hover:bg-[#F1F5F9] hover:text-[#0F172A] min-[1450px]:px-4"
}
>
{tool.icon}
@@ -709,8 +720,8 @@ function Toolbar() {
))}
</div>
<div className="flex shrink-0 items-center gap-1 rounded-[8px] border border-[#263247] bg-[#07101B]/92 p-1 shadow-xl backdrop-blur">
<button className={smallToolClass}>
<div className={isDark ? "flex shrink-0 items-center gap-1 rounded-[8px] border border-[#263247] bg-[#07101B]/92 p-1 shadow-xl backdrop-blur" : "flex shrink-0 items-center gap-1 rounded-[8px] border border-[#D7DEE8] bg-white/92 p-1 shadow-xl backdrop-blur"}>
<button className={smallToolClass(isDark)}>
<Settings2 className="h-4 w-4" />
</button>
</div>
@@ -719,6 +730,7 @@ function Toolbar() {
}
function CanvasMock({
isDark,
canvasRef,
items,
variablesById,
@@ -728,6 +740,7 @@ function CanvasMock({
onCardPointerMove,
onCardPointerUp,
}: {
isDark: boolean;
canvasRef: RefObject<HTMLDivElement | null>;
items: MapItem[];
variablesById: Map<string, SynopticVariable>;
@@ -738,7 +751,7 @@ function CanvasMock({
onCardPointerUp: (event: PointerEvent<HTMLDivElement>) => void;
}) {
return (
<div className="flex h-full w-full items-center justify-center overflow-hidden bg-[#07101B] p-2">
<div className={isDark ? "flex h-full w-full items-center justify-center overflow-hidden bg-[#07101B] p-2" : "flex h-full w-full items-center justify-center overflow-hidden bg-[#F8FAFC] p-2"}>
<div
ref={canvasRef}
className="relative h-full max-h-full max-w-full overflow-hidden rounded-[6px]"
@@ -752,8 +765,8 @@ function CanvasMock({
/>
{items.length === 0 && (
<div className="pointer-events-none absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-[8px] border border-dashed border-[#18B8A6]/50 bg-[#07101B]/80 px-5 py-4 text-center shadow-xl">
<p className="text-sm font-black text-white">
<div className={isDark ? "pointer-events-none absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-[8px] border border-dashed border-[#18B8A6]/50 bg-[#07101B]/80 px-5 py-4 text-center shadow-xl" : "pointer-events-none absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-[8px] border border-dashed border-[#18B8A6]/60 bg-white/85 px-5 py-4 text-center shadow-xl"}>
<p className={isDark ? "text-sm font-black text-white" : "text-sm font-black text-[#0F172A]"}>
Arraste variáveis para a imagem
</p>
<p className="mt-1 text-xs font-bold text-[#7F8CA3]">
@@ -783,7 +796,7 @@ function CanvasMock({
);
})}
<div className="absolute bottom-4 left-4 z-20 flex flex-col overflow-hidden rounded-[7px] border border-[#263247] bg-[#07101B]/90 shadow-xl">
<div className={isDark ? "absolute bottom-4 left-4 z-20 flex flex-col overflow-hidden rounded-[7px] border border-[#263247] bg-[#07101B]/90 shadow-xl" : "absolute bottom-4 left-4 z-20 flex flex-col overflow-hidden rounded-[7px] border border-[#D7DEE8] bg-white/90 shadow-xl"}>
<button className="grid h-9 w-9 place-items-center text-white hover:bg-white/10 min-[1450px]:h-10 min-[1450px]:w-10">
<Plus className="h-5 w-5" />
</button>
@@ -795,7 +808,7 @@ function CanvasMock({
</button>
</div>
<div className="absolute bottom-4 right-4 z-20 rounded-[7px] bg-[#07101B]/90 px-3 py-2 text-xs font-black text-white shadow-xl">
<div className={isDark ? "absolute bottom-4 right-4 z-20 rounded-[7px] bg-[#07101B]/90 px-3 py-2 text-xs font-black text-white shadow-xl" : "absolute bottom-4 right-4 z-20 rounded-[7px] bg-white/90 px-3 py-2 text-xs font-black text-[#0F172A] shadow-xl"}>
100%
</div>
</div>
@@ -928,17 +941,17 @@ function PropertiesPanel({
<aside
className={
isDark
? "flex min-h-0 flex-col rounded-[8px] border border-[#263247] bg-[#0E1726]"
: "flex min-h-0 flex-col rounded-[8px] border border-[#D7DEE8] bg-white"
? "flex min-h-0 min-w-0 flex-col rounded-[8px] border border-[#263247] bg-[#0E1726]"
: "flex min-h-0 min-w-0 flex-col rounded-[8px] border border-[#D7DEE8] bg-white"
}
>
<div className="flex h-12 shrink-0 items-center justify-between border-b border-[#263247]/70 px-3 min-[1450px]:px-4">
<div className={isDark ? "flex h-12 shrink-0 items-center justify-between border-b border-[#263247]/70 px-3 min-[1450px]:px-4" : "flex h-12 shrink-0 items-center justify-between border-b border-[#D7DEE8] px-3 min-[1450px]:px-4"}>
<h2 className="text-base font-black">Propriedades</h2>
<X className="h-4 w-4 text-[#7F8CA3]" />
</div>
<div className="min-h-0 flex-1 overflow-y-auto p-3 min-[1450px]:p-4">
<div className="rounded-[7px] border border-[#263247] bg-[#07101B] p-4 text-center">
<div className={isDark ? "rounded-[7px] border border-[#263247] bg-[#07101B] p-4 text-center" : "rounded-[7px] border border-[#D7DEE8] bg-[#F8FAFC] p-4 text-center"}>
<p className="text-sm font-black">Nenhum item selecionado</p>
<p className="mt-1 text-xs font-bold text-[#7F8CA3]">
Arraste uma variável para a imagem.
@@ -955,11 +968,11 @@ function PropertiesPanel({
<aside
className={
isDark
? "flex min-h-0 flex-col rounded-[8px] border border-[#263247] bg-[#0E1726]"
: "flex min-h-0 flex-col rounded-[8px] border border-[#D7DEE8] bg-white"
? "flex min-h-0 min-w-0 flex-col rounded-[8px] border border-[#263247] bg-[#0E1726]"
: "flex min-h-0 min-w-0 flex-col rounded-[8px] border border-[#D7DEE8] bg-white"
}
>
<div className="flex h-12 shrink-0 items-center justify-between border-b border-[#263247]/70 px-3 min-[1450px]:px-4">
<div className={isDark ? "flex h-12 shrink-0 items-center justify-between border-b border-[#263247]/70 px-3 min-[1450px]:px-4" : "flex h-12 shrink-0 items-center justify-between border-b border-[#D7DEE8] px-3 min-[1450px]:px-4"}>
<h2 className="text-base font-black">Propriedades</h2>
<X className="h-4 w-4 text-[#7F8CA3]" />
</div>
@@ -993,6 +1006,7 @@ function PropertiesPanel({
<PanelSection title="Cartão">
<SegmentedControl
isDark={isDark}
value={selectedItem.variant}
options={[
{ label: "Compacto", value: "compact" },
@@ -1007,7 +1021,9 @@ function PropertiesPanel({
className={
selectedItem.showLabel
? "flex h-10 w-full items-center justify-between rounded-[6px] border border-[#18B8A6] bg-[#18B8A6]/10 px-3 text-sm font-black text-[#18B8A6]"
: "flex h-10 w-full items-center justify-between rounded-[6px] border border-[#263247] bg-[#07101B] px-3 text-sm font-bold text-[#A8B3C7]"
: isDark
? "flex h-10 w-full items-center justify-between rounded-[6px] border border-[#263247] bg-[#07101B] px-3 text-sm font-bold text-[#A8B3C7]"
: "flex h-10 w-full items-center justify-between rounded-[6px] border border-[#D7DEE8] bg-[#F8FAFC] px-3 text-sm font-bold text-slate-600"
}
>
Mostrar nome
@@ -1070,16 +1086,18 @@ function clampPercent(value: number) {
}
function SegmentedControl({
isDark,
value,
options,
onChange,
}: {
isDark: boolean;
value: string;
options: { label: string; value: string }[];
onChange: (value: string) => void;
}) {
return (
<div className="grid grid-cols-2 rounded-[6px] border border-[#263247] bg-[#07101B] p-1">
<div className={isDark ? "grid grid-cols-2 rounded-[6px] border border-[#263247] bg-[#07101B] p-1" : "grid grid-cols-2 rounded-[6px] border border-[#D7DEE8] bg-[#F8FAFC] p-1"}>
{options.map((option) => (
<button
key={option.value}
@@ -1088,7 +1106,9 @@ function SegmentedControl({
className={
value === option.value
? "h-8 rounded-[5px] bg-[#18B8A6] text-xs font-black text-white"
: "h-8 rounded-[5px] text-xs font-bold text-[#7F8CA3] transition hover:text-white"
: isDark
? "h-8 rounded-[5px] text-xs font-bold text-[#7F8CA3] transition hover:text-white"
: "h-8 rounded-[5px] text-xs font-bold text-slate-500 transition hover:text-[#0F172A]"
}
>
{option.label}
@@ -1098,8 +1118,11 @@ function SegmentedControl({
);
}
const smallToolClass =
"grid h-9 w-9 place-items-center rounded-[6px] text-[#A8B3C7] transition hover:bg-white/10 hover:text-white";
function smallToolClass(isDark: boolean) {
return isDark
? "grid h-9 w-9 place-items-center rounded-[6px] text-[#A8B3C7] transition hover:bg-white/10 hover:text-white"
: "grid h-9 w-9 place-items-center rounded-[6px] text-slate-600 transition hover:bg-[#F1F5F9] hover:text-[#0F172A]";
}
function formatVariableValue(variable: SynopticVariable) {
if (variable.value === null || variable.value === undefined) {