Tourism Dashboard

Dashboard for the Neo4Tourism framework allowing the visualization of tourism data from TripAdvisor in order to simulate and understand tourism behaviors from aggregated graphs from Neo4J. Thus, these data make it possible to establish emerging trends and also to understand tourist behaviour through graphs and maps.
This project is a micro-service of the Neo4Tourism framework including the REST API, the Neo4J database and the administrator dashboard.

Demo | Documentation | Tourism Admin Dashboard | Tourism API REST

Installation

$ git clone https://github.com/quelhasu/tourism-dashboard

Development

$ cd tourism-dashboard
$ npm i
$ npm run dev

Docker

Run the dockerfile or you can also include it in docker-compose.yml file.

$ cd tourism-dashboard
$ docker-compose build
...
$ docker-compose up -d

The application is then accessible with the allocated port in the docker-compos.yml file (default 8000).
In order to manage multiple container for different studied areas, you can modify this file to change the name of the container_name, like dashboard-lyon for example.

Pay attention to the API url in the following section, depending on the IP address used inside the docker network for example.

Study Scope

You can change the API address in config/config.json according to your case, as well as the area studied, for example here the study is about Bordeaux Metropole:

{"study":"BM","API":"http://your-url:3000"}

Add new routes

Go to server.js file and add this in app.prepare() function:

server.get("/add/new/route/:id", (req, res) => {
  const actualPage = "/test";
  const queryParams = { id: req.params.id };
  app.render(req, res, actualPage, queryParams);
});

This will redirect all query with this URL to the pages/test.js page. If you want to access it via the navigation bar, modify the menu constant nav.js component:

const menu = [...{ href: "/add/new/route/1548", label: "New Route", icon: "" }];

Translation

Write all necessary translations into a file under locales/{en,fr} directory.
Add withTranslation module if you want to use i18n in component or page:

import { withTranslation } from "relative/path/to/i18n";

In the getInitialProps() function returns namespace(s) you want to use and export the class with the i18n module:

// In the getInitialProps()
return { namespacesRequired: ["test"] };

// Export the class
export default withTranslation(["test"])(YourClass);

Then you can use translation available in your previous edited/created file:

<h1> {this.props.t("test-translation")} </h1>

Customize colors

All the colors variables for departments, countries or cities are available in the utils/colors.js file.