- \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","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 {\n GET_TERRITORIES_AUTOCOMPLETE,\n} from './query';\n\nexport default function TerritoryAutocomplete({\n activeTerritories,\n categoryId,\n label,\n placeholder,\n territoryLabelFilter,\n onChange,\n}) {\n const locale = localStorage.getItem('locale') || 'es';\n const client = useApolloClient();\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 );\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
\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};\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 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 { 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","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 {\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 '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\nexport default function GenericClasses({\n clientType,\n hideLegendIndex,\n hideParentToggle,\n moduleId,\n submoduleKey,\n hideLevelsControl,\n secondaryClassTreeKey,\n}) {\n const isMobile = useMediaQuery('(max-width: 768px)');\n const locale = localStorage.getItem('locale') || 'es';\n const client = useApolloClient();\n const hasBaseMode = !!secondaryClassTreeKey;\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 useEffect(() => {\n setBaseClassTreeNodes(null);\n }, [submoduleKey]);\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 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 { 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\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\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 [ ...appState.baseParams.activeObjectTreeNodeIds, 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}\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(transitionClassesData, (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') || 'es';\n const client = useApolloClient();\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 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 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') || 'es';\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 \n
\n
\n \n { _.get(activeModuleData, 'key') === 'degradation' &&\n \n \n \n \n 
\n */}\n
\n );\n };\n\n const renderFireModeContent = () => {\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 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 renderMenuContent()\n }\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 = !showFireModeContent && !showInfrastructureModeContent && !showIrrigationModeContent && !iframeMode && _.get(activeModuleData, 'key') === item.key ||\n (item.key === 'fire' && (showFireModeContent || isFireIframe)) ||\n (item.key === 'infrastructure' && (showInfrastructureModeContent || isInfrastructureIframe)) ||\n (item.key === 'irrigation' && (showIrrigationModeContent || isIrrigationIframe)) ||\n (item.key === 'deforestation' && showDeforestationModeContent) ||\n (item.key === 'coral_reef' && isCoralReefIframe);\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 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') || 'es';\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') || 'es';\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 activeBaseMap,\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 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 return (\n <>\n \n \n \n );\n }) }\n \n
\n \n \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') || 'es';\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 'irrigation_main',\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 unit,\n mantissa,\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 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
\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\n return (\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', { year: currentYear }),\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 const years = _.get(chartsData, 'years');\n const historicalSeriesChartData = _.get(chartsData, 'historicalSeriesChartData');\n const historicalSeriesChart = {\n title: formatMessage('mapbiomas.dashboard.coverage.coverage_main.charts.historical_line.title'),\n columns: years,\n rows: historicalSeriesChartData,\n mantissa: valueMantissa\n };\n\n onShowData([\n classViewChart,\n historicalSeriesChart,\n ]);\n };\n\n return (\n \n
\n }\n { renderClassViewChart() }\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\n return (\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', { year: currentYear }),\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 const years = _.get(chartsData, 'years');\n const historicalSeriesChartData = _.get(chartsData, 'historicalSeriesChartData');\n const historicalSeriesChart = {\n title: formatMessage('mapbiomas.dashboard.coverage.coverage_main.charts.historical_line.title'),\n columns: years,\n rows: historicalSeriesChartData,\n mantissa: valueMantissa\n };\n\n onShowData([\n classViewChart,\n historicalSeriesChart,\n ]);\n };\n\n return (\n \n
\n }\n { renderClassViewChart() }\n { 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 \n \n \n
\n );\n}\n","import { gql } from 'graphql.macro';\n\nexport const GET_CATEGORIES_OF_OBJECT_TREE_NODES = gql`\n query GetCategoriesOfObjectTreeNodes($objectTreeNodeIds: [Int!]!) {\n geospatialObjectCategoryTreeNodesList(ids: $objectTreeNodeIds) {\n id\n categoryId\n }\n }\n`;\n\nexport const GET_BASE_DATA = gql`\n query GetBaseData(\n $territoryIds: [Int!]!,\n $classTreeKey: String!,\n $activeClassTreeNodeIds: [Int!]!,\n $hasObjectFilter: Boolean!,\n $activeObjectCategoryIds: [Int!],\n $bufferId: Int\n ) {\n classTreeByKey(key: $classTreeKey) {\n id\n key\n i18nStrings {\n\t\t\t\tlanguage\n\t\t\t\tstringValue\n }\n\n mvClassTreeLevelsUi (ids: $activeClassTreeNodeIds) {\n id\n classId\n color\n positionInTree\n level\n childrenIds\n parentId\n defaultName\n i18nStrings {\n\t\t\t\t\tlanguage\n\t\t\t\t\tstringValue\n }\n\n classTreeNode {\n coverageClassificationDataByTree(territoryId: $territoryIds) @skip(if: $hasObjectFilter) {\n territoryId\n year\n areaInHa\n }\n\n coverageClassificationDataByTreeListWithObjectIntersection: coverageClassificationDataByTree(\n territoryId: $territoryIds,\n\t\t\t\t\t\tobjectCategoryId: $activeObjectCategoryIds,\n\t\t\t\t\t\tbufferId: $bufferId\n ) @include(if: $hasObjectFilter) {\n territoryId\n year\n areaInHa\n }\n }\n }\n }\n }\n`\n","import React, { useEffect, useState, Fragment } from 'react';\nimport _ from 'lodash';\nimport numbro from 'numbro';\nimport { FormattedMessage } from 'react-intl';\nimport { useQuery } from '@apollo/react-hooks';\n\nimport Button from '@material-ui/core/Button';\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport TableChartIcon from '@material-ui/icons/TableChart';\n\nimport LineChart from '../../../StatisticsBox/components/LineChart';\nimport PieChart from '../../../StatisticsBox/components/PieChart';\n\nimport useFormatMessage from '../../../../../../../../hooks/useFormatMessage';\n\nimport styles from '../../InfrastructureStatisticsBox.module.scss';\n\nimport {\n GET_BASE_DATA,\n GET_CATEGORIES_OF_OBJECT_TREE_NODES,\n} from './query';\n\nconst formatNumber = (value) => {\n return numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n};\n\nexport default function InfrastructureMainStatisticsContent({\n activeYear,\n baseParams,\n statisticsDataIsVisible,\n onShowData,\n}) {\n const locale = localStorage.getItem('locale') || 'es';\n const formatMessage = useFormatMessage();\n\n const [chartsData, setChartsData] = useState(null);\n\n const territories = _.get(baseParams, 'territories');\n const yearRange = _.map(_.split(_.get(baseParams, 'yearRange'), '-'), Number);\n const years = _.range(_.first(yearRange), _.last(yearRange) + 1);\n const territoryIds = _.map(territories, 'id');\n const activeClassTreeNodeIds = _.get(baseParams, 'activeClassTreeNodeIds');\n const activeClassTreeOptionValue = _.get(baseParams, 'activeClassTreeOptionValue');\n const activeObjectTreeNodeIds = _.get(baseParams, 'activeObjectTreeNodeIds');\n const bufferId = _.get(baseParams, 'buffer');\n const objectTreeNodesData = useQuery(GET_CATEGORIES_OF_OBJECT_TREE_NODES, {\n variables: {\n objectTreeNodeIds: activeObjectTreeNodeIds\n }\n });\n const activeObjectCategoryIds = _.map(_.get(objectTreeNodesData, 'data.geospatialObjectCategoryTreeNodesList'), 'categoryId');\n\n if (!activeObjectCategoryIds) {\n return null;\n }\n\n const { data: baseData, loading: loadingBaseData } = useQuery(GET_BASE_DATA, {\n variables: {\n territoryIds,\n activeClassTreeNodeIds,\n hasObjectFilter: true,\n activeObjectCategoryIds,\n bufferId,\n classTreeKey: activeClassTreeOptionValue,\n },\n skip: _.isEmpty(territoryIds) || !activeClassTreeOptionValue,\n });\n\n const classTree = _.get(baseData, 'classTreeByKey');\n const isEmpty = _(_.get(baseData, 'classTreeByKey[0].mvClassTreeLevelsUi'))\n .map('classTreeNode.coverageClassificationDataByTreeListWithObjectIntersection')\n .flatten()\n .compact()\n .value().length === 0;\n\n const parseChartsData = () => {\n const classTreeLevelsList = _.get(classTree, '[0].mvClassTreeLevelsUi');\n const activeClassTreeLevelsList = _.filter(classTreeLevelsList, (item) => {\n return _.includes(activeClassTreeNodeIds, item.id);\n });\n const classTreeLevelsListOnLevel1 = _.filter(activeClassTreeLevelsList, { level: 1 });\n\n const classViewChartData = _.map(classTreeLevelsListOnLevel1, (classTree) => {\n const stringList = _.get(classTree, 'i18nStrings');\n const selectedString = _.find(stringList, { language: locale });\n const valueItems = _.get(classTree, 'classTreeNode.coverageClassificationDataByTreeListWithObjectIntersection');\n const filteredValueItems = _.filter(valueItems, { year: activeYear });\n const value = _.sumBy(filteredValueItems, 'areaInHa');\n\n return {\n name: _.get(selectedString, 'stringValue'),\n value,\n itemStyle: {\n color: _.get(classTree, 'color')\n }\n }\n });\n\n const historicalSeriesChartData = _.map(activeClassTreeLevelsList, (classTree) => {\n const stringList = _.get(classTree, 'i18nStrings');\n const selectedString = _.find(stringList, { language: locale });\n const name = `${ _.join(_.get(classTree, 'positionInTree'), '.') }. ${ _.get(selectedString, 'stringValue') }`;\n const color = _.get(classTree, 'color');\n const level = _.get(classTree, 'level');\n const valueItems = _.get(classTree, 'classTreeNode.coverageClassificationDataByTreeListWithObjectIntersection');\n const data = _.map(years, (year) => {\n const filteredValueItems = _.filter(valueItems, { year: year });\n const value = _.sumBy(filteredValueItems, 'areaInHa');\n\n return !_.isEmpty(filteredValueItems) ? value : null;\n });\n\n return {\n name,\n color,\n data,\n level,\n padding: level * 12,\n };\n });\n\n return {\n years,\n classViewChartData,\n historicalSeriesChartData,\n };\n };\n\n useEffect(() => {\n if (!loadingBaseData && baseData) {\n // parseChartsData();\n setChartsData(parseChartsData());\n }\n // }, [baseData, loadingBaseData, loadingClassTreeData, activeClassesLevelsListItems, activeYear]);\n }, [baseData, loadingBaseData, activeYear]);\n\n useEffect(() => {\n if (statisticsDataIsVisible) {\n handleShowData();\n }\n }, [chartsData]);\n\n const renderClassViewChart = () => {\n // const { classViewChartData } = parseChartsData();\n // const data = classViewChartData;\n const data = _.get(chartsData, 'classViewChartData');\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 };\n\n const renderHistoricalSeriesChart = () => {\n const years = _.get(chartsData, 'years');\n const data = _.get(chartsData, 'historicalSeriesChartData');\n\n return (\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', { year: activeYear }),\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 years = _.get(chartsData, 'years');\n const historicalSeriesChartData = _.get(chartsData, 'historicalSeriesChartData');\n const historicalSeriesChart = {\n title: formatMessage('mapbiomas.dashboard.coverage.coverage_main.charts.historical_line.title'),\n columns: years,\n rows: historicalSeriesChartData,\n };\n\n onShowData([\n classViewChart,\n historicalSeriesChart,\n ]);\n };\n\n return (\n \n
\n }\n { !isEmpty &&\n \n \n
\n \n
\n }\n Nenhum resultado encontrado.
\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
\n \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 activeModule\n activeModuleContent\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 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 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 isOnDegradationCrossingMode = degradationType === 'crossing';\n const activeYear = _.get(baseData, 'app.activeYear');\n const baseParams = _.get(baseData, 'app.baseParams');\n const mapboxMode = _.get(baseData, 'app.mapboxMode');\n const transitionClassTreeNodeId = _.get(\n baseData,\n 'app.transitionClassTreeNodeId'\n );\n const territoryCategoriesList = _.get(\n territoriesCategoriesListData,\n 'territoryCategoriesList'\n );\n\n const headerIsVisible = _.get(baseData, 'app.headerIsVisible');\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(\n 'quality_of_pasture_data:quality_of_pasture_data_main'\n )\n ) {\n updateClientAppState({\n activeBaseMap: 1,\n layersOpacity: 100,\n activeLayers: ['state'],\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('irrigation:irrigation_main')) {\n updateClientAppState({\n activeBaseMap: 1,\n activeLayers: ['state'],\n });\n } else if (checkModuleKeyCondition('infrastructure:infrastructure_main')) {\n updateClientAppState({\n activeBaseMap: 1,\n activeYear: 2020,\n timelineLimitsRange: [1985, 2020],\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 }\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: 'biome',\n });\n const countryTerritoryId = _.get(countryTerritoryCategory, 'id');\n loadCountryTerritoryData({\n variables: {\n categoryId: countryTerritoryId,\n },\n });\n }\n }, [territoryCategoriesList]);\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 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 { 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, { useEffect, useState, Fragment } from 'react';\nimport _ from 'lodash';\nimport numbro from 'numbro';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useQuery } from '@apollo/react-hooks';\n\nimport Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport TableChartIcon from '@material-ui/icons/TableChart';\n\nimport LineChart from '../../../MapBiomasLandingPage/views/Map/components/StatisticsBox/components/LineChart';\nimport PieChart from '../../../MapBiomasLandingPage/views/Map/components/StatisticsBox/components/PieChart';\n\nimport useFormatMessage from '../../../../hooks/useFormatMessage';\n\nimport styles from '../../TerritoryDashboard.module.scss';\n\nimport {\n GET_BASE_DATA,\n GET_CLASS_TREE_DATA,\n} from './query';\n\nconst formatNumber = (value) => {\n return numbro(value).format({\n thousandSeparated: true,\n mantissa: 0\n });\n};\n\nexport default function CoverageMainStatisticsContent({\n activeYear,\n territoryId,\n statisticsDataIsVisible = false,\n onShowData = () => {},\n}) {\n const locale = localStorage.getItem('locale') || 'es';\n const formatMessage = useFormatMessage();\n\n const intl = useIntl()\n\n const [chartsData, setChartsData] = useState(null);\n\n const classTreeKey = 'default';\n\n const { data: classTreeData, loading: loadingClassTreeData } = useQuery(GET_CLASS_TREE_DATA, {\n variables: {\n classTreeKey\n }\n });\n const classTreeId = _.get(classTreeData, 'classTreeByKey[0].id');\n\n const territoryIds = [territoryId];\n const classesLevelsList = _.get(classTreeData, 'classTreeByKey[0].mvClassTreeLevelsUi');\n const activeClassesLevelsListItems = _.map(_.filter(classesLevelsList, { level: 1 }), 'id');\n const { data: baseData, loading: loadingBaseData } = useQuery(GET_BASE_DATA, {\n variables: {\n territoryIds,\n classTreeId: classTreeId\n },\n skip: _.isEmpty(territoryIds) || !classTreeId || loadingClassTreeData\n });\n\n const findFurthestParent = (node) => {\n const { parentId } = node;\n\n if (parentId) {\n const classesLevelsList = _.get(classTreeData, 'classTreeByKey[0].mvClassTreeLevelsUi');\n const parentNode = _.find(classesLevelsList, { id: parentId });\n\n if (parentNode) {\n return _.get(parentNode, 'parentId') ? findFurthestParent(parentNode) : parentNode;\n }\n } else {\n return node;\n }\n };\n\n const findFurthestChildrenIds = (childrenIds = []) => {\n if (!_.isEmpty(childrenIds)) {\n const classesLevelsList = _.get(classTreeData, 'classTreeByKey[0].mvClassTreeLevelsUi');\n\n const ids = _.map(childrenIds, (id) => {\n const node = _.find(classesLevelsList, { id });\n\n return findFurthestChildrenIds(_.get(node, 'childrenIds'));\n });\n\n return [\n ...childrenIds,\n ...(_.compact(_.flattenDeep(ids)))\n ]\n } else {\n return _.compact(_.flattenDeep(childrenIds));\n }\n };\n\n const parseChartsData = () => {\n const classesLevelsList = _.get(classTreeData, 'classTreeByKey[0].mvClassTreeLevelsUi');\n console.log('classesLevelsList', classesLevelsList);\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 classViewChartData = _(activeClassesLevelsList)\n .filter((node) => {\n const childrenIds = findFurthestChildrenIds(_.get(node, 'childrenIds'));\n const hasAtLeastOneChildrenActive = childrenIds.some(id => activeClassesLevelsListItems.indexOf(id) >= 0);\n\n return !hasAtLeastOneChildrenActive;\n })\n .map((node) => {\n const furthestParent = findFurthestParent(node);\n const currentData = _.find(parsedData, (item) => _.get(item, 'classData.id') === node.id && item.year === activeYear);\n\n return {\n ...currentData,\n furthestParentId: _.get(furthestParent, 'id'),\n furthestParent: furthestParent\n };\n })\n .groupBy('furthestParentId')\n .map((data) => {\n const sampleItem = _.first(data);\n const stringList = _.get(sampleItem, 'furthestParent.i18nStrings');\n const selectedString = _.find(stringList, { language: locale });\n const totalValue = _.sumBy(data, 'areaInHa');\n\n return {\n name: _.get(selectedString, 'stringValue'),\n value: totalValue,\n itemStyle: {\n color: _.get(sampleItem, 'furthestParent.color')\n },\n }\n })\n .value();\n\n const historicalSeriesChartData = _.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 return {\n years,\n classViewChartData,\n historicalSeriesChartData,\n };\n };\n\n useEffect(() => {\n if (!loadingClassTreeData && !loadingBaseData && baseData) {\n setChartsData(parseChartsData());\n }\n }, [baseData, loadingBaseData]);\n\n useEffect(() => {\n if (statisticsDataIsVisible) {\n handleShowData();\n }\n }, [chartsData]);\n\n const renderClassViewChart = () => {\n const data = _.get(chartsData, 'classViewChartData');\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\n return (\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', { year: activeYear }),\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 years = _.get(chartsData, 'years');\n const historicalSeriesChartData = _.get(chartsData, 'historicalSeriesChartData');\n const historicalSeriesChart = {\n title: formatMessage('mapbiomas.dashboard.coverage.coverage_main.charts.historical_line.title'),\n columns: years,\n rows: historicalSeriesChartData,\n };\n\n onShowData([\n classViewChart,\n historicalSeriesChart,\n ]);\n };\n\n return (\n \n
\n }\n \n
\n
\n );\n };\n\n const renderHistoricalSeriesChart = () => {\n const years = _.get(chartsData, 'years');\n const data = _.get(chartsData, 'historicalSeriesChartData');\n\n return (\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', { year: activeYear }),\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 years = _.get(chartsData, 'years');\n const historicalSeriesChartData = _.get(chartsData, 'historicalSeriesChartData');\n const historicalSeriesChart = {\n title: formatMessage('mapbiomas.dashboard.coverage.coverage_main.charts.historical_line.title'),\n columns: years,\n rows: historicalSeriesChartData,\n };\n\n onShowData([\n classViewChart,\n historicalSeriesChart,\n ]);\n };\n\n return (\n \n
\n }\n { renderClassViewChart() }\n {/* { renderHistoricalSeriesChart() } */}\n {/* */}\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 \n
\n );\n}\n\nconst MODULES = [\n { key: 'coverage', label: 'Cobertura' },\n // { key: 'coverage_quality', label: '' },\n // { key: 'temporal_analysis', label: '' },\n { key: 'quality_of_pasture_data', label: 'Pastagem' },\n { key: 'deforestation', label: 'Desmatamento' },\n { key: 'regeneration', label: 'Regeneração' },\n // { key: 'infrastructure', label: '' },\n { key: 'irrigation', label: 'Irrigação' },\n { key: 'fire', label: 'Fogo' },\n // { key: 'scenarios', label: '' },\n { key: 'water', label: 'Água' },\n { key: 'mining', label: 'Mineração' },\n];\n\nexport default function TerritoryDashboard() {\n const [territory, setTerritory] = useState({\n \"id\": 193,\n \"label\": \"Altamira (PA)\",\n \"boundingBox\": [\n [\n -9.645178150999953,\n -55.623870985999986\n ],\n [\n -2.9887168529999784,\n -51.64753782599993\n ]\n ]\n });\n\n const bbox = _.get(territory, 'boundingBox');\n const territoryId = _.get(territory, 'id');\n const territoryBoundingBox = `${ _.get(bbox, '[0][1]') },${ _.get(bbox, '[0][0]') },${ _.get(bbox, '[1][1]') },${ _.get(bbox, '[1][0]') }`;\n\n const handleTerritoryChange = (data) => {\n console.log('territory change', data);\n setTerritory(data);\n };\n\n const renderTerritoryImage = (module, year, nodeIds) => {\n const wfsParams = [\n 'service=WMS',\n 'request=GetMap',\n `layers=${ module }`,\n 'format=image/png',\n 'transparent=true',\n 'version=1.1.1',\n `territory_ids=${ territoryId }`,\n `year=${ year }`,\n `class_tree_node_ids=${ nodeIds }`,\n 'width=220',\n 'height=220',\n 'srs=EPSG:4326',\n `bbox=${ territoryBoundingBox }`\n ];\n const params = wfsParams.join('&');\n\n return (\n \n
\n { title }
\n { subtitle &&\n{ subtitle }
\n }\n\n \n \n
\n );\n };\n\n const renderSectionTitle = (title, subtitle, color) => {\n return (\n \n
\n );\n}\n","import { gql } from 'graphql.macro';\n\nexport const GET_ACCURACIES = gql`\n query GetAccuracies($level: String!, $biome: String!, $year: Int!) {\n accuracies(level: $level, biome: $biome, year: $year) {\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_BIOMES = gql`\n query AccuracyBiomes {\n accuracyBiomes\n }\n`;\n\nexport const GET_LEVELS = gql`\n query AccuracyLevels {\n accuracyLevels\n }\n`;\n\nexport const GET_YEARS = gql`\n query AccuracyYears {\n accuracyYears\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(_.get(territory, 'label')) }\n \n \n { renderTerritoryImage('coverage', 2021, COVERAGE_TREE_NODE_IDS) }\n \n \n \n \n { renderSectionTitle('Cobertura e Uso da Terra', undefined, '#16a085') }\n \n \n \n \n \n { renderTerritoryImage('coverage', 2021, COVERAGE_TREE_NODE_IDS) }\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 { renderSectionTitle('Desmatamento', undefined, '#e74c3c') }\n \n \n \n \n \n { renderTerritoryImage('deforestation_annual', 2020, DEFORESTATION_TREE_NODE_IDS) }\n \n \n \n { renderSectionTitle('Vegetação Secundária', undefined, '#27ae60') }\n \n \n \n \n \n { renderTerritoryImage('regeneration_annual', 2019, REGENERATION_TREE_NODE_IDS) }\n \n \n \n { renderSectionTitle('Qualidade da Pastagem', undefined, '#f39c12') }\n \n \n \n \n \n { renderTerritoryImage('quality_of_pasture_data_main', 2021, QUALITY_OF_PASTURE_TREE_NODE_IDS) }\n \n \n \n { renderSectionTitle('Mineração', undefined, '#f39c12') }\n \n \n \n \n \n { renderTerritoryImage('mining_main', 2021, MINING_TREE_NODE_IDS) }\n \n \n \n { renderSectionTitle('Fogo', undefined, '#e74c3c') }\n \n \n \n \n \n { renderTerritoryImage('fire_annual', 2020, FIRE_TREE_NODE_IDS) }\n \n \n \n { renderSectionTitle('Irrigação', undefined, '#b731ce') }\n \n \n \n \n \n { renderTerritoryImage('irrigation_main', 2021, IRRIGATION_TREE_NODE_IDS) }\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 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque elementum turpis vitae condimentum. Proin venenatis metus dui, a tempus massa posuere sed.
\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque elementum turpis vitae condimentum. Proin venenatis metus dui, a tempus massa posuere sed.
\n1985
\n { renderTerritoryImage('coverage', 1985, COVERAGE_NATURAL_OR_ANTHROPIC_TREE_NODE_IDS) }\n2021
\n { renderTerritoryImage('coverage', 2021, COVERAGE_NATURAL_OR_ANTHROPIC_TREE_NODE_IDS) }\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque elementum turpis vitae condimentum. Proin venenatis metus dui, a tempus massa posuere sed.
\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque elementum turpis vitae condimentum. Proin venenatis metus dui, a tempus massa posuere sed.
\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque elementum turpis vitae condimentum. Proin venenatis metus dui, a tempus massa posuere sed.
\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque elementum turpis vitae condimentum. Proin venenatis metus dui, a tempus massa posuere sed.
\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque elementum turpis vitae condimentum. Proin venenatis metus dui, a tempus massa posuere sed.
\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque elementum turpis vitae condimentum. Proin venenatis metus dui, a tempus massa posuere sed.
\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","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, { useEffect, useState } from 'react';\nimport { useLazyQuery, useQuery } from '@apollo/react-hooks';\nimport _ from 'lodash';\nimport styles from './Accuracy.module.scss';\nimport { GET_ACCURACIES, GET_BIOMES, GET_CLASS_TREE_DATA, GET_LEVELS, GET_YEARS } from './query';\nimport LineChart from './LineChart';\nimport numbro from 'numbro';\nimport BarChart from './BarChart';\n\nexport default function Accuracy() {\n const [state, setState] = useState({\n level: 'l1',\n biome: 'Brasil',\n year: 2022,\n });\n const { data: biomes } = useQuery(GET_BIOMES);\n const { data: levels } = useQuery(GET_LEVELS);\n const { data: years } = useQuery(GET_YEARS);\n const { data: classTree } = useQuery(GET_CLASS_TREE_DATA, {\n variables: {\n classTreeKey: 'default',\n },\n });\n const [getAccuracies, { data: accuracies, loading: loadingAccuracies }] = useLazyQuery(GET_ACCURACIES);\n\n useEffect(() => {\n getAccuracies({ variables: state });\n }, [state.year]);\n\n const handleSubmit = () => {\n getAccuracies({ variables: state });\n };\n\n const handleChange = (event) => {\n const { id, value } = event.target;\n setState({ ...state, [id]: id === 'year' ? Number(value) : value });\n };\n\n const legend = _.keyBy(_.get(classTree, 'classTreeByKey[0].mvClassTreeLevelsUi', []), 'pixelValue');\n const overallAccuracy = _.get(accuracies, 'accuracies.overallAccuracy', []);\n const userAccuracy = _.get(accuracies, 'accuracies.userAccuracy', []);\n const producerAccuracy = _.get(accuracies, 'accuracies.producerAccuracy', []);\n \n const confusionProdLeft = _.groupBy(_.get(accuracies, 'accuracies.confusionProdLeft', []), 'classId');\n const countProdLeftSeries = _.get(Object.values(confusionProdLeft), '[0].length', 0);\n const confusionProdRight = _.filter(_.get(accuracies, 'accuracies.confusionProdRight', []), (item) => item.classId !== -1);\n\n const confusionUserLeft = _.groupBy(_.get(accuracies, 'accuracies.confusionUserLeft', []), 'classId');\n const countUserLeftSeries = _.get(Object.values(confusionUserLeft), '[0].length', 0);\n const confusionUserRight = _.filter(_.get(accuracies, 'accuracies.confusionUserRight', []), (item) => item.classId !== -1);\n\n const omissionCategories = _.map(confusionProdRight, (item) => _.get(legend, `${item.classId}.defaultName`, item.classId));\n const insertionCategories = _.map(confusionUserRight, (item) => _.get(legend, `${item.classId}.defaultName`, item.classId));\n\n \n const omissionSeries = [\n {\n data: _.map(confusionProdRight, (item) => ({\n value: item.value,\n itemStyle: {\n color: _.get(legend, `${item.classId}.color`),\n }\n })),\n }\n ];\n for (let i = 0; i < countProdLeftSeries; i++) {\n omissionSeries.push({\n data: _.map(confusionProdLeft, (item) => ({\n value: item[i].value * -1,\n itemStyle: {\n color: _.get(legend, `${item[i].idClassMap}.color`),\n }\n })),\n });\n }\n\n const insertionSeries = [\n {\n data: _.map(confusionUserRight, (item) => ({\n value: item.value,\n itemStyle: {\n color: _.get(legend, `${item.classId}.color`),\n }\n })),\n }\n ];\n for (let i = 0; i < countUserLeftSeries; i++) {\n insertionSeries.push({\n data: _.map(confusionUserLeft, (item) => ({\n value: item[i].value * -1,\n itemStyle: {\n color: _.get(legend, `${item[i].idClassMap}.color`),\n }\n })),\n });\n }\n \n const overallYears = _.map(overallAccuracy, 'year');\n const overallData = [{ \n name: 'Valor',\n color: '#00A00D',\n data: _.map(overallAccuracy, 'value') \n }];\n const userYears = _.map(_.get(userAccuracy, '[0].statistics'), 'year');\n const userData = _.map(\n userAccuracy,\n (item) => ({\n name: _.get(legend, `${item.classId}.defaultName`, item.classId),\n color: _.get(legend, `${item.classId}.color`),\n data: _.map(item.statistics, 'value'),\n })\n );\n const producerYears = _.map(_.get(producerAccuracy, '[0].statistics'), 'year');\n const producerData = _.map(\n producerAccuracy,\n (item) => ({\n name: _.get(legend, `${item.classId}.defaultName`, item.classId),\n color: _.get(legend, `${item.classId}.color`),\n data: _.map(item.statistics, 'value'),\n })\n );\n \n return (\n \n \n \n \n
\n \n
\n
\n \n {\n loadingAccuracies && (\n
\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 \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 8
\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 Acurácia Global
\n\n
\n Acurácia do Produtor
\n\n
\n Acurácia do Usuário
\n\n \n \n
\n\n \n
\n Erros de inclusão
\n\n
\n Erros de omissão
\n