Merge pull request #594 from PEM-Humboldt/release/1.9.0

Release/1.9.0

.env

@@ -1,3 +1,10 @@
 REACT_APP_BACKEND_URL='http://localhost/rest-api'
 REACT_APP_GEOSERVER_URL='http://localhost/geoserver'
 REACT_APP_BACKEND_KEY='key'
+REACT_APP_ENVIRONMENT='develop|staging|production'
+REACT_APP_API_KEY=''
+REACT_APP_DOMAIN=''
+REACT_APP_PROJECT_ID=''
+REACT_APP_STORAGE_BUCKET=''
+REACT_APP_SENDER_ID=''
+REACT_APP_APP_ID=''

.gitignore

@@ -13,3 +13,4 @@ build
 !.yarn/sdks
 !.yarn/versions
 .pnp.*
+.parcel-cache

Dockerfile

@@ -1,6 +1,6 @@
 # Build stage
 FROM node:14.15 as build
-MAINTAINER Daniel Lopez "dlopez@humboldt.org.co"
+LABEL maintainer="dlopez@humboldt.org.co"
 USER node
 
 ENV NPM_CONFIG_LOGLEVEL warn
@@ -12,6 +12,10 @@ WORKDIR /home/node/app/packages/cbm-dashboard
 RUN yarn install
 RUN yarn run build-pkg
 
+WORKDIR /home/node/app/packages/indicators
+RUN yarn install
+RUN yarn run build-pkg
+
 WORKDIR /home/node/app
 RUN yarn install
 RUN yarn build

jsconfig.json

@@ -6,5 +6,5 @@
       "*": ["*"]
     }
   },
-  "exclude": ["node_modules", "static"]
+  "exclude": ["node_modules", "static", "build", "packages/**/node_modules"]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "biotablero",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
@@ -28,13 +28,15 @@
     "axios": "0.21.1",
     "cbm-dashboard": "1.0.0",
     "chart.js": "^2.8.0",
+    "indicators": "1.0.0",
     "leaflet": "1.4.0",
+    "leaflet-draw": "^1.0.4",
     "prop-types": "15.6.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-json-to-csv": "^1.0.4",
-    "react-leaflet": "2.0.0",
-    "react-masonry-component": "6.2.1",
+    "react-leaflet": "2.7.0",
+    "react-leaflet-draw": "0.19.0",
     "react-router-dom": "5.2.0",
     "react-scripts": "4.0.2",
     "react-spring": "^9.1.2",
@@ -66,6 +68,7 @@
   ],
   "private": true,
   "workspaces": [
-    "packages/cbm-dashboard"
+    "packages/cbm-dashboard",
+    "packages/indicators"
   ]
 }

packages/cbm-dashboard/package.json

@@ -12,8 +12,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-plotly.js": "^2.5.1",
-    "rollup-plugin-css-only": "^3.1.0"
+    "react-plotly.js": "^2.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
@@ -32,7 +31,8 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "parcel": "1.12.3",
     "prettier": "^2.2.1",
-    "rollup": "^2.39.0"
+    "rollup": "^2.39.0",
+    "rollup-plugin-css-only": "^3.1.0"
   },
   "scripts": {
     "dev": "parcel index.html",

packages/indicators/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-react"]
+}

packages/indicators/.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['airbnb', 'plugin:prettier/recommended', 'prettier/react'],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+};

packages/indicators/.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+.cache/
+dist/
+.env
+.DS_Store
+coverage/
+.vscode/
+.parcel-cache

packages/indicators/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 100
+}

packages/indicators/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Instituto de Investigación de Recursos Biológicos Alexander von Humboldt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/indicators/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Indicadores</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="src/index.js"></script>
+  </body>
+</html>

packages/indicators/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "indicators",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/App.js",
+  "dependencies": {
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
+    "firebase": "^9.3.0",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-masonry-component": "^6.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.4",
+    "@babel/preset-react": "^7.14.5",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "eslint": "^7.17.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "parcel": "^2.0.0-rc.0",
+    "prettier": "^2.3.2",
+    "rollup": "^2.59.0",
+    "rollup-plugin-css-only": "^3.1.0"
+  },
+  "scripts": {
+    "dev": "parcel index.html",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint \"src/**/*.{js,jsx}\"",
+    "format": "prettier -w \"src/*\"",
+    "build-pkg": "rollup -c",
+    "build-dev": "rollup -cw --no-watch.clearScreen"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "browserslist": [
+    "since 2017-06"
+  ]
+}

packages/indicators/rollup.config.js

@@ -0,0 +1,23 @@
+import { babel } from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import css from 'rollup-plugin-css-only';
+
+export default {
+  input: 'src/App.jsx',
+  output: [
+    {
+      dir: './dist',
+      format: 'cjs',
+      exports: 'named',
+      strict: false,
+    },
+  ],
+  plugins: [
+    nodeResolve({ extensions: ['.jsx', '.js'] }),
+    babel({ exclude: 'node_modules/**', babelHelpers: 'bundled' }),
+    commonjs(),
+    css({ output: 'bundle.css' }),
+  ],
+  external: ['react', 'react-dom'],
+};

packages/indicators/src/App.jsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+
+import CardManager from './app/CardManager';
+import TagManager from './app/TagManager';
+import MinusIcon from './components/MinusIcon';
+import PlusIcon from './components/PlusIcon';
+import useUpdateResults from './hooks/useUpdateResults';
+import { getTags } from './utils/firebase';
+
+import './main.css';
+
+const App = () => {
+  const [openFilter, setOpenFilter] = useState(true);
+  const [tags, setTags] = useState(new Map());
+  const [loadingTags, setLoadingTags] = useState(true);
+  const { loading: loadingData, result: cardsData, updateFilters } = useUpdateResults();
+
+  useEffect(async () => {
+    const tagsData = await getTags();
+    setTags(tagsData);
+    setLoadingTags(false);
+  }, []);
+
+  const filterData = (filters) => {
+    updateFilters(filters);
+  };
+
+  return (
+    <div className={`wrapperIndicators${openFilter ? '' : ' full-content'}`}>
+      <div className={`leftnav-title${openFilter ? '' : ' closed-filters'}`}>
+        <div className="card2">
+          <h3>
+            <button
+              className="openFilters"
+              title="Ocultar filtros"
+              type="button"
+              onClick={() => setOpenFilter(!openFilter)}
+            >
+              {openFilter ? (
+                <MinusIcon fontSize={30} color="#fff" />
+              ) : (
+                <PlusIcon fontSize={30} color="#fff" />
+              )}
+            </button>
+            <div className="text">Filtros de búsqueda</div>
+          </h3>
+          {loadingTags && (
+            <div style={{ color: '#fff', margin: '5px 15px' }}>Cargando filtros...</div>
+          )}
+          {!loadingTags && tags.size <= 0 && (
+            <div style={{ color: '#fff', margin: '5px 15px' }}>No hay filtros disponibles</div>
+          )}
+        </div>
+      </div>
+      {!loadingTags && tags.size > 0 && (
+        <div className={`leftnav-filters${openFilter ? '' : ' hide'}`}>
+          <TagManager data={tags} filterData={filterData} />
+        </div>
+      )}
+      <div className="countD">
+        {loadingData && 'Cargando información...'}
+        {!loadingData && cardsData.length <= 0 && 'No hay indicadores'}
+        {!loadingData && cardsData.length > 0 && <>{cardsData.length} indicadores</>}
+      </div>
+      <div className="masonry-cards">
+        <CardManager cardsData={cardsData} />
+      </div>
+    </div>
+  );
+};
+
+export default App;

packages/indicators/src/app/CardManager.jsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import Masonry from 'react-masonry-component';
+
+import Card from './cardManager/Card';
+
+const masonryOptions = {
+  transitionDuration: 0,
+  itemSelector: '.indicatorCard',
+  columnWidth: 360,
+  horizontalOrder: true,
+};
+
+const CardManager = ({ cardsData }) => {
+  const [expanded, setExpanded] = useState(null);
+  const prevExpanded = useRef();
+
+  useEffect(() => {
+    prevExpanded.current = expanded;
+  }, [expanded]);
+
+  const isExpanded = (elem) => expanded?.id === elem.id;
+  const wasExpanded = (elem) => prevExpanded?.current?.id === elem.id;
+
+  return (
+    <Masonry options={masonryOptions} enableResizableChildren>
+      {cardsData.map((card) => {
+        return (
+          <Card
+            key={card.id}
+            item={card}
+            isExpanded={isExpanded(card)}
+            wasExpanded={wasExpanded(card)}
+            expandClick={() => {
+              if (isExpanded(card)) setExpanded(null);
+              else setExpanded(card);
+            }}
+          />
+        );
+      })}
+    </Masonry>
+  );
+};
+
+CardManager.propTypes = {
+  cardsData: PropTypes.arrayOf(Card.propTypes.item).isRequired,
+};
+
+export default CardManager;

packages/indicators/src/app/DownloadIcon.jsx

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { SvgIcon } from '@material-ui/core';
+
+const DownloadIcon = ({ color, fontSize }) => (
+  <SvgIcon style={{ color, fontSize }} width="23.507" height="25.751" viewBox="0 0 23.507 25.751">
+    <path
+      id="Path_25"
+      data-name="Path 25"
+      d="M4292.28-660.435h-5.152a.8.8,0,0,0-.8.8.8.8,0,0,0,.8.8h5.152c.275,0,.514.126.514.4v12.87a.641.641,0,0,1-.55.633h-19.235a.617.617,0,0,1-.521-.633v-12.87c0-.275.209-.4.484-.4h4.753a.8.8,0,0,0,.8-.8.8.8,0,0,0-.8-.8h-4.753a2.008,2.008,0,0,0-2.085,2v12.87a2.212,2.212,0,0,0,2.122,2.234h19.235a2.236,2.236,0,0,0,2.15-2.234v-12.87A2.033,2.033,0,0,0,4292.28-660.435Zm-15.951,5.341a.8.8,0,0,0,.158,1.121l4.994,3.764.017.012a1.932,1.932,0,0,0,1.123.359,1.93,1.93,0,0,0,1.121-.358l5.023-3.777a.8.8,0,0,0,.159-1.121.819.819,0,0,0-1.136-.159l-4.4,3.294v-16.327a.8.8,0,0,0-.8-.8.8.8,0,0,0-.8.8v16.334l-4.36-3.3A.777.777,0,0,0,4276.329-655.094Z"
+      transform="translate(-4270.887 669.081)"
+      fill={color}
+    />
+  </SvgIcon>
+);
+
+DownloadIcon.propTypes = {
+  color: PropTypes.string,
+  fontSize: PropTypes.number,
+};
+
+DownloadIcon.defaultProps = {
+  color: '',
+  fontSize: 19,
+};
+
+export default DownloadIcon;