Merge pull request #91 from OCA-UFCG/feat/state-hover

Feat/state hover

Author: cilasmarques

Dockerfile

@@ -2,12 +2,12 @@ FROM node:20.12.2
 
 WORKDIR /app
 
-USER node
-
 COPY --chown=node:node . .
 
 RUN npm install
 
+USER node
+
 EXPOSE 3000
 
-CMD ["npm", "run", "dev"]
+CMD ["npm", "run", "dev"]

src/components/MapPopup/MapPopup.styles.tsx

@@ -0,0 +1,61 @@
+import styled from "styled-components";
+
+export const PopupContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem;
+  gap: 0.2rem;
+  background-color: white;
+  border-radius: 8px;
+  color: black;
+  width: 12rem;
+`;
+
+export const Title = styled.h3`
+  font-weight: bold;
+  font-size: 1.1rem;
+`;
+
+export const Subtitle = styled.h4`
+  font-size: 0.8rem;
+  opacity: 0.7;
+`;
+
+export const TopHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+`;
+
+export const LineInfo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+`;
+
+export const TotalArea = styled.h3`
+  font-size: 1rem;
+  width: 6.5rem;
+`;
+
+export const PercentArea = styled.h3`
+  font-size: 1rem;
+  font-weight: bold;
+  text-align: right;
+  margin-left: auto; /* Isso alinha o PercentArea à extrema direita */
+  width: 2rem;
+`;
+
+export const Color = styled.div<{ color: string; $percent: number }>`
+  width: ${({ $percent }) => `${$percent / 30}rem`};
+  max-width: 100%;
+  height: 1.25rem;
+  border-radius: 4px;
+  background-color: ${({ color }) => color};
+  box-shadow: 0px 0px 4px #cdcdcd;
+  transition: 400ms;
+  border: solid thin #cdcdcd;
+  margin-left: 0;
+`;

src/components/MapPopup/MapPopup.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import {
+  PopupContent,
+  TopHeader,
+  Title,
+  Subtitle,
+  LineInfo,
+  TotalArea,
+  PercentArea,
+  Color,
+} from "./MapPopup.styles"; // Estilos importados
+
+interface AreaInfo {
+  color: string;
+  area: string;
+  percent: number;
+}
+
+interface MapPopupProps {
+  nameUF: string;
+  colors: string[];
+  nameRaster: string;
+  fcMetadata: any;
+}
+
+const MapPopup: React.FC<MapPopupProps> = ({
+  nameUF,
+  colors,
+  nameRaster,
+  fcMetadata,
+}) => {
+  const areas = Array.from({ length: 6 }, (_, index) => ({
+    area: fcMetadata[`Area_km2_${index + 1}`],
+    color: colors[index],
+    percent: fcMetadata[`Percent_${index + 1}`],
+  }))
+    .filter(({ percent }) => percent > 0)
+    .map((areaInfo) => {
+      const formattedArea =
+        areaInfo.area > 1000
+          ? `${(areaInfo.area / 1000).toFixed(1)} Mil Km²`
+          : `${areaInfo.area.toFixed(0)} Km²`;
+
+      return {
+        color: areaInfo.color,
+        area: formattedArea,
+        percent: areaInfo.percent.toFixed(0),
+      };
+    });
+
+  return (
+    <PopupContent>
+      <TopHeader>
+        <Title>{nameUF}</Title>
+        <Subtitle>{nameRaster}</Subtitle>
+      </TopHeader>
+      {areas.map((areaInfo: AreaInfo, index) => (
+        <LineInfo key={index}>
+          <TotalArea>{areaInfo.area}</TotalArea>
+          <Color color={areaInfo.color} $percent={areaInfo.percent} />
+          <PercentArea>{areaInfo.percent}%</PercentArea>
+        </LineInfo>
+      ))}
+    </PopupContent>
+  );
+};
+
+export default MapPopup;