A React Dashboard Template With ElasticSearch
By: Meet Zaveri
Tags: Business Intelligence, Elasticsearch, Template, React, Dashboard

Who Is This For

The need for overall representation of data in a single glance is an essential requirement for all businesses. That’s where a dashboard comes into play. The ability for a company to now use realtime graphs and charts that clearly display how key aspects of their business is performing — has gone from a convenient ‘nice to have’ to a ‘must have’.

A dashboard can be used to:

Enable your business team to visualize the important business metrics in a single glance,

Share performance and ROI reports with your clients,

Empower your end-users to visualize metrics relevant to them,

A collating of existing dashboards into a unifying dashboard.

There are dashboard builder tools such as Kibana and Grafana which let you create ElasticSearch powered dashboards with no code. We recommend them whenever they fit your use-case. However, they become limiting as soon as you need:

A chart that’s not available in their walled garden,

Need to programmatically filter and visualize the data, e.g. filter data for the logged-in user and set access controls on the data that’s visible,

Need to integrate other JavaScript code within your dashboard, or extend further by calling other backend routes.

What’s Inside This Template

This template comes with a dataset that sales data of games published over the years. It contains data visualizations powered by recharts and apexcharts. We use ElasticSearch for powering the search (aggregations) backend here and the template is using the ReactiveSearch library to fetch the hits and then render the charts using recharts.

Tools and libraries we have used in this app:

Auth0 for Authentication

for Authentication Material-UI is used for the design system

is used for the design system Appbase.io for hosting ElasticSearch

for hosting ElasticSearch ReactiveSearch for querying ElasticSearch with a props-driven interface

for querying ElasticSearch with a props-driven interface ApexCharts, Recharts, and react-simple-maps for visualizing data via charts UIs,

Authentication (Auth0)

In this app, we have used Auth0’s library to integrate the authentication flow. It also supports password-less authentication using social login such as Google.

Auth0 supports industry standards such as SAML, OpenID Connect, JSON Web Token, OAuth 2.0, OAuth 1.0a, WS­-Federation, and OpenID. Also, Auth0’s widget(UI) gives you a fully customizable, enterprise-ready login/registration box with just a few lines of JavaScript. You can learn more about it over here — https://auth0.com/why-auth0/.

Note: In the template’s source code, you’ll have to replace existing Auth0 credentials with your ones. AUTH0_CLIENT and AUTH0_DOMAIN are the variables responsible for passing credential values to Auth0 API.

Design System (Material-UI)

The core design system that we have used in this app is Material UI (https://material-ui.com/) which provides React components and is used by thousands of developers. Dashboard UI’s integral elements like grids, layouts, cards, and various visual elements are built using Material UI.

Dataset and Search infrastructure (ElasticSearch + Appbase.io)

This template uses an app that is hosted with appbase.io — An ElasticSearch hosting provider. We recommend using appbase.io for your own dataset as well as it comes with a free tier, but you can also use any other ElasticSearch hosting provider.

We have used ReactiveSearch for querying ElasticSearch using declarative props. It comes with a rich API for customizing the queries and comes with over 30 UI component presets.

We have combined set visualizations containing:

Charts & Graphs — We are using Apex Charts react.js wrapper for building customizable charts. For introducing more variety, we have used the Recharts library.

— We are using Apex Charts react.js wrapper for building customizable charts. For introducing more variety, we have used the Recharts library. Maps — We are using react-simple-maps package for displaying a map based on the sales by geography (see image below).

Screenshots

Landing page for unauthorized user

Main dashboard page

Game Platform Page with filters and pagination

Image: Specific game view page for a specific platform

Try It Live

You can try it out live over here — https://charts-dashboard.netlify.com/.

How To Use ElasticSearch With React

We have used ReactiveSearch — an open-source library to build the data-driven components in this template. It offers a range of highly customizable rich UI components that can connect with any ElasticSearch server and provide you with a good default queries for all the typical search use-cases (think e-commerce, aggregators, events).

Components Used:

ReactiveBase — All the ReactiveSearch components are wrapped inside a container component — ReactiveBase which glues the ElasticSearch index and the ReactiveSearch components together.

Read more about it over here.

DataSearch — This component creates a search bar UI that allows a user to search for data inside the dashboard.

GlobalSearch (using DataSearch component)

Read more about it over here.

MultiList — This component helps a user filter data by specific fields, e.g. a filter by year.

Read more about it over here.

ReactiveList — This component is used for rendering the result list view.

Read more about it over here.

ReactiveComponent — This component is responsible for connecting custom react components to ElasticSearch on top of ReactiveSearch.

We have used it to embed chart components with ReactiveSearch layer.

Donut chart wrapped with ReactiveComponent which remains in sync with data

Read more about it over here.

If you are more curious about how to use ReactiveComponent to build custom data-driven components, here’s an example of building a Donut Chart using it: