- \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 { !hasTerritorySimpleSelect &&\n \n \n \n ) }\n />\n }\n { false &&\n \n \n */}\n \n ) }\n />\n }\n { crossingEnabled &&\n \n \n \n \n }\n { showBufferField &&\n \n ({\n id: _.get(gb, 'id'),\n label: onCurrentLocaleCustom(_.get(gb, 'i18nStrings'))\n }))) }\n value={ buffer }\n dataKey=\"buffer\"\n label=\"Buffer\"\n onChange={ handleInputChange }\n />\n \n }\n { isTransition &&\n \n \n \n { _.map(parsedCoverageTransitionPeriodOptionsList, (data, group) => {\n return [\n { group } ,\n _.map(data, (option) => {\n return (\n \n );\n })\n ];\n }) }\n \n \n \n }\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 FormControlLabel from '@material-ui/core/FormControlLabel';\n\nimport useFormatMessage from '../../../../../../../../hooks/useFormatMessage';\n\nimport styles from './ClassesControl.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: `${ theme.palette.primary.main } !important`,\n },\n}));\n\nexport default function ClassesControl({\n activeClassificationLevels,\n disabled = false,\n viewMode,\n levels = [],\n hideLevelsToggle = false,\n viewModeOptions,\n showDescription = false,\n onClassificationLevelToggle = () => {},\n onViewModeChange = () => {},\n titleKey,\n}) {\n const formatMessage = useFormatMessage();\n const classes = useStyles();\n\n const intl = useIntl()\n\n const renderLevelCheckboxesToggle = () => {\n return _.map(levels, (levelId) => {\n const isChecked = _.includes(activeClassificationLevels, levelId);\n\n return (\n \n { !hideGroupType && (\n \n \n
\n \n
\n { showDescription && }\n { viewModeOptions &&\n \n \n }\n { !hideLevelsToggle &&\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 { _.map(viewModeOptions, (option, index) => {\n return (\n \n
\n \n { renderLevelCheckboxesToggle() }\n
\n }\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 { !_.isEmpty(levels) && _.size(levels) > 1 && !hideLevelsControl && renderLevelsControl() }\n
\n )\n}\n","import React, { 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 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 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 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 }\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\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 } from 'react'\nimport _ from 'lodash'\nimport { useApolloClient, useQuery } from '@apollo/react-hooks'\nimport useMediaQuery from '@material-ui/core/useMediaQuery'\n\nimport ClassTreesControl from './components/ClassTreesControl'\nimport ClassLegendList from './components/ClassLegendList'\nimport { updateStateCache as uncurriedUpdateStateCache } from '../../../../../../utils/apollo'\n\nimport customClient from '../../../../../../core/custom-apollo-client/custom-apollo-client';\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\nexport default function GenericClasses({\n clientType,\n hideLegendIndex,\n moduleId,\n submoduleKey,\n hideLevelsControl,\n}) {\n const isMobile = useMediaQuery('(max-width: 768px)')\n const locale = localStorage.getItem('locale') || 'id'\n const client = useApolloClient()\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: clientType === 'custom' ? customClient : undefined\n })\n\n const activeClassTreeNodeIds = _.get(baseData, 'app.baseParams.activeClassTreeNodeIds')\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\n const { data: classTreeData, loading: loadingClassTreeData } = useQuery(GET_CLASS_TREE_DATA, {\n variables: {\n classTreeKey: activeClassTreeOptionValue\n },\n skip: !activeClassTreeOptionValue,\n client: clientType === 'custom' ? customClient : undefined\n });\n const classTreeLevelsList = _.get(classTreeData, 'classTreeByKey[0].mvClassTreeLevelsUi') || [];\n\n useEffect(() => {\n if (isOnInitialRenderingWithQueryParams) {\n return;\n }\n\n const activeTreeIsInCurrentSubmoduleTrees = _.some(\n classTrees,\n { classTree: { key: activeClassTreeOptionValue }}\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 updateStateCache(\n 'app.baseParams',\n [ 'activeClassTreeOptionValue', classTreeKey ],\n [ 'activeClassTreeNodeIds', nodeIds ]\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 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 return (\n \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/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_aerodromos.zip',\n '1.2.1': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_eclusa.zip',\n '1.2.2': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_estacao_transbordo_cargas.zip',\n '1.2.3': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_hidrovia.zip',\n '1.2.4': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_instalacao_portuaria_turismo.zip',\n '1.2.5': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_instalacao_portuaria_sob_registro.zip',\n '1.2.6': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_porto.zip',\n '1.2.7': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_terminal_uso_privado.zip',\n '1.3.1': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_aquaduto.zip',\n '1.3.2': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_gasoduto.zip',\n '1.3.3': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_mineroduto.zip',\n '1.3.4': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_oleoduto.zip',\n '1.3.5': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_poliduto.zip',\n '1.3.6': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_duto_nao_identificado.zip',\n '1.4.1': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_ferrovias.zip',\n '1.5.1': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_trechos_rodoviarios.zip',\n '1.5.2': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/transport/mapbiomas_infra_rodovias_federais.zip',\n '2.1.1': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_refinarias_petroleo.zip',\n '2.1.2': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_terminal_armazenamento_petroleo.zip',\n '2.1.3': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_estacao_compressao.zip',\n '2.1.4': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_ponto_entrega_gas.zip',\n '2.1.5': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_processamento_gas_natural.zip',\n '2.1.6': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_usina_biodiesel.zip',\n '2.1.7': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_usina_biogas.zip',\n '2.1.8': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_usina_etanol.zip',\n '2.1.9': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_base_glp.zip',\n '2.1.10': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_base_combustivel_liquido.zip',\n '2.2.1': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_subestacao.zip',\n '2.2.2': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_linhas_transmissao.zip',\n '2.2.3.1': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_usinas_eolicas.zip',\n '2.2.3.2': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_usinas_fotovoltaicas.zip',\n '2.2.3.3': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_usinas_termeletricas_biomassa.zip',\n '2.2.3.4': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_usinas_hidreletricas.zip',\n '2.2.3.5': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_pequena_central_hidreletrica.zip',\n '2.2.3.6': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_centrais_geradoras_hidreletricas.zip',\n '2.2.4.7': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_termeletricas_combustivel_fossil.zip',\n '2.2.4.8': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/energy/mapbiomas_infra_termonuclear.zip',\n '3.1': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/mining/mapbiomas_infra_mina_energeticos.zip',\n '3.2': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/mining/mapbiomas_infra_mina_metalicos.zip',\n '3.3': 'https://storage.googleapis.com/mapbiomas-public/brasil/collection-6/lclu/downloads/infrastructure/mining/mapbiomas_infra_mina_outros_produtos.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 { _.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 \n \n ) }\n />\n \n \n { _.map(parsedCoverageTransitionPeriodOptionsList, (data, group) => {\n return [\n { group } ,\n _.map(data, (option) => {\n return (\n \n );\n })\n ];\n }) }\n \n \n
\n );\n}\n","import { gql } from 'graphql.macro';\n\nexport const GET_BASE_DATA = gql`\n query {\n app @client {\n baseParams {\n activeTransitionsClassesListItems\n }\n }\n }\n`;\n","import React, { useEffect } from 'react';\nimport _ from 'lodash';\nimport { useQuery } from '@apollo/react-hooks';\nimport { FormattedMessage } from 'react-intl';\n\nimport Checkbox from '@material-ui/core/Checkbox';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport IconButton from '@material-ui/core/IconButton';\n\nimport useFormatMessage from '../../../../../../hooks/useFormatMessage';\n\nimport styles from './TransitionClasses.module.scss';\n\nimport {\n GET_BASE_DATA,\n GET_TERRITORIES_LIST,\n} from './query';\n\n// non_vegetated_areas_to_vegetated,\n// increase_of_water_surface,\n// reduction_of_water_surface,\n// gain_of_forest_plantations,\n// vegetated_areas_to_non_vegetated\n\nconst transitionClassesData = [\n {\n id: 'non_vegetated_areas_to_vegetated',\n label: 'Transições de classes de agropecuária ou áreas não vegetadas para cobertura florestal ou áreas naturais não florestais.',\n color: '#06FF03'\n },\n {\n id: 'increase_of_water_surface',\n label: 'Transições que acrescem superfície de água',\n color: '#3FACFF'\n },\n {\n id: 'reduction_of_water_surface',\n label: 'Transições que reduzem superfície de água',\n color: '#FFA505'\n },\n {\n id: 'gain_of_forest_plantations',\n label: 'Transições com ganho de áreas de silvicultura.',\n color: '#8A2BE2'\n },\n {\n id: 'vegetated_areas_to_non_vegetated',\n label: 'Transições de cobertura florestal ou áreas naturais não florestais para agropecuária ou áreas não vegetadas.',\n color: '#FF0004'\n },\n {\n id: 'areas_without_transitions_or_unobserved',\n label: 'Áreas sem transição ou transições que envolvem áreas não observadas ou transições entre classes dentro do nivel 1 de legenda.',\n color: '#AAA9A9'\n },\n];\n\nexport default function TransitionClasses({\n onItemsChange = () => {},\n}) {\n const formatMessage = useFormatMessage();\n const { data: baseData } = useQuery(GET_BASE_DATA);\n const activeItems = _.get(baseData, 'app.baseParams.activeTransitionsClassesListItems') || [];\n const allClassesActive = _.size(activeItems) === _.size(transitionClassesData);\n\n const handleItemsChange = (ids) => {\n onItemsChange({ activeTransitionsClassesListItems: ids });\n };\n\n useEffect(() => {\n if (_.isEmpty(activeItems)) {\n handleItemsChange(_.map(transitionClassesData, 'id'));\n }\n }, []);\n\n const itemIsActive = (id) => {\n return _.includes(activeItems, id);\n };\n\n const toggleActiveItem = (id) => {\n if (itemIsActive(id)) {\n let itemsClone = _.clone(activeItems);\n itemsClone = _.filter(itemsClone, (itemId) => itemId !== id);\n\n handleItemsChange(itemsClone);\n } else {\n handleItemsChange([\n ...activeItems,\n id\n ]);\n }\n };\n\n const toggleAllItems = () => {\n if (allClassesActive) {\n handleItemsChange([]);\n } else {\n handleItemsChange(_.map(transitionClassesData, 'id'));\n }\n };\n\n return (\n \n
\n
\n );\n}\n","import React, { useEffect } from 'react';\nimport _ from 'lodash';\nimport classnames from 'classnames';\nimport { useApolloClient, useLazyQuery, useQuery } from '@apollo/react-hooks';\nimport { FormattedMessage } from 'react-intl';\n\nimport { withStyles } from '@material-ui/core/styles';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport FormControl from '@material-ui/core/FormControl';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\nimport Radio from '@material-ui/core/Radio';\nimport RadioGroup from '@material-ui/core/RadioGroup';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport InfoIcon from '@material-ui/icons/Info';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nimport ActiveOptionsList from '../ActiveOptionsList';\n\nimport CustomSelect from '../../../../components/CustomSelect';\n\nimport useFormatMessage from '../../../../../../hooks/useFormatMessage';\n\nimport mapGroupTypeToTerritoryCategoryKey from '../../../../../../data/mapGroupTypeToTerritoryCategoryKey';\n\nimport styles from './QualityBaseForm.module.scss';\n\nimport {\n GET_BASE_DATA,\n GET_TERRITORIES_LIST,\n} from './query';\n\nconst CustomTooltip = withStyles(() => ({\n tooltip: {\n padding: '8px 12px',\n fontSize: 14,\n color: 'white',\n backgroundColor: '#555',\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 defaultCrossingKeys = [\n 'indigenous_territories',\n 'settlement',\n 'quilombo',\n 'state_conservation_units_integral_protection',\n 'federal_conservation_units_integral_protection',\n 'state_conservation_units_sustainable_use',\n 'federal_conservation_units_sustainable_use',\n];\n\nexport default function QualityBaseForm({\n inline,\n onFlyTo = () => {},\n}) {\n const locale = localStorage.getItem('locale') || 'id';\n const client = useApolloClient();\n const formatMessage = useFormatMessage();\n const { data: baseData, loading: loadingBaseData } = useQuery(GET_BASE_DATA);\n const [\n loadTerritoriesListData,\n {\n data: territoriesListData,\n loading: loadingTerritoriesListData\n }\n ] = useLazyQuery(GET_TERRITORIES_LIST);\n const baseParams = _.get(baseData, 'app.baseParams');\n const territoryCategoriesList = _.get(baseData, 'territoryCategoriesList');\n const territoriesList = _.get(territoriesListData, 'territoriesList');\n\n const groupType = _.get(baseParams, 'groupType') || 'territorial';\n const territoryType = _.get(baseParams, 'territoryType');\n const territoryValueType = _.get(baseParams, 'territoryValueType');\n const territoryIsMultiple = territoryValueType === 'multiple';\n const territories = _.get(baseParams, 'territories');\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 territoryKeysByGroupType = mapGroupTypeToTerritoryCategoryKey[groupType];\n const filteredTerritoryTypeOptions = _(parsedTerritoryTypeOptions)\n .filter(({ key }) => _.includes(territoryKeysByGroupType, key))\n .sortBy(({ key }) => _.findIndex(territoryKeysByGroupType, (baseTerritoryKey) => baseTerritoryKey === key))\n .value();\n const parsedTerritoryOptions = _.map(territoriesList, (territory) => {\n const stringList = _.get(territory, 'i18nStrings');\n const selectedString = _.find(stringList, { language: locale });\n const boundingBox = _.get(territory, 'territoryGeometry.boundingBox');\n\n return {\n id: territory.id,\n label: _.get(selectedString, 'stringValue'),\n boundingBox: [\n [_.get(boundingBox, 'yMin'), _.get(boundingBox, 'xMin')],\n [_.get(boundingBox, 'yMax'), _.get(boundingBox, 'xMax')],\n ]\n };\n });\n\n const updateClientAppBaseParamsState = (params) => {\n client.writeData({\n data: {\n app: {\n __typename: 'AppState',\n baseParams: {\n __typename: 'AppBaseParamsState',\n ...params\n }\n }\n }\n });\n };\n\n useEffect(() => {\n if (territoryType) {\n loadTerritoriesListData({\n variables: {\n categoryId: territoryType\n }\n });\n }\n }, [territoryType]);\n\n useEffect(() => {\n if (territoryCategoriesList) {\n const initialTerritoryType = _.find(territoryCategoriesList, { key: 'country' });\n const territoryTypeId = _.get(initialTerritoryType, 'id');\n const params = {\n territoryType: territoryTypeId,\n };\n loadTerritoriesListData({\n variables: {\n categoryId: territoryTypeId\n }\n });\n\n updateClientAppBaseParamsState(params);\n }\n }, [territoryCategoriesList]);\n\n useEffect(() => {\n if (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 onFlyTo(_.get(territoryOption, 'boundingBox'));\n }\n }\n }, [territoriesList]);\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 updateClientAppBaseParamsState(params);\n };\n\n\n const handleGroupTypeChange = (event) => {\n let params = {\n groupType: event.target.value,\n territoryType: null,\n };\n\n if (!territoryIsMultiple) {\n params.territories = [];\n }\n\n updateClientAppBaseParamsState(params);\n };\n\n const handleTerritoryChange = (field, value) => {\n const parsedValue = _.isObject(value) ? value.target.value : value;\n const baseOption = _.find(parsedTerritoryOptions, { id: parsedValue });\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 onFlyTo(baseOption.boundingBox);\n }\n\n handleInputChange(field, value);\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 return (\n - \n { _.map(transitionClassesData, (item) => {\n return (\n
\n \n { itemIsActive(item.id) ?
\n \n );\n }) }\n \n \n \n \n \n \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
\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 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_DATA = gql`\n {\n app @client {\n activeModule\n activeModuleContent\n headerIsVisible\n baseParams {\n classesViewMode\n activeClassTreeNodeIds\n activeObjectTreeNodeIds\n activeClassesLevelsListItems\n activeClassTreeOptionValue\n buffer\n }\n }\n }\n`\n\nexport const GET_MODULE_DATA = gql`\n query GetModulesData {\n modulesList {\n id\n key\n enabled\n isInBeta\n primaryColor\n secondaryColor\n iconUrl\n displayOrder\n\t\t\ti18nStrings {\n\t\t\t\tlanguage\n\t\t\t\tstringValue\n }\n\t\t\tsubmodules {\n id\n displayOrder\n key\n\t\t\t\tgeospatialObjectCategoryTree {\n id\n key\n geospatialObjectCategoryTreeLevels {\n id\n color\n positionInTree\n level\n parentId\n childrenIds\n i18nStrings {\n\t\t\t\t\t\t\tstringValue\n\t\t\t\t\t\t\tlanguage\n }\n\t\t\t\t\t\tgeometryCategory {\n\t\t\t\t\t\t\ti18nStrings {\n\t\t\t\t\t\t\t\tstringValue\n\t\t\t\t\t\t\t\tlanguage\n\t\t\t\t\t\t\t}\t\n\t\t\t\t\t\t}\n }\n i18nStrings {\n\t\t\t\t\t\tstringValue\n\t\t\t\t\t\tlanguage\n }\n }\n i18nStrings {\n\t\t\t\t\tlanguage\n\t\t\t\t\tstringValue\n }\n }\n }\n }\n`\n","export default [];\n","import React from 'react';\n\nimport styles from './Header.module.scss';\n\nexport default function ModuleIconComponent({\n moduleKey,\n}) {\n switch(moduleKey) {\n case 'coverage': {\n return (\n \n );\n }\n case 'coverage_quality': {\n return (\n \n );\n }\n case 'temporal_analysis': {\n return (\n \n );\n }\n case 'quality_of_pasture_data': {\n return (\n \n );\n }\n case 'deforestation': {\n return (\n \n );\n }\n case 'regeneration': {\n return (\n \n );\n }\n case 'infrastructure': {\n return (\n \n );\n }\n case 'irrigation': {\n return (\n \n );\n }\n case 'fire': {\n return (\n \n );\n }\n case 'scenarios': {\n return (\n \n );\n }\n case 'water': {\n return (\n \n );\n }\n case 'mining': {\n return (\n \n );\n }\n case 'sentinel': {\n return (\n \n );\n }\n case 'soil': {\n return (\n \n );\n }\n default: {\n return null;\n }\n };\n}\n","import React, { useEffect, useState, Fragment } from 'react';\nimport { withRouter, Link } from 'react-router-dom';\nimport classnames from 'classnames';\nimport { useApolloClient, useQuery } from '@apollo/react-hooks';\nimport { useIntl, FormattedMessage } from 'react-intl';\nimport _ from 'lodash';\n\nimport { withStyles } from '@material-ui/core/styles';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport AccountCircleIcon from '@material-ui/icons/AccountCircle';\nimport BarChartIcon from '@material-ui/icons/BarChart';\nimport BookmarkIcon from '@material-ui/icons/Bookmark';\nimport Button from '@material-ui/core/Button';\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\nimport ExpandLessIcon from '@material-ui/icons/ExpandLess';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport FilterListIcon from '@material-ui/icons/FilterList';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport TranslateIcon from '@material-ui/icons/Translate';\nimport ViewListIcon from '@material-ui/icons/ViewList';\nimport TableChartIcon from '@material-ui/icons/TableChart';\n\nimport TabList from '../../components/TabList';\n\nimport BaseForm from './components/BaseForm';\nimport Classes from './components/Classes';\nimport GenericClasses from './components/GenericClasses';\nimport GeospatialObjects from './components/GeospatialObjects';\nimport TransitionBaseForm from './components/TransitionBaseForm';\nimport TransitionClasses from './components/TransitionClasses';\nimport QualityBaseForm from './components/QualityBaseForm';\nimport QualityClasses from './components/QualityClasses';\nimport PastureQualityCoverageClasses from './components/PastureQualityCoverageClasses';\nimport TranslateOptionsBox from './components/TranslateOptionsBox';\nimport InstitutionalMenu from './components/InstitutionalMenu';\nimport AccountMenu from './components/AccountMenu';\n\nimport {\n GET_BASE_DATA,\n GET_MODULE_DATA\n} from './query';\n\nimport useFormatMessage from '../../../../hooks/useFormatMessage';\nimport useWindowSize from '../../../../hooks/useWindowSize';\nimport usePrevious from '../../../../hooks/usePrevious';\n\nimport logo from './logo.svg';\nimport logoFire from './logo_mapbiomas_fire.png';\nimport logoSentinelPT from './10-metros-pt-br-horizontal.svg';\nimport logoSentinelEN from './10-metros-en-horizontal.svg';\n\nimport initialBaseParams from '../../../../data/initialBaseParams';\nimport mapActiveModuleToDefaultParams from '../../../../data/mapActiveModuleToDefaultParams';\nimport customClientModules from '../../../../data/customClientModules';\n\nimport customClient from '../../../../core/custom-apollo-client';\n\nimport ModuleIconComponent from './ModuleIconComponent';\n\nimport styles from './Header.module.scss';\n\nconst NEW_MODULE_KEYS = [];\n\nconst BETA_MODULE_KEYS = [\n 'sentinel',\n 'soil',\n];\n\nfunction hexToRgb(hex) {\n // Expand shorthand form (e.g. \"03F\") to full form (e.g. \"0033FF\")\n const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n hex = hex.replace(shorthandRegex, function(m, r, g, b) {\n return r + r + g + g + b + b;\n });\n\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n } : null;\n}\n\n// TODO: Remove these mappers when the saved user maps are updated with the new keys\n\nfunction mapNewModuleListKeyToOldKey(key) {\n return {\n coverage: 'coverage',\n quality_of_pasture_data: 'quality_of_pasture_data',\n }[key] || key;\n}\n\nfunction mapOldModuleListKeyToNewKey(key) {\n return {\n landUseAndCover: 'coverage',\n pastureQuality: 'quality_of_pasture_data',\n }[key] || key;\n}\n\nfunction getModuleItemClassName(key) {\n const parsedKey = mapNewModuleListKeyToOldKey(key);\n\n const mapModuleKeyToClassName = {\n 'coverage': 'menuBarListItemCoverage',\n 'coverage_quality': 'menuBarListItemCoverageQuality',\n 'temporal_analysis': 'menuBarListItemTrajectories',\n 'quality_of_pasture_data': 'menuBarListItemQualityOfPastureData',\n 'deforestation': 'menuBarListItemDeforestation',\n 'regeneration': 'menuBarListItemRegeneration',\n 'infrastructure': 'menuBarListItemInfrastructure',\n 'irrigation': 'menuBarListItemIrrigation',\n 'fire': 'menuBarListItemFire',\n 'scenarios': 'menuBarListItem',\n 'mining': 'menuBarListItemMining',\n 'sentinel': 'menuBarListItemSentinel',\n 'soil': 'menuBarListItemSoil',\n };\n\n return mapModuleKeyToClassName[parsedKey];\n}\n\nconst mapLocaleKeyToAbbreviation = {\n 'pt-BR': 'PT',\n 'en': 'EN',\n 'id': 'ID',\n};\n\nconst CustomTooltip = withStyles(() => ({\n tooltip: {\n padding: '8px 12px',\n fontSize: 14,\n fontWeight: 400,\n color: 'white',\n backgroundColor: '#656565',\n boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.12)',\n },\n arrow: {\n color: '#656565'\n },\n}))(Tooltip);\n\nconst TOP_PADDING = 80;\nconst TOP_PADDING_LARGE = 176;\nconst BOTTOM_PADDING = 93;\n\nfunction Header({\n history,\n height,\n iframeMode,\n}) {\n const isMobile = useMediaQuery('(max-width: 768px)');\n const locale = localStorage.getItem('locale') || 'id';\n const formatMessage = useFormatMessage();\n const windowSize = useWindowSize();\n const client = useApolloClient();\n const [navIsVisible, setNavIsVisible] = useState(false);\n const [menuIsVisible, setMenuIsVisible] = useState(false);\n const [accountMenuIsVisible, setAccountMenuIsVisible] = useState(false);\n const [translateBoxAnchorEl, setTranslateBoxAnchorEl] = useState(null);\n const [showFireModeContent, setShowFireModeContent] = useState(null);\n const [showInfrastructureModeContent, setShowInfrastructureModeContent] = useState(null);\n const [showIrrigationModeContent, setShowIrrigationModeContent] = useState(null);\n const [showDeforestationModeContent, setShowDeforestationModeContent] = useState(null);\n const { data: baseData } = useQuery(GET_BASE_DATA);\n const { data: modulesData } = useQuery(GET_MODULE_DATA);\n const activeModule = _.get(baseData, 'app.activeModule');\n const prevActiveModule = usePrevious(activeModule);\n const activeModuleContent = _.get(baseData, 'app.activeModuleContent');\n const headerIsVisible = _.get(baseData, 'app.headerIsVisible');\n const buffer = _.get(baseData, 'app.baseParams.buffer');\n const activeClassTreeOptionValue = _.get(baseData, 'app.baseParams.activeClassTreeOptionValue');\n const isWaterIframe = activeModuleContent === 'water:water_iframe';\n const isFireIframe = activeModuleContent === 'fire:fire_iframe';\n const isInfrastructureIframe = activeModuleContent === 'infrastructure:infrastructure_iframe';\n const isIrrigationIframe = activeModuleContent === 'irrigation:irrigation_iframe';\n\n const modulesList = _.get(modulesData, 'modulesList');\n const activeModuleData = _.find(modulesList, { key: mapOldModuleListKeyToNewKey(activeModule) });\n const submodulesList = _.get(activeModuleData, 'submodules');\n\n const updateClientAppState = (params) => {\n client.writeData({\n data: {\n app: {\n __typename: 'AppState',\n ...params\n }\n }\n });\n };\n\n const updateClientAppBaseParamsState = (params) => {\n updateClientAppState({\n baseParams: {\n __typename: 'AppBaseParamsState',\n ...params\n }\n });\n };\n\n const handleActiveModuleChange = (key) => {\n if (iframeMode) {\n history.push('/');\n }\n\n const defaultParams = mapActiveModuleToDefaultParams[key] || {};\n const baseParams = _.get(defaultParams, 'baseParams');\n\n updateClientAppState({\n activeModule: key,\n ...(baseParams ? _.omit(defaultParams, 'baseParams') : defaultParams)\n });\n\n if (baseParams) {\n updateClientAppBaseParamsState(baseParams);\n }\n\n if (_.includes(customClientModules, prevActiveModule) || _.includes(customClientModules, key)) {\n updateClientAppBaseParamsState(initialBaseParams);\n }\n\n setShowFireModeContent(false);\n setShowInfrastructureModeContent(false);\n setShowIrrigationModeContent(false);\n toggleNav();\n };\n\n const toggleVisibility = () => {\n updateClientAppState({ headerIsVisible: !headerIsVisible });\n };\n\n const toggleNav = () => setNavIsVisible(!navIsVisible);\n\n const toggleMenu = () => setMenuIsVisible(!menuIsVisible);\n\n const toggleAccountMenu = () => {\n const isOpen = !!accountMenuIsVisible;\n\n if (isOpen && (accountMenuIsVisible === 'myMaps' || accountMenuIsVisible === 'newMap')) {\n setAccountMenuIsVisible('default');\n } else if (isOpen) {\n setAccountMenuIsVisible(null);\n } else {\n setAccountMenuIsVisible('default');\n }\n };\n\n const closeAccountMenu = () => {\n setAccountMenuIsVisible(null);\n };\n\n const handleShowClassInfo = (id) => {\n if (isMobile) {\n updateClientAppState({\n headerIsVisible: false,\n showClassInfo: id\n });\n } else {\n updateClientAppState({\n showClassInfo: id\n });\n }\n };\n\n const handleShowDashboardInfo = () => {\n if (!isMobile) {\n updateClientAppState({\n showDashboardInfo: true,\n });\n } else {\n updateClientAppState({\n showDashboardInfo: true,\n headerIsVisible: false,\n mapPointInfo: null,\n showClassInfo: null,\n });\n }\n };\n\n const handleTabChange = (newValue) => {\n let appParams = {\n activeModuleContent: newValue,\n showBeforeAndAfterMosaic: false,\n };\n\n updateClientAppState(appParams);\n };\n\n const handleMapFlyToChange = (boundingBox) => {\n updateClientAppState({ mapFlyTo: boundingBox });\n };\n\n const handleAddNewMap = () => {\n setAccountMenuIsVisible('newMap');\n };\n\n const handleShowMyMaps = () => {\n setAccountMenuIsVisible('myMaps');\n };\n\n const renderTabContent = () => {\n const classesViewMode = _.get(baseData, 'app.baseParams.classesViewMode');\n\n switch(activeModuleContent) {\n case 'coverage:coverage_main': {\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 { _.size(parsedTabList) > 1 &&\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 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\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') || 'id';\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\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') || 'id';\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 './leaflet-side-by-side.css';\n\nvar mapWasDragEnabled\nvar mapWasTapEnabled\n\n// Leaflet v0.7 backwards compatibility\nfunction on (el, types, fn, context) {\n types.split(' ').forEach(function (type) {\n L.DomEvent.on(el, type, fn, context)\n })\n}\n\n// Leaflet v0.7 backwards compatibility\nfunction off (el, types, fn, context) {\n types.split(' ').forEach(function (type) {\n L.DomEvent.off(el, type, fn, context)\n })\n}\n\nfunction getRangeEvent (rangeInput) {\n return 'oninput' in rangeInput ? 'input' : 'change'\n}\n\nfunction cancelMapDrag () {\n mapWasDragEnabled = this._map.dragging.enabled()\n mapWasTapEnabled = this._map.tap && this._map.tap.enabled()\n this._map.dragging.disable()\n this._map.tap && this._map.tap.disable()\n}\n\nfunction uncancelMapDrag (e) {\n this._refocusOnMap(e)\n if (mapWasDragEnabled) {\n this._map.dragging.enable()\n }\n if (mapWasTapEnabled) {\n this._map.tap.enable()\n }\n}\n\n// convert arg to an array - returns empty array if arg is undefined\nfunction asArray (arg) {\n return (arg === 'undefined') ? [] : Array.isArray(arg) ? arg : [arg]\n}\n\nfunction noop () {}\n\nL.Control.SideBySide = L.Control.extend({\n options: {\n thumbSize: 42,\n padding: 0\n },\n\n initialize: function (leftLayers, rightLayers, options) {\n this.setLeftLayers(leftLayers)\n this.setRightLayers(rightLayers)\n L.setOptions(this, options)\n },\n\n getPosition: function () {\n var rangeValue = this._range.value\n var offset = (0.5 - rangeValue) * (2 * this.options.padding + this.options.thumbSize)\n return this._map.getSize().x * rangeValue + offset\n },\n\n setPosition: noop,\n\n includes: L.Evented.prototype || L.Mixin.Events,\n\n addTo: function (map) {\n this.remove()\n this._map = map\n\n var container = this._container = L.DomUtil.create('div', 'leaflet-sbs', map._controlContainer)\n\n this._divider = L.DomUtil.create('div', 'leaflet-sbs-divider', container)\n\n L.DomUtil.create('div', 'leaflet-sbs-divider-control', this._divider)\n\n var range = this._range = L.DomUtil.create('input', 'leaflet-sbs-range', container)\n range.type = 'range'\n range.min = 0\n range.max = 1\n range.step = 'any'\n range.value = 0.5\n range.style.paddingLeft = range.style.paddingRight = this.options.padding + 'px'\n this._addEvents()\n this._updateLayers()\n this._updateLabels()\n return this\n },\n\n remove: function () {\n if (!this._map) {\n return this\n }\n if (this._leftLayer) {\n this._leftLayer.getContainer().style.clip = ''\n }\n if (this._rightLayer) {\n this._rightLayer.getContainer().style.clip = ''\n }\n this._removeEvents()\n L.DomUtil.remove(this._container)\n\n this._map = null\n\n return this\n },\n\n getLeftLayer: function() {\n return this._leftLayer;\n },\n\n getRightLayer: function() {\n return this._rightLayer;\n },\n\n setLeftLayers: function (leftLayers) {\n this._leftLayers = asArray(leftLayers)\n this._updateLayers()\n return this\n },\n\n setRightLayers: function (rightLayers) {\n this._rightLayers = asArray(rightLayers)\n this._updateLayers()\n return this\n },\n\n _updateClip: function () {\n var map = this._map\n var nw = map.containerPointToLayerPoint([0, 0])\n var se = map.containerPointToLayerPoint(map.getSize())\n var clipX = nw.x + this.getPosition()\n var dividerX = this.getPosition()\n\n this._divider.style.left = dividerX + 'px'\n this.fire('dividermove', {x: dividerX})\n var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)'\n var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)'\n if (this._leftLayer) {\n this._leftLayer.getContainer().style.clip = clipLeft\n }\n if (this._rightLayer) {\n this._rightLayer.getContainer().style.clip = clipRight\n }\n },\n\n _updateLayers: function () {\n if (!this._map) {\n return this\n }\n var prevLeft = this._leftLayer\n var prevRight = this._rightLayer\n this._leftLayer = this._rightLayer = null\n this._leftLayers.forEach(function (layer) {\n if (this._map.hasLayer(layer)) {\n this._leftLayer = layer\n }\n }, this)\n this._rightLayers.forEach(function (layer) {\n if (this._map.hasLayer(layer)) {\n this._rightLayer = layer\n }\n }, this)\n if (prevLeft !== this._leftLayer) {\n prevLeft && this.fire('leftlayerremove', {layer: prevLeft})\n this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer})\n }\n if (prevRight !== this._rightLayer) {\n prevRight && this.fire('rightlayerremove', {layer: prevRight})\n this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer})\n }\n this._updateClip()\n },\n\n _updateLabels: function () {\n if (this._leftLayer) {\n this._divider.setAttribute('data-from-year', this._leftLayer.options.year);\n }\n\n if (this._rightLayer) {\n this._divider.setAttribute('data-to-year', this._rightLayer.options.year);\n }\n },\n\n _addEvents: function () {\n var range = this._range\n var map = this._map\n if (!map || !range) return\n map.on('move', this._updateClip, this)\n map.on('layeradd layerremove', this._updateLayers, this)\n on(range, getRangeEvent(range), this._updateClip, this)\n on(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)\n on(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)\n },\n\n _removeEvents: function () {\n var range = this._range\n var map = this._map\n if (range) {\n off(range, getRangeEvent(range), this._updateClip, this)\n off(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)\n off(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)\n }\n if (map) {\n map.off('layeradd layerremove', this._updateLayers, this)\n map.off('move', this._updateClip, this)\n }\n }\n})\n\nL.control.sideBySide = function (leftLayers, rightLayers, options) {\n return new L.Control.SideBySide(leftLayers, rightLayers, options)\n}\n\nexport default L.Control.SideBySide\n","import React, { useEffect, useRef, useState } from 'react';\nimport {\n GeoJSON,\n Map,\n Marker,\n ScaleControl,\n TileLayer,\n WMSTileLayer,\n ZoomControl\n} from 'react-leaflet';\nimport { BoxZoomControl } from 'react-leaflet-box-zoom';\nimport _ from 'lodash';\nimport L from 'leaflet';\nimport classnames from 'classnames';\nimport numbro from 'numbro';\n\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport LandscapeIcon from '@material-ui/icons/Landscape';\nimport NotListedLocationIcon from '@material-ui/icons/NotListedLocation';\nimport OpacityIcon from '@material-ui/icons/Opacity';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport LibraryBooksIcon from '@material-ui/icons/LibraryBooks';\n\nimport useFormatMessage from '../../../../../../hooks/useFormatMessage';\nimport usePrevious from '../../../../../../hooks/usePrevious';\n\nimport styles from './MapCanvas.module.scss';\n\nimport baseLayersData from '../../../../../../data/baseLayers';\nimport baseMapsData from '../../../../../../data/baseMaps';\nimport customClientModules from '../../../../../../data/customClientModules';\n\nimport CoordinatesInfo from './components/CoordinatesInfo';\nimport MapCustomEvents from './components/MapCustomEvents';\n\nimport './leaflet-side-by-side';\n\ndelete L.Icon.Default.prototype._getIconUrl;\n\nL.Icon.Default.mergeOptions({\n iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),\n iconUrl: require('leaflet/dist/images/marker-icon.png'),\n shadowUrl: require('leaflet/dist/images/marker-shadow.png')\n});\n\nconst useStyles = makeStyles((theme) => ({\n mapButtonActive: {\n backgroundColor: '#F1F1F1',\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 HEADER_HEIGHT = 0;\nconst FOOTER_HEIGHT = 30;\nconst EXTERNAL_ELEMENTS_HEIGHT = HEADER_HEIGHT + FOOTER_HEIGHT;\n\nconst CONFIG_DEFAULT = {\n lat: -14.392118,\n lng: -56.250000,\n zoom: 4,\n minZoom: 4,\n maxZoom: 19\n};\n\nconst CUSTOM_MAP_URL = 'https://brasil.mapserver.mapbiomas.org';\n\nexport default function MapCanvas({\n activeBaseMap,\n activeModule,\n activeModuleContent,\n activeYear,\n baseParams,\n carFeature,\n countryTerritoryId,\n defaultClassTreeLevelsList,\n flyTo,\n isMobile,\n mapPointInfo,\n activeLayers,\n layersOpacity,\n height,\n headerIsVisible,\n configOptions = {},\n isOnFreezeMode = false,\n onSearchPointClick = () => {},\n showBeforeAndAfterMosaic,\n showDashboardInfo,\n setCoverageTutorial,\n onMoveEnd,\n onFlyToReset = () => {},\n mapboxMode,\n transitionClassTreeNodeId,\n}) {\n const MAP_URL = !_.includes(customClientModules, activeModule) ? process.env.REACT_APP_WMS_BASE_URL : CUSTOM_MAP_URL;\n const classes = useStyles();\n let mapRef = useRef();\n let zoomControlRef = useRef();\n const formatMessage = useFormatMessage();\n const [windowHeight, setWindowHeight] = useState(window.innerHeight - EXTERNAL_ELEMENTS_HEIGHT);\n const [mouseCoordinates, setMouseCoordinates] = useState(null);\n const [isOnBoxZoomMode, setIsOnBoxZoomMode] = useState(false);\n const [isOnPointSearchMode, setIsOnPointSearchMode] = useState(false);\n const [isOnGeographicalRelief, setIsOnGeographicalRelief] = useState(true);\n const config = _.assign({}, CONFIG_DEFAULT, configOptions);\n const activeBaseMapData = _.find(baseMapsData, { id: activeBaseMap });\n const yearRange = _.get(baseParams, 'yearRange');\n let leftSideMosaicLayer, rightSideMosaicLayer, sideBySideControl;\n const mapboxModePrev = usePrevious(mapboxMode);\n\n function updateHeight() {\n setWindowHeight(window.innerHeight - EXTERNAL_ELEMENTS_HEIGHT);\n\n if (mapRef.current) {\n mapRef.current.leafletElement.invalidateSize();\n }\n }\n const debouncedUpdateHeight = _.debounce(updateHeight, 500);\n\n function handleBoxZoomClick() {\n setIsOnBoxZoomMode(true);\n }\n\n useEffect(() => {\n setTimeout(() => {\n window.addEventListener('resize', debouncedUpdateHeight);\n\n const boxZoomButton = document.getElementById('box-zoom-button');\n\n if (boxZoomButton) {\n boxZoomButton.addEventListener('click', handleBoxZoomClick);\n }\n }, 3000);\n\n return () => {\n window.removeEventListener('resize', debouncedUpdateHeight);\n\n const boxZoomButton = document.getElementById('box-zoom-button');\n\n if (boxZoomButton) {\n boxZoomButton.removeEventListener('click', handleBoxZoomClick);\n }\n };\n }, []);\n\n useEffect(() => {\n if (mapRef && flyTo && _.isArray(flyTo)) {\n if (_.isArray(_.first(flyTo))) {\n mapRef.current.leafletElement.fitBounds(flyTo);\n } else {\n mapRef.current.leafletElement.flyTo(flyTo, 10);\n }\n onFlyToReset();\n }\n }, [flyTo]);\n\n useEffect(() => {\n if (mapboxModePrev && !mapboxMode && mapRef.current && !_.isEmpty(configOptions)) {\n const { lat, lng, zoom } = configOptions;\n\n mapRef.current.leafletElement.panTo([lat, lng], zoom);\n }\n }, [mapboxModePrev, mapboxMode]);\n\n useEffect(() => {\n const url = _.get(activeBaseMapData, 'props.url');\n const layerName = _.get(activeBaseMapData, 'props.layers');\n\n if (showBeforeAndAfterMosaic && url && layerName) {\n const [firstYear, lastYear] = _.split(yearRange, '-');\n const classTreeLevelsListIds = _.join(_.map(defaultClassTreeLevelsList, 'id'), ',');\n\n leftSideMosaicLayer = L.tileLayer\n .wms(url, {\n format: 'image/png',\n layers: layerName,\n transparent: true,\n tileType: 'wms',\n class_tree_node_ids: classTreeLevelsListIds,\n territory_ids: countryTerritoryId,\n year: parseInt(firstYear),\n zIndex: 200,\n })\n .addTo(mapRef.current.leafletElement);\n\n rightSideMosaicLayer = L.tileLayer\n .wms(url, {\n format: 'image/png',\n layers: layerName,\n transparent: true,\n tileType: 'wms',\n class_tree_node_ids: classTreeLevelsListIds,\n territory_ids: countryTerritoryId,\n year: parseInt(lastYear),\n zIndex: 200,\n })\n .addTo(mapRef.current.leafletElement);\n\n sideBySideControl = L.control.sideBySide(leftSideMosaicLayer, rightSideMosaicLayer)\n .addTo(mapRef.current.leafletElement);\n\n return () => {\n mapRef.current.leafletElement.removeLayer(sideBySideControl.getLeftLayer());\n mapRef.current.leafletElement.removeLayer(sideBySideControl.getRightLayer());\n sideBySideControl.remove();\n };\n }\n }, [activeBaseMapData, showBeforeAndAfterMosaic, layersOpacity, yearRange]);\n\n const renderBaseMap = () => {\n const classTreeLevelsListIds = _.join(_.map(defaultClassTreeLevelsList, 'id'), ',');\n\n if (showBeforeAndAfterMosaic) {\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(baseLayersData, (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 intervals = [\n [1985, 1990],\n [1990, 1995],\n [1995, 2000],\n [2000, 2005],\n [2005, 2010],\n [2010, 2015],\n [2015, 2020],\n\n [2000, 2010],\n [2010, 2020],\n [1990, 2000],\n\n [1985, 2022],\n [1985, 2000],\n\n [2000, 2022],\n [1992, 2002],\n [2002, 2012],\n [2012, 2022],\n];\n\nexport default function YearTimelineMultiple({\n headerIsVisible,\n value: initialValue,\n onChange = () => {},\n}) {\n const intl = useIntl()\n\n const yearList = _.sortBy(_.uniq(_.flatten(intervals)));\n const startYearsList = _.sortBy(_.uniq(_.map(intervals, (range) => _.first(range))));\n\n const classes = useStyles();\n const { data: baseData } = useQuery(GET_BASE_DATA);\n\n const [startValue, setStartValue] = useState(1985);\n const [endValue, setEndValue] = useState(2022);\n\n const filteredIntervals = _.filter(intervals, (range) => _.first(range) === startValue);\n const endYearsList = _.sortBy(_.uniq(_.map(filteredIntervals, (range) => _.last(range))));\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(intervals, (range) => _.first(range) === newValue);\n const endYearsList = _.sortBy(_.uniq(_.map(filteredIntervals, (range) => _.last(range))));\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(intervals, (range) => _.first(range) === newValue);\n const endYearsList = _.sortBy(_.uniq(_.map(filteredIntervals, (range) => _.last(range))));\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({id: 'mapbiomas.timeline.selected_value'})}`;\n }\n\n return (\n \n
\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 ({ 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 { startValue } - { endValue }\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
\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: 0\n });\n const paramValue = `${ colorSpan(item.color) } ${ item.seriesName }: ${ valueLabel }`;\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: 0\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 isPercentage,\n categories = [],\n series = [],\n vertical = true,\n hideXAxisLabel = false,\n hasAvgMarkLine = false,\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 = 'Hectares';\n\n if (hasMillionValue) {\n yAxisName = 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 = yAxis;\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\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 customClient from '../../../../../../../../core/custom-apollo-client/custom-apollo-client';\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') || 'id';\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: clientType === 'custom' ? customClient : undefined\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: clientType === 'custom' ? customClient : undefined\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 = classTreeKey === 'mining_main' ||\n classTreeKey === 'quality_of_pasture_data_main' ||\n classTreeKey === 'regeneration_annual_by_class' ||\n classTreeKey === 'irrigation_main' ||\n classTreeKey === 'deforestation_annual_by_class';\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: 0\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 } (${ 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 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 const yAxisName = intl.formatMessage({id: 'mapbiomas.statistics.million_hectares'})\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: 25,\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) {\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\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 \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') || 'id';\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 territory\n territories {\n id\n label\n territoryTypeId\n territoryTypeLabel\n territoryBBox\n }\n classesViewMode\n activeClassTreeNodeIds\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 }\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\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 [carFeature, setCarFeature] = useState(null);\n const { data: baseData, loading: loadingBaseData } = useQuery(GET_BASE_DATA);\n const { data: territoriesCategoriesListData } = useQuery(GET_TERRITORIES_CATEGORIES_LIST);\n const { data: defaultClassTreeData } = useQuery(GET_CLASS_TREE_DATA, {\n variables: {\n classTreeKey: 'default'\n }\n });\n const defaultClassTreeLevelsList = _.get(defaultClassTreeData, 'classTreeByKey[0].mvClassTreeLevelsUi');\n const [\n loadCountryTerritoryData,\n {\n data: countryTerritoryListData,\n }\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(baseData, 'app.baseParams.activeClassTreeOptionValue');\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(baseData, 'app.transitionClassTreeNodeId');\n const territoryCategoriesList = _.get(territoriesCategoriesListData, 'territoryCategoriesList');\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(baseData, 'app.showBeforeAndAfterMosaic');\n const timelineLimitsRange = _.get(baseData, 'app.timelineLimitsRange');\n const mapPosition = _.get(baseData, 'app.mapPosition');\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 = loadingBaseData ||\n (prevLoadingBaseData && !loadingBaseData && !_.isEmpty(urlQueryParams));\n\n useEffect(() => {\n const confirmation = new URL(window.location.href).searchParams.get('confirmation');\n const login = new URL(window.location.href).searchParams.get('login');\n const passwordUpdate = new URL(window.location.href).searchParams.get('password_update');\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 activeModuleContent === moduleKey &&\n !isOnInitialRenderingWithQueryParams;\n }\n };\n\n if (checkModuleKeyCondition('coverage:coverage_main')) {\n updateClientAppState({\n activeBaseMap: 9,\n layersOpacity: 70,\n activeLayers: [],\n });\n } else if (checkModuleKeyCondition('quality_of_pasture_data:quality_of_pasture_data_main')) {\n updateClientAppState({\n activeBaseMap: 1,\n layersOpacity: 100,\n activeLayers: ['estados']\n });\n } else if (checkModuleKeyCondition('regeneration:regeneration_annual') || checkModuleKeyCondition('deforestation:deforestation_annual')) {\n updateClientAppState({\n activeBaseMap: 1,\n });\n } else if (checkModuleKeyCondition('irrigation:irrigation_main')) {\n updateClientAppState({\n activeBaseMap: 1,\n activeLayers: ['estados']\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: [2013, 2023],\n timelineLimitsRange: [2013, 2023],\n });\n } else if (checkModuleKeyCondition('fire:fire_annual')) {\n updateClientAppState({\n activeBaseMap: 1,\n activeYear: [2013, 2023],\n timelineLimitsRange: [2013, 2023],\n });\n } else if (checkModuleKeyCondition('fire:fire_frequency')) {\n updateClientAppState({\n activeBaseMap: 1,\n activeYear: [2013, 2023],\n timelineLimitsRange: [2013, 2023],\n });\n } else if (checkModuleKeyCondition('fire:fire_monthly')) {\n updateClientAppState({\n activeBaseMap: 1,\n activeYear: 2023,\n timelineLimitsRange: [2013, 2023],\n });\n } else if (checkModuleKeyCondition('temporal_analysis:temporal_analysis_number_of_classes')) {\n updateClientAppState({\n activeBaseMap: 1,\n activeYear: [1985, 2022],\n timelineLimitsRange: [1985, 2022],\n });\n } else if (checkModuleKeyCondition('deforestation:deforestation_accumulated')) {\n updateClientAppState({\n activeYear: [1986, 2020],\n timelineLimitsRange: [1986, 2020],\n });\n } else if (checkModuleKeyCondition('deforestation:deforestation_frequency')) {\n updateClientAppState({\n activeYear: [1986, 2020],\n timelineLimitsRange: [1986, 2020],\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 (!_.isArray(activeYear) && (activeYear < minYear || activeYear > maxYear)) {\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, { key: 'indonesia_limit' });\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 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 handleCarFeatureChange = (data) => {\n setCarFeature(data);\n };\n\n const TimelineComponent = activeModule !== 'temporal_analysis' ? YearTimeline : YearTimelineMultiple;\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\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') || 'id';\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 React from 'react';\n\nimport {\n BrowserRouter as Router,\n Route,\n Switch,\n} from 'react-router-dom';\n\nimport {\n Query\n} from 'react-apollo';\n\nimport {\n get,\n keys,\n map,\n concat,\n defaults,\n} from 'lodash';\n\nimport {\n GET_USER,\n GET_USER_ID,\n} from './queries';\n\nimport redirect from './redirect';\nimport AppContext from '../context/app-context';\n\nimport ConfirmationPage from '../../pages/ConfirmationPage';\nimport MapBiomasLandingPage from '../../pages/MapBiomasLandingPage';\nimport MapBiomasCreatePassword from '../../pages/MapBiomasCreatePassword';\nimport MapBiomasLogin from '../../pages/MapBiomasLogin';\nimport MapBiomasPasswordRecovery from '../../pages/MapBiomasPasswordRecovery';\nimport MapBiomasCreateAccount from '../../pages/MapbiomasCreateAccount';\nimport LoginToForum from '../../pages/LoginToForum';\nimport TerritoryDashboard from '../../pages/TerritoryDashboard';\n\nimport mapModuleToPathname from '../../data/mapModuleToPathname';\n\nconst modulesRoutes = map(keys(mapModuleToPathname), (pathname) => {\n return { path: pathname, component: MapBiomasLandingPage };\n});\n\nconst routes = {\n all: [\n { path: '/', component: MapBiomasLandingPage },\n { path: '/agua', component: MapBiomasLandingPage },\n { path: '/monitor-do-fogo', component: MapBiomasLandingPage },\n { path: '/pistas-de-pouso', component: MapBiomasLandingPage },\n { path: '/dinamica-dos-pivos', component: MapBiomasLandingPage },\n\n // Modules pathname routes\n ...modulesRoutes,\n\n { path: '/recuperar-senha', component: MapBiomasCreatePassword },\n { path: '/login', component: MapBiomasLogin },\n { path: '/esqueci-minha-senha', component: MapBiomasPasswordRecovery },\n { path: '/criar-minha-conta', component: MapBiomasCreateAccount },\n { path: '/confirmar-conta', component: ConfirmationPage },\n { path: '/dashboard-territorio', component: TerritoryDashboard },\n ],\n unauthenticated: [\n ],\n authenticated: [\n { path: '/discourse/sso', component: LoginToForum },\n ],\n};\n\nconst renderRoutes = ({ data, _loading }) => {\n let user = get(data, 'user', localStorage.getItem('token'));\n let routesToRender = user ? routes.authenticated : routes.unauthenticated;\n routesToRender = concat(routesToRender, routes.all);\n\n return (\n \n \n \n \n \n \n \n \n
\n \n \n \n { 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
\n );\n}\n","import toast from '../utils/toast';\n\nexport default function validatePassword(password, passwordConfirmation) {\n const specialCharacters = /[ `!@#$%^&*()_+\\-=\\[\\]{};':\"\\\\|,.<>\\/?~]/;\n\n if (password.length < 8) {\n toast('A senha precisa de ao menos 8 caracteres', 'error');\n return false;\n }\n\n if (!password.match(specialCharacters)) {\n toast('A senha precisa conter pelo menos 1 caracter especial', 'error');\n return false;\n }\n\n if (!password.match(/[A-Z]/)) {\n toast('A senha precisa conter pelo menos 1 caracter maiúsculo', 'error');\n return false;\n }\n\n if (!password.match(/[a-z]/)) {\n toast('A senha precisa conter pelo menos 1 caracter minúsculo', 'error');\n return false;\n }\n\n if (!password.match(/\\d/)) {\n toast('A senha precisa conter pelo menos 1 número', 'error');\n return false;\n }\n\n if (password !== passwordConfirmation) {\n toast('As senhas precisam ser iguais', 'error');\n return false;\n }\n\n return true;\n}\n","import { useEffect } from 'react';\n\nimport { request } from '../../utils/api';\n\nexport default function ConfirmationPage() {\n let token = null;\n\n const urlToken = new URL(window.location.href).searchParams.get('token')\n !!urlToken\n ? token = urlToken\n : window.location.href = '/';\n\n useEffect(() => {\n const payload = { token: urlToken };\n\n request('/users/confirm_account', {\n method: 'POST',\n body: JSON.stringify(payload)\n })\n .then(() => {\n window.location.href = '/?confirmation=true';\n })\n .catch(() => {\n toast('Ocorreu um erro.', 'error');\n });\n }, [])\n\n return null;\n}\n","import React from 'react'\n\nimport {\n Redirect\n} from 'react-router-dom'\nimport _ from 'lodash'\n\nexport default (path, generateExtraProps = (_props) => ({})) => (\n (props) => {\n let redirectPath = path\n if (_.isFunction(path)) {\n redirectPath = path(props)\n }\n\n return \n \n \n \n
\n \n
\n
\n