- \n { _.map(options, (option) => {\n const categoryText = categoryKey ? `${ _.get(option, categoryKey) } - ` : '';\n\n return (\n
- \n { categoryText }{ option.label }\n
\n \n \n );\n }) }\n
\n \n \n { error &&\n
\n );\n}\n","export const API_URLS = {\n '7.1': 'https://v71.plataforma.brasil.mapbiomas.org/api/graphql',\n '8.0': 'https://v8.plataforma.brasil.mapbiomas.org/api/graphql'\n};\n","import { ApolloClient } from 'apollo-client';\nimport { InMemoryCache } from 'apollo-cache-inmemory';\nimport { HttpLink } from 'apollo-link-http';\n\nimport { API_URLS } from '../../data/constants';\n\nconst cache = new InMemoryCache();\n\nconst link = new HttpLink({\n uri: API_URLS['8.0']\n});\n\nconst client = new ApolloClient({\n cache,\n link,\n});\n\nexport default client;\n","import { ApolloClient } from 'apollo-client';\nimport { InMemoryCache } from 'apollo-cache-inmemory';\nimport { HttpLink } from 'apollo-link-http';\n\nimport { API_URLS } from '../../data/constants';\n\nconst cache = new InMemoryCache();\n\nconst link = new HttpLink({\n uri: API_URLS['7.1']\n});\n\nconst client = new ApolloClient({\n cache,\n link,\n});\n\nexport default client;\n","import customClient from '../core/custom-apollo-client/custom-apollo-client';\nimport customClientSecondary from '../core/custom-apollo-client-secondary/custom-apollo-client-secondary';\n\nconst mapVersionToClient = {\n '7.1': customClientSecondary,\n '8.0': customClient,\n};\n\nexport default function getCustomClient(version) {\n return mapVersionToClient[version] || undefined;\n};\n","import { gql } from 'graphql.macro';\n\nexport const GET_TERRITORIES_AUTOCOMPLETE = gql`\n query TerritoriesAutocomplete(\n $categoryId: Int!,\n $text: String!,\n ) {\n territoriesAutocomplete(\n categoryId: $categoryId,\n text: $text\n ) {\n id\n i18nStrings {\n language\n stringValue\n }\n territoryGeometry {\n boundingBox\n }\n }\n }\n`;\n","import TerritoryAutocomplete from './TerritoryAutocomplete';\n\nexport default TerritoryAutocomplete;\n","import React, { useEffect, useMemo, useState } from 'react';\nimport { useApolloClient } from '@apollo/react-hooks';\nimport _ from 'lodash';\n\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport TextField from '@material-ui/core/TextField';\n\nimport getCustomClient from '../../../../../../../../lib/getCustomClient';\n\nimport {\n GET_TERRITORIES_AUTOCOMPLETE,\n} from './query';\n\nexport default function TerritoryAutocomplete({\n clientType,\n activeTerritories,\n categoryId,\n label,\n placeholder,\n territoryLabelFilter,\n onChange,\n}) {\n const locale = localStorage.getItem('locale') || 'pt-BR';\n const clientBase = useApolloClient();\n const client = getCustomClient(clientType) || clientBase;\n const [currentValue, setCurrentValue] = useState(null);\n const [options, setOptions] = useState([]);\n const [loading, setLoading] = useState(false);\n\n const setDataFromExternalTerritories = () => {\n const territory = _.first(activeTerritories);\n\n const option = {\n id: _.get(territory, 'id'),\n label: _.get(territory, 'label'),\n boundingBox: _.get(territory, 'territoryBBox'),\n };\n\n setCurrentValue(option);\n setOptions([option]);\n };\n\n useEffect(() => {\n if (_.size(activeTerritories) === 1 && _.isEmpty(options)) {\n setDataFromExternalTerritories();\n }\n }, []);\n\n useEffect(() => {\n if (_.isEmpty(activeTerritories)) {\n setOptions([]);\n setCurrentValue(null);\n } else if (!_.isEmpty(activeTerritories) && !currentValue) {\n setDataFromExternalTerritories();\n }\n }, [activeTerritories]);\n\n const searchOptions = async (query) => {\n setLoading(true);\n const { data } = await client.query({\n query: GET_TERRITORIES_AUTOCOMPLETE,\n variables: {\n categoryId,\n text: query\n }\n });\n setLoading(false);\n\n let newOptions = [];\n\n if (currentValue) {\n newOptions = [currentValue];\n }\n\n if (data) {\n const parsedOptions = _.map(_.get(data, 'territoriesAutocomplete'), (item) => {\n const id = _.get(item, 'id');\n const boundingBox = _.get(item, 'territoryGeometry.boundingBox');\n const stringList = _.get(item, 'i18nStrings');\n const selectedString = _.find(stringList, { language: locale });\n const label = _.get(selectedString, 'stringValue');\n\n return {\n id,\n label,\n boundingBox: [\n [_.get(boundingBox, 'yMin'), _.get(boundingBox, 'xMin')],\n [_.get(boundingBox, 'yMax'), _.get(boundingBox, 'xMax')],\n ]\n };\n });\n\n newOptions = [...newOptions, ...parsedOptions];\n }\n\n if (territoryLabelFilter) {\n newOptions = _.filter(newOptions, (option) => {\n return _.includes(_.kebabCase(option.label), _.kebabCase(territoryLabelFilter));\n });\n }\n\n setOptions(newOptions);\n };\n\n const debouncedSearchOptions = useMemo(\n () => _.debounce(searchOptions, 300),\n [currentValue, options, categoryId]\n );\n\n const handleChange = (_event, newValue) => {\n if (newValue) {\n setOptions(newValue ? [newValue, ...options] : options);\n setCurrentValue(newValue);\n onChange(newValue);\n } else {\n setOptions([]);\n setCurrentValue(null);\n }\n };\n\n const handleInputChange = (_event, newInputValue) => {\n if (newInputValue === '') {\n setOptions(currentValue ? [currentValue] : []);\n } else {\n debouncedSearchOptions(newInputValue);\n }\n };\n\n return (\n \n \n \n
\n { mode &&\n { error }
\n }\n\n \n Ficha municipal\n \n
\n );\n };\n\n const renderDefaultInputs = () => {\n return (\n <>\n \n
\n );\n };\n\n const renderGeometryInput = () => {\n return (\n \n
\n );\n}\n","import React from 'react';\n\nimport { withStyles } from '@material-ui/core/styles';\nimport InfoIcon from '@material-ui/icons/Info';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nimport styles from './InfoTooltip.module.scss';\n\nconst CustomTooltip = withStyles(() => ({\n tooltip: {\n padding: '8px 12px',\n fontSize: 14,\n color: 'white',\n boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.12)',\n },\n}))(Tooltip);\n\nexport default function InfoTooltip({ text, placement = 'bottom' }) {\n return (\n \n { !hideGroupType && (\n \n \n = 1 }\n options={ filteredTerritoryTypeOptions }\n value={ territoryType }\n dataKey=\"territoryType\"\n label={ formatMessage(`mapbiomas.header.base_form.territory_type.title.${ groupType }`) }\n onChange={ handleInputChange }\n placeholder={ formatMessage(`mapbiomas.header.base_form.territory.placeholder`) }\n />\n \n }\n
\n { groupType !== 'car' && groupType !== 'geometry' && renderDefaultInputs() }\n { groupType === 'car' && hasGeometryOptions && renderCARInput() }\n { groupType === 'geometry' && hasGeometryOptions && renderGeometryInput() }\n Selecione uma classe abaixo para visualizar o resultado aplicado em Uso e Cobertura
\nSelecione abaixo os 3 parâmetros para ativar a opção de visualizar os dados.
\n\n \n Resetar\n \n \n
\n Caso os parâmetros acima não estejam selecionados, por padrão é considerado o alvo 25 e fonte 500.
\n \n );\n}\n","import React, { Fragment } from 'react'\nimport _ from 'lodash';\nimport classnames from 'classnames';\nimport {useIntl, FormattedMessage } from 'react-intl';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\n\nimport InfoTooltip from '../../../../../../../../components/InfoTooltip';\n\nimport BaseClassTreeNodesControl from '../BaseClassTreeNodesControl';\n\nimport DegradationIsolationClassTreeNodesControl from '../DegradationIsolationClassTreeNodesControl';\n\nimport useFormatMessage from '../../../../../../../../hooks/useFormatMessage';\n\nimport styles from './ClassTreesControl.module.scss';\n\nconst useStyles = makeStyles((theme) => ({\n activeButton: {\n color: `${ theme.palette.primary.main } !important`,\n borderColor: `${ theme.palette.primary.main } !important`\n },\n link: {\n color: '#16a085 !important',\n },\n}));\n\nconst mapSubmoduleKeyToTooltip = {\n 'fire_annual': 'Total Queimado - toda a área queimada sobre ambiente antrópico ou natural, para o ano selecionado.Classe - área queimada com a cor da classe de cobertura e uso do solo que foi queimada.',\n 'fire_monthly': 'Área queimada com a cor da classe de cada um dos 12 meses do ano selecionado.',\n 'fire_accumulated': 'Toda a área queimada acumulada sobre ambiente antrópico ou natural, para o período selecionado.',\n 'fire_frequency': 'Área queimada com a cor da classe de frequência de ocorrência de fogo, sendo 1 as áreas que queimaram uma única vez, 2 as classes que queimaram duas vezes, etc.',\n 'pasture_age': '
Idade
O dado refere-se à idade da pastagem após a última conversão detectada. Esta série temporal inicia-se em 1985, de modo que pastagens consolidadas antes desta data não têm idade identificada a partir da sua conversão.
Por exemplo, dada área foi pasto de 1994 a 1998, sofreu conversão para outro uso em 1999 e tornou a ser pasto em 2005, o tempo considerado é a partir de 2005.
Ano de Detecção
O dado refere-se ao ano em que a pastagem foi detectada pela primeira vez. Esta série temporal inicia-se em 1985, de modo que pastagens consolidadas anteriormente não têm sua formação identificada.
Ano de Conversão
O dado refere-se ao último ano de deteção do pixel como pastagem no período de 1985 a 2022.
',\n};\n\nexport default function ClassTreesControl({\n classTreeOptions,\n activeTreeOption,\n levels = [],\n activeLevels = [],\n submoduleKey,\n hideLevelsControl = false,\n onActiveTreeOptionChange,\n onLevelToggle = () => {},\n hasBaseMode,\n baseNodesOptions,\n activeBaseClassTreeNodeId,\n onBaseNodeOptionChange,\n}) {\n const classes = useStyles()\n const formatMessage = useFormatMessage()\n const legendTooltip = mapSubmoduleKeyToTooltip[submoduleKey];\n const isOnDegradationFragmentationIsolation = _.get(activeTreeOption, 'value') === 'degradation_fragmentation_isolation';\n\n const intl = useIntl()\n\n if (!activeTreeOption || !classTreeOptions) {\n return null\n }\n\n const handleOptionChange = (event) => {\n const value = _.get(event, 'target.value');\n const option = _.find(classTreeOptions, { value });\n onActiveTreeOptionChange(option);\n };\n\n const renderDefaultClassesPdfTable = () => (\n\n
\n { _.map(classTreeOptions, (classTreeOption) => {\n return (\n \n { classTreeOption.label }\n \n )\n }) }\n
\n );\n } else {\n return (\n \n \n
\n { activeTreeOption.value === 'default' && renderDefaultClassesPdfTable() }\n { classTreeOptions.length > 1 &&\n \n \n \n }\n { hasBaseMode && !isOnDegradationFragmentationIsolation &&\n
\n )\n}\n","import React, { useEffect, useState } from 'react'\nimport classnames from 'classnames'\n\nimport CheckBoxIcon from '@material-ui/icons/CheckBox'\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'\nimport Collapse from '@material-ui/core/Collapse'\nimport ExpandLessIcon from '@material-ui/icons/ExpandLess'\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore'\nimport IconButton from '@material-ui/core/IconButton'\nimport InfoIcon from '@material-ui/icons/Info'\nimport Tooltip from '@material-ui/core/Tooltip'\nimport _ from 'lodash'\n\nimport useFormatMessage from '../../../../../../../../hooks/useFormatMessage'\nimport { onCurrentLocaleCustom } from '../../../../../../../../utils/locale'\n\nimport styles from './ClassLegendList.module.scss'\n\nexport default function ClassLegendList({\n hideParentToggle,\n hideNestedNodes,\n hideLegendIndex,\n classTreeNodes,\n activeClassTreeNodeIds,\n onClassTreeNodeToggle,\n onClassTreeNodeShowTooltip\n}) {\n const formatMessage = useFormatMessage()\n const [expandedNodeIds, setExpandedNodeIds] = useState([])\n const rootLevel = _.min(_.map(classTreeNodes, 'level'))\n\n useEffect(() => {\n if (hideParentToggle) {\n setExpandedNodeIds(_.map(classTreeNodes, 'id'));\n }\n }, [hideParentToggle, classTreeNodes]);\n\n const toggleTreeNode = (node) => {\n if (_.includes(expandedNodeIds, node.id)) {\n setExpandedNodeIds(_.without(expandedNodeIds, node.id))\n } else {\n setExpandedNodeIds([ ...expandedNodeIds, node.id ])\n }\n }\n\n const renderCheckbox = (node) => {\n if (hideParentToggle && !_.isEmpty(node.childrenIds)) {\n return null;\n }\n\n const toggled = _.includes(activeClassTreeNodeIds, node.id)\n\n return (\n \n
\n { activeTreeOption.value === 'default' && renderDefaultClassesPdfTable() }\n { classTreeOptions.length > 1 &&\n \n { renderCheckbox(node) }\n \n {indexText} {onCurrentLocaleCustom(node.i18nStrings) }\n \n { !hideNestedNodes && renderExpandIcon(node) }\n { renderTooltipIcon(node) }\n
\n \n { renderClassTreeBranch({ parentId: node.id }) }\n
\n \n { renderClassTreeBranch({ parentId: null }) }\n
\n )\n}\n","import _ from 'lodash'\n\nfunction addStateTypenamesToObject(object, pathToWalkAddingTypenames) {\n _.reduce(\n _.toPath(pathToWalkAddingTypenames),\n (partialPath, pathComponent) => {\n partialPath += `.${pathComponent}`\n const typename = _.upperFirst(_.camelCase(partialPath))\n _.set(object, `${partialPath.slice(1)}.__typename`, `${typename}State`)\n return partialPath\n },\n ''\n )\n}\n\nexport function updateStateCache(client, basePath, ...keyValuePairs) {\n const [keys, values] = _.zip(...keyValuePairs)\n const zipObjectPaths = _.map(keys, (k) => `${basePath}.${k}`)\n let data = _.zipObjectDeep(zipObjectPaths, values)\n addStateTypenamesToObject(data, basePath)\n client.writeData({ data })\n}\n","export default {\n 'soil_texture_default': [\n {\n \"id\": '000_010',\n \"color\": \"#ff0001\",\n \"classId\": 716,\n \"childrenIds\": [],\n \"positionInTree\": [\n 1\n ],\n \"level\": 1,\n \"parentId\": null,\n \"defaultName\": \"0-10 cm\",\n \"classTreeId\": 46,\n \"pixelValue\": '000_010',\n \"i18nStrings\": [\n {\n \"language\": \"en\",\n \"stringValue\": \"0-10 cm\",\n \"__typename\": \"I18nString\"\n },\n {\n \"language\": \"pt-BR\",\n \"stringValue\": \"0-10 cm\",\n \"__typename\": \"I18nString\"\n }\n ],\n \"classTreeNode\": {\n \"classe\": {\n \"classesTooltips\": [],\n \"__typename\": \"Classe\"\n },\n \"__typename\": \"ClassTreeNode\"\n },\n \"__typename\": \"MvClassTreeLevelUi\"\n },\n {\n \"id\": '010_020',\n \"color\": \"#ffaa5f\",\n \"classId\": 717,\n \"childrenIds\": [],\n \"positionInTree\": [\n 2\n ],\n \"level\": 1,\n \"parentId\": null,\n \"defaultName\": \"10-20 cm\",\n \"classTreeId\": 46,\n \"pixelValue\": '010_020',\n \"i18nStrings\": [\n {\n \"language\": \"en\",\n \"stringValue\": \"10-20 cm\",\n \"__typename\": \"I18nString\"\n },\n {\n \"language\": \"pt-BR\",\n \"stringValue\": \"10-20 cm\",\n \"__typename\": \"I18nString\"\n }\n ],\n \"classTreeNode\": {\n \"classe\": {\n \"classesTooltips\": [],\n \"__typename\": \"Classe\"\n },\n \"__typename\": \"ClassTreeNode\"\n },\n \"__typename\": \"MvClassTreeLevelUi\"\n },\n {\n \"id\": '020_030',\n \"color\": \"#32cd32\",\n \"classId\": 718,\n \"childrenIds\": [],\n \"positionInTree\": [\n 3\n ],\n \"level\": 1,\n \"parentId\": null,\n \"defaultName\": \"20-30 cm\",\n \"classTreeId\": 46,\n \"pixelValue\": '020_030',\n \"i18nStrings\": [\n {\n \"language\": \"pt-BR\",\n \"stringValue\": \"20-30 cm\",\n \"__typename\": \"I18nString\"\n },\n {\n \"language\": \"en\",\n \"stringValue\": \"20-30 cm\",\n \"__typename\": \"I18nString\"\n }\n ],\n \"classTreeNode\": {\n \"classe\": {\n \"classesTooltips\": [],\n \"__typename\": \"Classe\"\n },\n \"__typename\": \"ClassTreeNode\"\n },\n \"__typename\": \"MvClassTreeLevelUi\"\n },\n {\n \"id\": '000_020',\n \"color\": \"#32cd32\",\n \"classId\": 718,\n \"childrenIds\": [],\n \"positionInTree\": [\n 3\n ],\n \"level\": 1,\n \"parentId\": null,\n \"defaultName\": \"0-20 cm\",\n \"classTreeId\": 46,\n \"pixelValue\": '000_020',\n \"i18nStrings\": [\n {\n \"language\": \"pt-BR\",\n \"stringValue\": \"0-20 cm\",\n \"__typename\": \"I18nString\"\n },\n {\n \"language\": \"en\",\n \"stringValue\": \"0-20 cm\",\n \"__typename\": \"I18nString\"\n }\n ],\n \"classTreeNode\": {\n \"classe\": {\n \"classesTooltips\": [],\n \"__typename\": \"Classe\"\n },\n \"__typename\": \"ClassTreeNode\"\n },\n \"__typename\": \"MvClassTreeLevelUi\"\n },\n {\n \"id\": '000_030',\n \"color\": \"#32cd32\",\n \"classId\": 718,\n \"childrenIds\": [],\n \"positionInTree\": [\n 3\n ],\n \"level\": 1,\n \"parentId\": null,\n \"defaultName\": \"0-30 cm\",\n \"classTreeId\": 46,\n \"pixelValue\": '000_030',\n \"i18nStrings\": [\n {\n \"language\": \"pt-BR\",\n \"stringValue\": \"0-30 cm\",\n \"__typename\": \"I18nString\"\n },\n {\n \"language\": \"en\",\n \"stringValue\": \"0-30 cm\",\n \"__typename\": \"I18nString\"\n }\n ],\n \"classTreeNode\": {\n \"classe\": {\n \"classesTooltips\": [],\n \"__typename\": \"Classe\"\n },\n \"__typename\": \"ClassTreeNode\"\n },\n \"__typename\": \"MvClassTreeLevelUi\"\n },\n ],\n 'soil_texture_textural': [\n {\n \"id\": '000_010',\n \"color\": \"#ff0001\",\n \"classId\": 716,\n \"childrenIds\": [],\n \"positionInTree\": [\n 1\n ],\n \"level\": 1,\n \"parentId\": null,\n \"defaultName\": \"0-10 cm\",\n \"classTreeId\": 46,\n \"pixelValue\": '000_010',\n \"i18nStrings\": [\n {\n \"language\": \"en\",\n \"stringValue\": \"0-10 cm\",\n \"__typename\": \"I18nString\"\n },\n {\n \"language\": \"pt-BR\",\n \"stringValue\": \"0-10 cm\",\n \"__typename\": \"I18nString\"\n }\n ],\n \"classTreeNode\": {\n \"classe\": {\n \"classesTooltips\": [],\n \"__typename\": \"Classe\"\n },\n \"__typename\": \"ClassTreeNode\"\n },\n \"__typename\": \"MvClassTreeLevelUi\"\n },\n {\n \"id\": '000_020',\n \"color\": \"#32cd32\",\n \"classId\": 718,\n \"childrenIds\": [],\n \"positionInTree\": [\n 3\n ],\n \"level\": 1,\n \"parentId\": null,\n \"defaultName\": \"0-20 cm\",\n \"classTreeId\": 46,\n \"pixelValue\": '000_020',\n \"i18nStrings\": [\n {\n \"language\": \"pt-BR\",\n \"stringValue\": \"0-20 cm\",\n \"__typename\": \"I18nString\"\n },\n {\n \"language\": \"en\",\n \"stringValue\": \"0-20 cm\",\n \"__typename\": \"I18nString\"\n }\n ],\n \"classTreeNode\": {\n \"classe\": {\n \"classesTooltips\": [],\n \"__typename\": \"Classe\"\n },\n \"__typename\": \"ClassTreeNode\"\n },\n \"__typename\": \"MvClassTreeLevelUi\"\n },\n {\n \"id\": '000_030',\n \"color\": \"#32cd32\",\n \"classId\": 718,\n \"childrenIds\": [],\n \"positionInTree\": [\n 3\n ],\n \"level\": 1,\n \"parentId\": null,\n \"defaultName\": \"0-30 cm\",\n \"classTreeId\": 46,\n \"pixelValue\": '000_030',\n \"i18nStrings\": [\n {\n \"language\": \"pt-BR\",\n \"stringValue\": \"0-30 cm\",\n \"__typename\": \"I18nString\"\n },\n {\n \"language\": \"en\",\n \"stringValue\": \"0-30 cm\",\n \"__typename\": \"I18nString\"\n }\n ],\n \"classTreeNode\": {\n \"classe\": {\n \"classesTooltips\": [],\n \"__typename\": \"Classe\"\n },\n \"__typename\": \"ClassTreeNode\"\n },\n \"__typename\": \"MvClassTreeLevelUi\"\n },\n ]\n};\n","import { gql } from 'graphql.macro'\n\nexport const GET_BASE_DATA = gql`\n query {\n app @client {\n baseParams {\n activeClassTreeOptionValue\n activeClassTreeNodeIds\n activeBaseClassTreeNodeIds\n degradationType\n degradationFragmentationIsolationValue\n }\n }\n }\n`;\n\nexport const GET_CLASSES_LEVELS_LIST = gql`\n query GetModuleClasses($moduleId: Int, $submoduleKey: String!) {\n submoduleByModuleIdAndKey(moduleId: $moduleId, key: $submoduleKey) {\n id\n key\n submoduleTrees {\n classTree {\n hasTogglesPerLevel\n key\n i18nStrings {\n\t\t\t\t\t\tlanguage\n\t\t\t\t\t\tstringValue\n }\n }\n }\n }\n }\n`;\n\nexport const GET_CLASS_TREE_DATA = gql`\n query GetClassTreeData(\n $classTreeKey: String!,\n ) {\n classTreeByKey(key: $classTreeKey) {\n id\n key\n \ti18nStrings {\n\t\t\t\tlanguage\n\t\t\t\tstringValue\n }\n\t\t\tmvClassTreeLevelsUi {\n id\n color\n classId\n childrenIds\n positionInTree\n level\n parentId\n defaultName\n classTreeId\n pixelValue\n\t\t\t\ti18nStrings {\n\t\t\t\t\tlanguage\n\t\t\t\t\tstringValue\n\t\t\t\t}\n classTreeNode {\n classe {\n classesTooltips {\n id\n }\n }\n }\n }\n }\n }\n`;\n","import React, { useEffect, useState } from 'react';\nimport _ from 'lodash';\nimport { useApolloClient, useQuery } from '@apollo/react-hooks';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\n\nimport CircularProgress from '@material-ui/core/CircularProgress';\n\nimport ClassTreesControl from './components/ClassTreesControl';\nimport ClassLegendList from './components/ClassLegendList';\nimport { updateStateCache as uncurriedUpdateStateCache } from '../../../../../../utils/apollo';\n\nimport usePrevious from '../../../../../../hooks/usePrevious';\n\nimport getCustomClient from '../../../../../../lib/getCustomClient';\n\nimport customClassTrees from './customClassTrees';\n\nimport {\n GET_BASE_DATA,\n GET_CLASSES_LEVELS_LIST,\n GET_CLASS_TREE_DATA,\n} from './query';\n\nimport styles from './GenericClasses.module.scss';\n\nconst mapClassTreeKeyToDefaultLevels = {\n 'soil_texture_sand': [1],\n 'deforestation_annual_data': [1, 2],\n 'regeneration_annual_data': [1, 2],\n 'regeneration_accumulated_data': [1, 2],\n 'mining_annual': [1],\n};\n\nconst degrationPixelValues = [\n // Floresta\n 3, // Formação Florestal\n 4, // Formação Savânica\n 5, // Mangue\n 6, // Floresta Alagável\n 49, // Restinga Arbórea\n // Formação Natural não Florestal\n 11, // Campo Alagado e Área Pantanosa\n 12, // Formação Campestre\n 50, // Restinga Herbácea\"\n];\n\nconst mapCustomClassTreeKeyToDefaultValue = {\n 'soil_texture_default': '000_030',\n 'soil_texture_textural': '000_030',\n};\n\nconst mapClassTreeOptionValueToCustomClassTreeKey = {\n 'soil_texture_sand': 'soil_texture_default',\n 'soil_texture_silt': 'soil_texture_default',\n 'soil_texture_clay': 'soil_texture_default',\n 'soil_texture_textural_group': 'soil_texture_default',\n 'soil_texture_textural_subgroup': 'soil_texture_default',\n 'soil_texture_texture_class': 'soil_texture_textural',\n};\n\nexport default function GenericClasses({\n clientType,\n hideLegendIndex,\n hideParentToggle,\n moduleId,\n submoduleKey,\n hideLevelsControl,\n secondaryClassTreeKey,\n hasCustomClassTree,\n hideNestedNodes = false,\n}) {\n const isMobile = useMediaQuery('(max-width: 768px)');\n const locale = localStorage.getItem('locale') || 'pt-BR';\n const client = useApolloClient();\n const hasBaseMode = !!secondaryClassTreeKey || hasCustomClassTree;\n const [baseClassTreeNodes, setBaseClassTreeNodes] = useState(null);\n const updateStateCache = _.partial(uncurriedUpdateStateCache, client);\n const { data: baseData } = useQuery(GET_BASE_DATA);\n const { data: classesTreesData } = useQuery(GET_CLASSES_LEVELS_LIST, {\n variables: {\n moduleId,\n submoduleKey\n },\n client: getCustomClient(clientType)\n });\n\n const activeClassTreeNodeIds = _.get(baseData, 'app.baseParams.activeClassTreeNodeIds');\n const isOnDegradationModule = _.includes(submoduleKey, 'degradation');\n const degradationType = _.get(baseData, 'app.baseParams.degradationType');\n const degradationFragmentationIsolationValue = _.get(baseData, 'app.baseParams.degradationFragmentationIsolationValue');\n const prevDegradationFragmentationIsolationValue = usePrevious(degradationFragmentationIsolationValue);\n const isOnDegradationCrossingMode = hasBaseMode && degradationType === 'crossing';\n\n const isOnInitialRenderingWithQueryParams = !_.isEmpty(activeClassTreeNodeIds) &&\n _.isUndefined(classesTreesData);\n\n const classTrees = _.get(classesTreesData, 'submoduleByModuleIdAndKey[0].submoduleTrees');\n const activeClassTreeOptionValue = _.get(baseData, 'app.baseParams.activeClassTreeOptionValue');\n const activeBaseClassTreeNodeIds = _.get(baseData, 'app.baseParams.activeBaseClassTreeNodeIds');\n const activeBaseClassTreeNodeId = _.first(activeBaseClassTreeNodeIds);\n\n const { data: classTreeData, loading: loadingClassTreeData, refetch: refetchClassTreeData } = useQuery(GET_CLASS_TREE_DATA, {\n variables: {\n classTreeKey: activeClassTreeOptionValue\n },\n skip: !activeClassTreeOptionValue,\n client: getCustomClient(clientType)\n });\n let classTreeLevelsList = _.get(classTreeData, 'classTreeByKey[0].mvClassTreeLevelsUi') || [];\n\n // Filter class tree nodes only when module is degradation\n if (hasBaseMode && isOnDegradationModule && _.get(classTreeData, 'classTreeByKey[0].key') === 'default') {\n classTreeLevelsList = _.chain(classTreeLevelsList)\n .filter((node) => _.includes(degrationPixelValues, _.get(node, 'pixelValue')))\n .map((node) => {\n const parentNode = _.find(classTreeLevelsList, { id: node.parentId });\n\n return [parentNode, node];\n })\n .flatten()\n .orderBy('id', 'asc')\n .uniqBy('id')\n .value();\n }\n\n if (hideNestedNodes) {\n classTreeLevelsList = _.filter(classTreeLevelsList, { level: 1 });\n }\n\n useEffect(() => {\n if (!hasCustomClassTree) {\n setBaseClassTreeNodes(null);\n }\n }, [submoduleKey, hasCustomClassTree]);\n\n useEffect(() => {\n if (hasCustomClassTree && activeClassTreeOptionValue) {\n const customClassTreeKey = mapClassTreeOptionValueToCustomClassTreeKey[activeClassTreeOptionValue];\n const nodes = customClassTrees[customClassTreeKey];\n const classTreeInitialValue = mapCustomClassTreeKeyToDefaultValue[customClassTreeKey];\n\n setBaseClassTreeNodes(nodes);\n updateStateCache(\n 'app.baseParams',\n [ 'activeBaseClassTreeNodeIds', [classTreeInitialValue] ]\n );\n }\n }, [activeClassTreeOptionValue, hasCustomClassTree]);\n\n useEffect(() => {\n if (!prevDegradationFragmentationIsolationValue && degradationFragmentationIsolationValue) {\n refetchClassTreeData({\n classTreeKey: secondaryClassTreeKey\n });\n } else if (prevDegradationFragmentationIsolationValue && !degradationFragmentationIsolationValue) {\n refetchClassTreeData({\n classTreeKey: activeClassTreeOptionValue\n });\n }\n }, [prevDegradationFragmentationIsolationValue, degradationFragmentationIsolationValue]);\n\n useEffect(() => {\n if (isOnInitialRenderingWithQueryParams) {\n return;\n }\n\n const activeTreeIsInCurrentSubmoduleTrees = _.some(\n classTrees,\n { classTree: { key: activeClassTreeOptionValue }}\n );\n\n if (baseData && classesTreesData && (!activeClassTreeOptionValue || !activeTreeIsInCurrentSubmoduleTrees)) {\n const firstTree = _.get(classTrees, '[0].classTree');\n const firstTreeKey = _.get(firstTree, 'key');\n\n updateStateCache('app.baseParams',\n [ 'activeClassTreeOptionValue', firstTreeKey ],\n [ 'activeSubmodule', submoduleKey ]\n );\n }\n }, [baseData, classesTreesData, activeClassTreeOptionValue, submoduleKey]);\n\n useEffect(() => {\n if (isOnInitialRenderingWithQueryParams) {\n return;\n }\n\n if (baseData && classTreeData && activeClassTreeOptionValue) {\n let nodeIds = _.map(classTreeLevelsList, 'id');\n\n if (mapClassTreeKeyToDefaultLevels[activeClassTreeOptionValue] || submoduleKey === 'infrastructure_main') {\n let defaultLevels = mapClassTreeKeyToDefaultLevels[activeClassTreeOptionValue];\n\n if (submoduleKey === 'infrastructure_main') {\n defaultLevels = [1, 2];\n }\n\n nodeIds = _.chain(classTreeLevelsList)\n .filter((node) => _.includes(defaultLevels, _.get(node, 'level')))\n .map('id')\n .value();\n } else if (submoduleKey === 'regeneration_annual') {\n nodeIds = _.chain(classTreeLevelsList)\n .filter(({ positionInTree }) => _.first(positionInTree) !== 1)\n .map('id')\n .value();\n }\n\n updateStateCache('app.baseParams',\n [ 'activeClassTreeNodeIds', nodeIds ]\n );\n }\n }, [classTreeData, activeClassTreeOptionValue]);\n\n if (!baseData || !classesTreesData) {\n return null;\n }\n\n if (!activeClassTreeOptionValue) {\n return null;\n }\n\n const activeClassTree = _.find(\n classTrees, { classTree: { key: activeClassTreeOptionValue } }\n )\n const nodesOfActiveClassTree = classTreeLevelsList;\n\n const levels = _.sortBy(_.uniq(_.map(nodesOfActiveClassTree, 'level')))\n const activeLevels = _.filter(levels, (levelId) => {\n const idsByLevel = _.map(_.filter(nodesOfActiveClassTree, { level: levelId }), 'id')\n const idsByLevelActive = _(idsByLevel)\n .filter((id) => _.includes(activeClassTreeNodeIds, id))\n .compact()\n .value();\n\n return _.size(idsByLevelActive) === _.size(idsByLevel);\n })\n\n const handleActiveTreeOptionChange = (classTreeOption) => {\n const classTreeKey = classTreeOption.value\n const activeClassTree = _.find(\n classTrees, { classTree: { key: classTreeKey } }\n )\n const nodesOfActiveClassTree = classTreeLevelsList;\n let nodeIds = _.map(nodesOfActiveClassTree, 'id')\n\n if (mapClassTreeKeyToDefaultLevels[classTreeKey]) {\n const defaultLevels = mapClassTreeKeyToDefaultLevels[classTreeKey]\n nodeIds = _.chain(nodesOfActiveClassTree)\n .filter((node) => _.includes(defaultLevels, _.get(node, 'level')))\n .map('id')\n .value()\n }\n\n setBaseClassTreeNodes(null);\n updateStateCache(\n 'app.baseParams',\n [ 'activeClassTreeOptionValue', classTreeKey ],\n [ 'activeClassTreeNodeIds', nodeIds ],\n [ 'activeBaseClassTreeNodeIds', [] ]\n );\n };\n\n const handleClassTreeNodeToggle = (classTreeNode) => {\n const nodeId = _.get(classTreeNode, 'id')\n\n if (_.includes(activeClassTreeNodeIds, nodeId)) {\n updateStateCache('app.baseParams', [\n 'activeClassTreeNodeIds',\n _.without(activeClassTreeNodeIds, nodeId)\n ]);\n } else {\n updateStateCache('app.baseParams', [\n 'activeClassTreeNodeIds',\n [ ...activeClassTreeNodeIds, nodeId ]\n ]);\n }\n };\n\n const handleLevelToggle = (levelId) => {\n const idsByLevel = _.map(_.filter(nodesOfActiveClassTree, { level: levelId }), 'id')\n\n if (_.includes(activeLevels, levelId)) {\n let idsClone = _.clone(activeClassTreeNodeIds);\n idsClone = _.filter(idsClone, (id) => !_.includes(idsByLevel, id))\n\n updateStateCache('app.baseParams', [\n 'activeClassTreeNodeIds',\n idsClone\n ]);\n } else {\n const nextIds = _.uniq(_.concat(activeClassTreeNodeIds, idsByLevel))\n\n updateStateCache('app.baseParams', [\n 'activeClassTreeNodeIds',\n nextIds\n ]);\n }\n };\n\n const handleClassTreeNodeShowTooltip = (classTreeNode) => {\n if (isMobile) {\n updateStateCache('app',\n [ 'headerIsVisible', false ],\n [ 'showClassInfo', classTreeNode.id ]\n );\n } else {\n updateStateCache('app',\n [ 'showClassInfo', classTreeNode.id ]\n );\n }\n };\n\n const handleClassLegendListSelectChange = (_dataKey, id) => {\n if (id) {\n refetchClassTreeData({\n classTreeKey: secondaryClassTreeKey\n });\n updateStateCache('app.baseParams', [\n 'activeBaseClassTreeNodeIds',\n [id]\n ]);\n } else {\n refetchClassTreeData({\n classTreeKey: activeClassTreeOptionValue\n });\n updateStateCache('app.baseParams', [\n 'activeBaseClassTreeNodeIds',\n []\n ]);\n }\n\n setBaseClassTreeNodes(baseClassTreeNodes || classTreeLevelsList);\n };\n\n const classesControlTreeOptions = _.map(classTrees, (classTree) => ({\n label: _.chain(classTree)\n .get('classTree.i18nStrings')\n .find({ language: locale })\n .get('stringValue')\n .value(),\n value: _.get(classTree, 'classTree.key')\n }));\n\n const baseNodesOptions = _.map((baseClassTreeNodes || classTreeLevelsList), (node) => ({\n label: _.chain(node)\n .get('i18nStrings')\n .find({ language: locale })\n .get('stringValue')\n .value(),\n id: _.get(node, 'id')\n }));\n\n return (\n \n { !isOnDegradationCrossingMode &&\n
\n )\n}\n","import { gql } from 'graphql.macro'\n\nexport const GET_COMPONENT_INITIALIZATION_DATA = gql`\n query {\n app @client {\n baseParams {\n activeObjectTreeNodeIds\n }\n }\n }\n`\n\nexport const GET_CLASSES_LEVELS_LIST = gql`\n query GetModuleClasses($moduleId: Int, $submoduleKey: String!) {\n submoduleByModuleIdAndKey(moduleId: $moduleId, key: $submoduleKey) {\n id\n key\n submoduleTrees {\n classTree {\n key\n i18nStrings {\n\t\t\t\t\t\tlanguage\n\t\t\t\t\t\tstringValue\n }\n mvClassTreeLevelsUi {\n id\n color\n classId\n childrenIds\n positionInTree\n level\n parentId\n defaultName\n i18nStrings {\n\t\t\t\t\t\t\tlanguage\n\t\t\t\t\t\t\tstringValue\n }\n classTreeNode {\n classe {\n classesTooltips {\n id\n }\n }\n }\n }\n }\n }\n }\n }\n`\n","import React, { useState } from 'react'\nimport classnames from 'classnames'\nimport _ from 'lodash'\nimport { useApolloClient, useQuery } from '@apollo/react-hooks'\nimport RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';\nimport RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';\nimport Collapse from '@material-ui/core/Collapse'\nimport ExpandLessIcon from '@material-ui/icons/ExpandLess'\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore'\nimport IconButton from '@material-ui/core/IconButton'\nimport { makeStyles } from '@material-ui/core/styles'\nimport { FormattedMessage } from 'react-intl'\nimport CloudDownloadIcon from '@material-ui/icons/CloudDownload';\n\nimport { updateStateCache } from '../../../../../../utils/apollo'\nimport { onCurrentLocaleCustom } from '../../../../../../utils/locale'\n\nimport { GET_COMPONENT_INITIALIZATION_DATA } from './query'\n\nimport styles from './GeospatialObjects.module.scss'\n\nimport geospatialNodes from './geospatialNodes';\n\nconst useStyles = makeStyles((theme) => ({\n link: {\n color: `#16a085 !important`,\n },\n}))\n\nconst MAP_POSITION_IN_TREE_TO_DOWNLOAD_URL = {\n'1.1.1': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_public_airfield.zip',\n'1.1.2': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_private_airfield.zip',\n'1.1.3': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_helipad.zip', \n'1.2.1': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_lock.zip',\n'1.2.2': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_transshipment_station.zip',\n'1.2.3': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_waterway.zip',\n'1.2.4': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_port_facility_for_tourism.zip',\n'1.2.5': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_registered_port_facility.zip',\n'1.2.6': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_organized_port.zip',\n'1.2.7': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_private_use_terminal.zip',\n'1.2.8': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_other_port_facilities.zip',\n'1.3.1': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_aqueduct.zip',\n'1.3.2.1': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_transportation_gas_pipeline.zip',\n'1.3.2.2': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_distribution_gas_pipeline.zip',\n'1.3.2.3': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_outflow_gas_pipeline.zip', \n'1.3.3': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_mining_pipeline.zip',\n'1.3.4': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_oil_pipeline.zip',\n'1.3.5': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_polyduct.zip',\n'1.3.6': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_pipeline_not_identified.zip',\n'1.4': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_railroad.zip',\n'1.5.1': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_state_highway.zip',\n'1.5.2': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_federal_highway.zip',\n'1.5.3': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_other_road_sections.zip',\n'2.1.1.1.1': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_oil_refineries_and_other_processing_facilities.zip', \n'2.1.1.1.2': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_oil_and_oil_products_storage_and_distribution_terminal.zip', \n'2.1.1.2.1': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_compression_station.zip', \n'2.1.1.2.2': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_gas_delivery_point.zip', \n'2.1.1.2.3': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_natural_gas_processing_unit.zip', \n'2.1.1.2.4': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_liquefied_natural_gas_terminals.zip',\n'2.1.2.1': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_biodiesel_plant.zip',\n'2.1.2.2': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_biogas_plant.zip',\n'2.1.2.3': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_ethanol_plant.zip',\n'2.1.3.1': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_liquefied_petroleum_gas_base.zip',\n'2.1.3.2': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_liquid_fuel_base.zip',\n'2.2.1.1': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_substation.zip',\n'2.2.1.2': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_transmission_line.zip',\n'2.2.2.1.1': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_wind_power_plant.zip',\n'2.2.2.1.2': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_photovoltaic_solar_power_plant.zip',\n'2.2.2.1.3': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_biomass_thermal_power_plant.zip',\n'2.2.2.1.4': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_hydroelectric_power_plant.zip',\n'2.2.2.1.5': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_small_hydropower_plant.zip',\n'2.2.2.1.6': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_hydroelectric_generating_centers.zip',\n'2.2.2.2.1': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_fossil_fuel_thermal_power_plant.zip',\n'2.2.2.2.2': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_thermonuclear_power_plant.zip',\n'3.1': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_energetic_product_mine.zip', \n'3.2': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_metallic_product_mine.zip', \n'3.3': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_other_products_mine.zip', \n'3.4': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_mining_dam.zip',\n'4.1': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_warehouses.zip', \n'4.2': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_slaughterhouse.zip', \n'5.1': 'https://storage.googleapis.com/mapbiomas-public/initiatives/brasil/collection_8/downloads/infrastructure/structure_base_radio_station.zip' \n};\n\nexport default function GeospatialObjects({\n objectTree = []\n}) {\n const classes = useStyles()\n const apolloClient = useApolloClient()\n const { data, loading } = useQuery(GET_COMPONENT_INITIALIZATION_DATA)\n if (loading || !data) {\n return null\n }\n\n const appState = data.app\n const updateState = _.partial(updateStateCache, apolloClient)\n\n const [expandedNodeIds, setExpandedNodeIds] = useState([])\n const nodes = _.get(objectTree, 'geospatialObjectCategoryTreeLevels')\n // const nodes = geospatialNodes\n console.log(\"🚀 ~ nodes:\", nodes)\n\n const toggleTreeNode = (node) => {\n if (_.includes(expandedNodeIds, node.id)) {\n setExpandedNodeIds(_.without(expandedNodeIds, node.id))\n } else {\n setExpandedNodeIds([ ...expandedNodeIds, node.id ])\n }\n }\n\n const handleObjectTreeNodeToggle = (objectTreeNode) => {\n const nodeId = _.get(objectTreeNode, 'id')\n\n if (_.includes(appState.baseParams.activeObjectTreeNodeIds, nodeId)) {\n updateState('app.baseParams', [\n 'activeObjectTreeNodeIds',\n _.without(appState.baseParams.activeObjectTreeNodeIds, nodeId)\n ])\n } else {\n updateState('app.baseParams', [\n 'activeObjectTreeNodeIds',\n [ nodeId ]\n ])\n }\n }\n\n const renderExpandIcon = (node) => {\n const expanded = _.includes(expandedNodeIds, node.id)\n const icon = expanded ? \n
\n }\n { !loadingClassTreeData &&\n \n { _.isEmpty(node.childrenIds) && renderCheckbox(node) }\n \n { prettyIndexOfNodeInTree }. { onCurrentLocaleCustom(node.i18nStrings) }\n { downloadUrl &&\n \n
\n \n { renderClassTreeBranch({ parentId: node.id }) }\n
\n \n
\n )\n}\n","import { gql } from 'graphql.macro';\n\nexport const GET_BASE_DATA = gql`\n query {\n app @client {\n baseParams {\n activeClassTreeNodeIds\n }\n }\n }\n`;\n","import React, { useEffect } from 'react';\nimport _ from 'lodash';\nimport { useQuery } from '@apollo/react-hooks';\nimport { FormattedMessage } from 'react-intl';\n\nimport Checkbox from '@material-ui/core/Checkbox';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport IconButton from '@material-ui/core/IconButton';\n\nimport useFormatMessage from '../../../../../../hooks/useFormatMessage';\n\nimport styles from './TransitionClasses.module.scss';\n\nimport {\n GET_BASE_DATA,\n GET_TERRITORIES_LIST,\n} from './query';\n\n// non_vegetated_areas_to_vegetated,\n// increase_of_water_surface,\n// reduction_of_water_surface,\n// gain_of_forest_plantations,\n// vegetated_areas_to_non_vegetated\n\nconst transitionClassesData = [\n {\n id: 'non_vegetated_areas_to_vegetated',\n pixelValue: 1,\n label: 'Transições de classes de agropecuária ou áreas não vegetadas para cobertura florestal ou áreas naturais não florestais.',\n color: '#06FF03'\n },\n {\n id: 'increase_of_water_surface',\n pixelValue: 2,\n label: 'Transições que acrescem superfície de água',\n color: '#3FACFF'\n },\n {\n id: 'reduction_of_water_surface',\n pixelValue: 3,\n label: 'Transições que reduzem superfície de água',\n color: '#FFA505'\n },\n {\n id: 'gain_of_forest_plantations',\n pixelValue: 4,\n label: 'Transições com ganho de áreas de silvicultura.',\n color: '#8A2BE2'\n },\n {\n id: 'vegetated_areas_to_non_vegetated',\n pixelValue: 5,\n label: 'Transições de cobertura florestal ou áreas naturais não florestais para agropecuária ou áreas não vegetadas.',\n color: '#FF0004'\n },\n {\n id: 'areas_without_transitions_or_unobserved',\n pixelValue: 6,\n label: 'Áreas sem transição ou transições que envolvem áreas não observadas ou transições entre classes dentro do nivel 1 de legenda.',\n color: '#AAA9A9'\n },\n];\n\nconst urbanTransitionClassesData = [\n {\n id: 'non_urban_to_urban',\n pixelValue: 11,\n label: 'Expansão urbana',\n color: '#ff0000'\n },\n {\n id: 'urban_areas_stable',\n pixelValue: 12,\n label: 'Urbano estável',\n color: '#ffcccc'\n },\n];\n\nexport default function TransitionClasses({\n isUrban = false,\n onItemsChange = () => {},\n}) {\n const formatMessage = useFormatMessage();\n const { data: baseData } = useQuery(GET_BASE_DATA);\n const classesData = !isUrban ? transitionClassesData : urbanTransitionClassesData;\n const activeItems = _.get(baseData, 'app.baseParams.activeClassTreeNodeIds') || [];\n const allClassesActive = _.size(activeItems) === _.size(classesData);\n\n const handleItemsChange = (ids) => {\n onItemsChange({ activeClassTreeNodeIds: ids });\n };\n\n useEffect(() => {\n handleItemsChange(_.map(classesData, 'pixelValue'));\n }, [isUrban]);\n\n const itemIsActive = (id) => {\n return _.includes(activeItems, id);\n };\n\n const toggleActiveItem = (id) => {\n if (itemIsActive(id)) {\n let itemsClone = _.clone(activeItems);\n itemsClone = _.filter(itemsClone, (itemId) => itemId !== id);\n\n handleItemsChange(itemsClone);\n } else {\n handleItemsChange([\n ...activeItems,\n id\n ]);\n }\n };\n\n const toggleAllItems = () => {\n if (allClassesActive) {\n handleItemsChange([]);\n } else {\n handleItemsChange(_.map(classesData, 'pixelValue'));\n }\n };\n\n return (\n \n Categorias\n
\n { renderClassTreeBranch({ parentId: null }) }\n\n
\n
\n );\n}\n","import React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport styles from './QualityClasses.module.scss';\n\nexport default function QualityClasses() {\n return (\n - \n { _.map(classesData, (item) => {\n return (\n
\n \n { itemIsActive(item.pixelValue) ?
\n \n );\n }) }\n \n
\n
\n );\n}\n","import React from 'react';\n\nimport ClickAwayListener from '@material-ui/core/ClickAwayListener';\nimport Fade from '@material-ui/core/Fade';\nimport Popper from '@material-ui/core/Popper';\nimport Paper from '@material-ui/core/Paper';\n\nimport useFormatMessage from '../../../../../../hooks/useFormatMessage';\n\nimport styles from './TranslateOptionsBox.module.scss';\n\nexport default function TranslateOptionsBox({\n anchorEl,\n onClose = () => {},\n}) {\n const formatMessage = useFormatMessage()\n const open = Boolean(anchorEl);\n\n const handleLocaleChange = (locale) => {\n localStorage.setItem('locale', locale);\n window.location.href = '/';\n };\n\n return (\n \n
\n
\n );\n}\n","export function parseJwt(token) {\n var base64Url = token.split('.')[1];\n var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');\n var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {\n return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);\n }).join(''));\n\n return JSON.parse(jsonPayload);\n}\n\nexport default function parseToken(token, apiToken) {\n const parsedToken = parseJwt(token);\n\n localStorage.setItem('token', token);\n localStorage.setItem('tokenAPI', apiToken);\n localStorage.setItem('sub', parsedToken.sub);\n localStorage.setItem('name', parsedToken.name);\n localStorage.setItem('email', parsedToken.email);\n}\n","import React, { useState } from 'react';\nimport _ from 'lodash';\nimport { FormattedMessage } from 'react-intl';\n\nimport Button from '@material-ui/core/Button';\nimport FormControl from '@material-ui/core/FormControl';\nimport TextField from '@material-ui/core/TextField';\n\nimport parseToken from '../../../../../../../../helpers/parseToken';\nimport useFormatMessage from '../../../../../../../../hooks/useFormatMessage';\n\nimport toast from '../../../../../../../../utils/toast';\n\nimport styles from './LoginForm.module.scss';\n\nconst API_URL = process.env.REACT_APP_MAPBIOMAS_LOGIN_API_BASE_URL;\n\nconst initialState = {\n login: '',\n password: '',\n};\n\nexport default function LoginForm({\n onRecoveryPassword = () => {}\n}) {\n const formatMessage = useFormatMessage();\n const [state, setState] = useState(initialState);\n\n const handleStateChange = (paramKey, paramValue) => {\n setState({\n ...state,\n [paramKey]: paramValue\n });\n };\n\n const handleTextChange = (paramKey, event) => {\n handleStateChange(paramKey, event.target.value);\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n const { login, password } = state;\n\n const payload = { email: login, password };\n\n fetch(`${ API_URL }/v1/tokens`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(payload)\n })\n .then((response) => response.json())\n .then((data) => {\n if (_.get(data, 'success')) {\n const id = _.get(data, 'id');\n const token = _.get(data, 'token');\n\n if (token) {\n localStorage.setItem('tokenId', id);\n parseToken(token);\n window.location.href = '/?login=true';\n }\n } else {\n toast(_.get(data, 'message') || formatMessage('mapbiomas.toast.error'), 'error');\n }\n })\n .catch((error) => {\n toast(formatMessage('mapbiomas.toast.error'), 'error');\n });\n };\n\n return (\n \n )\n}\n","import React, { useState } from 'react';\nimport _ from 'lodash';\nimport { FormattedMessage } from 'react-intl';\n\nimport Button from '@material-ui/core/Button';\nimport FormControl from '@material-ui/core/FormControl';\nimport TextField from '@material-ui/core/TextField';\n\nimport useFormatMessage from '../../../../../../../../hooks/useFormatMessage';\n\nimport toast from '../../../../../../../../utils/toast';\n\nimport styles from './SignUpForm.module.scss';\n\nconst initialState = {\n name: '',\n email: '',\n organization: '',\n motivation: '',\n};\n\nconst API_URL = process.env.REACT_APP_MAPBIOMAS_LOGIN_API_BASE_URL;\n\nexport default function SignUpForm({\n onCancel = () => {},\n}) {\n const formatMessage = useFormatMessage();\n const [state, setState] = useState(initialState);\n const [showInfo, setShowInfo] = useState(false);\n\n const handleStateChange = (paramKey, paramValue) => {\n setState({\n ...state,\n [paramKey]: paramValue\n });\n };\n\n const handleTextChange = (paramKey, event) => {\n handleStateChange(paramKey, event.target.value);\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n const {\n name,\n email,\n organization,\n motivation,\n } = state;\n\n const payload = {\n user: {\n email,\n name,\n organization,\n motivation,\n }\n };\n\n fetch(`${ API_URL }/v1/users`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(payload)\n })\n .then((response) => response.json())\n .then((data) => {\n if (_.get(data, 'user')) {\n setState(initialState);\n setShowInfo(true);\n toast(formatMessage('mapbiomas.toast.confirm_account'), 'success');\n } else {\n toast(_.get(data, 'email[0]') || formatMessage('mapbiomas.toast.error'), 'error');\n }\n })\n .catch((error) => {\n toast(formatMessage('mapbiomas.toast.error'), 'error');\n });\n };\n\n const renderInfo = () => {\n return (\n \n
\n - \n
- \n
\n \n \n - \n
\n \n \n - \n
\n \n \n - \n
\n \n \n
\n
\n { showInfo && renderInfo() }\n { !showInfo && renderForm() }\n
\n )\n}\n","import React, { useEffect, useState } from 'react';\nimport _ from 'lodash';\nimport { FormattedMessage } from 'react-intl';\n\nimport Button from '@material-ui/core/Button';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport TextField from '@material-ui/core/TextField';\n\nimport useFormatMessage from '../../../../../../../../hooks/useFormatMessage';\n\nimport styles from './MapForm.module.scss';\n\nconst initialState = {\n title: '',\n description: '',\n updateSnapshot: false,\n};\n\nexport default function MapForm({\n editMode = false,\n data,\n onCancel = () => {},\n onSubmit = () => {},\n}) {\n const formatMessage = useFormatMessage();\n const [state, setState] = useState(initialState);\n\n useEffect(() => {\n if (data) {\n setState({\n title: _.get(data, 'name'),\n description: _.get(data, 'description'),\n });\n }\n }, [data])\n\n const handleStateChange = (paramKey, paramValue) => {\n setState({\n ...state,\n [paramKey]: paramValue\n });\n };\n\n const handleTextChange = (paramKey, event) => {\n handleStateChange(paramKey, event.target.value);\n };\n\n const handleUpdateSnapshotToggle = () => {\n handleStateChange('updateSnapshot', !state.updateSnapshot);\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n setState(initialState);\n onSubmit(state);\n };\n\n const baseTranslationKey = !editMode ? 'new_map' : 'edit_map';\n\n return (\n \n )\n}\n","import React from 'react';\nimport _ from 'lodash';\nimport classnames from 'classnames';\n\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';\nimport EditIcon from '@material-ui/icons/Edit';\nimport DeleteIcon from '@material-ui/icons/Delete';\n\nimport useFormatMessage from '../../../../../../../../hooks/useFormatMessage';\n\nimport styles from './MapList.module.scss';\n\nexport default function MapList({\n data = [],\n onViewMap = () => {},\n onEditMap = () => {},\n onDeleteMap = () => {},\n}) {\n const formatMessage = useFormatMessage();\n\n const handleDelete = (id) => {\n if (confirm(formatMessage('mapbiomas.user.my_maps.list.actions.delete_confirmation'))) {\n onDeleteMap(id);\n }\n };\n\n if (_.isEmpty(data)) {\n return null;\n }\n\n return (\n - \n { _.map(data, (item) => {\n return (\n
- \n \n\n
{ item.name }
\n { item.description &&{ item.description }
}\n\n\n\n \n\n \n \n \n\n \n \n \n\n \n \n );\n }) }\n
\n
\n \n
\n \n );\n}\n","import React, { useState } from 'react';\nimport _ from 'lodash';\nimport { FormattedMessage } from 'react-intl';\n\nimport Button from '@material-ui/core/Button';\nimport FormControl from '@material-ui/core/FormControl';\nimport TextField from '@material-ui/core/TextField';\n\nimport useFormatMessage from '../../../../../../../../hooks/useFormatMessage';\n\nimport toast from '../../../../../../../../utils/toast';\n\nimport styles from './PasswordRecoveryForm.module.scss';\n\nconst API_URL = process.env.REACT_APP_MAPBIOMAS_LOGIN_API_BASE_URL;\n\nconst initialState = {\n email: '',\n};\n\nexport default function PasswordRecoveryForm({\n onCancel = () => {},\n}) {\n const formatMessage = useFormatMessage();\n const [state, setState] = useState(initialState);\n const [showInfo, setShowInfo] = useState(false);\n\n const handleStateChange = (paramKey, paramValue) => {\n setState({\n ...state,\n [paramKey]: paramValue\n });\n };\n\n const handleTextChange = (paramKey, event) => {\n handleStateChange(paramKey, event.target.value);\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n const {\n email,\n } = state;\n\n const payload = { email };\n\n fetch(`${ API_URL }/v1/users/send_recovery_instructions`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(payload)\n })\n .then((response) => response.json())\n .then((data) => {\n if (_.get(data, 'success')) {\n handleStateChange('email', '');\n toast(formatMessage('mapbiomas.toast.email_sent'), 'success');\n } else {\n toast(_.get(data, 'errors[0]') || formatMessage('mapbiomas.toast.error'), 'error');\n }\n })\n .catch(() => {\n toast(formatMessage('mapbiomas.toast.error'), 'error');\n });\n };\n\n const renderInfo = () => {\n return (\n \n \n
\n { showInfo && renderInfo() }\n { !showInfo && renderForm() }\n
\n )\n}\n","import { gql } from 'graphql.macro';\n\nexport const GET_BASE_DATA = gql`\n {\n app @client {\n activeBaseMap\n activeLayers\n layersOpacity\n activeModule\n activeModuleContent\n activeYear\n headerIsVisible\n mapFlyTo\n mapPointInfo {\n latlng\n parsedBBox\n }\n showClassInfo\n showDashboardInfo\n showBeforeAndAfterMosaic\n baseParams {\n groupType\n degradationType\n degradationFragmentationIsolationValue\n degradationCrossingValues {\n degradation_fragmentation_edge_area\n degradation_fragmentation_fragment_size\n degradation_fragmentation_isolation_medium_size\n degradation_fragmentation_isolation_distance\n degradation_fragmentation_isolation_big_size\n degradation_fire_frequency\n degradation_fire_time\n degradation_secondary_vegetation_age\n parsedParams\n }\n territoryType\n territorySubtype\n territory\n territories {\n id\n label\n territoryTypeId\n territoryTypeLabel\n territoryBBox\n }\n crossing\n classesViewMode\n activeClassesLevelsListItems\n activeTransitionsClassesListItems\n activePastureQualityQualityClassesListItems\n yearRange\n }\n }\n }\n`;\n","import React, { useEffect, useState } from 'react';\nimport { useApolloClient, useQuery } from '@apollo/react-hooks';\nimport classnames from 'classnames';\nimport _ from 'lodash';\nimport { FormattedMessage } from 'react-intl';\nimport * as turf from '@turf/turf';\n\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport AddIcon from '@material-ui/icons/Add';\nimport Button from '@material-ui/core/Button';\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\nimport ExitToAppIcon from '@material-ui/icons/ExitToApp';\nimport IconButton from '@material-ui/core/IconButton';\nimport PersonIcon from '@material-ui/icons/Person';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nimport LoginForm from './components/LoginForm';\nimport SignUpForm from './components/SignUpForm';\nimport MapForm from './components/MapForm';\nimport MapList from './components/MapList';\nimport MapEditDialog from './components/MapEditDialog';\nimport PasswordRecoveryForm from './components/PasswordRecoveryForm';\n\nimport { request } from '../../../../../../utils/api';\nimport toast from '../../../../../../utils/toast';\n\nimport resetToken from '../../../../../../helpers/resetToken';\n\nimport useFormatMessage from '../../../../../../hooks/useFormatMessage';\nimport useWindowSize from '../../../../../../hooks/useWindowSize';\n\nimport { GET_BASE_DATA } from './query';\n\nimport styles from './AccountMenu.module.scss';\n\nconst LOGO_HEIGHT = 70;\nconst TITLE_HEIGHT = 50;\nconst FOOTER_HEIGHT = 30;\n\nexport default function AccountMenu({\n iframeMode,\n myMapsMode,\n newMapMode,\n onHideMenu = () => {}\n}) {\n const windowSize = useWindowSize();\n const contentHeight = windowSize.height - (!iframeMode ? LOGO_HEIGHT : 0) - TITLE_HEIGHT - FOOTER_HEIGHT;\n\n const token = localStorage.getItem('token');\n const client = useApolloClient();\n const isMobile = useMediaQuery('(max-width: 768px)');\n const formatMessage = useFormatMessage();\n const [showForm, setShowForm] = useState(false);\n const [showSignUp, setShowSignUp] = useState(false);\n const [currentMapData, setCurrentMapData] = useState(null);\n const [showPasswordRecovery, setShowPasswordRecovery] = useState(false);\n const [maps, setMaps] = useState([]);\n const { data: baseData } = useQuery(GET_BASE_DATA);\n\n const updateClientAppState = (params) => {\n client.writeData({\n data: {\n app: {\n __typename: 'AppState',\n ...params\n }\n }\n });\n };\n\n useEffect(() => {\n if (token) {\n request('/v1/my_maps')\n .then((data) => {\n setMaps(data);\n })\n .catch(() => {\n toast(formatMessage('mapbiomas.toast.error'), 'error');\n });\n }\n }, []);\n\n useEffect(() => {\n if (newMapMode) {\n setShowForm(true);\n }\n }, [newMapMode]);\n\n const toggleMapForm = () => {\n setShowForm(!showForm);\n };\n\n const toggleSignUpForm = () => {\n setShowSignUp(!showSignUp);\n };\n\n const togglePasswordRecoveryForm = () => {\n setShowPasswordRecovery(!showPasswordRecovery);\n };\n\n const handleExit = () => {\n const id = localStorage.getItem('tokenId');\n\n request(`/v1/tokens/${ id }`, {\n method: 'DELETE'\n })\n .then((data) => {\n if (_.get(data, 'success')) {\n resetToken();\n window.location.href = '/';\n }\n })\n .catch(() => {\n toast(formatMessage('mapbiomas.toast.error'), 'error');\n });\n };\n\n const handleMapSubmit = (params) => {\n const appData = _.get(baseData, 'app');\n\n let payload = {\n name: params.title,\n description: params.description,\n snapshot: JSON.stringify(appData)\n };\n\n request('/v1/my_maps', {\n method: 'POST',\n body: JSON.stringify(payload)\n })\n .then((data) => {\n if (_.get(data, 'id')) {\n let mapsClone = _.cloneDeep(maps);\n mapsClone = _.concat(mapsClone, data);\n setMaps(mapsClone);\n setShowForm(false);\n toast(formatMessage('mapbiomas.toast.map_added'));\n }\n })\n .catch(() => {\n toast(formatMessage('mapbiomas.toast.error'), 'error');\n });\n };\n\n const handleMapUpdate = (params) => {\n const appData = _.get(baseData, 'app');\n const mapId = _.get(currentMapData, 'id');\n let payload = {\n name: params.title,\n description: params.description,\n };\n\n if (params.updateSnapshot) {\n payload.snapshot = JSON.stringify(appData);\n }\n\n request(`/v1/my_maps/${ mapId }`, {\n method: 'PATCH',\n body: JSON.stringify(payload)\n })\n .then((data) => {\n if (_.get(data, 'id')) {\n let mapsClone = _.cloneDeep(maps);\n mapsClone = _.map(mapsClone, (item) => {\n if (item.id === mapId) {\n return data;\n }\n\n return item;\n });\n setMaps(mapsClone);\n setCurrentMapData(null);\n toast(formatMessage('mapbiomas.toast.map_updated'));\n }\n })\n .catch(() => {\n toast(formatMessage('mapbiomas.toast.error'), 'error');\n });\n };\n\n const handleViewMap = (id) => {\n request(`/v1/my_maps/${ id }`)\n .then((data) => {\n if (_.get(data, 'id')) {\n let snapshot = JSON.parse(_.get(data, 'snapshot'));\n let flyTo = _.get(snapshot, 'mapFlyTo');\n let territoryPoints = [];\n\n // TODO: Format current user maps to add new 'territoryBBox' prop on territories\n const parsedTerritories = _.map(_.get(snapshot, 'baseParams.territories'), (territory) => {\n const territoryBBox = _.get(territory, 'territoryBBox');\n\n if (territoryBBox) {\n territoryPoints = _.concat(territoryPoints, territoryBBox);\n }\n\n return {\n ...territory,\n territoryBBox: territoryBBox || null\n };\n });\n\n if (!_.isEmpty(territoryPoints)) {\n const line = turf.lineString(territoryPoints);\n const bbox = turf.bbox(line);\n\n flyTo = [\n [bbox[0], bbox[1]],\n [bbox[2], bbox[3]],\n ];\n }\n\n _.set(snapshot, 'baseParams.territories', parsedTerritories);\n _.set(snapshot, 'mapFlyTo', flyTo);\n\n if (isMobile) {\n _.set(snapshot, 'headerIsVisible', false);\n }\n\n updateClientAppState(snapshot);\n onHideMenu();\n }\n })\n .catch(() => {\n toast(formatMessage('mapbiomas.toast.error'), 'error');\n });\n };\n\n const handleDeleteMap = (id) => {\n request(`/v1/my_maps/${ id }`, {\n method: 'DELETE'\n })\n .then(() => {\n let mapsClone = _.cloneDeep(maps);\n mapsClone = _.filter(mapsClone, (item) => item.id !== id);\n setMaps(mapsClone);\n toast(formatMessage('mapbiomas.user.my_maps.list.toast.delete_success'));\n })\n .catch(() => {\n toast(formatMessage('mapbiomas.toast.error'), 'error');\n });\n };\n\n const handleEditMap = (id) => {\n const mapData = _.cloneDeep(_.find(maps, { id }));\n setCurrentMapData(mapData);\n };\n\n const handleMapEditClose = () => {\n setCurrentMapData(null);\n };\n\n const renderLogin = () => {\n return (\n \n );\n };\n\n return (\n \n
\n { showInfo && renderInfo() }\n { !showInfo && renderForm() }\n \n
\n );\n}\n","export default function resetToken() {\n localStorage.removeItem('tokenId');\n localStorage.removeItem('token');\n localStorage.removeItem('name');\n localStorage.removeItem('email');\n localStorage.removeItem('profile');\n localStorage.removeItem('institutionId');\n localStorage.removeItem('institutionName');\n localStorage.removeItem('notify_user_new_term_of_use_version');\n localStorage.removeItem('unseen_alerts');\n}\n","import { gql } from 'graphql.macro';\n\nexport const GET_BASE_CLIENT_DATA = gql`\n query {\n app @client {\n activeModule\n activeModuleContent\n showBeforeAndAfterMosaic\n baseParams {\n groupType\n degradationType\n degradationFragmentationIsolationValue\n degradationCrossingValues {\n degradation_fragmentation_edge_area\n degradation_fragmentation_fragment_size\n degradation_fragmentation_isolation_medium_size\n degradation_fragmentation_isolation_distance\n degradation_fragmentation_isolation_big_size\n degradation_fire_frequency\n degradation_fire_time\n degradation_secondary_vegetation_age\n parsedParams\n }\n territoryType\n territorySubtype\n territoryValueType\n crossingEnabled\n crossingTerritoryType\n territory\n territories {\n id\n label\n territoryTypeId\n territoryTypeLabel\n territoryBBox\n }\n crossingTerritories {\n id\n label\n territoryTypeId\n territoryTypeLabel\n territoryBBox\n }\n crossing\n buffer\n yearRange\n }\n }\n }\n`;\n\nexport const GET_BASE_DATA = gql`\n query {\n geometryBuffersList {\n id\n bufferSizeInMeters\n\t\t\ti18nStrings {\n\t\t\t\tlanguage\n\t\t\t\tstringValue\n\t\t\t}\n }\n\n territoryCategoriesList {\n id\n key\n parentId\n\t\t territoryLayerStyle\n i18nStrings {\n\t\t\t language\n\t\t\t stringValue\n }\n }\n }\n`;\n\nexport const GET_TERRITORIES_LIST = gql`\n query TerritoriesList($categoryId: Int!) {\n territoriesList(categoryId: $categoryId) {\n id\n i18nStrings {\n language\n stringValue\n }\n }\n }\n`;\n\nexport const GET_TERRITORY_BOUNDING_BOX = gql`\n query TerritoriesByIds($territoriesIds: [Int!]) {\n territoriesByIds(territoriesIds: $territoriesIds) {\n id\n territoryGeometry {\n boundingBox\n }\n }\n }\n`;\n\nexport const GET_TRANSITION_PERIOD_OPTIONS_DATA = gql`\n query {\n coverageTransitionPeriodOptionsList {\n id\n fromYear\n toYear\n groupBy\n orderAmongSiblings\n }\n }\n`;\n","import React, { Fragment, useEffect } from 'react';\nimport _ from 'lodash';\nimport classnames from 'classnames';\nimport { useApolloClient, useLazyQuery, useQuery } from '@apollo/react-hooks';\nimport { useIntl, FormattedMessage } from 'react-intl';\n\nimport { withStyles } from '@material-ui/core/styles';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport InfoIcon from '@material-ui/icons/Info';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport ListSubheader from '@material-ui/core/ListSubheader';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Radio from '@material-ui/core/Radio';\nimport RadioGroup from '@material-ui/core/RadioGroup';\nimport Select from '@material-ui/core/Select';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nimport ActiveOptionsList from '../ActiveOptionsList';\nimport CustomSelect from '../../../../components/CustomSelect';\n\nimport useFormatMessage from '../../../../../../hooks/useFormatMessage';\nimport usePrevious from '../../../../../../hooks/usePrevious';\n\nimport mapModuleToTerritoryCategoryGroups from '../../../../../../data/mapGroupTypeToTerritoryCategoryKey';\n\nimport { onCurrentLocaleCustom } from '../../../../../../utils/locale';\nimport toast from '../../../../../../utils/toast';\n\nimport getCustomClient from '../../../../../../lib/getCustomClient';\n\nimport styles from './DegradationViewModeControl.module.scss';\n\nimport {\n GET_BASE_DATA,\n GET_BASE_CLIENT_DATA,\n GET_TERRITORIES_LIST,\n GET_TERRITORY_BOUNDING_BOX,\n GET_TRANSITION_PERIOD_OPTIONS_DATA,\n} from './query';\n\nconst CustomTooltip = withStyles(() => ({\n tooltip: {\n padding: '8px 12px',\n fontSize: 14,\n color: 'white',\n boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.12)',\n },\n}))(Tooltip);\n\nconst TERRITORY_CATEGORIES_WITH_SIMPLE_SELECT = [\n 'country',\n 'biome',\n 'state',\n 'special_territories',\n 'biosphere_reserves',\n 'geoparks',\n];\n\nexport default function DegradationViewModeControl({\n clientType,\n territoryCategoriesGroup = 'default',\n isTransition = false,\n hideGroupType = false,\n showBufferField = false,\n showMultipleTerritories = true,\n showCrossing = false,\n inline,\n onFlyTo = () => {},\n}) {\n const intl = useIntl()\n const locale = localStorage.getItem('locale') || 'pt-BR';\n const clientBase = useApolloClient();\n const client = getCustomClient(clientType) || clientBase;\n const formatMessage = useFormatMessage();\n const { data: clientBaseData } = useQuery(GET_BASE_CLIENT_DATA);\n const { data: baseData, loading: loadingBaseData } = useQuery(GET_BASE_DATA, {\n client: getCustomClient(clientType)\n });\n const { data: transitionBaseData, loading: loadingTransitionBaseData } = useQuery(GET_TRANSITION_PERIOD_OPTIONS_DATA, {\n skip: !isTransition,\n client: getCustomClient(clientType)\n });\n const [\n loadTerritoriesListData,\n {\n data: territoriesListData,\n loading: loadingTerritoriesListData\n }\n ] = useLazyQuery(GET_TERRITORIES_LIST, {\n client: getCustomClient(clientType)\n });\n\n const loadTerritoryBoundingBox = (id) => {\n client.query({\n query: GET_TERRITORY_BOUNDING_BOX,\n variables: { territoriesIds: [id] }\n })\n .then((response) => {\n const bbox = _.get(response, 'data.territoriesByIds[0].territoryGeometry.boundingBox');\n\n if (bbox) {\n const parsedBBox = [\n [_.get(bbox, 'yMin'), _.get(bbox, 'xMin')],\n [_.get(bbox, 'yMax'), _.get(bbox, 'xMax')],\n ];\n\n onFlyTo(parsedBBox);\n }\n });\n };\n\n const territoryCategoriesList = _.get(baseData, 'territoryCategoriesList');\n const geometryBuffers = _.get(baseData, 'geometryBuffersList');\n const coverageTransitionPeriodOptionsList = _.get(transitionBaseData, 'coverageTransitionPeriodOptionsList');\n\n const territoriesList = _.get(territoriesListData, 'territoriesList');\n\n const activeModule = _.get(clientBaseData, 'app.activeModule');\n const activeModuleContent = _.get(clientBaseData, 'app.activeModuleContent');\n const baseParams = _.get(clientBaseData, 'app.baseParams');\n const showBeforeAndAfterMosaic = _.get(clientBaseData, 'app.showBeforeAndAfterMosaic');\n const groupType = _.get(baseParams, 'groupType') || 'territorial';\n const degradationType = _.get(baseParams, 'degradationType') || 'vector';\n const territoryType = _.get(baseParams, 'territoryType');\n const territoryValueType = _.get(baseParams, 'territoryValueType');\n const territoryIsMultiple = territoryValueType === 'multiple';\n const crossingEnabled = _.get(baseParams, 'crossingEnabled');\n const crossingTerritoryType = _.get(baseParams, 'crossingTerritoryType');\n const crossingTerritories = _.get(baseParams, 'crossingTerritories');\n const territories = _.get(baseParams, 'territories');\n const buffer = _.get(baseParams, 'buffer');\n const yearRange = _.get(baseParams, 'yearRange');\n\n const prevGroupType = usePrevious(groupType);\n\n const parsedTerritoryTypeOptions = _.map(territoryCategoriesList, (territoryType) => {\n const stringList = _.get(territoryType, 'i18nStrings');\n const selectedString = _.find(stringList, { language: locale });\n\n return {\n id: territoryType.id,\n key: territoryType.key,\n label: _.get(selectedString, 'stringValue'),\n parentId: territoryType.parentId,\n };\n });\n const territoryCategoryGroups = mapModuleToTerritoryCategoryGroups[territoryCategoriesGroup];\n const territoryKeysByGroupType = _.get(territoryCategoryGroups, groupType);\n const filteredTerritoryTypeOptions = _(parsedTerritoryTypeOptions)\n .filter(({ key }) => _.includes(territoryKeysByGroupType, key))\n .sortBy(({ key }) => _.findIndex(territoryKeysByGroupType, (baseTerritoryKey) => baseTerritoryKey === key))\n .value();\n\n const territoryTypeOption = _.find(parsedTerritoryTypeOptions, { id: territoryType });\n const hasTerritorySimpleSelect = _.includes(TERRITORY_CATEGORIES_WITH_SIMPLE_SELECT, _.get(territoryTypeOption, 'key'));\n const crossingTerritoryTypeOptions = _.filter(parsedTerritoryTypeOptions, (option) => {\n return _.includes(option.key, 'crossing') && _.includes(option.key, _.get(territoryTypeOption, 'key'));\n });\n const crossingInputIsDisabled = _.isEmpty(crossingTerritoryTypeOptions) || territoryIsMultiple || _.isEmpty(territories);\n\n const parsedTerritoryOptions = _.map(territoriesList, (territory) => {\n const stringList = _.get(territory, 'i18nStrings');\n const selectedString = _.find(stringList, { language: locale });\n // TODO: Remove bounding box property from territory data, since it is loaded and use only on map flyTo\n const boundingBox = {\n xMin: 0,\n xMax: 0,\n yMin: 0,\n yMax: 0,\n };\n // const boundingBox = _.get(territory, 'territoryGeometry.boundingBox');\n\n return {\n id: territory.id,\n label: _.get(selectedString, 'stringValue'),\n boundingBox: [\n [_.get(boundingBox, 'yMin'), _.get(boundingBox, 'xMin')],\n [_.get(boundingBox, 'yMax'), _.get(boundingBox, 'xMax')],\n ]\n };\n });\n\n const parsedCoverageTransitionPeriodOptionsList = _(coverageTransitionPeriodOptionsList)\n .map((item) => {\n const { fromYear, toYear, groupBy, orderAmongSiblings } = item;\n const parsedFromYear = Number(_.replace(fromYear, '_', ''));\n const parsedToYear = Number(_.replace(toYear, '_', ''));\n\n return {\n id: `${ parsedFromYear }-${ parsedToYear }`,\n label: `${ parsedFromYear } ${ formatMessage(`mapbiomas.header.base_form.year_range.separator`) } ${ parsedToYear }`,\n group: groupBy,\n orderAmongSiblings\n };\n })\n .orderBy(['group', 'orderAmongSiblings', 'id'])\n .groupBy('group')\n .value();\n\n const updateClientAppState = (params) => {\n clientBase.writeData({\n data: {\n app: {\n __typename: 'AppState',\n ...params\n }\n }\n });\n };\n\n const updateClientAppBaseParamsState = (params) => {\n updateClientAppState({\n baseParams: {\n __typename: 'AppBaseParamsState',\n ...params\n }\n });\n };\n\n useEffect(() => {\n if (hideGroupType && groupType !== 'territorial') {\n updateClientAppBaseParamsState({\n groupType: 'territorial',\n territoryType: null,\n territorySubtype: null,\n territoryValueType: 'single',\n territory: null,\n territories: null,\n });\n }\n }, [hideGroupType, groupType]);\n\n useEffect(() => {\n if (territoryType) {\n loadTerritoriesListData({\n variables: {\n categoryId: territoryType\n }\n });\n }\n }, [territoryType]);\n\n useEffect(() => {\n if (territoryCategoriesList && !territoryType && groupType === 'territorial') {\n const initialTerritoryType = _.find(territoryCategoriesList, { key: 'country' });\n const territoryTypeId = _.get(initialTerritoryType, 'id');\n const params = {\n territoryType: territoryTypeId,\n };\n\n if (_.isNumber(territoryTypeId)) {\n // TODO: Replace this query to another that loads only active territories data\n loadTerritoriesListData({\n variables: {\n categoryId: territoryTypeId\n }\n });\n\n updateClientAppBaseParamsState(params);\n }\n }\n }, [territoryCategoriesList, territoryType]);\n\n useEffect(() => {\n if (_.isEmpty(territories) && territoriesList && _.size(territoriesList) === 1) {\n const territoryTypeOption = _.find(filteredTerritoryTypeOptions, { id: territoryType });\n\n const firstTerritory = _.first(territoriesList);\n const firstTerritoryId = _.get(firstTerritory, 'id');\n const territoryOption = _.find(parsedTerritoryOptions, { id: firstTerritoryId });\n\n const activeTerritoryIds = _.map(territories, 'id');\n\n if (!_.includes(activeTerritoryIds, firstTerritoryId)) {\n const newTerritoryItem = {\n __typename: 'AppBaseParamsActiveTerritoryItemState',\n id: firstTerritoryId,\n label: _.get(territoryOption, 'label'),\n territoryTypeId: _.get(territoryTypeOption, 'id'),\n territoryTypeLabel: _.get(territoryTypeOption, 'label'),\n territoryBBox: _.get(territoryOption, 'boundingBox'),\n };\n\n updateClientAppBaseParamsState({\n territories: _.concat(_.isNil(territories) ? [] : territories, newTerritoryItem)\n });\n\n loadTerritoryBoundingBox(firstTerritoryId);\n }\n }\n }, [activeModule, territoriesList]);\n\n useEffect(() => {\n if (territoryType && !_.isEmpty(filteredTerritoryTypeOptions) && prevGroupType === groupType) {\n const hasTerritoryTypeData = !!_.find(filteredTerritoryTypeOptions, { id: territoryType });\n\n if (!hasTerritoryTypeData) {\n updateClientAppBaseParamsState({\n territoryType: null,\n territories: []\n });\n toast(formatMessage('mapbiomas.toast.unavailable_territory'), 'info');\n }\n }\n }, [filteredTerritoryTypeOptions, territoryType, prevGroupType, groupType]);\n\n useEffect(() => {\n updateClientAppBaseParamsState({\n crossingTerritoryType: null,\n crossingTerritories: null,\n });\n }, [territoryType, territories, crossingEnabled, crossingInputIsDisabled]);\n\n useEffect(() => {\n updateClientAppBaseParamsState({\n crossingTerritories: null,\n });\n }, [crossingTerritoryType]);\n\n useEffect(() => {\n if (crossingEnabled && territoryIsMultiple) {\n updateClientAppBaseParamsState({\n crossingEnabled: false,\n crossingTerritoryType: null,\n crossingTerritories: null,\n });\n }\n }, [territoryIsMultiple, crossingEnabled]);\n\n useEffect(() => {\n updateClientAppBaseParamsState({\n crossingEnabled: false,\n crossingTerritoryType: null,\n crossingTerritories: null,\n });\n }, [activeModuleContent]);\n\n const handleInputChange = (field, inputValue) => {\n const value = _.isObject(inputValue) ? inputValue.target.value : inputValue;\n let params = { [field]: value };\n\n if (field === 'territoryType' && !territoryIsMultiple) {\n params.territories = [];\n }\n\n // if (field === 'yearRange') {\n // const [minYear, maxYear] = _.split(inputValue, '-');\n\n // updateClientAppState({\n // timelineLimitsRange: [Number(minYear), Number(maxYear)]\n // });\n // }\n\n updateClientAppBaseParamsState(params);\n };\n\n const handleGroupTypeChange = (event) => {\n updateClientAppBaseParamsState({ degradationType: event.target.value });\n };\n\n const handleTerritoryChange = (_field, value) => {\n let baseOption = value;\n\n if (!_.get(baseOption, 'id')) {\n baseOption = _.find(parsedTerritoryOptions, { id: value });\n }\n\n const territoryTypeOption = _.find(filteredTerritoryTypeOptions, { id: territoryType });\n const activeTerritoryIds = _.map(territories, 'id');\n\n if (!_.includes(activeTerritoryIds, _.get(baseOption, 'id'))) {\n const newTerritoryItem = {\n __typename: 'AppBaseParamsActiveTerritoryItemState',\n id: _.get(baseOption, 'id'),\n label: _.get(baseOption, 'label'),\n territoryTypeId: _.get(territoryTypeOption, 'id'),\n territoryTypeLabel: _.get(territoryTypeOption, 'label'),\n territoryBBox: _.get(baseOption, 'boundingBox'),\n };\n\n let nextTerritories = _.concat(_.isNil(territories) ? [] : territories, newTerritoryItem);\n\n if (!territoryIsMultiple) {\n nextTerritories = [newTerritoryItem];\n }\n\n updateClientAppBaseParamsState({\n territories: nextTerritories\n });\n }\n\n if (baseOption) {\n loadTerritoryBoundingBox(_.get(baseOption, 'id'));\n }\n\n handleInputChange('territory', _.get(baseOption, 'id'));\n };\n\n const handleCrossingTerritoryChange = (data) => {\n const territoryTypeOption = _.find(crossingTerritoryTypeOptions, { id: crossingTerritoryType });\n const activeTerritoryIds = _.map(crossingTerritories, 'id');\n\n if (!_.includes(activeTerritoryIds, _.get(data, 'id'))) {\n const newTerritoryItem = {\n __typename: 'AppBaseParamsActiveTerritoryItemState',\n id: _.get(data, 'id'),\n label: _.get(data, 'label'),\n territoryTypeId: _.get(territoryTypeOption, 'id'),\n territoryTypeLabel: _.get(territoryTypeOption, 'label'),\n territoryBBox: _.get(data, 'boundingBox'),\n };\n\n updateClientAppBaseParamsState({\n crossingTerritories: [newTerritoryItem]\n });\n }\n\n if (data) {\n loadTerritoryBoundingBox(_.get(data, 'id'));\n }\n\n handleInputChange('territory', _.get(data, 'id'));\n };\n\n const handleRemoveTerritory = (id) => {\n let territoriesClone = _.cloneDeep(territories);\n territoriesClone = _.filter(territoriesClone, (territory) => territory.id !== id);\n\n updateClientAppBaseParamsState({ territories: territoriesClone });\n };\n\n const toggleTerritoryValueType = () => {\n if (territoryIsMultiple) {\n updateClientAppBaseParamsState({\n territoryValueType: 'single',\n territories: [],\n });\n } else {\n updateClientAppBaseParamsState({ territoryValueType: 'multiple' });\n }\n };\n\n const toggleCrossing = () => {\n updateClientAppBaseParamsState({\n crossingEnabled: !crossingEnabled,\n });\n };\n\n const toggleBeforeAndAfterMosaic = () => {\n updateClientAppState({\n showBeforeAndAfterMosaic: !showBeforeAndAfterMosaic,\n });\n };\n\n return (\n \n \n { (!myMapsMode && !newMapMode) ?\n
\n \n \n \n \n
\n \n { (!myMapsMode && !newMapMode) ?\n
\n \n { token &&\n
\n \n \n \n \n \n \n
\n }\n \n { !showSignUp && !showPasswordRecovery && !token && renderLogin() }\n { showPasswordRecovery &&\n
\n \n { !showForm &&\n
\n }\n \n \n
\n );\n}\n","import { gql } from 'graphql.macro';\n\nexport const GET_BASE_CLIENT_DATA = gql`\n query {\n app @client {\n activeModule\n activeModuleContent\n showBeforeAndAfterMosaic\n baseParams {\n groupType\n degradationType\n degradationFragmentationIsolationValue\n degradationCrossingValues {\n degradation_fragmentation_edge_area\n degradation_fragmentation_fragment_size\n degradation_fragmentation_isolation_medium_size\n degradation_fragmentation_isolation_distance\n degradation_fragmentation_isolation_big_size\n degradation_fire_frequency\n degradation_fire_time\n degradation_secondary_vegetation_age\n parsedParams\n }\n territoryType\n territorySubtype\n territoryValueType\n crossingEnabled\n crossingTerritoryType\n territory\n territories {\n id\n label\n territoryTypeId\n territoryTypeLabel\n territoryBBox\n }\n crossingTerritories {\n id\n label\n territoryTypeId\n territoryTypeLabel\n territoryBBox\n }\n crossing\n buffer\n yearRange\n }\n }\n }\n`;\n\nexport const GET_FRAGMENTATION_CLASS_TREES_DATA = gql`\n query GetFragmentationClassTreesData {\n degradation_fragmentation_edge_area: classTreeByKey(key: \"degradation_fragmentation_edge_area\") {\n id\n key\n i18nStrings {\n language\n stringValue\n __typename\n }\n mvClassTreeLevelsUi {\n id\n color\n classId\n childrenIds\n positionInTree\n level\n parentId\n defaultName\n classTreeId\n pixelValue\n i18nStrings {\n language\n stringValue\n __typename\n }\n classTreeNode {\n classe {\n classesTooltips {\n id\n __typename\n }\n __typename\n }\n __typename\n }\n __typename\n }\n __typename\n }\n degradation_fragmentation_fragment_size: classTreeByKey(key: \"degradation_fragmentation_fragment_size\") {\n id\n key\n i18nStrings {\n language\n stringValue\n __typename\n }\n mvClassTreeLevelsUi {\n id\n color\n classId\n childrenIds\n positionInTree\n level\n parentId\n defaultName\n classTreeId\n pixelValue\n i18nStrings {\n language\n stringValue\n __typename\n }\n classTreeNode {\n classe {\n classesTooltips {\n id\n __typename\n }\n __typename\n }\n __typename\n }\n __typename\n }\n __typename\n }\n }\n`;\n\n\nexport const GET_FIRE_CLASS_TREES_DATA = gql`\n query GetFireClassTreesData {\n degradation_fire_frequency: classTreeByKey(key: \"degradation_fire_frequency\") {\n id\n key\n i18nStrings {\n language\n stringValue\n __typename\n }\n mvClassTreeLevelsUi {\n id\n color\n classId\n childrenIds\n positionInTree\n level\n parentId\n defaultName\n classTreeId\n pixelValue\n i18nStrings {\n language\n stringValue\n __typename\n }\n classTreeNode {\n classe {\n classesTooltips {\n id\n __typename\n }\n __typename\n }\n __typename\n }\n __typename\n }\n __typename\n }\n degradation_fire_time: classTreeByKey(key: \"degradation_fire_time\") {\n id\n key\n i18nStrings {\n language\n stringValue\n __typename\n }\n mvClassTreeLevelsUi {\n id\n color\n classId\n childrenIds\n positionInTree\n level\n parentId\n defaultName\n classTreeId\n pixelValue\n i18nStrings {\n language\n stringValue\n __typename\n }\n classTreeNode {\n classe {\n classesTooltips {\n id\n __typename\n }\n __typename\n }\n __typename\n }\n __typename\n }\n __typename\n }\n }\n`;\n\nexport const GET_SECONDARY_VEGETATION_CLASS_TREES_DATA = gql`\n query GetSecondaryVegetationClassTreesData {\n degradation_secondary_vegetation_age: classTreeByKey(key: \"degradation_secondary_vegetation_age\") {\n id\n key\n i18nStrings {\n language\n stringValue\n __typename\n }\n mvClassTreeLevelsUi {\n id\n color\n classId\n childrenIds\n positionInTree\n level\n parentId\n defaultName\n classTreeId\n pixelValue\n i18nStrings {\n language\n stringValue\n __typename\n }\n classTreeNode {\n classe {\n classesTooltips {\n id\n __typename\n }\n __typename\n }\n __typename\n }\n __typename\n }\n __typename\n }\n }\n`;\n","import React from 'react';\nimport _ from 'lodash';\nimport { useApolloClient, useQuery } from '@apollo/react-hooks';\n\nimport FormControl from '@material-ui/core/FormControl';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport ListSubheader from '@material-ui/core/ListSubheader';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\nimport IconButton from '@material-ui/core/IconButton';\nimport CloseIcon from '@material-ui/icons/Close';\n\nimport ActiveOptionsList from '../ActiveOptionsList';\n\nimport useFormatMessage from '../../../../../../hooks/useFormatMessage';\n\nimport getCustomClient from '../../../../../../lib/getCustomClient';\n\nimport styles from './DegradationVectorControl.module.scss';\n\nimport {\n GET_BASE_CLIENT_DATA,\n GET_FRAGMENTATION_CLASS_TREES_DATA,\n GET_FIRE_CLASS_TREES_DATA,\n GET_SECONDARY_VEGETATION_CLASS_TREES_DATA,\n} from './query';\n\nconst mapDataKeyToQuery = {\n fragmentation: GET_FRAGMENTATION_CLASS_TREES_DATA,\n fire: GET_FIRE_CLASS_TREES_DATA,\n secondaryVegetation: GET_SECONDARY_VEGETATION_CLASS_TREES_DATA,\n};\n\nconst mediumSizeOptions = [\n { groupLabel: 'Isolamento - Alvo', groupKey: 'degradation_fragmentation_isolation_medium_size', id: 25, label: 'maior ou igual a 25ha' },\n { groupLabel: 'Isolamento - Alvo', groupKey: 'degradation_fragmentation_isolation_medium_size', id: 50, label: 'maior ou igual a 50ha' },\n { groupLabel: 'Isolamento - Alvo', groupKey: 'degradation_fragmentation_isolation_medium_size', id: 100, label: 'maior ou igual a 100ha' },\n];\n\nconst distanceOptions = [\n { groupLabel: 'Isolamento - Distância', groupKey: 'degradation_fragmentation_isolation_distance', id: 5, label: 'maior ou igual a 5km' },\n { groupLabel: 'Isolamento - Distância', groupKey: 'degradation_fragmentation_isolation_distance', id: 10, label: 'maior ou igual a 10km' },\n { groupLabel: 'Isolamento - Distância', groupKey: 'degradation_fragmentation_isolation_distance', id: 20, label: 'maior ou igual a 20km' },\n];\n\nconst bigSizeOptions = [\n { groupLabel: 'Isolamento - Fonte', groupKey: 'degradation_fragmentation_isolation_big_size', id: 100, label: 'maior ou igual a 100ha' },\n { groupLabel: 'Isolamento - Fonte', groupKey: 'degradation_fragmentation_isolation_big_size', id: 500, label: 'maior ou igual a 500ha' },\n { groupLabel: 'Isolamento - Fonte', groupKey: 'degradation_fragmentation_isolation_big_size', id: 1000, label: 'maior ou igual a 1000ha' },\n];\n\nexport default function DegradationVectorControl({\n label,\n dataKey,\n classTreeKeys,\n}) {\n const locale = localStorage.getItem('locale') || 'pt-BR';\n const client = useApolloClient();\n const formatMessage = useFormatMessage();\n const { data: clientBaseData } = useQuery(GET_BASE_CLIENT_DATA);\n const { data: classTreesData, loading } = useQuery(mapDataKeyToQuery[dataKey], {\n client: getCustomClient('8.0')\n });\n const isFragmentation = dataKey === 'fragmentation';\n\n const baseParams = _.get(clientBaseData, 'app.baseParams');\n const degradationCrossingValues = _.get(baseParams, 'degradationCrossingValues');\n\n let parsedOptions = _(classTreeKeys)\n .map((classTreeKey) => {\n const classTreeData = _.get(classTreesData, `${ classTreeKey }[0]`);\n const nodes = _.get(classTreeData, 'mvClassTreeLevelsUi');\n const groupLabel = _.chain(classTreeData)\n .get('i18nStrings')\n .find({ language: locale })\n .get('stringValue')\n .value();\n \n return _.map(nodes, (node) => {\n return {\n groupLabel,\n groupKey: classTreeData.key,\n id: node.pixelValue,\n label: _.chain(node)\n .get('i18nStrings')\n .find({ language: locale })\n .get('stringValue')\n .value()\n };\n });\n })\n .flatten()\n .value();\n\n // TODO: Temp\n // if (isFragmentation) {\n // parsedOptions = [\n // ...parsedOptions,\n // ...mediumSizeOptions,\n // ...distanceOptions,\n // ...bigSizeOptions,\n // ];\n // }\n\n parsedOptions = _.groupBy(parsedOptions, 'groupLabel');\n\n const flattenOptions = _.flatten(_.values(parsedOptions));\n const activeOptions = _.compact(_.map(classTreeKeys, (classTreeKey) => {\n const classTreeKeyValue = Number(_.get(degradationCrossingValues, classTreeKey));\n \n if (classTreeKeyValue) {\n return _.find(flattenOptions, (option) => option.groupKey === classTreeKey && option.id === classTreeKeyValue);\n } else {\n return null;\n }\n }));\n\n const updateClientAppState = (params) => {\n client.writeData({\n data: {\n app: {\n __typename: 'AppState',\n ...params\n }\n }\n });\n };\n\n const updateClientAppBaseParamsState = (params) => {\n updateClientAppState({\n baseParams: {\n __typename: 'AppBaseParamsState',\n ...params\n }\n });\n };\n\n const handleSelectChange = (event) => {\n const newValue = event.target.value;\n const [classTreeKey, pixelValue] = _.split(newValue, '-');\n\n updateClientAppBaseParamsState({\n degradationCrossingValues: {\n ...degradationCrossingValues,\n [classTreeKey]: Number(pixelValue)\n }\n });\n };\n\n const handleRemove = (value) => {\n const [classTreeKey] = _.split(value, '-');\n updateClientAppBaseParamsState({\n degradationCrossingValues: {\n ...degradationCrossingValues,\n [classTreeKey]: null\n }\n });\n };\n\n return (\n \n
\n
\n );\n}\n","import { gql } from 'graphql.macro';\n\nexport const GET_BASE_DATA = gql`\n {\n app @client {\n activeModule\n activeModuleContent\n headerIsVisible\n mapboxMode\n updatingWarningContentKey\n baseParams {\n classesViewMode\n activeClassTreeNodeIds\n activeObjectTreeNodeIds\n activeClassesLevelsListItems\n activeClassTreeOptionValue\n buffer\n degradationType\n degradationFragmentationIsolationValue\n degradationCrossingValues {\n degradation_fragmentation_edge_area\n degradation_fragmentation_fragment_size\n degradation_fragmentation_isolation_medium_size\n degradation_fragmentation_isolation_distance\n degradation_fragmentation_isolation_big_size\n degradation_fire_frequency\n degradation_fire_time\n degradation_secondary_vegetation_age\n }\n customViewMode\n customCrossingValues\n }\n }\n }\n`;\n\nexport const GET_MODULE_DATA = gql`\n query GetModulesData {\n modulesList {\n id\n key\n enabled\n isInBeta\n primaryColor\n secondaryColor\n iconUrl\n displayOrder\n\t\t\ti18nStrings {\n\t\t\t\tlanguage\n\t\t\t\tstringValue\n }\n\t\t\tsubmodules {\n id\n displayOrder\n key\n\t\t\t\tgeospatialObjectCategoryTree {\n id\n key\n geospatialObjectCategoryTreeLevels {\n id\n color\n positionInTree\n level\n parentId\n childrenIds\n i18nStrings {\n\t\t\t\t\t\t\tstringValue\n\t\t\t\t\t\t\tlanguage\n }\n\t\t\t\t\t\tgeometryCategory {\n\t\t\t\t\t\t\ti18nStrings {\n\t\t\t\t\t\t\t\tstringValue\n\t\t\t\t\t\t\t\tlanguage\n\t\t\t\t\t\t\t}\t\n\t\t\t\t\t\t}\n }\n i18nStrings {\n\t\t\t\t\t\tstringValue\n\t\t\t\t\t\tlanguage\n }\n }\n i18nStrings {\n\t\t\t\t\tlanguage\n\t\t\t\t\tstringValue\n }\n }\n }\n }\n`;\n","export default {\n 'degradation_fragmentation_edge_area': {\n path: 'edgeArea',\n paramKey: 'edgeSize'\n },\n 'degradation_fragmentation_fragment_size': {\n path: 'patchSize',\n paramKey: 'patchSize'\n },\n 'degradation_fragmentation_isolation': {\n path: 'isolation',\n paramKey: 'distance',\n },\n 'degradation_fragmentation_isolation_medium_size': {\n paramKey: 'mediumSize'\n },\n 'degradation_fragmentation_isolation_distance': {\n paramKey: 'distance'\n },\n 'degradation_fragmentation_isolation_big_size': {\n paramKey: 'bigSize'\n },\n 'degradation_fire_frequency': {\n path: 'fireFrequency',\n paramKey: 'fireFrequency'\n },\n 'degradation_fire_time': {\n path: 'fireAge',\n paramKey: 'fireAge'\n },\n 'degradation_secondary_vegetation_age': {\n path: 'secondaryVegetationAge',\n paramKey: 'secondaryVegetationAge'\n },\n};\n","import _ from 'lodash';\nimport qs from 'qs';\nimport { useEffect, useState } from 'react';\nimport { useQuery } from '@apollo/react-hooks';\n\nimport { GET_CLASS_TREE_DATA } from '../graphql/queries/general';\n\nimport getCustomClient from '../lib/getCustomClient';\n\nimport mapClassTreeToAPIParams from '../data/mapClassTreeToAPIParams';\n\nconst API_URL = `${process.env.REACT_APP_DEGRADATION_API_URL}/degradation/brazil/maps/`;\n\nexport function parseCrossingParams(values) {\n const crossingParams = _.reduce(_.omit(values, ['__typename', 'parsedParams']), (result, value, key) => {\n if (value) {\n result[_.get(mapClassTreeToAPIParams[key], 'paramKey')] = value;\n }\n\n return result;\n }, {});\n\n return qs.stringify(crossingParams, { arrayFormat: 'repeat' });\n}\n\nexport default function useCustomMapLayer(params) {\n const {\n activeYear,\n activeBaseClassTreeNodeIds,\n activeClassTreeNodeIds,\n activeClassTreeOptionValue,\n degradationType,\n degradationCrossingValues,\n degradationFragmentationIsolationValue,\n territories,\n } = params;\n const urlParams = mapClassTreeToAPIParams[activeClassTreeOptionValue];\n const isOnCrossingMode = degradationType === 'crossing';\n const degradationCrossingParsedParams = _.get(degradationCrossingValues, 'parsedParams');\n const hasBaseValueSelected = !_.isEmpty(activeBaseClassTreeNodeIds) || isOnCrossingMode;\n const { data: defaultClassTreeData } = useQuery(GET_CLASS_TREE_DATA, {\n variables: {\n classTreeKey: 'default'\n },\n client: getCustomClient('8.0'),\n });\n const { data: classTreeData } = useQuery(GET_CLASS_TREE_DATA, {\n variables: {\n classTreeKey: activeClassTreeOptionValue\n },\n client: getCustomClient('8.0'),\n skip: !activeClassTreeOptionValue,\n });\n const defaultClassTreeNodes = _.get(defaultClassTreeData, 'classTreeByKey[0].mvClassTreeLevelsUi');\n const classTreeNodes = _.get(classTreeData, 'classTreeByKey[0].mvClassTreeLevelsUi');\n\n const [url, setUrl] = useState(null);\n const [loading, setLoading] = useState(false);\n\n let parsedParams = {\n initiative: 'brazil',\n year: activeYear,\n pixelValues: _.map(activeClassTreeNodeIds, (nodeId) => (\n _.get(_.find(classTreeNodes, { id: nodeId }), 'pixelValue')\n )),\n colors: _.map(activeClassTreeNodeIds, (nodeId) => (\n _.get(_.find(classTreeNodes, { id: nodeId }), 'color')\n )),\n territoryIds: _.map(territories, 'id')\n };\n\n if (hasBaseValueSelected || degradationFragmentationIsolationValue) {\n const pixelValues = _.compact(_.map(activeClassTreeNodeIds, (nodeId) => (\n _.get(_.find(defaultClassTreeNodes, { id: nodeId }), 'pixelValue')\n )));\n const colors = _.map(pixelValues, (value) => (\n _.get(_.find(defaultClassTreeNodes, { pixelValue: value }), 'color')\n ));\n\n parsedParams = {\n ...parsedParams,\n pixelValues,\n colors,\n };\n }\n\n if (hasBaseValueSelected && !isOnCrossingMode) {\n parsedParams = {\n ...parsedParams,\n [_.get(urlParams, 'paramKey')]: _.map(activeBaseClassTreeNodeIds, (nodeId) => (\n _.get(_.find(classTreeNodes, { id: nodeId }), 'pixelValue')\n ))\n };\n }\n\n let mapUrl = `${ API_URL }${ _.get(urlParams, 'path') }?${ qs.stringify(parsedParams, { arrayFormat: 'repeat' }) }`;\n\n\n if (isOnCrossingMode && degradationCrossingParsedParams) {\n mapUrl = `${ API_URL }multiple?${ qs.stringify(parsedParams, { arrayFormat: 'repeat' }) }&${ degradationCrossingParsedParams }`;\n } else if (degradationFragmentationIsolationValue) {\n mapUrl = `${ API_URL }isolation?${ qs.stringify(parsedParams, { arrayFormat: 'repeat' }) }&${ degradationFragmentationIsolationValue }`;\n }\n\n useEffect(() => {\n if (_.includes(mapUrl, 'pixelValues')) {\n setLoading(true);\n fetch(mapUrl, {\n method: 'GET',\n headers: { 'Content-Type': 'application/json' },\n })\n .then((response) => response.json())\n .then((data) => {\n const layerURL = _.get(data, 'url');\n setUrl(layerURL);\n setLoading(false);\n });\n }\n }, [mapUrl]);\n\n return {\n loading,\n url\n };\n}\n","export default [\n 'soil',\n 'degradation',\n 'fire'\n];\n","import React from 'react';\n\nimport styles from './Header.module.scss';\n\nexport default function ModuleIconComponent({\n moduleKey,\n}) {\n switch(moduleKey) {\n case 'coverage': {\n return (\n \n );\n }\n case 'coverage_quality': {\n return (\n \n );\n }\n case 'temporal_analysis': {\n return (\n \n );\n }\n case 'pasture': {\n return (\n \n );\n }\n case 'deforestation': {\n return (\n \n );\n }\n case 'regeneration': {\n return (\n \n );\n }\n case 'infrastructure': {\n return (\n \n );\n }\n case 'agriculture': {\n return (\n \n );\n }\n case 'fire': {\n return (\n \n );\n }\n case 'scenarios': {\n return (\n \n );\n }\n case 'water': {\n return (\n \n );\n }\n case 'mining': {\n return (\n \n );\n }\n case 'sentinel': {\n return (\n \n );\n }\n case 'soil': {\n return (\n \n );\n }\n case 'degradation': {\n return (\n \n );\n }\n case 'coral_reef': {\n return (\n \n );\n }\n case 'urban': {\n return (\n \n );\n }\n default: {\n return null;\n }\n };\n}\n","import React, { useEffect, useState, Fragment } from 'react';\nimport { withRouter, Link } from 'react-router-dom';\nimport classnames from 'classnames';\nimport { useApolloClient, useQuery } from '@apollo/react-hooks';\nimport { useIntl, FormattedMessage } from 'react-intl';\nimport _ from 'lodash';\n\nimport { withStyles } from '@material-ui/core/styles';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport AccountCircleIcon from '@material-ui/icons/AccountCircle';\nimport BarChartIcon from '@material-ui/icons/BarChart';\nimport BookmarkIcon from '@material-ui/icons/Bookmark';\nimport Button from '@material-ui/core/Button';\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\nimport ExpandLessIcon from '@material-ui/icons/ExpandLess';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport FilterListIcon from '@material-ui/icons/FilterList';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport TranslateIcon from '@material-ui/icons/Translate';\nimport ViewListIcon from '@material-ui/icons/ViewList';\nimport TableChartIcon from '@material-ui/icons/TableChart';\n\nimport TabList from '../../components/TabList';\n\nimport BaseForm from './components/BaseForm';\nimport GenericClasses from './components/GenericClasses';\nimport GeospatialObjects from './components/GeospatialObjects';\nimport TransitionClasses from './components/TransitionClasses';\nimport QualityClasses from './components/QualityClasses';\nimport TranslateOptionsBox from './components/TranslateOptionsBox';\nimport InstitutionalMenu from './components/InstitutionalMenu';\nimport AccountMenu from './components/AccountMenu';\nimport DegradationViewModeControl from './components/DegradationViewModeControl';\nimport DegradationVectorControl from './components/DegradationVectorControl';\nimport CustomViewModeControl from './components/CustomViewModeControl';\nimport CustomClassTreeControl from './components/CustomClassTreeControl';\nimport UrbanCrossingClasses from './components/UrbanCrossingClasses';\n\nimport {\n GET_BASE_DATA,\n GET_MODULE_DATA\n} from './query';\n\nimport useFormatMessage from '../../../../hooks/useFormatMessage';\nimport useWindowSize from '../../../../hooks/useWindowSize';\nimport usePrevious from '../../../../hooks/usePrevious';\n\nimport { parseCrossingParams } from '../../../../hooks/useCustomMapLayer';\n\nimport logo from './logo.svg';\nimport logoFire from './logo-mapbiomas-fogo.png';\nimport logoSentinelPT from './10-metros-pt-br-horizontal.svg';\nimport logoSentinelEN from './10-metros-en-horizontal.svg';\nimport logoDegradation from './logo-mapbiomas-degradation.svg';\n\nimport initialBaseParams from '../../../../data/initialBaseParams';\nimport mapActiveModuleToDefaultParams from '../../../../data/mapActiveModuleToDefaultParams';\nimport customClientModules from '../../../../data/customClientModules';\n\nimport getCustomClient from '../../../../lib/getCustomClient';\n\nimport ModuleIconComponent from './ModuleIconComponent';\n\nimport styles from './Header.module.scss';\n\nconst NEW_MODULE_KEYS = [];\n\nconst BETA_MODULE_KEYS = [\n 'sentinel',\n 'soil',\n 'degradation',\n 'coral_reef',\n 'urban',\n];\n\nconst UPDATING_MODULE_KEYS = [\n // 'soil',\n // 'quality_of_pasture_data',\n // 'agriculture',\n];\n\nconst CUSTOM_CONTENT_MODULE_KEYS = [\n ...(UPDATING_MODULE_KEYS || []),\n 'fire',\n 'infrastructure',\n 'deforestation',\n 'coral_reef'\n];\n\nfunction hexToRgb(hex) {\n // Expand shorthand form (e.g. \"03F\") to full form (e.g. \"0033FF\")\n const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n hex = hex.replace(shorthandRegex, function(m, r, g, b) {\n return r + r + g + g + b + b;\n });\n\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n } : null;\n}\n\nfunction getModuleItemClassName(key) {\n const mapModuleKeyToClassName = {\n 'coverage': 'menuBarListItemCoverage',\n 'coverage_quality': 'menuBarListItemCoverageQuality',\n 'temporal_analysis': 'menuBarListItemTrajectories',\n 'pasture': 'menuBarListItemQualityOfPastureData',\n 'deforestation': 'menuBarListItemDeforestation',\n 'regeneration': 'menuBarListItemRegeneration',\n 'infrastructure': 'menuBarListItemInfrastructure',\n 'agriculture': 'menuBarListItemIrrigation',\n 'fire': 'menuBarListItemFire',\n 'scenarios': 'menuBarListItem',\n 'mining': 'menuBarListItemMining',\n 'sentinel': 'menuBarListItemSentinel',\n 'soil': 'menuBarListItemSoil',\n 'degradation': 'menuBarListItemDegradation',\n 'coral_reef': 'menuBarListItemCoralReef',\n 'urban': 'menuBarListItemUrban',\n };\n\n return mapModuleKeyToClassName[key];\n}\n\nconst mapLocaleKeyToAbbreviation = {\n 'pt-BR': 'PT',\n 'en': 'EN'\n};\n\nconst CustomTooltip = withStyles(() => ({\n tooltip: {\n padding: '8px 12px',\n fontSize: 14,\n fontWeight: 400,\n color: 'white',\n backgroundColor: '#656565',\n boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.12)',\n },\n arrow: {\n color: '#656565'\n },\n}))(Tooltip);\n\nconst TOP_PADDING = 80;\nconst TOP_PADDING_LARGE = 176;\nconst BOTTOM_PADDING = 93;\n\nfunction Header({\n history,\n height,\n iframeMode,\n}) {\n const isMobile = useMediaQuery('(max-width: 768px)');\n const locale = localStorage.getItem('locale') || 'pt-BR';\n const formatMessage = useFormatMessage();\n const windowSize = useWindowSize();\n const client = useApolloClient();\n const [navIsVisible, setNavIsVisible] = useState(false);\n const [menuIsVisible, setMenuIsVisible] = useState(false);\n const [accountMenuIsVisible, setAccountMenuIsVisible] = useState(false);\n const [translateBoxAnchorEl, setTranslateBoxAnchorEl] = useState(null);\n const [showFireModeContent, setShowFireModeContent] = useState(null);\n const [showInfrastructureModeContent, setShowInfrastructureModeContent] = useState(null);\n const [showIrrigationModeContent, setShowIrrigationModeContent] = useState(null);\n const [showDeforestationModeContent, setShowDeforestationModeContent] = useState(null);\n const { data: baseData } = useQuery(GET_BASE_DATA);\n const { data: modulesData } = useQuery(GET_MODULE_DATA);\n const { data: primaryCustomModulesData } = useQuery(GET_MODULE_DATA, {\n client: getCustomClient('8.0')\n });\n const { data: secondaryCustomModulesData } = useQuery(GET_MODULE_DATA, {\n client: getCustomClient('7.1')\n });\n const activeModule = _.get(baseData, 'app.activeModule');\n const prevActiveModule = usePrevious(activeModule);\n const activeModuleContent = _.get(baseData, 'app.activeModuleContent');\n const headerIsVisible = _.get(baseData, 'app.headerIsVisible');\n const mapboxMode = _.get(baseData, 'app.mapboxMode');\n const updatingWarningContentKey = _.get(baseData, 'app.updatingWarningContentKey');\n const buffer = _.get(baseData, 'app.baseParams.buffer');\n const activeClassTreeOptionValue = _.get(baseData, 'app.baseParams.activeClassTreeOptionValue');\n const degradationType = _.get(baseData, 'app.baseParams.degradationType');\n const customViewMode = _.get(baseData, 'app.baseParams.customViewMode');\n const isOnDegradationCrossingMode = degradationType === 'crossing';\n const isOnCustomViewModeCategoryCrossing = customViewMode === 'categoryCrossing';\n const degradationCrossingValues = _.get(baseData, 'app.baseParams.degradationCrossingValues');\n const isWaterIframe = activeModuleContent === 'water:water_iframe';\n const isCoralReefIframe = activeModuleContent === 'coral_reef:coral_reef_iframe';\n const isFireIframe = activeModuleContent === 'fire:fire_iframe';\n const isInfrastructureIframe = activeModuleContent === 'infrastructure:infrastructure_iframe';\n const isIrrigationIframe = activeModuleContent === 'irrigation:irrigation_iframe';\n\n const modulesList = _.get(modulesData, 'modulesList');\n const primaryCustomModulesList = _.get(primaryCustomModulesData, 'modulesList');\n // const secondaryCustomModulesList = _.get(secondaryCustomModulesData, 'modulesList');\n const activeModuleData = _.find(modulesList, { key: activeModule });\n const submodulesList = _.get(activeModuleData, 'submodules');\n\n const mapModuleKeyToCustomModulesList = {\n 'degradation': primaryCustomModulesList,\n 'fire': primaryCustomModulesList,\n };\n\n const updateClientAppState = (params) => {\n client.writeData({\n data: {\n app: {\n __typename: 'AppState',\n ...params\n }\n }\n });\n };\n\n const updateClientAppBaseParamsState = (params) => {\n updateClientAppState({\n baseParams: {\n __typename: 'AppBaseParamsState',\n ...params\n }\n });\n };\n\n const handleActiveModuleChange = (key) => {\n if (iframeMode) {\n history.push('/');\n }\n\n const defaultParams = mapActiveModuleToDefaultParams[key] || {};\n const baseParams = _.get(defaultParams, 'baseParams');\n\n updateClientAppState({\n activeModule: key,\n updatingWarningContentKey: null,\n ...(baseParams ? _.omit(defaultParams, 'baseParams') : defaultParams)\n });\n\n if (baseParams) {\n updateClientAppBaseParamsState(baseParams);\n } else {\n updateClientAppBaseParamsState({\n activeClassTreeOptionValue: null,\n activeClassTreeNodeIds: [],\n activeBaseClassTreeNodeIds: [],\n activeObjectTreeNodeIds: [],\n });\n }\n\n if (_.includes(customClientModules, prevActiveModule) || _.includes(customClientModules, key)) {\n updateClientAppBaseParamsState(initialBaseParams);\n }\n\n setShowFireModeContent(false);\n setShowInfrastructureModeContent(false);\n setShowIrrigationModeContent(false);\n toggleNav();\n };\n\n const toggleVisibility = () => {\n updateClientAppState({ headerIsVisible: !headerIsVisible });\n };\n\n const toggleNav = () => setNavIsVisible(!navIsVisible);\n\n const toggleMenu = () => setMenuIsVisible(!menuIsVisible);\n\n const toggleAccountMenu = () => {\n const isOpen = !!accountMenuIsVisible;\n\n if (isOpen && (accountMenuIsVisible === 'myMaps' || accountMenuIsVisible === 'newMap')) {\n setAccountMenuIsVisible('default');\n } else if (isOpen) {\n setAccountMenuIsVisible(null);\n } else {\n setAccountMenuIsVisible('default');\n }\n };\n\n const closeAccountMenu = () => {\n setAccountMenuIsVisible(null);\n };\n\n const handleShowClassInfo = (id) => {\n if (isMobile) {\n updateClientAppState({\n headerIsVisible: false,\n showClassInfo: id\n });\n } else {\n updateClientAppState({\n showClassInfo: id\n });\n }\n };\n\n const handleShowDashboardInfo = () => {\n if (!isMobile) {\n updateClientAppState({\n showDashboardInfo: true,\n });\n } else {\n updateClientAppState({\n showDashboardInfo: true,\n headerIsVisible: false,\n mapPointInfo: null,\n showClassInfo: null,\n });\n }\n };\n\n const handleTabChange = (newValue) => {\n let appParams = {\n activeModuleContent: newValue,\n showBeforeAndAfterMosaic: false,\n };\n\n updateClientAppState(appParams);\n updateClientAppBaseParamsState({\n activeClassTreeOptionValue: null,\n activeClassTreeNodeIds: [],\n activeBaseClassTreeNodeIds: [],\n activeObjectTreeNodeIds: [],\n degradationFragmentationIsolationValue: null,\n });\n };\n\n const handleMapFlyToChange = (boundingBox) => {\n updateClientAppState({ mapFlyTo: boundingBox });\n };\n\n const handleAddNewMap = () => {\n setAccountMenuIsVisible('newMap');\n };\n\n const handleShowMyMaps = () => {\n setAccountMenuIsVisible('myMaps');\n };\n\n const handleUpdateDegradationCrossingValues = () => {\n const queryParsed = parseCrossingParams(degradationCrossingValues);\n updateClientAppBaseParamsState({\n degradationCrossingValues: {\n ...degradationCrossingValues,\n parsedParams: queryParsed\n }\n });\n };\n\n const renderTabContent = () => {\n const classesViewMode = _.get(baseData, 'app.baseParams.classesViewMode');\n\n if (activeModule === 'degradation' && isOnDegradationCrossingMode) {\n return (\n - \n { _.map(classItems, (item) => {\n return (\n
\n \n \n
\n \n );\n }) }\n \n
\n \n \n
\n \n
\n {/* \n
\n \n
\n
\n \n { _.get(activeModuleData, 'key') === 'degradation' &&\n \n \n \n \n 
\n */}\n
\n );\n };\n\n const renderUpdateWarningContent = () => {\n return (\n \n
\n }\n \n
\n \n { renderTabContent() }\n { hasStatisticsButton &&\n
\n \n
\n }\n \n \n \n
\n {/* \n
\n );\n };\n\n const renderFireModeContent = () => {\n return (\n \n
\n \n
\n \n
\n );\n };\n\n const renderInfrastructureModeContent = () => {\n return (\n \n
\n \n
\n
\n \n \n
\n \n
\n
\n \n \n
\n \n
\n
\n \n \n
\n \n
\n \n
\n );\n };\n\n const renderIrrigationModeContent = () => {\n return (\n \n
\n \n
\n
\n \n
\n
\n \n \n
\n \n
\n
\n \n \n
\n \n
\n );\n };\n\n const renderDeforestationModeContent = () => {\n return (\n \n
\n \n
\n
\n \n \n
\n \n
\n
\n \n \n
\n \n
\n );\n };\n\n const renderWaterModuleIcon = () => {\n return (\n \n
\n \n
\n
\n \n \n
\n \n
\n
\n \n \n
\n \n
\n { !showFireModeContent &&\n !showInfrastructureModeContent &&\n !showIrrigationModeContent &&\n !showDeforestationModeContent &&\n !updatingWarningContentKey &&\n renderMenuContent()\n }\n { updatingWarningContentKey && renderUpdateWarningContent() }\n { showFireModeContent && renderFireModeContent() }\n { showInfrastructureModeContent && renderInfrastructureModeContent() }\n { showIrrigationModeContent && renderIrrigationModeContent() }\n { showDeforestationModeContent && renderDeforestationModeContent() }\n - \n { _.map(_.sortBy(modulesList, 'displayOrder'), (item) => {\n const stringList = _.get(item, 'i18nStrings');\n const selectedString = _.find(stringList, { language: locale });\n const label = _.get(selectedString, 'stringValue');\n\n const isActive = (\n !showFireModeContent &&\n !showInfrastructureModeContent &&\n !showIrrigationModeContent &&\n !updatingWarningContentKey &&\n !iframeMode &&\n _.get(activeModuleData, 'key') === item.key) ||\n (item.key === 'fire' && (showFireModeContent || isFireIframe)) ||\n (item.key === 'infrastructure' && (showInfrastructureModeContent || isInfrastructureIframe)) ||\n (item.key === 'agriculture' && (showIrrigationModeContent || isIrrigationIframe)) ||\n (item.key === 'deforestation' && showDeforestationModeContent) ||\n (item.key === 'coral_reef' && isCoralReefIframe) ||\n (updatingWarningContentKey === item.key);\n\n const rgbColor = hexToRgb(item.primaryColor);\n\n return (\n
\n { !iframeMode &&\n \n \n \n }\n \n \n \n { !iframeMode &&\n \n }\n
\n \n
\n );\n }\n\n const handleChange = (panel) => (_event, isExpanded) => {\n setExpanded(isExpanded ? panel : false);\n };\n\n function updateHeight() {\n setWindowHeight(window.innerHeight);\n setContentHeight(window.innerHeight - (headerHeight + FOOTER_HEIGHT));\n }\n const debouncedUpdateHeight = _.debounce(updateHeight, 500);\n\n return (\n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n
\n Informações do CAR
\n- \n {_.map(data, (item) => {\n return (\n
- \n {item.label}\n {item.value}\n \n );\n })}\n
\n {/* {\n updateClientAppState({\n ruralPropertyCode: code\n });\n }}\n updateClientAppState={updateClientAppState}\n />\n
\n \n \n \n \n
*/}\n - \n { _.map(imageList, (image) => {\n const imageStringList = _.get(image, 'i18nStrings');\n const imageSelectedString = _.find(imageStringList, { language: locale });\n\n return (\n
- \n \n );\n }) }\n
\n
\n \n \n \n \n \n
\n { _.get(titleSelectedString, 'stringValue') }
\n\n
\n \n
\n );\n}\n","import React from 'react';\nimport ReactEcharts from 'echarts-for-react';\nimport _ from 'lodash';\nimport numbro from 'numbro';\n\nfunction tooltipFormatter(params) {\n const colorSpan = (color) => `\n \n \n \n
\n `;\n let str = `${ params.seriesName }`;\n\n const value = _.isObject(params.data) ? params.data.value : params.data;\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n const percentageFormatted = numbro(params.percent / 100).format({\n output: 'percent',\n mantissa: 2\n });\n const paramValue = `${ colorSpan(params.color) } ${ _.get(params, 'data.name') }: ${ valueLabel } (${ percentageFormatted })`;\n\n str += paramValue;\n\n return str;\n}\n\nexport default function PieChart({\n colors,\n serie,\n}) {\n return (\n
`;\n let str = `${ params[0].axisValue }`;\n\n params.forEach((item) => {\n const value = _.isObject(item.data) ? item.data.value : item.data;\n\n if (value) {\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n const paramValue = `${ colorSpan(item.color) } ${ item.seriesName }: ${ valueLabel }`;\n\n str += paramValue;\n }\n });\n\n return str;\n}\n\nexport default function LineChart({\n categories = [],\n series = [],\n}) {\n return (\n
\n \n \n
\n \n
\n )\n}\n","import { gql } from 'graphql.macro';\n\nexport const GET_BASE_DATA = gql`\n query GetBaseData($territoryIds: [Int!]!, $classTreeId: Int!) {\n classTreeList {\n id\n key\n i18nStrings {\n\t\t\t\tlanguage\n\t\t\t\tstringValue\n }\n mvClassTreeLevelsUi {\n id\n classId\n color\n positionInTree\n level\n parentId\n defaultName\n i18nStrings {\n language\n stringValue\n }\n }\n }\n\n coverageClassificationDataList: coverageClassificationDataByTreeList(\n classTreeId: $classTreeId,\n\t\t\tbufferId: null,\n\t\t\tterritoryIds: $territoryIds\n ) {\n territoryId\n year\n classTreeNodeId\n areaInHa\n }\n }\n`;\n","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport _ from 'lodash';\nimport classnames from 'classnames';\nimport numbro from 'numbro';\nimport { FormattedMessage } from 'react-intl';\nimport { CSVLink } from 'react-csv';\n\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport CloseIcon from '@material-ui/icons/Close';\nimport CloudDownloadIcon from '@material-ui/icons/CloudDownload';\nimport Fade from '@material-ui/core/Fade';\nimport IconButton from '@material-ui/core/IconButton';\n\nimport BaseForm from '../../../../../../layout/Header/components/BaseForm';\n\nimport PieChart from '../../components/PieChart';\nimport LineChart from '../../components/LineChart';\nimport StickyTable from '../../components/StickyTable';\n\nimport useFormatMessage from '../../../../../../../../hooks/useFormatMessage';\n\nimport { GET_BASE_DATA } from './query';\n\nimport styles from './DashboardDialogCoverageClassesContent.module.scss';\n\nconst formatNumber = (value) => numbro(value).format({\n thousandSeparated: true,\n mantissa: 2\n});\n\nconst useStyles = makeStyles((theme) => ({\n yearValue: {\n color: theme.palette.primary.main\n },\n printButton: {\n backgroundColor: theme.palette.primary.main,\n '&:hover': {\n backgroundColor: theme.palette.primary.dark,\n }\n },\n}));\n\nexport default function DashboardDialogCoverageClassesContent({\n activeYear,\n baseParams,\n classTreeId\n}) {\n const locale = localStorage.getItem('locale') || 'pt-BR';\n const formatMessage = useFormatMessage();\n const classes = useStyles();\n const territories = _.get(baseParams, 'territories');\n const territoryIds = _.map(territories, 'id');\n const activeClassesLevelsListItems = _.get(baseParams, 'activeClassesLevelsListItems');\n const { data: baseData, loading: loadingBaseData } = useQuery(GET_BASE_DATA, {\n variables: {\n territoryIds: territoryIds,\n classTreeId: classTreeId\n },\n skip: _.isEmpty(territoryIds) || !classTreeId\n });\n\n const classTreesList = _.get(baseData, 'classTreeList');\n const classesLevelsList = _.get(_.find(classTreesList, { id: classTreeId }), 'mvClassTreeLevelsUi');\n\n const classesLevelsListByLevel1 = _.filter(classesLevelsList, { level: 1 });\n const filteredClassesLevelsListByLevel1 = _.filter(classesLevelsListByLevel1, (item) => {\n return _.includes(activeClassesLevelsListItems, item.id);\n });\n const filteredClassesLevelsListByLevel1Ids = _.map(filteredClassesLevelsListByLevel1, 'id');\n const activeClassesLevelsList = _.filter(classesLevelsList, (item) => _.includes(activeClassesLevelsListItems, item.id));\n const coverageClassificationDataList = _.get(baseData, 'coverageClassificationDataList');\n const aggregatedCoverageClassificationDataList = _.values(_.reduce(coverageClassificationDataList, (result, obj) => {\n const key = `${ obj.year }-${ obj.classTreeNodeId }`;\n const nextValue = result[key] ? result[key].areaInHa + obj.areaInHa : obj.areaInHa;\n\n result[key] = {\n ...obj,\n areaInHa: nextValue\n };\n\n return result;\n }, {}));\n\n const parsedData = _.filter(_.map(aggregatedCoverageClassificationDataList, (item) => {\n const classData = _.find(classesLevelsList, { id: item.classTreeNodeId });\n\n return {\n year: Number(_.replace(item.year, '_', '')),\n areaInHa: item.areaInHa,\n classData,\n };\n }), 'classData');\n const years = _.sortBy(_.uniq(_.map(parsedData, 'year')));\n\n const parsedClassesLevelsList = _.map(activeClassesLevelsList, (classData) => {\n const stringList = _.get(classData, 'i18nStrings');\n const selectedString = _.find(stringList, { language: locale });\n const className = `${ _.join(_.get(classData, 'positionInTree'), '.') }. ${ _.get(selectedString, 'stringValue') }`;\n\n return {\n ...classData,\n name: className,\n data: _.map(years, (year) => {\n const coverageClassificationData = _.find(parsedData, (item) => {\n return item.year === year &&\n item.classData.id === classData.id;\n });\n\n return coverageClassificationData ? _.get(coverageClassificationData, 'areaInHa') : null\n })\n };\n });\n\n const pieChartData = _(parsedData)\n .filter((item) => {\n return item.year === activeYear &&\n _.includes(filteredClassesLevelsListByLevel1Ids, _.get(item, 'classData.id'));\n })\n .map((item) => {\n const stringList = _.get(item.classData, 'i18nStrings');\n const selectedString = _.find(stringList, { language: locale });\n\n return {\n name:_.get(selectedString, 'stringValue'),\n value: _.get(item, 'areaInHa'),\n itemStyle: {\n color: _.get(item, 'classData.color')\n },\n };\n })\n .value();\n\n const lineChartSeriesData = _.map(parsedClassesLevelsList, (item) => {\n return {\n name: item.name,\n color: item.color,\n data: item.data,\n level: item.level,\n padding: item.level * 12,\n };\n });\n\n const renderLoading = () => {\n return (\n \n Classes\n
\n - \n { _.map(rows, (row) => (\n
\n
\n );\n };\n\n const renderDownloadTableLink = () => {\n if (_.isEmpty(years) || _.isEmpty(lineChartSeriesData)) {\n return null;\n }\n\n let headers = [\n { key: 'class', label: 'Classe' },\n ];\n\n _.each(years, (year) => {\n headers.push({ key: _.toString(year), label: _.toString(year) });\n });\n\n const parsedData = _(lineChartSeriesData)\n .map((serie) => {\n let rowData = { class: _.get(serie, 'name') };\n\n _.each(_.get(serie, 'data'), (value, index) => {\n rowData[_.toString([years[index]])] = value;\n });\n\n return rowData;\n })\n .flatten()\n .value();\n\n return (\n \n {/*
\n );\n };\n\n if (loadingBaseData) {\n return renderLoading();\n } else if (!loadingBaseData && territories) {\n return renderContent();\n } else {\n return null;\n }\n}\n","import { gql } from 'graphql.macro';\n\nexport const GET_BASE_DATA = gql`\n query GetBaseData($territoryIds: [Int!]!, $classTreeId: Int!) {\n classTreeList {\n id\n key\n i18nStrings {\n\t\t\t\tlanguage\n\t\t\t\tstringValue\n }\n mvClassTreeLevelsUi {\n id\n classId\n color\n positionInTree\n level\n parentId\n defaultName\n }\n }\n\n coverageClassificationDataList: coverageClassificationDataByTreeList(\n classTreeId: $classTreeId,\n\t\t\tbufferId: null,\n\t\t\tterritoryIds: $territoryIds\n ) {\n territoryId\n year\n classTreeNodeId\n areaInHa\n }\n }\n`;\n","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport _ from 'lodash';\nimport classnames from 'classnames';\nimport numbro from 'numbro';\nimport { CSVLink } from 'react-csv';\n\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport CloseIcon from '@material-ui/icons/Close';\nimport CloudDownloadIcon from '@material-ui/icons/CloudDownload';\nimport Fade from '@material-ui/core/Fade';\nimport IconButton from '@material-ui/core/IconButton';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableHead from '@material-ui/core/TableHead';\nimport TableRow from '@material-ui/core/TableRow';\n\nimport BaseForm from '../../../../../../layout/Header/components/BaseForm';\n\nimport PieChart from '../../components/PieChart';\nimport LineChart from '../../components/LineChart';\nimport StickyTable from '../../components/StickyTable';\n\nimport { GET_BASE_DATA } from './query';\n\nimport styles from './DashboardDialogCoverageNaturalOrAnthropicContent.module.scss';\n\nconst formatNumber = (value) => numbro(value).format({\n thousandSeparated: true,\n mantissa: 2\n});\n\nconst useStyles = makeStyles((theme) => ({\n yearValue: {\n color: theme.palette.primary.main\n },\n printButton: {\n backgroundColor: theme.palette.primary.main,\n '&:hover': {\n backgroundColor: theme.palette.primary.dark,\n }\n },\n}));\n\nexport default function DashboardDialogCoverageNaturalOrAnthropicContent({\n activeYear,\n baseParams,\n classTreeId\n}) {\n const classes = useStyles();\n const territories = _.get(baseParams, 'territories');\n const territoryIds = _.map(territories, 'id');\n const activeClassesLevelsListItems = _.get(baseParams, 'activeClassesLevelsListItems');\n const { data: baseData, loading: loadingBaseData } = useQuery(GET_BASE_DATA, {\n variables: {\n territoryIds: territoryIds,\n classTreeId: classTreeId\n },\n skip: _.isEmpty(territoryIds) || !classTreeId\n });\n\n const classTreesList = _.get(baseData, 'classTreeList');\n const classesLevelsList = _.get(_.find(classTreesList, { key: 'natural_or_anthropic' }), 'mvClassTreeLevelsUi');\n\n const classesLevelsListByLevel1 = _.filter(classesLevelsList, { level: 1 });\n const filteredClassesLevelsListByLevel1Ids = _.map(classesLevelsListByLevel1, 'id');\n\n const coverageClassificationDataList = _.get(baseData, 'coverageClassificationDataList');\n const aggregatedCoverageClassificationDataList = _.values(_.reduce(coverageClassificationDataList, (result, obj) => {\n const key = `${ obj.year }-${ obj.classTreeNodeId }`;\n const nextValue = result[key] ? result[key].areaInHa + obj.areaInHa : obj.areaInHa;\n\n result[key] = {\n ...obj,\n areaInHa: nextValue\n };\n\n return result;\n }, {}));\n const filteredCoverageClassificationDataList = _.filter(aggregatedCoverageClassificationDataList, (item) => !_.includes(filteredClassesLevelsListByLevel1Ids, item.id));\n\n const parsedData = _(filteredCoverageClassificationDataList)\n .map((item) => {\n const classData = _.find(classesLevelsList, { id: item.classTreeNodeId });\n \n return {\n year: Number(_.replace(item.year, '_', '')),\n areaInHa: item.areaInHa,\n classData,\n };\n })\n .filter((item) => item.classData && _.includes(activeClassesLevelsListItems, _.get(item, 'classData.id')))\n .value();\n const years = _.sortBy(_.uniq(_.map(parsedData, 'year')));\n\n const parsedClassesLevelsByLevel1Data = _.map(classesLevelsListByLevel1, (classData) => {\n return {\n ...classData,\n name: _.get(classData, 'defaultName'),\n data: _.map(years, (year) => {\n const filteredCoverageClassificationData = _.filter(parsedData, (item) => {\n return item.year === year &&\n item.classData.parentId === classData.id;\n });\n\n return _.sumBy(filteredCoverageClassificationData, 'areaInHa');\n })\n }\n });\n const parsedClassesLevelsByLevel1PieData = _.map(classesLevelsListByLevel1, (classData) => {\n const filteredData = _.filter(parsedData, (item) => {\n return item.year === activeYear &&\n item.classData.parentId === classData.id;\n });\n\n return {\n ...classData,\n name: _.get(classData, 'defaultName'),\n value: _.sumBy(filteredData, 'areaInHa'),\n itemStyle: {\n color: _.get(classData, 'color')\n },\n }\n });\n\n const renderLoading = () => {\n return (\n \n
\n \n
\n
\n \n
\n
\n \n
\n \n \n
\n { renderDownloadTableLink() }\n
\n \n
\n { renderDownloadTableLink() }\n \n
\n );\n };\n\n const renderDownloadTableLink = () => {\n if (_.isEmpty(years) || _.isEmpty(parsedClassesLevelsByLevel1Data)) {\n return null;\n }\n\n let headers = [\n { key: 'class', label: 'Classe' },\n ];\n\n _.each(years, (year) => {\n headers.push({ key: _.toString(year), label: _.toString(year) });\n });\n\n const parsedData = _(parsedClassesLevelsByLevel1Data)\n .map((serie) => {\n let rowData = { class: _.get(serie, 'name') };\n\n _.each(_.get(serie, 'data'), (value, index) => {\n rowData[_.toString([years[index]])] = value;\n });\n\n return rowData;\n })\n .flatten()\n .value();\n\n return (\n \n {/*
\n );\n };\n\n if (loadingBaseData) {\n return renderLoading();\n } else if (!loadingBaseData && territories) {\n return renderContent();\n } else {\n return null;\n }\n}\n","import { gql } from 'graphql.macro';\n\nexport const GET_BASE_DATA = gql`\n query GetBaseData {\n classesLevelsList {\n id\n color\n positionInTree\n level\n parentId\n defaultName\n }\n }\n`;\n","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport _ from 'lodash';\nimport numbro from 'numbro';\n\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableHead from '@material-ui/core/TableHead';\nimport TableRow from '@material-ui/core/TableRow';\n\nimport PieChart from '../../components/PieChart';\nimport LineChart from '../../components/LineChart';\n\nimport { GET_BASE_DATA } from './query';\n\nimport styles from './DashboardDialogQualityContent.module.scss';\n\nconst formatNumber = (value) => numbro(value).format({\n thousandSeparated: true,\n mantissa: 2\n});\n\nconst sampleData = {\n categories: ['1985', '1986', '1987', '1988', '1989', '1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018'],\n series: [\n {\n areaStyle: {},\n name: 'Floresta',\n data: [595674939.89, 595858208.39, 592223534.09, 587669613.43, 584412308.18, 582285405.14, 580003887.87, 577174530.25, 573872548.39, 570535582.59, 566986828.49, 563791577.33, 560581814.33, 558036261.05, 554711478.22, 551899400.22, 549925638.40, 547103441.21, 542411487.15, 539024545.57, 536274323.86, 534123915.16, 532939096.89, 531903157.80, 531258183.03, 531330861.09, 530767363.33, 530151910.14, 529092772.60, 527471134.82, 526084434.15, 524394580.56, 522312764.17, 518937915.7],\n },\n {\n areaStyle: {},\n name: 'Formação Natural não Florestal',\n data: [59459326.34, 59179131.53, 58436262.78, 57959280.14, 57371957.47, 56949802.89, 56693940.37, 56236429.20, 56349333.57, 56243071.31, 56114923.96, 55743441.27, 55632730.39, 55659695.87, 55774630.94, 55860585.60, 56000764.22, 55731141.96, 55570984.87, 54937312.80, 54642890.35, 54490380.13, 54278787.66, 53953672.12, 53544233.85, 53133646.89, 52758293.99, 52463272.89, 52031282.44, 51728929.54, 51210931.00, 50766763.92, 50606236.86, 50036334.3],\n },\n {\n areaStyle: {},\n name: 'Agropecuária',\n data: [177441572.66, 177009733.00, 182071397.87, 187016746.02, 190697616.49, 193022492.96, 195601038.43, 199090181.74, 202013914.92, 205463203.72, 209432383.89, 212795934.74, 215986009.67, 218852381.32, 221452402.41, 223879197.86, 225756355.93, 229024368.38, 233452071.06, 237136160.36, 240131790.74, 242291337.07, 243553185.67, 244705951.05, 245539736.32, 246295866.24, 247007504.61, 247980862.10, 249293550.81, 251012446.09, 252782607.65, 255149573.21, 257114716.61, 260671891.18],\n },\n {\n areaStyle: {},\n name: 'Área não Vegetada',\n data: [3342355.08, 3216005.90, 3090312.77, 3106092.11, 3058678.31, 3060490.55, 3026351.43, 3049558.73, 3175548.75, 3140836.06, 3128865.31, 3134419.50, 3123874.58, 3183666.99, 3273163.95, 3394125.47, 3513908.78, 3520347.73, 3545410.84, 3518871.84, 3522706.66, 3556286.07, 3583335.56, 3631760.05, 3669189.27, 3726614.12, 3784220.84, 3845488.16, 4019087.81, 4083616.40, 4212398.62, 4338027.67, 4557028.78, 4877005.18],\n },\n {\n areaStyle: {},\n name: 'Corpo D\\'água',\n data: [15630653.94, 16286108.19, 15727862.32, 15797880.51, 16009310.45, 16231926.72, 16225103.89, 15999769.58, 16139201.80, 16167840.49, 15887530.26, 16084888.32, 16224919.41, 15817499.31, 16337881.14, 16516505.25, 16353296.41, 16170516.25, 16569834.75, 16932916.26, 16978019.62, 17087793.62, 17195309.71, 17355219.82, 17538258.83, 17062605.45, 17232261.96, 17108171.33, 17112991.26, 17253461.42, 17259018.79, 16900270.66, 16958455.32, 17026435.31],\n },\n {\n areaStyle: {},\n name: 'Não observado',\n data: [26001.45, 25662.35, 25479.53, 25237.14, 24978.46, 24731.09, 24527.38, 24379.86, 24301.93, 24315.19, 24317.45, 24588.21, 25500.97, 25344.83, 25292.71, 25034.96, 24885.62, 25033.82, 25060.70, 25042.53, 25118.14, 25137.31, 25133.88, 25088.53, 25248.06, 25255.58, 25204.65, 25144.75, 25164.45, 25261.08, 25459.14, 25633.35, 25647.61, 25267.58],\n },\n ]\n};\n\nexport default function DashboardDialogQualityContent({\n activeYear,\n baseParams,\n}) {\n const territory = _.get(baseParams, 'territory');\n const { data: baseData, loading: loadingBaseData } = useQuery(GET_BASE_DATA, {\n variables: {\n territoryId: territory\n },\n skip: !territory\n });\n\n const renderLoading = () => {\n return (\n \n
\n \n
\n Visualização por classe (Nível 1 - { activeYear })
\n\n
\n Série histórica
\n\n
\n \n
\n \n Tabela de dados\n (valores em hectares)\n
\n { renderDownloadTableLink() }\n\n
\n );\n };\n\n const renderContent = () => {\n return (\n \n
\n );\n };\n\n if (loadingBaseData) {\n return renderLoading();\n } else if (!loadingBaseData && territory) {\n return renderContent();\n } else {\n return null;\n }\n}\n","import React from 'react';\nimport numbro from 'numbro';\nimport classnames from 'classnames';\nimport { FormattedMessage } from 'react-intl';\nimport { CSVLink } from 'react-csv';\nimport _ from 'lodash';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport CloudDownloadIcon from '@material-ui/icons/CloudDownload';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TableRow from '@material-ui/core/TableRow';\n\nimport useWindowSize from '../../../../../../../../hooks/useWindowSize';\n\nimport styles from './DashboardDialogTransitionContent.module.scss';\n\nfunction formatValue(value) {\n if (!value) { return '-'; }\n\n return numbro(value).format({\n thousandSeparated: true,\n mantissa: 2\n });\n}\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%'\n },\n printButton: {\n backgroundColor: theme.palette.primary.main,\n '&:hover': {\n backgroundColor: theme.palette.primary.dark,\n }\n },\n table: {\n '& thead td': {\n borderBottom: 'none',\n },\n '& th': {\n fontWeight: 400,\n backgroundColor: '#fafafa'\n }\n }\n}));\n\nexport default function TransitionMatrixTable({\n fromYear,\n toYear,\n nodes,\n links,\n}) {\n const classes = useStyles();\n const windowSize = useWindowSize();\n\n const sourceCategories = _.sortBy(_.uniq(_.map(links, 'source')));\n const targetCategories = _.sortBy(_.uniq(_.map(links, 'target')));\n\n const renderDownloadTableLink = () => {\n if (_.isEmpty(links)) {\n return null;\n }\n\n let headers = [\n { key: 'fromCategory', label: '' },\n ];\n\n _.each(targetCategories, (targetCategory) => {\n const categoryData = _.find(nodes, { id: targetCategory });\n\n headers.push({\n key: _.kebabCase(`${ _.get(categoryData, 'label') } (${ toYear })`),\n label: `${ _.get(categoryData, 'label') } (${ toYear })`\n });\n });\n\n headers.push({\n key: 'toCategoryTotal',\n label: `Total (${ toYear })`\n });\n\n let parsedData = _(sourceCategories)\n .map((sourceCategory) => {\n const rowTotal = _.sumBy(links, (link) => {\n if (link.source === sourceCategory) {\n return link.value;\n }\n return 0;\n });\n const categoryData = _.find(nodes, { id: sourceCategory });\n let rowData = { fromCategory: `${ _.get(categoryData, 'label') } (${ fromYear })` };\n\n _.each(targetCategories, (targetCategory) => {\n const categoryData = _.find(nodes, { id: targetCategory });\n const linkData = _.find(links, { source: sourceCategory, target: targetCategory });\n const value = _.get(linkData, 'value');\n\n rowData[_.kebabCase(`${ _.get(categoryData, 'label') } (${ toYear })`)] = value;\n });\n\n rowData['toCategoryTotal'] = rowTotal;\n\n return rowData;\n })\n .flatten()\n .value();\n\n let totalRow = {\n fromCategory: `Total (${ fromYear })`,\n toCategoryTotal: _.sumBy(links, 'value'),\n };\n\n _.each(targetCategories, (targetCategory) => {\n const categoryData = _.find(nodes, { id: targetCategory });\n const columnTotal = _.sumBy(links, (link) => {\n if (link.target === targetCategory) {\n return link.value;\n }\n return 0;\n });\n\n totalRow[_.kebabCase(`${ _.get(categoryData, 'label') } (${ toYear })`)] = columnTotal;\n });\n\n parsedData = _.concat(parsedData, totalRow);\n\n return (\n \n
\n \n
\n Visualização por classe
\n\n
\n Série histórica
\n\n
\n \n
\n Tabela de dados
\n {/*\n \n
\n
\n \n
\n );\n}\n","import React from 'react';\nimport _ from 'lodash';\nimport numbro from 'numbro';\n\nimport { ResponsiveSankey } from '@nivo/sankey';\n\nfunction tooltipFormatter(value) {\n if (!value) { return ''; }\n\n const valueFormatted = numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n\n return `${ valueFormatted } ha`\n}\n\nconst MyResponsiveSankey = ({ data, onClick = () => {} }) => (\n \n \n
\n { renderDownloadTableLink() }\n
\n \n
\n { renderDownloadTableLink() }\n \n \n \n
\n \n
\n { fromYear }
\n { toYear }
\n \n
\n - \n { _.map(sourceCategories, (sourceCategory) => {\n const categoryData = _.find(nodes, { id: sourceCategory });\n\n return (\n
- { _.get(categoryData, 'label') } \n );\n }) }\n
- Total \n
\n { hasClassesControl &&\n \n { renderClassesAutocomplete('source') }\n { renderClassesAutocomplete('target') }\n \n }\n \n \n \n { !_.isEmpty(activeLinks) && !_.isEmpty(filteredNodes) &&\n
\n );\n}\n","import { gql } from 'graphql.macro';\n\nexport const GET_CLASSES_DATA = gql`\n query {\n classTreeList {\n id\n key\n i18nStrings {\n\t\t\t\tlanguage\n\t\t\t\tstringValue\n }\n mvClassTreeLevelsUi {\n id\n color\n classId\n positionInTree\n level\n parentId\n defaultName\n i18nStrings {\n\t\t\t\t\tlanguage\n\t\t\t\t\tstringValue\n }\n }\n }\n }\n`;\n\nexport const GET_CLASS_TREE_DATA = gql`\n query GetClassTreeData(\n $classTreeKey: String!,\n ) {\n classTreeByKey(key: $classTreeKey) {\n id\n key\n \ti18nStrings {\n\t\t\t\tlanguage\n\t\t\t\tstringValue\n }\n\t\t\tmvClassTreeLevelsUi {\n id\n color\n classId\n childrenIds\n positionInTree\n level\n parentId\n defaultName\n classTreeId\n pixelValue\n\t\t\t\ti18nStrings {\n\t\t\t\t\tlanguage\n\t\t\t\t\tstringValue\n\t\t\t\t}\n }\n }\n }\n`;\n\n\nexport const GET_BASE_DATA = gql`\n query GetBaseData(\n $level: [Int!]!,\n $territoryIds: [Int!]!,\n $fromYear: Int!,\n $toYear: Int!,\n $classTreeId: Int!,\n ) {\n coverageClassificationChangesDataByTreeList(\n level: $level,\n fromYear: $fromYear,\n toYear: $toYear,\n classTreeId: $classTreeId,\n territoryIds: $territoryIds \n ) {\n id\n fromTreeNodeId\n toTreeNodeId\n fromYear\n toYear\n areaInHa\n }\n }\n`;\n","import React, { useState } from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport _ from 'lodash';\n\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport Radio from '@material-ui/core/Radio';\nimport RadioGroup from '@material-ui/core/RadioGroup';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\n\nimport Chip from '@material-ui/core/Chip';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport TextField from '@material-ui/core/TextField';\nimport FormControl from '@material-ui/core/FormControl';\n\nimport TransitionMatrixTable from './TransitionMatrixTable';\nimport SankeyChart from '../../components/SankeyChart';\n\nimport TabList from '../../../../../../components/TabList';\n\nimport SankeyChartControl from './components/SankeyChartControl';\n\nimport {\n GET_BASE_DATA,\n GET_CLASS_TREE_DATA,\n GET_CLASSES_DATA,\n} from './query';\n\nimport useFormatMessage from '../../../../../../../../hooks/useFormatMessage';\n\nimport styles from './DashboardDialogTransitionContent.module.scss';\n\nconst levelIds = [1, 2, 3, 4];\n\nexport default function DashboardDialogTransitionContent({\n baseParams,\n onLinkClick = () => {},\n}) {\n const locale = localStorage.getItem('locale') || 'pt-BR';\n const formatMessage = useFormatMessage();\n const [activeLevel, setActiveLevel] = useState(1);\n const [activeTab, setActiveTab] = useState('sankey');\n const territories = _.get(baseParams, 'territories');\n const territoryIds = _.map(territories, 'id');\n const yearRange = _.get(baseParams, 'yearRange');\n const [fromYear, toYear] = _.split(yearRange, '-');\n const { data: defaultClassTreeData, loading: loadingClassesData } = useQuery(GET_CLASS_TREE_DATA, {\n variables: {\n classTreeKey: 'default'\n }\n });\n const defaultClassTreeLevelsList = _.get(defaultClassTreeData, 'classTreeByKey[0].mvClassTreeLevelsUi');\n const defaultClassTreeId = _.get(defaultClassTreeData, 'classTreeByKey[0].id');\n // const { data: classesData, loading: loadingClassesData } = useQuery(GET_CLASSES_DATA, {\n // client: coverageApolloClient\n // });\n // const defaultClassTree = _.find(_.get(classesData, 'classTreesList'), { key: 'default' });\n // const defaultClassTreeId = _.get(defaultClassTree, 'id');\n // const defaultClassTreeLevelsList = _.get(defaultClassTree, 'classTreeLevelsList');\n\n const { data: baseData, loading: loadingBaseData } = useQuery(GET_BASE_DATA, {\n variables: {\n level: _.range(1, activeLevel + 1),\n territoryIds: territoryIds,\n fromYear: parseInt(fromYear),\n toYear: parseInt(toYear),\n classTreeId: defaultClassTreeId,\n },\n skip: _.isEmpty(territoryIds) || !yearRange || loadingClassesData || !defaultClassTreeId\n });\n\n const handleLevelChange = (event) => {\n setActiveLevel(Number(event.target.value));\n };\n\n const handleSankeyClick = (data) => {\n if (_.get(data, 'type') === 'link') {\n const { source, target } = data;\n const sourceTreeNodeId = _.get(source, 'treeNodeId');\n const targetTreeNodeId = _.get(target, 'treeNodeId');\n const parsedId = (sourceTreeNodeId * 100) + targetTreeNodeId;\n\n onLinkClick(parsedId);\n }\n };\n\n const renderLoading = () => {\n return (\n { fromYear } - { toYear }
\n\n
\n }\n \n
\n \n
\n );\n };\n\n const renderTabContent = () => {\n const coverageClassificationChangesDataByTreesList = _.get(baseData, 'coverageClassificationChangesDataByTreeList');\n\n if (_.isNil(coverageClassificationChangesDataByTreesList)) {\n return null;\n }\n\n const uniqData = _.uniqBy(coverageClassificationChangesDataByTreesList, (obj) => `${ obj.fromTreeNodeId }-${ obj.toTreeNodeId }-${ obj.fromYear }-${ obj.toYear }`);\n const aggregatedData = _.values(_.reduce(uniqData, (result, obj) => {\n const key = `${ obj.fromTreeNodeId }-${ obj.toTreeNodeId }-${ obj.fromYear }-${ obj.toYear }`;\n const nextValue = result[key] ? result[key].areaInHa + obj.areaInHa : obj.areaInHa;\n\n result[key] = {\n ...obj,\n areaInHa: nextValue\n };\n\n return result;\n }, {}));\n\n const parsedData = _(aggregatedData)\n .map((item) => {\n const fromClassData = _.find(defaultClassTreeLevelsList, { id: _.get(item, 'fromTreeNodeId') });\n const toClassData = _.find(defaultClassTreeLevelsList, { id: _.get(item, 'toTreeNodeId') });\n const fromYear = _.get(item, 'fromYear');\n const toYear = _.get(item, 'toYear');\n\n const fromPositionLevelLabel = `${ _.join(_.get(fromClassData, 'positionInTree'), '.') }`;\n const fromNodeId = `${ fromPositionLevelLabel }-${ fromYear }-${ _.get(fromClassData, 'id') }`;\n const fromStringList = _.get(fromClassData, 'i18nStrings');\n const fromSelectedString = _.find(fromStringList, { language: locale });\n const fromNode = {\n type: 'node',\n id: fromNodeId,\n treeNodeId: _.get(fromClassData, 'id'),\n level: _.get(fromClassData, 'level'),\n label: `${ fromPositionLevelLabel }. ${ _.get(fromSelectedString, 'stringValue') }`,\n color: _.get(fromClassData, 'color'),\n };\n const toPositionLevelLabel = `${ _.join(_.get(toClassData, 'positionInTree'), '.') }`;\n const toNodeId = `${ toPositionLevelLabel }-${ toYear }-${ _.get(toClassData, 'id') }`;\n const toStringList = _.get(toClassData, 'i18nStrings');\n const toSelectedString = _.find(toStringList, { language: locale });\n const toNode = {\n type: 'node',\n id: toNodeId,\n treeNodeId: _.get(toClassData, 'id'),\n level: _.get(toClassData, 'level'),\n label: `${ toPositionLevelLabel }. ${ _.get(toSelectedString, 'stringValue') }`,\n color: _.get(toClassData, 'color'),\n };\n const link = {\n type: 'link',\n source: fromNodeId,\n target: toNodeId,\n value: _.get(item, 'areaInHa'),\n };\n\n if (fromClassData && toClassData) {\n return [fromNode, toNode, link];\n } else {\n return [];\n }\n })\n .flatten()\n .value();\n\n const nodes = _.orderBy(_.uniqBy(_.filter(parsedData, { type: 'node' }), 'id'), ['label'], ['asc']);\n const links = _.orderBy(_.filter(parsedData, { type: 'link' }), ['source', 'target'], ['asc', 'asc']);\n\n if (_.isEmpty(nodes) || _.isEmpty(links)) {\n return null;\n }\n\n if (activeTab === 'sankey') {\n return (\n \n \n { _.map(levelIds, (level) => {\n return (\n
\n );\n };\n\n if (loadingBaseData) {\n return renderLoading();\n } else if (!loadingBaseData && territories) {\n return renderContent();\n } else {\n return null;\n }\n}\n","import React from 'react';\nimport ReactEcharts from 'echarts-for-react';\nimport _ from 'lodash';\nimport numbro from 'numbro';\n\nfunction tooltipFormatter(params) {\n const colorSpan = (color) => `\n
\n \n { renderTabContent() }\n
\n `;\n let str = `${ params[0].axisValue }`;\n\n params.forEach((item) => {\n const value = _.isObject(item.data) ? item.data.value : item.data;\n\n if (value) {\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n const paramValue = `${ colorSpan(item.color) } ${ item.seriesName }: ${ valueLabel }`;\n\n str += paramValue;\n }\n });\n\n return str;\n}\n\nexport default function BarChart({\n categories = [],\n series = [],\n vertical = true\n}) {\n let xAxis = {\n type: \"category\",\n axisPointer: {\n type: \"shadow\"\n },\n axisLabel: {\n fontSize: 11,\n color: \"#767676\"\n },\n axisLine: {\n color: \"#DDD\"\n },\n data: categories\n };\n let yAxis = {\n axisTick: {\n show: false\n },\n axisLine: {\n color: \"#DDD\"\n },\n splitLine: {\n lineStyle: {\n color: \"rgba(0, 0, 0, 0.05)\"\n }\n },\n axisLabel: {\n formatter: (value) => {\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n\n return valueLabel;\n },\n fontSize: 11,\n color: \"#767676\"\n }\n };\n\n if (!vertical) {\n let tempValue = xAxis;\n xAxis = yAxis;\n yAxis = tempValue;\n }\n\n return (\n
\n
\n );\n };\n\n const renderDownloadTableLink = () => {\n if (_.isEmpty(years) || _.isEmpty(barChartSeriesData)) {\n return null;\n }\n\n let headers = [\n { key: 'class', label: 'Classe' },\n ];\n\n _.each(years, (year) => {\n headers.push({ key: _.toString(year), label: _.toString(year) });\n });\n\n const parsedData = _(barChartSeriesData)\n .map((serie) => {\n let rowData = { class: _.get(serie, 'name') };\n\n _.each(_.get(serie, 'data'), (value, index) => {\n rowData[_.toString([years[index]])] = value;\n });\n\n return rowData;\n })\n .flatten()\n .value();\n\n return (\n \n {/*
\n );\n };\n\n if (loadingBaseData) {\n return renderLoading();\n } else if (!loadingBaseData && territories) {\n return renderContent();\n } else {\n return null;\n }\n}\n","import React from 'react'\nimport ReactEcharts from 'echarts-for-react'\nimport _ from 'lodash'\nimport { onCurrentLocaleCustom } from '../../../../../../../../utils/locale'\nimport numbro from 'numbro'\n\nconst getClassAreaForYear = _.memoize((year) => _.flow(\n _.property('classTreeNode.coverageClassificationDataByTreeList'),\n _.partial(_.filter, _, { year: year }),\n _.partial(_.map, _, 'areaInHa'),\n _.sum\n))\n\nconst getPositionsToOffsetForIndex = (index, numberOfCharts) => {\n const horizontal = { 0: 'left', 1: 'right' }\n const vertical = { 0: 'bottom', 1: 'top' }\n const div = _.flow(_.divide, _.floor)\n const mod = (x, y) => x - (y * div(x, y))\n\n let positions = [ horizontal[mod(index, 2)] ]\n if (numberOfCharts > 2) {\n positions.push(vertical[div(index, 2)])\n }\n\n return positions\n}\n\nexport default function ClassificationsChart({\n // Temporary workaround while this component isn't refactored into separate\n // non-grid based chart components\n allClassTreeLevels = [], // <---\n activeClassTreeLevels = [],\n classTreeCharts = [],\n years = null,\n activeYear\n}) {\n if (!classTreeCharts || !years || !activeYear) {\n return null\n }\n\n const tooltipFormatter = (params) => {\n const colorSpan = (color) => `\n
\n \n
\n
\n \n
\n
\n \n
\n \n \n
\n { renderDownloadTableLink() }\n
\n \n
\n { renderDownloadTableLink() }\n `\n\n const year = _.get(params, `[0].value[${_.indexOf(_.get(params, '[0].dimensionNames'), 'years')}]`, activeYear)\n const chartType = _.get(params, 'componentSubType', _.get(params, '[0].componentSubType'))\n\n if (chartType === 'pie') {\n const value = numbro(_.get(params, `data[${ _.get(params, 'encode.value[0]') }]`)).format({\n thousandSeparated: true,\n mantissa: 0\n })\n\n const percent = numbro(params.percent / 100).format({\n output: 'percent',\n mantissa: 2\n })\n\n return `\n ${_.get(params, 'seriesName')}\n ${ colorSpan(params.color) } ${ _.get(params, 'name') }: ${ value } ha (${ percent })\n `\n } else {\n return `${ year } \\n` +\n _.map(\n activeClassTreeLevels,\n (node) => `\n \n ${ colorSpan(node.color) }\n ${ node.positionInTree.join('.') }. ${ onCurrentLocaleCustom(node.i18nStrings) }:\n ${ numbro(\n _.sum(_.map(_.filter(\n _.get(node, 'classTreeNode.coverageClassificationDataByTreeList'),\n { year: year }\n ), 'areaInHa', 0)\n )).format({\n thousandSeparated: true,\n mantissa: 0\n })\n } ha\n \n `\n ).join('\\n')\n }\n }\n\n const generateBaseSerieForAnyChart = (chart) => ({\n type: _.get(chart, 'chartType.key')\n })\n\n // ugly workaround to postpone a little some refactor that will be needed\n // because I didn't make the best design choices in this component\n let levelsToShowOnPieChart = _.filter(allClassTreeLevels, { level: 1 })\n if (levelsToShowOnPieChart.length === 1) {\n levelsToShowOnPieChart = _.filter(allClassTreeLevels, { level: 2 })\n }\n\n const generateSerieForSingleYearChart = (chart) => (\n _.assign(generateBaseSerieForAnyChart(chart), {\n id: `serie#nodeId/year(${activeYear})`,\n name: `${activeYear}`,\n itemStyle: {\n color: ({ dataIndex }) => (\n _.get(levelsToShowOnPieChart, `[${dataIndex}].color`)\n )\n },\n label: {\n show: false\n },\n encode: {\n itemName: 'treeNodeNames',\n value: `year#${activeYear}`\n },\n left: '15',\n right: '15',\n ...(_.zipObject(\n getPositionsToOffsetForIndex(\n _.findIndex(classTreeCharts, { id: chart.id }),\n classTreeCharts.length\n ),\n ['55%', '55%']\n )),\n })\n )\n\n const generateSeriesForMultiYearChart = (chart, chartIndex) => _.map(activeClassTreeLevels, (treeNode) => (\n _.assign(generateBaseSerieForAnyChart(chart), {\n id: `serie#nodeId/year(${treeNode.id})`,\n name: onCurrentLocaleCustom(_.get(treeNode, 'i18nStrings')),\n itemStyle: { color: treeNode.color },\n encode: { x: 'years', y: `treeNodeId#${treeNode.id}` },\n xAxisIndex: chartIndex,\n yAxisIndex: chartIndex\n })\n ))\n\n const optionTransforms = {\n hideAxis(option, chart) {\n _.each(['x', 'y'], (axis) => {\n _.set(\n _.find(option[`${axis}Axis`], { id: `${axis}Axis#chartId(${chart.id})` }),\n 'show', false\n )\n })\n },\n swapAxis(option, chart) {\n const oldXAxis = _.first(_.remove(option.xAxis, { id: `xAxis#chartId(${chart.id})` }))\n const oldYAxis = _.first(_.remove(option.yAxis, { id: `yAxis#chartId(${chart.id})` }))\n const oldXAxisId = oldXAxis.id\n oldXAxis.id = oldYAxis.id\n oldYAxis.id = oldXAxisId\n option.xAxis.push(oldYAxis)\n option.yAxis.push(oldXAxis)\n\n _.each(_.filter(option.series, { id: `serie#chartId(${chart.id})` }), (serie) => {\n const tempEncodeX = serie.encode.x\n serie.encode.x = serie.encode.y\n serie.encode.y = tempEncodeX\n })\n },\n parseStackedBar(option) {\n _.each(option.series, (serie) => {\n if (serie.type === 'stacked_bar') {\n serie.type = 'bar';\n serie.stack = 'years';\n }\n });\n }\n }\n\n const chartTypeTransformationMappings = {\n sunburst: ['putLevelsAsChildrenOnData'],\n pie: ['hideAxis'],\n bar: ['swapAxis'],\n stacked_bar: ['parseStackedBar'],\n line: [],\n area: [],\n stacked_area: [],\n column: [],\n stacked_column: []\n }\n\n const dataset = {\n sourceHeader: false,\n source: {\n years,\n treeNodeNames: _.map(levelsToShowOnPieChart, _.flow(_.property('i18nStrings'), onCurrentLocaleCustom)),\n\n ...(_.zipObject(\n _.map(activeClassTreeLevels, (n) => `treeNodeId#${n.id}`),\n _.map(activeClassTreeLevels, _.over(_.map(years, getClassAreaForYear)))\n )),\n\n ...(_.zipObject(\n _.map(years, (y) => `year#${y}`),\n _.map(years, (y) => _.map(levelsToShowOnPieChart, getClassAreaForYear(y)))\n ))\n }\n }\n\n let option = {\n legend: {\n show: false\n },\n tooltip: {\n confine: true,\n textStyle: {\n align: 'left',\n color: '#444',\n fontSize: 13\n },\n backgroundColor: '#FFFFFF',\n borderColor: 'rgba(0, 0, 0, 0.1)',\n borderWidth: 1,\n extraCssText: 'box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);',\n formatter: tooltipFormatter\n },\n toolbox: {\n feature: {\n saveAsImage: {\n name: 'MapBiomas',\n title: 'Download',\n }\n }\n },\n\n dataset,\n grid: _.map(classTreeCharts, (chart, index) => ({\n id: `chart#${chart.id}`,\n tooltip: {\n trigger: chart.singleYear ? 'item' : 'axis'\n },\n left: '15',\n right: '15',\n ...(_.zipObject(getPositionsToOffsetForIndex(index, classTreeCharts.length), ['55%', '55%']))\n })),\n xAxis: _.map(classTreeCharts, (chart, index) => ({\n id: `xAxis#chartId(${chart.id})`,\n type: 'category',\n gridIndex: index\n })),\n yAxis: _.map(classTreeCharts, (chart, index) => ({\n id: `yAxis#chartId(${chart.id})`,\n gridIndex: index\n })),\n series: _.flatMap(classTreeCharts, _.cond([\n [_.matches({ chartType: { singleYear: true }}), generateSerieForSingleYearChart],\n [_.constant(true), generateSeriesForMultiYearChart]\n ]))\n }\n\n _.each(classTreeCharts, (chart) => {\n _.each(chartTypeTransformationMappings[chart.chartType.key], (transformation) => {\n optionTransforms[transformation](option, chart)\n })\n })\n\n return
\n
\n )\n }\n\n const renderDownloadTableLink = () => {\n if (_.isEmpty(years) || _.isEmpty(tableRows)) {\n return null;\n }\n\n let headers = [\n { key: 'class', label: 'Classe' },\n ];\n\n _.each(years, (year) => {\n headers.push({ key: _.toString(year), label: _.toString(year) });\n });\n\n const parsedData = _(tableRows)\n .map((serie) => {\n let rowData = { class: _.get(serie, 'name') };\n\n _.each(_.get(serie, 'data'), (value, year) => {\n rowData[_.toString(year)] = value;\n });\n\n return rowData;\n })\n .flatten()\n .value();\n\n return (\n \n
\n )\n }\n\n const hasDataByTree = _.some(\n allClassTreeLevels,\n (t) => _.size(_.get(t, 'classTreeNode.coverageClassificationDataByTree')) > 0\n )\n\n const hasDataByTreeIntersectedByObject = _.some(\n allClassTreeLevels,\n (t) => _.size(_.get(t, 'classTreeNode.coverageClassificationDataByTreeListWithObjectIntersection')) > 0\n )\n\n if (loadingBaseData) {\n return renderLoading()\n } else if (!hasDataByTree && !hasDataByTreeIntersectedByObject) {\n return \n
\n \n
\n \n \n
\n { renderDownloadTableLink() }\n
\n \n
\n { renderDownloadTableLink() }\n \n
\n } else if (!loadingBaseData && territories) {\n return renderContent()\n } else {\n return null\n }\n}\n","import React, { useEffect, useState } from 'react';\nimport _ from 'lodash';\nimport classnames from 'classnames';\nimport { FormattedMessage } from 'react-intl';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport CloseIcon from '@material-ui/icons/Close';\nimport Fade from '@material-ui/core/Fade';\nimport IconButton from '@material-ui/core/IconButton';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport Collapse from '@material-ui/core/Collapse';\n\nimport DashboardDialogCoverageClassesContent from './content/DashboardDialogCoverageClassesContent';\nimport DashboardDialogCoverageNaturalOrAnthropicContent from './content/DashboardDialogCoverageNaturalOrAnthropicContent';\nimport DashboardDialogQualityContent from './content/DashboardDialogQualityContent';\nimport DashboardDialogTransitionContent from './content/DashboardDialogTransitionContent';\nimport DashboardDialogPastureQualityContent from './content/DashboardDialogPastureQualityContent';\nimport DashboardDialogGenericClassesContent from './content/DashboardDialogGenericClassesContent';\n\nimport styles from './DashboardDialog.module.scss';\n\nconst useStyles = makeStyles((theme) => ({\n yearValue: {\n color: theme.palette.primary.main\n }\n}));\n\nexport default function DashboardDialog({\n activeModuleContent,\n activeYear,\n baseParams,\n classTreeKey,\n headerIsVisible,\n isOpen,\n onClose = () => {},\n onUpdateClientAppState = () => {},\n}) {\n const [isExpanded, setIsExpanded] = useState(true);\n\n useEffect(() => {\n if (isOpen) {\n setIsExpanded(true);\n }\n }, [isOpen]);\n\n const classes = useStyles();\n\n const toggleContent = () => setIsExpanded(!isExpanded);\n\n const handleTransitionLinkClick = (id) => {\n onUpdateClientAppState({ transitionClassTreeNodeId: id });\n setIsExpanded(false);\n };\n\n const renderContent = () => {\n switch(activeModuleContent) {\n case 'coverage:coverage_main': {\n const classesViewMode = _.get(baseParams, 'classesViewMode');\n\n if (classesViewMode === 'class') {\n return (\n Ainda não temos estatísticas para as categorias selecionadas.
\n\n \n \n
\n { _.size(territoryIds) > 1 &&\n \n \n \n \n \n { renderContent() }\n \n
\n \n
\n { _.size(territoryIds) > 1 &&\n \n
\n );\n}\n","import { useEffect } from 'react';\nimport { useLeaflet } from 'react-leaflet';\n\nexport default function MapCustomEvents({\n onZoomStart = () => {},\n onMoveStart = () => {},\n onEsc = () => {}\n}) {\n const { map } = useLeaflet();\n \n function handleKeyDown(event) {\n let isEscape = false;\n const { originalEvent } = event;\n\n if (!originalEvent) { return; }\n\n if ('key' in originalEvent) {\n isEscape = (originalEvent.key === 'Escape' || originalEvent.key === 'Esc');\n } else {\n isEscape = (originalEvent.keyCode === 27);\n }\n\n if (isEscape) { onEsc(); }\n }\n\n useEffect(() => {\n map.on('zoomstart', onZoomStart);\n map.on('movestart', onMoveStart);\n map.on('keydown', handleKeyDown);\n\n return () => {\n map.off('zoomstart', onZoomStart);\n map.off('movestart', onMoveStart);\n map.off('keydown', handleKeyDown);\n };\n }, [map]);\n\n return null;\n}\n","import React from 'react';\nimport {\n TileLayer,\n} from 'react-leaflet';\n\nimport useCustomMapLayer from '../../../../../../../../hooks/useCustomMapLayer';\n\nexport default function DegradationLayer({\n activeYear,\n baseParams,\n}) {\n const degradationLayerData = useCustomMapLayer({ ...baseParams, activeYear }); \n const { loading, url } = degradationLayerData;\n\n if (loading || !url) {\n return null;\n }\n\n return (\n \n { mouseCoordinates || '0, 0' }\n
\n \n
\n );\n}\n","import React, { useEffect, useState } from 'react';\nimport _ from 'lodash';\nimport classnames from 'classnames';\nimport { FormattedMessage } from 'react-intl';\n\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport ClickAwayListener from '@material-ui/core/ClickAwayListener';\nimport CloudDownloadIcon from '@material-ui/icons/CloudDownload';\nimport Collapse from '@material-ui/core/Collapse';\nimport ExpandLessIcon from '@material-ui/icons/ExpandLess';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport IconButton from '@material-ui/core/IconButton';\nimport LayersIcon from '@material-ui/icons/Layers';\nimport MapIcon from '@material-ui/icons/Map';\nimport OpacityIcon from '@material-ui/icons/Opacity';\nimport Radio from '@material-ui/core/Radio';\nimport RadioGroup from '@material-ui/core/RadioGroup';\nimport Slider from '@material-ui/core/Slider';\nimport Switch from '@material-ui/core/Switch';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nimport useFormatMessage from '../../../../../../hooks/useFormatMessage';\n\nimport styles from './MapControls.module.scss';\n\nimport baseLayersData from '../../../../../../data/baseLayers';\nimport baseMapsData from '../../../../../../data/baseMaps';\n\nconst useStyles = makeStyles((theme) => ({\n actionButtonActive: {\n backgroundColor: '#F7F7F7',\n '& svg': {\n fill: `${ theme.palette.primary.main } !important`\n },\n },\n}));\n\nconst CustomTooltip = withStyles(() => ({\n tooltip: {\n padding: '8px 12px',\n fontSize: 12,\n fontWeight: 400,\n color: 'white',\n backgroundColor: '#444444',\n boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.12)',\n },\n arrow: {\n color: '#444444'\n },\n}))(Tooltip);\n\nconst CustomSwitch = withStyles({\n switchBase: {\n '&$checked': {\n color: ({ customColor }) => customColor,\n },\n '&$checked + $track': {\n backgroundColor: ({ customColor }) => customColor,\n },\n },\n checked: {\n color: ({ customColor }) => customColor,\n },\n track: {\n color: ({ customColor }) => customColor,\n },\n})(Switch);\n\nexport default function MapControls({\n activeModule,\n activeBaseMap,\n activeYear,\n activeMonth,\n showBeforeAndAfterMosaic,\n activeLayers,\n headerIsVisible,\n layersOpacity,\n onChange,\n}) {\n const classes = useStyles();\n const formatMessage = useFormatMessage();\n const [activeBox, setActiveBox] = useState(null);\n const [opacityValue, setOpacityValue] = useState(layersOpacity);\n const [activeLegendItem, setActiveLegendItem] = useState(null);\n const [activeBaseMapLegendItem, setActiveBaseMapLegendItem] = useState(null);\n\n useEffect(() => {\n if (layersOpacity) {\n setOpacityValue(layersOpacity);\n }\n }, [layersOpacity]);\n\n useEffect(() => {\n if (showBeforeAndAfterMosaic) {\n setActiveBox('opacity');\n }\n }, [showBeforeAndAfterMosaic]);\n\n const isLayerActive = (id) => {\n return !!_.find(activeLayers, (item) => id === item);\n };\n\n const handleLayersChange = (event) => {\n const id = event.target.name;\n let nextActiveItems = _.cloneDeep(activeLayers);\n\n if (isLayerActive(id)) {\n nextActiveItems = _.filter(\n nextActiveItems,\n item => item !== id\n );\n } else {\n nextActiveItems = _.concat(nextActiveItems, id);\n }\n\n onChange('activeLayers', nextActiveItems);\n };\n\n const handleBaseMapChange = (event) => {\n onChange('activeBaseMap', Number(event.target.value));\n };\n\n const getFormattedLabel = (baseKey, labelKey) => {\n return formatMessage(`map_controls.${ baseKey }.options.${ labelKey }`);\n };\n\n const handleToggleLegend = (id) => {\n if (activeLegendItem === id) {\n setActiveLegendItem(null);\n } else {\n setActiveLegendItem(id);\n }\n };\n\n const handleToggleBaseMapLegend = (id) => {\n if (activeBaseMapLegendItem === id) {\n setActiveBaseMapLegendItem(null);\n } else {\n setActiveBaseMapLegendItem(id);\n }\n };\n\n const handleOpacitySliderChangeCommitted = (_event, newValue) => {\n onChange('layersOpacity', newValue);\n };\n\n const handleOpacitySliderChange = (_event, newValue) => {\n setOpacityValue(newValue);\n };\n\n const handleChangeMonth = (event) => {\n const value = event.target.value;\n onChange('activeMonth', value);\n };\n\n return (\n \n \n \n 3D\n \n \n
\n \n
\n );\n}\n","import React from 'react';\nimport ReactEcharts from 'echarts-for-react';\nimport _ from 'lodash';\n\nexport default function PointHistoryChart({\n data,\n}) {\n if (!data) {\n return null;\n }\n\n const categories = _.get(data, 'categories');\n const series = _.get(data, 'series');\n const yAxisNames = _.get(data, 'yAxisNames');\n\n return (\n \n \n \n \n { activeBox === 'opacity' &&\n \n \n }\n
\n \n
\n \n \n \n \n { activeBox === 'layers' &&\n \n \n }\n
\n \n
\n
\n \n { _.map(_.orderBy(baseLayersData, 'index', 'asc'), (item) => {\n return (\n
\n \n \n \n
\n );\n }) }\n \n \n \n { activeLegendItem === item.key ?
\n \n
\n - \n { _.map(item.descriptionData, (content) => {\n return (\n
- \n
: \n { content.value }\n \n );\n }) }\n
\n \n \n \n { activeBox === 'baseMap' &&\n \n \n }\n
\n \n
\n \n { _.map(baseMapsData, (baseMap) => {\n const isDisabled = showBeforeAndAfterMosaic && (\n baseMap.labelKey !== 'mosaic' &&\n baseMap.labelKey !== 'coverage'\n );\n\n if (baseMap.labelKey === 'sentinel' && activeModule !== 'sentinel') {\n return null;\n }\n\n return (\n <>\n \n \n \n );\n }) }\n \n
\n \n \n { getFormattedLabel('base_map', baseMap.labelKey) }\n {\n baseMap.labelKey === 'sentinel' && (\n <>\n / { activeYear }\n \n )\n }\n }\n control={ \n { activeBaseMapLegendItem === baseMap.id ?
\n \n
\n - \n { _.map(baseMap.descriptionData, (content) => {\n return (\n
- \n
: \n { content.value }\n \n );\n }) }\n
CARs
\n- \n {_.map(ruralProperties, (ruralProperty) => {\n return (\n
- { handleRuralPropertyClick(ruralProperty.cod_imovel) }}>\n \n
\n \n {ruralProperty.cod_imovel}\n \n
\n \n
\n \n \n \n
\n
\n \n
\n - \n {_.map(parsedData, (item) => {\n\n return (\n
- \n {item.label}\n {item.value}\n \n );\n\n })}\n
- \n
\n {formatNumber(_.first(latlng))}, {formatNumber(_.last(latlng))}\n \n
\n
\n );\n}\n","import { gql } from 'graphql.macro';\n\nexport const GET_BASE_DATA = gql`\n {\n app @client {\n timelineLimitsRange\n timelineSpecificValues\n }\n }\n`;\n","import React, { useEffect, useState } from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport _ from 'lodash';\nimport classnames from 'classnames';\n\nimport { useIntl } from 'react-intl';\n\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport DateRangeIcon from '@material-ui/icons/DateRange';\nimport Slider from '@material-ui/core/Slider';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nimport { GET_BASE_DATA } from './query';\n\nimport styles from './YearTimelineMultiple.module.scss';\n\nconst useStyles = makeStyles((theme) => ({\n headerInfoValue: {\n color: theme.palette.primary.main,\n },\n}));\n\nconst CustomTooltip = withStyles(() => ({\n tooltip: {\n padding: '4px',\n fontSize: 12,\n color: '#F5F5F9',\n backgroundColor: '#5A5A5A',\n },\n arrow: {\n color: '#5A5A5A',\n },\n popper: {\n zIndex: 4000,\n },\n}))(Tooltip);\n\nconst intervalsByModule = {\n temporal_analysis: [\n [1985, 1990],\n [1990, 1995],\n [1995, 2000],\n [2000, 2005],\n [2005, 2010],\n [2010, 2015],\n [2015, 2020],\n [1990, 2000],\n [2000, 2010],\n [2010, 2020],\n [1985, 2000],\n [1992, 2002],\n [2002, 2012],\n [1985, 2023],\n [2000, 2023],\n [2012, 2023],\n ],\n deforestation: [\n [1986, 1986],\n [1986, 1987],\n [1986, 1988],\n [1986, 1989],\n [1986, 1990],\n [1986, 1991],\n [1986, 1992],\n [1986, 1993],\n [1986, 1994],\n [1986, 1995],\n [1986, 1996],\n [1986, 1997],\n [1986, 1998],\n [1986, 1999],\n [1986, 2000],\n [1986, 2001],\n [1986, 2002],\n [1986, 2003],\n [1986, 2004],\n [1986, 2005],\n [1986, 2006],\n [1986, 2007],\n [1986, 2008],\n [1986, 2009],\n [1986, 2010],\n [1986, 2011],\n [1986, 2012],\n [1986, 2013],\n [1986, 2014],\n [1986, 2015],\n [1986, 2016],\n [1986, 2017],\n [1986, 2018],\n [1986, 2019],\n [1986, 2020],\n [1986, 2021],\n [1986, 2022],\n [1986, 2023],\n [1987, 2023],\n [1988, 2023],\n [1989, 2023],\n [1990, 2023],\n [1991, 2023],\n [1992, 2023],\n [1993, 2023],\n [1994, 2023],\n [1995, 2023],\n [1996, 2023],\n [1997, 2023],\n [1998, 2023],\n [1999, 2023],\n [2000, 2023],\n [2001, 2023],\n [2002, 2023],\n [2003, 2023],\n [2004, 2023],\n [2005, 2023],\n [2006, 2023],\n [2007, 2023],\n [2008, 2023],\n [2009, 2023],\n [2010, 2023],\n [2011, 2023],\n [2012, 2023],\n [2013, 2023],\n [2014, 2023],\n [2015, 2023],\n [2016, 2023],\n [2017, 2023],\n [2018, 2023],\n [2019, 2023],\n [2020, 2023],\n [2021, 2023],\n [2022, 2023],\n [2023, 2023],\n ],\n};\n\nexport default function YearTimelineMultiple({\n activeModule,\n headerIsVisible,\n value: initialValue,\n onChange = () => {},\n}) {\n const intl = useIntl();\n const intervals = intervalsByModule[activeModule];\n\n const yearList = _.sortBy(_.uniq(_.flatten(intervals)));\n const startYearsList = _.sortBy(\n _.uniq(_.map(intervals, (range) => _.first(range)))\n );\n\n const classes = useStyles();\n const { data: baseData } = useQuery(GET_BASE_DATA);\n\n const [startValue, setStartValue] = useState(\n _.get(intervals, '[0][0]', 1985)\n );\n const [endValue, setEndValue] = useState(\n _.get(_.last(intervals), '[1]', 2023)\n );\n\n const filteredIntervals = _.filter(\n intervals,\n (range) => _.first(range) === startValue\n );\n const endYearsList = _.sortBy(\n _.uniq(_.map(filteredIntervals, (range) => _.last(range)))\n );\n\n // useEffect(() => setCurrentValue(initialValue), [initialValue]);\n // useEffect(() => setUpdateKey(_.uniqueId('timeline-')), [isRange, _.last(rangeLimits), _.last(rangeSpecificValues)]);\n\n const handleChange = (type, _event, newValue) => {\n if (type === 'start') {\n const filteredIntervals = _.filter(\n intervals,\n (range) => _.first(range) === newValue\n );\n const endYearsList = _.sortBy(\n _.uniq(_.map(filteredIntervals, (range) => _.last(range)))\n );\n setStartValue(newValue);\n setEndValue(_.last(endYearsList));\n } else {\n setEndValue(newValue);\n }\n };\n\n const handleChangeComitted = (type, _event, newValue) => {\n if (type === 'start') {\n const filteredIntervals = _.filter(\n intervals,\n (range) => _.first(range) === newValue\n );\n const endYearsList = _.sortBy(\n _.uniq(_.map(filteredIntervals, (range) => _.last(range)))\n );\n onChange([newValue, _.last(endYearsList)]);\n } else {\n onChange([startValue, newValue]);\n }\n };\n\n function ValueLabelComponent(props) {\n const { children, index, open, value } = props;\n\n let isOpen = open;\n let title = value;\n\n if (index === 1) {\n isOpen = true;\n title = `${value} - ${intl.formatMessage({\n id: 'mapbiomas.timeline.selected_value',\n })}`;\n }\n\n return (\n \n
\n \n
\n \n
\n \n ({ value: rsv }))}\n value={startValue}\n track={false}\n valueLabelDisplay='auto'\n ValueLabelComponent={ValueLabelComponent}\n onChange={handleChange.bind(this, 'start')}\n onChangeCommitted={handleChangeComitted.bind(this, 'start')}\n classes={{\n mark: styles.timelineMark,\n }}\n />\n \n {startValue} - {endValue}\n \n ({ value: rsv }))}\n value={endValue}\n track={false}\n valueLabelDisplay='auto'\n ValueLabelComponent={ValueLabelComponent}\n onChange={handleChange.bind(this, 'end')}\n onChangeCommitted={handleChangeComitted.bind(this, 'end')}\n classes={{\n mark: styles.timelineMark,\n }}\n />\n
\n \n );\n}\n","import React from 'react';\nimport _ from 'lodash';\nimport { FormattedMessage } from 'react-intl';\nimport copy from 'copy-to-clipboard';\n\nimport Button from '@material-ui/core/Button';\nimport ClickAwayListener from '@material-ui/core/ClickAwayListener';\nimport Fade from '@material-ui/core/Fade';\nimport Popper from '@material-ui/core/Popper';\n\nimport {\n FacebookShareButton,\n FacebookIcon,\n TwitterShareButton,\n TwitterIcon,\n WhatsappShareButton,\n WhatsappIcon,\n} from 'react-share';\n\nimport toast from '../../../../utils/toast';\n\nimport useFormatMessage from '../../../../hooks/useFormatMessage';\n\nimport styles from './ShareBox.module.scss';\n\nexport default function ShareBox({\n anchorEl,\n onClose = () => {},\n pageLink = window.location.href,\n placement = 'bottom',\n}) {\n const formatMessage = useFormatMessage();\n const open = Boolean(anchorEl);\n const title = 'MapBiomas';\n\n const handleCopy = () => {\n if (copy) {\n copy(pageLink);\n toast(formatMessage('mapbiomas.map.share_box.actions.copy_success'));\n }\n onClose();\n };\n\n return (\n \n
\n \n
\n
\n - \n
- \n
\n \n \n - \n
\n \n \n - \n
\n \n \n
`;\n let str = `${ params[0].axisValue }`;\n\n params.forEach((item) => {\n const value = _.isObject(item.data) ? item.data.value : item.data;\n\n if (value) {\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa\n });\n const paramValue = `${ colorSpan(item.color) } ${ item.seriesName }: ${ valueLabel }${ unit ? ` ${ unit }` : '' }`;\n\n str += paramValue;\n }\n });\n\n return str;\n}\n\nconst yAxisMillionLabelFormatter = (value) => {\n return numbro(value / 1000000).format({\n thousandSeparated: true,\n mantissa: 1\n });\n};\n\nconst yAxisLabelPercentageFormatter = (value) => {\n const parsedValue = numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n\n return `${ parsedValue }%`;\n};\n\nexport default function BarChart({\n height = 200,\n isPercentage,\n categories = [],\n series = [],\n vertical = true,\n hideXAxisLabel = false,\n hasAvgMarkLine = false,\n unit,\n mantissa = 0,\n}) {\n const formatMessage = useFormatMessage();\n const maxValue = _(series)\n .map(({ data }) => {\n const sampleItem = _.first(data);\n\n if (_.get(sampleItem, 'value')) {\n return _.map(data, 'value');\n } else {\n return data;\n }\n })\n .flatten()\n .max();\n const hasMillionValue = maxValue > 1000000;\n\n let yAxisName = unit || 'Hectares';\n\n if (hasMillionValue) {\n yAxisName = unit || formatMessage('mapbiomas.statistics.million_hectares');\n }\n\n let nameGap = 55;\n let gridLeft = '30px';\n let markLine = null;\n\n if (hasMillionValue) {\n nameGap = 35;\n gridLeft = '30px';\n } else if (isPercentage) {\n nameGap = 15;\n gridLeft = '15px';\n }\n\n let xAxis = {\n type: \"category\",\n axisPointer: {\n type: \"shadow\"\n },\n axisLabel: {\n show: !hideXAxisLabel,\n fontSize: 11,\n color: \"#767676\"\n },\n axisLine: {\n color: \"#DDD\"\n },\n data: categories\n };\n let yAxis = {\n name: !isPercentage ? yAxisName : null,\n nameLocation: 'middle',\n nameRotate: 90,\n nameGap,\n nameTextStyle: {\n fontSize: 11,\n color: \"#767676\"\n },\n max: isPercentage ? 100 : undefined,\n axisTick: {\n show: false\n },\n axisLine: {\n color: \"#DDD\"\n },\n splitLine: {\n lineStyle: {\n color: \"rgba(0, 0, 0, 0.05)\"\n }\n },\n axisLabel: {\n formatter: (value) => {\n if (isPercentage) {\n return yAxisLabelPercentageFormatter(value);\n } else if (hasMillionValue) {\n return yAxisMillionLabelFormatter(value);\n } else {\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n\n return valueLabel;\n }\n },\n fontSize: 11,\n color: \"#767676\"\n }\n };\n\n if (!vertical) {\n let tempValue = xAxis;\n xAxis = {\n ...yAxis,\n nameRotate: undefined,\n nameGap: 25\n };\n yAxis = tempValue;\n }\n\n if (hasAvgMarkLine) {\n markLine = {\n symbol: [null, null],\n lineStyle: {\n type: 'solid'\n },\n label: {\n fontSize: 11,\n color: '#767676',\n formatter: (params) => {\n const { value } = params;\n\n if (isPercentage) {\n return yAxisLabelPercentageFormatter(value);\n } else if (hasMillionValue) {\n return yAxisMillionLabelFormatter(value);\n } else {\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n\n return valueLabel;\n }\n }\n },\n data: [{ type: 'average', name: 'Média' }]\n };\n }\n\n return (\n
\n
\n );\n}\n","import React from 'react';\nimport numbro from 'numbro';\nimport _ from 'lodash';\n\nimport Grid from '@material-ui/core/Grid';\n\nimport useFormatMessage from '../../../../../../../../hooks/useFormatMessage';\n\nimport InfoTooltip from '../../../../../../../../components/InfoTooltip';\n\nimport MinimalBarData from '../MinimalBarData';\n\nimport styles from '../../StatisticsBox.module.scss';\n\nconst formatNumber = (value) => {\n if (!value) { return '-'; }\n\n return numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n};\n\nexport default function BaseValuesChart({\n title = 'Área queimada no período',\n total,\n totalTitle,\n totalTitleTooltipKey,\n maxValue,\n maxValueTooltipKey,\n maxYear,\n averageValue,\n averageValueTooltipKey,\n averagePercentage,\n minValue,\n minValueTooltipKey,\n minYear,\n minPercentage,\n color,\n}) {\n const formatMessage = useFormatMessage();\n\n return (\n \n \n
\n \n \n { label }\n { tooltip &&
\n \n \n \n \n \n \n \n \n \n
\n );\n}\n","import { gql } from 'graphql.macro';\n\nexport const GET_CLASS_TREE_DATA = gql`\n query GetClassTreeData(\n $classTreeKey: String!,\n ) {\n classTreeByKey(key: $classTreeKey) {\n id\n key\n \ti18nStrings {\n\t\t\t\tlanguage\n\t\t\t\tstringValue\n }\n\t\t\tmvClassTreeLevelsUi {\n id\n color\n classId\n childrenIds\n positionInTree\n level\n parentId\n defaultName\n classTreeId\n pixelValue\n\t\t\t\ti18nStrings {\n\t\t\t\t\tlanguage\n\t\t\t\t\tstringValue\n\t\t\t\t}\n }\n }\n }\n`;\n\n\nexport const GET_BASE_DATA = gql`\n query CalcCoverageByYear(\n $classTreeNodeIds: [Int!]!,\n $filteredActiveClassTreeNodeIds: [Int!]!,\n $activeParentClassTreeNodeIds: [Int!]!,\n $years: [Int!]!,\n $territoriesIds: [Int!]!,\n ) {\n getCalcCoverageWichYears(\n classTreeNodeIds: $activeParentClassTreeNodeIds,\n years: $years,\n territoriesIds: $territoriesIds\n ) {\n average\n maximun\n minimun\n percentage\n areaOccurrence\n distByYears {\n total\n year\n }\n }\n\n getCalcAcumCoverageByClasses(\n classTreeNodeIds: $classTreeNodeIds,\n years: $years,\n territoriesIds: $territoriesIds\n ) {\n acumYear {\n classTreeNodeId\n proporcionality\n total\n }\n year\n }\n\n getCalcAcumCoverageByClassesFiltered: getCalcAcumCoverageByClasses(\n classTreeNodeIds: $filteredActiveClassTreeNodeIds,\n years: $years,\n territoriesIds: $territoriesIds\n ) {\n acumYear {\n classTreeNodeId\n proporcionality\n total\n }\n year\n }\n }\n`;\n","import React, { useEffect, useState, Fragment } from 'react';\nimport _ from 'lodash';\nimport { useQuery } from '@apollo/react-hooks';\nimport { useIntl, FormattedMessage } from 'react-intl';\n\nimport Button from '@material-ui/core/Button';\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport TableChartIcon from '@material-ui/icons/TableChart';\n\nimport BarChart from '../../components/BarChart';\nimport BaseValuesChart from '../../components/BaseValuesChart';\n\nimport getCustomClient from '../../../../../../../../lib/getCustomClient';\n\nimport styles from '../../StatisticsBox.module.scss';\n\nimport {\n GET_BASE_DATA,\n GET_CLASS_TREE_DATA,\n} from './query';\n\nexport default function AnnualStatisticsContent({\n clientType,\n activeYear,\n baseParams,\n classTreeKey,\n statisticsDataIsVisible,\n onShowData,\n}) {\n const locale = localStorage.getItem('locale') || 'pt-BR';\n\n const intl = useIntl()\n\n const mainYear = _.last(activeYear);\n const years = [_.first(activeYear), _.last(activeYear)];\n const activeClassTreeNodeIds = _.get(baseParams, 'activeClassTreeNodeIds');\n const territories = _.get(baseParams, 'territories');\n const territoryIds = _.map(territories, 'id');\n\n const [chartsData, setChartsData] = useState(null);\n const [emptyData, setEmptyData] = useState(false);\n\n const { data: classTreeData, loading: loadingClassTreeData } = useQuery(GET_CLASS_TREE_DATA, {\n variables: {\n classTreeKey\n },\n client: getCustomClient(clientType)\n });\n const classTreeLevelsList = _.get(classTreeData, 'classTreeByKey[0].mvClassTreeLevelsUi');\n const filteredActiveClassTreeNodeIds = _.filter(activeClassTreeNodeIds, (nodeId) => {\n const nodeData = _.find(classTreeLevelsList, { id: nodeId });\n const childrenIds = _.get(nodeData, 'childrenIds');\n\n if (_.isEmpty(childrenIds)) {\n return true;\n } else {\n return !childrenIds.some(id => activeClassTreeNodeIds.indexOf(id) >= 0);\n }\n });\n const getParentIds = (nodeId, ids = []) => {\n const nodeData = _.find(classTreeLevelsList, { id: nodeId });\n const parentId = _.get(nodeData, 'parentId');\n\n if (parentId) {\n return getParentIds(parentId, [...ids, parentId]);\n } else {\n return ids;\n }\n };\n const activeParentClassTreeNodeIds = _.filter(activeClassTreeNodeIds, (nodeId) => {\n const parentIds = getParentIds(nodeId);\n const hasSomeParentActive = parentIds.some(id => activeClassTreeNodeIds.indexOf(id) >= 0);\n\n return !hasSomeParentActive;\n });\n\n const { data: baseData, loading, error: errorBaseData } = useQuery(GET_BASE_DATA, {\n variables: {\n classTreeNodeIds: activeClassTreeNodeIds,\n filteredActiveClassTreeNodeIds: filteredActiveClassTreeNodeIds,\n activeParentClassTreeNodeIds: activeParentClassTreeNodeIds,\n years: years,\n territoriesIds: territoryIds\n },\n skip: loadingClassTreeData,\n client: getCustomClient(clientType)\n });\n\n const getTotalAreaByClassesData = () => {\n const data = _.get(baseData, 'getCalcAcumCoverageByClasses');\n const years = _.map(data, 'year');\n\n const classTreeNodeData = {};\n\n _.each(activeClassTreeNodeIds, (nodeId) => {\n _.each(years, (year) => {\n const yearData = _.find(data, { year });\n const nodeData = _.find(_.get(yearData, 'acumYear'), { classTreeNodeId: nodeId });\n const value = _.get(nodeData, 'total') || null;\n const nodeValues = _.get(classTreeNodeData, nodeId);\n\n if (nodeValues) {\n _.set(classTreeNodeData, nodeId, [...nodeValues, value]);\n } else {\n _.set(classTreeNodeData, nodeId, [value]);\n }\n });\n });\n\n const parsedSeries = _.map(_.keys(classTreeNodeData), (nodeId) => {\n const parsedNodeId = Number(nodeId);\n const nodeData = _.find(classTreeLevelsList, { id: parsedNodeId });\n const stringList = _.get(nodeData, 'i18nStrings');\n const selectedString = _.find(stringList, { language: locale });\n const label = _.get(selectedString, 'stringValue');\n const prettyIndexOfNodeInTree = _.join(_.get(nodeData, 'positionInTree'), '.');\n\n return {\n nodeId: parsedNodeId,\n stack: 'year',\n name: `${ prettyIndexOfNodeInTree }. ${ label }`,\n color: _.get(nodeData, 'color') || '#e74c3c',\n data: _.get(classTreeNodeData, nodeId),\n };\n });\n const sortedSeries = _.sortBy(parsedSeries, 'name');\n const filteredSeries = _.filter(sortedSeries, ({ nodeId }) => _.includes(filteredActiveClassTreeNodeIds, nodeId));\n\n return {\n categories: years,\n series: sortedSeries,\n filteredSeries,\n };\n };\n\n const getPercentageAreaByClasses = () => {\n const data = _.get(baseData, 'getCalcAcumCoverageByClassesFiltered');\n const years = _.map(data, 'year');\n\n const classTreeNodeData = {};\n\n _.each(filteredActiveClassTreeNodeIds, (nodeId) => {\n _.each(years, (year) => {\n const yearData = _.find(data, { year });\n const nodeData = _.find(_.get(yearData, 'acumYear'), { classTreeNodeId: nodeId });\n const value = _.get(nodeData, 'proporcionality') || null;\n const nodeValues = _.get(classTreeNodeData, nodeId);\n\n if (nodeValues) {\n _.set(classTreeNodeData, nodeId, [...nodeValues, value]);\n } else {\n _.set(classTreeNodeData, nodeId, [value]);\n }\n });\n });\n\n const parsedSeries = _.map(_.keys(classTreeNodeData), (nodeId) => {\n const parsedNodeId = Number(nodeId);\n const nodeData = _.find(classTreeLevelsList, { id: parsedNodeId });\n const stringList = _.get(nodeData, 'i18nStrings');\n const selectedString = _.find(stringList, { language: locale });\n const label = _.get(selectedString, 'stringValue');\n const prettyIndexOfNodeInTree = _.join(_.get(nodeData, 'positionInTree'), '.');\n\n return {\n nodeId: parsedNodeId,\n stack: 'year',\n name: `${ prettyIndexOfNodeInTree }. ${ label }`,\n color: _.get(nodeData, 'color') || '#e74c3c',\n data: _.get(classTreeNodeData, nodeId),\n };\n });\n const sortedSeries = _.sortBy(parsedSeries, 'name');\n\n return {\n categories: years,\n series: sortedSeries,\n filteredSeries: sortedSeries\n };\n };\n\n useEffect(() => {\n const sampleData = _.get(baseData, 'getCalcCoverageWichYears[0].maximun');\n\n if ((!loading && errorBaseData) || _.isNull(sampleData)) {\n setEmptyData(true);\n } else {\n setEmptyData(false);\n }\n\n if (!loadingClassTreeData && !loading && baseData) {\n setChartsData({\n 'totalAreaByClasses': getTotalAreaByClassesData(),\n 'percentageAreaByClasses': getPercentageAreaByClasses(),\n });\n }\n }, [baseData, loading, loadingClassTreeData, errorBaseData]);\n\n useEffect(() => {\n if (statisticsDataIsVisible) {\n handleShowData();\n }\n }, [chartsData]);\n\n const areaByPeriod = () => {\n const data = _.get(baseData, 'getCalcCoverageWichYears[0]');\n const distByYears = _.get(data, 'distByYears') || [];\n const total = _.get(data, 'areaOccurrence') || 0;\n const maxValue = _.get(data, 'maximun') || 0;\n const maxYear = _.get(_.find(distByYears, { total: maxValue }), 'year');\n const averageValue = _.get(data, 'average') || 0;\n const minValue = _.get(data, 'minimun') || 0;\n const minYear = _.get(_.find(distByYears, { total: minValue }), 'year');\n const averagePercentage = (averageValue / maxValue) * 100;\n const minPercentage = (minValue / maxValue) * 100;\n\n const customTotal = _.get(_.find(distByYears, { year: mainYear }), 'total') || null;\n const isCustom = _.includes([\n 'mining_annual',\n 'quality_of_pasture_main',\n 'regeneration_annual_by_class',\n 'deforestation_annual_by_class',\n ], classTreeKey);\n\n return (\n { title }
\n- \n
- \n \n { formatNumber(total) }\n ha\n \n { totalTitle &&\n \n { totalTitle }\n { totalTitleTooltipKey &&\n
\n
\n
\n );\n };\n\n const percentageAreaByClasses = () => {\n const categories = _.get(chartsData, 'percentageAreaByClasses.categories') || [];\n const series = _.get(chartsData, 'percentageAreaByClasses.filteredSeries') || [];\n\n return (\n \n
\n
\n );\n };\n\n const handleShowData = () => {\n const totalAreaByClassesChartData = _.get(chartsData, 'totalAreaByClasses');\n const totalAreaByClassesChartDataCategories = _.get(totalAreaByClassesChartData, 'categories') || [];\n const totalAreaByClassesChartDataSeries = _.get(totalAreaByClassesChartData, 'series') || [];\n\n const totalAreaByClassesChart = {\n title: \n \n
\n \n
\n }\n { emptyData &&\n \n
\n }\n { renderData() }\n `;\n let str = `${ params[0].axisValue }`;\n\n params.forEach((item) => {\n const value = _.isObject(item.data) ? item.data.value : item.data;\n\n if (value) {\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa,\n });\n const paramValue = `${ colorSpan(item.color) } ${ item.seriesName }: ${ valueLabel }${ unit ? ` ${ unit }` : '' }`;\n\n str += paramValue;\n }\n });\n\n return str;\n}\n\nconst yAxisMillionLabelFormatter = (value) => {\n return numbro(value / 1000000).format({\n thousandSeparated: true,\n mantissa: 1\n });\n};\n\nexport default function LineChart({\n categories = [],\n series = [],\n chartType = 'line',\n height = 200,\n unit,\n mantissa,\n showLegend = false,\n showAxisLine = true,\n legendHeight = '34px',\n}) {\n let seriesOptions = {\n type: 'line'\n };\n\n if (chartType === 'bar') {\n seriesOptions = {\n type: 'bar',\n stack: 'total',\n };\n }\n\n const formatMessage = useFormatMessage();\n const maxValue = _(series)\n .map('data')\n .flatten()\n .max();\n const hasMillionValue = maxValue > 1000000;\n\n let yAxisName = unit || 'Hectares';\n\n if (hasMillionValue) {\n yAxisName = unit || formatMessage('mapbiomas.statistics.million_hectares');\n }\n\n return (\n
\n
\n );\n };\n\n const handleShowData = () => {\n onShowData([\n _.get(chartsData, 'accumulatedAreaFromAllPeriod')\n ]);\n };\n\n const renderData = () => {\n if (emptyData) {\n return null;\n }\n\n return (\n \n {intl.formatMessage({id: 'mapbiomas.statistics.burned.accumulated.title'})}\n
\n\n \n
\n \n
\n }\n { emptyData &&\n \n
\n }\n { renderData() }\n `;\n let str = `${ params.seriesName }`;\n\n const value = _.isObject(params.data) ? params.data.value : params.data;\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa,\n });\n const percentageFormatted = numbro(params.percent / 100).format({\n output: 'percent',\n mantissa: 2\n });\n const paramValue = `${ colorSpan(params.color) } ${ _.get(params, 'data.name') }: ${ valueLabel }${ unit ? ` ${ unit }` : '' } (${ percentageFormatted })`;\n\n str += paramValue;\n\n return str;\n}\n\nexport default function PieChart({\n hasLegend = false,\n colors,\n serie,\n unit,\n mantissa,\n}) {\n return (\n
\n \n
\n
\n );\n };\n\n const totalAreaByClasses = () => {\n const categories = _.get(chartsData, 'totalAreaByClasses.categories') || [];\n const series = _.get(chartsData, 'totalAreaByClasses.filteredSeries') || [];\n\n return (\n \n
\n \n
\n
\n );\n };\n\n const handleShowData = () => {\n const classViewChartData = _.get(chartsData, 'totalAreaByClassesOnFirstLevel');\n const classViewChart = {\n title: formatMessage('mapbiomas.dashboard.coverage.coverage_main.charts.classes_pie.title', { year: toYear }),\n columns: ['Total'],\n rows: _.map(classViewChartData, (item) => {\n return {\n name: _.get(item, 'name'),\n data: [_.get(item, 'value')],\n };\n }),\n };\n\n const totalAreaByClassesChartData = _.get(chartsData, 'totalAreaByClasses');\n const totalAreaByClassesChartDataCategories = _.get(totalAreaByClassesChartData, 'categories') || [];\n const totalAreaByClassesChartDataSeries = _.get(totalAreaByClassesChartData, 'series') || [];\n\n const totalAreaByClassesChart = {\n title: \n \n
\n \n
\n }\n { emptyData &&\n \n
\n }\n { renderData() }\n `;\n let str = `${ params.seriesName }`;\n\n const value = _.isObject(params.data) ? params.data.value : params.data;\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa,\n });\n const percentageFormatted = numbro(_.get(params, 'data.percentage') / 100).format({\n output: 'percent',\n mantissa: 2\n });\n const paramValue = `${ colorSpan(params.color) } ${ _.get(params, 'data.name') }: ${ valueLabel }${ unit ? ` ${ unit }` : '' } (${ percentageFormatted })`;\n\n str += paramValue;\n\n return str;\n}\n\nexport default function SunburstChart({\n serieTitle,\n data,\n unit,\n mantissa,\n}) {\n return (\n
\n
\n
\n );\n };\n\n const renderHistoricalSeriesChart = () => {\n const years = _.get(chartsData, 'years');\n const data = _.get(chartsData, 'historicalSeriesChartData');\n const historicalSeriesChartDataUnit = _.get(chartsData, 'historicalSeriesChartDataUnit');\n const historicalLevels = _.get(chartsData, 'historicalLevels');\n\n if (_.isEmpty(data)) {\n return null;\n }\n\n return (\n \n
\n );\n };\n\n const handleShowData = () => {\n const parsedSunburstChartData = _(_.get(chartsData, 'sunburstChartData'))\n .map((item) => {\n const baseItem = {\n name: _.get(item, 'name'),\n level: _.get(item, 'level'),\n data: [_.get(item, 'value')],\n fontWeight: '600',\n padding: 12\n };\n\n return [\n baseItem,\n ..._.map(_.get(item, 'children'), (child) => {\n return {\n name: _.get(child, 'name'),\n level: _.get(child, 'level'),\n data: [_.get(child, 'value')],\n padding: 24\n };\n })\n ];\n })\n .flatten()\n .value();\n const sunburstChart = {\n title: formatMessage('mapbiomas.dashboard.coverage.coverage_main.charts.sunburst.title', { year: currentYear }),\n columns: ['Total'],\n rows: parsedSunburstChartData,\n mantissa: valueMantissa\n };\n\n const years = _.get(chartsData, 'years');\n const historicalSeriesChartData = _.get(chartsData, 'historicalSeriesChartData');\n const totalRow = {\n name: 'Total',\n data: _.reduce(_.range(0, _.size(years)), (data, yearIndex) => {\n data[yearIndex] = _.sumBy(historicalSeriesChartData, (item) => _.get(item, `data[${ yearIndex }]`, 0));\n\n return data;\n }, []),\n };\n const historicalSeriesChart = {\n title: formatMessage('mapbiomas.dashboard.coverage.coverage_main.charts.historical_line.title'),\n columns: years,\n rows: [\n ...historicalSeriesChartData,\n totalRow\n ],\n mantissa: valueMantissa\n };\n\n onShowData([\n sunburstChart,\n historicalSeriesChart,\n ]);\n };\n\n return (\n \n
\n \n \n { _.map(historicalLevels, (level) => {\n return (\n \n );\n }) }\n \n \n
\n \n
\n }\n { renderSunburstChart() }\n { renderHistoricalSeriesChart() }\n \n \n
\n
\n );\n };\n\n const renderHistoricalSeriesChart = () => {\n const years = _.get(chartsData, 'years');\n const data = _.get(chartsData, 'historicalSeriesChartData');\n const historicalSeriesChartDataUnit = _.get(chartsData, 'historicalSeriesChartDataUnit');\n const historicalLevels = _.get(chartsData, 'historicalLevels');\n\n return (\n \n
\n );\n };\n\n const handleShowData = () => {\n const parsedSunburstChartData = _(_.get(chartsData, 'sunburstChartData'))\n .map((item) => {\n const baseItem = {\n name: _.get(item, 'name'),\n level: _.get(item, 'level'),\n data: [_.get(item, 'value')],\n fontWeight: '600',\n padding: 12\n };\n\n return [\n baseItem,\n ..._.map(_.get(item, 'children'), (child) => {\n return {\n name: _.get(child, 'name'),\n level: _.get(child, 'level'),\n data: [_.get(child, 'value')],\n padding: 24\n };\n })\n ];\n })\n .flatten()\n .value();\n const sunburstChart = {\n title: formatMessage('mapbiomas.dashboard.coverage.coverage_main.charts.sunburst.title', { year: currentYear }),\n columns: ['Total'],\n rows: parsedSunburstChartData,\n mantissa: valueMantissa\n };\n\n const years = _.get(chartsData, 'years');\n const historicalSeriesChartData = _.get(chartsData, 'historicalSeriesChartData');\n const totalRow = {\n name: 'Total',\n data: _.reduce(_.range(0, _.size(years)), (data, yearIndex) => {\n data[yearIndex] = _.sumBy(historicalSeriesChartData, (item) => _.get(item, `data[${ yearIndex }]`, 0));\n\n return data;\n }, []),\n };\n const historicalSeriesChart = {\n title: formatMessage('mapbiomas.dashboard.coverage.coverage_main.charts.historical_line.title'),\n columns: years,\n rows: [\n ...historicalSeriesChartData,\n totalRow\n ],\n mantissa: valueMantissa\n };\n\n onShowData([\n sunburstChart,\n historicalSeriesChart,\n ]);\n };\n\n return (\n \n
\n \n \n { _.map(historicalLevels, (level) => {\n return (\n \n );\n }) }\n \n \n
\n \n
\n }\n { renderSunburstChart() }\n { !hasSingleYear && renderHistoricalSeriesChart() }\n \n \n
\n
\n );\n };\n\n const handleShowData = () => {\n const totalBurnedAreaByYearChartData = _.get(chartsData, 'totalBurnedAreaByYear') || [];\n const totalBurnedAreaByYearChart = {\n title: intl.formatMessage({id: 'mapbiomas.statistics.burned.total_per_year_title'}),\n columns: _.get(totalBurnedAreaByYearChartData, 'categories'),\n rows: _.get(totalBurnedAreaByYearChartData, 'series'),\n };\n\n onShowData([\n totalBurnedAreaByYearChart,\n ]);\n };\n\n const renderData = () => {\n if (emptyData) {\n return null;\n }\n\n return (\n \n \n
\n \n
\n }\n { emptyData &&\n \n
\n }\n { renderData() }\n `;\n let str = `${ params[0].axisValue }`;\n\n params.forEach((item) => {\n const value = _.isObject(item.data) ? item.data.value : item.data;\n\n if (value) {\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n const paramValue = `${ colorSpan(item.color) } ${ item.seriesName }: ${ valueLabel }`;\n\n str += paramValue;\n }\n });\n\n return str;\n}\n\nconst mapMonthToIndex = {\n 'Janeiro': 1,\n 'January': 1,\n 'Fevereiro': 2,\n 'February': 2,\n 'Março': 3,\n 'March': 3,\n 'Abril': 4,\n 'April': 4,\n 'Maio': 5,\n 'May': 5,\n 'Junho': 6,\n 'June': 6,\n 'Julho': 7,\n 'July': 7,\n 'Agosto': 8,\n 'August': 8,\n 'Setembro': 9,\n 'September': 9,\n 'Outubro': 10,\n 'October': 10,\n 'Novembro': 11,\n 'November': 11,\n 'Dezembro': 12,\n 'December': 12,\n};\n\nconst yAxisLabelFormatter = (value) => {\n return numbro(value / 1000000).format({\n thousandSeparated: true,\n mantissa: 0\n });\n};\n\nexport default function BurnedAreaCustomChart({\n categories,\n data,\n vertical = true,\n customYAxisLabelFormatter = yAxisLabelFormatter,\n}) {\n const intl = useIntl()\n let yAxisName = 'Hectares';\n let nameGap = 55;\n let gridLeft = '30px';\n\n const maxValue = _.max(_.flatten(_.values(data)));\n const hasMillionValue = maxValue > 1000000;\n\n if (hasMillionValue) {\n nameGap = 35;\n gridLeft = '30px';\n yAxisName = intl.formatMessage({id: 'mapbiomas.statistics.million_hectares'})\n }\n\n let xAxis = {\n type: 'category',\n axisPointer: {\n type: 'shadow'\n },\n axisLabel: {\n fontSize: 11,\n color: '#767676',\n formatter: (value) => {\n return mapMonthToIndex[value] || value;\n }\n },\n axisLine: {\n color: '#DDD'\n },\n data: categories\n };\n let yAxis = {\n name: yAxisName || null,\n nameLocation: 'middle',\n nameRotate: 90,\n nameGap,\n nameTextStyle: {\n fontSize: 11,\n color: '#767676'\n },\n axisTick: {\n show: false\n },\n axisLine: {\n color: '#DDD'\n },\n splitLine: {\n lineStyle: {\n color: 'rgba(0, 0, 0, 0.05)'\n }\n },\n axisLabel: {\n formatter: (value) => {\n if (customYAxisLabelFormatter && hasMillionValue) {\n return customYAxisLabelFormatter(value);\n } else {\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n\n return valueLabel;\n }\n },\n fontSize: 11,\n color: '#767676'\n }\n };\n\n if (!vertical) {\n let tempValue = xAxis;\n xAxis = yAxis;\n yAxis = tempValue;\n }\n\n return (\n
\n
\n );\n };\n\n const annualAreaByMonth = () => {\n const categories = _.get(chartsData, 'annualAreaByMonth.categories') || [];\n const series = _.get(chartsData, 'annualAreaByMonth.series') || [];\n\n return (\n \n {intl.formatMessage({id: 'mapbiomas.statistics.burned.area_burned_per_month'})}\n { intl.formatMessage({id: 'mapbiomas.statistics.burned.area_burned_per_month_description'}) }\n
\n\n
\n );\n };\n\n const handleShowData = () => {\n const customBurnedAreaByMonthChartData = _.get(chartsData, 'customBurnedAreaByMonth');\n const customBurnedAreaByMonthChartDataCategories = _.get(customBurnedAreaByMonthChartData, 'categories') || [];\n const customBurnedAreaByMonthChartDataData = _.get(customBurnedAreaByMonthChartData, 'data');\n\n const customBurnedAreaByMonthChart = {\n title: intl.formatMessage({id: 'mapbiomas.statistics.burned.area_burned_per_month'}),\n columns: customBurnedAreaByMonthChartDataCategories,\n rows: [\n {\n name: intl.formatMessage({id: 'mapbiomas.statistics.burned.burned_area'}),\n data: _.map(customBurnedAreaByMonthChartDataData, 'totalburnedarea')\n },\n {\n name: intl.formatMessage({id: 'mapbiomas.statistics.burned.max_value'}),\n data: _.map(customBurnedAreaByMonthChartDataData, 'maximun')\n },\n {\n name: intl.formatMessage({id: 'mapbiomas.statistics.burned.average_value'}),\n data: _.map(customBurnedAreaByMonthChartDataData, 'average')\n },\n {\n name: intl.formatMessage({id: 'mapbiomas.statistics.burned.min_value'}),\n data: _.map(customBurnedAreaByMonthChartDataData, 'minimun')\n },\n ]\n };\n\n const annualAreaByMonthChartData = _.get(chartsData, 'annualAreaByMonth');\n const annualAreaByMonthChartDataCategories = _.get(annualAreaByMonthChartData, 'categories') || [];\n const annualAreaByMonthChartDataSeries = _.get(annualAreaByMonthChartData, 'series') || [];\n\n const annualAreaByMonthChart = {\n title: intl.formatMessage({id: 'mapbiomas.statistics.burned.month_burned_area_historic'}),\n columns: annualAreaByMonthChartDataCategories,\n rows: _.map(annualAreaByMonthChartDataSeries, (serie) => {\n return {\n name: _.get(serie, 'name'),\n data: _.get(serie, 'data')\n };\n })\n };\n\n onShowData([\n customBurnedAreaByMonthChart,\n annualAreaByMonthChart,\n ]);\n };\n\n const renderData = () => {\n if (emptyData) {\n return null;\n }\n\n return (\n \n {intl.formatMessage({id: 'mapbiomas.statistics.burned.month_burned_area_historic'})}\n {intl.formatMessage({id: 'mapbiomas.statistics.burned.month_burned_area_historic_description'})}\n
\n\n \n
\n \n
\n }\n { emptyData &&\n \n
\n }\n { renderData() }\n \n \n
\n
\n );\n };\n\n const accumulatedAreaFromAllPeriod = () => {\n const categories = _.get(chartsData, 'accumulatedAreaFromAllPeriod.columns') || [];\n const values = _.get(chartsData, 'accumulatedAreaFromAllPeriod.rows[0].data') || [];\n\n return (\n \n
\n - \n
- \n \n { formatNumber(lastValue) }\n ha\n \n \n
\n \n \n
\n
\n );\n };\n\n const handleShowData = () => {\n onShowData([\n _.get(chartsData, 'accumulatedAreaFromAllPeriod')\n ]);\n };\n\n const renderData = () => {\n if (emptyData) {\n return null;\n }\n\n return (\n \n {intl.formatMessage({id: 'mapbiomas.statistics.burned.accumulated.title'})}\n
\n\n \n
\n \n
\n }\n { emptyData &&\n \n
\n }\n { renderData() }\n \n \n
\n
\n );\n };\n\n const frequencyByArea = () => {\n const values = _.get(chartsData, 'frequencyByArea') || [];\n\n return (\n \n
\n \n \n { !ageMode ? intl.formatMessage({id: 'mapbiomas.statistics.burned.frequency.area_frequency.title'}) : intl.formatMessage({id: 'mapbiomas.statistics.burned.frequency.area_per_age.title'}) }\n\n
\n\n
\n );\n };\n\n const frequencyByAreaAndClass = () => {\n const categories = _.get(chartsData, 'frequencyByAreaAndClass.categories') || [];\n const series = _.get(chartsData, 'frequencyByAreaAndClass.series') || [];\n\n return (\n \n { !ageMode ? intl.formatMessage({id: 'mapbiomas.statistics.burned.frequency.area_frequency.title'}) : intl.formatMessage({id: 'mapbiomas.statistics.burned.frequency.area_per_age.title'}) }\n\n
\n\n \n \n \n {\n !ageMode\n ? intl.formatMessage({id: 'mapbiomas.statistics.burned.frequency.area_frequency.subtitle'})\n : intl.formatMessage({id: 'mapbiomas.statistics.burned.frequency.area_per_age.subtitle'})\n }\n
\n
\n );\n };\n\n const handleShowData = () => {\n const frequencyByAreaChartData = _.get(chartsData, 'frequencyByArea') || [];\n const frequencyByAreaChart = {\n title: !ageMode ? intl.formatMessage({id: 'mapbiomas.statistics.burned.frequency.area_frequency.title'}) : intl.formatMessage({id: 'mapbiomas.statistics.burned.frequency.area_per_age.title'}),\n columns: _.map(frequencyByAreaChartData, 'name'),\n rows: [\n {\n name: 'Total',\n data: _.map(frequencyByAreaChartData, 'value'),\n }\n ]\n };\n\n const frequencyByAreaAndClassChartData = _.get(chartsData, 'frequencyByAreaAndClass');\n const frequencyByAreaAndClassChartDataCategories = _.get(frequencyByAreaAndClassChartData, 'categories') || [];\n const frequencyByAreaAndClassChartDataSeries = _.get(frequencyByAreaAndClassChartData, 'series') || [];\n\n const frequencyByAreaAndClassChart = {\n title:\n !ageMode\n ? intl.formatMessage({id: 'mapbiomas.statistics.burned.frequency.area_frequency.subtitle'})\n : intl.formatMessage({id: 'mapbiomas.statistics.burned.frequency.area_per_age.subtitle'}),\n columns: frequencyByAreaAndClassChartDataCategories,\n rows: _.map(frequencyByAreaAndClassChartDataSeries, (serie) => {\n return {\n name: _.get(serie, 'name'),\n data: _.get(serie, 'data')\n };\n })\n };\n\n onShowData([\n frequencyByAreaChart,\n frequencyByAreaAndClassChart,\n ]);\n };\n\n const renderData = () => {\n if (emptyData) {\n return null;\n }\n\n return (\n \n \n {\n !ageMode\n ? intl.formatMessage({id: 'mapbiomas.statistics.burned.frequency.area_frequency.subtitle'})\n : intl.formatMessage({id: 'mapbiomas.statistics.burned.frequency.area_per_age.subtitle'})\n }\n
\n \n \n
\n \n
\n }\n { emptyData &&\n \n
\n }\n { renderData() }\n \n
\n );\n };\n\n const handleShowData = () => {\n const frequencyByAreaChartData = _.get(chartsData, 'frequencyByArea') || [];\n const frequencyByAreaChart = {\n title: !ageMode ? intl.formatMessage({id: 'mapbiomas.statistics.burned.last_year.historical_by_year.title'}) : intl.formatMessage({id: 'mapbiomas.statistics.burned.frequency.area_per_age.title'}),\n columns: _.map(frequencyByAreaChartData, 'name'),\n rows: [\n {\n name: 'Total',\n data: _.map(frequencyByAreaChartData, 'value'),\n }\n ]\n };\n\n onShowData([\n frequencyByAreaChart,\n ]);\n };\n\n const renderData = () => {\n if (emptyData) {\n return null;\n }\n\n return (\n \n { intl.formatMessage({id: 'mapbiomas.statistics.burned.last_year.historical_by_year.title'}) }\n
\n\n \n
\n \n
\n }\n { emptyData &&\n \n
\n }\n { renderData() }\n \n
\n
\n );\n };\n\n const areaByNumberOfClasses = () => {\n const series = _.get(chartsData, 'totalAreaByClasses.series') || [];\n\n const parsedSeries = _.map(series, (serie) => {\n return {\n name: serie.name,\n value: serie.total,\n itemStyle: {\n color: serie.color\n },\n };\n });\n\n const hideXAxisLabel = _.size(_.get(_.sample(series), 'name')) > 5;\n\n return (\n \n
\n
\n );\n };\n\n const handleShowData = () => {\n const series = _.get(chartsData, 'totalAreaByClasses.series') || [];\n const parsedRows = _.map(series, (item) => {\n return {\n ...item,\n data: [_.get(item, 'total')]\n };\n });\n\n const numberOfClassesChart = {\n title: \n \n
\n \n
\n }\n { emptyData &&\n \n
\n }\n { renderData() }\n Nenhum resultado encontrado.
\n\n
\n
\n );\n };\n\n const percentageAreaByClasses = () => {\n const categories = _.get(chartsData, 'percentageChartData.categories') || [];\n const series = _.get(chartsData, 'percentageChartData.series') || [];\n const ChartComponent = (!isStacked || (isStacked && hasBaseValueSelected)) ? LineChart : BarChart;\n const localeKey = `mapbiomas.statistics.degradation.${ classTreeKey }.${ !hasBaseValueSelected ? 'default' : 'with_base_value' }.proportion_title`;\n\n return (\n \n
\n
\n );\n };\n\n const handleShowData = () => {\n onShowData([\n _.get(chartsData, 'percentageChartData'),\n ]);\n };\n\n const renderData = () => {\n // if (emptyData) {\n // return null;\n // }\n\n return (\n \n \n
*/}\n \n
\n }\n { emptyData &&\n \n
\n }\n { renderData() }\n `;\n let str = `${ params[0].axisValue }`;\n\n params.forEach((item) => {\n const value = _.isObject(item.data) ? item.data.value : item.data;\n\n if (value) {\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa\n });\n const paramValue = `${ colorSpan(item.color) } ${ item.seriesName }: ${ valueLabel }${ unit ? ` ${ unit }` : '' }`;\n\n str += paramValue;\n }\n });\n\n return str;\n}\n\nconst yAxisMillionLabelFormatter = (value) => {\n return numbro(value / 1000000).format({\n thousandSeparated: true,\n mantissa: 1\n });\n};\n\nconst yAxisLabelPercentageFormatter = (value) => {\n const parsedValue = numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n\n return `${ parsedValue }%`;\n};\n\nexport default function BarChart({\n height = 200,\n isPercentage,\n categories = [],\n series = [],\n vertical = true,\n hideXAxisLabel = false,\n hasAvgMarkLine = false,\n unit,\n mantissa = 0,\n}) {\n const formatMessage = useFormatMessage();\n const maxValue = _(series)\n .map(({ data }) => {\n const sampleItem = _.first(data);\n\n if (_.get(sampleItem, 'value')) {\n return _.map(data, 'value');\n } else {\n return data;\n }\n })\n .flatten()\n .max();\n const hasMillionValue = maxValue > 1000000;\n\n let yAxisName = unit || 'Hectares';\n\n if (hasMillionValue) {\n yAxisName = unit || formatMessage('mapbiomas.statistics.million_hectares');\n }\n\n let nameGap = 55;\n let gridLeft = '30px';\n let markLine = null;\n\n if (hasMillionValue) {\n nameGap = 35;\n gridLeft = '30px';\n } else if (isPercentage) {\n nameGap = 15;\n gridLeft = '15px';\n }\n\n let xAxis = {\n type: \"category\",\n axisPointer: {\n type: \"shadow\"\n },\n axisLabel: {\n show: !hideXAxisLabel,\n fontSize: 11,\n color: \"#767676\"\n },\n axisLine: {\n color: \"#DDD\"\n },\n data: categories\n };\n let yAxis = {\n name: !isPercentage ? yAxisName : null,\n nameLocation: 'middle',\n nameRotate: 90,\n nameGap,\n nameTextStyle: {\n fontSize: 11,\n color: \"#767676\"\n },\n max: isPercentage ? 100 : undefined,\n axisTick: {\n show: false\n },\n axisLine: {\n color: \"#DDD\"\n },\n splitLine: {\n lineStyle: {\n color: \"rgba(0, 0, 0, 0.05)\"\n }\n },\n axisLabel: {\n formatter: (value) => {\n if (isPercentage) {\n return yAxisLabelPercentageFormatter(value);\n } else if (hasMillionValue) {\n return yAxisMillionLabelFormatter(value);\n } else {\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n\n return valueLabel;\n }\n },\n fontSize: 11,\n color: \"#767676\"\n }\n };\n\n if (!vertical) {\n let tempValue = xAxis;\n xAxis = {\n ...yAxis,\n nameRotate: undefined,\n nameGap: 25,\n axisLabel: {\n show: false\n },\n axisTick: {\n show: false\n },\n };\n yAxis = tempValue;\n }\n\n if (hasAvgMarkLine) {\n markLine = {\n symbol: [null, null],\n lineStyle: {\n type: 'solid'\n },\n label: {\n fontSize: 11,\n color: '#767676',\n formatter: (params) => {\n const { value } = params;\n\n if (isPercentage) {\n return yAxisLabelPercentageFormatter(value);\n } else if (hasMillionValue) {\n return yAxisMillionLabelFormatter(value);\n } else {\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n\n return valueLabel;\n }\n }\n },\n data: [{ type: 'average', name: 'Média' }]\n };\n }\n\n return (\n
\n
\n );\n };\n\n const areaByClasses = () => {\n const data = _.get(chartsData, 'classData') || [];\n const colors = [\n '#35003c',\n '#55ff4a',\n '#403fd9',\n '#49d239',\n '#002eaa',\n '#e4c900',\n '#00a0ff',\n '#c76a00',\n '#fba8ff',\n '#ffba90',\n ];\n const categories = _.map(data, (item) => {\n const node = _.find(defaultClassTreeNodes, { pixelValue: item.classId });\n\n return _.chain(node)\n .get('i18nStrings')\n .find({ language: locale })\n .get('stringValue')\n .value();\n });\n const parsedSeriesAData = _.map(data, (item, index) => {\n const node = _.find(defaultClassTreeNodes, { pixelValue: item.classId });\n\n return {\n type: 'classValue',\n value: item.areaHa,\n itemStyle: {\n color: _.get(node, 'color') || colors[index],\n },\n };\n });\n const parsedSeriesA = {\n name: 'Área',\n stack: 'value',\n data: parsedSeriesAData,\n type: 'bar',\n };\n const parsedSeriesBData = _.map(data, (item) => {\n return {\n type: 'referenceValue',\n value: item.referenceAreaHa - item.areaHa,\n realValue: item.referenceAreaHa,\n itemStyle: {\n color: '#DEDEDE',\n decal: {\n color: 'rgba(0, 0, 0, 0.5)',\n dashArrayX: [1, 0],\n dashArrayY: [1, 10],\n symbolSize: 1,\n rotation: Math.PI / 6,\n },\n },\n };\n });\n const parsedSeriesB = {\n name: 'Área de referência',\n stack: 'value',\n data: parsedSeriesBData,\n type: 'bar',\n };\n const series = [parsedSeriesA, parsedSeriesB];\n\n return (\n Área de vegetação nativa afetada pelos vetores
\n{ formatNumber(_.get(data, 'areaHa') / 1000000, 2) } Mha
\n({ formatNumber(_.get(data, 'percentage'), 1) }% do total)
\n\n
\n
\n );\n };\n\n const handleShowData = () => {\n onShowData([\n _.get(chartsData, 'percentageChartData'),\n ]);\n };\n\n const renderData = () => {\n // if (emptyData) {\n // return null;\n // }\n\n return (\n \n \n
*/}\n \n
\n { (loading || loadingClassTreeData) &&\n \n
\n }\n { emptyData &&\n \n
\n }\n { !loading && _.get(chartsData, 'totalData') && renderData() }\n \n
\n );\n };\n\n const renderData = () => {\n return (\n Valores totais relativos à área urbana
\n\n
\n \n
\n Dentro
\n{ formatNumber(insideArea, 2) } ha
\n\n
\n Fora
\n{ formatNumber(outsideArea, 2) } ha
\n\n
*/}\n { loading &&\n \n
\n }\n { !loading && !data &&\n \n
\n }\n { !loading && _.isEmpty(customCrossingValues) &&\n \n
\n }\n { !loading && data && renderData() }\n É necessário selecionar classes para visualizar os dados.
\n\n
\n
\n );\n };\n\n const handleShowData = () => {\n const classViewChartData = _.get(chartsData, 'classViewChartData');\n const classViewChart = {\n title: formatMessage('mapbiomas.dashboard.coverage.coverage_main.charts.classes_pie.title_default'),\n columns: ['Total'],\n rows: _.map(classViewChartData, (item) => {\n return {\n name: _.get(item, 'name'),\n data: [_.get(item, 'value')],\n };\n }),\n mantissa: valueMantissa\n };\n\n onShowData([\n classViewChart,\n ]);\n };\n\n return (\n \n
\n }\n { renderClassViewChart() }\n {/* { renderHistoricalSeriesChart() } */}\n \n \n \n \n
\n \n \n \n \n
\n );\n}\n","import React from 'react';\nimport _ from 'lodash';\nimport classnames from 'classnames';\nimport { CSVLink } from 'react-csv';\n\nimport { FormattedMessage } from 'react-intl';\n\nimport CloudDownloadIcon from '@material-ui/icons/CloudDownload';\nimport CloseIcon from '@material-ui/icons/Close';\nimport Fade from '@material-ui/core/Fade';\nimport IconButton from '@material-ui/core/IconButton';\n\nimport StickyTable from '../DashboardDialog/components/StickyTable';\n\nimport styles from './StatisticsDataTableBox.module.scss';\n\nfunction DataTableBox({\n title,\n columns,\n rows,\n mantissa,\n}) {\n const renderDownloadTableLink = () => {\n if (_.isEmpty(columns) || _.isEmpty(rows)) {\n return null;\n }\n\n let headers = [\n { key: 'class', label: 'Classe' },\n ];\n\n _.each(columns, (column) => {\n headers.push({ key: _.toString(column), label: _.toString(column) });\n });\n\n const parsedData = _(rows)\n .map((serie) => {\n let rowData = { class: _.get(serie, 'name') };\n\n _.each(_.get(serie, 'data'), (value, index) => {\n rowData[_.toString([columns[index]])] = value;\n });\n\n return rowData;\n })\n .flatten()\n .value();\n\n return (\n \n
\n \n { activeModuleContent === 'sentinel:sentinel_coverage' &&\n
\n \n
\n
\n }\n\n { _.includes(activeModuleContent, 'mining') && \n
\n );\n}\n\nexport default function StatisticsDataTableBox({\n headerIsVisible,\n data,\n onClose = () => {}\n}) {\n return (\n \n
\n \n { title }\n
\n { renderDownloadTableLink() }\n\n \n \n
\n \n \n
\n \n
\n \n { _.map(data, (item, index) => {\n return (\n
\n \n {\n index === 26 && this.setState({\n ...this.state,\n disableScrolling: false,\n })\n action === \"reset\" && this.props.closeTutorial()\n }}\n run={this.props.coverageTutorial}\n showSkipButton={true}\n disableScrolling={this.state.disableScrolling}\n floaterProps={{\n disableAnimation: true\n }}\n locale={{\n close:
\n );\n }\n}\n\nexport default injectIntl(TutorialTour)\n","import { gql } from 'graphql.macro';\n\nexport const GET_BASE_DATA = gql`\n {\n app @client {\n activeYear\n activeMonth\n activeModule\n activeModuleContent\n updatingWarningContentKey\n baseParams {\n groupType\n degradationType\n degradationFragmentationIsolationValue\n degradationCrossingValues {\n degradation_fragmentation_edge_area\n degradation_fragmentation_fragment_size\n degradation_fragmentation_isolation_medium_size\n degradation_fragmentation_isolation_distance\n degradation_fragmentation_isolation_big_size\n degradation_fire_frequency\n degradation_fire_time\n degradation_secondary_vegetation_age\n parsedParams\n }\n customViewMode\n customCrossingValues\n territory\n territories {\n id\n label\n territoryTypeId\n territoryTypeLabel\n territoryBBox\n }\n classesViewMode\n activeClassTreeNodeIds\n activeBaseClassTreeNodeIds\n activeClassTreeOptionValue\n activeObjectTreeNodeIds\n activeSubmodule\n activeClassesLevelsListItems\n activeTransitionsClassesListItems\n activePastureQualityQualityClassesListItems\n yearRange\n buffer\n crossingEnabled\n crossingTerritoryType\n crossingTerritories {\n id\n label\n territoryTypeId\n territoryTypeLabel\n territoryBBox\n }\n }\n headerIsVisible\n mapFlyTo\n mapPointInfo {\n latlng\n parsedBBox\n }\n mapPosition\n mapboxMode\n isOnPointSearchMode\n showClassInfo\n showDashboardInfo\n timelineLimitsRange\n showBeforeAndAfterMosaic\n transitionClassTreeNodeId\n ruralPropertyCode\n carFeature\n geometry\n geometryMode\n }\n }\n`;\n\nexport const GET_TERRITORIES_CATEGORIES_LIST = gql`\n query TerritoriesCategoriesList {\n territoryCategoriesList {\n id\n key\n parentId\n i18nStrings {\n language\n stringValue\n }\n }\n }\n`;\n\nexport const GET_TERRITORIES_LIST = gql`\n query TerritoriesList($categoryId: Int!) {\n territoriesList(categoryId: $categoryId) {\n id\n i18nStrings {\n language\n stringValue\n }\n }\n }\n`;\n\nexport const GET_CLASS_TREE_DATA = gql`\n query GetClassTreeData(\n $classTreeKey: String!,\n ) {\n classTreeByKey(key: $classTreeKey) {\n id\n key\n \ti18nStrings {\n\t\t\t\tlanguage\n\t\t\t\tstringValue\n }\n\t\t\tmvClassTreeLevelsUi {\n id\n color\n classId\n childrenIds\n positionInTree\n level\n parentId\n defaultName\n classTreeId\n pixelValue\n\t\t\t\ti18nStrings {\n\t\t\t\t\tlanguage\n\t\t\t\t\tstringValue\n\t\t\t\t}\n }\n }\n }\n`;\n","import React, { useEffect, useState, Fragment } from 'react';\nimport { useApolloClient, useLazyQuery, useQuery } from '@apollo/react-hooks';\nimport _ from 'lodash';\nimport qs from 'qs';\n\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\n\nimport CARBox from './components/CARBox';\nimport ClassLegendDialog from './components/ClassLegendDialog';\nimport CoordinatesBox from './components/CoordinatesBox';\nimport DashboardDialog from './components/DashboardDialog';\nimport MapCanvas from './components/MapCanvas';\nimport MapboxCanvas from './components/MapboxCanvas';\nimport MapboxControl from './components/MapboxControl';\nimport MapControls from './components/MapControls';\nimport MapPointDialog from './components/MapPointDialog';\nimport YearTimeline from './components/YearTimeline';\nimport YearTimelineMultiple from './components/YearTimelineMultiple';\nimport ShareControl from './components/ShareControl';\nimport StatisticsBox from './components/StatisticsBox';\nimport InfrastructureStatisticsBox from './components/InfrastructureStatisticsBox';\nimport StatisticsDataTableBox from './components/StatisticsDataTableBox';\nimport TutorialTour from '../../../../components/tutorial/TutorialTour';\n\nimport {\n GET_BASE_DATA,\n GET_TERRITORIES_CATEGORIES_LIST,\n GET_TERRITORIES_LIST,\n GET_CLASS_TREE_DATA,\n} from './query';\n\nimport useFormatMessage from '../../../../hooks/useFormatMessage';\nimport usePrevious from '../../../../hooks/usePrevious';\n\nimport parseQueryParamsToState from '../../../../helpers/parseQueryParamsToState';\n\nimport toast from '../../../../utils/toast';\n\nimport styles from '../../LandingPage.module.scss';\n\nconst MODULES_WITH_INITIAL_YEAR_FIXED = [\n 'fire:fire_accumulated',\n 'deforestation:deforestation_accumulated',\n];\n\nexport default function Map({\n activeBaseMap,\n activeLayers,\n layersOpacity,\n location,\n}) {\n const client = useApolloClient();\n const formatMessage = useFormatMessage();\n const isMobile = useMediaQuery('(max-width: 768px)');\n const [coverageTutorial, setCoverageTutorial] = useState(true);\n const [statisticsData, setStatisticsData] = useState(null);\n const { data: baseData, loading: loadingBaseData } = useQuery(GET_BASE_DATA);\n const { data: territoriesCategoriesListData } = useQuery(\n GET_TERRITORIES_CATEGORIES_LIST\n );\n const { data: defaultClassTreeData } = useQuery(GET_CLASS_TREE_DATA, {\n variables: {\n classTreeKey: 'default',\n },\n });\n const defaultClassTreeLevelsList = _.get(\n defaultClassTreeData,\n 'classTreeByKey[0].mvClassTreeLevelsUi'\n );\n const [loadCountryTerritoryData, { data: countryTerritoryListData }] =\n useLazyQuery(GET_TERRITORIES_LIST);\n const prevLoadingBaseData = usePrevious(loadingBaseData);\n const activeModule = _.get(baseData, 'app.activeModule');\n const activeModuleContent = _.get(baseData, 'app.activeModuleContent');\n const prevActiveModuleContent = usePrevious(activeModuleContent);\n const activeClassTreeOptionValue = _.get(\n baseData,\n 'app.baseParams.activeClassTreeOptionValue'\n );\n const degradationType = _.get(baseData, 'app.baseParams.degradationType');\n const activeSubmodule = _.get(baseData, 'app.baseParams.activeSubmodule');\n const isOnDegradationCrossingMode = degradationType === 'crossing';\n const activeYear = _.get(baseData, 'app.activeYear');\n const activeMonth = _.get(baseData, 'app.activeMonth');\n const baseParams = _.get(baseData, 'app.baseParams');\n const territories = _.get(baseParams, 'territories');\n const mapboxMode = _.get(baseData, 'app.mapboxMode');\n const isOnPointSearchMode = _.get(baseData, 'app.isOnPointSearchMode');\n const transitionClassTreeNodeId = _.get(\n baseData,\n 'app.transitionClassTreeNodeId'\n );\n const territoryCategoriesList = _.get(\n territoriesCategoriesListData,\n 'territoryCategoriesList'\n );\n const activeSubmoduleHasNoTimeline = _.includes(['soil_texture'], activeSubmodule);\n\n const headerIsVisible = _.get(baseData, 'app.headerIsVisible');\n const isOnUpdatingWarningMode = _.isString(_.get(baseData, 'app.updatingWarningContentKey'));\n const mapFlyTo = _.get(baseData, 'app.mapFlyTo');\n const mapPointInfo = _.get(baseData, 'app.mapPointInfo');\n const showClassInfo = _.get(baseData, 'app.showClassInfo');\n const showDashboardInfo = _.get(baseData, 'app.showDashboardInfo');\n const showBeforeAndAfterMosaic = _.get(\n baseData,\n 'app.showBeforeAndAfterMosaic'\n );\n const timelineLimitsRange = _.get(baseData, 'app.timelineLimitsRange');\n const mapPosition = _.get(baseData, 'app.mapPosition');\n const ruralPropertyCode = _.get(baseData, 'app.ruralPropertyCode');\n const carFeature = JSON.parse(_.get(baseData, 'app.carFeature'));\n const geometry = JSON.parse(_.get(baseData, 'app.geometry'));\n const geometryMode = _.get(baseData, 'app.geometryMode');\n\n let blockModuleWarningIsVisible = false;\n\n // Add conditions to show block module warning dialog below\n // if (activeClassTreeOptionValue === 'fire_annual_by_class') {\n // blockModuleWarningIsVisible = true;\n // }\n\n const [lat, lng, zoom] = _.split(mapPosition, ',');\n let mapConfigOptions = {};\n\n if (mapPosition) {\n mapConfigOptions = {\n lat: Number(lat),\n lng: Number(lng),\n zoom: Number(zoom),\n };\n }\n\n let urlQueryParams = {};\n\n if (location && location.search) {\n const queryString = location.search.replace('?', '');\n const queryObject = qs.parse(queryString, { comma: true });\n\n if (queryObject) {\n urlQueryParams = parseQueryParamsToState(queryObject);\n }\n }\n\n const isOnInitialRenderingWithQueryParams =\n loadingBaseData ||\n (prevLoadingBaseData && !loadingBaseData && !_.isEmpty(urlQueryParams));\n\n useEffect(() => {\n const confirmation = new URL(window.location.href).searchParams.get(\n 'confirmation'\n );\n const login = new URL(window.location.href).searchParams.get('login');\n const passwordUpdate = new URL(window.location.href).searchParams.get(\n 'password_update'\n );\n\n if (confirmation) {\n toast(formatMessage('mapbiomas.toast.account_confirmed'));\n }\n\n if (login) {\n toast(formatMessage('mapbiomas.toast.login_success'));\n }\n\n if (passwordUpdate) {\n toast(formatMessage('mapbiomas.toast.password_update'));\n }\n }, []);\n\n useEffect(() => {\n if (activeModuleContent !== 'coverage:coverage_changes') {\n updateClientAppState({\n showBeforeAndAfterMosaic: false,\n });\n }\n\n const checkModuleKeyCondition = (moduleKey) => {\n if (_.isUndefined(prevActiveModuleContent)) {\n return activeModuleContent === moduleKey;\n } else {\n return (\n activeModuleContent === moduleKey &&\n !isOnInitialRenderingWithQueryParams\n );\n }\n };\n\n if (checkModuleKeyCondition('coverage:coverage_main')) {\n updateClientAppState({\n activeBaseMap: 9,\n layersOpacity: 70,\n activeLayers: [],\n });\n } else if (\n checkModuleKeyCondition('regeneration:regeneration_annual') ||\n checkModuleKeyCondition('deforestation:deforestation_annual')\n ) {\n updateClientAppState({\n activeBaseMap: 1,\n });\n } else if (checkModuleKeyCondition('agriculture:agriculture_agricultural_use')) {\n updateClientAppState({\n activeBaseMap: 1,\n activeLayers: ['state'],\n activeYear: [1985, 2023],\n timelineLimitsRange: [1985, 2023],\n });\n } else if (checkModuleKeyCondition('agriculture:agriculture_irrigation')) {\n updateClientAppState({\n activeYear: [1985, 2023],\n timelineLimitsRange: [1985, 2023],\n });\n } else if (checkModuleKeyCondition('agriculture:agriculture_irrigation_cultivation_frequency')) {\n updateClientAppState({\n activeYear: [2017, 2023],\n timelineLimitsRange: [2017, 2023],\n });\n } else if (checkModuleKeyCondition('agriculture:agriculture_irrigation_cultivation_frequency')) {\n updateClientAppState({\n activeYear: [2017, 2023],\n timelineLimitsRange: [2017, 2023],\n });\n } else if (checkModuleKeyCondition('infrastructure:infrastructure_main')) {\n updateClientAppState({\n activeBaseMap: 1,\n activeYear: 2023,\n timelineLimitsRange: [1985, 2023],\n });\n } else if (checkModuleKeyCondition('fire:fire_accumulated')) {\n updateClientAppState({\n activeBaseMap: 1,\n activeYear: [1985, 2023],\n timelineLimitsRange: [1985, 2023],\n });\n } else if (checkModuleKeyCondition('fire:fire_annual')) {\n updateClientAppState({\n activeBaseMap: 1,\n activeYear: [1985, 2023],\n timelineLimitsRange: [1985, 2023],\n });\n } else if (checkModuleKeyCondition('fire:fire_frequency')) {\n updateClientAppState({\n activeBaseMap: 1,\n activeYear: [1985, 2023],\n timelineLimitsRange: [1985, 2023],\n });\n } else if (checkModuleKeyCondition('fire:fire_monthly')) {\n updateClientAppState({\n activeBaseMap: 1,\n activeYear: 2023,\n timelineLimitsRange: [1985, 2023],\n });\n } else if (checkModuleKeyCondition('fire:fire_last')) {\n updateClientAppState({\n activeBaseMap: 1,\n activeYear: 2023,\n timelineLimitsRange: [1986, 2023],\n });\n } else if (checkModuleKeyCondition('fire:fire_size')) {\n updateClientAppState({\n activeBaseMap: 1,\n activeYear: 2023,\n timelineLimitsRange: [1985, 2023],\n });\n } else if (\n checkModuleKeyCondition(\n 'temporal_analysis:temporal_analysis_number_of_classes'\n )\n ) {\n updateClientAppState({\n activeBaseMap: 1,\n activeYear: [1985, 2023],\n timelineLimitsRange: [1985, 2023],\n });\n } else if (\n checkModuleKeyCondition('deforestation:deforestation_accumulated')\n ) {\n updateClientAppState({\n activeYear: [1986, 2023],\n timelineLimitsRange: [1986, 2023],\n });\n } else if (\n checkModuleKeyCondition('deforestation:deforestation_frequency')\n ) {\n updateClientAppState({\n activeYear: [1986, 2023],\n timelineLimitsRange: [1986, 2023],\n });\n } else if (\n checkModuleKeyCondition('pasture:pasture_productivity')\n ) {\n updateClientAppState({\n activeYear: [2000, 2022],\n timelineLimitsRange: [2000, 2022],\n });\n } else if (\n checkModuleKeyCondition('pasture:pasture_age')\n ) {\n updateClientAppState({\n activeYear: [1985, 2023],\n timelineLimitsRange: [1985, 2023],\n });\n } else if (\n checkModuleKeyCondition('pasture:pasture_vigor')\n ) {\n updateClientAppState({\n activeBaseMap: 1,\n layersOpacity: 100,\n activeLayers: ['state'],\n activeYear: [2000, 2023],\n timelineLimitsRange: [2000, 2023],\n });\n } else if (\n checkModuleKeyCondition('pasture:pasture_transitions')\n ) {\n updateClientAppState({\n activeYear: [1985, 2023],\n timelineLimitsRange: [1985, 2023],\n });\n }\n\n const parsedModuleContentKey = _.last(_.split(activeModuleContent, ':'));\n\n if (parsedModuleContentKey) {\n updateClientAppState({\n activeNoteKey: parsedModuleContentKey,\n });\n }\n\n setStatisticsData(null);\n }, [activeModuleContent]);\n\n useEffect(() => {\n if (isOnInitialRenderingWithQueryParams) {\n return;\n }\n\n if (showBeforeAndAfterMosaic) {\n updateClientAppState({\n activeBaseMap: 8,\n layersOpacity: 50,\n });\n } else {\n updateClientAppState({\n layersOpacity: 100,\n });\n }\n }, [showBeforeAndAfterMosaic]);\n\n useEffect(() => {\n if (activeModule !== 'coverage' && mapboxMode) {\n toggleMapbox();\n }\n }, [activeModule]);\n\n useEffect(() => {\n const minYear = _.first(timelineLimitsRange);\n const maxYear = _.last(timelineLimitsRange);\n\n if (\n !_.isArray(activeYear) &&\n (activeYear < minYear || activeYear > maxYear)\n ) {\n updateClientAppState({\n activeYear: maxYear,\n });\n }\n }, [timelineLimitsRange]);\n\n useEffect(() => {\n if (isMobile) {\n updateClientAppState({\n headerIsVisible: false,\n });\n }\n }, [isMobile]);\n\n useEffect(() => {\n if (territoryCategoriesList) {\n const countryTerritoryCategory = _.find(territoryCategoriesList, {\n key: 'country',\n });\n const countryTerritoryId = _.get(countryTerritoryCategory, 'id');\n loadCountryTerritoryData({\n variables: {\n categoryId: countryTerritoryId,\n },\n });\n }\n }, [territoryCategoriesList]);\n\n useEffect(() => {\n if (!_.isEmpty(territories) && !mapPosition) {\n const bbox = _.get(_.last(territories), 'territoryBBox');\n const parsedBBox = [\n [bbox[0][0], bbox[0][1]],\n [bbox[1][0], bbox[1][1]]\n ];\n\n updateClientAppState({ mapFlyTo: parsedBBox });\n }\n }, [territories, mapPosition]);\n\n const updateClientAppState = (params) => {\n client.writeData({\n data: {\n app: {\n __typename: 'AppState',\n ...params,\n },\n },\n });\n };\n\n const closeClassLegendDialog = () => {\n updateClientAppState({ showClassInfo: null });\n };\n\n const closeDashboardDialog = () => {\n updateClientAppState({\n showDashboardInfo: null,\n transitionClassTreeNodeId: null,\n });\n };\n\n const closeMapInfoDialog = () => {\n updateClientAppState({ mapPointInfo: null });\n };\n\n const handleMapPointSearchClick = (mapPointInfo) => {\n updateClientAppState({ mapPointInfo });\n };\n\n const handleYearTimelineChange = (year) => {\n updateClientAppState({ activeYear: year });\n };\n\n const handleFlyToPointSubmit = (coordinates) => {\n updateClientAppState({ mapFlyTo: coordinates });\n };\n\n const handleFlyToReset = () => {\n updateClientAppState({ mapFlyTo: null });\n };\n\n const handleControlsChange = (paramKey, paramValue) => {\n updateClientAppState({ [paramKey]: paramValue });\n };\n\n const handleMoveEnd = (value) => {\n if (value !== mapPosition) {\n updateClientAppState({ mapPosition: value });\n }\n };\n\n const handleGeometryChange = (value) => {\n if (value) {\n updateClientAppState({\n geometry: JSON.stringify(value),\n geometryMode: null,\n });\n }\n };\n\n const openCoverageTutorial = () => {\n setCoverageTutorial(true);\n };\n\n const closeTutorial = () => {\n setCoverageTutorial(false);\n };\n\n const handleStatisticsShowData = (data) => {\n setStatisticsData(data);\n };\n\n const handleStatisticsCloseData = () => {\n setStatisticsData(null);\n };\n\n const toggleMapbox = () => {\n if (!mapboxMode) {\n updateClientAppState({\n activeBaseMap: 9,\n layersOpacity: 70,\n activeLayers: [],\n mapboxMode: !mapboxMode,\n });\n } else {\n updateClientAppState({\n mapboxMode: !mapboxMode,\n });\n }\n };\n\n const togglePointSearchMode = () => {\n updateClientAppState({\n isOnPointSearchMode: !isOnPointSearchMode,\n });\n };\n\n const TimelineComponent =\n 'temporal_analysis' === activeModule ||\n [\n 'deforestation:deforestation_accumulated',\n 'deforestation:deforestation_frequency',\n ].includes(activeModuleContent)\n ? YearTimelineMultiple\n : YearTimeline;\n\n return (\n \n
\n );\n}\n","import React, { useEffect, useState } from 'react';\nimport _ from 'lodash';\nimport { FormattedMessage } from 'react-intl';\n\nimport Button from '@material-ui/core/Button';\nimport FormControl from '@material-ui/core/FormControl';\nimport Paper from '@material-ui/core/Paper';\nimport TextField from '@material-ui/core/TextField';\n\nimport toast from '../../utils/toast';\nimport { request } from '../../utils/api';\n\nimport parseToken from '../../helpers/parseToken';\nimport useFormatMessage from '../../hooks/useFormatMessage';\n\nimport logo from './logo.svg';\n\nimport styles from './MapBiomasPasswordRecovery.module.scss';\nimport { Typography } from '@material-ui/core';\nimport { Link } from 'react-router-dom';\nimport FormFooter from '../MapBiomasLogin/components/FormFooter';\nimport PageFooter from '../MapBiomasLogin/components/PageFooter';\n\nconst initialState = {\n email: '',\n};\n\nexport default function MapBiomasPasswordRecovery() {\n const formatMessage = useFormatMessage();\n const [state, setState] = useState(initialState);\n const [showInfo, setShowInfo] = useState(false);\n const [windowHeight, setWindowHeight] = useState(window.innerHeight);\n\n const callbackUrl = new URL(window.location.href).searchParams.get('callback_url');\n const urlParams = location.search.substring(1);\n let paramsToJSON = {}\n\n function updateHeight() {\n setWindowHeight(window.innerHeight);\n }\n const debouncedUpdateHeight = _.debounce(updateHeight, 500);\n\n useEffect(() => {\n window.addEventListener('resize', debouncedUpdateHeight);\n\n return () => {\n window.removeEventListener('resize', debouncedUpdateHeight)\n };\n }, []);\n\n const handleStateChange = (paramKey, paramValue) => {\n setState({\n ...state,\n [paramKey]: paramValue\n });\n };\n\n const handleTextChange = (paramKey, event) => {\n handleStateChange(paramKey, event.target.value);\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n const API_URL = process.env.REACT_APP_MAPBIOMAS_LOGIN_API_BASE_URL;\n if(!!urlParams){\n paramsToJSON = JSON.parse('{\"' + decodeURI(location.search.substring(1)).replace(/request_params\\[(.+?)(\\])/g, \"$1\").replace(/\"/g, '\\\\\"').replace(/&/g, '\",\"').replace(/=/g,'\":\"') + '\"}')\n }\n\n const {\n email,\n } = state;\n\n const payload = {\n email,\n request_params: { ...paramsToJSON }\n };\n\n fetch(`${API_URL}/v1/users/send_recovery_instructions`, {\n method: 'POST',\n headers: {'Content-Type': 'application/json'},\n body: JSON.stringify(payload)\n })\n .then((response) => response.json())\n .then((data) => {\n if (data.success) {\n handleStateChange(\"email\", \"\");\n toast(formatMessage('mapbiomas.toast.email_sent'), 'success');\n }else {\n toast(data.errors[0], 'error');\n }\n })\n .catch(() => {\n toast(formatMessage('mapbiomas.toast.error'), 'error');\n });\n };\n\n const renderInfo = () => {\n return (\n \n \n \n \n \n \n
\n \n
\n
\n \n
\n );\n}\n","import React, { useEffect, useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport _ from 'lodash';\nimport { useIntl,FormattedMessage } from 'react-intl';\n\nimport Button from '@material-ui/core/Button';\nimport { FormControl, FormGroup, FormControlLabel, Checkbox } from '@material-ui/core';\nimport Paper from '@material-ui/core/Paper';\nimport TextField from '@material-ui/core/TextField';\n\nimport toast from '../../utils/toast';\nimport { request } from '../../utils/api';\n\nimport parseToken from '../../helpers/parseToken';\nimport useFormatMessage from '../../hooks/useFormatMessage';\n\nimport logo from './../MapBiomasLogin/logo.svg';\n\nimport styles from './MapbiomasCreateAccount.module.scss';\nimport { Typography } from '@material-ui/core';\nimport FormFooter from '../MapBiomasLogin/components/FormFooter';\nimport PageFooter from '../MapBiomasLogin/components/PageFooter';\n\nconst initialState = {\n name: '',\n login: '',\n password: '',\n organization: '',\n motivation: '',\n privacyCheck: true,\n};\n\nexport default function MapbiomasCreateAccount() {\n const formatMessage = useFormatMessage();\n const [state, setState] = useState(initialState);\n const [windowHeight, setWindowHeight] = useState(window.innerHeight);\n\n const urlParams = location.search.substring(1);\n let paramsToJSON = {}\n\n const intl = useIntl()\n\n const handleStateChange = (paramKey, paramValue) => {\n setState({\n ...state,\n [paramKey]: paramValue\n });\n };\n\n const handleTextChange = (paramKey, event) => {\n handleStateChange(paramKey, event.target.value);\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n const API_URL = process.env.REACT_APP_MAPBIOMAS_LOGIN_API_BASE_URL;\n const { login, organization, name, motivation } = state;\n\n if(!!urlParams){\n paramsToJSON = JSON.parse('{\"' + decodeURI(location.search.substring(1)).replace(/request_params\\[(.+?)(\\])/g, \"$1\").replace(/\"/g, '\\\\\"').replace(/&/g, '\",\"').replace(/=/g,'\":\"') + '\"}')\n }\n\n const payload = {\n user:{\n email: login,\n organization,\n name,\n motivation,\n },\n request_params: {\n ...paramsToJSON\n }\n };\n\n fetch(`${API_URL}/v1/users`, {\n method: 'POST',\n headers: {'Content-Type': 'application/json'},\n body: JSON.stringify(payload)\n })\n .then((response) => response.json())\n //Then with the data from the response in JSON...\n .then((data) => {\n if(data.user){\n setState({\n name: '',\n login: '',\n password: '',\n organization: '',\n motivation: '',\n privacyCheck: true,\n })\n toast(formatMessage('mapbiomas.toast.confirm_account'), 'success');\n }else {\n toast(data.email, 'error');\n }\n\n })\n .catch((error) => {\n toast(formatMessage('mapbiomas.toast.error'), 'error');\n });\n };\n\n const handlePrivacyCheckChange = () => {\n setState({\n ...state,\n privacyCheck: !state.privacyCheck\n });\n }\n\n return (\n \n \n \n \n \n \n
\n \n
\n
\n \n
\n );\n}\n","import React from 'react';\n\nconst LoginToForum = () => {\n fetch(`https://production.plataforma.mapbiomas.org/l/api/forum_login/${document.location.search}`, {\n headers: {\n 'Authorization': `Bearer ${localStorage.getItem('token')}`\n }\n }).then((res)=>res.json()).then((res)=>{\n window.location.assign(res['value']);\n })\n\n return (\n \n \n \n \n \n \n
\n \n
\n
\n Loading...
\n );\n}\n\nexport default LoginToForum;\n","import _ from 'lodash';\nimport qs from 'qs';\nimport { useEffect, useState } from 'react';\nimport { useQuery } from '@apollo/react-hooks';\n\nimport { GET_CLASS_TREE_DATA } from '../graphql/queries/general';\n\nconst API_URL =\n process.env.REACT_APP_GEE_API_URL ||\n 'https://staging.api.mapbiomas.org/api/v1/brazil';\n\nconst mapClassTreeKeyToPath = {\n 'agriculture_agricultural_use_main': 'agriculture_agricultural_use',\n 'regeneration_annual_by_class': 'regeneration_annual'\n};\n\nexport default function useGenericDashboardStatistics(params, levelToShow = 1) {\n const {\n classTreeKey,\n fromYear = 1985,\n toYear,\n territoryId,\n statisticsPath,\n filteredPixelValues,\n ...additionalParams\n } = params;\n\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const { data: classTreeData } = useQuery(GET_CLASS_TREE_DATA, {\n variables: {\n classTreeKey,\n },\n });\n\n let classTreeNodes = _.get(classTreeData, 'classTreeByKey[0].mvClassTreeLevelsUi');\n if (levelToShow !== null) {\n classTreeNodes = _.filter(classTreeNodes, { level: levelToShow });\n }\n\n const pixelValues = _.filter(\n _.map(classTreeNodes, 'pixelValue'),\n _.isNumber\n );\n\n let parsedParams = {\n initiative: 'brazil',\n fromYear,\n toYear,\n pixelValues: filteredPixelValues || pixelValues,\n territoryIds: [territoryId],\n ...(additionalParams || {})\n };\n\n let urlPath = '/statistics/' + (mapClassTreeKeyToPath[classTreeKey] || statisticsPath || classTreeKey);\n\n const statisticsUrl = `${ API_URL }${ urlPath }?${ qs.stringify(\n parsedParams,\n { arrayFormat: 'repeat' }\n ) }`;\n\n useEffect(() => {\n if (_.includes(statisticsUrl, 'pixelValues')) {\n setLoading(true);\n fetch(statisticsUrl, {\n method: 'GET',\n headers: { 'Content-Type': 'application/json' },\n })\n .then((response) => response.json())\n .then((data) => {\n setData(data);\n setLoading(false);\n });\n }\n }, [statisticsUrl]);\n\n return {\n loading,\n data,\n pixelValues: parsedParams.pixelValues\n };\n}\n","import { gql } from 'graphql.macro';\n\nexport const GET_CLASS_TREE_DATA = gql`\n query GetClassTreeData(\n $classTreeKey: String!,\n ) {\n classTreeByKey(key: $classTreeKey) {\n id\n key\n \ti18nStrings {\n\t\t\t\tlanguage\n\t\t\t\tstringValue\n }\n\t\t\tmvClassTreeLevelsUi {\n id\n color\n classId\n childrenIds\n positionInTree\n level\n parentId\n defaultName\n classTreeId\n pixelValue\n\t\t\t\ti18nStrings {\n\t\t\t\t\tlanguage\n\t\t\t\t\tstringValue\n\t\t\t\t}\n }\n }\n }\n`;\n\nexport const GET_BASE_DATA = gql`\n query GetBaseData($territoryIds: [Int!]!, $classTreeId: Int!) {\n coverageClassificationDataList: coverageClassificationDataByTreeList(\n classTreeId: $classTreeId,\n\t\t\tbufferId: null,\n\t\t\tterritoryIds: $territoryIds\n ) {\n territoryId\n year\n classTreeNodeId\n areaInHa\n }\n }\n`;\n","import React, { Fragment } from 'react';\nimport _ from 'lodash';\nimport numbro from 'numbro';\nimport { useQuery } from '@apollo/react-hooks';\n\nimport LinearProgress from '@material-ui/core/LinearProgress';\n\nimport useGenericDashboardStatistics from '../../../../hooks/useGenericDashboardStatistics';\n\nimport styles from './TerritoryClassInfo.module.scss';\n\nimport {\n GET_CLASS_TREE_DATA,\n} from './query';\n\nconst formatNumber = (value, mantissa = 0) => {\n if (value === null || value === undefined) {\n return '-';\n } else if (value === 0) {\n return 0;\n } else {\n return numbro(value).format({\n thousandSeparated: true,\n mantissa\n });\n }\n};\n\nfunction getActiveYearIndex(years, activeYear) {\n if (years.length === 1) return 0;\n return _.findIndex(years, (year) => year === activeYear);\n}\n\nfunction getTotalArea(data, activeYearIndex) {\n const parentClasses = data.filter((d) => d.parentId === null);\n return _.sumBy(parentClasses, (d) => d.data[activeYearIndex]);\n}\n\nfunction getAreaByClasses(areasByPixelValue, pixelValues, formatted = true) {\n const area = _.sumBy(pixelValues, (pixelValue) => areasByPixelValue[pixelValue] || 0);\n return formatted ? formatNumber(area) : area;\n}\n\nfunction getClassesPercentage(areasByPixelValue, pixelValues, totalArea) {\n if (!totalArea) return '0%';\n const totalAreaByPixelValue = getAreaByClasses(areasByPixelValue, pixelValues, false);\n return `${formatNumber((totalAreaByPixelValue / totalArea) * 100, 1)}%`;\n}\n\n// function concatText(textArray) {\n// return textArray.reduce((acc, item, index) => {\n// if (index === 0) {\n// return item;\n// } else if (index === textArray.length - 1) {\n// return `${acc} e ${item}`;\n// }\n// return `${acc}, ${item}`; \n// }, '');\n// }\n\nfunction getAreasByPixelValue(data, activeYearIndex) {\n const areasByPixelValue = {};\n data.forEach((d) => {\n areasByPixelValue[d.pixelValue] = d.data[activeYearIndex];\n });\n return areasByPixelValue;\n}\n\nfunction parseModuleText(classTreeKey, data, years, activeYear) {\n const activeYearIndex = getActiveYearIndex(years, activeYear);\n const totalArea = getTotalArea(data, activeYearIndex);\n const areasByPixelValue = getAreasByPixelValue(data, activeYearIndex);\n const firstYear = _.first(years);\n const lastYear = _.last(years);\n const average = formatNumber(_.reduce(years, (acc, year, index) => acc + getTotalArea(data, index), 0) / years.length);\n\n switch(classTreeKey) {\n case 'default': {\n return (\n {\n `Em ${activeYear} o município possui ${getClassesPercentage(areasByPixelValue, [1, 10], totalArea)} de vegetação natural, sendo ${getClassesPercentage(areasByPixelValue, [1], totalArea)} de Formações Florestais e ${getClassesPercentage(areasByPixelValue, [10], totalArea)} de Áreas Naturais não Florestais. \n O uso agropecuário representa ${getClassesPercentage(areasByPixelValue, [14], totalArea)} da área do município, sendo ${getClassesPercentage(areasByPixelValue, [15], totalArea)} de pastagem, ${getClassesPercentage(areasByPixelValue, [18], totalArea)} de agricultura, ${getClassesPercentage(areasByPixelValue, [9], totalArea)} de silvicultura e ${getClassesPercentage(areasByPixelValue, [21], totalArea)} de mosaico de usos.`\n }
\n );\n }\n case 'natural_or_anthropic': {\n return (\n{\n `De ${firstYear} a ${lastYear} as formações naturais representavam de ${getClassesPercentage(getAreasByPixelValue(data, 0), [97], totalArea)} para ${getClassesPercentage(getAreasByPixelValue(data, years.length - 1), [97], totalArea)} do município.` \n }
\n );\n }\n case 'deforestation_annual_by_class': {\n return (\n{\n `O município possui supressão de vegetação nativa média de ${average} ha nos últimos ${years.length} anos (de ${firstYear} a ${lastYear}).`\n }
\n );\n }\n case 'deforestation_accumulated_by_class': {\n if (!years || !years[0]) return;\n const yearRange = years[0].split('_');\n return (\n{\n `De ${yearRange[0]} até ${yearRange[1]} existe um total de ${getAreaByClasses(areasByPixelValue, [400])} ha de supressão vegetação primária e ${getAreaByClasses(areasByPixelValue, [600])} ha de supressão vegetação secundária.`\n }
\n );\n }\n case 'regeneration_annual_by_class': {\n return (\n <>\n{\n `A área de vegetação secundária acumulada de ${firstYear} a ${lastYear} é de ${getAreaByClasses(areasByPixelValue, [500, 300])} ha.`\n }
\n {/*{\n `Desse total, XX% (xx.xxx ha) tem mais de 6 anos e XX% (xx.xxx ha) tem mais de 10 anos.`\n }
*/}\n \n );\n }\n case 'pasture_age_main': {\n return (\n{\n `O município apresenta ${formatNumber(totalArea)} ha de pastagem em ${lastYear}. Sendo que ${getClassesPercentage(areasByPixelValue, [1], totalArea)} (${getAreaByClasses(areasByPixelValue, [1])} ha) possuem baixo vigor.`\n }
\n );\n }\n case 'mining_main': {\n return (\n{\n `O município apresenta ${formatNumber(totalArea)} ha de área de mineração em ${lastYear}. Sendo que ${getClassesPercentage(areasByPixelValue, [200], totalArea)} (${getAreaByClasses(areasByPixelValue, [200])} ha) de garimpo e ${getClassesPercentage(areasByPixelValue, [100], totalArea)} (${getAreaByClasses(areasByPixelValue, [100])} ha) de mineração industrial.`\n }
\n );\n }\n case 'agriculture_irrigation_main': {\n return (\n{\n `O território possui ${getAreaByClasses(areasByPixelValue, [100])} ha de Pivô central de irrigação, ${getAreaByClasses(areasByPixelValue, [200])} ha com Outros sistemas de irrigação e ${getAreaByClasses(areasByPixelValue, [300])} ha de irrigação por Inundação em ${lastYear}.`\n }
\n );\n }\n default: {\n return null;\n }\n }\n}\n\nexport default function TerritoryClassInfo({\n activeYear,\n classTreeKey,\n territoryId,\n statisticsPath,\n additionalParams = {},\n}) {\n const statisticsData = useGenericDashboardStatistics({\n classTreeKey,\n toYear: activeYear,\n territoryId,\n statisticsPath,\n ...additionalParams,\n }, null);\n const { loading, data, pixelValues } = statisticsData;\n\n const locale = localStorage.getItem('locale') || 'pt-BR';\n\n const { data: classTreeData } = useQuery(GET_CLASS_TREE_DATA, {\n variables: {\n classTreeKey\n },\n });\n\n const years = _.orderBy(_.map(data, 'year'));\n const classesLevelsList = _.get(classTreeData, 'classTreeByKey[0].mvClassTreeLevelsUi');\n\n const parsedData = _.map(pixelValues, (pixelValue) => {\n const nodeData = _.find(classesLevelsList, { pixelValue });\n const stringList = _.get(nodeData, 'i18nStrings');\n const selectedString = _.find(stringList, { language: locale });\n const className = `${ _.join(_.get(nodeData, 'positionInTree'), '.') }. ${ _.get(selectedString, 'stringValue') }`;\n\n return {\n ...(nodeData || {}),\n name: className,\n data: _.map(years, (year) => {\n const yearData = _.find(data, { year });\n const pixelArea = _.find(_.get(yearData, 'areas'), { pixelId: pixelValue });\n return _.get(pixelArea, 'value', 0);\n })\n };\n });\n\n const renderInfo = () => {\n if (!parsedData || _.isEmpty(years)) {\n return null;\n }\n\n return parseModuleText(classTreeKey, parsedData, years, activeYear);\n };\n\n return (\n\n
\n }\n { !loading && renderInfo() }\n \n
\n
\n );\n };\n\n return (\n \n
\n }\n { !loading && renderClassViewChart() }\n \n
\n
\n );\n };\n\n return (\n \n
\n }\n { !loading && renderHistoricalSeriesChart() }\n \n
\n }\n { !loading && areaByPeriod() }\n \n
\n );\n };\n\n return (\n \n \n
\n \n { percentageLabel }\n { additionalText }\n
\n \n
\n }\n { !loading && renderInfo() }\n `;\n let str = `${ params[0].axisValue }`;\n\n params.forEach((item) => {\n const value = _.isObject(item.data) ? item.data.value : item.data;\n\n if (value) {\n const percentageLabel = numbro(item.data.percentage).format({\n thousandSeparated: true,\n mantissa: 1,\n });\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa: 0,\n });\n const paramValue = `${ colorSpan(item.color) } ${ item.seriesName }: ${ percentageLabel }% (${ valueLabel } ha)`;\n\n str += paramValue;\n }\n });\n\n return str;\n}\n\nconst formatNumber = (value, mantissa = 0) => {\n if (value === null || value === undefined) {\n return '-';\n } else if (value === 0) {\n return 0;\n } else {\n return numbro(value).format({\n thousandSeparated: true,\n mantissa\n });\n }\n};\n\nexport default function TerritoryBarComparison({\n activeYear,\n classTreeKey,\n territoryId,\n statisticsPath,\n additionalParams = {},\n filteredPixelValues,\n}) {\n const statisticsData = useGenericDashboardStatistics({\n classTreeKey,\n toYear: activeYear,\n territoryId,\n statisticsPath,\n filteredPixelValues,\n ...additionalParams,\n });\n const { loading, data, pixelValues } = statisticsData;\n\n const locale = localStorage.getItem('locale') || 'pt-BR';\n\n const { data: classTreeData, loading: loadingClassTreeData } = useQuery(GET_CLASS_TREE_DATA, {\n variables: {\n classTreeKey\n },\n });\n\n const isLoading = loading || loadingClassTreeData;\n\n const years = _.orderBy(_.map(data, 'year'));\n const firstYear = _.first(years);\n const lastYear = _.last(years);\n const comparisonYears = [lastYear, firstYear];\n const classesLevelsList = _.get(classTreeData, 'classTreeByKey[0].mvClassTreeLevelsUi');\n\n let parsedData = _.map(filteredPixelValues || pixelValues, (pixelValue) => {\n const nodeData = _.find(classesLevelsList, { pixelValue });\n const stringList = _.get(nodeData, 'i18nStrings');\n const selectedString = _.find(stringList, { language: locale });\n const className = _.get(selectedString, 'stringValue');\n const yearData = _.map(comparisonYears, (year) => {\n const yearData = _.find(data, { year });\n const pixelArea = _.find(_.get(yearData, 'areas'), { pixelId: pixelValue });\n const value = _.get(pixelArea, 'value', 0);\n const areaTotal = _.get(yearData, 'areaTotal');\n\n return {\n value,\n percentage: (value / areaTotal) * 100\n };\n });\n const hasSmallValue = _.min(_.map(yearData, 'percentage')) < 10;\n \n return {\n ...(nodeData || {}),\n name: className,\n data: yearData,\n type: 'bar',\n stack: 'year',\n emphasis: {\n focus: 'series'\n },\n label: {\n show: true,\n formatter: (params) => {\n return `${ formatNumber(params.data.percentage, 1) }% {name|${ formatNumber(params.data.value) } ha}`;\n },\n fontSize: 16,\n fontWeight: 'bold',\n rich: {\n name: {}\n },\n position: hasSmallValue ? 'insideLeft' : 'inside'\n },\n };\n });\n\n const renderInfo = () => {\n if (!parsedData) {\n return null;\n }\n\n return (\n
\n
\n }\n { !isLoading && renderInfo() }\n \n \n \n
\n );\n}\n\nfunction SquareBlock({\n text,\n color,\n}) {\n return (\n \n
\n { title }
\n { subtitle &&\n{ subtitle }
\n }\n\n { text }\n \n
\n );\n}\n\nfunction ClassInfoBox({\n children,\n color,\n}) {\n return (\n \n \n \n { children }\n
\n );\n}\n\nconst MODULES = [\n { key: 'coverage', label: 'Cobertura' },\n // { key: 'coverage_quality', label: '' },\n // { key: 'temporal_analysis', label: '' },\n { key: 'deforestation', label: 'Desmatamento' },\n { key: 'regeneration', label: 'Regeneração' },\n { key: 'pasture', label: 'Pastagem' },\n { key: 'mining', label: 'Mineração' },\n // { key: 'infrastructure', label: '' },\n { key: 'agriculture', label: 'Agricultura' },\n // { key: 'fire', label: 'Fogo' },\n // { key: 'scenarios', label: '' },\n // { key: 'water', label: 'Água' },\n];\n\nconst DEFAULT_FIRST_YEAR = 1985;\nconst DEFAULT_YEAR = 2023;\n\nfunction formatTerritory(territory) {\n return {\n id: territory.id,\n label: territory.label,\n boundingBox: territory.territoryBBox\n };\n}\n\nfunction formatTerritoryFromURL(territory) {\n const locale = localStorage.getItem('locale') || 'pt-BR';\n const stringList = _.get(territory, 'i18nStrings');\n const selectedString = _.find(stringList, { language: locale });\n const boundingBox = _.get(territory, 'territoryGeometry.boundingBox');\n\n return {\n id: territory.id,\n label: _.get(selectedString, 'stringValue'),\n boundingBox: [\n [_.get(boundingBox, 'yMin'), _.get(boundingBox, 'xMin')],\n [_.get(boundingBox, 'yMax'), _.get(boundingBox, 'xMax')],\n ]\n };\n}\n\nexport default function TerritoryDashboard(props) {\n const territoryIdFromURL = _.get(props, 'match.params.id');\n\n const { data: baseData } = useQuery(GET_BASE_DATA);\n const clientTerritory = _.get(baseData, 'app.baseParams.territories[0]');\n\n const [territory, setTerritory] = useState(clientTerritory ? formatTerritory(clientTerritory) : null);\n\n const { data: territoryData, loading: loadingTerritoryData } = useQuery(GET_TERRITORY, {\n variables: {\n ids: [Number(territoryIdFromURL)]\n },\n skip: clientTerritory\n });\n const territoryFromURL = _.get(territoryData, 'territoriesByIds[0]');\n\n useEffect(() => {\n if (clientTerritory) {\n setTerritory(formatTerritory(clientTerritory));\n }\n }, [clientTerritory]);\n\n useEffect(() => {\n if (!clientTerritory && territoryFromURL) {\n setTerritory(formatTerritoryFromURL(territoryFromURL));\n }\n }, [clientTerritory, territoryFromURL]);\n\n const bbox = _.get(territory, 'boundingBox');\n const territoryId = _.get(territory, 'id');\n const parsedBBox = [\n [_.get(bbox, '[0][0]'), _.get(bbox, '[0][1]')],\n [_.get(bbox, '[1][0]'), _.get(bbox, '[1][1]')],\n ];\n\n const handleTerritoryChange = (data) => {\n setTerritory(data);\n\n if (data) {\n props.history.push('/territorio/' + data.id);\n }\n };\n\n const renderSectionTitle = (title, subtitle, color) => {\n return (\n \n
\n );\n }\n\n return (\n Carregando...
\n\n
\n );\n}\n","import { gql } from 'graphql.macro';\n\nexport const GET_ACCURACIES = gql`\n query GetAccuracies(\n $level: String!\n $biome: String!\n $year: Int!\n $collection: AccuracyCollectionEnum!\n ) {\n accuracies(\n level: $level\n biome: $biome\n year: $year\n collection: $collection\n ) {\n quantityTot\n confusionUserRight {\n classId\n value\n }\n confusionUserLeft {\n classId\n idClassMap\n value\n }\n confusionProdRight {\n classId\n value\n }\n confusionProdLeft {\n classId\n idClassMap\n value\n }\n allocationTot\n globalAccuracy\n overallAccuracy {\n value\n year\n }\n producerAccuracy {\n classId\n statistics {\n value\n year\n }\n }\n userAccuracy {\n classId\n statistics {\n value\n year\n }\n }\n }\n }\n`;\n\nexport const GET_FILTERS_DATA = gql`\n query AccuracyFiltersData(\n $collection: AccuracyCollectionEnum!\n ) {\n accuracyBiomes(\n collection: $collection\n )\n accuracyLevels(\n collection: $collection\n )\n accuracyYears(\n collection: $collection\n )\n }\n`;\n\nexport const GET_CLASS_TREE_DATA = gql`\n query GetClassTreeData($classTreeKey: String!) {\n classTreeByKey(key: $classTreeKey) {\n mvClassTreeLevelsUi {\n pixelValue\n classId\n defaultName\n color\n }\n }\n }\n`;\n","import React from 'react';\nimport ReactEcharts from 'echarts-for-react';\nimport _ from 'lodash';\nimport numbro from 'numbro';\n\nfunction tooltipFormatter(params) {\n const colorSpan = (color) => `\n \n \n \n \n \n \n \n
\n \n \n \n { renderSectionTitle('Cobertura e Uso da Terra', undefined, '#16a085') }\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n { renderSectionTitle('Cobertura e Uso da Terra', 'Natural e Antrópico', '#16a085') }\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n { renderSectionTitle('Desmatamento', undefined, '#e74c3c') }\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n { renderSectionTitle('Vegetação Secundária', undefined, '#27ae60') }\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n { renderSectionTitle('Pastagem', undefined, '#e6680f') }\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n { renderSectionTitle('Mineração', undefined, '#f39c12') }\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n { renderSectionTitle('Agricultura', undefined, '#b731ce') }\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n Conheça os dados do
\n
\n Conheça os dados do
município de
{ _.get(territory, 'label') }
\n Nesse relatório você terá dados sobre cobertura, desmatamento, regeneração, pastagem, irrigação, mineração, água e fogo
\n\n \n { _.map(MODULES, (module) => {\n return (\n \n \n \n \n \n );\n }) }\n \n
\n \n
\n \n
\n \n
\n Áreas naturais e antrópicas em { DEFAULT_FIRST_YEAR } e { DEFAULT_YEAR }
\n\n
\n \n
\n \n
\n \n
\n \n
\n `;\n let str = `${ params[0].axisValue }`;\n\n params.forEach((item) => {\n const value = _.isObject(item.data) ? item.data.value : item.data;\n\n if (value) {\n const valueLabel = numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n const paramValue = `${ colorSpan(item.color) } ${ item.seriesName }: ${ valueLabel }`;\n\n str += paramValue;\n }\n });\n\n return str;\n}\n\nexport default function LineChart({\n categories = [],\n series = [],\n}) {\n return (\n
\n {\n loadingAccuracies && (\n
\n );\n}","import React from 'react';\n\nimport {\n BrowserRouter as Router,\n Route,\n Switch,\n} from 'react-router-dom';\n\nimport {\n Query\n} from 'react-apollo';\n\nimport {\n get,\n keys,\n map,\n concat,\n defaults,\n} from 'lodash';\n\nimport {\n GET_USER,\n GET_USER_ID,\n} from './queries';\n\nimport redirect from './redirect';\nimport AppContext from '../context/app-context';\n\nimport ConfirmationPage from '../../pages/ConfirmationPage';\nimport MapBiomasLandingPage from '../../pages/MapBiomasLandingPage';\nimport MapBiomasCreatePassword from '../../pages/MapBiomasCreatePassword';\nimport MapBiomasLogin from '../../pages/MapBiomasLogin';\nimport MapBiomasPasswordRecovery from '../../pages/MapBiomasPasswordRecovery';\nimport MapBiomasCreateAccount from '../../pages/MapbiomasCreateAccount';\nimport LoginToForum from '../../pages/LoginToForum';\nimport TerritoryDashboard from '../../pages/TerritoryDashboard';\nimport FireHotsitePage from '../../pages/FireHotsitePage';\n\nimport mapModuleToPathname from '../../data/mapModuleToPathname';\nimport Accuracy from '../../pages/Accuracy';\n\nconst modulesRoutes = map(keys(mapModuleToPathname), (pathname) => {\n return { path: pathname, component: MapBiomasLandingPage };\n});\n\nconst routes = {\n all: [\n { path: '/', component: MapBiomasLandingPage },\n { path: '/agua', component: MapBiomasLandingPage },\n { path: '/monitor-do-fogo', component: MapBiomasLandingPage },\n { path: '/hotsite-fogo', component: FireHotsitePage },\n { path: '/pistas-de-pouso', component: MapBiomasLandingPage },\n { path: '/dinamica-dos-pivos', component: MapBiomasLandingPage },\n { path: '/recifes-de-coral', component: MapBiomasLandingPage },\n\n // Modules pathname routes\n ...modulesRoutes,\n\n { path: '/recuperar-senha', component: MapBiomasCreatePassword },\n { path: '/login', component: MapBiomasLogin },\n { path: '/esqueci-minha-senha', component: MapBiomasPasswordRecovery },\n { path: '/criar-minha-conta', component: MapBiomasCreateAccount },\n { path: '/confirmar-conta', component: ConfirmationPage },\n { path: '/territorio/:id', component: TerritoryDashboard },\n { path: '/acuracia', component: Accuracy },\n ],\n unauthenticated: [\n ],\n authenticated: [\n { path: '/discourse/sso', component: LoginToForum },\n ],\n};\n\nconst renderRoutes = ({ data, _loading }) => {\n let user = get(data, 'user', localStorage.getItem('token'));\n let routesToRender = user ? routes.authenticated : routes.unauthenticated;\n routesToRender = concat(routesToRender, routes.all);\n\n return (\n \n
\n )\n }\n \n \n \n \n \n
\n \n
\n Selecione o nível e o bioma nas caixas abaixo para visualização dos resultados estatísticos de acurácia da Coleção
\n \n\n
\n\n \n \n \n
\n \n \n \n
\n \n \n
\n \n
\n\n \n Acurácia geral\n { numbro(_.get(accuracies, 'accuracies.globalAccuracy', 0)).format({ mantissa: 2}) }%\n
\n \n Discordância de alocação\n { numbro(_.get(accuracies, 'accuracies.allocationTot', 0)).format({ mantissa: 2}) }%\n
\n \n Discordância de quantidade\n { numbro(_.get(accuracies, 'accuracies.quantityTot', 0)).format({ mantissa: 2}) }%\n
\n \n
\n\n \n
\n \n Acurácia Global\n
\n
\n \n Erro de Inclusão\n
\n
\n \n Erro de Omissão\n
\n \n \n
\n\n \n
\n Erros de inclusão | Acurácia do Usuário
\n\n
\n Erros de omissão | Acurácia do Produtor
\n\n
\n );\n}\n","import toast from '../utils/toast';\n\nexport default function validatePassword(password, passwordConfirmation) {\n const specialCharacters = /[ `!@#$%^&*()_+\\-=\\[\\]{};':\"\\\\|,.<>\\/?~]/;\n\n if (password.length < 8) {\n toast('A senha precisa de ao menos 8 caracteres', 'error');\n return false;\n }\n\n if (!password.match(specialCharacters)) {\n toast('A senha precisa conter pelo menos 1 caracter especial', 'error');\n return false;\n }\n\n if (!password.match(/[A-Z]/)) {\n toast('A senha precisa conter pelo menos 1 caracter maiúsculo', 'error');\n return false;\n }\n\n if (!password.match(/[a-z]/)) {\n toast('A senha precisa conter pelo menos 1 caracter minúsculo', 'error');\n return false;\n }\n\n if (!password.match(/\\d/)) {\n toast('A senha precisa conter pelo menos 1 número', 'error');\n return false;\n }\n\n if (password !== passwordConfirmation) {\n toast('As senhas precisam ser iguais', 'error');\n return false;\n }\n\n return true;\n}\n","import { useEffect } from 'react';\n\nimport { request } from '../../utils/api';\n\nexport default function ConfirmationPage() {\n let token = null;\n\n const urlToken = new URL(window.location.href).searchParams.get('token')\n !!urlToken\n ? token = urlToken\n : window.location.href = '/';\n\n useEffect(() => {\n const payload = { token: urlToken };\n\n request('/users/confirm_account', {\n method: 'POST',\n body: JSON.stringify(payload)\n })\n .then(() => {\n window.location.href = '/?confirmation=true';\n })\n .catch(() => {\n toast('Ocorreu um erro.', 'error');\n });\n }, [])\n\n return null;\n}\n","import React from 'react'\n\nimport {\n Redirect\n} from 'react-router-dom'\nimport _ from 'lodash'\n\nexport default (path, generateExtraProps = (_props) => ({})) => (\n (props) => {\n let redirectPath = path\n if (_.isFunction(path)) {\n redirectPath = path(props)\n }\n\n return \n \n \n \n
\n \n
\n
\n