feat: 928, 861 and 930

basedosdados · Sep 8, 2024 · 241d693 · 241d693
1 parent bfb8441
commit 241d693
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 37 deletions.
diff --git a/next/components/atoms/ObservationLevelTable.js b/next/components/atoms/ObservationLevelTable.js
@@ -17,7 +17,25 @@ export default function ObservationLevel({ resource }) {
   keys.forEach((elm) => {
     const value = resource?.observationLevels[elm]
 
-    const newValue = [value?.entity?.name || "Não informado", value?.columns[0]?.name || "Não informado"]
+    const valueEntity = () => {
+      if(value.entity.name) return value.entity.name
+      return "Não informado"
+    }
+
+    const valueColumns = () => {
+      let columns = []
+
+      if(value?.columns[0]) {
+        Object.values(value.columns).map((column) => {
+          columns.push(column?.name)
+        })
+      } else {
+        columns = ["Não informado"]
+      }
+      return columns.join(", ")
+    }
+
+    const newValue = [valueEntity(), valueColumns()]
     array.push(newValue)
   })
 

diff --git a/next/components/molecules/TemporalCoverageDisplay.js b/next/components/molecules/TemporalCoverageDisplay.js
@@ -168,7 +168,8 @@ export function TemporalCoverageBar ({ value }) {
   return (
     <HStack 
       position="relative"  
-      width="325px"
+      width="100%"
+      maxWidth="325px"
       height="65px"
       alignItems="normal"
       spacing={0}
@@ -219,7 +220,11 @@ export function TemporalCoverageBar ({ value }) {
         maxWidth="160px"
         label="Acesso liberado para o período"
       >
-        <Box flex={3} display={values?.["0"] ? "" : "none"}>
+        <Box
+          flex={3}
+          marginRight={values?.["3"] ? "" : {base:"24px !important", lg: "0"}}
+          display={values?.["0"] ? "" : "none"}
+        >
           <Box
             width="100%"
             height="24px"
@@ -312,7 +317,7 @@ export function TemporalCoverageBar ({ value }) {
         maxWidth="160px"
         label="Faça o upgrade para liberar o período"
       >
-        <Box flex={2} display={values?.["3"] ? "" : "none"}>
+        <Box flex={2} marginRight={{base:"24px !important", lg: "0"}}  display={values?.["3"] ? "" : "none"}>
           <Box
             as="a"
             cursor="pointer"

diff --git a/next/components/organisms/BdmTablePage.js b/next/components/organisms/BdmTablePage.js
@@ -284,7 +284,7 @@ export default function BdmTablePage({ id }) {
       </SkeletonText>
 
       <Stack spacing="12px" marginBottom="40px !important">
-        <StackSkeleton width="240px" height="20px">
+        <StackSkeleton width="300px" height="20px">
           <Text
             fontFamily="Roboto"
             fontWeight="500"
@@ -297,15 +297,15 @@ export default function BdmTablePage({ id }) {
         </StackSkeleton>
 
         <StackSkeleton
-          width="350px"
+          width="100%"
           height={!isLoading ? "fit-content" : "65px"}
         >
           <TemporalCoverageBar value={resource?.fullCoverage}/>
         </StackSkeleton>
       </Stack>
 
       <Stack spacing="12px" marginBottom="40px !important">
-        <StackSkeleton width="160px" height="20px">
+        <StackSkeleton width="200px" height="20px">
           <Text
             fontFamily="Roboto"
             fontWeight="500"
@@ -323,7 +323,7 @@ export default function BdmTablePage({ id }) {
       </Stack>
 
       <Stack marginBottom="40px !important">
-        <StackSkeleton width="300px" height="20px">
+        <StackSkeleton width="380px" height="20px">
           <Text
             fontFamily="Roboto"
             fontWeight="500"
@@ -521,7 +521,7 @@ export default function BdmTablePage({ id }) {
 
 
       <Stack marginBottom="40px !important">
-        <StackSkeleton width="205px" height="20px">
+        <StackSkeleton width="260px" height="20px">
           <TooltipText
             text="Partições no BigQuery"
             info="As partições são divisões feitas em uma tabela para facilitar o gerenciamento e a consulta aos dados. Ao segmentar uma tabela grande em partições menores, a quantidade de bytes lidos é reduzida, o que ajuda a controlar os custos e melhora o desempenho da consulta."
@@ -545,7 +545,7 @@ export default function BdmTablePage({ id }) {
       </Stack>
 
       <Stack marginBottom="40px !important">
-        <StackSkeleton width="190px" height="20px">
+        <StackSkeleton width="300px" height="20px">
           <TooltipText
             text="Nível da observação"
             info="Indica qual a menor granularidade possível de análise com aquele dado. Por exemplo, uma tabela com nível da observação de estado permite que façamos uma análise no país (por ser mais amplo que estado), mas não uma análise por município (que já seria um recorte mais específico)."
@@ -577,7 +577,7 @@ export default function BdmTablePage({ id }) {
       </Stack>
 
       <Stack marginBottom="40px !important">
-        <StackSkeleton width="180px" height="20px">
+        <StackSkeleton width="240px" height="20px">
           <TooltipText
             text="Arquivos auxiliares"
             info="Os arquivos dão mais contexto e ajudam a entender melhor os dados disponíveis. Podem incluir notas técnicas, descrições de coleta e amostragem, etc."
@@ -628,7 +628,7 @@ export default function BdmTablePage({ id }) {
       </Stack>
 
       <Stack>
-        <StackSkeleton width="155px" height="20px">
+        <StackSkeleton width="240px" height="20px">
           <TooltipText
             text="Fontes originais"
             info="São links para páginas externas à plataforma com informações úteis sobre o conjunto de dados. Tentamos sempre fornecer o caminho mais próximo possível à fonte para baixar os dados originais."
@@ -647,38 +647,43 @@ export default function BdmTablePage({ id }) {
             lineHeight="20px"
             color="#464A51"
           >
-            {resource?.rawDataSource?.[0]?._id && resource?.rawDataSource?.[0]?.dataset?._id ? 
-              <Text
-                as="a"
-                target="_blank"
-                display="flex"
-                flexDirection="row"
-                gap="8px"
-                alignItems="center"
-                fontFamily="Roboto"
-                fontWeight="400"
-                fontSize="14px"
-                lineHeight="20px"
-                color="#0068C5"
-                fill="#0068C5"
-                _hover={{
-                  fill: "#0057A4",
-                  color: "#0057A4"
-                }}
-                href={`/dataset/${resource.rawDataSource[0].dataset._id}?raw_data_source=${resource.rawDataSource[0]._id}`}
-              >
-                {resource.rawDataSource[0].name}
-              </Text>
-            :
-              "Não informado"
+            {resource?.rawDataSource?.[0]?._id ?
+              Object.values(resource?.rawDataSource).map((elm, i) => {
+                return (
+                  <Text
+                    key={i}
+                    as="a"
+                    target="_blank"
+                    display="flex"
+                    flexDirection="row"
+                    gap="8px"
+                    alignItems="center"
+                    fontFamily="Roboto"
+                    fontWeight="400"
+                    fontSize="14px"
+                    lineHeight="20px"
+                    color="#0068C5"
+                    fill="#0068C5"
+                    _hover={{
+                      fill: "#0057A4",
+                      color: "#0057A4"
+                    }}
+                    href={`/dataset/${elm?.dataset?._id}?raw_data_source=${elm?._id}`}
+                  >
+                    {elm?.name}
+                  </Text>
+                )
+              }) 
+              :
+                "Não informado"
             }
           </Text>
         </StackSkeleton> 
       </Stack>
 
       <Divider marginY="40px !important" borderColor="#DEDFE0"/>
 
-      <StackSkeleton width="190px" height="20px" marginBottom="20px !important">
+      <StackSkeleton width="240px" height="20px" marginBottom="20px !important">
         <Text
           fontFamily="Roboto"
           fontWeight="500"