Imagine that you need to develop a web application from scratch to monitor and analyze raw data. For example, you own an average size online store. You are not satisfied with the existing solutions for data analytics and you want to manage what components will be in your admin panel by yourself. It is also very important for you to work with raw data and build analytical charts yourself. Often, you have to work with bulky libraries and write your own web application, which takes an enormous amount of time. The solution comes from Cube.js + Flatlogic dashboards. The best way to start is to use one of and . Flatlogic React’s dashboards Cube.js You can check out the final dashboard here. The source code is available on Github here. Let’s Build the Dashboard In this example, we will use the in order to eliminate steps of setting up a react environment from scratch and to have a dashboard interface from the beginning. Sing App React template The first step is connecting your database with Cube.js. First of all, you need to install , , and recharts as a charts library. Then, you need to find the API token in the project settings. After getting and installing all needed “equipment,” you have to import them into your react component and apply the API token. @cubejs-client/core @cubejs-client/react { LineChart, Line, XAxis, YAxis } ; cubejs ; { QueryRenderer } ; cubejsApi = cubejs( ); 1 import from 'recharts' 2 import from '@cubejs-client/core' 3 import from '@cubejs-client/react' 4 5 const `api-token` Now you are ready to get any data you like. According to the docs, here’s how your component with chart should look: <QueryRenderer query={{ measures: [ ], dimensions: [ ] }} cubejsApi={cubejsApi} render={({ resultSet }) => { (!resultSet) { ; } ( <LineChart data={resultSet.rawData()}> <XAxis dataKey= /> <YAxis/> <Line type= dataKey= stroke= /> < > 2 3 'Stories.count' 4 'Stories.time.month' 5 6 7 8 if 9 return 'Loading...' 10 11 12 return 13 14 "Stories.time" 15 16 "monotone" "Stories.count" "#8884d8" 17 /LineChart>
18    );
19  }}
20/ is the component from the Cube.js library. Let’s split it on in props. QueryRender The main property is . There you can define what data to get from Cube.js. query You don’t have to know all Cube.js concepts to implement because you can easily configure any query in Cube.js then export it in JSON format and paste it right into your component. query QueryRender The render property of gets a function that returns whatever you want. In our case, we want to return the chart with already received data. The best feature is that you can return the loader while you are receiving data. Another lovely feature is the ability to export query data in different formats, like CSV or xlsx, right from the Cube.js dashboard. QueryRender Advantages Implementation speed and easy-to-understand API Cube.js is visualization agnostic. This means you can use your favorite chart library, like Chart.js, Recharts, C3.js, or any other. Cube.js Data Schema works as an ORM for your analytics. It allows you to model everything from simple counts to cohort retention and funnel analysis. It is designed to work on top of your database, so all your data stays with you. All major SQL databases are supported. The Final Result Now with Cube.js and Flatlogic Dashboards, you can easily start your own web app with custom graphics and connect any database to visualize raw data. Here is an example using e-commerce data. You can play with it here. Originally published at https://statsbot.co/blog/building-analytics-react-dashboard-with-cube.js

Different

7 React Admin Dashboard Templates For Your Next Project

Benefits of Admin Templates Explained

Check out Flatlogic React, VueJS, Angular and Bootstrap Templates!

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Too Long; Didn't Read

Make resilience your competitive advantage

Building Analytics React Dashboard With Cube.js

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Cool Angular Material Admin Dashboard Templates

How to Extract Insights From Your Data

A DIY Guide to Building an Analytics Dashboard with Node, Express, and Cube.js

Using Data Analytics for Unhindered Business Growth

Building a BNB Chain Analytics Dashboard with GetBlock

10 Cool Angular Material Admin Dashboard Templates

How to Extract Insights From Your Data

A DIY Guide to Building an Analytics Dashboard with Node, Express, and Cube.js

Using Data Analytics for Unhindered Business Growth

Building a BNB Chain Analytics Dashboard with GetBlock

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps