Awesome

Resource Watch 🌍👓

Resource Watch features hundreds of data sets all in one place on the state of the planet’s resources and citizens. Users can visualize challenges facing people and the planet, from climate change to poverty, water risk to state instability, air pollution to human migration, and more.

Requirements

Native execution requires the following:

• Nodejs v14
• yarn
• RW API
• Redis (optional)

There are included Dockerfile and docker compose configuration files that may make it easier to run the application locally. See the Docker installation instructions for further details.

Installation

Be sure you are using the correct Nodejs version. We recommend using NVM to handle different Node versions.

Begin by installing the necessary nodejs packages, using yarn:

yarn

You also need to specify the necessary environment variables - check the corresponding section for more details.

To start the application in development mode, use the built-in development web server:

yarn dev # runs the development server

The application will be served in http://localhost:3000/.

Production build

Running the application in a production environment is a two-step process:

• Preprocessing the existing code and generating pre-renders of each page
• Launch a web server to serve said pages

This can be achieved using the following commands:

yarn build
yarn start

Environment variables

Before running the project for first time, be it for development, testing or production, you need to specify the correct values for key environment variables (env vars) used by the project.

Before deep-diving into the env var list, here are a few key concepts that you should keep in mind at all times when manipulating env vars:

• Most of the env var logic is based on Next.js env var logic which we strongly recommend you read.
• Most of these values aim at configuring the behavior of the application itself, but they may also be used during testing to cross-check the logic (for example, NEXT_PUBLIC_WRI_API_URL is used in the tests to validate that the application makes the requests to the correct address).

If you want to customize these variables for your local environment, the recommended way is creating a .env.local file.

Troubleshooting 🤔

You might run into some problems installing dependencies:

Cairo / Canvas

If the installation fails at the point where it installs canvas, you may want to take a look at this.

Installation (Docker) 🐳

Note that if you would like to develop using both Docker and native execution, you should follow the native installation instructions first. If you use Docker first and subsequently want to use native execution, you may need to delete or chown the node_modules folder in order for local installation to succeed. Docker should otherwise largely ignore the contents of the node_modules folder, but if you delete it while the container is running, you may need to stop and restart the container.

Assuming you have Docker already installed, the following steps should result in the application running locally on port 3000:

1. Copy the appropriate .env file: cp .env.development .env
2. Build the container: docker-compose -f docker-compose-develop.yml build
3. Launch the application: docker-compose -f docker-compose-develop.yml up

Architecture 📂

The application is built on top of Next.js - a framework for server-rendered React apps. Next provides a zero-setup webpack build ready to develop along a express server to run the application and SASS styles compilation.

Folder structure

Resource Watch application is split into the next main folders:

• pages
• layout
• components
• modules
• redactions (legacy)
• selectors (legacy)
• css
• hooks
• constants
• services
• utils
• public

./pages

Apart from the custom pages, there are several pages defined by Next will see below:

_app

The page of pages. All ready will inherit from this one, so keep in mind this. Resource Watch's pages are connect to redux thanks to this file. It also sets some states and fetches used in the whole app. You can find more info here.

_document

Contains the definition of how the app will be rendered. You can find more info here.

_error

Fallback page where the app leads if there has been an error, or the route doesn't exit. It can be customized. You can find more info here.

./layouts

Layouts are the second component to be loaded through the page. They contain all components that will be displayed in the page. Layouts do not fetch data, they wait for it. Inner components could ask for data though.

Layouts should follow the same folder structure as pages. For example: if you need created your myawesome page in pages/app/myawesome, the layout for this page should be placed in layouts/app/myawesome and so on.

./components

Every component will be contained in its own folder with its name. A basic component will contain the component itself (component.js) and an entrypoint to it (index.js). If the component needs access to the store, we will provide it here, otherwise we will just import the component. Additional files such as constants.js (component-scoped constants) and others.

./components/sidebar/
   ./constants.js (not mandatory)
   ./component.js (mandatory)
   ./index.js (mandatory)

Try to make stateless component (unless it really needs it). This will make components easier to track and reuse.

./modules

Contains all redux modules used in the application. Right now, there are components with its own module inside the component folder: try to avoid this behaviour. Keeping modules per component will increase the size of the store and make it harder to handle in the long term.

Usually modules are composed by, at least, three files: actions, reducers, initial-state and its corresponding index entrypoint file. To export it, just add it in modules/index, you will notice we use redux-tools to handle the modules.

Legacy note: there is a folder named ./redactions that also contains redux modules not handled with redux-tools. This folder is still in use, but the intention is to move everything and organise it according redux-tools specs.

./redactions

Legacy folder containing redux modules written in a way not supported by redux-tools. Any new module should be placed in ./modules.

./selectors

This is a legacy folder. Still in use. Selectors must be used in component's scope. Using them globally will produce the loose of ability of caching. You can have more info here.

css

Contains TailwindCSS directives, third-party styles and global styles.

Legacy note: styles coming from places like components or layout should be removed eventually and replaced with TailwindCSS classes. This is a workaround to keep all styles loaded from a single place without overriding the original ones.

./constants

Constants are variables available across the application. They can be used anywhere without exception. When you are about to add a new one here, please keep in mind the scope of this/these constants and if they are worth it to place here or inside the component is going to use them.

As constants, they must be written in uppercase and using Snake Case notation. Example: MY_AWESOME_CONSTANT

./hooks

Contains hooks used along the application. These hooks must be agnostic.

./services

Services are in charge of connecting the application with external APIs/other services. Every service contains a set of fetches (usually based on CRUD), it's possible to extend them if needed, but take into account there can't be any app-related logic here. Every fetch should be able to be used in any context. TLDR: make services agnostic.

Services are based on Axios to manage XMLHttpRequests/HTTP requests.

Services are split into entities (most of them coming from WRI API, feel free to create a new one if needed. Every fetch must be documented. You can found more info about it in the documentation section.

Legacy note: you will find services as classes with custom options. The intention is to get rid of these classes and use standalone functions able to perform the desired fetch. Also, you will find fetches performed with isomorphic-fetch, replace it with axios whenever you can.

./utils

Contains functions that make thing easier and are used across the app. Like constants, think about the scope of your util before implementing it here, perhaps just adding it at component's level is enough.

./public

Folder to serve static files. It's accessible everywhere.

Routing

Resource Watch uses NextJS Dynamic Routes.

App State Management 🌅

Resource Watch uses Redux along to next-redux-wrapper to manage the global application state. With next 7.0 is not necessary anymore to wrap every page to access to the store. Wrapping _app is enough, rest of pages will access to the store like the rest of your components.

To interact with React components, Resource Watch uses react-redux. While the existing connect API is still around, it is recommended to move to hooks.

Data environments

Resource Watch handles data based on the application environment and the data environments provided by WRI API. As of date, there are three application environments:

• staging: environment to test new features. Staging allows the user to see all data but it only allows to modify data whose env attribute is set to staging. Data with env values staging or production will be visible but users will not be able to modify those objects that have a env: production value. Any resource created in staging will be set with staging environment by default unless it is promoted to other data environments.
• preproduction: environment to preview production data. Preproduction allows the user to see env: preproduction and env: production data but only data with env: preproduction can be modified. Any resource created in preproduction will be set to env: preproduction by default unless it is promoted/demoted to other data environments.
• production: production site, visible to the general public. Only data with env: production will be shown and modifiable here. Also, data created here will be set to env: production by default.

Any environment can promote/demote data with some limitations, e.g. an user can create a resource in the staging site and promote its environment to production. After this, the user will not be able to modify that resource in the staging site as it is off limits: any modification will have to be done in upper environments such as preproduction or production.

The application uses three environmental variables to handle these operations: NEXT_PUBLIC_API_ENV, NEXT_PUBLIC_ENVS_SHOW and NEXT_PUBLIC_ENVS_EDIT. For more information about them refer to Environment variables section.

Authentication 🚫

Authentication is based on the RW API user management and handled by NextAuth framework.

Optimization 🔎

Bundle Analyzer

@next/bundle-analyzer is a tool that creates an interactive treemap visualization of the contents of all your bundles.

To run it: yarn analyze.

It will run the application in production build (makes a yarn build internally) and open a tab in your browser displaying the bundles treemap.

Storybook 📚

Development

To run Storybook in development run the following processes separately:

	# TailwindCSS will compile the styles and generate a new stylesheet used by Storybook and will update it if needed
	yarn tailwindcss:watch

	# runs Storybook server using the stylesheet previously created by TailwindCSS
	yarn storybook:dev

Note: if a new TailwindCSS class is added, Storybook will not be aware of it. To fix this, just refresh the page and Storybook will get the most updated stylesheet provided by TailwindCSS.

Production

To deploy Storybook run the following command:

	# TailwindCSS will generate a production-ready stylesheet and Storybook will generate the static files needed to be served.
	yarn storybook:build

Deploy 🛫

You will need access to Resource Watch Jenkins.

Merging to develop branch will deploy RW Staging automatically.

To deploy Resource Watch (production) you will need to access to Jenkins and deploy manually the master branch.

Testing

This repository contains both the frontend application for the Resource Watch website, as well as a small API to handle specific actions needed by the frontend application (authentication, server side validation, etc).

As such, testing is architectured in two parts (although some convenience commands exist to run both test suits simultaneously)

Frontend testing

Resource Watch uses Cypress to handle e2e tests. Tests are available in cypress/integrations folder.

There are two ways to run tests locally:

• yarn test will run Cypress in the command line. All the tests will run.
• yarn cy:open will open the Cypress GUI. This interface will show all tests available in the application and let you know any or all of them.

In both cases, do not forget to run your server locally before and be sure the baseUrl field in the cypress.json file matches with your server.

You can find more info about Cypress and its API in their docs.

Part of the frontend application relies on data provided by the backend API, which is only served if the user is authenticated. To support mocking user authentication across both applications, the frontend test suite relies on authentication mocking which is only enabled if the NODE_ENV environment variable has the test value, and TEST_ENV has the FRONTEND value. As such, be sure to use this value when starting the test server that will be used for the frontend testing.

Backend testing

The backend API is tested using Mocha.

Unlike frontend tests, backend tests do not depend on the application being available as a separate process - the test suite will programmatically start the application server. However, as the application server handles both the backend API and the frontend asset serving (and its preprocessing), it can take some time for it to finish its startup process. As such, it's convenient (but not required) that you set SERVER_ONLY=true when running backend tests, so that the underlying application server skips the lengthy frontend asset preprocessing process.

As mentioned in the Frontend testing section, some frontend tests rely on a special mocked authentication mechanism, instead of the "real" one. While not exhaustively, the API tests do cover the mocked authentication mechanism. You can run these tests by running the backend test suite with TEST_ENV=FRONTEND

Documentation 📝

Every change in the app must be documented in the ./CHANGELOG.md file according to keep a changelog specs.

At code level, comments must follow JSDocs specs.

Ocean Watch 🌊

Ocean Watch dashboard is handled by a file located in public/static/data/ocean-watch.json. This file contains the configuration of the dashboard as follows:

// grid values: `50%`, `100%`
{
  // data displayed on https://staging.resourcewatch.org/
  "staging": {
	// content to add to page /dashboard/ocean-watch
	"intro": [
      [
        {
          "grid": "100%",
          "visualizationType": "indicators-set",
          "config": {
            "theme": "secondary",
            "indicators": [
              {
                "id": "marine-protected-areas",
                "title": "Marine Protected Areas",
                "icon": "marine",
                "widgets": [
                  {
                    "id": "50c3fb9c-cef3-4533-8ae7-9ad122bb7963"
                  },
                  {
                    "query": "https://wri-rw.carto.com/api/v2/sql?q=WITH r as (SELECT ROW_NUMBER() OVER (ORDER BY total DESC) AS ranking, rw_country_code as country_code, rw_country_name as country_name, total/100. as x, 'percentage' as unit, year FROM ene_012_electricity_access_edit WHERE year = 2018 AND year IS NOT NULL AND total IS NOT NULL ORDER BY total DESC), v as (SELECT count(distinct(country_code)), '{{iso}}' as country_code  FROM ene_012_electricity_access_edit) SELECT * FROM r INNER JOIN v ON r.country_code = v.country_code WHERE r.country_code = '{{iso}}'",
                    "text": "Some highlight text about why this matters",
                    "format": ".2f"
                  }
                ],
                "default": true
              },
              {
                "id": "oceans-climate",
                "title": "Oceans and Climate",
                "icon": "climate",
                "widgets": [
                  {
                    "id": "c8c4a6cc-6ac8-43a0-b988-f26301314a55"
                  },
                  {
                    "query": "https://wri-rw.carto.com/api/v2/sql?q=WITH r as (SELECT ROW_NUMBER() OVER (ORDER BY total DESC) AS ranking, rw_country_code as country_code, rw_country_name as country_name, total/100. as x, 'percentage' as unit, year FROM ene_012_electricity_access_edit WHERE year = 2018 AND year IS NOT NULL AND total IS NOT NULL ORDER BY total DESC), v as (SELECT count(distinct(country_code)), '{{iso}}' as country_code  FROM ene_012_electricity_access_edit) SELECT * FROM r INNER JOIN v ON r.country_code = v.country_code WHERE r.country_code = '{{iso}}'",
                    "text": "Some highlight text about why this matters",
                    "format": ".2f"
                  }
                ]
              },
              {
                "id": "blue-economy",
                "title": "The Blue Economy",
                "icon": "economy",
                "sections": [
                  {
                    "title": "section 1",
                    "widgets": [
                      {
                        "id": "fe388698-4a58-4c43-b2b1-4d169334b2e4"
                      },
                      {
                        "query": "https://wri-rw.carto.com/api/v2/sql?q=WITH r as (SELECT ROW_NUMBER() OVER (ORDER BY total DESC) AS ranking, rw_country_code as country_code, rw_country_name as country_name, total/100. as x, 'percentage' as unit, year FROM ene_012_electricity_access_edit WHERE year = 2018 AND year IS NOT NULL AND total IS NOT NULL ORDER BY total DESC), v as (SELECT count(distinct(country_code)), '{{iso}}' as country_code  FROM ene_012_electricity_access_edit) SELECT * FROM r INNER JOIN v ON r.country_code = v.country_code WHERE r.country_code = '{{iso}}'",
                        "text": "Some highlight text about why this matters",
                        "format": ".2f"
                      }
                    ],
                    "default": true
                  },
                  {
                    "title": "section 2",
                    "widgets": [
                      {
                        "id": "41223a30-f4e8-4749-9b44-034443646da4"
                      },
                      {
                        "query": "https://wri-rw.carto.com/api/v2/sql?q=WITH r as (SELECT ROW_NUMBER() OVER (ORDER BY total DESC) AS ranking, rw_country_code as country_code, rw_country_name as country_name, total/100. as x, 'percentage' as unit, year FROM ene_012_electricity_access_edit WHERE year = 2018 AND year IS NOT NULL AND total IS NOT NULL ORDER BY total DESC), v as (SELECT count(distinct(country_code)), '{{iso}}' as country_code  FROM ene_012_electricity_access_edit) SELECT * FROM r INNER JOIN v ON r.country_code = v.country_code WHERE r.country_code = '{{iso}}'",
                        "text": "Some highlight text about why this matters",
                        "format": ".2f"
                      }
                    ]
                  }
                ]
              },
              {
                "id": "land-sea-interface",
                "title": "The Land/Sea Interface",
                "icon": "land-sea",
                "widgets": [
                  {
                    "id": "5eec6ec5-51e5-4d39-af23-9d1cda64dc3a"
                  },
                  {
                    "query": "https://wri-rw.carto.com/api/v2/sql?q=WITH r as (SELECT ROW_NUMBER() OVER (ORDER BY total DESC) AS ranking, rw_country_code as country_code, rw_country_name as country_name, total/100. as x, 'percentage' as unit, year FROM ene_012_electricity_access_edit WHERE year = 2018 AND year IS NOT NULL AND total IS NOT NULL ORDER BY total DESC), v as (SELECT count(distinct(country_code)), '{{iso}}' as country_code  FROM ene_012_electricity_access_edit) SELECT * FROM r INNER JOIN v ON r.country_code = v.country_code WHERE r.country_code = '{{iso}}'",
                    "text": "Some highlight text about why this matters",
                    "format": ".2f"
                  }
                ]
              },
              {
                "id": "ocean-dependence",
                "title": "Ocean Dependence",
                "icon": "dependence",
                "widgets": [
                  {
                    "id": "4e4501f3-3380-488c-8eca-8a9d99c90a70"
                  },
                  {
                    "query": "https://wri-rw.carto.com/api/v2/sql?q=WITH r as (SELECT ROW_NUMBER() OVER (ORDER BY total DESC) AS ranking, rw_country_code as country_code, rw_country_name as country_name, total/100. as x, 'percentage' as unit, year FROM ene_012_electricity_access_edit WHERE year = 2018 AND year IS NOT NULL AND total IS NOT NULL ORDER BY total DESC), v as (SELECT count(distinct(country_code)), '{{iso}}' as country_code  FROM ene_012_electricity_access_edit) SELECT * FROM r INNER JOIN v ON r.country_code = v.country_code WHERE r.country_code = '{{iso}}'",
                    "text": "Some highlight text about why this matters",
                    "format": ".2f"
                  }
                ]
              },
              {
                "id": "biodiversity",
                "title": "Biodiversity",
                "icon": "biodiversity",
                "widgets": [
                  {
                    "id": "f5a86ecb-e5d9-470e-ba57-33b3d0912881"
                  },
                  {
                    "query": "https://wri-rw.carto.com/api/v2/sql?q=WITH r as (SELECT ROW_NUMBER() OVER (ORDER BY total DESC) AS ranking, rw_country_code as country_code, rw_country_name as country_name, total/100. as x, 'percentage' as unit, year FROM ene_012_electricity_access_edit WHERE year = 2018 AND year IS NOT NULL AND total IS NOT NULL ORDER BY total DESC), v as (SELECT count(distinct(country_code)), '{{iso}}' as country_code  FROM ene_012_electricity_access_edit) SELECT * FROM r INNER JOIN v ON r.country_code = v.country_code WHERE r.country_code = '{{iso}}'",
                    "text": "Some highlight text about why this matters",
                    "format": ".2f"
                  }
                ]
              }
            ]
          }
        }
      ]
    ],
	// content to add to pages /dashboard/ocean-watch/country/{ISO}
    "country-profile": [
		// every array represents a block of content
		[
			{
			"grid": "100%",
			"visualizationType": "indicators-set",
			"config": {
				// visual theme to display. Possible value: `primary` / `secondary`
				"theme": "secondary",
				// list of indicators
				"indicators": [
				{
					"id": "marine-protected-areas",
					// name of the indicator
					"title": "Marine Protected Areas",
					// icon displayed
					"icon": "marine",
					// list of widgets to display under the indicator. The first widget is located at left side, second one at right.
					"widgets": [
					{
						"id": "b9192492-20f3-4725-8e90-8795f2176329"
					},
					{
						// query to obtain data to display
						"query": "https://wri-rw.carto.com/api/v2/sql?q=WITH r as (SELECT ROW_NUMBER() OVER (ORDER BY total DESC) AS ranking, rw_country_code as country_code, rw_country_name as country_name, total/100. as x, 'percentage' as unit, year FROM ene_012_electricity_access_edit WHERE year = 2018 AND year IS NOT NULL AND total IS NOT NULL ORDER BY total DESC), v as (SELECT count(distinct(country_code)), '{{iso}}' as country_code  FROM ene_012_electricity_access_edit) SELECT * FROM r INNER JOIN v ON r.country_code = v.country_code WHERE r.country_code = '{{iso}}'",
						// optional text to display
						"text": "Some highlight text about why this matters",
						// format to apply to the result of the query
						"format": ".2f"
					}
					],
					// enable to set this indicator as the first one highlighted when the page loads
					"default": true
				},
				{
					"id": "oceans-climate",
					"title": "Oceans and Climate",
					"icon": "climate",
					"widgets": [
					{
						"id": "b9192492-20f3-4725-8e90-8795f2176329"
					},
					{
						"query": "https://wri-rw.carto.com/api/v2/sql?q=WITH r as (SELECT ROW_NUMBER() OVER (ORDER BY total DESC) AS ranking, rw_country_code as country_code, rw_country_name as country_name, total/100. as x, 'percentage' as unit, year FROM ene_012_electricity_access_edit WHERE year = 2018 AND year IS NOT NULL AND total IS NOT NULL ORDER BY total DESC), v as (SELECT count(distinct(country_code)), '{{iso}}' as country_code  FROM ene_012_electricity_access_edit) SELECT * FROM r INNER JOIN v ON r.country_code = v.country_code WHERE r.country_code = '{{iso}}'",
						"text": "Some highlight text about why this matters",
						"format": ".2f"
					}
					]
				},
				{
					"id": "blue-economy",
					"title": "The Blue Economy",
					"icon": "economy",
					// sections 
					"sections": [
					{
						// title of the section
						"title": "section 1",
						// widgets to display in the section. It works like widgets under an indicator.
						"widgets": [
						{
							"id": "b9192492-20f3-4725-8e90-8795f2176329"
						},
						{
							"query": "https://wri-rw.carto.com/api/v2/sql?q=WITH r as (SELECT ROW_NUMBER() OVER (ORDER BY total DESC) AS ranking, rw_country_code as country_code, rw_country_name as country_name, total/100. as x, 'percentage' as unit, year FROM ene_012_electricity_access_edit WHERE year = 2018 AND year IS NOT NULL AND total IS NOT NULL ORDER BY total DESC), v as (SELECT count(distinct(country_code)), '{{iso}}' as country_code  FROM ene_012_electricity_access_edit) SELECT * FROM r INNER JOIN v ON r.country_code = v.country_code WHERE r.country_code = '{{iso}}'",
							"text": "Some highlight text about why this matters",
							"format": ".2f"
						}
						],
						"default": true
					},
					{
						"title": "section 2",
						"widgets": [
						{
							"id": "b9192492-20f3-4725-8e90-8795f2176329"
						},
						{
							"query": "https://wri-rw.carto.com/api/v2/sql?q=WITH r as (SELECT ROW_NUMBER() OVER (ORDER BY total DESC) AS ranking, rw_country_code as country_code, rw_country_name as country_name, total/100. as x, 'percentage' as unit, year FROM ene_012_electricity_access_edit WHERE year = 2018 AND year IS NOT NULL AND total IS NOT NULL ORDER BY total DESC), v as (SELECT count(distinct(country_code)), '{{iso}}' as country_code  FROM ene_012_electricity_access_edit) SELECT * FROM r INNER JOIN v ON r.country_code = v.country_code WHERE r.country_code = '{{iso}}'",
							"text": "Some highlight text about why this matters",
							"format": ".2f"
						}
						]
					}
					]
				},
				{
					"id": "land-sea-interface",
					"title": "The Land/Sea Interface",
					"icon": "land-sea",
					"widgets": [
					{
						"id": "b9192492-20f3-4725-8e90-8795f2176329"
					},
					{
						"query": "https://wri-rw.carto.com/api/v2/sql?q=WITH r as (SELECT ROW_NUMBER() OVER (ORDER BY total DESC) AS ranking, rw_country_code as country_code, rw_country_name as country_name, total/100. as x, 'percentage' as unit, year FROM ene_012_electricity_access_edit WHERE year = 2018 AND year IS NOT NULL AND total IS NOT NULL ORDER BY total DESC), v as (SELECT count(distinct(country_code)), '{{iso}}' as country_code  FROM ene_012_electricity_access_edit) SELECT * FROM r INNER JOIN v ON r.country_code = v.country_code WHERE r.country_code = '{{iso}}'",
						"text": "Some highlight text about why this matters",
						"format": ".2f"
					}
					]
				},
				{
					"id": "ocean-dependence",
					"title": "Ocean Dependence",
					"icon": "dependence",
					"widgets": [
					{
						"id": "b9192492-20f3-4725-8e90-8795f2176329"
					},
					{
						"query": "https://wri-rw.carto.com/api/v2/sql?q=WITH r as (SELECT ROW_NUMBER() OVER (ORDER BY total DESC) AS ranking, rw_country_code as country_code, rw_country_name as country_name, total/100. as x, 'percentage' as unit, year FROM ene_012_electricity_access_edit WHERE year = 2018 AND year IS NOT NULL AND total IS NOT NULL ORDER BY total DESC), v as (SELECT count(distinct(country_code)), '{{iso}}' as country_code  FROM ene_012_electricity_access_edit) SELECT * FROM r INNER JOIN v ON r.country_code = v.country_code WHERE r.country_code = '{{iso}}'",
						"text": "Some highlight text about why this matters",
						"format": ".2f"
					}
					]
				},
				{
					"id": "biodiversity",
					"title": "Biodiversity",
					"icon": "biodiversity",
					"widgets": [
					{
						"id": "b9192492-20f3-4725-8e90-8795f2176329"
					},
					{
						"query": "https://wri-rw.carto.com/api/v2/sql?q=WITH r as (SELECT ROW_NUMBER() OVER (ORDER BY total DESC) AS ranking, rw_country_code as country_code, rw_country_name as country_name, total/100. as x, 'percentage' as unit, year FROM ene_012_electricity_access_edit WHERE year = 2018 AND year IS NOT NULL AND total IS NOT NULL ORDER BY total DESC), v as (SELECT count(distinct(country_code)), '{{iso}}' as country_code  FROM ene_012_electricity_access_edit) SELECT * FROM r INNER JOIN v ON r.country_code = v.country_code WHERE r.country_code = '{{iso}}'",
						"text": "Some highlight text about why this matters",
						"format": ".2f"
					}
					]
				}
				]
			}
			}
		],
		[
			{
				"grid": "100%",
				// represents a pink title in the dashboard
				"title": "Ecosystems and Pressures"
			},
			{
				"grid": "50%",
				// represents a a block of text in the dashboard
				"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus maximus iaculis Integer fermentum justo vitae efficitur aliquam. Nulla varius, tellus ac pharetra elementum, purus orci cursus justo, blandit tempus justo eros ultricies nisi.In semper, nulla non semper venenatis, sem lorem condimentum ligula, ac dapibus enim ex vitae massa."
			},
			{
				"grid": "50%",
				"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus maximus iaculis Integer fermentum justo vitae efficitur aliquam. Nulla varius, tellus ac pharetra elementum, purus orci cursus justo, blandit tempus justo eros ultricies nisi.In semper, nulla non semper venenatis, sem lorem condimentum ligula, ac dapibus enim ex vitae massa."
			}
      	],
		[
			{
				"grid": "100%",
				"visualizationType": "mini-explore",
				"config": {
					// title of the Mini Explore. Mandatory.
					"title": "Lorem ipsum",
					// geostore of the area to display (if any). Optional: remove or set to `null` if no needed.
					"areaOfInterest": "972c24e1da2c2baacc7572ee9501abdc",
					// datasets split into different groups. Mandatory.
					"datasetGroups": [
						{
							// title of the group. Mandatory.
							"title": "Power Infrastructure",
							// datasets that form the group. Mandatory.
							"datasets": [
								"a86d906d-9862-4783-9e30-cdb68cd808b8",
								"b75d8398-34f2-447d-832d-ea570451995a",
								"4919be3a-c543-4964-a224-83ef801370de"
							],
							// default datasets to display when Mini Explore is initialized. Optional: leave as empty array (`[]`) if no needed.
							"default": [
								"a86d906d-9862-4783-9e30-cdb68cd808b8"
							]
						},
						{
							"title": "Natural hazards",
							"datasets": [
								"484f10d3-a30b-4466-8052-c48d47cfb4a1",
								"c5a62289-bdc8-4821-83f0-6f05e3d36bdc"
							],
							"default": [
								"484f10d3-a30b-4466-8052-c48d47cfb4a1"
							]
						}
					]
				}
			}
		]
    ]
  },
  // data displayed on https://preproduction.resourcewatch.org/, https://resourcewatch.org/
  "production": {
	"intro": [],
    "country-profile": []
  },
}

Contributing 🎁

If you have any amazing idea for the project, please tell us before develop it.

Reporting an issue

Issues can be reported here.

Useful links

• RW API documentation
• Basecamp
• Pivotal Tracker
• PostMan recipes
• Invision Designs/Wireframes

Related repositories

• resource-watch/graph Knowledge graph and future recommendation system