Skip to content

Commit

Permalink
Merge pull request #829 from basedosdados/staging
Browse files Browse the repository at this point in the history 
Staging
  • Loading branch information
@AldemirLucas
AldemirLucas authored May 9, 2024
2 parents 14fa504 + 48b594f commit 412d974
Show file tree
Hide file tree
Showing 25 changed files with 900 additions and 926 deletions.
3 changes: 2 additions & 1 deletion next/components/atoms/SimpleInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,12 @@ export default function SimpleInput({
styleElmRight,
...props
}) {

return (
<InputGroup>
{elmLeft && <InputLeftElement children={elmLeft} {...styleElmLeft}/>}
<Input
id={id}
type={type}
value={value}
onKeyDown={onKeyDown}
Expand Down
2 changes: 1 addition & 1 deletion next/components/molecules/ColumnDatasets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { useCheckMobile } from "../../hooks/useCheckMobile.hook";
import SectionText from '../atoms/SectionText';
import LoadingSpin from '../atoms/Loading'
import Tag from "../atoms/Tag";
import { TemporalCoverage } from "../atoms/TemporalCoverageDisplay";
import { TemporalCoverage } from "./TemporalCoverageDisplay";

import {
getColumnsBdmTable
Expand Down
119 changes: 63 additions & 56 deletions next/components/molecules/DataInformationQuery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import RoundedButton from "../atoms/RoundedButton";

import DisclaimerBox from "./DisclaimerBox";

import { triggerGAEvent } from "../../utils";
import { CopyIcon } from "../../public/img/icons/copyIcon";
import DownloadIcon from "../../public/img/icons/downloadIcon";
import ExclamationIcon from "../../public/img/icons/exclamationIcon";
Expand Down Expand Up @@ -90,16 +91,16 @@ export function PrismCodeHighlight({ language, children }) {
fontFamily="Lato"
fontWeight="500"
backgroundColor="transparent"
_hover={{ backgroundColor:"transparent", opacity:"0.6"}}
_hover={{ backgroundColor: "transparent", opacity: "0.6" }}
>
{hasCopied ? "Copiado" : "Copiar"}
<CopyIcon alt="copiar conteúdo" width="20px" height="20px" fill="#707783" marginLeft="5px"/>
<CopyIcon alt="copiar conteúdo" width="20px" height="20px" fill="#707783" marginLeft="5px" />
</Button>
</pre>
)
}

export default function DataInformationQuery ({ resource }) {
export default function DataInformationQuery({ resource }) {
const gcpDatasetID = resource?.cloudTables[0]?.gcpDatasetId
const gcpTableId = resource?.cloudTables[0]?.gcpTableId
const downloadUrl = `https://storage.googleapis.com/basedosdados-public/one-click-download/${gcpDatasetID}/${gcpTableId}/${gcpTableId}.csv.gz`
Expand All @@ -110,16 +111,22 @@ export default function DataInformationQuery ({ resource }) {
useEffect(() => {
if (window) window?.Prism?.highlightAll()

if(resource?.numberRows === 0) return setDownloadNotAllowed(false)
if(resource?.numberRows) return resource?.numberRows > 200000 ? setDownloadNotAllowed(false) : setDownloadNotAllowed(true)
if (resource?.numberRows === 0) return setDownloadNotAllowed(false)
if (resource?.numberRows) return resource?.numberRows > 200000 ? setDownloadNotAllowed(false) : setDownloadNotAllowed(true)
}, [resource])

const handlerDownload = () => {
if(downloadNotAllowed === false) return null
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]);
}

return (
<VStack
spacing={-1}
Expand All @@ -130,13 +137,13 @@ export default function DataInformationQuery ({ resource }) {
<Tabs
paddingTop="16px"
width={{ base: "90vw", lg: "100%" }}
onChange={(index) => setTabIndex(index)}
onChange={(index) => handleIndexes(index)}
index={tabIndex}
>
<TabList
padding="0px"
fontFamily="Ubuntu !important"
borderBottom= "2px solid #DEDFE0 !important"
borderBottom="2px solid #DEDFE0 !important"
justifyContent={isMobileMod() && "space-around"}
>
<GreenTab
Expand Down Expand Up @@ -169,45 +176,45 @@ export default function DataInformationQuery ({ resource }) {
</GreenTab>
{resource?.isClosed ? <></> :
isMobileMod() ?
<Menu>
<MenuButton
variant="unstyled"
top="2px"
as={IconButton}
rightIcon={
<MenuVerticalIcon
alt="menu"
width="20px"
height="20px"
position="relative"
right="4px"
top="2px"
fill={tabIndex === 4 ? "#2B8C4D" : "#252A32"}
/>
}
borderRadius="none"
borderBottom={tabIndex === 4 &&"3px solid #2B8C4D"}
/>
<MenuList>
<MenuItem _focus={{backgroundColor: "#FFF"}} onClick={() => setTabIndex(4)}>Download</MenuItem>
</MenuList>
</Menu>
:
<GreenTab
fontSize="16px"
paddingBottom="8px !important"
letterSpacing="0.2px"
>
Download
</GreenTab>}
<Menu>
<MenuButton
variant="unstyled"
top="2px"
as={IconButton}
rightIcon={
<MenuVerticalIcon
alt="menu"
width="20px"
height="20px"
position="relative"
right="4px"
top="2px"
fill={tabIndex === 4 ? "#2B8C4D" : "#252A32"}
/>
}
borderRadius="none"
borderBottom={tabIndex === 4 && "3px solid #2B8C4D"}
/>
<MenuList>
<MenuItem _focus={{ backgroundColor: "#FFF" }} onClick={() => handleIndexes(4)}>Download</MenuItem>
</MenuList>
</Menu>
:
<GreenTab
fontSize="16px"
paddingBottom="8px !important"
letterSpacing="0.2px"
>
Download
</GreenTab>}
</TabList>
<TabPanels>
<TabPanel padding="0">
{resource?.isClosed ?
<SectionText margin="24px 0 16px">
Com uma assinatura BD Pro válida, copie o código abaixo e cole no Editor de Consultas no BigQuery:
</SectionText>
:
:
<SectionText
margin="24px 0 16px"
>
Expand Down Expand Up @@ -314,18 +321,18 @@ bd_read_table, ///
borderColor="#D93B3B"
>
<HStack gridGap="8px" alignItems="flex-start">
<ExclamationIcon
alt="atenção"
width="20px"
height="20px"
fill="#D93B3B"
marginTop="4px"
/>
<Box>
<SectionText fontWeight="700">ATENÇÃO: O tamanho da tabela ultrapassou o limite permitido para download, de 200.000 linhas.</SectionText>
<SectionText>Para acessar os dados, utilize nosso <i>datalake</i> no BigQuery ou nossos pacotes em Python, R e Stata.</SectionText>
</Box>
</HStack>
<ExclamationIcon
alt="atenção"
width="20px"
height="20px"
fill="#D93B3B"
marginTop="4px"
/>
<Box>
<SectionText fontWeight="700">ATENÇÃO: O tamanho da tabela ultrapassou o limite permitido para download, de 200.000 linhas.</SectionText>
<SectionText>Para acessar os dados, utilize nosso <i>datalake</i> no BigQuery ou nossos pacotes em Python, R e Stata.</SectionText>
</Box>
</HStack>
</DisclaimerBox>
}

Expand All @@ -334,15 +341,15 @@ bd_read_table, ///
fontSize="14px"
fontWeight="700"
color="#FFF"
backgroundColor={downloadNotAllowed ? "#42B0FF" :"#C4C4C4"}
backgroundColor={downloadNotAllowed ? "#42B0FF" : "#C4C4C4"}
paddingX="30px"
width="fit-content"
gridGap="6px"
cursor={downloadNotAllowed ? "pointer" :"default"}
_hover={!downloadNotAllowed ? {transform : "none"} : "" }
cursor={downloadNotAllowed ? "pointer" : "default"}
_hover={!downloadNotAllowed ? { transform: "none" } : ""}
onClick={() => handlerDownload()}
>
<DownloadIcon alt="download" width="22px" height="22px" fill="#FFF"/>
<DownloadIcon alt="download" width="22px" height="22px" fill="#FFF" />
Download dos dados
</RoundedButton>
</TabPanel>
Expand Down
35 changes: 20 additions & 15 deletions next/components/molecules/Menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import {
import { useEffect, useRef, useState, useMemo } from "react";
import { useRouter } from "next/router"
import cookies from "js-cookie";
import { MenuDropdown } from "./MenuDropdown";
import MenuDropdown from "./MenuDropdown";
import { isMobileMod, useCheckMobile } from "../../hooks/useCheckMobile.hook"
import ControlledInput from "../atoms/ControlledInput";
import Link from "../atoms/Link";
Expand Down Expand Up @@ -54,7 +54,7 @@ function MenuDrawer({ userData, isOpen, onClose, links }) {
/>
<VStack alignItems="flex-start" width="100%" spacing="16px">
{Object.entries(links).map(([key, elm]) => {
if(key === "Button")
if(key === "Button") {
return elm.map(b =>
<RoundedButton
key={b.name}
Expand All @@ -68,6 +68,7 @@ function MenuDrawer({ userData, isOpen, onClose, links }) {
{b.name}
</RoundedButton>
)
}
if (typeof elm === "object") {
return (
<Accordion key={key} allowToggle width="100%">
Expand Down Expand Up @@ -647,14 +648,13 @@ function DesktopLinks({ userData, links, position = false, path, userTemplate =
setStatusSearch(elm.status)
}

const LinkMenuDropDown = ({ key, url, text, icon }) => {
function LinkMenuDropDown ({ url, text, icon }) {
const [flag, setFlag] = useBoolean()

if(url === undefined && text === undefined) return <Divider marginBottom="10px" padding="10px 0 0" borderColor="#DEDFE0"/>

return (
<Link
key={key}
display="flex"
flexDirection="colunm"
_hover={{ opacity: "0.6" }}
Expand Down Expand Up @@ -693,10 +693,10 @@ function DesktopLinks({ userData, links, position = false, path, userTemplate =
}
>
<HStack display={userTemplate ? "none" : "flex"} width="100%" flex="3" spacing={7}>
{Object.entries(links).map(([k, v]) => {
if (k === "Button")
return v.map(b => (
<a key={b.name} href={b.href} target="_blank">
{Object.entries(links).map(([k, v], i) => {
if (k === "Button") {
return v.map((b, j) => (
<a key={`button-${j}`} href={b.href} target="_blank">
<RoundedButton
colorScheme="red"
backgroundColor={b.color}
Expand All @@ -709,11 +709,12 @@ function DesktopLinks({ userData, links, position = false, path, userTemplate =
</RoundedButton>
</a>
))
}

if (typeof v === "object") {
return (
<MenuDropdown
key={k}
key={i}
title={k}
marginLeft="-25px"
marginTop="10px"
Expand All @@ -728,11 +729,11 @@ function DesktopLinks({ userData, links, position = false, path, userTemplate =
_last={{ paddingBottom: "10px"}}
boxShadow= "0 1px 8px 1px rgba(64, 60, 67, 0.16)"
>
{v.map((elm) => (
{v.map((elm, j) => (
<LinkMenuDropDown
key={elm.name}
key={`link-${i}-${j}`}
url={elm?.href}
text={elm.name}
text={elm?.name}
icon={elm?.icon}
/>
))}
Expand All @@ -742,7 +743,7 @@ function DesktopLinks({ userData, links, position = false, path, userTemplate =

return (
<Link
key={k}
key={`link-${i}`}
_hover={{ opacity: "0.6" }}
fontSize="15px"
fontFamily="Ubuntu"
Expand All @@ -753,7 +754,7 @@ function DesktopLinks({ userData, links, position = false, path, userTemplate =
>
{k}
</Link>
);
)
})}
</HStack>

Expand Down Expand Up @@ -851,7 +852,11 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false }

return (
<>
<MenuDrawer userData={userData} links={links} {...menuDisclosure} />
<MenuDrawer
userData={userData}
links={links}
{...menuDisclosure}
/>

<Box
ref={divRef}
Expand Down
2 changes: 1 addition & 1 deletion next/components/molecules/MenuDropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
} from "@chakra-ui/react"
import ChevronIcon from "../../public/img/icons/chevronIcon"

export function MenuDropdown({ title, children, ...style }) {
export default function MenuDropdown({ title, children, ...style }) {
const timerRef = useRef();
const [isOpenMenu, setIsOpenMenu] = useState(false);

Expand Down
5 changes: 3 additions & 2 deletions ...mponents/atoms/TemporalCoverageDisplay.js → ...ents/molecules/TemporalCoverageDisplay.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
import { useState, useEffect, Children } from "react";
import { useCheckMobile } from "../../hooks/useCheckMobile.hook"
import { CalendarComunIcon } from "../../public/img/icons/calendarIcon";
import TimeIcon from "../../public/img/icons/timeIcon";
import RedirectIcon from "../../public/img/icons/redirectIcon";

export function TemporalCoverage ({
Expand Down Expand Up @@ -215,11 +214,13 @@ export function TemporalCoverageBar ({ value }) {
const TooltipContent = ({children, text, firstValue, lastValue, ...props}) => {
return (
<Tooltip
maxWidth={500}
label={
<Box
display="flex"
flexDirection="column"
alignItems="center"
textAlign="center"
>
{text}
<Box display="flex" gap="12px" marginTop="6px">
Expand Down Expand Up @@ -372,7 +373,7 @@ export function TemporalCoverageBar ({ value }) {
display="flex"
>
<TooltipContent
text={dateEnd?.type === "open" ? "Acesso liberado entre" : "Assine a BD PAGO para liberar entre"}
text={dateEnd?.type === "open" ? "Acesso liberado entre" : "Assine um dos planos pagos da BD para liberar entre"}
firstValue={dateEnd?.type === "open" ? dateStart : dateEnd?.type === "closed" ? dateStart : dateMid}
lastValue={dateEnd}
isOpen={flag}
Expand Down
Loading

0 comments on commit 412d974

Please sign in to comment.