From 9f6461dcb75d038f1047ab263e3befa60fdd9362 Mon Sep 17 00:00:00 2001 From: aldemirlucas Date: Tue, 4 Jun 2024 15:45:47 -0300 Subject: [PATCH 01/66] feat: ajust menu for new layout of dataset --- next/components/molecules/Menu.js | 248 ++++++++++-------------------- next/pages/dataset/[dataset].js | 27 +--- 2 files changed, 87 insertions(+), 188 deletions(-) diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index 9859681b..3354de35 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -37,7 +37,6 @@ import BDLogoLabImage from "../../public/img/logos/bd_logo_lab"; import BDLogoImage from "../../public/img/logos/bd_logo"; import FarBarsIcon from "../../public/img/icons/farBarsIcon"; import SearchIcon from "../../public/img/icons/searchIcon"; -import CrossIcon from "../../public/img/icons/crossIcon"; import RedirectIcon from "../../public/img/icons/redirectIcon"; import SettingsIcon from "../../public/img/icons/settingsIcon"; import SignOutIcon from "../../public/img/icons/signOutIcon"; @@ -322,7 +321,7 @@ function MenuUser ({ userData, onOpen, onClose }) { { - const newStatus = !showSearch - setShowSearch(newStatus) - status({ - status: newStatus - }) - } - - useEffect(() => { - if(query.dataset) return setShowSearchInput(true) - },[query]) + const [showInput, setShowInput] = useState(false) function openSearchLink() { - triggerGAEvent("search_menu", search) - window.open(`/dataset?q=${search}`, "_self") + if(search.trim() === "") return console.log("nada") + triggerGAEvent("search_menu", search.trim()) + window.open(`/dataset?q=${search.trim()}`, "_self") } - if(!showSearchInput) return null - - return ( - <> - {!showSearch ? - - : - - } - /> - } - - ) -} - -function SearchInputUser () { - const [search, setSearch] = useState("") - const [showSearch, setShowSearch] = useState(false) - - function openSearchLink() { - triggerGAEvent("search_menu", search) - window.open(`/dataset?q=${search}`, "_self") - } + if (isMobileMod()) return ( + + openSearchLink()} + /> + } + /> - // if(isMobileMod()) return ( - // - // setShowSearch(true)} - // /> - // - // openSearchLink()} - // /> - // } - // /> - // - // - // ) - - if(isMobileMod()) return null + setShowInput(true) } + /> + + ) return ( @@ -629,7 +550,7 @@ function SearchInputUser () { rightIcon={ { - setStatusSearch(elm.status) - } - function LinkMenuDropDown ({ url, text, icon }) { const [flag, setFlag] = useBoolean() @@ -759,31 +674,28 @@ function DesktopLinks({ userData, links, position = false, path, userTemplate = })} - - {userTemplate && !isMobileMod() && } - - {!statusSearch && - - {userData ? ( - - - - ) : ( - <> - - Entrar - - - - Cadastrar - - - - )} - - } + {userTemplate && !isMobileMod() && } + + + {userData ? ( + + + + ) : ( + <> + + Entrar + + + + Cadastrar + + + + )} + - ); + ) } export default function MenuNav({ simpleTemplate = false, userTemplate = false }) { @@ -863,7 +775,7 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false } width="100%" left="0px" backgroundColor="#FFFFFF" - padding="16px 28px" + padding={isMobileMod() ? "16px 20px" : "16px 24px"} zIndex="99" transition="0.5s" as="nav" @@ -883,6 +795,7 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false } top="0" left="0" margin="20px 0 0 20px" + marginRight="auto" width="30px" height="30px" onClick={menuDisclosure.onOpen} @@ -895,8 +808,13 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false } aria-label="Home" width={ route === "/" ? - isScrollDown ? "88px" : "0" - : "88px" + isScrollDown ? "80px" : "0" + : "80px" + } + minWidth={ + route === "/" ? + isScrollDown ? "80px" : "0" + : "80px" } _hover={{opacity:"none"}} href={route === "/" ? "/#home" : "/"} @@ -921,7 +839,7 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false } /> } - {userTemplate && isMobileMod() && } + {userTemplate && isMobileMod() && } {useCheckMobile() && userData && + if(isDatasetEmpty) return return ( - + {dataset.name} – Base dos Dados @@ -188,16 +185,7 @@ export default function DatasetPage ({ /> Dados - {/* - - Metadados - */} + {dataset?.slug === "br_ibge_ipca" && Painéis} @@ -207,13 +195,6 @@ export default function DatasetPage ({ /> - {/* - // precisa retrabalhar o MetadataPage - - - - */} - {dataset?.slug === "br_ibge_ipca" && {/* Date: Tue, 4 Jun 2024 18:13:00 -0300 Subject: [PATCH 02/66] feat: new input mobile in datasets --- next/components/molecules/Menu.js | 100 +++++++++++++++++++++--------- 1 file changed, 69 insertions(+), 31 deletions(-) diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index 3354de35..844c7c59 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -471,47 +471,80 @@ function MenuUser ({ userData, onOpen, onClose }) { } function SearchInputUser ({ user }) { + const inputMobileRef = useRef(null) const [search, setSearch] = useState("") const [showInput, setShowInput] = useState(false) function openSearchLink() { - if(search.trim() === "") return console.log("nada") + if(search.trim() === "") return triggerGAEvent("search_menu", search.trim()) window.open(`/dataset?q=${search.trim()}`, "_self") } + const handleClickOutside = (event) => { + if (inputMobileRef.current && !inputMobileRef.current.contains(event.target)) { + setShowInput(false); + } + } + + useEffect(() => { + if (showInput) { + document.addEventListener('click', handleClickOutside) + } else { + document.removeEventListener('click', handleClickOutside) + } + + return () => { + document.removeEventListener('click', handleClickOutside) + } + }, [showInput]) + if (isMobileMod()) return ( - openSearchLink()} - /> - } - /> + position="absolute" + top="0" + left="0" + backgroundColor="#FFF" + width="100vw" + height="72px" + padding="16px 20px" + zIndex={99} + > + setShowInput(true), + onBlur: () => setShowInput(false), + height: "40px", + fontSize: "16px", + width: "100%", + fontFamily: "Lato", + borderRadius: "14px", + _placeholder:{color: "#6F6F6F"} + }} + rightIcon={ + openSearchLink()} + /> + } + /> + setShowInput(true) } + onClick={() => { + setShowInput(true) + setTimeout(() => { + inputMobileRef.current.focus() + }, 0) + }} /> ) From 7a63974b92e7ce4d9b03a3fa0deac095903731db Mon Sep 17 00:00:00 2001 From: aldemirlucas Date: Wed, 5 Jun 2024 13:26:41 -0300 Subject: [PATCH 03/66] feat: add new font Roboto --- next/styles/globals.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/next/styles/globals.css b/next/styles/globals.css index 4c69e407..36615e45 100644 --- a/next/styles/globals.css +++ b/next/styles/globals.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap'); html, body { From ca07a64dbde5479c60b685944736eff8e7675ffe Mon Sep 17 00:00:00 2001 From: aldemirlucas Date: Wed, 5 Jun 2024 13:27:02 -0300 Subject: [PATCH 04/66] feat: add new controlledInput for menu --- next/components/atoms/ControlledInput.js | 82 +++++++++++++++++++++++- 1 file changed, 81 insertions(+), 1 deletion(-) diff --git a/next/components/atoms/ControlledInput.js b/next/components/atoms/ControlledInput.js index 6718f979..05a7fbef 100644 --- a/next/components/atoms/ControlledInput.js +++ b/next/components/atoms/ControlledInput.js @@ -3,12 +3,12 @@ import { InputGroup, InputRightAddon, InputRightElement, + InputLeftElement } from "@chakra-ui/react"; import { useEffect, useState } from "react"; export default function ControlledInput({ placeholder, - variant, value, onChange, onEnterPress, @@ -117,3 +117,83 @@ export function DebouncedControlledInput({ ); } + +export function ControlledInputMenu({ + refInput = null, + placeholder, + value, + onChange, + onEnterPress, + inputFocus, + changeInputFocus, + icon = null, + inputStyle, + inputElementStyle, + fill, + fillHover, + ...props +}) { + async function checkForEnter(e) { + if (e.key === "Enter" && onEnterPress) { + onEnterPress(); + } + } + + return ( + + + + onChange(e.target.value)} + onKeyDown={checkForEnter} + onFocus={() => changeInputFocus(true)} + onBlur={() => changeInputFocus(false)} + autoComplete="off" + variant="outline" + letterSpacing="0.5px" + border="2px solid transparent !important" + color="#464A51" + _hover={{ + border:"2px solid transparent !important", + backgroundColor: "#F3F3F3", + _placeholder:{color: "#878A8E"} + }} + _focus={{ + border:"2px solid #0068C5 !important", + backgroundColor: "#FFF", + _placeholder:{color: "#464A51"} + }} + paddingLeft="52px !important" + backgroundColor="#EEEEEE" + height="40px" + fontSize="14px" + lineHeight="20px" + width="100%" + fontFamily="Roboto" + fontWeight="400" + borderRadius="14px" + _placeholder={{color: "#464A51"}} + {...inputStyle} + /> + + ) +} \ No newline at end of file From 2e00e9bcd1bfb81ed2e184cfae6412181b75e8f4 Mon Sep 17 00:00:00 2001 From: aldemirlucas Date: Wed, 5 Jun 2024 13:27:51 -0300 Subject: [PATCH 05/66] feat: new input for menu add --- next/components/molecules/Menu.js | 65 +++++++++++-------------------- 1 file changed, 22 insertions(+), 43 deletions(-) diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index 844c7c59..abe9f2e6 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -26,7 +26,7 @@ import { useRouter } from "next/router" import cookies from "js-cookie"; import MenuDropdown from "./MenuDropdown"; import { isMobileMod, useCheckMobile } from "../../hooks/useCheckMobile.hook" -import ControlledInput from "../atoms/ControlledInput"; +import { ControlledInputMenu } from "../atoms/ControlledInput"; import Link from "../atoms/Link"; import RoundedButton from "../atoms/RoundedButton"; import { triggerGAEvent } from "../../utils"; @@ -474,6 +474,7 @@ function SearchInputUser ({ user }) { const inputMobileRef = useRef(null) const [search, setSearch] = useState("") const [showInput, setShowInput] = useState(false) + const [inputFocus, setInputFocus] = useState(false) function openSearchLink() { if(search.trim() === "") return @@ -512,34 +513,23 @@ function SearchInputUser ({ user }) { padding="16px 20px" zIndex={99} > - setShowInput(true), - onBlur: () => setShowInput(false), - height: "40px", - fontSize: "16px", - width: "100%", - fontFamily: "Lato", - borderRadius: "14px", - _placeholder:{color: "#6F6F6F"} - }} - rightIcon={ + fill="#464A51" + fillHover="#878A8E" + icon={ openSearchLink()} /> } @@ -549,7 +539,7 @@ function SearchInputUser ({ user }) { - openSearchLink()} /> } @@ -642,8 +621,8 @@ function DesktopLinks({ userData, links, position = false, path, userTemplate = transition="1s" marginLeft={ path === "/" ? - !position ? "0 !important" : "32px !important" - : "32px !important" + !position ? "0 !important" : "28px !important" + : "28px !important" } > From 9eb88db04ce0acad85d871aacfcea77f9553af2a Mon Sep 17 00:00:00 2001 From: aldemirlucas Date: Wed, 5 Jun 2024 18:19:22 -0300 Subject: [PATCH 06/66] chore: readjust menu height --- next/components/molecules/Menu.js | 14 ++++++++++---- next/components/templates/main.js | 2 +- next/pages/user/login.js | 2 +- next/pages/user/password-recovery.js | 4 ++-- next/pages/user/register.js | 2 +- 5 files changed, 15 insertions(+), 9 deletions(-) diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index abe9f2e6..a69375c0 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -509,7 +509,7 @@ function SearchInputUser ({ user }) { left="0" backgroundColor="#FFF" width="100vw" - height="72px" + height="70px" padding="16px 20px" zIndex={99} > @@ -726,6 +726,12 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false } const [isScrollDown, setIsScrollDown] = useState(false) const [userData, setUserData] = useState(null) + function maxWidthDataset() { + console.log(route) + if (route === "/dataset" || route === "/dataset/[dataset]") return "1440px" + return "1264px" + } + useEffect(() => { let userInfo = userBD if(userInfo !== null && userInfo !== "undefined") { @@ -762,7 +768,7 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false } ], Contato: "/contato", Button: [] - }; + } useEffect(() => { document.addEventListener("scroll", () => { @@ -792,7 +798,7 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false } width="100%" left="0px" backgroundColor="#FFFFFF" - padding={isMobileMod() ? "16px 20px" : "16px 24px"} + padding={isMobileMod() ? "15px 20px" : "15px 24px"} zIndex="99" transition="0.5s" as="nav" @@ -801,7 +807,7 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false } justifyContent={simpleTemplate || userTemplate ? "flex-start" : { base: "center", lg: "flex-start" }} width="100%" height="40px" - maxWidth="1264px" + maxWidth={maxWidthDataset()} margin="0 auto" spacing={6} > diff --git a/next/components/templates/main.js b/next/components/templates/main.js index 4c83a971..39765d3d 100644 --- a/next/components/templates/main.js +++ b/next/components/templates/main.js @@ -16,7 +16,7 @@ export function MainPageTemplate({ diff --git a/next/pages/user/login.js b/next/pages/user/login.js index 73682555..ab246880 100644 --- a/next/pages/user/login.js +++ b/next/pages/user/login.js @@ -106,7 +106,7 @@ export default function Login() { Date: Fri, 7 Jun 2024 11:59:22 -0300 Subject: [PATCH 07/66] feat: reformulated the readMore component --- next/components/atoms/ReadMore.js | 104 +++++++++++++++----- next/components/molecules/Menu.js | 1 - next/pages/dataset/[dataset].js | 158 +++++++++++++++++------------- 3 files changed, 171 insertions(+), 92 deletions(-) diff --git a/next/components/atoms/ReadMore.js b/next/components/atoms/ReadMore.js index b06a14b0..e36f182d 100644 --- a/next/components/atoms/ReadMore.js +++ b/next/components/atoms/ReadMore.js @@ -1,41 +1,97 @@ import { VStack, + Box, + Flex, Text, } from "@chakra-ui/react"; -import { useState, useEffect } from "react"; -import LinkDash from "./LinkDash"; +import { useState, useEffect, useRef } from "react"; -export default function ReadMore({ children, textSize = 240, isMobileMod, ...props}) { - const [isReadMore, setIsReadMore] = useState(true) - const text = children +export default function ReadMore({ children, ...props}) { + const [isReadMore, setIsReadMore] = useState(false) + const [isOverflowing, setIsOverflowing] = useState(false) + const textRef = useRef(null) + + const modifiedChildren = ` + ${children} + + ...Ler menos + + ` useEffect(() => { - if(text.length < textSize) setIsReadMore(false) + if (textRef.current) { + const { clientHeight, scrollHeight } = textRef.current + setIsOverflowing(scrollHeight > clientHeight) + } }, [children]) - + + useEffect(() => { + const readLess = document.getElementById("readLessDiscription") + if (readLess) readLess.addEventListener('click', toggleReadMore) + return () => { if (readLess) readLess.removeEventListener('click', toggleReadMore)} + }, [isReadMore]) + const toggleReadMore = () => { setIsReadMore(!isReadMore) } - +console.log(isReadMore) return ( - + - {isReadMore ? text.slice(0, textSize)+"..." : text} + {isOverflowing ? + + : + children + } - - {text.length > textSize && - - {isReadMore ? "Ler mais" : " Ler menos"} - + {isOverflowing && + + ...Ler mais + } - + ) -} \ No newline at end of file +} diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index a69375c0..d610e3c7 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -727,7 +727,6 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false } const [userData, setUserData] = useState(null) function maxWidthDataset() { - console.log(route) if (route === "/dataset" || route === "/dataset/[dataset]") return "1440px" return "1264px" } diff --git a/next/pages/dataset/[dataset].js b/next/pages/dataset/[dataset].js index 8f56e8df..c96e47b0 100644 --- a/next/pages/dataset/[dataset].js +++ b/next/pages/dataset/[dataset].js @@ -1,11 +1,14 @@ import { VStack, Stack, - Center, Tabs, TabList, TabPanel, - TabPanels + TabPanels, + Grid, + GridItem, + Image, + Text } from "@chakra-ui/react"; import { useState, useEffect } from "react"; import { useRouter } from "next/router"; @@ -13,15 +16,11 @@ import Head from "next/head"; import { isMobileMod } from "../../hooks/useCheckMobile.hook"; import BigTitle from "../../components/atoms/BigTitle"; -import Subtitle from "../../components/atoms/Subtitle"; -import SectionText from "../../components/atoms/SectionText"; import Link from "../../components/atoms/Link"; import GreenTab from "../../components/atoms/GreenTab"; import ReadMore from "../../components/atoms/ReadMore"; import HelpWidget from "../../components/atoms/HelpWidget"; import DatasetResource from "../../components/organisms/DatasetResource"; -import { ImageOrganization } from "../../components/atoms/ImageOrganization"; -import { TemporalCoverageString } from "../../components/molecules/TemporalCoverageDisplay"; import { MainPageTemplate } from "../../components/templates/main"; import FourOFour from "../../components/templates/404"; @@ -56,9 +55,7 @@ export async function getStaticPaths(context) { } } -export default function DatasetPage ({ - dataset, -}) { +export default function DatasetPage ({ dataset }) { const router = useRouter() const { query } = router const [tabIndex, setTabIndex] = useState(0) @@ -99,72 +96,99 @@ export default function DatasetPage ({ - -
- -
- - - + + + + + - {dataset.name || "Conjunto sem nome"} - - - - {dataset?.description || "Nenhuma descrição fornecida."} - - - - - Organização - + - - {dataset?.organization?.name || "Não listado"} - - - + {dataset.name || "Conjunto sem nome"} + + - - Cobertura temporal - + + {dataset?.description || "Nenhuma descrição fornecida."} + + + + + + Cobertura temporal do conjunto + + - - - - - - + {dataset.coverage || "Nenhuma cobertura temporal fornecida."} + + + + + + Organização + + + + {dataset?.organization?.name || "Nenhuma organização fornecida."} + + + + + + setTabIndex(index)} isLazy paddingTop="32px" From 71c4074a11a9b57460c791db72f04648bd6cef84 Mon Sep 17 00:00:00 2001 From: aldemirlucas Date: Fri, 7 Jun 2024 14:35:40 -0300 Subject: [PATCH 08/66] feat: tabs in dataset att --- next/components/atoms/GreenTab.js | 17 +++----- next/components/atoms/ReadMore.js | 10 ++--- next/pages/dataset/[dataset].js | 61 +++++++++++++++++---------- next/public/img/icons/crossingIcon.js | 14 ++++++ 4 files changed, 63 insertions(+), 39 deletions(-) create mode 100644 next/public/img/icons/crossingIcon.js diff --git a/next/components/atoms/GreenTab.js b/next/components/atoms/GreenTab.js index 7d4916a2..9bf12f2a 100644 --- a/next/components/atoms/GreenTab.js +++ b/next/components/atoms/GreenTab.js @@ -4,19 +4,14 @@ import { Tab } from "@chakra-ui/react"; export default function GreenTab({ children, ...style }) { return ( { if (readLess) readLess.removeEventListener('click', toggleReadMore)} }, [isReadMore]) @@ -47,7 +47,7 @@ export default function ReadMore({ children, ...props}) { const toggleReadMore = () => { setIsReadMore(!isReadMore) } -console.log(isReadMore) + return ( - ...Ler mais + ...Ler mais } diff --git a/next/pages/dataset/[dataset].js b/next/pages/dataset/[dataset].js index c96e47b0..aa3e24d6 100644 --- a/next/pages/dataset/[dataset].js +++ b/next/pages/dataset/[dataset].js @@ -3,17 +3,17 @@ import { Stack, Tabs, TabList, + TabIndicator, TabPanel, TabPanels, Grid, GridItem, Image, - Text + Text, } from "@chakra-ui/react"; import { useState, useEffect } from "react"; import { useRouter } from "next/router"; import Head from "next/head"; -import { isMobileMod } from "../../hooks/useCheckMobile.hook"; import BigTitle from "../../components/atoms/BigTitle"; import Link from "../../components/atoms/Link"; @@ -25,6 +25,7 @@ import { MainPageTemplate } from "../../components/templates/main"; import FourOFour from "../../components/templates/404"; import { DataBaseIcon } from "../../public/img/icons/databaseIcon"; +import CrossingIcon from "../../public/img/icons/crossingIcon"; import { getListDatasets, @@ -99,24 +100,29 @@ export default function DatasetPage ({ dataset }) { maxWidth="1440px" marginX="auto" boxSizing="content-box" - padding="24px" overflow="auto" + paddingX="24px" + spacing={0} > - - + + {dataset?.description || "Nenhuma descrição fornecida."} @@ -188,30 +194,45 @@ export default function DatasetPage ({ dataset }) { setTabIndex(index)} + variant="unstyled" isLazy - paddingTop="32px" - width={{ base: "90vw", lg: "100%" }} + width="100%" > Dados - {dataset?.slug === "br_ibge_ipca" && Painéis} + + + Cruzamento + + + + - {dataset?.slug === "br_ibge_ipca" && - - {/* */} - - } + + diff --git a/next/public/img/icons/crossingIcon.js b/next/public/img/icons/crossingIcon.js new file mode 100644 index 00000000..c40a8417 --- /dev/null +++ b/next/public/img/icons/crossingIcon.js @@ -0,0 +1,14 @@ +import { createIcon } from '@chakra-ui/icons'; + +const CrossingIcon = createIcon({ + displayName: "crossing icon", + viewBox: "0 0 24 24", + path: ( + + ) +}) + +export default CrossingIcon From f001efbe0567f85d7d5686bdb61512fa61bfbf3c Mon Sep 17 00:00:00 2001 From: aldemirlucas Date: Fri, 7 Jun 2024 17:56:46 -0300 Subject: [PATCH 09/66] fea: fix accordion in dataset select source --- next/components/atoms/FilterAccordion.js | 68 ----------- next/components/atoms/GreenTab.js | 6 + next/components/atoms/HelpWidget.js | 22 +--- next/components/organisms/DatasetResource.js | 121 +++++++++++++------ next/pages/dataset/[dataset].js | 18 ++- 5 files changed, 104 insertions(+), 131 deletions(-) diff --git a/next/components/atoms/FilterAccordion.js b/next/components/atoms/FilterAccordion.js index 8a09c85c..a4e3de20 100644 --- a/next/components/atoms/FilterAccordion.js +++ b/next/components/atoms/FilterAccordion.js @@ -8,7 +8,6 @@ import { CheckboxGroup, VStack, Text, - Image, HStack, } from "@chakra-ui/react"; import { useEffect, useState } from "react"; @@ -265,73 +264,6 @@ export function RangeFilterAccordion({ ); } -export function FilterAccordion({ - fieldName, - choices, - onChange, - onToggle, - value, - bdPlus = null, - bdPro = false, - valueField = "id", - displayField = "display_name", - isOpen = null, - alwaysOpen = false, - isActive = false, - isHovering, -}) { - if(choices.length < 1) return null - - return ( - - - {choices.map((c) => ( - - onChange(c[valueField])} - > - {c[displayField]} - - - ))} - - - ); -} - export function SimpleFilterAccordion({ fieldName, children, diff --git a/next/components/atoms/GreenTab.js b/next/components/atoms/GreenTab.js index 9bf12f2a..66dccead 100644 --- a/next/components/atoms/GreenTab.js +++ b/next/components/atoms/GreenTab.js @@ -9,11 +9,17 @@ export default function GreenTab({ children, ...style }) { fontSize="14px" lineHeight="20px" color="#71757A" + fill="#71757A" padding="12px 24px" _selected={{ color: "#2B8C4D", + fill:"#2B8C4D", pointerEvents: "none" }} + _hover={{ + color: "#9D9FA3", + fill: "#9D9FA3" + }} {...style} > {children} diff --git a/next/components/atoms/HelpWidget.js b/next/components/atoms/HelpWidget.js index 0df5adf0..a168e4c6 100644 --- a/next/components/atoms/HelpWidget.js +++ b/next/components/atoms/HelpWidget.js @@ -6,25 +6,14 @@ import { MenuDivider, Tooltip } from "@chakra-ui/react"; -import { useDisclosure } from "@chakra-ui/hooks"; -import { useState, useEffect } from 'react'; -import { useCheckMobile } from "../../hooks/useCheckMobile.hook"; import HelpIcon from "../../public/img/icons/helpIcon" export default function HelpWidget({options, tooltip}) { - const isMobile = useCheckMobile(); - const [isMobileMode, setIsMobileMode] = useState(false) - - useEffect(() => { - setIsMobileMode(isMobile) - },[isMobile]) - - const { isOpen } = useDisclosure() - const optionsRender = (options) => { - return options.map((option) => { + return options.map((option, i) => { if(option.name){ return ( {option.name} ) - } else { return } + } else { return } }) } @@ -71,9 +60,8 @@ export default function HelpWidget({options, tooltip}) { zIndex="11" boxShadow="0 1.6px 16px rgba(100, 96, 103, 0.3)" position="fixed" - bottom={isMobileMode ? "20px" : "40px"} - right={isMobileMode ? "20px" : "40px"} - isActive={isOpen} + bottom={{ base: "20px", lg: "40px" }} + right={{ base: "20px", lg: "40px" }} > diff --git a/next/components/organisms/DatasetResource.js b/next/components/organisms/DatasetResource.js index 6c98aba3..bb3dabc2 100644 --- a/next/components/organisms/DatasetResource.js +++ b/next/components/organisms/DatasetResource.js @@ -1,12 +1,13 @@ import { Stack, VStack, + Box, + HStack, + Divider, + Text } from "@chakra-ui/react"; import { useEffect, useState } from "react"; import { useRouter } from "next/router"; -import { isMobileMod } from "../../hooks/useCheckMobile.hook"; - -import { FilterAccordion } from "../atoms/FilterAccordion"; import BdmTablePage from "./BdmTablePage"; import RawDataSourcesPage from "./RawDataSourcesPage"; @@ -65,69 +66,117 @@ export default function DatasetResource({ return null } + function ContentFilter({ + fieldName, + choices, + onChange, + value, + hasDivider = true + }) { + if(choices.length < 1) return null + + return ( + + + + + {fieldName} + + + + {choices.map((elm, i) => ( + + + onChange(elm._id)} + > + {elm.name || elm.number} + + + ))} + + + ) + } + return ( - - { pushQuery("table", id) }} + hasDivider={false} /> - { pushQuery("raw_data_source", id) }} /> - { pushQuery("information_request", id) }} /> - + - + {/* */} ) diff --git a/next/pages/dataset/[dataset].js b/next/pages/dataset/[dataset].js index aa3e24d6..9200e023 100644 --- a/next/pages/dataset/[dataset].js +++ b/next/pages/dataset/[dataset].js @@ -105,11 +105,11 @@ export default function DatasetPage ({ dataset }) { spacing={0} > - + - + - + - + Dados @@ -220,7 +219,6 @@ export default function DatasetPage ({ dataset }) { width="28px" height="24px" marginRight="2px" - fill={tabIndex === 1 ? "#2B8C4D" :"#71757A"} /> Cruzamento @@ -263,10 +261,10 @@ export default function DatasetPage ({ dataset }) { ]} /> - + {/* - - - - - Criamos um pacote em Python para você acessar o datalake. Basta rodar o código: - - - - {`import basedosdados as bd - -# Para carregar o dado direto no pandas -df = bd.read_table(dataset_id='${gcpDatasetID}', -table_id='${gcpTableId}', -billing_project_id="")`} - - - - - - - - - Criamos um pacote em R para você acessar o datalake. Basta rodar o código: - - - - {`install.packages("basedosdados") -library("basedosdados") - -# Defina o seu projeto no Google Cloud -set_billing_id("") - -# Para carregar o dado direto no R -query <- bdplyr("${queryBQ}") -df <- bd_collect(query)`} - - - - - - - - + + + + - Criamos um pacote em Stata para você acessar o datalake. Basta rodar o código: - - - - {`net install basedosdados, from("https://raw.githubusercontent.com/basedosdados/mais/master/stata-package") - -bd_read_table, /// - path("") /// - dataset_id("${gcpDatasetID}") /// - table_id("${gcpTableId}") /// - billing_project_id("")`} - - - - - - - - - Estes dados estão disponíveis porque diversas pessoas colaboram para a sua manutenção. - - - Antes de baixar os dados, apoie você também com uma doação financeira ou saiba como contribuir com seu tempo. - - - {!downloadNotAllowed && - - - - - ATENÇÃO: O tamanho da tabela ultrapassou o limite permitido para download, de 200.000 linhas. - Para acessar os dados, utilize nosso datalake no BigQuery ou nossos pacotes em Python, R e Stata. - - - - } - - handlerDownload()} - > - - Download dos dados - - - + + Acesse o BigQuery + + + + + + {/* {resource?.isClosed ? + + Com uma assinatura BD Pro válida, copie o código abaixo e cole no Editor de Consultas no BigQuery: + + : + + Copie o código abaixo, + clique aqui + para ir ao datalake no BigQuery e cole no Editor de Consultas: + + } + + {`SELECT * FROM \`basedosdados.${queryBQ}\` LIMIT 100`} + */} + + + + {/* + Criamos um pacote em Python para você acessar o datalake. Basta rodar o código: + + + + {`import basedosdados as bd + + # Para carregar o dado direto no pandas + df = bd.read_table(dataset_id='${gcpDatasetID}', + table_id='${gcpTableId}', + billing_project_id="")`} + */} + + + + {/* + Criamos um pacote em R para você acessar o datalake. Basta rodar o código: + + + + {`install.packages("basedosdados") + library("basedosdados") + + # Defina o seu projeto no Google Cloud + set_billing_id("") + + # Para carregar o dado direto no R + query <- bdplyr("${queryBQ}") + df <- bd_collect(query)`} + */} + + + + {/* + Criamos um pacote em Stata para você acessar o datalake. Basta rodar o código: + + + + {`net install basedosdados, from("https://raw.githubusercontent.com/basedosdados/mais/master/stata-package") + + bd_read_table, /// + path("") /// + dataset_id("${gcpDatasetID}") /// + table_id("${gcpTableId}") /// + billing_project_id("")`} + */} + + + + + Estes dados estão disponíveis porque diversas pessoas colaboram para a sua manutenção. + + + Antes de baixar os dados, apoie você também com uma doação financeira ou saiba como contribuir com seu tempo. + + + {!downloadNotAllowed && + + + + + ATENÇÃO: O tamanho da tabela ultrapassou o limite permitido para download, de 200.000 linhas. + Para acessar os dados, utilize nosso datalake no BigQuery ou nossos pacotes em Python, R e Stata. + + + + } + + handlerDownload()} + > + + Download dos dados + + + + + ) diff --git a/next/components/molecules/DisclaimerBox.js b/next/components/molecules/DisclaimerBox.js index a741c10e..031794e1 100644 --- a/next/components/molecules/DisclaimerBox.js +++ b/next/components/molecules/DisclaimerBox.js @@ -1,7 +1,15 @@ -import { Stack } from "@chakra-ui/react"; +import { + Stack, + Box, + Text, +} from "@chakra-ui/react"; import SectionText from "../atoms/SectionText"; +import InfoIcon from "../../public/img/icons/infoIcon"; +import WarningIcon from "../../public/img/icons/warningIcon"; +import ExclamationIcon from "../../public/img/icons/exclamationIcon"; +import { SolidSuccessIcon } from "../../public/img/icons/successIcon"; -export default function DisclaimerBox({ title, text, children, ...style }) { +export function DisclaimerBox({ title, text, children, ...style }) { return ( - ); + ) } + +export function AlertDiscalimerBox({ type = "info", text, children, ...props }) { + const backgroundColor = { + info: "#E4F2FF", + warning: "#FFF8DF", + error: "#F6E3E3", + success: "#D5E8DB" + } + const borderColor = { + info: "#0068C5", + warning: "#F9C50B", + error: "#BF3434", + success: "#2B8C4D" + } + + return ( + + + + {type === "info" && + + } + + {type === "warning" && + + } + + {type === "error" && + + } + + {type === "success" && + + } + + + {text} + {children} + + + + ) +} \ No newline at end of file diff --git a/next/components/organisms/BdmTablePage.js b/next/components/organisms/BdmTablePage.js index b79ba27f..08486bc3 100644 --- a/next/components/organisms/BdmTablePage.js +++ b/next/components/organisms/BdmTablePage.js @@ -324,7 +324,7 @@ export default function BdmTablePage({ id }) { border="1px solid #DEDFE0" borderRadius="16px" > - {/* */} + {/* */} diff --git a/next/components/organisms/InformationRequestPage.js b/next/components/organisms/InformationRequestPage.js index b1b39d07..8060368c 100644 --- a/next/components/organisms/InformationRequestPage.js +++ b/next/components/organisms/InformationRequestPage.js @@ -17,7 +17,7 @@ import SectionText from "../atoms/SectionText"; import RoundedButton from "../atoms/RoundedButton"; import { TemporalCoverage } from "../molecules/TemporalCoverageDisplay"; import BaseResourcePage from "../molecules/BaseResourcePage"; -import DisclaimerBox from "../molecules/DisclaimerBox"; +import { DisclaimerBox } from "../molecules/DisclaimerBox"; import FourOFour from "../templates/404"; import { diff --git a/next/components/organisms/RawDataSourcesPage.js b/next/components/organisms/RawDataSourcesPage.js index e4e0d091..c80c14a8 100644 --- a/next/components/organisms/RawDataSourcesPage.js +++ b/next/components/organisms/RawDataSourcesPage.js @@ -18,7 +18,7 @@ import Subtitle from "../atoms/Subtitle"; import RoundedButton from "../atoms/RoundedButton"; import { TemporalCoverage } from "../molecules/TemporalCoverageDisplay"; import BaseResourcePage from "../molecules/BaseResourcePage"; -import DisclaimerBox from "../molecules/DisclaimerBox"; +import { DisclaimerBox } from "../molecules/DisclaimerBox"; import FourOFour from "../templates/404"; import { diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js index 63e51b4b..bc9840fa 100644 --- a/next/pages/user/[username].js +++ b/next/pages/user/[username].js @@ -65,7 +65,7 @@ import { EyeIcon, EyeOffIcon } from "../../public/img/icons/eyeIcon"; import CheckIcon from "../../public/img/icons/checkIcon"; import CrossIcon from "../../public/img/icons/crossIcon"; import InfoIcon from "../../public/img/icons/infoIcon"; -import SucessIcon from "../../public/img/icons/sucessIcon"; +import { SuccessIcon } from "../../public/img/icons/successIcon"; import ErrIcon from "../../public/img/icons/errIcon"; import stylesPS from "../../styles/paymentSystem.module.css"; @@ -1702,7 +1702,7 @@ const PlansAndPayment = ({ userData }) => { marginBottom="24px" spacing={0} > - Date: Thu, 20 Jun 2024 14:01:55 -0300 Subject: [PATCH 23/66] feat: wip updates info --- next/components/molecules/ColumnDatasets.js | 114 +------ .../molecules/DataInformationQuery.js | 305 +++++++++--------- next/components/organisms/BdmTablePage.js | 90 ++++-- next/pages/api/tables/getBdmTable.js | 12 +- next/pages/dataset/[dataset].js | 2 +- next/public/img/icons/warningIcon.js | 2 +- 6 files changed, 238 insertions(+), 287 deletions(-) diff --git a/next/components/molecules/ColumnDatasets.js b/next/components/molecules/ColumnDatasets.js index e95e2720..2b9a385d 100644 --- a/next/components/molecules/ColumnDatasets.js +++ b/next/components/molecules/ColumnDatasets.js @@ -179,7 +179,7 @@ function TableDatasets({ headers, values }) { data.push({ value: objectValue.observations}) return data.map((elm, i) => - + {i===3 ? : valueVerification(elm.value)} ) @@ -222,12 +222,12 @@ function TableDatasets({ headers, values }) { left="0" /> {columnsHeaders.map((elm, i) => ( - i != 0 && + i != 0 && ))} - {columnsValues?.length > 0 && columnsValues.map((elm) => ( - + {columnsValues?.length > 0 && columnsValues.map((elm, i) => ( + ))} @@ -298,114 +298,16 @@ export default function ColumnsDatasets({ tableId }) { } } - if(isLoading) return + if(isLoading) return ( + + ) if(isError?.message?.length > 0) return Nenhuma informação foi encontrada. if(resource === undefined || Object.keys(resource).length === 0) return Nenhuma informação de coluna fornecida. return ( - {/* - - - - Filtrar - - - - - - - {tagFilter.length > 0 && ( - - {tagFilter.map((elm) => ( - - {elm.header} - removeTagFilter(elm, null)} - /> - - ))} - - } - /> - )} - - setFilter(e.target.value)} - variant="outline" - letterSpacing="0.5px" - fontWeight="300" - border="none" - borderRadius="16px" - fontFamily="lato" - fontSize="16px" - color="#252A32" - width="100%" - minWidth="200px" - height="40px" - placeholder="Insira o nome ou o valor da propriedade" - _placeholder={{color:"#6F6F6F"}} - /> - appliedFilter()} - /> - : - { - setTagFilter([]) - setHeaderSelection("") - setColumnValues(defaultValues) - setFilter("") - }} - /> - }/> - - - */} + - - + {/* */} - - - No editor de consultas do BigQuery, digite a seguinte instrução: - - - + - Primeira vez usando o BigQuery? - Siga o passo a passo. + No editor de consultas do BigQuery, digite a seguinte instrução: - - + + Primeira vez usando o BigQuery? + + Siga o passo a passo. + + + - - - {/* {resource?.isClosed ? - - Com uma assinatura BD Pro válida, copie o código abaixo e cole no Editor de Consultas no BigQuery: - - : - - Copie o código abaixo, - clique aqui - para ir ao datalake no BigQuery e cole no Editor de Consultas: - - } - - {`SELECT * FROM \`basedosdados.${queryBQ}\` LIMIT 100`} - */} - - - - {/* - Criamos um pacote em Python para você acessar o datalake. Basta rodar o código: - - - - {`import basedosdados as bd - - # Para carregar o dado direto no pandas - df = bd.read_table(dataset_id='${gcpDatasetID}', - table_id='${gcpTableId}', - billing_project_id="")`} - */} - - - - {/* - Criamos um pacote em R para você acessar o datalake. Basta rodar o código: - + {/* {resource?.isClosed ? + + Com uma assinatura BD Pro válida, copie o código abaixo e cole no Editor de Consultas no BigQuery: + + : + + Copie o código abaixo, + clique aqui + para ir ao datalake no BigQuery e cole no Editor de Consultas: + + } + + {`SELECT * FROM \`basedosdados.${queryBQ}\` LIMIT 100`} + */} + + + + {/* + Criamos um pacote em Python para você acessar o datalake. Basta rodar o código: + + + + {`import basedosdados as bd + +# Para carregar o dado direto no pandas +df = bd.read_table(dataset_id='${gcpDatasetID}', +table_id='${gcpTableId}', +billing_project_id="")`} + */} + + + + {/* + Criamos um pacote em R para você acessar o datalake. Basta rodar o código: + - - {`install.packages("basedosdados") - library("basedosdados") + + {`install.packages("basedosdados") +library("basedosdados") - # Defina o seu projeto no Google Cloud - set_billing_id("") +# Defina o seu projeto no Google Cloud +set_billing_id("") - # Para carregar o dado direto no R - query <- bdplyr("${queryBQ}") - df <- bd_collect(query)`} - */} - +# Para carregar o dado direto no R +query <- bdplyr("${queryBQ}") +df <- bd_collect(query)`} + */} + - - {/* - Criamos um pacote em Stata para você acessar o datalake. Basta rodar o código: - - - - {`net install basedosdados, from("https://raw.githubusercontent.com/basedosdados/mais/master/stata-package") - - bd_read_table, /// - path("") /// - dataset_id("${gcpDatasetID}") /// - table_id("${gcpTableId}") /// - billing_project_id("")`} - */} - - - - - Estes dados estão disponíveis porque diversas pessoas colaboram para a sua manutenção. - - - Antes de baixar os dados, apoie você também com uma doação financeira ou saiba como contribuir com seu tempo. - - - {!downloadNotAllowed && - - - - - ATENÇÃO: O tamanho da tabela ultrapassou o limite permitido para download, de 200.000 linhas. - Para acessar os dados, utilize nosso datalake no BigQuery ou nossos pacotes em Python, R e Stata. - - - - } - - handlerDownload()} - > - - Download dos dados - - - - - + + {/* + Criamos um pacote em Stata para você acessar o datalake. Basta rodar o código: + + + + {`net install basedosdados, from("https://raw.githubusercontent.com/basedosdados/mais/master/stata-package") + +bd_read_table, /// + path("") /// + dataset_id("${gcpDatasetID}") /// + table_id("${gcpTableId}") /// + billing_project_id("")`} + */} + + + + + Estes dados estão disponíveis porque diversas pessoas colaboram para a sua manutenção. + + + Antes de baixar os dados, apoie você também com uma doação financeira ou saiba como contribuir com seu tempo. + + + {!downloadNotAllowed && + + + + + ATENÇÃO: O tamanho da tabela ultrapassou o limite permitido para download, de 200.000 linhas. + Para acessar os dados, utilize nosso datalake no BigQuery ou nossos pacotes em Python, R e Stata. + + + + } + + handlerDownload()} + > + + Download dos dados + + + ) diff --git a/next/components/organisms/BdmTablePage.js b/next/components/organisms/BdmTablePage.js index 08486bc3..d0b812df 100644 --- a/next/components/organisms/BdmTablePage.js +++ b/next/components/organisms/BdmTablePage.js @@ -21,7 +21,6 @@ import LoadingSpin from "../atoms/Loading"; import Subtitle from "../atoms/Subtitle"; import { formatBytes } from "../../utils"; import { TemporalCoverageBar } from "../molecules/TemporalCoverageDisplay"; -import ColumnDatasets from "../molecules/ColumnDatasets"; import DataInformationQuery from "../molecules/DataInformationQuery"; import FourOFour from "../templates/404"; @@ -228,6 +227,26 @@ export default function BdmTablePage({ id }) { ) } + const formatDate = (value) => { + const date = new Date(value); + const formattedDate = date.getFullYear()+"-"+String(date.getMonth() + 1).padStart(2, "0")+"-"+String(date.getDate()).padStart(2, "0") + return formattedDate + } + + const formatUpdate = (value) => { + if (value === "second") return "Atualização por segundo" + if (value === "minute") return "Atualização minutal" + if (value === "hour") return "Atualização por hora" + if (value === "day") return "Atualização diária" + if (value === "week") return "Atualização semanal" + if (value === "month") return "Atualização mensal" + if (value === "bimester") return "Atualização bimestral" + if (value === "quarter") return "Atualização trimestral" + if (value === "semester") return "Atualização semestral" + if (value === "year") return "Atualização anual" + return value + } + if(isError) return return ( @@ -256,16 +275,17 @@ export default function BdmTablePage({ id }) { > {resource?.name} - - {`(${formatBytes(resource.uncompressedFileSize)})`} - + {resource?.uncompressedFileSize && + + {`(${formatBytes(resource.uncompressedFileSize)})`} + + } - - + {/* */} @@ -347,21 +368,42 @@ export default function BdmTablePage({ id }) { startColor="#F0F0F0" endColor="#F3F3F3" borderRadius="6px" - width="500px" + width={!isLoading ? "100%" : "500px"} spacing="11px" skeletonHeight="18px" - noOfLines={3} + noOfLines={2} marginTop="12px !important" isLoaded={!isLoading} > - Não informado : Última vez que atualizamos na BD + {resource?.updates?.[0]?.latest ? + formatDate(resource.updates[0].latest) + : + "Não informado" + } : Última vez que atualizamos na BD + {resource?.updates?.[0]?.entity?.slug && + + {formatUpdate(resource.updates[0].entity.slug)} + + } - Não informado : Última vez que atualizaram na fonte original + {resource?.rawDataSource?.[0]?.updates?.[0]?.latest ? + formatDate(resource.rawDataSource[0].updates[0].latest) + : + "Não informado" + } : Última vez que atualizaram na fonte original - {resource?.rawDataUrl ? + {resource?.rawDataSource?.[0]?._id && resource?.rawDataSource?.[0]?.dataset?._id ? - Microdados originais + {resource.rawDataSource[0].name} : "Não informado" @@ -602,7 +650,7 @@ export default function BdmTablePage({ id }) { startColor="#F0F0F0" endColor="#F3F3F3" borderRadius="6px" - width={resource?.version ? "100%" : "80px"} + width={resource?.version ? "100%" : "100px"} minHeight="40px" spacing="4px" skeletonHeight="18px" diff --git a/next/pages/api/tables/getBdmTable.js b/next/pages/api/tables/getBdmTable.js index 711168ee..31689d22 100644 --- a/next/pages/api/tables/getBdmTable.js +++ b/next/pages/api/tables/getBdmTable.js @@ -45,14 +45,19 @@ async function getBdmTable(id) { rawDataSource { edges { node { - updates{ + _id + name + dataset { + _id + } + updates { edges { node { + _id latest } } } - lastUpdatedAt } } } @@ -65,13 +70,12 @@ async function getBdmTable(id) { latest entity { _id - name + slug } } } } isDirectory - rawDataUrl auxiliaryFilesUrl uncompressedFileSize numberRows diff --git a/next/pages/dataset/[dataset].js b/next/pages/dataset/[dataset].js index 66957af9..b2cfade7 100644 --- a/next/pages/dataset/[dataset].js +++ b/next/pages/dataset/[dataset].js @@ -214,7 +214,7 @@ export default function DatasetPage ({ dataset }) { Dados - + - + ) }) From 49be5a3961ff255927c8841a840b8a49b051a4a3 Mon Sep 17 00:00:00 2001 From: aldemirlucas Date: Thu, 20 Jun 2024 17:37:45 -0300 Subject: [PATCH 24/66] feat: wip columns --- next/components/molecules/ColumnDatasets.js | 438 +++++++++------- .../molecules/DataInformationQuery.js | 494 +++++++++--------- next/components/organisms/BdmTablePage.js | 49 +- next/pages/api/datasets/getColumnsBdmTable.js | 12 +- 4 files changed, 502 insertions(+), 491 deletions(-) diff --git a/next/components/molecules/ColumnDatasets.js b/next/components/molecules/ColumnDatasets.js index 2b9a385d..7f1bd4c8 100644 --- a/next/components/molecules/ColumnDatasets.js +++ b/next/components/molecules/ColumnDatasets.js @@ -7,39 +7,93 @@ import { Th, Td, Tooltip, - HStack, Stack, Box, Text, - Input, - InputGroup, - InputRightElement, - InputLeftAddon, - Select, } from '@chakra-ui/react'; import { useState, useEffect } from 'react'; import FuzzySearch from 'fuzzy-search'; import Latex from 'react-latex-next'; -import { useCheckMobile } from "../../hooks/useCheckMobile.hook"; -import SectionText from '../atoms/SectionText'; -import LoadingSpin from '../atoms/Loading' -import Tag from "../atoms/Tag"; -import { TemporalCoverage } from "./TemporalCoverageDisplay"; +import LoadingSpin from '../atoms/Loading'; import { getColumnsBdmTable } from "../../pages/api/datasets/index"; +import InternalError from '../../public/img/internalError' import InfoIcon from '../../public/img/icons/infoIcon'; import RedirectIcon from '../../public/img/icons/redirectIcon'; -import FilterIcon from '../../public/img/icons/filterIcon'; import SearchIcon from '../../public/img/icons/searchIcon'; import CrossIcon from '../../public/img/icons/crossIcon'; import 'katex/dist/katex.min.css'; -function TableDatasets({ headers, values }) { - const [columnsHeaders, setColumnsHeaders] = useState([]) - const [columnsValues, setColumnsValues] = useState([]) +export default function ColumnsDatasets({ tableId }) { + const [resource, setResource] = useState({}) + const [isError, setIsError] = useState(false) + const [isLoading, setIsLoading] = useState(false) + + useEffect(() => { + const featchColumns = async () => { + setIsLoading(true) + try { + const result = await getColumnsBdmTable(tableId) + + if(result) { + setResource(result.sort(sortElements)) + setIsLoading(false) + } + + } catch (error) { + console.error(error) + setIsError(true) + } + } + + featchColumns() + },[tableId]) + + const headers = [ + { + pt: "Nome", + tooltip:"Nome da coluna." + }, + // { + // pt: "Coberta Por Um Dicionário", + // tooltip:"Indica se a coluna possui categorias descritas na tabela 'dicionario', explicando o significado das suas chaves e valores — ex: 'sexo' possui os valores 0 e 1 na coluna, e, no dicionario, você irá encontrar 'sexo' com as categorias (chave: 1 - valor: Feminino), (chave: 0 - valor: Masculino)." + // }, + // { + // pt: "Coluna Correspondente Nos Diretórios", + // tooltip:"Caso preenchida, indica que a coluna é chave primária de uma entidade — ex: id_municipio = chave primária de municípios. Isso significa que a coluna é igual em todos os conjuntos do datalake. Informações centralizadas da entidade se encontram no diretório conforme: [diretorio].[tabela]:[coluna]." + // }, + { + pt: "Precisa de tradução", + tooltip:"A coluna possui códigos institucionais a serem traduzidos." + }, + { + pt: "Descrição", + tooltip:"Descrição dos dados da coluna." + }, + { + pt: "Tipo No BigQuery", + tooltip:"Tipo de dado no BigQuery — categorias: INTEGER (Inteiro), STRING (Texto), DATE (Data), FLOAT64 (Decimal), GEOGRAPHY (Geográfico)." + }, + { + pt: "Cobertura Temporal", + tooltip:"Data inicial e final de cobertura dos dados. Pode variar entre colunas, de acordo com a disponibilidade nos dados originais." + }, + { + pt: "Unidade De Medida", + tooltip:"Unidade de medida da coluna — ex: km, m2, kg." + }, + { + pt: "Contém Dados Sensíveis (LGPD)", + tooltip:"Indica se a coluna possui dados sensíveis — ex: CPF identificado, dados de conta bancária, etc." + }, + { + pt: "Observações", + tooltip:"Descreve processos de tratamentos realizados na coluna que precisam ser evidenciados." + } + ] function sortElements(a, b) { if (a.node.order < b.node.order) { @@ -51,44 +105,20 @@ function TableDatasets({ headers, values }) { return 0 } - useEffect(() => { - const newValues = values?.map((elm) => { - delete elm.node._id - return elm - }) - - setColumnsHeaders(Object.keys(headers)) - setColumnsValues(newValues.sort(sortElements)) - },[values, headers]) - - const empty = () => { return ( -

- Não listado -

+ + Não informado + ) } - function valueVerification (value) { - if(value === null || value === undefined) return empty() - - if(typeof value === "function") return value() - - if(value === true) return "Sim" - if(value === false) return "Não" - - if(value) { - if(value === "Não listado"){ - return empty() - } else { - return value - } - } else { - return empty() - } - } - const directoryColumnValue = (value) => { const dataset = value?.table?.dataset const table = value?.table @@ -112,93 +142,104 @@ function TableDatasets({ headers, values }) { } const measurementUnit = (value) => { - if(!value) return null + if(!value) return "Não informado" - const measurementUnitLatex = () => { - const splitValue = value.split(/([^a-z])/) - const translated = (value) => value.map((elm) => elm) - return ( - {`$${translated(splitValue).join("")}$`} - ) - } - return measurementUnitLatex + const splitValue = value.split(/([^a-z])/) + const translated = (value) => value.map((elm) => elm) + + return ( + {`$${translated(splitValue).join("")}$`} + ) } const TableHeader = ({ header, ...props }) => { - if(header === undefined) return null - return ( - - {headers[header].pt} + + {header.pt} - + + + ) } - function TreatmentValues({ value }) { - const objectValue = value?.node - let data = [] - - data.push({ value: objectValue.name, style:{position:"sticky", left:"0", zIndex:2, background:"linear-gradient(to left,#EAEAEA, #EAEAEA 2px, #FFF 2px, #FFF 100%)"}}); - data.push({ value: objectValue.bigqueryType.name, style:{textTransform: "uppercase"}}) - data.push({ value: objectValue.description}) - data.push({ value: objectValue.coverage}) - data.push({ value: objectValue.coveredByDictionary}) - data.push({ value: directoryColumnValue(objectValue.directoryPrimaryKey)}) - data.push({ value: measurementUnit(objectValue.measurementUnit)}) - data.push({ value: objectValue.containsSensitiveData}) - data.push({ value: objectValue.observations}) - - return data.map((elm, i) => - - {i===3 ? : valueVerification(elm.value)} - - ) - } - function TableValue({children, ...props}) { return ( {children} @@ -206,113 +247,118 @@ function TableDatasets({ headers, values }) { ) } + if(isLoading) return ( ) + if(isError) return ( + + + + ) + return ( - + + + - - {columnsHeaders.map((elm, i) => ( - i != 0 && - ))} + + + {headers.map((elm, i) => ( + i != 0 && + ))} + + - {columnsValues?.length > 0 && columnsValues.map((elm, i) => ( - - - - ))} - -
- - - ) -} + {resource.length > 0 && resource.map((elm,i) => ( + + + {elm?.node?.name ? elm.node.name : "Não informado"} + + -export default function ColumnsDatasets({ tableId }) { - const [resource, setResource] = useState({}) - const [isError, setIsError] = useState({}) - const [isLoading, setIsLoading] = useState(false) + + { + elm?.node?.coveredByDictionary === true ? "Sim" : + elm?.node?.directoryPrimaryKey?._id ? "Sim" : + elm?.node?.coveredByDictionary === false ? "Não" + : + "Não informado" + } + - const featchColumns = async () => { - setIsLoading(true) - try { - const result = await getColumnsBdmTable(tableId) - setResource(result) - } catch (error) { - setIsError(error) - console.error(error) - } - setIsLoading(false) - } + + {elm?.node?.description ? elm.node.description : "Não informado"} + - useEffect(() => { - featchColumns() - },[tableId]) + + {elm?.node?.bigqueryType?.name ? elm.node.bigqueryType.name : "Não informado"} + - const headers = { - name: { - pt: "Nome", - tooltip:"Nome da coluna." - }, - bigqueryType: { - pt: "Tipo No BigQuery", - tooltip:"Tipo de dado no BigQuery — categorias: INTEGER (Inteiro), STRING (Texto), DATE (Data), FLOAT64 (Decimal), GEOGRAPHY (Geográfico)." - }, - description: { - pt: "Descrição", - tooltip:"Descrição dos dados da coluna." - }, - datetimeRanges: { - pt: "Cobertura Temporal", - tooltip:"Data inicial e final de cobertura dos dados. Pode variar entre colunas, de acordo com a disponibilidade nos dados originais." - }, - coveredByDictionary: { - pt: "Coberta Por Um Dicionário", - tooltip:"Indica se a coluna possui categorias descritas na tabela 'dicionario', explicando o significado das suas chaves e valores — ex: 'sexo' possui os valores 0 e 1 na coluna, e, no dicionario, você irá encontrar 'sexo' com as categorias (chave: 1 - valor: Feminino), (chave: 0 - valor: Masculino)." - }, - directoryPrimaryKey: { - pt: "Coluna Correspondente Nos Diretórios", - tooltip:"Caso preenchida, indica que a coluna é chave primária de uma entidade — ex: id_municipio = chave primária de municípios. Isso significa que a coluna é igual em todos os conjuntos do datalake. Informações centralizadas da entidade se encontram no diretório conforme: [diretorio].[tabela]:[coluna]." - }, - measurementUnit: { - pt: "Unidade De Medida", - tooltip:"Unidade de medida da coluna — ex: km, m2, kg." - }, - containsSensitiveData: { - pt: "Contém Dados Sensíveis (LGPD)", - tooltip:"Indica se a coluna possui dados sensíveis — ex: CPF identificado, dados de conta bancária, etc." - }, - observations: { - pt: "Observações", - tooltip:"Descreve processos de tratamentos realizados na coluna que precisam ser evidenciados." - } - } + + {elm?.node?.coverage?.start && elm?.node?.coverage?.end ? + elm.node.coverage.start +" - "+ elm.node.coverage.end + : + "Não informado" + } + - if(isLoading) return ( - - ) + + {elm?.node?.measurementUnit ? + measurementUnit(elm.node.measurementUnit) + : + "Não informado" + } + - if(isError?.message?.length > 0) return Nenhuma informação foi encontrada. - if(resource === undefined || Object.keys(resource).length === 0) return Nenhuma informação de coluna fornecida. - - return ( - - + + { + elm?.node?.containsSensitiveData === true ? "Sim" + : + elm?.node?.containsSensitiveData === false ? "Não" + : + "Não informado" + } + - + + {elm?.node?.observations ? elm.node.observations : "Não informado"} + + + ))} + + + ) } diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index 384a8053..f5ffd450 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -12,21 +12,14 @@ import { useClipboard, Button, HStack, - Menu, - MenuItem, - MenuList, - MenuButton, - IconButton, Tooltip } from "@chakra-ui/react"; import { useState, useEffect } from "react"; -import { isMobileMod } from "../../hooks/useCheckMobile.hook"; import Link from "../atoms/Link"; import GreenTab from "../atoms/GreenTab"; import SectionText from "../atoms/SectionText"; import Toggle from "../atoms/Toggle"; -import Subtitle from "../atoms/Subtitle"; import RoundedButton from "../atoms/RoundedButton"; import ColumnDatasets from "./ColumnDatasets"; @@ -37,32 +30,6 @@ import { CopyIcon } from "../../public/img/icons/copyIcon"; import DownloadIcon from "../../public/img/icons/downloadIcon"; import ExclamationIcon from "../../public/img/icons/exclamationIcon"; import InfoIcon from "../../public/img/icons/infoIcon"; -import MenuVerticalIcon from "../../public/img/icons/menuVerticalIcon"; - -export function BoxBigQueryGoogle({ href }) { - return ( - - - - - Para usar o BigQuery basta ter uma conta Google. Primeira vez? - Siga o passo a passo. - - - - - ) -} export function PrismCodeHighlight({ language, children }) { const { hasCopied, onCopy } = useClipboard(children) @@ -147,6 +114,8 @@ export default function DataInformationQuery({ resource }) { - - - Selecione as colunas que você deseja acessar: - - - {/* */} - - - - - - - - - - - - - - - No editor de consultas do BigQuery, digite a seguinte instrução: + Selecione as colunas que você deseja acessar: + + + + + + + + + - Primeira vez usando o BigQuery? - - Siga o passo a passo. - + - + + + No editor de consultas do BigQuery, digite a seguinte instrução: + + + + Primeira vez usando o BigQuery? + + Siga o passo a passo. + + + - - Acesse o BigQuery - + + Acesse o BigQuery + + - - {/* {resource?.isClosed ? - - Com uma assinatura BD Pro válida, copie o código abaixo e cole no Editor de Consultas no BigQuery: + {/* {resource?.isClosed ? + + Com uma assinatura BD Pro válida, copie o código abaixo e cole no Editor de Consultas no BigQuery: + + : + + Copie o código abaixo, + clique aqui + para ir ao datalake no BigQuery e cole no Editor de Consultas: + + } + + {`SELECT * FROM \`basedosdados.${queryBQ}\` LIMIT 100`} + */} + + + + {/* + Criamos um pacote em Python para você acessar o datalake. Basta rodar o código: - : - + {`import basedosdados as bd + + # Para carregar o dado direto no pandas + df = bd.read_table(dataset_id='${gcpDatasetID}', + table_id='${gcpTableId}', + billing_project_id="")`} + */} + + + + {/* - Copie o código abaixo, - clique aqui - para ir ao datalake no BigQuery e cole no Editor de Consultas: + Criamos um pacote em R para você acessar o datalake. Basta rodar o código: - } - - {`SELECT * FROM \`basedosdados.${queryBQ}\` LIMIT 100`} - */} - - - - {/* - Criamos um pacote em Python para você acessar o datalake. Basta rodar o código: - - - - {`import basedosdados as bd - -# Para carregar o dado direto no pandas -df = bd.read_table(dataset_id='${gcpDatasetID}', -table_id='${gcpTableId}', -billing_project_id="")`} - */} - - - - {/* - Criamos um pacote em R para você acessar o datalake. Basta rodar o código: - - - {`install.packages("basedosdados") -library("basedosdados") + + {`install.packages("basedosdados") + library("basedosdados") -# Defina o seu projeto no Google Cloud -set_billing_id("") + # Defina o seu projeto no Google Cloud + set_billing_id("") -# Para carregar o dado direto no R -query <- bdplyr("${queryBQ}") -df <- bd_collect(query)`} - */} - + # Para carregar o dado direto no R + query <- bdplyr("${queryBQ}") + df <- bd_collect(query)`} + */} + - - {/* - Criamos um pacote em Stata para você acessar o datalake. Basta rodar o código: - - - - {`net install basedosdados, from("https://raw.githubusercontent.com/basedosdados/mais/master/stata-package") - -bd_read_table, /// - path("") /// - dataset_id("${gcpDatasetID}") /// - table_id("${gcpTableId}") /// - billing_project_id("")`} - */} - - - - - Estes dados estão disponíveis porque diversas pessoas colaboram para a sua manutenção. - - - Antes de baixar os dados, apoie você também com uma doação financeira ou saiba como contribuir com seu tempo. - - - {!downloadNotAllowed && - + {/* - - - - ATENÇÃO: O tamanho da tabela ultrapassou o limite permitido para download, de 200.000 linhas. - Para acessar os dados, utilize nosso datalake no BigQuery ou nossos pacotes em Python, R e Stata. - - - - } - - handlerDownload()} - > - - Download dos dados - - - + Criamos um pacote em Stata para você acessar o datalake. Basta rodar o código: + + + + {`net install basedosdados, from("https://raw.githubusercontent.com/basedosdados/mais/master/stata-package") + + bd_read_table, /// + path("") /// + dataset_id("${gcpDatasetID}") /// + table_id("${gcpTableId}") /// + billing_project_id("")`} + */} + + + + + Estes dados estão disponíveis porque diversas pessoas colaboram para a sua manutenção. + + + Antes de baixar os dados, apoie você também com uma doação financeira ou saiba como contribuir com seu tempo. + + + {!downloadNotAllowed && + + + + + ATENÇÃO: O tamanho da tabela ultrapassou o limite permitido para download, de 200.000 linhas. + Para acessar os dados, utilize nosso datalake no BigQuery ou nossos pacotes em Python, R e Stata. + + + + } + + handlerDownload()} + > + + Download dos dados + + + + ) diff --git a/next/components/organisms/BdmTablePage.js b/next/components/organisms/BdmTablePage.js index d0b812df..eb5acfec 100644 --- a/next/components/organisms/BdmTablePage.js +++ b/next/components/organisms/BdmTablePage.js @@ -1,39 +1,26 @@ import { - VStack, HStack, Stack, Box, Text, - Grid, - GridItem, - Tooltip, Skeleton, SkeletonText, - Divider + Divider, + Tooltip } from "@chakra-ui/react"; import { useState, useEffect } from "react"; -import { useCheckMobile } from "../../hooks/useCheckMobile.hook"; -import Link from "../atoms/Link"; import SectionText from "../atoms/SectionText"; import { SimpleTable } from "../atoms/SimpleTable"; import ReadMore from "../atoms/ReadMore"; -import LoadingSpin from "../atoms/Loading"; -import Subtitle from "../atoms/Subtitle"; import { formatBytes } from "../../utils"; import { TemporalCoverageBar } from "../molecules/TemporalCoverageDisplay"; import DataInformationQuery from "../molecules/DataInformationQuery"; import FourOFour from "../templates/404"; -import StarIcon from "../../public/img/icons/starIcon"; -import FrequencyIcon from "../../public/img/icons/frequencyIcon"; -import PartitionIcon from "../../public/img/icons/partitionIcon"; -import UserIcon from "../../public/img/icons/userIcon"; -import VersionIcon from "../../public/img/icons/versionIcon"; import EmailIcon from "../../public/img/icons/emailIcon"; import GithubIcon from "../../public/img/icons/githubIcon"; import WebIcon from "../../public/img/icons/webIcon"; import TwitterIcon from "../../public/img/icons/twitterIcon"; -import FileIcon from "../../public/img/icons/fileIcon"; import InfoIcon from "../../public/img/icons/infoIcon"; import DownloadIcon from "../../public/img/icons/downloadIcon"; @@ -74,7 +61,7 @@ export default function BdmTablePage({ id }) { display="flex" flexDirection="row" alignItems="center" - gridGap="8px" + gap="8px" fontFamily="Roboto" fontWeight="500" fontSize="18px" @@ -182,9 +169,15 @@ export default function BdmTablePage({ id }) { const Empty = () => { return ( -

+ Não informado -

+ ) } @@ -340,15 +333,9 @@ export default function BdmTablePage({ id }) { - - - - {/* */} + @@ -375,7 +362,7 @@ export default function BdmTablePage({ id }) { marginTop="12px !important" isLoaded={!isLoading} > - {formatUpdate(resource.updates[0].entity.slug)} - + } - + Date: Sat, 22 Jun 2024 03:44:52 -0300 Subject: [PATCH 25/66] feat: add simple input --- next/components/atoms/ControlledInput.js | 5 ++-- next/components/molecules/ColumnDatasets.js | 28 ++++++++++++++++++--- next/components/molecules/Menu.js | 6 ++--- 3 files changed, 31 insertions(+), 8 deletions(-) diff --git a/next/components/atoms/ControlledInput.js b/next/components/atoms/ControlledInput.js index 05a7fbef..d29d5957 100644 --- a/next/components/atoms/ControlledInput.js +++ b/next/components/atoms/ControlledInput.js @@ -118,7 +118,7 @@ export function DebouncedControlledInput({ ); } -export function ControlledInputMenu({ +export function ControlledInputSimple({ refInput = null, placeholder, value, @@ -174,7 +174,8 @@ export function ControlledInputMenu({ color="#464A51" _hover={{ border:"2px solid transparent !important", - backgroundColor: "#F3F3F3", + backgroundColor:"#F3F3F3", + color:"#878A8E", _placeholder:{color: "#878A8E"} }} _focus={{ diff --git a/next/components/molecules/ColumnDatasets.js b/next/components/molecules/ColumnDatasets.js index 7f1bd4c8..af76db32 100644 --- a/next/components/molecules/ColumnDatasets.js +++ b/next/components/molecules/ColumnDatasets.js @@ -15,6 +15,7 @@ import { useState, useEffect } from 'react'; import FuzzySearch from 'fuzzy-search'; import Latex from 'react-latex-next'; import LoadingSpin from '../atoms/Loading'; +import { ControlledInputSimple } from '../atoms/ControlledInput'; import { getColumnsBdmTable @@ -31,6 +32,9 @@ export default function ColumnsDatasets({ tableId }) { const [resource, setResource] = useState({}) const [isError, setIsError] = useState(false) const [isLoading, setIsLoading] = useState(false) + const [search, setSearch] = useState("") + const [inputFocus, setInputFocus] = useState(false) + useEffect(() => { const featchColumns = async () => { @@ -259,7 +263,25 @@ export default function ColumnsDatasets({ tableId }) { return ( - + + } + /> {headers.map((elm, i) => ( i != 0 && @@ -292,7 +314,7 @@ export default function ColumnsDatasets({ tableId }) { > diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index d610e3c7..aba0c00b 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -26,7 +26,7 @@ import { useRouter } from "next/router" import cookies from "js-cookie"; import MenuDropdown from "./MenuDropdown"; import { isMobileMod, useCheckMobile } from "../../hooks/useCheckMobile.hook" -import { ControlledInputMenu } from "../atoms/ControlledInput"; +import { ControlledInputSimple } from "../atoms/ControlledInput"; import Link from "../atoms/Link"; import RoundedButton from "../atoms/RoundedButton"; import { triggerGAEvent } from "../../utils"; @@ -513,7 +513,7 @@ function SearchInputUser ({ user }) { padding="16px 20px" zIndex={99} > - - Date: Sun, 23 Jun 2024 22:26:15 -0300 Subject: [PATCH 26/66] feat: att footer --- next/components/molecules/Footer.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/next/components/molecules/Footer.js b/next/components/molecules/Footer.js index d6d01a3f..72ca673e 100644 --- a/next/components/molecules/Footer.js +++ b/next/components/molecules/Footer.js @@ -88,7 +88,7 @@ export default function Footer({ template, ocult = false }) { > @@ -96,11 +96,12 @@ export default function Footer({ template, ocult = false }) { width="100%" maxWidth="1440px" justifyContent="center" - direction="row" + direction={{base: "column-reverse", lg: "row"}} spacing={0} - gridGap="40px" + gridGap={{base: "8px", lg: "40px"}} + padding={{base: "24px", lg: "0"}} > - + ® 2024 Base dos Dados From 9a8682eeced5c739de1fb1f19724dd04c6bbb7ca Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Mon, 24 Jun 2024 20:29:09 -0300 Subject: [PATCH 27/66] feat: wip search columns --- next/components/molecules/ColumnDatasets.js | 288 ++++++++++++-------- 1 file changed, 171 insertions(+), 117 deletions(-) diff --git a/next/components/molecules/ColumnDatasets.js b/next/components/molecules/ColumnDatasets.js index af76db32..989b7a28 100644 --- a/next/components/molecules/ColumnDatasets.js +++ b/next/components/molecules/ColumnDatasets.js @@ -10,6 +10,7 @@ import { Stack, Box, Text, + Skeleton, } from '@chakra-ui/react'; import { useState, useEffect } from 'react'; import FuzzySearch from 'fuzzy-search'; @@ -28,13 +29,71 @@ import SearchIcon from '../../public/img/icons/searchIcon'; import CrossIcon from '../../public/img/icons/crossIcon'; import 'katex/dist/katex.min.css'; +function SearchColumn({ isLoaded, resource, columns }) { + const [inputFocus, setInputFocus] = useState(false) + const [skipFirstDebounced, setSkipFirstDebounced] = useState(true) + const [search, setSearch] = useState("") + const [value, setValue] = useState("") + const [_timeout, _setTimeout] = useState(null) + + useEffect(() => { + clearTimeout(_timeout) + isLoaded(true) + if(value.trim() === "") { + isLoaded(false) + return columns(resource) + } + + _setTimeout(setTimeout(() => { + if(!skipFirstDebounced) { + const result = searcherColumn.search(search.trim()) + if(result.length > 0) { + columns(result) + } else { + columns(resource) + } + } + setSkipFirstDebounced(false) + isLoaded(false) + }, 500)) + }, [value]) + + useEffect(() => { + setValue(search) + }, [search]) + + const searcherColumn = new FuzzySearch ( + resource, ["node.name", "node.description"], {sort: true} + ) + + return ( + + } + /> + ) +} + export default function ColumnsDatasets({ tableId }) { const [resource, setResource] = useState({}) + const [columns, setColumns] = useState({}) const [isError, setIsError] = useState(false) const [isLoading, setIsLoading] = useState(false) - const [search, setSearch] = useState("") - const [inputFocus, setInputFocus] = useState(false) - useEffect(() => { const featchColumns = async () => { @@ -44,6 +103,7 @@ export default function ColumnsDatasets({ tableId }) { if(result) { setResource(result.sort(sortElements)) + setColumns(result.sort(sortElements)) setIsLoading(false) } @@ -156,7 +216,7 @@ export default function ColumnsDatasets({ tableId }) { ) } - const TableHeader = ({ header, ...props }) => { + function TableHeader({ header, ...props }) { return ( ) if(isError) return ( - - } + - - - - - - {headers.map((elm, i) => ( - i != 0 && - ))} - - - - - {resource.length > 0 && resource.map((elm,i) => ( - - +
+ + + - {elm?.node?.name ? elm.node.name : "Não informado"} - - - - - { - elm?.node?.coveredByDictionary === true ? "Sim" : - elm?.node?.directoryPrimaryKey?._id ? "Sim" : - elm?.node?.coveredByDictionary === false ? "Não" - : - "Não informado" - } - - - - {elm?.node?.description ? elm.node.description : "Não informado"} - - - - {elm?.node?.bigqueryType?.name ? elm.node.bigqueryType.name : "Não informado"} - - - - {elm?.node?.coverage?.start && elm?.node?.coverage?.end ? - elm.node.coverage.start +" - "+ elm.node.coverage.end - : - "Não informado" - } - - - - {elm?.node?.measurementUnit ? - measurementUnit(elm.node.measurementUnit) - : - "Não informado" - } - - - - { - elm?.node?.containsSensitiveData === true ? "Sim" - : - elm?.node?.containsSensitiveData === false ? "Não" - : - "Não informado" - } - - - - {elm?.node?.observations ? elm.node.observations : "Não informado"} - + /> + {headers.map((elm, i) => ( + i != 0 && + ))} - ))} - -
- + + + + {columns.length > 0 && columns.map((elm,i) => ( + + + {elm?.node?.name ? elm.node.name : "Não informado"} + + + + + { + elm?.node?.coveredByDictionary === true ? "Sim" : + elm?.node?.directoryPrimaryKey?._id ? "Sim" : + elm?.node?.coveredByDictionary === false ? "Não" + : + "Não informado" + } + + + + {elm?.node?.description ? elm.node.description : "Não informado"} + + + + {elm?.node?.bigqueryType?.name ? elm.node.bigqueryType.name : "Não informado"} + + + + {elm?.node?.coverage?.start && elm?.node?.coverage?.end ? + elm.node.coverage.start +" - "+ elm.node.coverage.end + : + "Não informado" + } + + + + {elm?.node?.measurementUnit ? + measurementUnit(elm.node.measurementUnit) + : + "Não informado" + } + + + + { + elm?.node?.containsSensitiveData === true ? "Sim" + : + elm?.node?.containsSensitiveData === false ? "Não" + : + "Não informado" + } + + + + {elm?.node?.observations ? elm.node.observations : "Não informado"} + + + ))} + + + + ) } From e88cd794efe0cc75626375ffa68e8bab20615fd5 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Tue, 25 Jun 2024 00:20:03 -0300 Subject: [PATCH 28/66] feat: checkbox att visual --- next/components/atoms/Checkbox.js | 52 ++++++++++++++++++++ next/components/atoms/FilterAccordion.js | 27 ++++++---- next/components/molecules/ColumnDatasets.js | 37 +++++++++++++- next/components/molecules/FormTable.js | 2 +- next/components/organisms/PostDatasetForm.js | 4 +- next/pages/user/[username].js | 37 ++++++++------ next/styles/globals.css | 19 +------ 7 files changed, 132 insertions(+), 46 deletions(-) create mode 100644 next/components/atoms/Checkbox.js diff --git a/next/components/atoms/Checkbox.js b/next/components/atoms/Checkbox.js new file mode 100644 index 00000000..8619ba6f --- /dev/null +++ b/next/components/atoms/Checkbox.js @@ -0,0 +1,52 @@ +import { + Checkbox, + Icon +} from '@chakra-ui/react'; + +function CustomCheckbockIcon({ variant, isChecked, ...props }) { + const variantIcon = () => { + return "M7.17894 10.9259L13.306 4.7988C13.5043 4.60057 13.7378 4.50146 14.0068 4.50146C14.2758 4.50146 14.5094 4.60057 14.7076 4.7988C14.9058 4.99702 15.0049 5.23196 15.0049 5.50364C15.0049 5.7753 14.9058 6.01024 14.7076 6.20846L7.87972 13.0444C7.6815 13.2427 7.44791 13.3418 7.17894 13.3418C6.90998 13.3418 6.67639 13.2427 6.47817 13.0444L3.2943 9.86058C3.09609 9.66236 2.99834 9.42742 3.00103 9.15576C3.00373 8.88408 3.10418 8.64914 3.30241 8.45091C3.50063 8.25269 3.73557 8.15358 4.00725 8.15358C4.27891 8.15358 4.51385 8.25269 4.71207 8.45091L7.17894 10.9259Z" + } + + return ( + + + + ) +} + +export default function CustomCheckbox({ children, icon, ...props}) { + return ( + } + {...props} + > + {children} + + ) +} \ No newline at end of file diff --git a/next/components/atoms/FilterAccordion.js b/next/components/atoms/FilterAccordion.js index a4e3de20..38f1f7a7 100644 --- a/next/components/atoms/FilterAccordion.js +++ b/next/components/atoms/FilterAccordion.js @@ -4,13 +4,13 @@ import { AccordionIcon, AccordionItem, Box, - Checkbox, CheckboxGroup, VStack, Text, HStack, } from "@chakra-ui/react"; import { useEffect, useState } from "react"; +import Checkbox from "../atoms/Checkbox"; import ControlledInput from "./ControlledInput"; import SectionText from "./SectionText"; import SearchIcon from "../../public/img/icons/searchIcon" @@ -162,17 +162,26 @@ export function CheckboxFilterAccordion({ padding="8px 0" > {options.length > 0 && options.map((c) => ( - { onChange(e.target.value)}} + style={{ + display:"flex", + flexDirection:"row", + gap:"8px", + cursor:"pointer", + alignItems:"center", + color:"#7D7D7D", + fontFamily:"Lato", + letterSpacing:"0.5px", + }} > + { onChange(e.target.value)}} + /> + {c[displayField]} {c["count"] ? `(${c["count"]})` : `(0)`} - + ))} diff --git a/next/components/molecules/ColumnDatasets.js b/next/components/molecules/ColumnDatasets.js index 989b7a28..7e4b52f7 100644 --- a/next/components/molecules/ColumnDatasets.js +++ b/next/components/molecules/ColumnDatasets.js @@ -10,13 +10,13 @@ import { Stack, Box, Text, - Skeleton, + Skeleton } from '@chakra-ui/react'; import { useState, useEffect } from 'react'; import FuzzySearch from 'fuzzy-search'; import Latex from 'react-latex-next'; -import LoadingSpin from '../atoms/Loading'; import { ControlledInputSimple } from '../atoms/ControlledInput'; +import Checkbox from '../atoms/Checkbox'; import { getColumnsBdmTable @@ -347,11 +347,37 @@ export default function ColumnsDatasets({ tableId }) { + + + {headers.map((elm, i) => ( i != 0 && ))} @@ -365,6 +391,13 @@ export default function ColumnsDatasets({ tableId }) { role="row" borderBottom="1px solid #DEDFE0" > + + + { startColor="#F0F0F0" endColor="#F3F3F3" > - + Tornar o e-mail de acesso à sua conta visível para o público. - + diff --git a/next/styles/globals.css b/next/styles/globals.css index 36615e45..3d14035f 100644 --- a/next/styles/globals.css +++ b/next/styles/globals.css @@ -65,31 +65,14 @@ body { scrollbar-width: none; /* Firefox */ } -.chakra-checkbox__label { - font-size: 14px !important; - display: flex; - flex-direction: row; - gap: 8px; -} - .chakra-checkbox__control { - padding: 5px !important; - width: 20px !important; - height: 20px !important; - border-width: 3px !important; - border-radius: 4px !important; - border-color: #DEDFE0 !important; + border-width: 0px !important; } .chakra-checkbox__control[data-focus] { box-shadow: none !important; } -.chakra-checkbox__control[data-checked] { - background: #2b8c4d !important; - border-color: #2b8c4d !important; -} - @keyframes gray-scale { 50% { -webkit-filter: brightness(98%); From aaa5d496ed19ad4b7208d7b3a2771b612e472943 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Tue, 25 Jun 2024 01:45:16 -0300 Subject: [PATCH 29/66] feat: columns checkbox ajusts --- next/components/atoms/Checkbox.js | 7 ++- next/components/molecules/ColumnDatasets.js | 48 +++++++++++++-------- next/styles/globals.css | 5 +++ 3 files changed, 41 insertions(+), 19 deletions(-) diff --git a/next/components/atoms/Checkbox.js b/next/components/atoms/Checkbox.js index 8619ba6f..02946e30 100644 --- a/next/components/atoms/Checkbox.js +++ b/next/components/atoms/Checkbox.js @@ -5,6 +5,7 @@ import { function CustomCheckbockIcon({ variant, isChecked, ...props }) { const variantIcon = () => { + if(variant === "lessCheck") return "M5.06135 11.0002C4.76599 11.0002 4.51496 10.9029 4.30826 10.7084C4.10157 10.514 3.99823 10.2778 3.99823 9.99984C3.99823 9.72193 4.10157 9.48573 4.30826 9.29124C4.51496 9.09676 4.76599 8.99951 5.06135 8.99951H14.9391C15.2344 8.99951 15.4855 9.09676 15.6922 9.29124C15.8988 9.48573 16.0022 9.72193 16.0022 9.99984C16.0022 10.2778 15.8988 10.514 15.6922 10.7084C15.4855 10.9029 15.2344 11.0002 14.9391 11.0002H5.06135Z" return "M7.17894 10.9259L13.306 4.7988C13.5043 4.60057 13.7378 4.50146 14.0068 4.50146C14.2758 4.50146 14.5094 4.60057 14.7076 4.7988C14.9058 4.99702 15.0049 5.23196 15.0049 5.50364C15.0049 5.7753 14.9058 6.01024 14.7076 6.20846L7.87972 13.0444C7.6815 13.2427 7.44791 13.3418 7.17894 13.3418C6.90998 13.3418 6.67639 13.2427 6.47817 13.0444L3.2943 9.86058C3.09609 9.66236 2.99834 9.42742 3.00103 9.15576C3.00373 8.88408 3.10418 8.64914 3.30241 8.45091C3.50063 8.25269 3.73557 8.15358 4.00725 8.15358C4.27891 8.15358 4.51385 8.25269 4.71207 8.45091L7.17894 10.9259Z" } @@ -13,9 +14,9 @@ function CustomCheckbockIcon({ variant, isChecked, ...props }) { backgroundColor="#2b8c4d" boxSizing="border-box" borderColor="#2b8c4d" + width="20px" + height="20px" viewBox="0 0 18 18" - width="18px" - height="18px" _focus={{ boxShadow: "none", outline: "none" @@ -30,6 +31,8 @@ function CustomCheckbockIcon({ variant, isChecked, ...props }) { export default function CustomCheckbox({ children, icon, ...props}) { return ( { - if(!skipFirstDebounced) { - const result = searcherColumn.search(search.trim()) - if(result.length > 0) { - columns(result) - } else { - columns(resource) - } + const result = searcherColumn.search(search.trim()) + if(result.length > 0) { + columns(result) + } else { + columns(resource) } - setSkipFirstDebounced(false) isLoaded(false) }, 500)) }, [value]) @@ -94,6 +91,7 @@ export default function ColumnsDatasets({ tableId }) { const [columns, setColumns] = useState({}) const [isError, setIsError] = useState(false) const [isLoading, setIsLoading] = useState(false) + const [isSearchLoading, setIsSearchLoading] = useState(true) useEffect(() => { const featchColumns = async () => { @@ -105,6 +103,7 @@ export default function ColumnsDatasets({ tableId }) { setResource(result.sort(sortElements)) setColumns(result.sort(sortElements)) setIsLoading(false) + setIsSearchLoading(false) } } catch (error) { @@ -302,6 +301,7 @@ export default function ColumnsDatasets({ tableId }) { lineHeight="20px" color="#464A51" backgroundColor="#FFF" + borderColor="#DEDFE0" textTransform="none" letterSpacing="inherit" {...props} @@ -322,11 +322,20 @@ export default function ColumnsDatasets({ tableId }) { return ( - + + + - + Date: Tue, 25 Jun 2024 19:47:03 -0300 Subject: [PATCH 30/66] feat: wip getTableOneBigTableQuery in informationQuerys --- next/components/atoms/Checkbox.js | 2 +- .../{ColumnDatasets.js => ColumnsDatasets.js} | 55 ++++-- .../molecules/DataInformationQuery.js | 165 ++++++++++++------ next/pages/api/cloudTables/index.js | 0 next/pages/api/tables/getBigTableQuery.js | 25 +++ next/pages/api/tables/index.js | 2 + next/utils.js | 8 +- 7 files changed, 184 insertions(+), 73 deletions(-) rename next/components/molecules/{ColumnDatasets.js => ColumnsDatasets.js} (89%) delete mode 100644 next/pages/api/cloudTables/index.js create mode 100644 next/pages/api/tables/getBigTableQuery.js diff --git a/next/components/atoms/Checkbox.js b/next/components/atoms/Checkbox.js index 02946e30..1f16db46 100644 --- a/next/components/atoms/Checkbox.js +++ b/next/components/atoms/Checkbox.js @@ -3,7 +3,7 @@ import { Icon } from '@chakra-ui/react'; -function CustomCheckbockIcon({ variant, isChecked, ...props }) { +function CustomCheckbockIcon({ variant, isIndeterminate, isChecked, ...props }) { const variantIcon = () => { if(variant === "lessCheck") return "M5.06135 11.0002C4.76599 11.0002 4.51496 10.9029 4.30826 10.7084C4.10157 10.514 3.99823 10.2778 3.99823 9.99984C3.99823 9.72193 4.10157 9.48573 4.30826 9.29124C4.51496 9.09676 4.76599 8.99951 5.06135 8.99951H14.9391C15.2344 8.99951 15.4855 9.09676 15.6922 9.29124C15.8988 9.48573 16.0022 9.72193 16.0022 9.99984C16.0022 10.2778 15.8988 10.514 15.6922 10.7084C15.4855 10.9029 15.2344 11.0002 14.9391 11.0002H5.06135Z" return "M7.17894 10.9259L13.306 4.7988C13.5043 4.60057 13.7378 4.50146 14.0068 4.50146C14.2758 4.50146 14.5094 4.60057 14.7076 4.7988C14.9058 4.99702 15.0049 5.23196 15.0049 5.50364C15.0049 5.7753 14.9058 6.01024 14.7076 6.20846L7.87972 13.0444C7.6815 13.2427 7.44791 13.3418 7.17894 13.3418C6.90998 13.3418 6.67639 13.2427 6.47817 13.0444L3.2943 9.86058C3.09609 9.66236 2.99834 9.42742 3.00103 9.15576C3.00373 8.88408 3.10418 8.64914 3.30241 8.45091C3.50063 8.25269 3.73557 8.15358 4.00725 8.15358C4.27891 8.15358 4.51385 8.25269 4.71207 8.45091L7.17894 10.9259Z" diff --git a/next/components/molecules/ColumnDatasets.js b/next/components/molecules/ColumnsDatasets.js similarity index 89% rename from next/components/molecules/ColumnDatasets.js rename to next/components/molecules/ColumnsDatasets.js index 7b90dcdf..b798036f 100644 --- a/next/components/molecules/ColumnDatasets.js +++ b/next/components/molecules/ColumnsDatasets.js @@ -11,7 +11,6 @@ import { Box, Text, Skeleton, - transform } from '@chakra-ui/react'; import { useState, useEffect } from 'react'; import FuzzySearch from 'fuzzy-search'; @@ -27,7 +26,6 @@ import InternalError from '../../public/img/internalError' import InfoIcon from '../../public/img/icons/infoIcon'; import RedirectIcon from '../../public/img/icons/redirectIcon'; import SearchIcon from '../../public/img/icons/searchIcon'; -import CrossIcon from '../../public/img/icons/crossIcon'; import 'katex/dist/katex.min.css'; function SearchColumn({ isLoaded, resource, columns }) { @@ -86,13 +84,33 @@ function SearchColumn({ isLoaded, resource, columns }) { ) } -export default function ColumnsDatasets({ tableId }) { +export default function ColumnsDatasets({ tableId, checkedColumns, onChangeCheckedColumns }) { const [resource, setResource] = useState({}) const [columns, setColumns] = useState({}) const [isError, setIsError] = useState(false) const [isLoading, setIsLoading] = useState(false) const [isSearchLoading, setIsSearchLoading] = useState(true) + const isChecked = (columnSlug) => checkedColumns.includes(columnSlug) + + const handleCheckboxChange = (columnSlug) => { + if (isChecked(columnSlug)) { + onChangeCheckedColumns(checkedColumns.filter(slug => slug !== columnSlug)) + } else { + onChangeCheckedColumns([...checkedColumns, columnSlug]) + } + } + + const handleMasterCheckboxChange = () => { + const allColumnSlugs = resource.map(column => column.node.name) + + if (checkedColumns.length === allColumnSlugs.length) { + onChangeCheckedColumns([]) + } else { + onChangeCheckedColumns(allColumnSlugs) + } + } + useEffect(() => { const featchColumns = async () => { setIsLoading(true) @@ -102,6 +120,7 @@ export default function ColumnsDatasets({ tableId }) { if(result) { setResource(result.sort(sortElements)) setColumns(result.sort(sortElements)) + onChangeCheckedColumns(result.sort(sortElements).map(column => column.node.name)) setIsLoading(false) setIsSearchLoading(false) } @@ -367,10 +386,10 @@ export default function ColumnsDatasets({ tableId }) { padding="0 !important" zIndex={5} > - + - - - + + handleCheckboxChange(elm.node.name)} + /> + + + { + if(resource._id === undefined) return + setIsLoading(true) + + setSqlCode("") + if (checkedColumns.length === 0) return setIsLoading(false) + + async function sqlCodeString() { + const result = await getBigTableQuery(resource._id, checkedColumns) + setSqlCode(result) + setIsLoading(false) + } + + if(tabIndex === 0) sqlCodeString() + }, [resource._id, checkedColumns, tabIndex]) + const handlerDownload = () => { if (downloadNotAllowed === false) return null @@ -164,8 +188,10 @@ export default function DataInformationQuery({ resource }) { Selecione as colunas que você deseja acessar: - @@ -209,12 +235,14 @@ export default function DataInformationQuery({ resource }) { - 0 && + - + > + + } @@ -236,57 +264,82 @@ export default function DataInformationQuery({ resource }) { No editor de consultas do BigQuery, digite a seguinte instrução: - - Primeira vez usando o BigQuery? - - Siga o passo a passo. - - - - - - + : + <> + - Acesse o BigQuery - - - + Primeira vez usando o BigQuery? + + Siga o passo a passo. + + + + + + + Acesse o BigQuery + + + + + + + {sqlCode} + + + + } {/* {resource?.isClosed ? Com uma assinatura BD Pro válida, copie o código abaixo e cole no Editor de Consultas no BigQuery: diff --git a/next/pages/api/cloudTables/index.js b/next/pages/api/cloudTables/index.js deleted file mode 100644 index e69de29b..00000000 diff --git a/next/pages/api/tables/getBigTableQuery.js b/next/pages/api/tables/getBigTableQuery.js new file mode 100644 index 00000000..5b5ee2d1 --- /dev/null +++ b/next/pages/api/tables/getBigTableQuery.js @@ -0,0 +1,25 @@ +import axios from "axios"; + +const API_URL= `${process.env.NEXT_PUBLIC_API_URL}/api/v1/graphql` + +export default async function getBigTableQuery(id, columns) { + try { + const res = await axios({ + url: API_URL, + method: "POST", + data: { + query: ` + query { + getTableOneBigTableQuery (tableId: "${id}", columns: [${columns.map(item => `"${item}"`).join(", ")}]) + } + `, + variables: null + } + }) + const data = res.data.data.getTableOneBigTableQuery + return data + } catch (error) { + console.error(error) + return "err" + } +} diff --git a/next/pages/api/tables/index.js b/next/pages/api/tables/index.js index 732abdbc..a87a9ed5 100644 --- a/next/pages/api/tables/index.js +++ b/next/pages/api/tables/index.js @@ -2,10 +2,12 @@ import deleteTable from "./deleteTable"; import getAllTableInDataset from "./getAllTableInDataset"; import getTableEdit from "./getTableEdit"; import postTable from "./postTable"; +import getBigTableQuery from "./getBigTableQuery"; export { deleteTable, getAllTableInDataset, getTableEdit, postTable, + getBigTableQuery } diff --git a/next/utils.js b/next/utils.js index 2edaf3aa..ead5990c 100644 --- a/next/utils.js +++ b/next/utils.js @@ -220,12 +220,12 @@ export function formatBytes(bytes) { if (bytes < 1024) { return `${bytes}B` } else if (bytes < 1024 * 1024) { - return `${(bytes / 1024).toFixed(2)}KB` + return `${(bytes / 1024).toFixed(2)} KB` } else if (bytes < 1024 * 1024 * 1024) { - return `${(bytes / (1024 * 1024)).toFixed(2)}MB` + return `${(bytes / (1024 * 1024)).toFixed(2)} MB` } else if (bytes < 1024 * 1024 * 1024 * 1024) { - return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)}GB` + return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB` } else { - return `${(bytes / (1024 * 1024 * 1024 * 1024)).toFixed(2)}TB` + return `${(bytes / (1024 * 1024 * 1024 * 1024)).toFixed(2)} TB` } } \ No newline at end of file From cbcd95d00b55e4aac393ec00a798adee5c9887a7 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Wed, 26 Jun 2024 23:55:06 -0300 Subject: [PATCH 31/66] feat: wip highlight codes --- .../molecules/DataInformationQuery.js | 138 +++++++++++------- next/package-lock.json | 9 ++ next/package.json | 1 + 3 files changed, 97 insertions(+), 51 deletions(-) diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index 01ec4762..d642c7f2 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -14,7 +14,12 @@ import { HStack, Tooltip } from "@chakra-ui/react"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useRef } from "react"; +import hljs from "highlight.js/lib/core"; +import sqlHighlight from "highlight.js/lib/languages/sql"; +import pythonHighlight from "highlight.js/lib/languages/python"; +import rHighlight from "highlight.js/lib/languages/r"; +import 'highlight.js/styles/monokai-sublime.css' import Link from "../atoms/Link"; import GreenTab from "../atoms/GreenTab"; @@ -35,44 +40,89 @@ import DownloadIcon from "../../public/img/icons/downloadIcon"; import ExclamationIcon from "../../public/img/icons/exclamationIcon"; import InfoIcon from "../../public/img/icons/infoIcon"; -export function PrismCodeHighlight({ language, children }) { + +export function CodeHighlight({ language, children }) { + const textRef = useRef(null) + const [isOverflowing, setIsOverflowing] = useState(false) + const [isExpanded, setIsExpanded] = useState(true) + + const [highlightedCode, setHighlightedCode] = useState("") const { hasCopied, onCopy } = useClipboard(children) + useEffect(() => { + if(language === "sql") hljs.registerLanguage("sql", sqlHighlight) + if(language === "python") hljs.registerLanguage("python", sqlHighlight) + if(language === "r") hljs.registerLanguage("r", sqlHighlight) + + const highlighted = hljs.highlight(children, { language:language }).value + setHighlightedCode(highlighted) + }, [children, language]) + + useEffect(() => { + if (textRef.current) { + const { clientHeight } = textRef.current + setIsOverflowing(clientHeight > 190) + if(clientHeight > 190) setIsExpanded(false) + } + }, [highlightedCode]) + return ( - 
-      
-        {children}
-      
-
-      
-
+ + + + + + {isOverflowing && ( + + setIsExpanded(!isExpanded)} + > + {isExpanded ? "Reduzir" : "Expandir"} + + + )} + ) } @@ -89,8 +139,6 @@ export default function DataInformationQuery({ resource }) { let queryBQ useEffect(() => { - if (window) window?.Prism?.highlightAll() - if (resource?.numberRows === 0) return setDownloadNotAllowed(false) if (resource?.numberRows) return resource?.numberRows > 200000 ? setDownloadNotAllowed(false) : setDownloadNotAllowed(true) @@ -116,7 +164,6 @@ export default function DataInformationQuery({ resource }) { async function sqlCodeString() { const result = await getBigTableQuery(resource._id, checkedColumns) setSqlCode(result) - setIsLoading(false) } if(tabIndex === 0) sqlCodeString() @@ -324,20 +371,9 @@ export default function DataInformationQuery({ resource }) { - - - {sqlCode} - - + + {sqlCode} + } {/* {resource?.isClosed ? diff --git a/next/package-lock.json b/next/package-lock.json index a17cef1c..76e115f0 100644 --- a/next/package-lock.json +++ b/next/package-lock.json @@ -18,6 +18,7 @@ "cookie-parser": "^1.4.6", "framer-motion": "^4.1.17", "fuzzy-search": "^3.2.1", + "highlight.js": "^11.9.0", "js-cookie": "^3.0.5", "next": "^12.3.4", "next-logger": "4.0.0", @@ -1969,6 +1970,14 @@ "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" }, + "node_modules/highlight.js": { + "version": "11.9.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz", + "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", diff --git a/next/package.json b/next/package.json index f534b172..082fab59 100644 --- a/next/package.json +++ b/next/package.json @@ -21,6 +21,7 @@ "cookie-parser": "^1.4.6", "framer-motion": "^4.1.17", "fuzzy-search": "^3.2.1", + "highlight.js": "^11.9.0", "js-cookie": "^3.0.5", "next": "^12.3.4", "next-logger": "4.0.0", From c071cfa003aaa0ef7c383fc35f8a646070cee049 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Thu, 27 Jun 2024 14:39:56 -0300 Subject: [PATCH 32/66] feat: wip loading code in sql, python and R --- .../{ColumnsDatasets.js => ColumnsTable.js} | 128 ++++---- .../molecules/DataInformationQuery.js | 290 +++++++++++++----- 2 files changed, 279 insertions(+), 139 deletions(-) rename next/components/molecules/{ColumnsDatasets.js => ColumnsTable.js} (83%) diff --git a/next/components/molecules/ColumnsDatasets.js b/next/components/molecules/ColumnsTable.js similarity index 83% rename from next/components/molecules/ColumnsDatasets.js rename to next/components/molecules/ColumnsTable.js index b798036f..83808b2e 100644 --- a/next/components/molecules/ColumnsDatasets.js +++ b/next/components/molecules/ColumnsTable.js @@ -84,7 +84,13 @@ function SearchColumn({ isLoaded, resource, columns }) { ) } -export default function ColumnsDatasets({ tableId, checkedColumns, onChangeCheckedColumns }) { +export default function ColumnsTable({ + tableId, + checkedColumns, + onChangeCheckedColumns, + setHasLoading, + template = "default" +}) { const [resource, setResource] = useState({}) const [columns, setColumns] = useState({}) const [isError, setIsError] = useState(false) @@ -113,7 +119,9 @@ export default function ColumnsDatasets({ tableId, checkedColumns, onChangeCheck useEffect(() => { const featchColumns = async () => { + setHasLoading(true) setIsLoading(true) + try { const result = await getColumnsBdmTable(tableId) @@ -121,8 +129,9 @@ export default function ColumnsDatasets({ tableId, checkedColumns, onChangeCheck setResource(result.sort(sortElements)) setColumns(result.sort(sortElements)) onChangeCheckedColumns(result.sort(sortElements).map(column => column.node.name)) - setIsLoading(false) + setHasLoading(false) setIsSearchLoading(false) + setIsLoading(false) } } catch (error) { @@ -139,17 +148,18 @@ export default function ColumnsDatasets({ tableId, checkedColumns, onChangeCheck pt: "Nome", tooltip:"Nome da coluna." }, - // { - // pt: "Coberta Por Um Dicionário", - // tooltip:"Indica se a coluna possui categorias descritas na tabela 'dicionario', explicando o significado das suas chaves e valores — ex: 'sexo' possui os valores 0 e 1 na coluna, e, no dicionario, você irá encontrar 'sexo' com as categorias (chave: 1 - valor: Feminino), (chave: 0 - valor: Masculino)." - // }, - // { - // pt: "Coluna Correspondente Nos Diretórios", - // tooltip:"Caso preenchida, indica que a coluna é chave primária de uma entidade — ex: id_municipio = chave primária de municípios. Isso significa que a coluna é igual em todos os conjuntos do datalake. Informações centralizadas da entidade se encontram no diretório conforme: [diretorio].[tabela]:[coluna]." - // }, { - pt: "Precisa de tradução", - tooltip:"A coluna possui códigos institucionais a serem traduzidos." + pt: + template === "download" ? + "Tabela de tradução" + : + "Precisa de tradução" + , + tooltip: + template === "download" ? + "Para traduzir os códigos institucionais da tabela você precisa utilizar as tabelas de dicionário e diretórios, dependendo de qual coluna você quiser usar." + : + "A coluna possui códigos institucionais a serem traduzidos." }, { pt: "Descrição", @@ -375,35 +385,37 @@ export default function ColumnsDatasets({ tableId, checkedColumns, onChangeCheck
+ + + + +
- + + } - + + handleCheckboxChange(elm.node.name)} + /> + + + } { if(language === "sql") hljs.registerLanguage("sql", sqlHighlight) - if(language === "python") hljs.registerLanguage("python", sqlHighlight) - if(language === "r") hljs.registerLanguage("r", sqlHighlight) + if(language === "python") hljs.registerLanguage("python", pythonHighlight) + if(language === "r") hljs.registerLanguage("r", rHighlight) const highlighted = hljs.highlight(children, { language:language }).value setHighlightedCode(highlighted) }, [children, language]) useEffect(() => { + if (language === "r") return if (textRef.current) { + setIsOverflowing(false) + setIsExpanded(true) const { clientHeight } = textRef.current setIsOverflowing(clientHeight > 190) if(clientHeight > 190) setIsExpanded(false) @@ -74,14 +78,14 @@ export function CodeHighlight({ language, children }) { width="100%" borderRadius="8px" backgroundColor="#23241F" - padding="22px 16px" > - + {hasCopied ? + + : + + } + {isOverflowing && ( setIsExpanded(!isExpanded)} + fill="#71757A" + color="#71757A" + _hover={{ + fill:"#878A8E", + color:"#878A8E" + }} > + setIsExpanded(!isExpanded)} + fontFamily="Roboto" + fontWeight="500" + fontSize="12px" + lineHeight="18px" + letterSpacing="0.1px" > - {isExpanded ? "Reduzir" : "Expandir"} + {isExpanded ? "Recolher" : "Expandir"} )} @@ -131,7 +175,8 @@ export default function DataInformationQuery({ resource }) { const [downloadNotAllowed, setDownloadNotAllowed] = useState(false) const [checkedColumns, setCheckedColumns] = useState([]) const [sqlCode, setSqlCode] = useState("") - const [isLoading, setIsLoading] = useState(true) + const [hasLoadingColumns, setHasLoadingColumns] = useState(false) + const [isLoadingCode, setIsLoadingCode] = useState(false) let gcpDatasetID let gcpTableId @@ -156,14 +201,13 @@ export default function DataInformationQuery({ resource }) { useEffect(() => { if(resource._id === undefined) return - setIsLoading(true) - + setIsLoadingCode(true) setSqlCode("") - if (checkedColumns.length === 0) return setIsLoading(false) async function sqlCodeString() { const result = await getBigTableQuery(resource._id, checkedColumns) setSqlCode(result) + setIsLoadingCode(false) } if(tabIndex === 0) sqlCodeString() @@ -181,6 +225,11 @@ export default function DataInformationQuery({ resource }) { triggerGAEvent("category_click", categoryValues[index]); } + function templateColumns() { + if(tabIndex === 0) return "checks" + if(tabIndex === 3) return "download" + } + return ( SQL Python R - Stata + {/* Stata */} Download @@ -225,23 +275,39 @@ export default function DataInformationQuery({ resource }) { width="100%" gap="16px" > - - Selecione as colunas que você deseja acessar: - + + Selecione as colunas que você deseja acessar: + + - - + - - No editor de consultas do BigQuery, digite a seguinte instrução: - + + No editor de consultas do BigQuery, digite a seguinte instrução: + + {checkedColumns.length === 0 ? : <> - + Primeira vez usando o BigQuery? - - - {sqlCode} - + + + + {sqlCode} + + } {/* {resource?.isClosed ? @@ -399,32 +489,62 @@ export default function DataInformationQuery({ resource }) { */} - - {/* + - Criamos um pacote em Python para você acessar o datalake. Basta rodar o código: - + No terminal do Python, digite a seguinte instrução: + + + + Primeira vez usando o pacote Python? + + Siga o passo a passo. + + - - {`import basedosdados as bd + {`import basedosdados as bd - # Para carregar o dado direto no pandas - df = bd.read_table(dataset_id='${gcpDatasetID}', - table_id='${gcpTableId}', - billing_project_id="")`} - */} - +# Para carregar o dado direto no pandas +df = bd.read_table(dataset_id='${gcpDatasetID}', +table_id='${gcpTableId}', +billing_project_id="")`} + - {/* - Criamos um pacote em R para você acessar o datalake. Basta rodar o código: - + Criamos um pacote em Python para você acessar o datalake. Basta rodar o código: + */} + - - {`install.packages("basedosdados") + + {`install.packages("basedosdados") library("basedosdados") # Defina o seu projeto no Google Cloud @@ -433,12 +553,18 @@ export default function DataInformationQuery({ resource }) { # Para carregar o dado direto no R query <- bdplyr("${queryBQ}") df <- bd_collect(query)`} - */} - + - {/* + Criamos um pacote em R para você acessar o datalake. Basta rodar o código: + */} + + + {/* + Criamos um pacote em Stata para você acessar o datalake. Basta rodar o código: @@ -451,8 +577,8 @@ export default function DataInformationQuery({ resource }) { dataset_id("${gcpDatasetID}") /// table_id("${gcpTableId}") /// billing_project_id("")`} - */} - + + */} From 98f0c9468052d5165cf99b8effc275802267f0b7 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Thu, 27 Jun 2024 20:29:50 -0300 Subject: [PATCH 33/66] feat: wip consult sql in sql section, python and r --- next/components/molecules/ColumnsTable.js | 3 +- .../molecules/DataInformationQuery.js | 556 +++++++++++------- 2 files changed, 355 insertions(+), 204 deletions(-) diff --git a/next/components/molecules/ColumnsTable.js b/next/components/molecules/ColumnsTable.js index 83808b2e..e7124f5f 100644 --- a/next/components/molecules/ColumnsTable.js +++ b/next/components/molecules/ColumnsTable.js @@ -89,7 +89,7 @@ export default function ColumnsTable({ checkedColumns, onChangeCheckedColumns, setHasLoading, - template = "default" + template }) { const [resource, setResource] = useState({}) const [columns, setColumns] = useState({}) @@ -128,7 +128,6 @@ export default function ColumnsTable({ if(result) { setResource(result.sort(sortElements)) setColumns(result.sort(sortElements)) - onChangeCheckedColumns(result.sort(sortElements).map(column => column.node.name)) setHasLoading(false) setIsSearchLoading(false) setIsLoading(false) diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index 7491a132..c24638d9 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -9,8 +9,6 @@ import { Text, Box, useClipboard, - Button, - HStack, Tooltip, Skeleton } from "@chakra-ui/react"; @@ -19,15 +17,12 @@ import hljs from "highlight.js/lib/core"; import sqlHighlight from "highlight.js/lib/languages/sql"; import pythonHighlight from "highlight.js/lib/languages/python"; import rHighlight from "highlight.js/lib/languages/r"; -import 'highlight.js/styles/monokai-sublime.css' +import 'highlight.js/styles/obsidian.css' -import Link from "../atoms/Link"; import GreenTab from "../atoms/GreenTab"; -import SectionText from "../atoms/SectionText"; import Toggle from "../atoms/Toggle"; -import RoundedButton from "../atoms/RoundedButton"; import ColumnsTable from "./ColumnsTable"; -import { DisclaimerBox, AlertDiscalimerBox} from "./DisclaimerBox"; +import { AlertDiscalimerBox} from "./DisclaimerBox"; import { triggerGAEvent } from "../../utils"; import { @@ -37,7 +32,6 @@ import { import { CopyIcon } from "../../public/img/icons/copyIcon"; import DownloadIcon from "../../public/img/icons/downloadIcon"; -import ExclamationIcon from "../../public/img/icons/exclamationIcon"; import InfoIcon from "../../public/img/icons/infoIcon"; import ChevronIcon from "../../public/img/icons/chevronIcon"; import CheckIcon from "../../public/img/icons/checkIcon"; @@ -60,7 +54,6 @@ export function CodeHighlight({ language, children }) { }, [children, language]) useEffect(() => { - if (language === "r") return if (textRef.current) { setIsOverflowing(false) setIsExpanded(true) @@ -77,7 +70,7 @@ export function CodeHighlight({ language, children }) { flexDirection="column" width="100%" borderRadius="8px" - backgroundColor="#23241F" + backgroundColor="#282b2e" > { if (resource?.numberRows === 0) return setDownloadNotAllowed(false) @@ -193,7 +187,6 @@ export default function DataInformationQuery({ resource }) { if (gcpDatasetID) { if (gcpTableId) { downloadUrl = `https://storage.googleapis.com/basedosdados-public/one-click-download/${gcpDatasetID}/${gcpTableId}/${gcpTableId}.csv.gz` - queryBQ = `${gcpDatasetID}.${gcpTableId}` } } }, [resource]) @@ -202,16 +195,44 @@ export default function DataInformationQuery({ resource }) { useEffect(() => { if(resource._id === undefined) return setIsLoadingCode(true) + setHasLoadingResponse(false) setSqlCode("") + }, [resource._id, checkedColumns, tabIndex]) - async function sqlCodeString() { - const result = await getBigTableQuery(resource._id, checkedColumns) - setSqlCode(result) - setIsLoadingCode(false) + useEffect(() => { + if(hasLoadingResponse === true) { + SqlCodeString() + scrollFocus() } + }, [hasLoadingResponse]) + + function scrollFocus() { + let idTab + + if (tabIndex === 0) idTab = "SQL_section" + else if (tabIndex === 1) idTab = "python_section" + else if (tabIndex === 2) idTab = "r_section" + else return + + const targetElement = document.getElementById(idTab) + + if (targetElement) { + const { top } = targetElement.getBoundingClientRect() + const heightScreen = window.innerHeight + const positionTarget = top + window.pageYOffset + + window.scrollTo({ + top: positionTarget - (heightScreen / 2), + behavior: "smooth", + }) + } + } - if(tabIndex === 0) sqlCodeString() - }, [resource._id, checkedColumns, tabIndex]) + async function SqlCodeString() { + const result = await getBigTableQuery(resource._id, checkedColumns) + setSqlCode(result.trim()) + setIsLoadingCode(false) + } const handlerDownload = () => { if (downloadNotAllowed === false) return null @@ -220,14 +241,9 @@ export default function DataInformationQuery({ resource }) { } const handleIndexes = (index) => { - const categoryValues = ["SQL", "Python", "R", "Stata", "Download"]; - setTabIndex(index); - triggerGAEvent("category_click", categoryValues[index]); - } - - function templateColumns() { - if(tabIndex === 0) return "checks" - if(tabIndex === 3) return "download" + const categoryValues = ["SQL", "Python", "R", "Stata", "Download"] + setTabIndex(index) + triggerGAEvent("category_click", categoryValues[index]) } return ( @@ -299,7 +315,7 @@ export default function DataInformationQuery({ resource }) { onChangeCheckedColumns={setCheckedColumns} hasLoading={hasLoadingColumns} setHasLoading={setHasLoadingColumns} - template={templateColumns()} + template={tabIndex === 3 ? "download" : "checks"} /> 0 && } + + + + { + if(checkedColumns.length === 0) return + setHasLoadingResponse(true) + }} + target="_blank" + display="flex" + alignItems="center" + height="40px" + width="fit-content" + borderRadius="8px" + backgroundColor={checkedColumns.length === 0 ? "#ACAEB1" : "#2B8C4D"} + padding="8px 16px" + cursor={checkedColumns.length === 0 ? "default" : "pointer"} + color="#FFF" + fill="#FFF" + fontFamily="Roboto" + fontWeight="500" + fontSize="14px" + gap="8px" + lineHeight="20px" + _hover={{ + backgroundColor: checkedColumns.length === 0 ? "#ACAEB1" : "#80BA94" + }} + > + Gerar consulta + + + - {checkedColumns.length === 0 ? - - Por favor, selecione acima as colunas que você deseja acessar. + + + Primeira vez usando o BigQuery? + + Siga o passo a passo. + - : - <> - - Primeira vez usando o BigQuery? - - Siga o passo a passo. - - + + + - - - Acesse o BigQuery - - + Acessar o BigQuery + - - - - {sqlCode} - - - - } - {/* {resource?.isClosed ? - - Com uma assinatura BD Pro válida, copie o código abaixo e cole no Editor de Consultas no BigQuery: - - : - - Copie o código abaixo, - clique aqui - para ir ao datalake no BigQuery e cole no Editor de Consultas: - - } - - {`SELECT * FROM \`basedosdados.${queryBQ}\` LIMIT 100`} - */} + + + + + + {sqlCode} + + - - No terminal do Python, digite a seguinte instrução: - - - - Primeira vez usando o pacote Python? - Siga o passo a passo. + No terminal do Python, digite a seguinte instrução: - - - {`import basedosdados as bd + -# Para carregar o dado direto no pandas -df = bd.read_table(dataset_id='${gcpDatasetID}', -table_id='${gcpTableId}', -billing_project_id="")`} - + + + Primeira vez usando o pacote Python? + + Siga o passo a passo. + + + - {/* - Criamos um pacote em Python para você acessar o datalake. Basta rodar o código: - */} + {`import basedosdados as bd + +billing_id = + +query = """ + ${sqlCode} +""" + +bd.read_sql(query = query, billing_project_id = billing_id)`} + + - {`install.packages("basedosdados") - library("basedosdados") - - # Defina o seu projeto no Google Cloud - set_billing_id("") + + + No terminal do R, digite a seguinte instrução: + + - # Para carregar o dado direto no R - query <- bdplyr("${queryBQ}") - df <- bd_collect(query)`} - + + + Primeira vez usando o pacote R? + + Siga o passo a passo. + + + - {/* - Criamos um pacote em R para você acessar o datalake. Basta rodar o código: - */} + {` +# Defina o seu projeto no Google Cloud +set_billing_id("") + +# Para carregar o dado direto no R +query <- " +${sqlCode} +" + +read_sql(query, billing_project_id = get_billing_id()) +`} + + {/* - + Criamos um pacote em Stata para você acessar o datalake. Basta rodar o código: Criamos um pacote em Stata para você acessar o datalake. Basta rodar o código: + Criamos um pacote em Stata para você acessar o datalake. Basta rodar o código: + {`net install basedosdados, from("https://raw.githubusercontent.com/basedosdados/mais/master/stata-package") @@ -580,50 +715,67 @@ billing_project_id="")`} */} - - - Estes dados estão disponíveis porque diversas pessoas colaboram para a sua manutenção. - - - Antes de baixar os dados, apoie você também com uma doação financeira ou saiba como contribuir com seu tempo. - - - {!downloadNotAllowed && - - - - - ATENÇÃO: O tamanho da tabela ultrapassou o limite permitido para download, de 200.000 linhas. - Para acessar os dados, utilize nosso datalake no BigQuery ou nossos pacotes em Python, R e Stata. - - - + + {downloadNotAllowed ? + + Estes dados estão disponíveis porque diversas pessoas colaboram para a sua manutenção. + + Antes de baixar os dados, apoie você também com uma doação financeira ou + + saiba como contribuir com seu tempo. + + + + : + } - handlerDownload()} + target="_blank" + display="flex" + alignItems="center" + height="40px" width="fit-content" - gridGap="6px" + borderRadius="8px" + backgroundColor={downloadNotAllowed ? "#2B8C4D" : "#ACAEB1"} + padding="8px 16px" cursor={downloadNotAllowed ? "pointer" : "default"} - _hover={!downloadNotAllowed ? { transform: "none" } : ""} - onClick={() => handlerDownload()} + color="#FFF" + fill="#FFF" + fontFamily="Roboto" + fontWeight="500" + fontSize="14px" + gap="8px" + lineHeight="20px" + _hover={{ + backgroundColor: downloadNotAllowed ? "#80BA94" : "#ACAEB1" + }} > - - Download dos dados - + + Download da tabela + From 5b5ca9f23c0d39175ed088ebcf99cf558be1e7da Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Fri, 28 Jun 2024 15:40:24 -0300 Subject: [PATCH 34/66] feat: rawDataSource and InformationRequest complet --- next/components/atoms/HelpWidget.js | 18 +- .../components/atoms/ObservationLevelTable.js | 106 ++++ next/components/molecules/ColumnsTable.js | 13 +- .../molecules/DataInformationQuery.js | 184 +++--- next/components/organisms/BdmTablePage.js | 79 +-- .../organisms/InformationRequestPage.js | 424 ++++++++------ .../organisms/RawDataSourcesPage.js | 534 +++++++++++------- .../api/datasets/getInformationRequest.js | 18 +- next/pages/api/datasets/getRawDataSources.js | 16 +- next/pages/api/datasets/index.js | 4 - 10 files changed, 856 insertions(+), 540 deletions(-) create mode 100644 next/components/atoms/ObservationLevelTable.js diff --git a/next/components/atoms/HelpWidget.js b/next/components/atoms/HelpWidget.js index a168e4c6..9b344344 100644 --- a/next/components/atoms/HelpWidget.js +++ b/next/components/atoms/HelpWidget.js @@ -14,13 +14,13 @@ export default function HelpWidget({options, tooltip}) { if(option.name){ return ( { + const value = resource?.observationLevels[elm] + + const newValue = [value?.entity?.name || "Não informado", value?.columns[0]?.name || "Não informado"] + array.push(newValue) + }) + + return ( + +
- - + + + + - - - - - handleCheckboxChange(elm.node.name)} - /> - -
+ + + {headers.map((elm, i) => ( + + ))} + + + + + {array.map((elm, i) => ( + + + + + ))} + +
+ {elm} +
+ {elm[0]} + + {elm[1]} +
+ + ) +} \ No newline at end of file diff --git a/next/components/molecules/ColumnsTable.js b/next/components/molecules/ColumnsTable.js index e7124f5f..fe91779c 100644 --- a/next/components/molecules/ColumnsTable.js +++ b/next/components/molecules/ColumnsTable.js @@ -88,13 +88,14 @@ export default function ColumnsTable({ tableId, checkedColumns, onChangeCheckedColumns, + hasLoading, setHasLoading, template }) { const [resource, setResource] = useState({}) const [columns, setColumns] = useState({}) const [isError, setIsError] = useState(false) - const [isLoading, setIsLoading] = useState(false) + const [isLoading, setIsLoading] = useState(true) const [isSearchLoading, setIsSearchLoading] = useState(true) const isChecked = (columnSlug) => checkedColumns.includes(columnSlug) @@ -118,9 +119,10 @@ export default function ColumnsTable({ } useEffect(() => { + if(tableId === undefined) return + const featchColumns = async () => { setHasLoading(true) - setIsLoading(true) try { const result = await getColumnsBdmTable(tableId) @@ -130,7 +132,6 @@ export default function ColumnsTable({ setColumns(result.sort(sortElements)) setHasLoading(false) setIsSearchLoading(false) - setIsLoading(false) } } catch (error) { @@ -142,6 +143,10 @@ export default function ColumnsTable({ featchColumns() },[tableId]) + useEffect(() => { + setIsLoading(hasLoading) + }, [hasLoading]) + const headers = [ { pt: "Nome", @@ -349,7 +354,7 @@ export default function ColumnsTable({ ) return ( - + { @@ -318,51 +320,61 @@ export default function DataInformationQuery({ resource }) { template={tabIndex === 3 ? "download" : "checks"} /> - - - - - - + + + + + + {checkedColumns.length > 0 && } + {insufficientChecks && + + + + } + - { + if(checkedColumns.length === 0) return setInsufficientChecks(true) + setHasLoadingResponse(true) + }} + target="_blank" + display="flex" + alignItems="center" + height="40px" + width="fit-content" borderRadius="8px" + backgroundColor="#2B8C4D" + padding="8px 16px" + cursor="pointer" + color="#FFF" + fill="#FFF" fontFamily="Roboto" - fontWeight="400" + fontWeight="500" fontSize="14px" + gap="8px" lineHeight="20px" - textAlign="center" - color="#FFFFFF" - placement="top" - maxWidth="180px" - isDisabled={checkedColumns.length === 0 ? false : true} + _hover={{ + backgroundColor:"#80BA94" + }} > - { - if(checkedColumns.length === 0) return - setHasLoadingResponse(true) - }} - target="_blank" - display="flex" - alignItems="center" - height="40px" - width="fit-content" - borderRadius="8px" - backgroundColor={checkedColumns.length === 0 ? "#ACAEB1" : "#2B8C4D"} - padding="8px 16px" - cursor={checkedColumns.length === 0 ? "default" : "pointer"} - color="#FFF" - fill="#FFF" - fontFamily="Roboto" - fontWeight="500" - fontSize="14px" - gap="8px" - lineHeight="20px" - _hover={{ - backgroundColor: checkedColumns.length === 0 ? "#ACAEB1" : "#80BA94" - }} - > - Gerar consulta - - + Gerar consulta + @@ -720,7 +731,7 @@ read_sql(query, billing_project_id = get_billing_id()) display={!hasLoadingColumns ? "flex" : "none"} flexDirection="column" gap="16px" - marginTop="40px" + marginTop="16px" padding={0} > {downloadNotAllowed ? @@ -750,7 +761,6 @@ read_sql(query, billing_project_id = get_billing_id()) handlerDownload()} - target="_blank" display="flex" alignItems="center" height="40px" diff --git a/next/components/organisms/BdmTablePage.js b/next/components/organisms/BdmTablePage.js index eb5acfec..085f911b 100644 --- a/next/components/organisms/BdmTablePage.js +++ b/next/components/organisms/BdmTablePage.js @@ -6,13 +6,12 @@ import { Skeleton, SkeletonText, Divider, - Tooltip + Tooltip, } from "@chakra-ui/react"; import { useState, useEffect } from "react"; -import SectionText from "../atoms/SectionText"; -import { SimpleTable } from "../atoms/SimpleTable"; import ReadMore from "../atoms/ReadMore"; import { formatBytes } from "../../utils"; +import ObservationLevel from "../atoms/ObservationLevelTable"; import { TemporalCoverageBar } from "../molecules/TemporalCoverageDisplay"; import DataInformationQuery from "../molecules/DataInformationQuery"; import FourOFour from "../templates/404"; @@ -167,43 +166,6 @@ export default function BdmTablePage({ id }) { ) } - const Empty = () => { - return ( - - Não informado - - ) - } - - const ObservationLevel = () => { - const notFound = Nenhum nível da observação fornecido. - if(resource?.observationLevels === undefined || Object.keys(resource?.observationLevels).length === 0) return notFound - - let array = [] - const keys = Object.keys(resource?.observationLevels) - - keys.forEach((elm) => { - const value = resource?.observationLevels[elm] - - const newValue = [value?.entity?.name || , value?.columns[0]?.name || ] - array.push(newValue) - }) - - return ( - - ) - } - const StackSkeleton = ({ children, ...props }) => { return ( - - - Não informado - - {/* */} - + {resource?.observationLevels && Object.keys(resource?.observationLevels).length > 0 ? + + : + + Não informado + + } + diff --git a/next/components/organisms/InformationRequestPage.js b/next/components/organisms/InformationRequestPage.js index 8060368c..3416e815 100644 --- a/next/components/organisms/InformationRequestPage.js +++ b/next/components/organisms/InformationRequestPage.js @@ -1,201 +1,297 @@ import { - VStack, - HStack, Stack, - Center, - Image, Box, Text, - Grid, - GridItem, + Skeleton, + SkeletonText, + Divider } from "@chakra-ui/react"; import { useEffect, useState } from "react"; -import { useCheckMobile } from "../../hooks/useCheckMobile.hook"; -import LoadingSpin from "../atoms/Loading"; -import Subtitle from "../atoms/Subtitle"; -import SectionText from "../atoms/SectionText"; -import RoundedButton from "../atoms/RoundedButton"; +import ReadMore from "../atoms/ReadMore"; import { TemporalCoverage } from "../molecules/TemporalCoverageDisplay"; -import BaseResourcePage from "../molecules/BaseResourcePage"; -import { DisclaimerBox } from "../molecules/DisclaimerBox"; +import { AlertDiscalimerBox } from "../molecules/DisclaimerBox"; import FourOFour from "../templates/404"; -import { - getInformationRequest -} from "../../pages/api/datasets/index"; - -import StatusIcon from "../../public/img/icons/statusIcon"; -import UserIcon from "../../public/img/icons/userIcon"; -import ExclamationIcon from "../../public/img/icons/exclamationIcon"; import RedirectIcon from "../../public/img/icons/redirectIcon"; export default function InformationRequestPage({ id }) { const [isLoading, setIsLoading] = useState(true) const [resource, setResource] = useState({}) - const [isError, setIsError] = useState({}) - - const featchInformationRequest = async () => { - try { - const result = await getInformationRequest(id) - setResource(result) - } catch (error) { - setIsError(error) - console.error(error) - } - setIsLoading(false) - } + const [isError, setIsError] = useState(false) useEffect(() => { + const featchInformationRequest = async () => { + setIsLoading(true) + + try { + const response = await fetch(`/api/datasets/getInformationRequest?p=${id}`, { method: "GET" }) + const result = await response.json() + + if (result.success) { + setResource(result.resource) + setIsError(false) + } else { + console.error(result.error) + setIsError(true) + } + } catch (error) { + console.error("Fetch error: ", error) + setIsError(true) + } finally { + setIsLoading(false) + } + } + featchInformationRequest() },[id]) - const AddInfoTextBase = ({title, text, children, ...style}) => { + const AddInfoTextBase = ({ title, text, ...props }) => { return ( - + {title} - - {text} - - {children} - + {text || "Não informado"} + ) } + const StackSkeleton = ({ children, ...props }) => { + return ( + + {children} + + ) + } - if(isError?.message?.length > 0 || resource === null || Object.keys(resource).length < 0) return - - if(isLoading) return + if(isError) return return ( - - + + Número do pedido: {resource?.number} + + + + + + Estes dados não passaram pela metodologia de tratamento da Base dos Dados. + + + + - - Consulta aos dados - - -
- - ATENÇÃO: -
- - Estes dados não passaram pela metodologia de tratamento da Base dos Dados. - - - - - + Acessar dados + + + + + Acessar pedido + + + + + + + + Descrição + + + + + + {resource?.observations || "Não fornecido"} + + + + + + + - - - - Acessar dados - - - - - - - Acessar pedido - - - - - - + + + - Descrição - - {resource?.observations || "Nenhuma descrição fornecida."} - - - - - Cobertura temporal - - - - - - - - Informações adicionais - - - - - - - - - - - - - - - - + + Não informado + + {/* */} + + + + + + + + Informações adicionais + + + + + + + ) } diff --git a/next/components/organisms/RawDataSourcesPage.js b/next/components/organisms/RawDataSourcesPage.js index c80c14a8..991eef47 100644 --- a/next/components/organisms/RawDataSourcesPage.js +++ b/next/components/organisms/RawDataSourcesPage.js @@ -1,64 +1,55 @@ import { - VStack, - HStack, Stack, - Center, Box, Text, - Grid, - GridItem + Skeleton, + SkeletonText, + Tooltip, + Divider } from "@chakra-ui/react"; import { useState, useEffect } from "react"; -import { useCheckMobile } from "../../hooks/useCheckMobile.hook"; -import LoadingSpin from "../atoms/Loading"; -import { SimpleTable } from "../atoms/SimpleTable"; -import SectionText from "../atoms/SectionText"; -import Subtitle from "../atoms/Subtitle"; -import RoundedButton from "../atoms/RoundedButton"; +import ReadMore from "../atoms/ReadMore"; +import ObservationLevel from "../atoms/ObservationLevelTable"; import { TemporalCoverage } from "../molecules/TemporalCoverageDisplay"; -import BaseResourcePage from "../molecules/BaseResourcePage"; -import { DisclaimerBox } from "../molecules/DisclaimerBox"; +import { AlertDiscalimerBox } from "../molecules/DisclaimerBox"; import FourOFour from "../templates/404"; -import { - getRawDataSources -} from "../../pages/api/datasets/index"; - import RedirectIcon from "../../public/img/icons/redirectIcon" -import LanguageIcon from "../../public/img/icons/languageIcon"; -import DisplayIcon from "../../public/img/icons/displayIcon"; -import DataStructureIcon from "../../public/img/icons/dataStructureIcon"; -import ApiIcon from "../../public/img/icons/apiIcon"; -import FrequencyIcon from "../../public/img/icons/frequencyIcon"; -import ObservationLevelIcon from "../../public/img/icons/observationLevelIcon"; -import RegisterIcon from "../../public/img/icons/registerIcon"; -import IpIcon from "../../public/img/icons/ipIcon"; -import CoinIcon from "../../public/img/icons/coinIcon"; -import ExclamationIcon from "../../public/img/icons/exclamationIcon"; +import InfoIcon from "../../public/img/icons/infoIcon"; export default function RawDataSourcesPage({ id }) { const [isLoading, setIsLoading] = useState(true) const [resource, setResource] = useState({}) - const [isError, setIsError] = useState({}) - - const featchRawDataSources = async () => { - try { - const result = await getRawDataSources(id) - setResource(result) - } catch (error) { - setIsError(error) - console.error(error) - } - setIsLoading(false) - } + const [isError, setIsError] = useState(false) useEffect(() => { + const featchRawDataSources = async () => { + setIsLoading(true) + try { + const response = await fetch(`/api/datasets/getRawDataSources?p=${id}`, { method: "GET" }) + const result = await response.json() + + if (result.success) { + setResource(result.resource) + setIsError(false) + } else { + console.error(result.error) + setIsError(true) + } + } catch (error) { + console.error("Fetch error: ", error) + setIsError(true) + } finally { + setIsLoading(false) + } + } + featchRawDataSources() },[id]) const ObjectValues = (value) => { - if(value === undefined || Object.keys(value).length === 0) return "Não listado" + if(value === undefined || Object.keys(value).length === 0) return "Não informado" const array = [] @@ -66,7 +57,7 @@ export default function RawDataSourcesPage({ id }) { array.push(elm.name) }) - if(array.length === 0) return "Não listado" + if(array.length === 0) return "Não informado" return array.join(", ").toString() } @@ -79,213 +70,342 @@ export default function RawDataSourcesPage({ id }) { return "Não" break; default: - return "Não listado" + return "Não informado" break; } } const UpdateFrequency = () => { const value = resource?.updates?.[0] - if(value === undefined || Object.keys(value).length === 0) return "Não listado" + if(value === undefined || Object.keys(value).length === 0) return "Não informado" if(value?.frequency >= 0 && value?.entity?.name) return `${value.frequency} ${value.entity.name}` if(value?.entity?.name) return `${value.entity.name}` - return "Não listado" + return "Não informado" } - const Empty = () => { + const TooltipText = ({ text, info, ...props }) => { return ( -

- Não listado -

+ + + {text} + + + + + ) } - const ObservationLevel = () => { - const notFound = Nenhum nível da observação fornecido. - if(resource?.observationLevels === undefined || Object.keys(resource?.observationLevels).length === 0) return notFound - - let array = [] - const keys = Object.keys(resource?.observationLevels) - - keys.forEach((elm) => { - const value = resource?.observationLevels[elm] - - const newValue = [value?.entity?.name || , value?.columns[0]?.name || ] - array.push(newValue) - }) - + const StackSkeleton = ({ children, ...props }) => { return ( - + + {children} + ) } - const AddInfoTextBase = ({title, text, children, ...style}) => { + const AddInfoTextBase = ({ title, text, ...props }) => { return ( - + {title} - - {text} - - {children} - + {text || "Não informado"} + ) } - if(isError?.message?.length > 0 || resource === null || Object.keys(resource).length < 0) return - - if(isLoading) return + if(isError) return return ( - - - Consulta aos dados - - -
- - ATENÇÃO: -
- - Estes dados não passaram pela metodologia de tratamento da Base dos Dados. - - - - - + + {resource?.name} + + + + + + Estes dados não passaram pela metodologia de tratamento da Base dos Dados. + + + + + window.open(resource?.url)} + fill="#FFF" + fontFamily="Roboto" + fontWeight="500" + fontSize="14px" + gap="8px" + lineHeight="20px" + _hover={{ + opacity: resource?.url ? "0.7" : "1" + }} > Acessar fonte original - - - - - - Descrição - - {resource?.description || "Nenhuma descrição fornecida."} - - - - - Cobertura temporal - - + + + + + + + Descrição + + + + + + {resource?.description || "Não fornecido"} + + + + + + + + Cobertura temporal + + + + + + Não informado + + {/* - - - - - - Informações adicionais - - - - - - - + /> */} + + - - - - + - - - - + + + Informações adicionais + + - - - - + - - - - - - - - - Nível da observação - - - - - - - - + - - - - + - - - - - - - + + + + + + + + + + + {resource?.observationLevels && Object.keys(resource?.observationLevels).length > 0 ? + + : + + Não informado + + } + + + + + + + + + ) } diff --git a/next/pages/api/datasets/getInformationRequest.js b/next/pages/api/datasets/getInformationRequest.js index 1dfd4f33..796e81e2 100644 --- a/next/pages/api/datasets/getInformationRequest.js +++ b/next/pages/api/datasets/getInformationRequest.js @@ -3,7 +3,7 @@ import { cleanGraphQLResponse } from "../../../utils"; const API_URL= `${process.env.NEXT_PUBLIC_API_URL}/api/v1/graphql` -export default async function getInformationRequest(id) { +async function getInformationRequest(id) { try { const res = await axios({ url: API_URL, @@ -85,9 +85,19 @@ export default async function getInformationRequest(id) { variables: null } }) - const data = res?.data?.data?.allInformationrequest?.edges[0]?.node - return cleanGraphQLResponse(data) + const data = res?.data + return data } catch (error) { console.error(error) + return "err" } -} \ No newline at end of file +} + +export default async function handler(req, res) { + const result = await getInformationRequest(req.query.p) + + if(result.errors) return res.status(500).json({error: result.errors, success: false}) + if(result === "err") return res.status(500).json({error: "err", success: false}) + + return res.status(200).json({resource: cleanGraphQLResponse(result?.data?.allInformationrequest?.edges[0]?.node), success: true}) +} diff --git a/next/pages/api/datasets/getRawDataSources.js b/next/pages/api/datasets/getRawDataSources.js index 61df9d4c..40f7bfc0 100644 --- a/next/pages/api/datasets/getRawDataSources.js +++ b/next/pages/api/datasets/getRawDataSources.js @@ -3,7 +3,7 @@ import { cleanGraphQLResponse } from "../../../utils"; const API_URL= `${process.env.NEXT_PUBLIC_API_URL}/api/v1/graphql` -export default async function getRawDataSources(id) { +async function getRawDataSources(id) { try { const res = await axios({ url: API_URL, @@ -127,9 +127,19 @@ export default async function getRawDataSources(id) { variables: null } }) - const data = res?.data?.data?.allRawdatasource?.edges[0]?.node - return cleanGraphQLResponse(data) + const data = res.data + return data } catch (error) { console.error(error) + return "err" } } + +export default async function handler(req, res) { + const result = await getRawDataSources(req.query.p) + + if(result.errors) return res.status(500).json({error: result.errors, success: false}) + if(result === "err") return res.status(500).json({error: "err", success: false}) + + return res.status(200).json({resource: cleanGraphQLResponse(result?.data?.allRawdatasource?.edges[0]?.node), success: true}) +} diff --git a/next/pages/api/datasets/index.js b/next/pages/api/datasets/index.js index c97c8157..268ffaf6 100644 --- a/next/pages/api/datasets/index.js +++ b/next/pages/api/datasets/index.js @@ -1,8 +1,6 @@ import getSearchDatasets from "./getSearchDatasets"; import getColumnsBdmTable from "./getColumnsBdmTable"; -import getInformationRequest from "./getInformationRequest"; import getListDatasets from "./getListDatasets"; -import getRawDataSources from "./getRawDataSources"; import getShowDataset from "./getShowDataset"; import postDataset from "./postDataset"; import getDatasetEdit from "./getDatasetEdit"; @@ -11,9 +9,7 @@ import deleteDataset from "./deleteDataset"; export { getSearchDatasets, getColumnsBdmTable, - getInformationRequest, getListDatasets, - getRawDataSources, getShowDataset, postDataset, getDatasetEdit, From 65c5649f38dc6070711cd911db4e53c1062700b7 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Mon, 1 Jul 2024 13:18:46 -0300 Subject: [PATCH 35/66] feat: visual ajusts --- next/components/atoms/ObservationLevelTable.js | 4 +++- next/components/molecules/DataInformationQuery.js | 4 ++-- next/components/molecules/Menu.js | 4 ++-- next/components/organisms/BdmTablePage.js | 2 +- next/components/organisms/DatasetResource.js | 5 +++-- next/components/organisms/InformationRequestPage.js | 13 +++++++------ next/components/organisms/RawDataSourcesPage.js | 9 +++++---- next/pages/dataset/[dataset].js | 9 +++++++-- next/styles/globals.css | 4 ++++ 9 files changed, 34 insertions(+), 20 deletions(-) diff --git a/next/components/atoms/ObservationLevelTable.js b/next/components/atoms/ObservationLevelTable.js index 46b9ba2d..595f6c8f 100644 --- a/next/components/atoms/ObservationLevelTable.js +++ b/next/components/atoms/ObservationLevelTable.js @@ -23,7 +23,7 @@ export default function ObservationLevel({ resource }) { return ( {resource?.observationLevels && Object.keys(resource?.observationLevels).length > 0 ? diff --git a/next/components/organisms/DatasetResource.js b/next/components/organisms/DatasetResource.js index 1124314b..f687dd70 100644 --- a/next/components/organisms/DatasetResource.js +++ b/next/components/organisms/DatasetResource.js @@ -101,6 +101,7 @@ export default function DatasetResource({ key={i} spacing="4px" cursor="pointer" + pointerEvents={elm._id === value ? "none" : "default"} > @@ -137,7 +138,7 @@ export default function InformationRequestPage({ id }) { Acessar dados @@ -182,7 +183,7 @@ export default function InformationRequestPage({ id }) { height="40px" width="fit-content" borderRadius="8px" - backgroundColor={resource?.url ? "#0D99FC" : "#ACAEB1"} + backgroundColor={resource?.url ? "#2B8C4D" : "#ACAEB1"} padding="8px 16px" cursor={resource?.url ? "pointer" : "default"} color="#FFF" @@ -193,7 +194,7 @@ export default function InformationRequestPage({ id }) { gap="8px" lineHeight="20px" _hover={{ - opacity: resource?.url ? "0.7" : "1" + backgroundColor: resource?.url ? "#80BA94" : "#ACAEB1" }} > Acessar pedido diff --git a/next/components/organisms/RawDataSourcesPage.js b/next/components/organisms/RawDataSourcesPage.js index 991eef47..015e4735 100644 --- a/next/components/organisms/RawDataSourcesPage.js +++ b/next/components/organisms/RawDataSourcesPage.js @@ -210,7 +210,8 @@ export default function RawDataSourcesPage({ id }) { @@ -233,7 +234,7 @@ export default function RawDataSourcesPage({ id }) { height="40px" width="fit-content" borderRadius="8px" - backgroundColor={resource?.url ? "#0D99FC" : "#ACAEB1"} + backgroundColor={resource?.url ? "#2B8C4D" : "#ACAEB1"} padding="8px 16px" cursor={resource?.url ? "pointer" : "default"} color="#FFF" @@ -244,7 +245,7 @@ export default function RawDataSourcesPage({ id }) { gap="8px" lineHeight="20px" _hover={{ - opacity: resource?.url ? "0.7" : "1" + backgroundColor: resource?.url ? "#80BA94" : "#ACAEB1" }} > Acessar fonte original @@ -373,7 +374,7 @@ export default function RawDataSourcesPage({ id }) { endColor="#F3F3F3" borderRadius="16px" height="100%" - width="800px" + width="100%" isLoaded={!isLoading} > {resource?.observationLevels && Object.keys(resource?.observationLevels).length > 0 ? diff --git a/next/pages/dataset/[dataset].js b/next/pages/dataset/[dataset].js index b2cfade7..bb0f9561 100644 --- a/next/pages/dataset/[dataset].js +++ b/next/pages/dataset/[dataset].js @@ -110,7 +110,12 @@ export default function DatasetPage ({ dataset }) { gap="24px" paddingY="24px" > - + Date: Mon, 1 Jul 2024 18:37:03 -0300 Subject: [PATCH 36/66] feat: ajust visuais --- .../molecules/DataInformationQuery.js | 9 ++++---- next/components/molecules/Menu.js | 22 +++++++++++++++++++ next/content/FAQ.js | 9 ++++---- 3 files changed, 32 insertions(+), 8 deletions(-) diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index cefa9669..8c47ce24 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -376,7 +376,7 @@ export default function DataInformationQuery({ resource }) { - {checkedColumns.length > 0 && + {checkedColumns.length > 0 && resource.uncompressedFileSize && resource.uncompressedFileSize/(1024 * 1024 * 1024) > 5 && + > + Essa tabela possui mais de 5 GB. Cuidado para não ultrapassar o limite de processamento gratuito do BigQuery. + Para otimizar a consulta, você pode selecionar menos colunas ou adicionar filtros no BigQuery. + } diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index a69aea4c..7d0d6a57 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -726,6 +726,27 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false } const [isScrollDown, setIsScrollDown] = useState(false) const [userData, setUserData] = useState(null) + const [lastScrollY, setLastScrollY] = useState(0) + const [menuVisible, setMenuVisible] = useState(true) + + const handleScroll = () => { + const currentScrollY = window.scrollY + if (currentScrollY > lastScrollY) { + setMenuVisible(false) + } else { + setMenuVisible(true) + } + setLastScrollY(currentScrollY) + } + + useEffect(() => { + if(route !== "/dataset/[dataset]") return + window.addEventListener('scroll', handleScroll) + return () => { + window.removeEventListener('scroll', handleScroll) + } + }, [lastScrollY]) + function maxWidthDataset() { if (route === "/dataset" || route === "/dataset/[dataset]") return "1440px" return "1264px" @@ -801,6 +822,7 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false } zIndex="99" transition="0.5s" as="nav" + transform={menuVisible ? 'translateY(0)' : 'translateY(-100%)'} > - + {`SELECT * FROM dataset.table_name LIMIT 100`} @@ -441,11 +442,11 @@ export const QuestionFAQ = [
  • A primeira dica valiosa é selecionar as colunas que você vai usar. O BigQuery funciona usando um modelo colunar, portanto, quanto menos colunas você usar, - melhor vai ser o desempenho da sua consulta. Isso significa evitar o clássico
    SELECT * FROM table_name e + melhor vai ser o desempenho da sua consulta. Isso significa evitar o clássico
    SELECT * FROM table_name e escolher as colunas de seu interesse. Parece chato, mas ajuda muito!
  • - Para tabelas grandes, uma boa prática é filtrar os anos e estados de seu interesse com a cláusula WHERE. + Para tabelas grandes, uma boa prática é filtrar os anos e estados de seu interesse com a cláusula WHERE. Como utilizamos o sistema de particionamento, isso vai reduzir drasticamente o custo e o tempo de processamento.
    • From df504c991831b451277a316991ad7dfae9db4d7e Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Wed, 3 Jul 2024 11:46:07 -0300 Subject: [PATCH 37/66] feat: wip FAQ updates --- .../molecules/DataInformationQuery.js | 4 +-- next/components/organisms/BdmTablePage.js | 29 ++++++++++--------- .../organisms/InformationRequestPage.js | 5 ---- next/content/FAQ.js | 13 +++++---- .../api/datasets/getInformationRequest.js | 5 ---- next/pages/dataset/[dataset].js | 2 +- next/pages/perguntas-frequentes.js | 4 +++ 7 files changed, 30 insertions(+), 32 deletions(-) diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index 8c47ce24..0354169a 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -23,7 +23,7 @@ import GreenTab from "../atoms/GreenTab"; import Toggle from "../atoms/Toggle"; import ColumnsTable from "./ColumnsTable"; import { AlertDiscalimerBox} from "./DisclaimerBox"; -import { triggerGAEvent } from "../../utils"; +import { triggerGAEvent, formatBytes } from "../../utils"; import { getBigTableQuery @@ -389,7 +389,7 @@ export default function DataInformationQuery({ resource }) { - Essa tabela possui mais de 5 GB. Cuidado para não ultrapassar o limite de processamento gratuito do BigQuery. + Essa tabela possui mais de {formatBytes(resource.uncompressedFileSize)}. Cuidado para não ultrapassar o limite de processamento gratuito do BigQuery. Para otimizar a consulta, você pode selecionar menos colunas ou adicionar filtros no BigQuery. diff --git a/next/components/organisms/BdmTablePage.js b/next/components/organisms/BdmTablePage.js index cb9a89da..eddcfd0f 100644 --- a/next/components/organisms/BdmTablePage.js +++ b/next/components/organisms/BdmTablePage.js @@ -188,18 +188,21 @@ export default function BdmTablePage({ id }) { return formattedDate } - const formatUpdate = (value) => { - if (value === "second") return "Atualização por segundo" - if (value === "minute") return "Atualização minutal" - if (value === "hour") return "Atualização por hora" - if (value === "day") return "Atualização diária" - if (value === "week") return "Atualização semanal" - if (value === "month") return "Atualização mensal" - if (value === "bimester") return "Atualização bimestral" - if (value === "quarter") return "Atualização trimestral" - if (value === "semester") return "Atualização semestral" - if (value === "year") return "Atualização anual" - return value + const getUpdateFormat = (value) => { + const formats = { + "second":"Atualização por segundo", + "minute":"Atualização por minuto", + "hour":"Atualização por hora", + "day":"Atualização diária", + "week":"Atualização semanal", + "month":"Atualização mensal", + "bimester":"Atualização bimestral", + "quarter":"Atualização trimestral", + "semester":"Atualização semestral", + "year":"Atualização anual", + } + + return formats[value] ? formats[value] : "Atualização não definida" } if(isError) return @@ -350,7 +353,7 @@ export default function BdmTablePage({ id }) { lineHeight="18px" color="#252A32" > - {formatUpdate(resource.updates[0].entity.slug)} + {getUpdateFormat(resource.updates[0].entity.slug)} }     diff --git a/next/components/organisms/InformationRequestPage.js b/next/components/organisms/InformationRequestPage.js index ed00b949..220d86d5 100644 --- a/next/components/organisms/InformationRequestPage.js +++ b/next/components/organisms/InformationRequestPage.js @@ -288,11 +288,6 @@ export default function InformationRequestPage({ id }) { title="Estado" text={resource?.status?.name} /> - - ) } diff --git a/next/content/FAQ.js b/next/content/FAQ.js index bbd30ed1..d9690813 100644 --- a/next/content/FAQ.js +++ b/next/content/FAQ.js @@ -1,5 +1,4 @@ import { CopyIcon } from "../public/img/icons/copyIcon"; -import 'highlight.js/styles/obsidian.css' export const QuestionFAQ = [ { @@ -434,19 +433,21 @@ export const QuestionFAQ = [ Para verificar uma amostra de todas as variáveis da tabela, use:

    - - {`SELECT * FROM dataset.table_name LIMIT 100`} - + 
    +            
+              SELECT * FROM  dataset.table_name LIMIT 100
+            
+
    • A primeira dica valiosa é selecionar as colunas que você vai usar. O BigQuery funciona usando um modelo colunar, portanto, quanto menos colunas você usar, - melhor vai ser o desempenho da sua consulta. Isso significa evitar o clássico
      SELECT * FROM table_name e + melhor vai ser o desempenho da sua consulta. Isso significa evitar o clássico
      SELECT * FROM table_name
      e escolher as colunas de seu interesse. Parece chato, mas ajuda muito!
    • - Para tabelas grandes, uma boa prática é filtrar os anos e estados de seu interesse com a cláusula WHERE. + Para tabelas grandes, uma boa prática é filtrar os anos e estados de seu interesse com a cláusula 
      WHERE
      . Como utilizamos o sistema de particionamento, isso vai reduzir drasticamente o custo e o tempo de processamento.
    diff --git a/next/pages/api/datasets/getInformationRequest.js b/next/pages/api/datasets/getInformationRequest.js index 796e81e2..db72b8cc 100644 --- a/next/pages/api/datasets/getInformationRequest.js +++ b/next/pages/api/datasets/getInformationRequest.js @@ -19,11 +19,6 @@ async function getInformationRequest(id) { url dataUrl observations - startedBy { - id - firstName - lastName - } updates { edges { node { diff --git a/next/pages/dataset/[dataset].js b/next/pages/dataset/[dataset].js index bb0f9561..44e5b4f8 100644 --- a/next/pages/dataset/[dataset].js +++ b/next/pages/dataset/[dataset].js @@ -118,7 +118,7 @@ export default function DatasetPage ({ dataset }) { > { Date: Wed, 3 Jul 2024 14:53:58 -0300 Subject: [PATCH 38/66] feat: includeTranslation in getBigTableQuery --- next/components/atoms/Toggle.js | 3 ++- next/components/molecules/DataInformationQuery.js | 11 ++++++++--- next/pages/api/tables/getBigTableQuery.js | 4 ++-- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/next/components/atoms/Toggle.js b/next/components/atoms/Toggle.js index 4807ebff..cd2e1815 100644 --- a/next/components/atoms/Toggle.js +++ b/next/components/atoms/Toggle.js @@ -1,12 +1,13 @@ import { Switch } from "@chakra-ui/react"; import styles from "../../styles/toggle.module.css"; -export default function Toggle({ value, onChange }) { +export default function Toggle({ value, onChange, ...props }) { return ( ) } \ No newline at end of file diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index 0354169a..f0eeee58 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -173,6 +173,7 @@ export default function DataInformationQuery({ resource }) { const [isLoadingCode, setIsLoadingCode] = useState(false) const [hasLoadingResponse, setHasLoadingResponse] = useState(false) const [insufficientChecks, setInsufficientChecks] = useState(false) + const [includeTranslation, setIncludeTranslation] = useState(true) let gcpDatasetID let gcpTableId @@ -199,7 +200,7 @@ export default function DataInformationQuery({ resource }) { setHasLoadingResponse(false) setSqlCode("") setInsufficientChecks(false) - }, [resource._id, checkedColumns, tabIndex]) + }, [resource._id, checkedColumns, tabIndex, includeTranslation]) useEffect(() => { if(hasLoadingResponse === true) { @@ -231,7 +232,7 @@ export default function DataInformationQuery({ resource }) { } async function SqlCodeString() { - const result = await getBigTableQuery(resource._id, checkedColumns) + const result = await getBigTableQuery(resource._id, checkedColumns, includeTranslation) setSqlCode(result.trim()) setIsLoadingCode(false) } @@ -347,7 +348,11 @@ export default function DataInformationQuery({ resource }) { lineHeight:"20px", color:"#252A32" }}> - Traduzir códigos institucionais + setIncludeTranslation(!includeTranslation)} + />Traduzir códigos institucionais `"${item}"`).join(", ")}]) + getTableOneBigTableQuery (tableId: "${id}", columns: [${columns.map(item => `"${item}"`).join(", ")}], includeTableTranslation: ${includeTranslation}) } `, variables: null From 0a02ff8a6850bc9c2b99cbe84cf91137e01a134e Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Thu, 4 Jul 2024 19:45:56 -0300 Subject: [PATCH 39/66] feat: wip Dataset page --- next/components/atoms/ImageOrganization.js | 32 --- next/components/molecules/Menu.js | 21 +- next/components/organisms/Database.js | 17 +- next/pages/dataset/index.js | 216 ++++++++++----------- next/public/img/icons/filterIcon.js | 6 +- 5 files changed, 130 insertions(+), 162 deletions(-) delete mode 100644 next/components/atoms/ImageOrganization.js diff --git a/next/components/atoms/ImageOrganization.js b/next/components/atoms/ImageOrganization.js deleted file mode 100644 index 39241321..00000000 --- a/next/components/atoms/ImageOrganization.js +++ /dev/null @@ -1,32 +0,0 @@ -import { - Image -} from "@chakra-ui/react"; -import ImageDefault from "../../public/img/imageDefault"; - -export const ImageOrganization = ({title, image, ...props}) => { - const settingsImage = { - alt: title || "", - borderRadius:"32px", - boxShadow:"0px 4px 8px rgba(100, 96, 103, 0.16)", - width:{ base: "25%", lg: "100%" }, - minWidth:"250px", - maxWidth:"250px", - minHeight:"250px", - maxHeight:"250px", - height:{ base: "25%", lg: "100%" }, - objectFit:"contain", - widthImage:"100%", - heightImage:"100%" - } - - if(!image) return - - return ( - - ) -} - diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index 7d0d6a57..e1e89a47 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -267,19 +267,24 @@ function MenuDrawerUser({ userData, isOpen, onClose}) { { cookies.remove('userBD', { path: '/' }) cookies.remove('token', { path: '/' }) window.open("/", "_self") }} > - + - {userTemplate && !isMobileMod() && } + {userTemplate && !isMobileMod() && + + } {userData ? ( @@ -883,7 +892,11 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false } /> } - {userTemplate && isMobileMod() && } + {userTemplate && isMobileMod() && + + } {useCheckMobile() && userData && 0 && `/dataset/${id}?table=${tables.id}`}> + 0 ? `/dataset/${id}?table=${tables.id}` : ""}> 0 ? "pointer" : "normal"} @@ -72,7 +71,7 @@ export default function Database({ if(rawDataSources.number === undefined) rawDataSourcesNumber = 0 return ( - 0 && `/dataset/${id}?raw_data_source=${rawDataSources.id}`}> + 0 ? `/dataset/${id}?raw_data_source=${rawDataSources.id}` : ""}> 0 ? "pointer" : "normal"} _hover={rawDataSourcesNumber > 0 && {opacity: "0.7"}} @@ -102,7 +101,7 @@ export default function Database({ if(informationRequests.number === undefined) informationRequestsNumber = 0 return ( - 0 && `/dataset/${id}?information_request=${informationRequests.id}`}> + 0 ? `/dataset/${id}?information_request=${informationRequests.id}` : ""}> 0 ? "pointer" : "normal"} _hover={informationRequestsNumber > 0 && {opacity: "0.7"}} @@ -144,15 +143,17 @@ export default function Database({ spacing={6} > - { return ( elm[0] === text).find(res => res === true) } - const validateActiveSetsWith = (text) => { + const validateActiveSetsWith = () => { return selectedFilters.map((elm) => elm[1] === "tables" ||elm[1] === "raw_data_sources" @@ -456,7 +396,7 @@ export default function SearchPage() { } return ( - + Dados – Base dos Dados - handleSearch(value)} - placeholder={isMobileMod() ? "Palavras-chave, instituições ou temas" :"Pesquise palavras-chave, instituições ou temas"} - justifyContent="center" - inputStyle={{ - width: "90%", - maxWidth: "1264px", - margin: "0 auto 64px", - padding: "20px", - borderRadius: "17px", - backgroundColor: "#FFF", - color: "#6F6F6F", - fontSize: "16px", - height: "50px", - boxShadow: "0 1px 3px 0.5 rgba(100 93 103 /0.16) !important", - _placeholder:{color:"#6F6F6F"} - }} - marginTop={isMobileMod() ? "60px" : "46px" } - /> - - + - Filtrar resultados + Filtrar + + + + + + Conjuntos com + + + + handleSelectFilter(["contains", e.target.value])} + isChecked={query?.contains === "tables" || query?.contains?.[0] ? query?.contains.map((elm) => elm === "tables" ) : false} + minWidth="18px" + minHeight="18px" + maxWidth="18px" + maxHeight="18px" + marginRight="14px" + flexShrink={0} + /> + + Tabelas tratadas + + + {`(${aggregations?.contains_tables?.filter(elm => elm.key === 1)[0]?.count || 0})`} + + + handleSelectFilter(["contains",`${value}`])} /> - handleSelectFilter(["theme",`${value}`])} - /> + /> */} - handleSelectFilter(["organization",`${value}`])} - /> + /> */} - handleSelectFilter(["tag",`${value}`])} - /> + /> */} - handleSelectFilter(["observation_level",`${value}`])} - /> + /> */} } diff --git a/next/public/img/icons/filterIcon.js b/next/public/img/icons/filterIcon.js index 053e332a..baffee53 100644 --- a/next/public/img/icons/filterIcon.js +++ b/next/public/img/icons/filterIcon.js @@ -2,13 +2,13 @@ import { createIcon } from '@chakra-ui/icons'; const FilterIcon = createIcon({ displayName: "filter", - viewBox: "0 0 25 25", + viewBox: "0 0 24 24", path: ( ) }) -export default FilterIcon \ No newline at end of file +export default FilterIcon From 6c790809aee58892cc06604defa48623d2133b4b Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Fri, 5 Jul 2024 10:44:23 -0300 Subject: [PATCH 40/66] feat: latest updates required --- next/components/molecules/ColumnsTable.js | 2 + .../molecules/DataInformationQuery.js | 31 +++++++------- next/components/organisms/BdmTablePage.js | 35 +++++++++++----- next/components/organisms/DatasetResource.js | 11 ++++- .../organisms/InformationRequestPage.js | 40 ++----------------- .../organisms/RawDataSourcesPage.js | 40 ++----------------- next/components/templates/main.js | 8 +++- .../api/datasets/getInformationRequest.js | 31 -------------- next/pages/api/datasets/getRawDataSources.js | 24 ----------- next/pages/api/tables/getBdmTable.js | 4 ++ next/pages/transparencia.js | 16 +++++--- 11 files changed, 82 insertions(+), 160 deletions(-) diff --git a/next/components/molecules/ColumnsTable.js b/next/components/molecules/ColumnsTable.js index fe91779c..da38e531 100644 --- a/next/components/molecules/ColumnsTable.js +++ b/next/components/molecules/ColumnsTable.js @@ -90,6 +90,7 @@ export default function ColumnsTable({ onChangeCheckedColumns, hasLoading, setHasLoading, + numberColumns, template }) { const [resource, setResource] = useState({}) @@ -129,6 +130,7 @@ export default function ColumnsTable({ if(result) { setResource(result.sort(sortElements)) + numberColumns(result.length) setColumns(result.sort(sortElements)) setHasLoading(false) setIsSearchLoading(false) diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index f0eeee58..2a39b725 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -168,6 +168,7 @@ export default function DataInformationQuery({ resource }) { const [tabIndex, setTabIndex] = useState(0) const [downloadNotAllowed, setDownloadNotAllowed] = useState(false) const [checkedColumns, setCheckedColumns] = useState([]) + const [numberColumns, setNumberColumns] = useState(0) const [sqlCode, setSqlCode] = useState("") const [hasLoadingColumns, setHasLoadingColumns] = useState(true) const [isLoadingCode, setIsLoadingCode] = useState(false) @@ -175,24 +176,25 @@ export default function DataInformationQuery({ resource }) { const [insufficientChecks, setInsufficientChecks] = useState(false) const [includeTranslation, setIncludeTranslation] = useState(true) - let gcpDatasetID - let gcpTableId - let downloadUrl + const [gcpDatasetID, setGcpDatasetID] = useState("") + const [gcpTableId, setGcpTableId] = useState("") + const [downloadUrl, setDownloadUrl] = useState("") useEffect(() => { - if (resource?.numberRows === 0) return setDownloadNotAllowed(false) - if (resource?.numberRows) return resource?.numberRows > 200000 ? setDownloadNotAllowed(false) : setDownloadNotAllowed(true) - - if (resource?.cloudTables?.[0]?.gcpDatasetId) gcpDatasetID = resource.cloudTables[0].gcpDatasetId - if (resource?.cloudTables?.[0]?.gcpTableId) gcpTableId = resource.cloudTables[0].gcpTableId + if (resource?.numberRows === 0) setDownloadNotAllowed(false) + if (resource?.numberRows) resource?.numberRows > 200000 ? setDownloadNotAllowed(false) : setDownloadNotAllowed(true) + + if (resource?.cloudTables?.[0]) { + setGcpDatasetID(resource.cloudTables[0]?.gcpDatasetId || "") + setGcpTableId(resource.cloudTables[0]?.gcpTableId || "") + } if (gcpDatasetID) { if (gcpTableId) { - downloadUrl = `https://storage.googleapis.com/basedosdados-public/one-click-download/${gcpDatasetID}/${gcpTableId}/${gcpTableId}.csv.gz` + setDownloadUrl(`https://storage.googleapis.com/basedosdados-public/one-click-download/${gcpDatasetID}/${gcpTableId}/${gcpTableId}.csv.gz`) } } - }, [resource]) - + }, [resource.numberRows, resource.cloudTables]) useEffect(() => { if(resource._id === undefined) return @@ -316,6 +318,7 @@ export default function DataInformationQuery({ resource }) { tableId={resource._id} checkedColumns={checkedColumns} onChangeCheckedColumns={setCheckedColumns} + numberColumns={setNumberColumns} hasLoading={hasLoadingColumns} setHasLoading={setHasLoadingColumns} template={tabIndex === 3 ? "download" : "checks"} @@ -394,8 +397,8 @@ export default function DataInformationQuery({ resource }) { - Essa tabela possui mais de {formatBytes(resource.uncompressedFileSize)}. Cuidado para não ultrapassar o limite de processamento gratuito do BigQuery. - Para otimizar a consulta, você pode selecionar menos colunas ou adicionar filtros no BigQuery. + Essa tabela completa, com todas as colunas, tem {formatBytes(resource.uncompressedFileSize)}. Cuidado para não ultrapassar o limite de processamento gratuito do BigQuery. + {numberColumns === checkedColumns.length && "Para otimizar a consulta, você pode selecionar menos colunas ou adicionar filtros no BigQuery."} } @@ -527,7 +530,7 @@ export default function DataInformationQuery({ resource }) { > - + - Cobertura temporal + Cobertura temporal da tabela @@ -294,7 +294,7 @@ export default function BdmTablePage({ id }) { lineHeight="20px" color="#252A32" > - Acesso oas dados + Acesso aos dados @@ -303,7 +303,7 @@ export default function BdmTablePage({ id }) { /> - + setIsLoading(!isLoading)}> } - {resource?.rawDataSource?.[0]?.updates?.[0]?.latest ? @@ -370,7 +373,21 @@ export default function BdmTablePage({ id }) { : "Não informado" } : Última vez que atualizaram na fonte original - + {resource?.rawDataSource?.[0]?.updates?.[0]?.entity?.slug && + + {getUpdateFormat(resource?.rawDataSource?.[0]?.updates?.[0]?.entity?.slug)} + + } + { - const dataset_tables = dataset?.tables?.edges.map((elm) => elm.node).filter((elm) => elm?.status?.slug !== "under_review").sort(sortElements) || [] + const dataset_tables = dataset?.tables?.edges.map((elm) => elm.node) + .filter((elm) => elm?.status?.slug !== "under_review") + .filter((elm) => elm?.slug !== "dicionario") + .filter((elm) => elm?.slug !== "dictionary").sort(sortElements) || [] + const raw_data_sources = dataset?.rawDataSources?.edges.map((elm) => elm.node).filter((elm) => elm?.status?.slug !== "under_review").sort(sortElements) || [] const information_request = dataset?.informationRequests?.edges.map((elm) => elm.node).filter((elm) => elm?.status?.slug !== "under_review").sort(sortElements) || [] @@ -57,7 +61,7 @@ export default function DatasetResource({ if(raw_data_sources.length > 0) return pushQuery("raw_data_source", raw_data_sources[0]?._id) if(information_request.length > 0) return pushQuery("information_request", information_request[0]?._id) } - },[]) + }, [dataset]) function SwitchResource ({route}) { if (route.hasOwnProperty("table")) return @@ -141,6 +145,7 @@ export default function DatasetResource({ gap="24px" spacing={0} width="100%" + height="100%" > { pushQuery("raw_data_source", id) }} + hasDivider={tables.length > 0 ? true : false} /> { pushQuery("information_request", id) }} + hasDivider={tables.length > 0 || rawDataSources.length > 0 ? true : false} /> diff --git a/next/components/organisms/InformationRequestPage.js b/next/components/organisms/InformationRequestPage.js index 220d86d5..f679de49 100644 --- a/next/components/organisms/InformationRequestPage.js +++ b/next/components/organisms/InformationRequestPage.js @@ -127,7 +127,7 @@ export default function InformationRequestPage({ id }) { @@ -205,7 +205,7 @@ export default function InformationRequestPage({ id }) { - + - - - - Cobertura temporal - - - - - - Não informado - - {/* */} - - - diff --git a/next/components/organisms/RawDataSourcesPage.js b/next/components/organisms/RawDataSourcesPage.js index 015e4735..792c3ffe 100644 --- a/next/components/organisms/RawDataSourcesPage.js +++ b/next/components/organisms/RawDataSourcesPage.js @@ -211,7 +211,7 @@ export default function RawDataSourcesPage({ id }) { @@ -256,7 +256,7 @@ export default function RawDataSourcesPage({ id }) { - + - - - - Cobertura temporal - - - - - - Não informado - - {/* */} - - - diff --git a/next/components/templates/main.js b/next/components/templates/main.js index 1f2d4a93..b0ce3a54 100644 --- a/next/components/templates/main.js +++ b/next/components/templates/main.js @@ -13,12 +13,18 @@ export function MainPageTemplate({ }) { return ( - + {children} diff --git a/next/pages/api/datasets/getInformationRequest.js b/next/pages/api/datasets/getInformationRequest.js index db72b8cc..819cebb9 100644 --- a/next/pages/api/datasets/getInformationRequest.js +++ b/next/pages/api/datasets/getInformationRequest.js @@ -41,37 +41,6 @@ async function getInformationRequest(id) { _id name } - coverages { - edges { - node { - _id - datetimeRanges { - edges { - node { - _id - startYear - startSemester - startQuarter - startMonth - startDay - startHour - startMinute - startSecond - endYear - endSemester - endQuarter - endMonth - endDay - endHour - endMinute - endSecond - interval - } - } - } - } - } - } } } } diff --git a/next/pages/api/datasets/getRawDataSources.js b/next/pages/api/datasets/getRawDataSources.js index 40f7bfc0..ae69b459 100644 --- a/next/pages/api/datasets/getRawDataSources.js +++ b/next/pages/api/datasets/getRawDataSources.js @@ -92,30 +92,6 @@ async function getRawDataSources(id) { _id name } - datetimeRanges { - edges { - node { - _id - startYear - startSemester - startQuarter - startMonth - startDay - startHour - startMinute - startSecond - endYear - endSemester - endQuarter - endMonth - endDay - endHour - endMinute - endSecond - interval - } - } - } } } } diff --git a/next/pages/api/tables/getBdmTable.js b/next/pages/api/tables/getBdmTable.js index 31689d22..edfab3ff 100644 --- a/next/pages/api/tables/getBdmTable.js +++ b/next/pages/api/tables/getBdmTable.js @@ -55,6 +55,10 @@ async function getBdmTable(id) { node { _id latest + entity { + _id + slug + } } } } diff --git a/next/pages/transparencia.js b/next/pages/transparencia.js index ac98782f..76a62101 100644 --- a/next/pages/transparencia.js +++ b/next/pages/transparencia.js @@ -86,7 +86,7 @@ export default function Transparencia({ pages }) { } return ( - + Transparência – Base dos Dados Date: Fri, 5 Jul 2024 15:18:23 -0300 Subject: [PATCH 41/66] feat: included download link and name for dataset and table in Download section --- next/components/molecules/ColumnsTable.js | 61 +++++++++++++------ .../molecules/DataInformationQuery.js | 20 ++++-- next/components/organisms/BdmTablePage.js | 11 +++- next/pages/api/datasets/index.js | 2 - next/pages/api/tables/getBdmTable.js | 8 +++ .../getColumnsBdmTable.js | 13 +++- next/pages/api/tables/index.js | 4 +- 7 files changed, 85 insertions(+), 34 deletions(-) rename next/pages/api/{datasets => tables}/getColumnsBdmTable.js (78%) diff --git a/next/components/molecules/ColumnsTable.js b/next/components/molecules/ColumnsTable.js index da38e531..7b21f75c 100644 --- a/next/components/molecules/ColumnsTable.js +++ b/next/components/molecules/ColumnsTable.js @@ -20,11 +20,11 @@ import Checkbox from '../atoms/Checkbox'; import { getColumnsBdmTable -} from "../../pages/api/datasets/index"; +} from "../../pages/api/tables/index"; import InternalError from '../../public/img/internalError' import InfoIcon from '../../public/img/icons/infoIcon'; -import RedirectIcon from '../../public/img/icons/redirectIcon'; +import DownloadIcon from '../../public/img/icons/downloadIcon'; import SearchIcon from '../../public/img/icons/searchIcon'; import 'katex/dist/katex.min.css'; @@ -217,25 +217,43 @@ export default function ColumnsTable({ ) } - const directoryColumnValue = (value) => { - const dataset = value?.table?.dataset - const table = value?.table - const newDirectoryColumn = `${dataset?.slug}.${table?.slug}:${value?.name}` - - if (newDirectoryColumn === "undefined.undefined:undefined") return empty() + function TranslationTable({ value }) { + if(value === null) return ( + + Não precisa de tradução + + ) + + const cloudValues = value?.table?.cloudTables?.edges?.[0]?.node + + const gcpDatasetID = cloudValues?.gcpDatasetId || "" + const gcpTableId = cloudValues?.gcpTableId || "" + const downloadUrl = `https://storage.googleapis.com/basedosdados-public/one-click-download/${gcpDatasetID}/${gcpTableId}/${gcpTableId}.csv.gz` + const datasetName = value?.table?.dataset?.name || "" + const tableName = value?.table?.name || "" + return ( - + + + Fazer download da tabela que faz a tradução desta coluna + + + {datasetName} - {tableName} + ) } @@ -481,7 +499,10 @@ export default function ColumnsTable({ - { + {template === "download" ? + + : + elm?.node?.coveredByDictionary === true ? "Sim" : elm?.node?.directoryPrimaryKey?._id ? "Sim" : elm?.node?.coveredByDictionary === false ? "Não" diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index 2a39b725..4eab55dd 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -17,6 +17,7 @@ import hljs from "highlight.js/lib/core"; import sqlHighlight from "highlight.js/lib/languages/sql"; import pythonHighlight from "highlight.js/lib/languages/python"; import rHighlight from "highlight.js/lib/languages/r"; +import cookies from "js-cookie"; import 'highlight.js/styles/obsidian.css' import GreenTab from "../atoms/GreenTab"; @@ -180,6 +181,14 @@ export default function DataInformationQuery({ resource }) { const [gcpTableId, setGcpTableId] = useState("") const [downloadUrl, setDownloadUrl] = useState("") + const isUserPro = () => { + let user + if(cookies.get("userBD")) user = JSON.parse(cookies.get("userBD")) + + if(user?.proSubscriptionStatus === "active") return true + return false + } + useEffect(() => { if (resource?.numberRows === 0) setDownloadNotAllowed(false) if (resource?.numberRows) resource?.numberRows > 200000 ? setDownloadNotAllowed(false) : setDownloadNotAllowed(true) @@ -744,10 +753,10 @@ read_sql(query, billing_project_id = get_billing_id()) padding={0} > {downloadNotAllowed ? + isUserPro() ? "" : - Estes dados estão disponíveis porque diversas pessoas colaboram para a sua manutenção. - - Antes de baixar os dados, apoie você também com uma doação financeira ou + Estes dados estão disponíveis porque diversas pessoas colaboram para a sua manutenção. + Antes de baixar os dados, apoie você também com uma doação financeira ou saiba como contribuir com seu tempo. - : } @@ -793,7 +801,7 @@ read_sql(query, billing_project_id = get_billing_id()) width="24px" height="24px" /> - Download da tabela + Download da tabela {downloadNotAllowed && `(${formatBytes(resource.uncompressedFileSize)})`} diff --git a/next/components/organisms/BdmTablePage.js b/next/components/organisms/BdmTablePage.js index 18a284c1..4ea04f7c 100644 --- a/next/components/organisms/BdmTablePage.js +++ b/next/components/organisms/BdmTablePage.js @@ -389,15 +389,20 @@ export default function BdmTablePage({ id }) { } - Não informado : Última vez que verificamos a fonte original + {resource?.rawDataSource?.[0]?.polls?.[0]?.latest ? + formatDate(resource.rawDataSource[0].polls[0].latest) + : + "Não informado" + } : Última vez que verificamos a fonte original diff --git a/next/pages/api/datasets/index.js b/next/pages/api/datasets/index.js index 268ffaf6..49bc3d6a 100644 --- a/next/pages/api/datasets/index.js +++ b/next/pages/api/datasets/index.js @@ -1,5 +1,4 @@ import getSearchDatasets from "./getSearchDatasets"; -import getColumnsBdmTable from "./getColumnsBdmTable"; import getListDatasets from "./getListDatasets"; import getShowDataset from "./getShowDataset"; import postDataset from "./postDataset"; @@ -8,7 +7,6 @@ import deleteDataset from "./deleteDataset"; export { getSearchDatasets, - getColumnsBdmTable, getListDatasets, getShowDataset, postDataset, diff --git a/next/pages/api/tables/getBdmTable.js b/next/pages/api/tables/getBdmTable.js index edfab3ff..db4ce5a0 100644 --- a/next/pages/api/tables/getBdmTable.js +++ b/next/pages/api/tables/getBdmTable.js @@ -50,6 +50,14 @@ async function getBdmTable(id) { dataset { _id } + polls { + edges { + node { + _id + latest + } + } + } updates { edges { node { diff --git a/next/pages/api/datasets/getColumnsBdmTable.js b/next/pages/api/tables/getColumnsBdmTable.js similarity index 78% rename from next/pages/api/datasets/getColumnsBdmTable.js rename to next/pages/api/tables/getColumnsBdmTable.js index 1470e90c..89ffee3a 100644 --- a/next/pages/api/datasets/getColumnsBdmTable.js +++ b/next/pages/api/tables/getColumnsBdmTable.js @@ -26,10 +26,19 @@ export default async function getColumnsBdmTable(id) { name table { _id - slug + name + cloudTables{ + edges{ + node{ + gcpTableId + gcpDatasetId + gcpProjectId + } + } + } dataset { _id - slug + name } } } diff --git a/next/pages/api/tables/index.js b/next/pages/api/tables/index.js index a87a9ed5..4c4925d3 100644 --- a/next/pages/api/tables/index.js +++ b/next/pages/api/tables/index.js @@ -3,11 +3,13 @@ import getAllTableInDataset from "./getAllTableInDataset"; import getTableEdit from "./getTableEdit"; import postTable from "./postTable"; import getBigTableQuery from "./getBigTableQuery"; +import getColumnsBdmTable from "../tables/getColumnsBdmTable"; export { deleteTable, getAllTableInDataset, getTableEdit, postTable, - getBigTableQuery + getBigTableQuery, + getColumnsBdmTable } From eacfb4103bbfae4b7f344e2f74041d1c356dc51c Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Tue, 9 Jul 2024 12:19:48 -0300 Subject: [PATCH 42/66] feat: ajust Dataset Card and filter Accordion --- next/components/atoms/FilterAccordion.js | 104 ++--- next/components/organisms/Database.js | 393 +++++++++---------- next/pages/dataset/index.js | 461 ++++++++++++----------- 3 files changed, 506 insertions(+), 452 deletions(-) diff --git a/next/components/atoms/FilterAccordion.js b/next/components/atoms/FilterAccordion.js index 38f1f7a7..dabe360c 100644 --- a/next/components/atoms/FilterAccordion.js +++ b/next/components/atoms/FilterAccordion.js @@ -11,12 +11,9 @@ import { } from "@chakra-ui/react"; import { useEffect, useState } from "react"; import Checkbox from "../atoms/Checkbox"; -import ControlledInput from "./ControlledInput"; +import { ControlledInput, ControlledInputSimple} from "./ControlledInput"; import SectionText from "./SectionText"; import SearchIcon from "../../public/img/icons/searchIcon" -import BDLogoPlusImage from "../../public/img/logos/bd_logo_plus"; -import BDLogoProImage from "../../public/img/logos/bd_logo_pro"; - export function BaseFilterAccordion({ fieldName, @@ -25,8 +22,6 @@ export function BaseFilterAccordion({ isOpen = null, isActive = false, onChange = () => { }, - bdPlus = null, - bdPro = false, alwaysOpen = false, isHovering = true }) { @@ -51,27 +46,13 @@ export function BaseFilterAccordion({ > {fieldName} - {bdPlus && - - } - {bdPro && - - } {!alwaysOpen ? : <>} @@ -80,7 +61,7 @@ export function BaseFilterAccordion({ @@ -111,8 +92,10 @@ export function CheckboxFilterAccordion({ }) { const [options , setOptions] = useState([]) const [search, setSearch] = useState(""); + const [inputFocus, setInputFocus] = useState(false) useEffect(() => { + if (choices.length === 0) return setOptions(choices) }, [choices]) @@ -137,19 +120,22 @@ export function CheckboxFilterAccordion({ {canSearch && - + inputFocus={inputFocus} + changeInputFocus={setInputFocus} + placeholder="Pesquisar" + fill="#464A51" + fillHover="#878A8E" + icon={ + } /> @@ -162,26 +148,46 @@ export function CheckboxFilterAccordion({ padding="8px 0" > {options.length > 0 && options.map((c) => ( - + + {c[displayField]} + + + {c["count"] ? `(${c["count"]})` : `(0)`} + + ))} diff --git a/next/components/organisms/Database.js b/next/components/organisms/Database.js index 4f24b360..4853892e 100644 --- a/next/components/organisms/Database.js +++ b/next/components/organisms/Database.js @@ -1,20 +1,12 @@ import { - Heading, HStack, Image, Stack, VStack, - Flex, Text, - Center, - Tooltip, } from "@chakra-ui/react"; import { useCheckMobile } from "../../hooks/useCheckMobile.hook"; -import { CategoryIcon } from "../atoms/CategoryIcon"; -import Title from "../atoms/Title"; import Link from "../atoms/Link"; -import SectionText from "../atoms/SectionText"; -import { TemporalCoverageString } from "../molecules/TemporalCoverageDisplay"; import LinkIcon from "../../public/img/icons/linkIcon"; import InfoArrowIcon from "../../public/img/icons/infoArrowIcon"; @@ -29,7 +21,6 @@ export default function Database({ rawDataSources, informationRequests, contains, - themes = [], }) { const Tables = () => { @@ -37,32 +28,38 @@ export default function Database({ if(tables.number === undefined) tablesNumber = 0 return ( - 0 ? `/dataset/${id}?table=${tables.id}` : ""}> - 0 ? "pointer" : "normal"} - _hover={tablesNumber > 0 && {opacity: "0.7"}} + 0 ? "pointer" : "normal"} + color={tablesNumber === 0 ? "#ACAEB1" : "#0068C5"} + fill={tablesNumber === 0 ? "#ACAEB1" : "#0068C5"} + pointerEvents={tablesNumber === 0 && "none"} + fontFamily="Roboto" + fontWeight="400" + fontSize="14px" + lineHeight="20px" + _hover={{ + color: "#4F9ADC", + fill: "#4F9ADC" + }} + href={tablesNumber > 0 ? `/dataset/${id}?table=${tables.id}` : ""} + > + + - - - {tablesNumber}{" "} - {tablesNumber === 1 ? "tabela tratada" : "tabelas tratadas"} - - - + {tablesNumber}{" "} + {tablesNumber === 1 ? "tabela tratada" : "tabelas tratadas"} + + ) } @@ -71,28 +68,38 @@ export default function Database({ if(rawDataSources.number === undefined) rawDataSourcesNumber = 0 return ( - 0 ? `/dataset/${id}?raw_data_source=${rawDataSources.id}` : ""}> - 0 ? "pointer" : "normal"} - _hover={rawDataSourcesNumber > 0 && {opacity: "0.7"}} + 0 ? "pointer" : "normal"} + color={rawDataSourcesNumber === 0 ? "#ACAEB1" : "#0068C5"} + fill={rawDataSourcesNumber === 0 ? "#ACAEB1" : "#0068C5"} + pointerEvents={rawDataSourcesNumber === 0 && "none"} + fontFamily="Roboto" + fontWeight="400" + fontSize="14px" + lineHeight="20px" + _hover={{ + color: "#4F9ADC", + fill: "#4F9ADC" + }} + href={rawDataSourcesNumber > 0 ? `/dataset/${id}?raw_data_source=${rawDataSources.id}` : ""} + > + + - - - {rawDataSourcesNumber}{" "} - {rawDataSourcesNumber === 1 ? "fonte original" : "fontes originais"} - - - + {rawDataSourcesNumber}{" "} + {rawDataSourcesNumber === 1 ? "fonte original" : "fontes originais"} + + ) } @@ -101,29 +108,38 @@ export default function Database({ if(informationRequests.number === undefined) informationRequestsNumber = 0 return ( - 0 ? `/dataset/${id}?information_request=${informationRequests.id}` : ""}> - 0 ? "pointer" : "normal"} - _hover={informationRequestsNumber > 0 && {opacity: "0.7"}} + 0 ? "pointer" : "normal"} + color={informationRequestsNumber === 0 ? "#ACAEB1" : "#0068C5"} + fill={informationRequestsNumber === 0 ? "#ACAEB1" : "#0068C5"} + pointerEvents={informationRequestsNumber === 0 && "none"} + fontFamily="Roboto" + fontWeight="400" + fontSize="14px" + lineHeight="20px" + _hover={{ + color: "#4F9ADC", + fill: "#4F9ADC" + }} + href={informationRequestsNumber > 0 ? `/dataset/${id}?information_request=${informationRequests.id}` : ""} + > + + - - - {informationRequestsNumber}{" "} - {informationRequestsNumber === 1 ? "pedido LAI" : "pedidos LAI"} - - - + {informationRequestsNumber}{" "} + {informationRequestsNumber === 1 ? "pedido LAI" : "pedidos LAI"} + + ) } @@ -142,20 +158,21 @@ export default function Database({ height="100%" spacing={6} > - + {organization.name + - - - - - {name} - - - - {themes.slice(0,6).map((elm, i) => ( - -
    - - - -
    -     - ))} -     -     -     - + {name} + + + + - - Organização: - - - {organization?.name} - - - + + Organização: + + + {organization?.name} + + - + Cobertura temporal: + + - Cobertura temporal: - - + {temporalCoverageText ? temporalCoverageText : "Não informado"} + + - + Recursos: + + - Recursos: - - {contains.free && "Grátis"} {contains.free && contains.pro && "e"} {contains.pro && "Pro"} - {!contains.free && !contains.pro && "Não listado"} - - + {contains.free && "Grátis"} {contains.free && contains.pro && "e"} {contains.pro && "Pagos"} + {!contains.free && !contains.pro && "Não listado"} + - - - - - - - + + + + + +     diff --git a/next/pages/dataset/index.js b/next/pages/dataset/index.js index 346facde..c8d26bf7 100644 --- a/next/pages/dataset/index.js +++ b/next/pages/dataset/index.js @@ -6,7 +6,6 @@ import { Divider, Stack, Skeleton, - SkeletonText, Flex, Box, Spinner, @@ -26,9 +25,6 @@ import { import { CheckboxFilterAccordion } from "../../components/atoms/FilterAccordion"; import Checkbox from "../../components/atoms/Checkbox"; import Tag from "../../components/atoms/Tag"; -import BodyText from "../../components/atoms/BodyText"; -import Display from "../../components/atoms/Display"; -import RoundedButton from "../../components/atoms/RoundedButton"; import Database from "../../components/organisms/Database"; import { MainPageTemplate } from "../../components/templates/main"; @@ -91,6 +87,17 @@ export default function SearchDatasetPage() { const [pageInfo, setPageInfo] = useState({page: 0, count: 0}) const [isLoading, setIsLoading] = useState(true) + async function getDatasets({q, filters, page}) { + const res = await getSearchDatasets({q:q, filter: filters, page:page}) + if(res === undefined) return router.push({pathname:"500"}) + if(res?.count === 0) setShowEmptyState(true) + setPageInfo({page: page, count: res?.count}) + setResource(res?.results || null) + setAggregations(res?.aggregations) + setCount(res?.count) + setIsLoading(false) + } + useEffect(() => { if(fetchApi) clearTimeout(fetchApi) setIsLoading(true) @@ -109,17 +116,6 @@ export default function SearchDatasetPage() { setFetchApi(fetchFunc) }, [query]) - async function getDatasets({q, filters, page}) { - const res = await getSearchDatasets({q:q, filter: filters, page:page}) - if(res === undefined) return router.push({pathname:"500"}) - if(res?.count === 0) setShowEmptyState(true) - setPageInfo({page: page, count: res?.count}) - setResource(res?.results || null) - setAggregations(res?.aggregations) - setCount(res?.count) - setIsLoading(false) - } - function flattenArray(arr) { let result = [] @@ -210,68 +206,111 @@ export default function SearchDatasetPage() { width="100%" spacing={0} marginTop={!display && "24px !important"} + borderRadius="16px" + border={!display && "1px solid #DEDFE0"} + padding="40px 16px" > {image && } + {display && - {display} + marginBottom="16px !important" + fontFamily="Roboto" + fontWeight="500" + fontSize="28px" + lineHeight="42px" + color="#252A32" + >{display} } + {text} - {bodyText} - + + - window.open("https://discord.gg/Ec7tfBaTVV", "_blank")} - >Fazer uma proposta - + Fazer uma proposta + + + window.open("https://github.com/orgs/basedosdados/projects/17", "_blank")} - >Ver roadmap de dados + display="flex" + alignItems="center" + height="40px" + width="fit-content" + borderRadius="8px" + backgroundColor="#FFF" + border="1px solid #2B8C4D" + padding="8px 16px" + cursor="pointer" + color="#2B8C4D" + fontFamily="Roboto" + fontWeight="500" + fontSize="14px" + gap="8px" + lineHeight="20px" + _hover={{ + opacity: 0.7 + }} + > + Ver roadmap de dados + ) @@ -309,20 +348,72 @@ export default function SearchDatasetPage() { return selectedFilters.map((elm) => elm[0] === text).find(res => res === true) } - const validateActiveSetsWith = () => { - return selectedFilters.map((elm) => - elm[1] === "tables" - ||elm[1] === "raw_data_sources" - ||elm[1] === "information_requests").find( - res => res === true - ) - } + function CheckboxFilterComponent({value, text, count}) { + const validateContainsQuery = (value) => { + if (query?.contains === value) { + return true + } + + if (Array.isArray(query?.contains)) { + return query.contains.some((elm) => elm === value) + } + + return false + } - const validateActiveResource = (text) => { - return selectedFilters.map((elm) => - elm[1] === "open_data" - ||elm[1] === "closed_data").find( - res => res === true + return ( + + + handleSelectFilter(["contains", e.target.value])} + isChecked={validateContainsQuery(value)} + minWidth="18px" + minHeight="18px" + maxWidth="18px" + maxHeight="18px" + marginRight="14px" + borderColor={count === 0 ? "#ACAEB1" : "#878A8E"} + backgroundColor={count === 0 ? "#EEEEEE" : "#FFF"} + flexShrink={0} + /> + + {text} + + + {`(${count})`} + + + ) } @@ -339,7 +430,7 @@ export default function SearchDatasetPage() { backgroundColor="#FFF" > - - - - - - - - - + + + + + ) @@ -374,22 +461,26 @@ export default function SearchDatasetPage() { backgroundColor="#FFF" > - - - - - - - + - + + + + + + + + + + + ) @@ -407,10 +498,8 @@ export default function SearchDatasetPage() { - + setIsLoading(!isLoading)}> Conjuntos com - elm.key === 1)[0]?.count || 0} + /> + + elm.key === 1)[0]?.count || 0} + /> + + elm.key === 1)[0]?.count || 0} + /> + + + + + + - - handleSelectFilter(["contains", e.target.value])} - isChecked={query?.contains === "tables" || query?.contains?.[0] ? query?.contains.map((elm) => elm === "tables" ) : false} - minWidth="18px" - minHeight="18px" - maxWidth="18px" - maxHeight="18px" - marginRight="14px" - flexShrink={0} - /> - - Tabelas tratadas - - - {`(${aggregations?.contains_tables?.filter(elm => elm.key === 1)[0]?.count || 0})`} - - - + Recursos + + + elm.key === 1)[0]?.count || 0} + /> + + elm.key === 1)[0]?.count || 0} + /> - elm.key === 1)[0]?.count || 0 - }, - { - key: "raw_data_sources", - name: `Fontes originais`, - count: aggregations?.contains_raw_data_sources?.filter(elm => elm.key === 1)[0]?.count || 0 - }, - { - key: "information_requests", - name: `Pedidos LAI`, - count: aggregations?.contains_information_requests?.filter(elm => elm.key === 1)[0]?.count || 0 - }, - ]} - isActive={validateActiveSetsWith("contains")} - valueField="key" - displayField="name" - fieldName="Conjuntos com" - valuesChecked={valuesCheckedFilter("contains")} - onChange={(value) => handleSelectFilter(["contains",`${value}`])} - /> + elm.key === 1)[0]?.count || 0 - }, - { - key: "closed_data", - name: "Pagos", - count: aggregations?.contains_closed_data?.filter(elm => elm.key === 1)[0]?.count || 0 - } - ]} - isActive={validateActiveResource("contains")} - valueField="key" - displayField="name" - fieldName="Recursos" - valuesChecked={valuesCheckedFilter("contains")} - onChange={(value) => handleSelectFilter(["contains",`${value}`])} - /> - - {/* handleSelectFilter(["theme",`${value}`])} - /> */} + /> + + - {/* handleSelectFilter(["organization",`${value}`])} - /> */} + /> - {/* + + handleSelectFilter(["tag",`${value}`])} - /> */} + /> + + - {/* handleSelectFilter(["observation_level",`${value}`])} - /> */} + /> @@ -650,24 +694,31 @@ export default function SearchDatasetPage() { > {isLoading ? new Array(10).fill(0).map((e, i) => ( - - {useCheckMobile() ? - - : - - } - - + useCheckMobile() ? + + : + )) : (resource || []).map((res, i) => ( - - - - + )) } + {pageInfo?.count >=1 && pageInfo?.count <=10 && + + } + + {pageInfo.page >= 2 && + + } + {!showEmptyState && } - - {pageInfo?.count >=1 && pageInfo?.count <=10 && - - } - - {pageInfo.page >= 2 && - - } From c4448812feb094c0b4df339ba56bc72f95cb67f4 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Tue, 9 Jul 2024 13:21:58 -0300 Subject: [PATCH 43/66] feat: pagination style change --- next/pages/dataset/index.js | 8 +++--- next/styles/globals.css | 55 +++++++++++++++++++++++++++++++++---- 2 files changed, 53 insertions(+), 10 deletions(-) diff --git a/next/pages/dataset/index.js b/next/pages/dataset/index.js index c8d26bf7..911fd83e 100644 --- a/next/pages/dataset/index.js +++ b/next/pages/dataset/index.js @@ -721,8 +721,8 @@ export default function SearchDatasetPage() { {!showEmptyState && " : "Próxima"} + previousLabel={"Anterior"} + nextLabel={"Próxima"} breakLabel={"..."} breakClassName={"break-me"} forcePage={pageInfo.page - 1 || 0} @@ -738,8 +738,8 @@ export default function SearchDatasetPage() { containerClassName={"pagination"} activeClassName={"active"} pageClassName={isLoading ? "disabled" : ""} - previousClassName={isLoading ? "disabled" : ""} - nextClassName={isLoading ? "disabled" : ""} + previousClassName={isLoading ? "disabled" : "previous-page"} + nextClassName={isLoading ? "disabled" : "next-page"} /> } diff --git a/next/styles/globals.css b/next/styles/globals.css index 1e8df2bb..c01df2a0 100644 --- a/next/styles/globals.css +++ b/next/styles/globals.css @@ -95,28 +95,71 @@ body { .pagination li { text-align: center; margin-right: 10px; - border: 1px solid #dedfe0; border-radius: 10px; display: flex; } .pagination a { - font-family: "Lato"; - font-weight: 700; - min-width: 35px; - padding: 5px 10px; + font-family: "Roboto"; + font-weight: 500; + padding: 10px 16px; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.1px; + border: 1px solid #dedfe0; + border-radius: 8px; + color: #252A32; } .pagination .active { background-color: #2b8c4d; color: white; - border: 1px solid #2b8c4d; +} + +.pagination .next-page a { + border: 1px solid #2B8C4D; + color: #2B8C4D; +} + +.pagination .next-page a::after { + content: ''; + display: inline-block; + width: 9px; + height: 9px; + border-color: #2B8C4D; + border-right: 2px solid; + border-bottom: 2px solid; + transform: rotate(-45deg); + margin-left: 8px; +} + +.pagination .previous-page a { + display: flex; + flex-direction: row-reverse; + align-items: center; + border: 1px solid #2B8C4D; + color: #2B8C4D; +} + +.pagination .previous-page a::after { + content: ''; + display: inline-block; + position: relative; + top: -1px; + width: 9px; + height: 9px; + border-color: #2B8C4D; + border-left: 2px solid; + border-top: 2px solid; + transform: rotate(-45deg); + margin-right: 8px; } .pagination .disabled a { cursor: default !important; color: #dedfe0; pointer-events: none; + border: 1px solid transparent; } .pagination .active a{ From f2864527d38fb1748f91cab0cdce7a002125da2f Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Wed, 10 Jul 2024 11:00:15 -0300 Subject: [PATCH 44/66] feat: ajust filter accordion and bugs --- next/components/atoms/FilterAccordion.js | 14 +++---- next/components/organisms/BdmTablePage.js | 14 ++++--- next/components/organisms/Database.js | 1 - next/pages/dataset/index.js | 50 +++++++++++++---------- next/styles/globals.css | 2 +- 5 files changed, 45 insertions(+), 36 deletions(-) diff --git a/next/components/atoms/FilterAccordion.js b/next/components/atoms/FilterAccordion.js index dabe360c..a9f2c49a 100644 --- a/next/components/atoms/FilterAccordion.js +++ b/next/components/atoms/FilterAccordion.js @@ -34,8 +34,7 @@ export function BaseFilterAccordion({ @@ -119,7 +118,7 @@ export function CheckboxFilterAccordion({ > {canSearch && - + } {options.length > 0 && options.map((c) => ( diff --git a/next/components/organisms/BdmTablePage.js b/next/components/organisms/BdmTablePage.js index 4ea04f7c..82f476c1 100644 --- a/next/components/organisms/BdmTablePage.js +++ b/next/components/organisms/BdmTablePage.js @@ -303,7 +303,7 @@ export default function BdmTablePage({ id }) { /> - setIsLoading(!isLoading)}> + - + @@ -467,7 +471,7 @@ export default function BdmTablePage({ id }) { /> @@ -520,7 +524,7 @@ export default function BdmTablePage({ id }) { @@ -511,8 +507,9 @@ export default function SearchDatasetPage() { alignItems="flex-start" minWidth={{ base: "100%", lg: "300px" }} maxWidth={{ base: "100%", lg: "300px" }} + spacing={0} > - setIsLoading(!isLoading)}> + - Conjuntos com @@ -564,12 +563,14 @@ export default function SearchDatasetPage() { text="Pedidos LAI" count={aggregations?.contains_information_requests?.filter(elm => elm.key === 1)[0]?.count || 0} /> - + - Recursos @@ -593,7 +594,7 @@ export default function SearchDatasetPage() { text="Pagos" count={aggregations?.contains_closed_data?.filter(elm => elm.key === 1)[0]?.count || 0} /> - + @@ -663,34 +664,39 @@ export default function SearchDatasetPage() { } {!showEmptyState && - - + {count ? `${count} conjunto${count > 1 ? "s": ""} encontrado${count > 1 ? "s": ""} ${!!query.q ? ` para ${query.q}` : ""}` : - encontrando conjuntos {!!query.q ? ` para ${query.q}` : ""} + encontrando conjuntos {!!query.q ? ` para ${query.q}` : ""} } - + } {isLoading ? new Array(10).fill(0).map((e, i) => ( diff --git a/next/styles/globals.css b/next/styles/globals.css index c01df2a0..a3721e01 100644 --- a/next/styles/globals.css +++ b/next/styles/globals.css @@ -89,7 +89,7 @@ body { list-style-type: none; display: flex; align-self: center; - padding-top: 36px; + padding: 24px; } .pagination li { From e496e1bce05b0fc542e599d28ec104f4982484d9 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Wed, 10 Jul 2024 17:01:19 -0300 Subject: [PATCH 45/66] feat: tags add in dataset page --- next/components/atoms/Tag.js | 29 ++++ next/components/molecules/ColumnsTable.js | 2 +- next/pages/dataset/index.js | 174 ++++++++++++---------- 3 files changed, 127 insertions(+), 78 deletions(-) diff --git a/next/components/atoms/Tag.js b/next/components/atoms/Tag.js index 54b652ed..614a6b94 100644 --- a/next/components/atoms/Tag.js +++ b/next/components/atoms/Tag.js @@ -25,3 +25,32 @@ export default function TagBase({ ) } + +export function TagFilter({text, handleClick}) { + return ( + + {text} + handleClick()} + /> + + ) +} \ No newline at end of file diff --git a/next/components/molecules/ColumnsTable.js b/next/components/molecules/ColumnsTable.js index 7b21f75c..f0f473c7 100644 --- a/next/components/molecules/ColumnsTable.js +++ b/next/components/molecules/ColumnsTable.js @@ -249,7 +249,7 @@ export default function ColumnsTable({ fill:"#4F9ADC" }} > - Fazer download da tabela que faz a tradução desta coluna + Baixar tabela que faz a tradução desta coluna {datasetName} - {tableName} diff --git a/next/pages/dataset/index.js b/next/pages/dataset/index.js index 0a4ebff1..3ced22fc 100644 --- a/next/pages/dataset/index.js +++ b/next/pages/dataset/index.js @@ -23,7 +23,7 @@ import { import { CheckboxFilterAccordion } from "../../components/atoms/FilterAccordion"; import Checkbox from "../../components/atoms/Checkbox"; -import Tag from "../../components/atoms/Tag"; +import { TagFilter } from "../../components/atoms/Tag"; import Database from "../../components/organisms/Database"; import { MainPageTemplate } from "../../components/templates/main"; @@ -34,45 +34,6 @@ export async function getStaticProps() { return await withPages() } -function FilterTags({ - label, - fieldName, - values, - setParamFilters, - paramFilters, - translations -}) { - function translate (field, translation) { - return translation[field] || field - } - - return ( - - - {label} - - - {values.map((v) => ( - { - let newArr = [...values]; - newArr.splice(values.indexOf(v), 1); - setParamFilters({ ...paramFilters, [fieldName]: newArr }); - }} - text={translations ? translate(v, translations) : v} - /> - ))} - - - ) -} - export default function SearchDatasetPage() { const router = useRouter() const query = router.query @@ -206,7 +167,7 @@ export default function SearchDatasetPage() { spacing={0} borderRadius="16px" border={!display && "1px solid #DEDFE0"} - padding="40px 16px" + padding={display ? "0 16px 40px" :"40px 16px"} > {image && { + function DatabaseCard({ data }) { return ( ({ name: item })) + } else { + newObj[key] = obj[key] + } + } + return newObj + } + + let tags = { ...query } + delete tags.page + + if(Object.keys(tags).length === 0) return null + + return ( + + {Object.entries(mapArrayProps(tags)).map(([key, value]) => + Array.isArray(value) ? ( + value.map((tag, i) => ( + handleSelectFilter([`${key}`,`${tag.name}`])} + /> + )) + ) : ( + handleSelectFilter([`${key}`,`${value}`])} + /> + ) + )} + + + Limpar filtros + + + ) + } + const validateActiveFilterAccordin = (text) => { return selectedFilters.map((elm) => elm[0] === text).find(res => res === true) } @@ -565,7 +583,7 @@ export default function SearchDatasetPage() { /> - + - + handleSelectFilter(["theme",`${value}`])} /> - + handleSelectFilter(["organization",`${value}`])} /> - + handleSelectFilter(["tag",`${value}`])} /> - + + + + + + {count ? + `${count} conjunto${count > 1 ? "s": ""} encontrado${count > 1 ? "s": ""} ${!!query.q ? ` para ${query.q}` : ""}` + : + count === 0 && showEmptyState ? + `0 conjuntos encontrados` + : + + encontrando conjuntos {!!query.q ? ` para ${query.q}` : ""} + + } + + + {showEmptyState && } - {!showEmptyState && - - - {count ? - `${count} conjunto${count > 1 ? "s": ""} encontrado${count > 1 ? "s": ""} ${!!query.q ? ` para ${query.q}` : ""}` - : - - encontrando conjuntos {!!query.q ? ` para ${query.q}` : ""} - - } - - - } - {isLoading ? new Array(10).fill(0).map((e, i) => ( From 0dd50f849675e194c5b789832b924b1cf63eef92 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Thu, 11 Jul 2024 17:35:20 -0300 Subject: [PATCH 46/66] feat: fix bug Tab's and ajust style in Menu --- next/components/atoms/GreenTab.js | 7 +- next/components/atoms/HelpWidget.js | 15 +- .../molecules/DataInformationQuery.js | 45 ++-- next/components/molecules/Menu.js | 214 +++++++++++++----- next/components/molecules/MenuDropdown.js | 4 +- next/components/organisms/BdmTablePage.js | 33 ++- next/components/organisms/Database.js | 17 +- next/pages/dataset/[dataset].js | 27 --- next/public/img/icons/helpIcon.js | 6 +- next/styles/globals.css | 4 +- 10 files changed, 237 insertions(+), 135 deletions(-) diff --git a/next/components/atoms/GreenTab.js b/next/components/atoms/GreenTab.js index 66dccead..b929d7ce 100644 --- a/next/components/atoms/GreenTab.js +++ b/next/components/atoms/GreenTab.js @@ -4,17 +4,20 @@ import { Tab } from "@chakra-ui/react"; export default function GreenTab({ children, ...style }) { return ( - + { + if(resource?.dataset?._id === "e083c9a2-1cee-4342-bedc-535cbad6f3cd") setIncludeTranslation(false) + }, [resource.dataset]) + useEffect(() => { if (resource?.numberRows === 0) setDownloadNotAllowed(false) if (resource?.numberRows) resource?.numberRows > 200000 ? setDownloadNotAllowed(false) : setDownloadNotAllowed(true) @@ -211,7 +214,7 @@ export default function DataInformationQuery({ resource }) { setHasLoadingResponse(false) setSqlCode("") setInsufficientChecks(false) - }, [resource._id, checkedColumns, tabIndex, includeTranslation]) + }, [resource._id, checkedColumns, includeTranslation]) useEffect(() => { if(hasLoadingResponse === true) { @@ -287,13 +290,6 @@ export default function DataInformationQuery({ resource }) { Download - - - + window.open(b.href, "_blank")} @@ -80,7 +82,8 @@ function MenuDrawer({ userData, isOpen, onClose, links }) { > @@ -103,8 +106,9 @@ function MenuDrawer({ userData, isOpen, onClose, links }) { display="flex" gap="16px" fontSize="16px" - fontFamily="Ubuntu" - fontWeight="300" + fontFamily="Roboto" + letterSpacing="0.1px" + fontWeight="400" href={c.href} >{c.icon && c.icon} {c.name} ) @@ -118,7 +122,8 @@ function MenuDrawer({ userData, isOpen, onClose, links }) { {key} @@ -132,26 +137,56 @@ function MenuDrawer({ userData, isOpen, onClose, links }) { <> : - window.open("/user/login", "_self")} + Entrar - - window.open("/user/register", "_self")} + + + Cadastrar - + } @@ -199,19 +234,19 @@ function MenuDrawerUser({ userData, isOpen, onClose}) { {userData?.username || ""} {userData?.email || ""} @@ -226,10 +261,10 @@ function MenuDrawerUser({ userData, isOpen, onClose}) { Configurações @@ -249,10 +284,10 @@ function MenuDrawerUser({ userData, isOpen, onClose}) { key={index} color="#575757" fontSize="14px" - fontFamily="Ubuntu" + fontFamily="Roboto" + letterSpacing="0.1px" fontWeight="400" lineHeight="27px" - letterSpacing="0.3px" onClick={() => { onClose() router.push({pathname: `/user/${userData.username}`, query: elm.value})} @@ -285,11 +320,11 @@ function MenuDrawerUser({ userData, isOpen, onClose}) { > Sair @@ -401,21 +436,21 @@ function MenuUser ({ userData, onOpen, onClose }) { {userData?.username ? userData?.username : ""} {userData?.email ? userData?.email : ""} @@ -433,11 +468,11 @@ function MenuUser ({ userData, onOpen, onClose }) { Configurações @@ -459,11 +494,11 @@ function MenuUser ({ userData, onOpen, onClose }) { Sair @@ -596,12 +631,13 @@ function DesktopLinks({ userData, links, position = false, path, userTemplate = display="flex" flexDirection="colunm" _hover={{ opacity: "0.6" }} - fontSize="14px" target={url.slice(0,4) === "http" ? "_blank" : "_self"} color="#252A32" - fontFamily="Ubuntu" + fontSize="14px" + fontFamily="Roboto" fontWeight="400" - letterSpacing="0.3px" + lineHeight="20px" + letterSpacing="0.1px" href={url} padding="10px 0" alignItems="center" @@ -640,7 +676,11 @@ function DesktopLinks({ userData, links, position = false, path, userTemplate = backgroundColor={b.color} minWidth="80px" height="35px" - fontSize="15px" + fontSize="14px" + fontFamily="Roboto" + letterSpacing="0.1px" + fontWeight="400" + lineHeight="20px" borderRadius="30px" > {b.name} @@ -658,9 +698,11 @@ function DesktopLinks({ userData, links, position = false, path, userTemplate = marginTop="10px" minWidth="202px" borderColor="#FFF" - fontFamily="Ubuntu" + fontSize="14px" + fontFamily="Roboto" + letterSpacing="0.1px" fontWeight="400" - letterSpacing="0.3px" + lineHeight="20px" borderRadius="10px" padding="32px" _first={{ paddingTop: "10px"}} @@ -683,10 +725,11 @@ function DesktopLinks({ userData, links, position = false, path, userTemplate = @@ -702,21 +745,82 @@ function DesktopLinks({ userData, links, position = false, path, userTemplate = /> } - + + {(path === "/dataset" || path === "/dataset/[dataset]") && + + } + {userData ? ( ) : ( <> - + Entrar - - - - Cadastrar - - + + + + Cadastrar + )} diff --git a/next/components/molecules/MenuDropdown.js b/next/components/molecules/MenuDropdown.js index 31abfb1b..b54099fd 100644 --- a/next/components/molecules/MenuDropdown.js +++ b/next/components/molecules/MenuDropdown.js @@ -37,9 +37,9 @@ export default function MenuDropdown({ title, children, ...style }) { onMouseEnter={btnMouseEnterEvent} onMouseLeave={btnMouseLeaveEvent} as={Button} - fontFamily="Ubuntu" + fontFamily="Roboto" fontSize="15px" - letterSpacing="0.3px" + letterSpacing="0.1px" _active={{ backgroundColor: "transparent" }} padding="0px" color="#252A32" diff --git a/next/components/organisms/BdmTablePage.js b/next/components/organisms/BdmTablePage.js index 82f476c1..8a23ab71 100644 --- a/next/components/organisms/BdmTablePage.js +++ b/next/components/organisms/BdmTablePage.js @@ -321,9 +321,9 @@ export default function BdmTablePage({ id }) { endColor="#F3F3F3" borderRadius="6px" width={!isLoading ? "100%" : "500px"} - spacing="2px" + spacing="4px" skeletonHeight="18px" - noOfLines={2} + noOfLines={3} marginTop="12px !important" isLoaded={!isLoading} > @@ -334,14 +334,14 @@ export default function BdmTablePage({ id }) { fontFamily="Roboto" fontWeight="400" fontSize="14px" - lineHeight="20px" + lineHeight="22px" color="#464A51" > {resource?.updates?.[0]?.latest ? formatDate(resource.updates[0].latest) : "Não informado" - } : Última vez que atualizamos na BD + }: Última vez que atualizamos na BD {resource?.updates?.[0]?.entity?.slug && } + {!resource?.updates?.[0] && + + Sem previsão de atualização + + } {resource?.rawDataSource?.[0]?.updates?.[0]?.latest ? formatDate(resource.rawDataSource[0].updates[0].latest) : "Não informado" - } : Última vez que atualizaram na fonte original + }: Última vez que atualizaram na fonte original {resource?.rawDataSource?.[0]?.updates?.[0]?.entity?.slug && {resource?.rawDataSource?.[0]?.polls?.[0]?.latest ? formatDate(resource.rawDataSource[0].polls[0].latest) : "Não informado" - } : Última vez que verificamos a fonte original + }: Última vez que verificamos a fonte original diff --git a/next/components/organisms/Database.js b/next/components/organisms/Database.js index e8a9053b..83e1906c 100644 --- a/next/components/organisms/Database.js +++ b/next/components/organisms/Database.js @@ -4,9 +4,9 @@ import { Stack, VStack, Text, + Box } from "@chakra-ui/react"; import { useCheckMobile } from "../../hooks/useCheckMobile.hook"; -import Link from "../atoms/Link"; import LinkIcon from "../../public/img/icons/linkIcon"; import InfoArrowIcon from "../../public/img/icons/infoArrowIcon"; @@ -157,20 +157,27 @@ export default function Database({ height="100%" spacing={6} > - + {organization.name - + - - - - ) } \ No newline at end of file diff --git a/next/public/img/icons/helpIcon.js b/next/public/img/icons/helpIcon.js index b4dafb69..caac6b55 100644 --- a/next/public/img/icons/helpIcon.js +++ b/next/public/img/icons/helpIcon.js @@ -2,13 +2,13 @@ import { createIcon } from '@chakra-ui/icons'; const HelpIcon = createIcon({ displayName: "help", - viewBox: "0 0 25 25", + viewBox: "0 0 28 28", path: ( ) }) -export default HelpIcon +export default HelpIcon \ No newline at end of file diff --git a/next/styles/globals.css b/next/styles/globals.css index a3721e01..75664bcc 100644 --- a/next/styles/globals.css +++ b/next/styles/globals.css @@ -117,7 +117,7 @@ body { } .pagination .next-page a { - border: 1px solid #2B8C4D; + border: 1px solid transparent; color: #2B8C4D; } @@ -137,7 +137,7 @@ body { display: flex; flex-direction: row-reverse; align-items: center; - border: 1px solid #2B8C4D; + border: 1px solid transparent; color: #2B8C4D; } From 65f80dedfac1de9a4420401961ba8c227b0ba7a0 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Fri, 12 Jul 2024 10:47:14 -0300 Subject: [PATCH 47/66] feat: addicioned bigquery id field in table page --- .../molecules/DataInformationQuery.js | 4 +- next/components/organisms/BdmTablePage.js | 57 ++++++++++++++++++- .../organisms/InformationRequestPage.js | 2 +- .../organisms/RawDataSourcesPage.js | 2 +- 4 files changed, 61 insertions(+), 4 deletions(-) diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index 445b860d..c2eb1466 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -176,6 +176,7 @@ export default function DataInformationQuery({ resource }) { const [insufficientChecks, setInsufficientChecks] = useState(false) const [includeTranslation, setIncludeTranslation] = useState(true) + const [gcpProjectID, setGcpProjectID] = useState("") const [gcpDatasetID, setGcpDatasetID] = useState("") const [gcpTableId, setGcpTableId] = useState("") const [downloadUrl, setDownloadUrl] = useState("") @@ -197,6 +198,7 @@ export default function DataInformationQuery({ resource }) { if (resource?.numberRows) resource?.numberRows > 200000 ? setDownloadNotAllowed(false) : setDownloadNotAllowed(true) if (resource?.cloudTables?.[0]) { + setGcpProjectID(resource.cloudTables[0]?.gcpProjectId || "") setGcpDatasetID(resource.cloudTables[0]?.gcpDatasetId || "") setGcpTableId(resource.cloudTables[0]?.gcpTableId || "") } @@ -536,7 +538,7 @@ export default function DataInformationQuery({ resource }) { > - {resource?.description || "Não fornecido"} + {resource?.description || "Não informado"} @@ -422,6 +423,60 @@ export default function BdmTablePage({ id }) { + + + + ID do BigQuery + + + + + + {!resource?.cloudTables ? + "Não informado" + : + resource?.cloudTables?.[0]?.gcpProjectId+"."+resource?.cloudTables?.[0]?.gcpDatasetId+"."+resource?.cloudTables?.[0]?.gcpTableId + } + + + + + + - {resource?.observations || "Não fornecido"} + {resource?.observations || "Não informado"} diff --git a/next/components/organisms/RawDataSourcesPage.js b/next/components/organisms/RawDataSourcesPage.js index 792c3ffe..61b47d36 100644 --- a/next/components/organisms/RawDataSourcesPage.js +++ b/next/components/organisms/RawDataSourcesPage.js @@ -282,7 +282,7 @@ export default function RawDataSourcesPage({ id }) { isLoaded={!isLoading} > - {resource?.description || "Não fornecido"} + {resource?.description || "Não informado"} From 185a75f4c3e31127034115883698384b226bac7c Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Fri, 12 Jul 2024 14:10:13 -0300 Subject: [PATCH 48/66] feat: add link in dataInformationQuery and ajust checkbox logic --- next/components/atoms/Checkbox.js | 22 +++++++++++-------- next/components/molecules/ColumnsTable.js | 7 +++--- .../molecules/DataInformationQuery.js | 2 +- 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/next/components/atoms/Checkbox.js b/next/components/atoms/Checkbox.js index 1f16db46..0029ac25 100644 --- a/next/components/atoms/Checkbox.js +++ b/next/components/atoms/Checkbox.js @@ -4,8 +4,8 @@ import { } from '@chakra-ui/react'; function CustomCheckbockIcon({ variant, isIndeterminate, isChecked, ...props }) { - const variantIcon = () => { - if(variant === "lessCheck") return "M5.06135 11.0002C4.76599 11.0002 4.51496 10.9029 4.30826 10.7084C4.10157 10.514 3.99823 10.2778 3.99823 9.99984C3.99823 9.72193 4.10157 9.48573 4.30826 9.29124C4.51496 9.09676 4.76599 8.99951 5.06135 8.99951H14.9391C15.2344 8.99951 15.4855 9.09676 15.6922 9.29124C15.8988 9.48573 16.0022 9.72193 16.0022 9.99984C16.0022 10.2778 15.8988 10.514 15.6922 10.7084C15.4855 10.9029 15.2344 11.0002 14.9391 11.0002H5.06135Z" + function variantIcon() { + if(isIndeterminate) return "M5.06135 11.0002C4.76599 11.0002 4.51496 10.9029 4.30826 10.7084C4.10157 10.514 3.99823 10.2778 3.99823 9.99984C3.99823 9.72193 4.10157 9.48573 4.30826 9.29124C4.51496 9.09676 4.76599 8.99951 5.06135 8.99951H14.9391C15.2344 8.99951 15.4855 9.09676 15.6922 9.29124C15.8988 9.48573 16.0022 9.72193 16.0022 9.99984C16.0022 10.2778 15.8988 10.514 15.6922 10.7084C15.4855 10.9029 15.2344 11.0002 14.9391 11.0002H5.06135Z" return "M7.17894 10.9259L13.306 4.7988C13.5043 4.60057 13.7378 4.50146 14.0068 4.50146C14.2758 4.50146 14.5094 4.60057 14.7076 4.7988C14.9058 4.99702 15.0049 5.23196 15.0049 5.50364C15.0049 5.7753 14.9058 6.01024 14.7076 6.20846L7.87972 13.0444C7.6815 13.2427 7.44791 13.3418 7.17894 13.3418C6.90998 13.3418 6.67639 13.2427 6.47817 13.0444L3.2943 9.86058C3.09609 9.66236 2.99834 9.42742 3.00103 9.15576C3.00373 8.88408 3.10418 8.64914 3.30241 8.45091C3.50063 8.25269 3.73557 8.15358 4.00725 8.15358C4.27891 8.15358 4.51385 8.25269 4.71207 8.45091L7.17894 10.9259Z" } @@ -14,28 +14,28 @@ function CustomCheckbockIcon({ variant, isIndeterminate, isChecked, ...props }) backgroundColor="#2b8c4d" boxSizing="border-box" borderColor="#2b8c4d" - width="20px" + width={isIndeterminate ? "24px" : "20px"} height="20px" - viewBox="0 0 18 18" + viewBox={isIndeterminate ? "0 0 16 18" : "0 0 18 18"} _focus={{ boxShadow: "none", outline: "none" }} {...props} > - + ) } -export default function CustomCheckbox({ children, icon, ...props}) { +export default function CustomCheckbox({ children, hasIndeterminate = false , icon, ...props}) { return ( } + icon={ + + } {...props} > {children} diff --git a/next/components/molecules/ColumnsTable.js b/next/components/molecules/ColumnsTable.js index f0f473c7..2b33f72f 100644 --- a/next/components/molecules/ColumnsTable.js +++ b/next/components/molecules/ColumnsTable.js @@ -110,6 +110,7 @@ export default function ColumnsTable({ } const handleMasterCheckboxChange = () => { + if(checkedColumns.length > 0) return onChangeCheckedColumns([]) const allColumnSlugs = resource.map(column => column.node.name) if (checkedColumns.length === allColumnSlugs.length) { @@ -425,10 +426,8 @@ export default function ColumnsTable({ 0} + hasIndeterminate={checkedColumns.length !== resource.length && checkedColumns.length > 0} /> - Essa tabela completa, com todas as colunas, tem {formatBytes(resource.uncompressedFileSize)}. Cuidado para não ultrapassar o limite de processamento gratuito do BigQuery. + Essa tabela completa, com todas as colunas, tem {formatBytes(resource.uncompressedFileSize)}. Cuidado para não ultrapassar o limite de processamento gratuito do BigQuery. {numberColumns === checkedColumns.length && "Para otimizar a consulta, você pode selecionar menos colunas ou adicionar filtros no BigQuery."}     From d5f0e6f19d342fd0aecb053a4dc95d8d0231b9a4 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Mon, 15 Jul 2024 16:49:44 -0300 Subject: [PATCH 49/66] feat: add disclaimer and show dictionaries for SAEB --- .../molecules/DataInformationQuery.js | 17 +++++++++++++++++ next/components/organisms/DatasetResource.js | 15 +++++++++++---- 2 files changed, 28 insertions(+), 4 deletions(-) diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index ea89f451..947df0e3 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -331,6 +331,23 @@ export default function DataInformationQuery({ resource }) { template={tabIndex === 3 ? "download" : "checks"} /> + + + Essa tabela possui códigos institucionais que variam entre anos. Por isso, ainda estamos trabalhando para automatizar o processo de tradução. + Por enquanto, recomendamos acessar o dicionário e os diretórios para entender como traduzir os códigos presentes na tabela. + + + { - const dataset_tables = dataset?.tables?.edges.map((elm) => elm.node) - .filter((elm) => elm?.status?.slug !== "under_review") - .filter((elm) => elm?.slug !== "dicionario") - .filter((elm) => elm?.slug !== "dictionary").sort(sortElements) || [] + // Id do dataset do SAEB + let dataset_tables = [] + if(dataset?._id === "e083c9a2-1cee-4342-bedc-535cbad6f3cd") { + dataset_tables = dataset?.tables?.edges.map((elm) => elm.node) + .filter((elm) => elm?.status?.slug !== "under_review").sort(sortElements) || [] + } else { + dataset_tables = dataset?.tables?.edges.map((elm) => elm.node) + .filter((elm) => elm?.status?.slug !== "under_review") + .filter((elm) => elm?.slug !== "dicionario") + .filter((elm) => elm?.slug !== "dictionary").sort(sortElements) || [] + } const raw_data_sources = dataset?.rawDataSources?.edges.map((elm) => elm.node).filter((elm) => elm?.status?.slug !== "under_review").sort(sortElements) || [] const information_request = dataset?.informationRequests?.edges.map((elm) => elm.node).filter((elm) => elm?.status?.slug !== "under_review").sort(sortElements) || [] From bcb9e59d25f6ed0e5cb206978d4383d64f0e1511 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Tue, 16 Jul 2024 13:25:51 -0300 Subject: [PATCH 50/66] feat: add trigger for GA and ajusts --- .../molecules/DataInformationQuery.js | 30 ++++++++++++------- .../molecules/TemporalCoverageDisplay.js | 2 +- next/components/organisms/BdmTablePage.js | 1 + next/components/organisms/Database.js | 2 +- next/pages/dataset/index.js | 2 +- 5 files changed, 23 insertions(+), 14 deletions(-) diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index 947df0e3..2679b3e6 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -90,6 +90,7 @@ export function CodeHighlight({ language, children }) { /> { - if (downloadNotAllowed === false) return null - - return window.open(downloadUrl) - } - const handleIndexes = (index) => { const categoryValues = ["SQL", "Python", "R", "Stata", "Download"] setTabIndex(index) triggerGAEvent("category_click", categoryValues[index]) } + const queryLanguage = () => { + const language = { + 0 : "SQL", + 1 : "Python", + 2 : "R" + } + return language[tabIndex] ? language[tabIndex] : "" + } + return ( { if(checkedColumns.length === 0) return setInsufficientChecks(true) + triggerGAEvent("gerar_consulta_click", queryLanguage()) setHasLoadingResponse(true) }} target="_blank" @@ -555,6 +560,7 @@ export default function DataInformationQuery({ resource }) { > */} handlerDownload()} + as="a" + href={downloadUrl} + target="_blank" display="flex" alignItems="center" height="40px" @@ -809,8 +816,9 @@ read_sql(query, billing_project_id = get_billing_id()) fontSize="14px" gap="8px" lineHeight="20px" + pointerEvents={downloadNotAllowed ? "default" : "none"} _hover={{ - backgroundColor: downloadNotAllowed ? "#80BA94" : "#ACAEB1" + backgroundColor: "#80BA94" }} > + if(values === null) return return ( {contains.free && "Grátis"} {contains.free && contains.pro && "e"} {contains.pro && "Pagos"} - {!contains.free && !contains.pro && "Não listado"} + {!contains.free && !contains.pro && "Não informado"} diff --git a/next/pages/dataset/index.js b/next/pages/dataset/index.js index 3ced22fc..b65be3ae 100644 --- a/next/pages/dataset/index.js +++ b/next/pages/dataset/index.js @@ -635,7 +635,7 @@ export default function SearchDatasetPage() { choices={aggregations?.organizations} valueField="key" displayField="name" - fieldName="Organizações" + fieldName="Organização" valuesChecked={valuesCheckedFilter("organization")} onChange={(value) => handleSelectFilter(["organization",`${value}`])} /> From d0c307fe861586f778b39b50c72d4fcfcc926f6c Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Tue, 16 Jul 2024 16:07:18 -0300 Subject: [PATCH 51/66] feat: fix bug in dataset page and ajust height table --- next/components/atoms/FilterAccordion.js | 167 +++++++++++----------- next/components/molecules/ColumnsTable.js | 2 +- next/pages/dataset/index.js | 13 +- 3 files changed, 96 insertions(+), 86 deletions(-) diff --git a/next/components/atoms/FilterAccordion.js b/next/components/atoms/FilterAccordion.js index a9f2c49a..26594e59 100644 --- a/next/components/atoms/FilterAccordion.js +++ b/next/components/atoms/FilterAccordion.js @@ -8,6 +8,7 @@ import { VStack, Text, HStack, + Skeleton } from "@chakra-ui/react"; import { useEffect, useState } from "react"; import Checkbox from "../atoms/Checkbox"; @@ -48,24 +49,18 @@ export function BaseFilterAccordion({ fontFamily="Roboto" fontWeight="500" fontSize="16px" - color={isActive ? "#2B8C4D" : "#464A51"} + color="#464A51" > {fieldName} - {!alwaysOpen ? : <>} + {!alwaysOpen ? : <>} {(isOpen && isOpen === true) || (isOpen == null && isExpanded) ? ( - + <> {children} - + ) : ( <> )} @@ -88,6 +83,7 @@ export function CheckboxFilterAccordion({ isActive = false, isOpen = null, canSearch = false, + isLoading }) { const [options , setOptions] = useState([]) const [search, setSearch] = useState(""); @@ -116,81 +112,92 @@ export function CheckboxFilterAccordion({ overflowX="hidden" alwaysOpen={alwaysOpen} > - - {canSearch && - - - } - /> - - } - - {options.length > 0 && options.map((c) => ( - - { onChange(e.target.value)}} - minWidth="18px" - minHeight="18px" - maxWidth="18px" - maxHeight="18px" - marginRight="14px" - flexShrink={0} + + + {canSearch && + + + } /> + + } + + {options.length > 0 && options.map((c) => ( - {c[displayField]} - - - {c["count"] ? `(${c["count"]})` : `(0)`} + { onChange(e.target.value)}} + minWidth="18px" + minHeight="18px" + maxWidth="18px" + maxHeight="18px" + marginRight="14px" + flexShrink={0} + /> + + {c[displayField]} + + + {c["count"] ? `(${c["count"]})` : `(0)`} + - - ))} - - + ))} + + + ); } diff --git a/next/components/molecules/ColumnsTable.js b/next/components/molecules/ColumnsTable.js index 2b33f72f..9f9a224f 100644 --- a/next/components/molecules/ColumnsTable.js +++ b/next/components/molecules/ColumnsTable.js @@ -401,7 +401,7 @@ export default function ColumnsTable({ > arr[0] === id) if (indice != -1) objQuery.splice(indice, 1) } - filterQueryFilters("q") filterQueryFilters("page") return flattenArray(objQuery) @@ -144,7 +143,6 @@ export default function SearchDatasetPage() { router.push({ pathname: router.pathname, query: { - ...(query.q ? { q: query.q } : {}), ...(queryParams || {}), page: 1 } @@ -625,6 +623,7 @@ export default function SearchDatasetPage() { fieldName="Tema" valuesChecked={valuesCheckedFilter("theme")} onChange={(value) => handleSelectFilter(["theme",`${value}`])} + isLoading={!isLoading} /> @@ -638,6 +637,7 @@ export default function SearchDatasetPage() { fieldName="Organização" valuesChecked={valuesCheckedFilter("organization")} onChange={(value) => handleSelectFilter(["organization",`${value}`])} + isLoading={!isLoading} /> @@ -651,6 +651,7 @@ export default function SearchDatasetPage() { fieldName="Etiqueta" valuesChecked={valuesCheckedFilter("tag")} onChange={(value) => handleSelectFilter(["tag",`${value}`])} + isLoading={!isLoading} /> @@ -664,6 +665,7 @@ export default function SearchDatasetPage() { fieldName="Nível da observação" valuesChecked={valuesCheckedFilter("observation_level")} onChange={(value) => handleSelectFilter(["observation_level",`${value}`])} + isLoading={!isLoading} /> @@ -681,6 +683,7 @@ export default function SearchDatasetPage() { align="baseline" > + > {count ? `${count} conjunto${count > 1 ? "s": ""} encontrado${count > 1 ? "s": ""} ${!!query.q ? ` para ${query.q}` : ""}` : count === 0 && showEmptyState ? `0 conjuntos encontrados` : - - encontrando conjuntos {!!query.q ? ` para ${query.q}` : ""} + + encontrando conjuntos {!!query.q ? ` para ${query.q}` : ""} } From 885f89431d4a3ab047744b4e607f7ac316c84109 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Tue, 16 Jul 2024 16:19:58 -0300 Subject: [PATCH 52/66] feat: redirect google olympics dataset --- next/pages/dataset/[dataset].js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/next/pages/dataset/[dataset].js b/next/pages/dataset/[dataset].js index 9b998da6..e437aabb 100644 --- a/next/pages/dataset/[dataset].js +++ b/next/pages/dataset/[dataset].js @@ -61,7 +61,8 @@ export default function DatasetPage ({ dataset }) { const isDatasetEmpty = dataset === null || Object.keys(dataset).length === 0 useEffect(() => { - if(isDatasetEmpty) return router.push(`${process.env.NEXT_PUBLIC_API_URL}/dataset_redirect?dataset=${query.dataset}`) + if (router.query?.dataset === "mundo-kaggle-olimpiadas") return window.open(`${process.env.NEXT_PUBLIC_BASE_URL_FRONTEND}/dataset/62f8cb83-ac37-48be-874b-b94dd92d3e2b`, "_self") + if (isDatasetEmpty) return router.push(`${process.env.NEXT_PUBLIC_API_URL}/dataset_redirect?dataset=${query.dataset}`) }, []) if(isDatasetEmpty) return From 68f8769d3a999dbc482c76b880e224038844b017 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Wed, 17 Jul 2024 09:34:22 -0300 Subject: [PATCH 53/66] fix: FAQ link for terms --- next/content/FAQ.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/next/content/FAQ.js b/next/content/FAQ.js index d9690813..5a176d21 100644 --- a/next/content/FAQ.js +++ b/next/content/FAQ.js @@ -712,7 +712,7 @@ export const QuestionFAQ = [

    Utilizamos suas informações pessoais para fornecer e melhorar nossos serviços, incluindo o processamento de pagamentos, o fornecimento de suporte ao cliente e a personalização da experiência do usuário. Não venderemos, alugaremos ou compartilharemos suas informações pessoais com terceiros não afiliados sem o seu consentimento explícito. - Para mais informações, acesse nossos Termos de Uso e Políticas de Privacidade aqui. + Para mais informações, acesse nossos Termos de Uso e Políticas de Privacidade aqui.

    ) From ee381506c23a495a1717587a257ddda754c22c2d Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Wed, 17 Jul 2024 16:54:44 -0300 Subject: [PATCH 54/66] feat: isClosed columns download and info --- next/components/molecules/ColumnsTable.js | 51 +++++++++++++------ .../molecules/DataInformationQuery.js | 15 +++++- .../molecules/TemporalCoverageDisplay.js | 2 +- next/pages/api/tables/getColumnsBdmTable.js | 1 + next/pages/precos.js | 3 +- next/pages/user/[username].js | 3 +- 6 files changed, 55 insertions(+), 20 deletions(-) diff --git a/next/components/molecules/ColumnsTable.js b/next/components/molecules/ColumnsTable.js index 9f9a224f..657819be 100644 --- a/next/components/molecules/ColumnsTable.js +++ b/next/components/molecules/ColumnsTable.js @@ -26,6 +26,7 @@ import InternalError from '../../public/img/internalError' import InfoIcon from '../../public/img/icons/infoIcon'; import DownloadIcon from '../../public/img/icons/downloadIcon'; import SearchIcon from '../../public/img/icons/searchIcon'; +import RedirectIcon from '../../public/img/icons/redirectIcon'; import 'katex/dist/katex.min.css'; function SearchColumn({ isLoaded, resource, columns }) { @@ -91,7 +92,8 @@ export default function ColumnsTable({ hasLoading, setHasLoading, numberColumns, - template + template, + columnsPro }) { const [resource, setResource] = useState({}) const [columns, setColumns] = useState({}) @@ -123,6 +125,13 @@ export default function ColumnsTable({ useEffect(() => { if(tableId === undefined) return + const filterClosedTables = (data) => { + return data.filter(elm => { + const table = elm?.node?.directoryPrimaryKey?.table + return table && table.isClosed === true + }) + } + const featchColumns = async () => { setHasLoading(true) @@ -132,6 +141,7 @@ export default function ColumnsTable({ if(result) { setResource(result.sort(sortElements)) numberColumns(result.length) + columnsPro(filterClosedTables(result)) setColumns(result.sort(sortElements)) setHasLoading(false) setIsSearchLoading(false) @@ -204,20 +214,6 @@ export default function ColumnsTable({ return 0 } - const empty = () => { - return ( - - Não informado - - ) - } - function TranslationTable({ value }) { if(value === null) return ( @@ -225,6 +221,30 @@ export default function ColumnsTable({ ) + if(value?.table?.isClosed) return ( + + + Acessar tabela que faz a tradução desta coluna + + + {value?.table?.dataset?.name} - {value?.table?.name} + + ) + const cloudValues = value?.table?.cloudTables?.edges?.[0]?.node const gcpDatasetID = cloudValues?.gcpDatasetId || "" @@ -242,6 +262,7 @@ export default function ColumnsTable({ href={downloadUrl} display="flex" flexDirection="row" + alignItems="center" gap="4px" color="#0068C5" fill="#0068C5" diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index 2679b3e6..0dcbf1d6 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -170,12 +170,13 @@ export default function DataInformationQuery({ resource }) { const [downloadNotAllowed, setDownloadNotAllowed] = useState(false) const [checkedColumns, setCheckedColumns] = useState([]) const [numberColumns, setNumberColumns] = useState(0) + const [columnsTranslationPro, setColumnsTranslationPro] = useState([]) const [sqlCode, setSqlCode] = useState("") + const [insufficientChecks, setInsufficientChecks] = useState(false) + const [includeTranslation, setIncludeTranslation] = useState(true) const [hasLoadingColumns, setHasLoadingColumns] = useState(true) const [isLoadingCode, setIsLoadingCode] = useState(false) const [hasLoadingResponse, setHasLoadingResponse] = useState(false) - const [insufficientChecks, setInsufficientChecks] = useState(false) - const [includeTranslation, setIncludeTranslation] = useState(true) const [gcpProjectID, setGcpProjectID] = useState("") const [gcpDatasetID, setGcpDatasetID] = useState("") @@ -333,6 +334,7 @@ export default function DataInformationQuery({ resource }) { hasLoading={hasLoadingColumns} setHasLoading={setHasLoadingColumns} template={tabIndex === 3 ? "download" : "checks"} + columnsPro={setColumnsTranslationPro} /> } + {columnsTranslationPro.length > 0 && tabIndex !== 3 && + + A tabela de tradução da{columnsTranslationPro.length > 1 && "s"} coluna{columnsTranslationPro.length > 1 && "s"} {columnsTranslationPro.map((elm) => elm?.node?.name).join(", ")} é exclusiva para assinantes. Todos os demais códigos institucionais são de acesso aberto. + + } + {insufficientChecks && { {name: "Tabelas tratadas"}, {name: "Dados integrados", tooltip: "Nossa metodologia de padronização e compatibilização de dados permite que você cruze tabelas de diferentes instituições e temas de maneira simplificada."}, {name: "Acesso em nuvem"}, - {name: "Acesso via SQL, Python, R e Stata"}, + {name: "Acesso via SQL, Python e R"}, {name: "Integração com ferramentas BI"}, ]} button={{ @@ -1951,6 +1951,7 @@ const PlansAndPayment = ({ userData }) => { textResource="Todos os recursos da BD Grátis, mais:" resources={[ {name: "Dezenas de bases de alta frequência atualizadas"}, + {name: "Tabela de referência de empresas com informações traduzidas e atualizadas"} ]} button={{ text: `${userData?.proSubscription === "bd_pro" ? "Plano atual" : "Assinar"}`, From 32dec17ce9482d95863603d1e10ee740d62a5317 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Thu, 18 Jul 2024 17:15:14 -0300 Subject: [PATCH 55/66] feat: page contato-consultoria up --- next/pages/contato-consultoria.js | 65 +++++++++++++++++++++++++++++++ next/pages/servicos.js | 54 ++++++++++++++++++++++++- 2 files changed, 117 insertions(+), 2 deletions(-) create mode 100644 next/pages/contato-consultoria.js diff --git a/next/pages/contato-consultoria.js b/next/pages/contato-consultoria.js new file mode 100644 index 00000000..32a36537 --- /dev/null +++ b/next/pages/contato-consultoria.js @@ -0,0 +1,65 @@ +import { + Box, + Stack, +} from "@chakra-ui/react"; +import Head from "next/head"; +import { useEffect } from "react"; +import { MainPageTemplate } from "../components/templates/main"; +import { withPages } from "../hooks/pages.hook"; + +export async function getStaticProps() { + return await withPages() +} + +export default function ContactConsultancy() { + useEffect(() => { + const script = document.createElement('script'); + script.src='https://js.hsforms.net/forms/embed/v2.js'; + document.body.appendChild(script); + + script.addEventListener('load', () => { + if (window.hbspt) { + window.hbspt.forms.create({ + region: "na1", + portalId: "9331013", + formId: "1b1d4a12-5cbc-4ffc-837a-12b905c2d87b", + target: '#form-hbspt' + }) + } + }) + },[]) + + return ( + + + Consultoria – Base dos Dados + + + + + + + + + ) +} diff --git a/next/pages/servicos.js b/next/pages/servicos.js index 45ead28c..fc525f60 100644 --- a/next/pages/servicos.js +++ b/next/pages/servicos.js @@ -2,6 +2,7 @@ import { Stack, VStack, Image, + Text, Box, Skeleton } from "@chakra-ui/react"; @@ -100,6 +101,31 @@ function Slogan () { > A Base dos Dados é a especialista que ajuda você ou sua equipe a trabalhar e extrair o máximo de valor dos dados. + + Vamos fazer um projeto juntos + ) } @@ -553,9 +579,33 @@ export default function Services() { - - + + Vamos fazer um projeto juntos + + ) } From c2628789e24938f4bc75506865c5696db76142b0 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Fri, 19 Jul 2024 16:39:23 -0300 Subject: [PATCH 56/66] feat: ajust page dataset and GA trigger --- .../molecules/DataInformationQuery.js | 627 +++++++++--------- 1 file changed, 331 insertions(+), 296 deletions(-) diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index 0dcbf1d6..49714df3 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -9,7 +9,8 @@ import { Box, useClipboard, Tooltip, - Skeleton + Skeleton, + Stack } from "@chakra-ui/react"; import { useState, useEffect, useRef } from "react"; import hljs from "highlight.js/lib/core"; @@ -166,6 +167,7 @@ export function CodeHighlight({ language, children }) { } export default function DataInformationQuery({ resource }) { + const [tabAccessIndex, setTabAccessIndex] = useState(0) const [tabIndex, setTabIndex] = useState(0) const [downloadNotAllowed, setDownloadNotAllowed] = useState(false) const [checkedColumns, setCheckedColumns] = useState([]) @@ -223,10 +225,13 @@ export default function DataInformationQuery({ resource }) { useEffect(() => { if(hasLoadingResponse === true) { SqlCodeString() - scrollFocus() } }, [hasLoadingResponse]) + useEffect(() => { + if(sqlCode !== "") scrollFocus() + }, [sqlCode]) + function scrollFocus() { let idTab @@ -255,8 +260,14 @@ export default function DataInformationQuery({ resource }) { setIsLoadingCode(false) } - const handleIndexes = (index) => { - const categoryValues = ["SQL", "Python", "R", "Stata", "Download"] + const handleAccessIndexes = (index) => { + const categoryValues = ["BigQuery e Pacotes", "Download"] + setTabAccessIndex(index) + triggerGAEvent("category_click", categoryValues[index]) + } + + const handleCategoryIndexes = (index) => { + const categoryValues = ["SQL", "Python", "R"] setTabIndex(index) triggerGAEvent("category_click", categoryValues[index]) } @@ -281,8 +292,8 @@ export default function DataInformationQuery({ resource }) { width="100%" variant="unstyled" isLazy - onChange={(index) => handleIndexes(index)} - index={tabIndex} + onChange={(index) => handleAccessIndexes(index)} + index={tabAccessIndex} overflow="hidden" > - SQL - Python - R - {/* Stata */} + BigQuery e Pacotes Download @@ -333,12 +341,12 @@ export default function DataInformationQuery({ resource }) { numberColumns={setNumberColumns} hasLoading={hasLoadingColumns} setHasLoading={setHasLoadingColumns} - template={tabIndex === 3 ? "download" : "checks"} + template={tabAccessIndex === 1 ? "download" : "checks"} columnsPro={setColumnsTranslationPro} /> 0 && resource.uncompressedFileSize && resource.uncompressedFileSize/(1024 * 1024 * 1024) > 5 && } - {columnsTranslationPro.length > 0 && tabIndex !== 3 && + {columnsTranslationPro.length > 0 && tabAccessIndex !== 1 && - - - - - No editor de consultas do BigQuery, digite a seguinte instrução: - - - - - - Primeira vez usando o BigQuery? - - Siga o passo a passo. - - - - - - - - - Acessar o BigQuery - - - - - - - - {sqlCode} - - - - - - - - No terminal do Python, digite a seguinte instrução: - - - - - - Primeira vez usando o pacote Python? - - Siga o passo a passo. - - - - - - {`import basedosdados as bd - -billing_id = - -query = """ - ${sqlCode} -""" - -bd.read_sql(query = query, billing_project_id = billing_id)`} - - - - - - - - No terminal do R, digite a seguinte instrução: - - - - - - Primeira vez usando o pacote R? - - Siga o passo a passo. - - - - - - {` -# Defina o seu projeto no Google Cloud -set_billing_id("") - -# Para carregar o dado direto no R -query <- " -${sqlCode} -" - -read_sql(query, billing_project_id = get_billing_id()) -`} - - - - - {/* - Criamos um pacote em Stata para você acessar o datalake. Basta rodar o código: - Criamos um pacote em Stata para você acessar o datalake. Basta rodar o código: - - Criamos um pacote em Stata para você acessar o datalake. Basta rodar o código: - - - - {`net install basedosdados, from("https://raw.githubusercontent.com/basedosdados/mais/master/stata-package") - - bd_read_table, /// - path("") /// - dataset_id("${gcpDatasetID}") /// - table_id("${gcpTableId}") /// - billing_project_id("")`} - - */} - - + { triggerGAEvent("download_da_tabela",` + { + gcp: ${gcpProjectID+"."+gcpDatasetID+"."+gcpTableId}, + tamanho: ${formatBytes(resource.uncompressedFileSize) || ""}, + dataset: ${resource?.dataset?._id}, + table: ${resource?._id}, + }` + ) }} target="_blank" display="flex" alignItems="center" @@ -838,8 +583,298 @@ read_sql(query, billing_project_id = get_billing_id()) /> Download da tabela {downloadNotAllowed && `(${formatBytes(resource.uncompressedFileSize)})`} - - + + + + + handleCategoryIndexes(index)} + index={tabIndex} + overflow="hidden" + > + + SQL + Python + R + + + + + + + + No editor de consultas do BigQuery, digite a seguinte instrução: + + + + + + Primeira vez usando o BigQuery? + + Siga o passo a passo. + + + + + + + + + Acessar o BigQuery + + + + + + + + {sqlCode} + + + + + + + + No terminal do Python, digite a seguinte instrução: + + + + + + Primeira vez usando o pacote Python? + + Siga o passo a passo. + + + + + + {`import basedosdados as bd + + billing_id = + + query = """ + ${sqlCode} + """ + + bd.read_sql(query = query, billing_project_id = billing_id)`} + + + + + + + + No terminal do R, digite a seguinte instrução: + + + + + + Primeira vez usando o pacote R? + + Siga o passo a passo. + + + + + + {` + # Defina o seu projeto no Google Cloud + set_billing_id("") + + # Para carregar o dado direto no R + query <- " + ${sqlCode} + " + + read_sql(query, billing_project_id = get_billing_id()) + `} + + + + + + + From 2165feec0074e4fa787a310816ffd2ea99984cde Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Mon, 22 Jul 2024 13:17:00 -0300 Subject: [PATCH 57/66] feat: ajust visual in input and tabs --- next/components/atoms/ControlledInput.js | 1 - next/components/molecules/DataInformationQuery.js | 9 ++++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/next/components/atoms/ControlledInput.js b/next/components/atoms/ControlledInput.js index d29d5957..053e436c 100644 --- a/next/components/atoms/ControlledInput.js +++ b/next/components/atoms/ControlledInput.js @@ -169,7 +169,6 @@ export function ControlledInputSimple({ onBlur={() => changeInputFocus(false)} autoComplete="off" variant="outline" - letterSpacing="0.5px" border="2px solid transparent !important" color="#464A51" _hover={{ diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index 49714df3..8476abb7 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -92,9 +92,11 @@ export function CodeHighlight({ language, children }) { BigQuery e Pacotes Download @@ -518,6 +520,7 @@ export default function DataInformationQuery({ resource }) { id="download_table" display={!hasLoadingColumns ? "flex" : "none"} flexDirection="column" + width="100%" gap="16px" marginTop="16px" padding={0} @@ -605,7 +608,7 @@ export default function DataInformationQuery({ resource }) { SQL Python From d9c1bfa1c41ccc8bb6be53b0293406cd85ac50db Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Mon, 22 Jul 2024 17:00:52 -0300 Subject: [PATCH 58/66] feat: Ajust of hover and styles --- next/components/atoms/ControlledInput.js | 11 ++----- next/components/atoms/FilterAccordion.js | 7 ++-- next/components/atoms/GreenTab.js | 4 +-- next/components/atoms/HelpWidget.js | 2 +- next/components/atoms/LinkDash.js | 21 ------------ next/components/atoms/ReadMore.js | 4 +-- next/components/molecules/ColumnsTable.js | 9 +++--- .../molecules/DataInformationQuery.js | 32 +++++++++---------- next/components/molecules/Footer.js | 6 ++-- next/components/molecules/Menu.js | 24 +++++++------- next/components/molecules/MenuDropdown.js | 2 +- .../molecules/TemporalCoverageDisplay.js | 4 +-- next/components/organisms/BdmTablePage.js | 15 +++++---- next/components/organisms/Database.js | 14 ++++---- next/components/organisms/DatasetResource.js | 1 - .../organisms/InformationRequestPage.js | 4 +-- .../organisms/RawDataSourcesPage.js | 2 +- next/pages/dataset/index.js | 6 ++-- next/pages/servicos.js | 4 +-- next/public/img/icons/settingsIcon.js | 4 +-- next/public/img/icons/signOutIcon.js | 4 +-- next/styles/toggle.module.css | 16 ++++++++++ 22 files changed, 91 insertions(+), 105 deletions(-) delete mode 100644 next/components/atoms/LinkDash.js diff --git a/next/components/atoms/ControlledInput.js b/next/components/atoms/ControlledInput.js index 053e436c..f6e508cf 100644 --- a/next/components/atoms/ControlledInput.js +++ b/next/components/atoms/ControlledInput.js @@ -130,7 +130,6 @@ export function ControlledInputSimple({ inputStyle, inputElementStyle, fill, - fillHover, ...props }) { async function checkForEnter(e) { @@ -146,9 +145,6 @@ export function ControlledInputSimple({ alignSelf="center" justifyContent="center" fill={fill} - _hover={{ - fill: inputFocus ? fill : fillHover - }} {...props} > diff --git a/next/components/atoms/FilterAccordion.js b/next/components/atoms/FilterAccordion.js index 26594e59..413643df 100644 --- a/next/components/atoms/FilterAccordion.js +++ b/next/components/atoms/FilterAccordion.js @@ -34,7 +34,7 @@ export function BaseFilterAccordion({ @@ -49,7 +49,7 @@ export function BaseFilterAccordion({ fontFamily="Roboto" fontWeight="500" fontSize="16px" - color="#464A51" + color="#252A32" > {fieldName} @@ -132,7 +132,6 @@ export function CheckboxFilterAccordion({ changeInputFocus={setInputFocus} placeholder="Pesquisar" fill="#464A51" - fillHover="#878A8E" icon={ diff --git a/next/components/atoms/GreenTab.js b/next/components/atoms/GreenTab.js index b929d7ce..1c5bf8d3 100644 --- a/next/components/atoms/GreenTab.js +++ b/next/components/atoms/GreenTab.js @@ -20,8 +20,8 @@ export default function GreenTab({ children, ...style }) { borderBottom: "3px solid #2B8C4D" }} _hover={{ - color: "#9D9FA3", - fill: "#9D9FA3" + color: "#464A51", + fill: "#464A51" }} {...style} > diff --git a/next/components/atoms/HelpWidget.js b/next/components/atoms/HelpWidget.js index 8c494b97..2481a353 100644 --- a/next/components/atoms/HelpWidget.js +++ b/next/components/atoms/HelpWidget.js @@ -23,7 +23,7 @@ export default function HelpWidget({options, tooltip}) { backgroundColor="#FFF" padding="0 16px 10px" _focus={{backgroundColor: "transparent"}} - _hover={{backgroundColor: "transparent", opacity: "0.6"}} + _hover={{backgroundColor: "transparent", opacity: "0.7"}} onClick={() => window.open(option.url, "_blank")} > {option.name} diff --git a/next/components/atoms/LinkDash.js b/next/components/atoms/LinkDash.js deleted file mode 100644 index 960515ae..00000000 --- a/next/components/atoms/LinkDash.js +++ /dev/null @@ -1,21 +0,0 @@ -import { Link } from "@chakra-ui/react"; - -export default function LinkDash({ children, href, dash = true, ...style }) { - return ( - - {children} {dash ? ">>" : null} - - ) -} diff --git a/next/components/atoms/ReadMore.js b/next/components/atoms/ReadMore.js index c4c40187..bff6393f 100644 --- a/next/components/atoms/ReadMore.js +++ b/next/components/atoms/ReadMore.js @@ -24,7 +24,7 @@ export default function ReadMore({ children, id, ...props}) { background-color: #FFF; margin-left: 4px; " - onmouseover="this.style.color='rgba(0, 104, 197, 0.8)'" + onmouseover="this.style.color='#0057A4'" onmouseout="this.style.color='#0068C5'" >Ler menos` @@ -74,7 +74,7 @@ export default function ReadMore({ children, id, ...props}) { display={isReadMore ? "none" : "flex"} onClick={toggleReadMore} cursor="pointer" - _hover={{color: "rgba(0, 104, 197, 0.8)"}} + _hover={{color: "#0057A4"}} color="#0068C5" fontFamily="Roboto" fontSize="14px" diff --git a/next/components/molecules/ColumnsTable.js b/next/components/molecules/ColumnsTable.js index 657819be..186cf785 100644 --- a/next/components/molecules/ColumnsTable.js +++ b/next/components/molecules/ColumnsTable.js @@ -70,7 +70,6 @@ function SearchColumn({ isLoaded, resource, columns }) { changeInputFocus={setInputFocus} placeholder="Pesquisar colunas" fill="#464A51" - fillHover="#878A8E" height="48px" maxWidth="100%" width="100%" @@ -234,8 +233,8 @@ export default function ColumnsTable({ color="#0068C5" fill="#0068C5" _hover={{ - color:"#4F9ADC", - fill:"#4F9ADC" + color:"#0057A4", + fill:"#0057A4" }} > Acessar tabela que faz a tradução desta coluna @@ -267,8 +266,8 @@ export default function ColumnsTable({ color="#0068C5" fill="#0068C5" _hover={{ - color:"#4F9ADC", - fill:"#4F9ADC" + color:"#0057A4", + fill:"#0057A4" }} > Baixar tabela que faz a tradução desta coluna diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index 8476abb7..e58f420e 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -106,8 +106,8 @@ export function CodeHighlight({ language, children }) { color="#878A8E" fill="#878A8E" _hover={{ - fill:"#71757A", - color:"#71757A", + fill:"#9D9FA3", + color:"#9D9FA3", }} > {hasCopied ? "Copiado" : "Copiar"} @@ -140,11 +140,11 @@ export function CodeHighlight({ language, children }) { padding="12px 16px" borderTop="1px solid #464A51" onClick={() => setIsExpanded(!isExpanded)} - fill="#71757A" - color="#71757A" + fill="#878A8E" + color="#878A8E" _hover={{ - fill:"#878A8E", - color:"#878A8E" + fill:"#9D9FA3", + color:"#9D9FA3" }} > Essa tabela possui códigos institucionais que variam entre anos. Por isso, ainda estamos trabalhando para automatizar o processo de tradução. - Por enquanto, recomendamos acessar o dicionário e os diretórios para entender como traduzir os códigos presentes na tabela. + Por enquanto, recomendamos acessar o dicionário e os diretórios para entender como traduzir os códigos presentes na tabela. @@ -438,7 +438,7 @@ export default function DataInformationQuery({ resource }) { - Essa tabela completa, com todas as colunas, tem {formatBytes(resource.uncompressedFileSize)}. Cuidado para não ultrapassar o limite de processamento gratuito do BigQuery. + Essa tabela completa, com todas as colunas, tem {formatBytes(resource.uncompressedFileSize)}. Cuidado para não ultrapassar o limite de processamento gratuito do BigQuery. {numberColumns === checkedColumns.length && "Para otimizar a consulta, você pode selecionar menos colunas ou adicionar filtros no BigQuery."} @@ -449,7 +449,7 @@ export default function DataInformationQuery({ resource }) { display={isUserPro() ? "none" : "flex"} type="info" > - A tabela de tradução da{columnsTranslationPro.length > 1 && "s"} coluna{columnsTranslationPro.length > 1 && "s"} {columnsTranslationPro.map((elm) => elm?.node?.name).join(", ")} é exclusiva para assinantes. Todos os demais códigos institucionais são de acesso aberto. + A tabela de tradução da{columnsTranslationPro.length > 1 && "s"} coluna{columnsTranslationPro.length > 1 && "s"} {columnsTranslationPro.map((elm) => elm?.node?.name).join(", ")} é exclusiva para assinantes. Todos os demais códigos institucionais são de acesso aberto. } @@ -503,7 +503,7 @@ export default function DataInformationQuery({ resource }) { gap="8px" lineHeight="20px" _hover={{ - backgroundColor:"#80BA94" + backgroundColor:"#22703E" }} > Gerar consulta @@ -536,7 +536,7 @@ export default function DataInformationQuery({ resource }) { target="_blank" href="https://basedosdados.github.io/mais/colab_data/" color="#0068C5" - _hover={{color: "#4F9ADC"}} + _hover={{color: "#0057A4"}} > saiba como contribuir com seu tempo. @@ -577,7 +577,7 @@ export default function DataInformationQuery({ resource }) { lineHeight="20px" pointerEvents={downloadNotAllowed ? "default" : "none"} _hover={{ - backgroundColor: "#80BA94" + backgroundColor: "#22703E" }} > Siga o passo a passo. @@ -701,7 +701,7 @@ export default function DataInformationQuery({ resource }) { cursor="pointer" color="#2B8C4D" _hover={{ - color:"#80BA94" + color:"#22703E" }} > Siga o passo a passo. @@ -844,7 +844,7 @@ export default function DataInformationQuery({ resource }) { target="_blank" href="https://basedosdados.github.io/mais/api_reference_r/" color="#0068C5" - _hover={{color: "#4F9ADC"}} + _hover={{color: "#0057A4"}} > Siga o passo a passo. diff --git a/next/components/molecules/Footer.js b/next/components/molecules/Footer.js index 72ca673e..ca4600cc 100644 --- a/next/components/molecules/Footer.js +++ b/next/components/molecules/Footer.js @@ -104,13 +104,13 @@ export default function Footer({ template, ocult = false }) { ® 2024 Base dos Dados - + Termos de Uso - + Políticas de Privacidade - + Contato diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index 9ebc37d4..ae77a85b 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -182,7 +182,7 @@ function MenuDrawer({ userData, isOpen, onClose, links }) { gap="8px" lineHeight="20px" _hover={{ - backgroundColor: "rgba(13, 153, 252, 0.7)" + backgroundColor: "#0B89E2" }} > Cadastrar @@ -302,6 +302,7 @@ function MenuDrawerUser({ userData, isOpen, onClose}) { { cookies.remove('userBD', { path: '/' }) @@ -459,13 +460,13 @@ function MenuUser ({ userData, onOpen, onClose }) { window.open(`/user/${userData.username}`, "_self")} > - + { cookies.remove('userBD', { path: '/' }) cookies.remove('token', { path: '/' }) @@ -563,7 +564,6 @@ function SearchInputUser ({ user }) { changeInputFocus={setShowInput} placeholder="Pesquisar dados" fill="#464A51" - fillHover="#878A8E" icon={ { setShowInput(true) setTimeout(() => { @@ -605,7 +604,6 @@ function SearchInputUser ({ user }) { changeInputFocus={setInputFocus} placeholder="Pesquisar dados" fill="#464A51" - fillHover="#878A8E" icon={ Cadastrar diff --git a/next/components/molecules/MenuDropdown.js b/next/components/molecules/MenuDropdown.js index b54099fd..1d6ee498 100644 --- a/next/components/molecules/MenuDropdown.js +++ b/next/components/molecules/MenuDropdown.js @@ -33,7 +33,7 @@ export default function MenuDropdown({ title, children, ...style }) { {window.open(href)} } } @@ -459,8 +462,8 @@ export default function BdmTablePage({ id }) { pointerEvents={resource?.cloudTables ? "default" : "none"} fill="#0068C5" _hover={{ - color:"#4F9ADC", - fill:"#4F9ADC" + color:"#0057A4", + fill:"#0057A4" }} > {!resource?.cloudTables ? @@ -567,8 +570,8 @@ export default function BdmTablePage({ id }) { color="#0068C5" fill="#0068C5" _hover={{ - fill: "#4F9ADC", - color: "#4F9ADC" + fill: "#0057A4", + color: "#0057A4" }} href={resource.auxiliaryFilesUrl} > @@ -620,8 +623,8 @@ export default function BdmTablePage({ id }) { color="#0068C5" fill="#0068C5" _hover={{ - fill: "#4F9ADC", - color: "#4F9ADC" + fill: "#0057A4", + color: "#0057A4" }} href={`/dataset/${resource.rawDataSource[0].dataset._id}?raw_data_source=${resource.rawDataSource[0]._id}`} > diff --git a/next/components/organisms/Database.js b/next/components/organisms/Database.js index 5d5dc765..a661d5dc 100644 --- a/next/components/organisms/Database.js +++ b/next/components/organisms/Database.js @@ -42,8 +42,8 @@ export default function Database({ fontSize="14px" lineHeight="20px" _hover={{ - color: "#4F9ADC", - fill: "#4F9ADC" + color: "#0057A4", + fill: "#0057A4" }} href={tablesNumber > 0 ? `/dataset/${id}?table=${tables.id}` : ""} > @@ -82,8 +82,8 @@ export default function Database({ fontSize="14px" lineHeight="20px" _hover={{ - color: "#4F9ADC", - fill: "#4F9ADC" + color: "#0057A4", + fill: "#0057A4" }} href={rawDataSourcesNumber > 0 ? `/dataset/${id}?raw_data_source=${rawDataSources.id}` : ""} > @@ -122,8 +122,8 @@ export default function Database({ fontSize="14px" lineHeight="20px" _hover={{ - color: "#4F9ADC", - fill: "#4F9ADC" + color: "#0057A4", + fill: "#0057A4" }} href={informationRequestsNumber > 0 ? `/dataset/${id}?information_request=${informationRequests.id}` : ""} > @@ -239,7 +239,7 @@ export default function Database({ lineHeight="20px" color="#71757A" _hover={{ - opacity: 0.7 + color: "#464A51" }} textOverflow="ellipsis" href={`/dataset?organization=${organization?.slug}`} diff --git a/next/components/organisms/DatasetResource.js b/next/components/organisms/DatasetResource.js index bc30aeaf..41636ad2 100644 --- a/next/components/organisms/DatasetResource.js +++ b/next/components/organisms/DatasetResource.js @@ -130,7 +130,6 @@ export default function DatasetResource({ backgroundColor={elm._id === value && "#F7F7F7"} _hover={{ backgroundColor:elm._id === value ? "#F7F7F7" :"#EEEEEE", - color: elm._id === value ? "#2B8C4D" : "#9D9FA3" }} borderRadius="8px" padding="6px 8px" diff --git a/next/components/organisms/InformationRequestPage.js b/next/components/organisms/InformationRequestPage.js index f88022d4..ad04a34e 100644 --- a/next/components/organisms/InformationRequestPage.js +++ b/next/components/organisms/InformationRequestPage.js @@ -164,7 +164,7 @@ export default function InformationRequestPage({ id }) { gap="8px" lineHeight="20px" _hover={{ - backgroundColor: resource?.dataUrl ? "#80BA94" : "#ACAEB1" + backgroundColor: resource?.dataUrl ? "#22703E" : "#ACAEB1" }} > Acessar dados @@ -194,7 +194,7 @@ export default function InformationRequestPage({ id }) { gap="8px" lineHeight="20px" _hover={{ - backgroundColor: resource?.url ? "#80BA94" : "#ACAEB1" + backgroundColor: resource?.url ? "#22703E" : "#ACAEB1" }} > Acessar pedido diff --git a/next/components/organisms/RawDataSourcesPage.js b/next/components/organisms/RawDataSourcesPage.js index 61b47d36..aa8545c4 100644 --- a/next/components/organisms/RawDataSourcesPage.js +++ b/next/components/organisms/RawDataSourcesPage.js @@ -245,7 +245,7 @@ export default function RawDataSourcesPage({ id }) { gap="8px" lineHeight="20px" _hover={{ - backgroundColor: resource?.url ? "#80BA94" : "#ACAEB1" + backgroundColor: resource?.url ? "#22703E" : "#ACAEB1" }} > Acessar fonte original diff --git a/next/pages/dataset/index.js b/next/pages/dataset/index.js index 19e3af51..8ecbdcaa 100644 --- a/next/pages/dataset/index.js +++ b/next/pages/dataset/index.js @@ -238,7 +238,7 @@ export default function SearchDatasetPage() { gap="8px" lineHeight="20px" _hover={{ - backgroundColor: "#80BA94" + backgroundColor: "#22703E" }} > Fazer uma proposta @@ -263,7 +263,7 @@ export default function SearchDatasetPage() { gap="8px" lineHeight="20px" _hover={{ - opacity: 0.7 + color: "#22703E" }} > Ver roadmap de dados @@ -349,7 +349,7 @@ export default function SearchDatasetPage() { lineHeight="20px" color="#0068C5" _hover={{ - color: "#4F9ADC" + color: "#0057A4" }} > Limpar filtros diff --git a/next/pages/servicos.js b/next/pages/servicos.js index fc525f60..ed7c6aab 100644 --- a/next/pages/servicos.js +++ b/next/pages/servicos.js @@ -121,7 +121,7 @@ function Slogan () { letterSpacing="0.1px" marginTop="24px !important" _hover={{ - backgroundColor: "rgba(13, 153, 252, 0.7)" + backgroundColor: "#0B89E2" }} > Vamos fazer um projeto juntos @@ -600,7 +600,7 @@ export default function Services() { letterSpacing="0.1px" marginTop="24px !important" _hover={{ - backgroundColor: "rgba(13, 153, 252, 0.7)" + backgroundColor: "#0B89E2" }} > Vamos fazer um projeto juntos diff --git a/next/public/img/icons/settingsIcon.js b/next/public/img/icons/settingsIcon.js index c5345385..44144b95 100644 --- a/next/public/img/icons/settingsIcon.js +++ b/next/public/img/icons/settingsIcon.js @@ -2,11 +2,11 @@ import { createIcon } from '@chakra-ui/icons'; const SettingsIcon = createIcon({ displayName: "settings", - viewBox: "0 0 22 22", + viewBox: "0 0 40 40", path: ( ) }) diff --git a/next/public/img/icons/signOutIcon.js b/next/public/img/icons/signOutIcon.js index a7a5f601..e1b1e0cd 100644 --- a/next/public/img/icons/signOutIcon.js +++ b/next/public/img/icons/signOutIcon.js @@ -2,11 +2,11 @@ import { createIcon } from '@chakra-ui/icons'; const SignOutIcon = createIcon({ displayName: "signOut", - viewBox: "0 0 16 16", + viewBox: "0 0 40 40", path: ( ) }) diff --git a/next/styles/toggle.module.css b/next/styles/toggle.module.css index a032c938..79a21267 100644 --- a/next/styles/toggle.module.css +++ b/next/styles/toggle.module.css @@ -36,3 +36,19 @@ width: 21px; height: 21px; } + +.toggle span:hover { + background-color: #71757A; +} + +.toggle span span:hover { + background-color: #FFF; +} + +.toggle span[data-checked]:hover { + background-color: #22703E; +} + +.toggle span[data-checked] span:hover { + background-color: #FFF; +} \ No newline at end of file From 28f87bf6a23e108cde818e839f58ffeb83385c42 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Tue, 23 Jul 2024 18:09:21 -0300 Subject: [PATCH 59/66] feat: ajust text in download section dataset --- next/components/molecules/DataInformationQuery.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index e58f420e..8d04397e 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -332,7 +332,7 @@ export default function DataInformationQuery({ resource }) { fontSize="14px" color="#252A32" > - Selecione as colunas que você deseja acessar: + {tabAccessIndex === 0 ? "Selecione as colunas que você deseja acessar:" : "Confira as colunas da tabela:"} @@ -486,7 +486,6 @@ export default function DataInformationQuery({ resource }) { triggerGAEvent("gerar_consulta_click", queryLanguage()) setHasLoadingResponse(true) }} - target="_blank" display="flex" alignItems="center" height="40px" From a806f50843811ac4d75716baf25e996762ea4c3b Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Tue, 23 Jul 2024 21:09:29 -0300 Subject: [PATCH 60/66] feat: Survey for user login --- next/components/atoms/Button.js | 33 +++ next/pages/api/user/getUser.js | 1 + next/pages/api/user/updateProfileSurvey.js | 82 +++++++ next/pages/user/login.js | 2 + next/pages/user/survey.js | 241 +++++++++++++++++++++ next/styles/themeBD.js | 14 +- 6 files changed, 371 insertions(+), 2 deletions(-) create mode 100644 next/components/atoms/Button.js create mode 100644 next/pages/api/user/updateProfileSurvey.js create mode 100644 next/pages/user/survey.js diff --git a/next/components/atoms/Button.js b/next/components/atoms/Button.js new file mode 100644 index 00000000..cef1264c --- /dev/null +++ b/next/components/atoms/Button.js @@ -0,0 +1,33 @@ +import { + Box, +} from "@chakra-ui/react"; + +export default function Button({ children, onClick, ...props }) { + return ( + + {children} + + ) +} \ No newline at end of file diff --git a/next/pages/api/user/getUser.js b/next/pages/api/user/getUser.js index cf052abf..01e63fc0 100644 --- a/next/pages/api/user/getUser.js +++ b/next/pages/api/user/getUser.js @@ -33,6 +33,7 @@ async function getUser(id, token) { proSubscriptionRole proSubscriptionSlots proSubscriptionStatus + availableForResearch } } } diff --git a/next/pages/api/user/updateProfileSurvey.js b/next/pages/api/user/updateProfileSurvey.js new file mode 100644 index 00000000..a81bbc91 --- /dev/null +++ b/next/pages/api/user/updateProfileSurvey.js @@ -0,0 +1,82 @@ +import axios from "axios"; + +const API_URL= `${process.env.NEXT_PUBLIC_API_URL}/api/v1/graphql` + +async function updateProfileSurvey({ + id, + workArea, + workRole, + availableForResearch +}, token, skip +) { + const query = skip === "true" ? + ` + mutation { + CreateUpdateAccount (input: + { + id: "${id}" + availableForResearch: "NO" + workArea: null + workRole: null + } + ) + { + errors { + field, + messages + } + } + }` + : + ` + mutation { + CreateUpdateAccount (input: + { + id: "${id}" + workArea: "${workArea}" + workRole: "${workRole}" + availableForResearch: "${availableForResearch}" + } + ) + { + errors { + field, + messages + } + } + }` + + try { + const res = await axios({ + url: API_URL, + method: "POST", + headers: { + Authorization: `Bearer ${token}` + }, + data: { + query: query + } + }) + + const data = res?.data?.data?.CreateUpdateAccount + return data + } catch (error) { + console.error(error) + } +} + +export default async function handler(req, res) { + const token = req.cookies.token + + const { p, f, l, e, s} = req.query + + const object = { + id:atob(p), + workArea:atob(f), + workRole:atob(l), + availableForResearch:atob(e), + } + + const result = await updateProfileSurvey(object, token, s) + res.status(200).json(result) +} diff --git a/next/pages/user/login.js b/next/pages/user/login.js index ab246880..032585b2 100644 --- a/next/pages/user/login.js +++ b/next/pages/user/login.js @@ -80,10 +80,12 @@ export default function Login() { if(userData.error) return setErrors({login:"Não foi possível conectar ao servidor. Tente novamente mais tarde."}) cookies.set('userBD', JSON.stringify(userData)) + if(query.p === "plans") { if(query.q) return window.open(`/user/${userData.username}?plans_and_payment&q=${query.q}`, "_self") return window.open(`/user/${userData.username}?plans_and_payment&p=plans`, "_self") } else { + if(userData.availableForResearch === null) return window.open("/user/survey", "_self") return window.open("/", "_self") } } diff --git a/next/pages/user/survey.js b/next/pages/user/survey.js new file mode 100644 index 00000000..0933444f --- /dev/null +++ b/next/pages/user/survey.js @@ -0,0 +1,241 @@ +import { + Box, + Stack, + Text, + Progress, + Spinner +} from "@chakra-ui/react"; +import { useState } from "react"; +import cookies from 'js-cookie'; + +import Button from "../../components/atoms/Button"; +import { MainPageTemplate } from "../../components/templates/main"; + +import Exclamation from "../../public/img/icons/exclamationIcon"; + +import { withPages } from "../../hooks/pages.hook"; + +export async function getStaticProps() { + return await withPages() +} + +export default function Survey() { + const [err, setErr] = useState("") + const [index, setIndex] = useState(0) + const [stageOne, setStageOne] = useState([]) + const [stageTwo, setStageTwo] = useState([]) + const [stageThree, setStageThree] = useState([]) + const [isLoading, setIsLoading] = useState(false) + + async function fetchUpdateProfileSurvey(skip) { + setIsLoading(true) + const id = JSON.parse(cookies.get("userBD")).id.replace(new RegExp('\\bAccountNode:\\b', 'gi'), '') + const result = await fetch(`/api/user/updateProfileSurvey?p=${btoa(id)}&f=${btoa(stageOne[0] || "")}&l=${btoa(stageTwo[0] || "")}&e=${btoa(stageThree[0] || "")}&s=${skip}`, { method: "GET" }) + .then(res => res.json()) + + if(result.errors.length > 0) { + result.errors.map((elm) => { + console.error(`Campo ${elm.field}: ${elm.messages}`) + }) + setIsLoading(false) + } + + const userData = await fetch(`/api/user/getUser?p=${btoa(id)}`, { method: "GET" }) + .then(res => res.json()) + cookies.set('userBD', JSON.stringify(userData)) + window.open("/", "_self") + } + + const question = [ + { + question: "Em que área você atua?", + options: [ + ["Tecnologia", "TECNOLOGIA"], + ["Saúde", "SAUDE"], + ["Financeiro", "FINANCEIRO"], + ["Educação", "EDUCACAO"], + ["Varejo", "VAREJO"], + ["Energia", "ENERGIA"], + ["Jornalismo", "JORNALISMO"], + ["Outra", "OUTRA"] + ], + buttons: [{ text: "Pular", style: "clean",function: async () => fetchUpdateProfileSurvey("true")}, + {text: "Continuar", function: () => { + if(stageOne.length === 0) return setErr("Por favor, selecione uma das opções abaixo.") + setErr("") + setIndex(1) + }}], + stage: setStageOne + }, + { + question: "Qual o seu cargo?", + options: [ + ["CEO/Diretor(a)", "CEO_DIRETOR"], + ["Gerente", "GERENTE"], + ["Coordenador(a)", "COORDENADOR"], + ["Analista", "ANALISTA"], + ["Consultor(a)", "CONSULTOR"], + ["Especialista", "ESPECIALISTA"], + ["Assistente", "ASSISTENTE"], + ["Estagiário(a)", "ESTAGIARIO"], + ["Estudante", "ESTUDANTE"], + ["Professor(a)/Pesquisador(a)", "PROFESSOR_PESQUISADOR"], + ["Freelancer", "FREELANCER"], + ["Empreendedor(a)", "EMPREENDEDOR"], + ["Outro", "OUTRO"] + ], + buttons: [{text: "Voltar", function: () => setIndex(0), style: "clean"}, {text: "Continuar", function: () => { + if(stageTwo.length === 0) return setErr("Por favor, selecione uma das opções abaixo.") + setErr("") + setIndex(2) + }}], + stage: setStageTwo + }, + { + question: "Estamos sempre buscando aprimorar a plataforma e consideramos fundamental ouvir a nossa comunidade nesse processo. Podemos contatar você para futuras pesquisas?", + options: [["Sim", "YES"], ["Não", "NO"]], + buttons: [{text: "Voltar", function: () => setIndex(1), style: "clean"}, {text: "Enviar", function: () => { + if(stageThree.length === 0) return setErr("Por favor, selecione uma das opções abaixo.") + setErr("") + fetchUpdateProfileSurvey("false") + }}], + stage: setStageThree + } + ] + + const selectedValueStage = (elm) => { + if(index === 0) return stageOne.includes(elm) + if(index === 1) return stageTwo.includes(elm) + if(index === 2) return stageThree.includes(elm) + } + + const progressValue = () => { + const value = [20, 60, 100] + return value[index] + } + + function handleSelected(value, setStage) { + setStage((stage) => { + if (stage.includes(value)) { + return [] + } else { + return [value] + } + }) + } + + return ( + + + {question[index].question} + + {err} + + + {question[index].options.map((elm, i) => + handleSelected(elm[1], question[index].stage)} + pointerEvents={isLoading ? "none" : "default"} + borderRadius="16px" + cursor="pointer" + border={selectedValueStage(elm[1]) ? "2px solid #42B0FF" : "1px solid #DEDFE0"} + backgroundColor={selectedValueStage(elm[1]) ? "#CFEBFE" : "#FFF"} + width="fit-content" + padding={selectedValueStage(elm[1]) ? "11px" : "12px"} + fontFamily="Roboto" + fontWeight="500" + fontSize="18px" + lineHeight="28px" + color="#464A51" + > + {elm[0]} + + )} + + + + + + + {question[index].buttons.map((elm, i) => + + )} + + + + + ) +} diff --git a/next/styles/themeBD.js b/next/styles/themeBD.js index 3faa2431..c83d5145 100644 --- a/next/styles/themeBD.js +++ b/next/styles/themeBD.js @@ -3,8 +3,18 @@ import { extendTheme } from "@chakra-ui/react"; const themeBD = extendTheme({ colors: { "greenBD.500": "#2B8C4D", - "yellowPro.500" : "#9C8400" - } + "yellowPro.500" : "#9C8400", + "blueBD.500": "#0D99FC" + }, + components: { + Progress: { + baseStyle: { + filledTrack: { + bg: "blueBD.500", + }, + }, + }, + }, }) export default themeBD From c5b12a57746f4bc48808b4410e03e39b5f7ae46f Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Wed, 24 Jul 2024 16:12:11 -0300 Subject: [PATCH 61/66] fix: ajust tables select in dataset page style --- next/components/organisms/BdmTablePage.js | 1 - next/components/organisms/DatasetResource.js | 9 ++++++--- next/pages/dataset/[dataset].js | 2 +- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/next/components/organisms/BdmTablePage.js b/next/components/organisms/BdmTablePage.js index 2e7a32b3..04fcef49 100644 --- a/next/components/organisms/BdmTablePage.js +++ b/next/components/organisms/BdmTablePage.js @@ -215,7 +215,6 @@ export default function BdmTablePage({ id }) { + Date: Wed, 24 Jul 2024 17:36:19 -0300 Subject: [PATCH 62/66] feat: add trigger GA in survey page --- next/pages/api/user/updateProfileSurvey.js | 5 +++++ next/pages/user/survey.js | 7 ++++--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/next/pages/api/user/updateProfileSurvey.js b/next/pages/api/user/updateProfileSurvey.js index a81bbc91..3a74b8d9 100644 --- a/next/pages/api/user/updateProfileSurvey.js +++ b/next/pages/api/user/updateProfileSurvey.js @@ -62,6 +62,7 @@ async function updateProfileSurvey({ return data } catch (error) { console.error(error) + return "err" } } @@ -78,5 +79,9 @@ export default async function handler(req, res) { } const result = await updateProfileSurvey(object, token, s) + + if(result === null) return res.status(500).json({errors: "err"}) + if(result.errors.length > 0) return res.status(500).json({errors: result.errors}) + if(result === "err") return res.status(500).json({errors: "err"}) res.status(200).json(result) } diff --git a/next/pages/user/survey.js b/next/pages/user/survey.js index 0933444f..11aa98c4 100644 --- a/next/pages/user/survey.js +++ b/next/pages/user/survey.js @@ -10,6 +10,7 @@ import cookies from 'js-cookie'; import Button from "../../components/atoms/Button"; import { MainPageTemplate } from "../../components/templates/main"; +import { triggerGAEvent } from "../../utils"; import Exclamation from "../../public/img/icons/exclamationIcon"; @@ -34,15 +35,15 @@ export default function Survey() { .then(res => res.json()) if(result.errors.length > 0) { - result.errors.map((elm) => { - console.error(`Campo ${elm.field}: ${elm.messages}`) - }) + setErr("Ocorreu um erro interno no servidor. Por favor, tente novamente mais tarde.") + console.error(result.errors) setIsLoading(false) } const userData = await fetch(`/api/user/getUser?p=${btoa(id)}`, { method: "GET" }) .then(res => res.json()) cookies.set('userBD', JSON.stringify(userData)) + triggerGAEvent("survey_login", skip === "true" ? "Skipou" : "Respondeu") window.open("/", "_self") } From 25bdbf1b0e4de0641d3d0c9553a65fff78f05182 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Mon, 5 Aug 2024 12:18:10 -0300 Subject: [PATCH 63/66] feat: clean feature download for translate table --- .../molecules/DataInformationQuery.js | 26 +-- next/components/organisms/BdmTablePage.js | 18 +- next/pages/dataset/[dataset].js | 1 + next/pages/precos.js | 193 ++++++++++-------- next/pages/user/[username].js | 16 +- next/utils.js | 2 +- 6 files changed, 146 insertions(+), 110 deletions(-) diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js index 8d04397e..73aaec93 100644 --- a/next/components/molecules/DataInformationQuery.js +++ b/next/components/molecules/DataInformationQuery.js @@ -790,13 +790,13 @@ export default function DataInformationQuery({ resource }) { > {`import basedosdados as bd - billing_id = +billing_id = - query = """ - ${sqlCode} - """ +query = """ + ${sqlCode} +""" - bd.read_sql(query = query, billing_project_id = billing_id)`} +bd.read_sql(query = query, billing_project_id = billing_id)`} @@ -860,16 +860,16 @@ export default function DataInformationQuery({ resource }) { isLoaded={!isLoadingCode} > {` - # Defina o seu projeto no Google Cloud - set_billing_id("") +# Defina o seu projeto no Google Cloud +set_billing_id("") - # Para carregar o dado direto no R - query <- " - ${sqlCode} - " +# Para carregar o dado direto no R +query <- " +${sqlCode} +" - read_sql(query, billing_project_id = get_billing_id()) - `} +read_sql(query, billing_project_id = get_billing_id()) +`} diff --git a/next/components/organisms/BdmTablePage.js b/next/components/organisms/BdmTablePage.js index 04fcef49..d83bd530 100644 --- a/next/components/organisms/BdmTablePage.js +++ b/next/components/organisms/BdmTablePage.js @@ -390,7 +390,7 @@ export default function BdmTablePage({ id }) { : "Não informado" }: Última vez que atualizaram na fonte original - {resource?.rawDataSource?.[0]?.updates?.[0]?.entity?.slug && + {resource?.rawDataSource?.[0]?.updates?.[0]?.entity?.slug ? {getUpdateFormat(resource?.rawDataSource?.[0]?.updates?.[0]?.entity?.slug)} + : + !resource?.rawDataSource?.[0]?.updates?.[0] || !resource?.updates?.[0]?.frequency ? + + Sem previsão de atualização + + : + <> } - {title} - {badge && - {badge}} + + {title} + - {subTitle} + + {subTitle} + R$ {price} /mês {anualPlan && {(price*12).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', minimumFractionDigits: 0 })} cobrado uma vez no ano } @@ -148,14 +151,14 @@ export const CardPrice = ({ flexDirection="column" justifyContent="space-between" > - + {textResource} @@ -177,29 +180,34 @@ export const CardPrice = ({ height="24px" fill="#2B8C4D" /> - {elm.name} - + {elm.tooltip && - + } @@ -213,7 +221,7 @@ export const CardPrice = ({ gap="16px" > {button.isCurrentPlan ? - {button.text} - + : - { if(button.onClick) return button.onClick() return window.open(button.href, "_self") }} - border={button.color && `1px solid ${button.colorText}`} - {...button.styles} + display="flex" + alignItems="center" + justifyContent="center" + width="100%" + borderRadius="8px" + backgroundColor="#0D99FC" + padding="12px 16px" + cursor="pointer" + color="#FFF" + fontFamily="Roboto" + fontWeight="500" + fontSize="20px" + lineHeight="30px" + _hover={{ + backgroundColor: "#0B89E2" + }} > {button.text} - + } Leia os - Termos de Serviço + alignItems="center" + color="#0D99FC" + _hover={{ + color: "#0B89E2" + }} + >Termos de Serviço . @@ -315,15 +335,17 @@ export default function Price({ username ,isBDPro, isBDEmp }) { margin="auto" spacing={0} > - Compare os planos - + Para você descobrir o potencial da plataforma de dados} + subTitle={<>Para você descobrir o potencial da plataforma de dados} price={"0"} textResource="Recursos:" resources={[ @@ -374,25 +396,23 @@ export default function Price({ username ,isBDPro, isBDEmp }) { {name: "Acesso em nuvem"}, {name: "Acesso via SQL, Python e R"}, {name: "Integração com ferramentas BI"}, + {name: "Download direto até 100 MB", tooltip: "Esse limite não se aplica ao acesso via SQL, Python e R."}, ]} button={{ text: "Explorar recursos", href: "/dataset", - target: "_self", - color: "#FFF", - colorText: "#42B0FF" }} /> Para você ter acesso aos
    dados mais atualizados} + subTitle={<>Para você ter acesso aos
    dados mais atualizados} price={priceBDPro} anualPlan={toggleAnual} textResource="Todos os recursos da BD Grátis, mais:" resources={[ {name: "Dezenas de bases de alta frequência atualizadas"}, - {name: "Tabela de referência de empresas com informações traduzidas e atualizadas"} + {name: "Download direto até 1GB (80% das tabelas da plataforma)", tooltip: "Tabelas maiores que 5 GB não estão disponíveis para download parcial ou completo. Esse limite não se aplica ao acesso via SQL, Python e R."} ]} button={{ text: isBDPro ? "Plano atual" : `Iniciar teste grátis`, @@ -403,12 +423,13 @@ export default function Price({ username ,isBDPro, isBDEmp }) { Para sua empresa ganhar tempo
    e qualidade em decisões} + subTitle={<>Para sua empresa ganhar tempo
    e qualidade em decisões} price={priceBDEmp} anualPlan={toggleAnual} textResource="Todos os recursos da BD Pro, mais:" resources={[ - {name: "Acesso para 10 contas"},{name: "Suporte prioritário via email e Discord"} + {name: "Acesso para 10 contas"}, + {name: "Suporte prioritário via email e Discord"} ]} button={{ text: isBDEmp ? "Plano atual" : "Iniciar teste grátis", @@ -420,4 +441,4 @@ export default function Price({ username ,isBDPro, isBDEmp }) {     ) -} +} \ No newline at end of file diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js index 1f2300e1..882f009a 100644 --- a/next/pages/user/[username].js +++ b/next/pages/user/[username].js @@ -39,7 +39,6 @@ import RoundedButton from "../../components/atoms/RoundedButton"; import ButtonSimple from "../../components/atoms/SimpleButton"; import InputForm from "../../components/atoms/SimpleInput"; import Link from "../../components/atoms/Link"; -import BodyText from "../../components/atoms/BodyText"; import Toggle from "../../components/atoms/Toggle"; import { CardPrice } from "../precos"; import PaymentSystem from "../../components/organisms/PaymentSystem"; @@ -1923,7 +1922,7 @@ const PlansAndPayment = ({ userData }) => { > Para você descobrir o potencial da plataforma de dados} + subTitle={<>Para você descobrir o potencial da plataforma de dados} price={"0"} textResource="Recursos:" resources={[ @@ -1932,26 +1931,24 @@ const PlansAndPayment = ({ userData }) => { {name: "Acesso em nuvem"}, {name: "Acesso via SQL, Python e R"}, {name: "Integração com ferramentas BI"}, + {name: "Download direto até 100 MB", tooltip: "Esse limite não se aplica ao acesso via SQL, Python e R."}, ]} button={{ text: "Explorar recursos", href: "/dataset", - target: "_self", noHasModal: true, - color: "#FFF", - colorText: "#42B0FF" }} /> Para você ter acesso aos
    dados mais atualizados} + subTitle={<>Para você ter acesso aos
    dados mais atualizados} price={priceBDPro} anualPlan={toggleAnual} textResource="Todos os recursos da BD Grátis, mais:" resources={[ {name: "Dezenas de bases de alta frequência atualizadas"}, - {name: "Tabela de referência de empresas com informações traduzidas e atualizadas"} + {name: "Download direto até 1GB (80% das tabelas da plataforma)", tooltip: "Tabelas maiores que 5 GB não estão disponíveis para download parcial ou completo. Esse limite não se aplica ao acesso via SQL, Python e R."} ]} button={{ text: `${userData?.proSubscription === "bd_pro" ? "Plano atual" : "Assinar"}`, @@ -1966,12 +1963,13 @@ const PlansAndPayment = ({ userData }) => { Para sua empresa ganhar tempo
    e qualidade em decisões} + subTitle={<>Para sua empresa ganhar tempo
    e qualidade em decisões} price={priceBDEmp} anualPlan={toggleAnual} textResource="Todos os recursos da BD Pro, mais:" resources={[ - {name: "Acesso para 10 contas"},{name: "Suporte prioritário via email e Discord"} + {name: "Acesso para 10 contas"}, + {name: "Suporte prioritário via email e Discord"} ]} button={{ text: `${userData?.proSubscription === "bd_pro_empresas" ? "Plano atual" : "Assinar"}`, diff --git a/next/utils.js b/next/utils.js index ead5990c..41581fa9 100644 --- a/next/utils.js +++ b/next/utils.js @@ -218,7 +218,7 @@ export function cleanString(string) { export function formatBytes(bytes) { if (bytes < 1024) { - return `${bytes}B` + return `${bytes} B` } else if (bytes < 1024 * 1024) { return `${(bytes / 1024).toFixed(2)} KB` } else if (bytes < 1024 * 1024 * 1024) { From 8c2aa78d50fe8bdc36a9362f8272062d3bbf84b3 Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Tue, 6 Aug 2024 12:53:50 -0300 Subject: [PATCH 64/66] feat: ajust TranslationColumnException --- next/components/molecules/ColumnsTable.js | 36 ++++++++++++++++------- 1 file changed, 26 insertions(+), 10 deletions(-) diff --git a/next/components/molecules/ColumnsTable.js b/next/components/molecules/ColumnsTable.js index 186cf785..af776eb3 100644 --- a/next/components/molecules/ColumnsTable.js +++ b/next/components/molecules/ColumnsTable.js @@ -219,6 +219,15 @@ export default function ColumnsTable({ Não precisa de tradução ) + const cloudValues = value?.table?.cloudTables?.edges?.[0]?.node + const gcpDatasetID = cloudValues?.gcpDatasetId || "" + const gcpTableId = cloudValues?.gcpTableId || "" + + if(gcpDatasetID === "br_bd_diretorios_data_tempo") return "Não precisa de tradução" + if(gcpDatasetID === "br_bd_diretorios_brasil") { + if(gcpTableId === "empresa" || gcpTableId === "cep") return "Não precisa de tradução" + } + if(value?.name === "ddd") return "Não precisa de tradução" if(value?.table?.isClosed) return ( @@ -244,10 +253,6 @@ export default function ColumnsTable({ ) - const cloudValues = value?.table?.cloudTables?.edges?.[0]?.node - - const gcpDatasetID = cloudValues?.gcpDatasetId || "" - const gcpTableId = cloudValues?.gcpTableId || "" const downloadUrl = `https://storage.googleapis.com/basedosdados-public/one-click-download/${gcpDatasetID}/${gcpTableId}/${gcpTableId}.csv.gz` const datasetName = value?.table?.dataset?.name || "" @@ -385,6 +390,22 @@ export default function ColumnsTable({ ) } + function TranslationColumnException({ value }) { + const cloudValues = value?.node?.directoryPrimaryKey?.table?.cloudTables?.edges?.[0]?.node + const gcpDatasetID = cloudValues?.gcpDatasetId || "" + const gcpTableId = cloudValues?.gcpTableId || "" + + if(gcpDatasetID === "br_bd_diretorios_data_tempo") return "Não" + if(gcpDatasetID === "br_bd_diretorios_brasil") { + if(gcpTableId === "empresa" || gcpTableId === "cep") return "Não" + } + if(value?.node?.name === "ddd") return "Não" + if(value?.node?.coveredByDictionary === true) return "Sim" + if(value?.node?.directoryPrimaryKey?._id) return "Sim" + if(value?.node?.coveredByDictionary === false) return "Não" + return "Não informado" + } + if(isError) return ( : - - elm?.node?.coveredByDictionary === true ? "Sim" : - elm?.node?.directoryPrimaryKey?._id ? "Sim" : - elm?.node?.coveredByDictionary === false ? "Não" - : - "Não informado" + } From d9d0ccbbb321df946f4be9ce2b58342a0d2c9c8d Mon Sep 17 00:00:00 2001 From: aldemirLucas Date: Fri, 9 Aug 2024 13:28:56 -0300 Subject: [PATCH 65/66] feat: dictionary download in table column --- next/components/molecules/ColumnsTable.js | 173 +++++++++++++++----- next/pages/api/tables/downloadTable.js | 24 +++ next/pages/api/tables/getColumnsBdmTable.js | 1 + next/pages/api/tables/getDictionaryTable.js | 61 +++++++ 4 files changed, 218 insertions(+), 41 deletions(-) create mode 100644 next/pages/api/tables/downloadTable.js create mode 100644 next/pages/api/tables/getDictionaryTable.js diff --git a/next/components/molecules/ColumnsTable.js b/next/components/molecules/ColumnsTable.js index af776eb3..a5e93a4d 100644 --- a/next/components/molecules/ColumnsTable.js +++ b/next/components/molecules/ColumnsTable.js @@ -13,10 +13,13 @@ import { Skeleton, } from '@chakra-ui/react'; import { useState, useEffect } from 'react'; +import { useRouter } from 'next/router'; import FuzzySearch from 'fuzzy-search'; import Latex from 'react-latex-next'; +import cookies from 'js-cookie'; import { ControlledInputSimple } from '../atoms/ControlledInput'; import Checkbox from '../atoms/Checkbox'; +import { triggerGAEvent, formatBytes } from '../../utils'; import { getColumnsBdmTable @@ -94,6 +97,8 @@ export default function ColumnsTable({ template, columnsPro }) { + const router = useRouter() + const { query } = router const [resource, setResource] = useState({}) const [columns, setColumns] = useState({}) const [isError, setIsError] = useState(false) @@ -102,6 +107,14 @@ export default function ColumnsTable({ const isChecked = (columnSlug) => checkedColumns.includes(columnSlug) + const isUserPro = () => { + let user + if(cookies.get("userBD")) user = JSON.parse(cookies.get("userBD")) + + if(user?.proSubscriptionStatus === "active") return true + return false + } + const handleCheckboxChange = (columnSlug) => { if (isChecked(columnSlug)) { onChangeCheckedColumns(checkedColumns.filter(slug => slug !== columnSlug)) @@ -213,28 +226,56 @@ export default function ColumnsTable({ return 0 } - function TranslationTable({ value }) { - if(value === null) return ( - - Não precisa de tradução - - ) - const cloudValues = value?.table?.cloudTables?.edges?.[0]?.node - const gcpDatasetID = cloudValues?.gcpDatasetId || "" - const gcpTableId = cloudValues?.gcpTableId || "" + function HasDownloadPermitted(value) { + let downloadPermitted = false + let downloadWarning = "" - if(gcpDatasetID === "br_bd_diretorios_data_tempo") return "Não precisa de tradução" - if(gcpDatasetID === "br_bd_diretorios_brasil") { - if(gcpTableId === "empresa" || gcpTableId === "cep") return "Não precisa de tradução" + if (value) { + const limit100MB = 100 * 1024 * 1024; + const limit1GB = 1 * 1024 * 1024 * 1024; + + if (value < limit100MB) { + downloadPermitted = true + downloadWarning = "free" + } else if (value < limit1GB) { + downloadPermitted = isUserPro() + downloadWarning = "100mbBetween1gb" + } else { + downloadPermitted = false + downloadWarning = "biggest1gb" + } } - if(value?.name === "ddd") return "Não precisa de tradução" - if(value?.table?.isClosed) return ( + return { + downloadPermitted : downloadPermitted, + downloadWarning : downloadWarning + } + } + + function DictionaryDownload() { + async function downloadTable() { + const result = await fetch(`/api/tables/getDictionaryTable?p=${btoa(query.dataset)}`, {method: "GET"}) + .then(res => res.json()) + + if(result?.error) return + + let cloudTables = result?.cloudTables?.edges[0]?.node + + triggerGAEvent("download_da_tabela",`{ + gcp: ${cloudTables?.gcpProjectId+"."+cloudTables?.gcpDatasetId+"."+cloudTables?.gcpTableId}, + tamanho: ${formatBytes(result.uncompressedFileSize) || ""}, + dataset: ${query.dataset}, + table: ${resource?._id}, + columnDownload: true + }`) + window.open(`https://storage.googleapis.com/basedosdados-public/one-click-download/${cloudTables?.gcpDatasetId}/${cloudTables?.gcpTableId}/${cloudTables?.gcpTableId}.csv.gz`) + } + + return ( downloadTable()} display="flex" flexDirection="row" alignItems="center" @@ -246,39 +287,86 @@ export default function ColumnsTable({ fill:"#0057A4" }} > - Acessar tabela que faz a tradução desta coluna - + Baixar tabela que faz a tradução desta coluna + - {value?.table?.dataset?.name} - {value?.table?.name} + Dicionário ) + } - const downloadUrl = `https://storage.googleapis.com/basedosdados-public/one-click-download/${gcpDatasetID}/${gcpTableId}/${gcpTableId}.csv.gz` + function TranslationTable({ value, dictionary }) { + const downloadInfo = HasDownloadPermitted(value?.table?.uncompressedFileSize) + const cloudValues = value?.table?.cloudTables?.edges?.[0]?.node + + const gcpProjectID = cloudValues?.gcpProjectId || "" + const gcpDatasetID = cloudValues?.gcpDatasetId || "" + const gcpTableId = cloudValues?.gcpTableId || "" const datasetName = value?.table?.dataset?.name || "" const tableName = value?.table?.name || "" + if(gcpDatasetID === "br_bd_diretorios_data_tempo") return "Não precisa de tradução" + if(gcpDatasetID === "br_bd_diretorios_brasil") { + if(gcpTableId === "empresa" || gcpTableId === "cep") return "Não precisa de tradução" + } + if(value?.name === "ddd") return "Não precisa de tradução" + + const downloadUrl = `https://storage.googleapis.com/basedosdados-public/one-click-download/${gcpDatasetID}/${gcpTableId}/${gcpTableId}.csv.gz` + return ( - - Baixar tabela que faz a tradução desta coluna - - - {datasetName} - {tableName} + {value === null ? + + Não precisa de tradução + + : + + { + if(!downloadInfo.downloadPermitted) return + triggerGAEvent("download_da_tabela",`{ + gcp: ${gcpProjectID+"."+gcpDatasetID+"."+gcpTableId}, + tamanho: ${formatBytes(value?.table?.uncompressedFileSize) || ""}, + dataset: ${value?.table?.dataset?._id}, + table: ${value?.table?._id}, + columnDownload: true + }`) + }} + flexDirection="row" + alignItems="center" + gap="4px" + color="#0068C5" + fill="#0068C5" + _hover={{ + color:"#0057A4", + fill:"#0057A4" + }} + > + {value?.table?.isClosed || !downloadInfo.downloadPermitted + ? + <> + Acessar tabela que faz a tradução desta coluna + + + : + <> + Baixar tabela que faz a tradução desta coluna + + + } + + {datasetName} - {tableName} + + } + + {dictionary === true && + + } ) } @@ -540,7 +628,10 @@ export default function ColumnsTable({ {template === "download" ? - + : } diff --git a/next/pages/api/tables/downloadTable.js b/next/pages/api/tables/downloadTable.js new file mode 100644 index 00000000..d2997eb9 --- /dev/null +++ b/next/pages/api/tables/downloadTable.js @@ -0,0 +1,24 @@ +import axios from "axios"; + +async function downloadTable(datasetID, tableId, res) { + try { + const fileUrl = `https://storage.googleapis.com/basedosdados-public/one-click-download/${datasetID}/${tableId}/${tableId}.csv.gz` + const response = await axios({ + url: fileUrl, + method: 'GET', + responseType: 'stream' + }) + + res.setHeader('Content-Disposition', `attachment; filename=${datasetID}_${tableId}.csv.gz`) + res.setHeader('Content-Type', 'application/gzip') + + response.data.pipe(res) + } catch (error) { + console.error(error) + res.status(500).json({ message: 'Error downloading the file' }) + } +} + +export default async function handler(req, res) { + return downloadTable(atob(req.query.p), atob(req.query.q), res) +} \ No newline at end of file diff --git a/next/pages/api/tables/getColumnsBdmTable.js b/next/pages/api/tables/getColumnsBdmTable.js index 584e9149..0190be73 100644 --- a/next/pages/api/tables/getColumnsBdmTable.js +++ b/next/pages/api/tables/getColumnsBdmTable.js @@ -28,6 +28,7 @@ export default async function getColumnsBdmTable(id) { _id name isClosed + uncompressedFileSize cloudTables{ edges{ node{ diff --git a/next/pages/api/tables/getDictionaryTable.js b/next/pages/api/tables/getDictionaryTable.js new file mode 100644 index 00000000..4391851a --- /dev/null +++ b/next/pages/api/tables/getDictionaryTable.js @@ -0,0 +1,61 @@ +import axios from "axios"; + +const API_URL= `${process.env.NEXT_PUBLIC_API_URL}/api/v1/graphql` + +async function getDictionaryTable(id, slug) { + try { + const res = await axios({ + url: API_URL, + method: "POST", + data: { + query: ` + query { + allDataset (id: "${id}") { + edges { + node { + tables (slug: "${slug}") { + edges { + node { + _id + slug + uncompressedFileSize + cloudTables{ + edges{ + node{ + gcpTableId + gcpDatasetId + gcpProjectId + } + } + } + } + } + } + } + } + } + } + ` + } + }) + const data = res?.data?.data?.allDataset?.edges[0]?.node?.tables?.edges[0]?.node + return data + } catch (error) { + console.error(error) + } +} + +export default async function handler(req, res) { + const param = atob(req.query.p) + let result = await getDictionaryTable(param, "dicionario") + + if (result === undefined) { + result = await getDictionaryTable(param, "dictionary") + } + + if (result === undefined) { + res.status(500).json({ error: "Nenhum resultado encontrado" }) + } else { + res.status(200).json(result) + } +} From 94559a77a675cc72f8d736fb1485461c3bdce484 Mon Sep 17 00:00:00 2001 From: Jhony Lucas Date: Sun, 11 Aug 2024 16:19:18 -0300 Subject: [PATCH 66/66] feat: Add support for setup intents in PaymentForm --- next/components/organisms/PaymentSystem.js | 58 ++++++++++++--------- next/pages/api/stripe/createSubscription.js | 7 +-- 2 files changed, 34 insertions(+), 31 deletions(-) diff --git a/next/components/organisms/PaymentSystem.js b/next/components/organisms/PaymentSystem.js index 870618d2..28633997 100644 --- a/next/components/organisms/PaymentSystem.js +++ b/next/components/organisms/PaymentSystem.js @@ -21,20 +21,35 @@ import { const stripePromise = loadStripe(process.env.NEXT_PUBLIC_KEY_STRIPE) -const PaymentForm = ({ onSucess, onErro }) => { +const PaymentForm = ({ onSucess, onErro, clientSecret}) => { const stripe = useStripe() const elements = useElements() const handlerSubmit = async (e) => { e.preventDefault() - const data = await stripe.confirmPayment({ - elements, - redirect: 'if_required', - }) - - if(data?.error?.code === "card_declined") return onErro() - if(data?.paymentIntent?.status === "succeeded") return onSucess() + const isSetupIntent = clientSecret.startsWith('seti_'); + if (isSetupIntent) { + await elements.submit(); + + const data = await stripe.confirmSetup({ + elements, + clientSecret: clientSecret, + redirect: 'if_required', + }); + + if (data?.error?.code === "card_declined") return onErro(); + if (data?.setupIntent?.status === "succeeded") return onSucess(); + + } else { + const data = await stripe.confirmPayment({ + elements, + redirect: 'if_required', + }) + + if(data?.error?.code === "card_declined") return onErro() + if(data?.paymentIntent?.status === "succeeded") return onSucess() + } } return ( @@ -89,26 +104,12 @@ export default function PaymentSystem({ userData, plan, onSucess, onErro }) { } const customerCreatPost = async (id) => { - let secret = "" - - const subscriptionCreate = await fetch(`/api/stripe/createSubscription?p=${btoa(id)}`, {method: "GET"}) + const clientSecret = await fetch(`/api/stripe/createSubscription?p=${btoa(id)}`, {method: "GET"}) .then(res => res.json()) - if(subscriptionCreate?.clientSecret) { - secret = subscriptionCreate?.clientSecret + if (clientSecret) { + setClientSecret(clientSecret) } - if(secret !== "") return setClientSecret(secret) - - const result = await fetch(`/api/stripe/createCustomer`, {method: "GET"}) - .then(res => res.json()) - - if(result?.id) { - const subscriptionCreate = await fetch(`/api/stripe/createSubscription?p=${btoa(id)}`, {method: "GET"}) - .then(res => res.json()) - secret = subscriptionCreate?.clientSecret - } - - return setClientSecret(secret) } async function customerCreat(plan) { @@ -169,7 +170,12 @@ export default function PaymentSystem({ userData, plan, onSucess, onErro }) { return ( - + ) } \ No newline at end of file diff --git a/next/pages/api/stripe/createSubscription.js b/next/pages/api/stripe/createSubscription.js index 91f8b8eb..814e1d07 100644 --- a/next/pages/api/stripe/createSubscription.js +++ b/next/pages/api/stripe/createSubscription.js @@ -14,10 +14,7 @@ async function createSubscription(id, token) { query: ` mutation { createStripeSubscription (priceId: ${id}) { - subscription { - id - clientSecret - } + clientSecret } } ` @@ -38,5 +35,5 @@ export default async function handler(req, res) { if(result.errors) return res.status(500).json({error: result.errors}) if(result === "err") return res.status(500).json({error: "err"}) - res.status(200).json(result?.data?.createStripeSubscription?.subscription) + res.status(200).json(result?.data?.createStripeSubscription?.clientSecret) }