{"id":419,"date":"2019-02-01T12:35:06","date_gmt":"2019-02-01T09:35:06","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=419"},"modified":"2024-02-23T17:57:48","modified_gmt":"2024-02-23T14:57:48","slug":"building-analytics-react-dashboard-with-cube-js","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/building-analytics-react-dashboard-with-cube-js\/","title":{"rendered":"Building Analytics React Dashboard with Cube.js"},"content":{"rendered":"
\"\"<\/figure>

Imagine that you need to develop a web application<\/a> 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.<\/p>

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<\/a>.<\/p>

The best way to start is to use one of Flatlogic React’s dashboards<\/a> and Cube.js<\/a>.<\/p>

The source code is available on Github here.<\/a><\/p>

Let’s Build the Dashboard<\/h2>

In this example, we will use the Sing App React template<\/a> in order to eliminate steps of setting up a react<\/a> environment from scratch and to have a dashboard interface from the beginning.<\/p>

The first step is connecting your database with Cube.js. First of all, you need to install <\/g>@cubejs-client\/core<\/code>,<\/g> <\/g>@cubejs-client\/react<\/code>,<\/g> and recharts as a charts library. Then, you need to find the API<\/a> 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.<\/p>

1 import { LineChart, Line, XAxis, YAxis } from 'recharts';2 import cubejs from '@cubejs-client\/core';3 import { QueryRenderer } from '@cubejs-client\/react';45 const cubejsApi = cubejs(`api-token`); \"Professional <\/a><\/code><\/pre>
Now you are ready to get any data you like. According to the docs, here’s how your component with chart should look:<\/p>
1 <QueryRenderer 2 query={{3 measures: ['Stories.count'],4 dimensions: ['Stories.time.month']5 }} 6 cubejsApi={cubejsApi} 7 render={({ resultSet }) => {8 if (!resultSet) {9 return 'Loading...';10 }1112 return (13 <LineChart data={resultSet.rawData()}>14 <XAxis dataKey=\"Stories.time\"\/>15 <YAxis\/>16 <Line type=\"monotone\" dataKey=\"Stories.count\" stroke=\"#8884d8\"\/>17 <\/LineChart>18 );19 }}20\/><\/code><\/pre>
QueryRender<\/code> is the component from the Cube.js library. Let’s split it on in props.<\/p>
The main property is query<\/code>. There you can define what data to get from Cube.js.<\/p>
You don’t have to know all Cube.js concepts to implement query<\/code> because you can easily configure any query in Cube.js then export it in JSON format and paste it right into your QueryRender<\/code> component.<\/p>
The render property of QueryRender<\/code> 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.<\/p>
Advantages<\/p>