Building a Simple Spotify Trends Dashboard with React & Data Viz Libraries

Hi! Hi! I am a Software Engineering student and a beginner developer. For now, I am actively experimenting with data visualization and learning new tools for it. I am a Software Engineering student and a beginner developer. For now, I am actively experimenting with data visualization and learning new tools for it. In this article, I want to share a small but useful project that demonstrates how to create a one-page data analytics app. So, speaking shortly, here I’ll show a way of building a complete web project using: Flexmonster Pivot Table Highcharts React Flexmonster Pivot Table Highcharts React Why these tools? Why these tools? Flexmonster Previously, I’ve had some experience working with Flexmonster, so I was already familiar with it. Also, I was impressed by how fast it can work with a large amount of data, and has an intuitively understandable UI where reports can be easily done. a large amount of data a large amount of data Highcharts For chart visualization, we’ll use Highcharts because they suggest a lot of types of charts and are so easy to combine with Flexmonster. React Maybe the easiest one to explain: I’ve just been using React in some projects and really enjoyed working with it. Also, it is quite a popular framework, which makes development faster and keeps code clean and understandable. Then it was time to choose the dataset. For me, this process was quite long. I wanted to find something interesting and well-known. So, one random day, while listening to music, it hit me — why not use a Spotify dataset? Everyone knows it, it’s full of data, and who doesn’t want to see info about how high on the charts their favourite musician is? As you may already understand, I will use the Spotify Top 200 Dataset from Kaggle to demonstrate how users can upload and analyze their own CSV data. Spotify Top 200 Dataset Spotify Top 200 Dataset This article is presented in a tutorial format, making it easy to apply to your own projects. I genuinely hope it's helpful. Step 1: Integrating Flexmonster Pivot I hope your React projects are already prepared, because now it’s time to integrate it ith Flexmonster! In the beginning, you need to install Flexmonster CLI from npm: npm install -g flexmonster-cli npm install -g flexmonster-cli To get Flexmonster, you should open your React project and run the following command: flexmonster add js-flexmonster flexmonster add js-flexmonster After that, the flexmonster npm package will be downloaded to your node_modules/ . node_modules/ Also, you can get Flexmonster not only from the CLI, but also from CDN, npm, ZIP package, and WebJars. To get more information about it, you can read about integrating Flexmonster here. here here As I’m using React in this project, I need to add a React Wrapper for Flexmonster, which can be done by using this command: npm install react-flexmonster Step 2: Importing all necessary modules Now that we have Flexmonster installed and ready, let’s build the main interface of our application using React. We need to import all necessary modules at the top of App.js file: App.js App.js import React, { useRef, useState, useEffect } from "react"; import { Pivot } from "react-flexmonster"; import "flexmonster/flexmonster.css"; import "./App.css"; import React, { useRef, useState, useEffect } from "react"; import { Pivot } from "react-flexmonster"; import "flexmonster/flexmonster.css"; import "./App.css"; The pivot component from react-flexmonster is what renders the interactive pivot table. We also import Flexmonster’s CSS files to apply the default styling, and optionally, you can import your own custom styles with App.css. Step 3: Creating the Report Object Inside our App.jsx file, we create a report object that describes the data source, field mapping, layout, and visual options for the pivot table. const report = { dataSource: { filename: "/spotify-top-200-dataset.csv", mapping: { artist_name: { type: "string" }, track_name: { type: "string" }, streams: { type: "number" }, }, }, const report = { dataSource: { filename: "/spotify-top-200-dataset.csv", mapping: { artist_name: { type: "string" }, track_name: { type: "string" }, streams: { type: "number" }, }, }, It’s important to mention the filename – path to the file (CSV file, in my case), it is spotify-top-200-dataset.csv. Step 4: Configuring the Pivot Table Slice Then we need to write the slice section, which defines how the data is grouped and summarized. I was thinking what info is the best to display and decided to choose the artist, tracks, and number of streams. So, to display it all, we need: to include artists and track names in the rows; to show the total number of streams as measures; to apply sorting in descending order based on the stream count. slice: { rows: [ { uniqueName: "artist_name" }, { uniqueName: "track_name" } ], measures: [ { uniqueName: "streams", aggregation: "sum" } ], sorting: { column: { type: "desc", tuple: [], measure: "streams", }, }, }, to include artists and track names in the rows; to show the total number of streams as measures; to apply sorting in descending order based on the stream count. slice: { rows: [ { uniqueName: "artist_name" }, { uniqueName: "track_name" } ], measures: [ { uniqueName: "streams", aggregation: "sum" } ], sorting: { column: { type: "desc", tuple: [], measure: "streams", }, }, }, slice: { rows: [ { uniqueName: "artist_name" }, { uniqueName: "track_name" } ], measures: [ { uniqueName: "streams", aggregation: "sum" } ], sorting: { column: { type: "desc", tuple: [], measure: "streams", }, }, }, slice: { rows: [ { uniqueName: "artist_name" }, { uniqueName: "track_name" } ], measures: [ { uniqueName: "streams", aggregation: "sum" } ], sorting: { column: { type: "desc", tuple: [], measure: "streams", }, }, }, Step 5: Setting Up the Component Now, we define the pivot grid component and add it to the page: return ( Spotify Insights ); return ( Spotify Insights ); Here we define our pivot table, enabling the toolbar to be shown when we render the page. There is also an option to hide the toolbar, just don’t write the line toolbar={true}. toolbar={true}. Step 6: Customizing Toolbar Now, I suggest you make our project more interactive by customizing the toolbar. Being more precise, adding a new tab. One of the biggest advantages of pivot tables is that you can see all your data from different angles. In my case, I didn’t want to change “Tracks View” anymore, so this tab will help us, because we will create a completely new view which will demonstrate even more possibilities of pivot tables. For this, we need to create a function customizeToolbar: customizeToolbar function customizeToolbar(toolbar) { const tabs = toolbar.getTabs(); toolbar.getTabs = function () { tabs.unshift({ id: "fm-tab-newtab", title: showOriginalPivot ? "Albums" : "Tracks", handler: newTabHandler, icon: this.icons.options, }); return tabs; }; } function customizeToolbar(toolbar) { const tabs = toolbar.getTabs(); toolbar.getTabs = function () { tabs.unshift({ id: "fm-tab-newtab", title: showOriginalPivot ? "Albums" : "Tracks", handler: newTabHandler, icon: this.icons.options, }); return tabs; }; } In this code, we: Get all already existing tabs using getTabs() Add a new tab that will switch between two views (in our case, it will be two pivot tables) Get all already existing tabs using getTabs() getTabs() Add a new tab that will switch between two views (in our case, it will be two pivot tables) Step 7: Creating a Second Pivot Table For the second view, we will create a pivot table with albums. We should do the same steps as we did before but just a little bit change the data. For example, in report object we will display the year of release date, album name, artist name, and number of streams: const genresReport = { dataSource: { filename: "/spotify-top-200-dataset.csv", mapping: { artist_name: { type: "string" }, streams: { type: "number" }, album_name: { type: "string" }, release_date: { type: "date" } }, }, slice: { rows: [ { uniqueName: "release_date.Year" }, { uniqueName: "album_name" } ], columns: [ { uniqueName: "artist_name", filter: { measure: "streams", type: "top", quantity: 20 }, sort: "desc" } ], measures: [ { uniqueName: "streams", aggregation: "sum" } ], sorting: { column: { type: "desc", tuple: [], measure: "streams" } } } }; const genresReport = { dataSource: { filename: "/spotify-top-200-dataset.csv", mapping: { artist_name: { type: "string" }, streams: { type: "number" }, album_name: { type: "string" }, release_date: { type: "date" } }, }, slice: { rows: [ { uniqueName: "release_date.Year" }, { uniqueName: "album_name" } ], columns: [ { uniqueName: "artist_name", filter: { measure: "streams", type: "top", quantity: 20 }, sort: "desc" } ], measures: [ { uniqueName: "streams", aggregation: "sum" } ], sorting: { column: { type: "desc", tuple: [], measure: "streams" } } } }; Step 8: Install Highcharts and Bind Flexmonster to It To install Highcharts, write the following command in the terminal: npm install highcharts npm install highcharts Then, import Highcharts into your project: import Highcharts from "highcharts"; import "flexmonster/lib/flexmonster.highcharts.js"; import Highcharts from "highcharts"; import "flexmonster/lib/flexmonster.highcharts.js"; More about the integration of Flexmonster with Highcharts can be found here. here here Inside your App.jsx, use useRef and useEffect to connect the pivot table with Highcharts: const pivotRef = useRef(null); const pivotRef = useRef(null); useEffect(() => { const handleReportComplete = (): void => { const pivot = pivotRef.current?.flexmonster; if (pivot) { pivot.highcharts.getData( { type: "column", }, (data: GetDataValueObject): void => { Highcharts.chart("highcharts-container", data); } ); } }; const pivot = pivotRef.current?.flexmonster; if (pivot) { pivot.on("reportcomplete", handleReportComplete); } }, []); useEffect(() => { const handleReportComplete = (): void => { const pivot = pivotRef.current?.flexmonster; if (pivot) { pivot.highcharts.getData( { type: "column", }, (data: GetDataValueObject): void => { Highcharts.chart("highcharts-container", data); } ); } }; const pivot = pivotRef.current?.flexmonster; if (pivot) { pivot.on("reportcomplete", handleReportComplete); } }, []); Here, pivotRef lets us get access to the pivot table instance so we can work with its built-in functions. We use the “reportcomplete” event to run our code once the pivot table has finished loading. Step 9: Displaying the Chart Once data is passed to Highcharts via pivot.highcharts.getData(...), the chart will automatically appear in the container with the specified chart type. You can use any chart type supported by Highcharts, for example line, pie, or bar, by changing the type passed to getData. I сhose to use a column chart for this project. It's a familiar and visually intuitive way to display data. You can enable it in your code by specifying: pivot.highcharts.getData({ type: "column" }, (data) => { pivot.highcharts.getData({ type: "column" }, (data) => { Make sure you have a with a proper id for the Highcharts component: When the Flexmonster pivot table finishes loading, reportcomplete event is triggered. Then, we extract data using Flexmonster’s Highcharts integration and render it. Step 10: Customizing your web app And here is my favorite part of every project - styling and customizing! I tried to make these grids as similar to Spotify's original design as possible: font, black background, and green color. So, how to implement it all? Let’s separately talk about Flexmonster pivot table and Highcharts visualizations. Step 10.1: Customizing Flexmonster Flexmonster has built-in themes, and all possible options are available in this demo. demo demo However, as we want to do it in Spotify style, as much as possible, we’ll need to create a custom theme. Firstly, you need to run these commands in your terminal to get theme-builder: git clone https://github.com/flexmonster/custom-theme-builder cd custom-theme-builder git clone https://github.com/flexmonster/custom-theme-builder cd custom-theme-builder In the custom-theme-builder/ folder, we should find and open the flexmonster.less file. There you can apply any styles you want. ustom-theme-builder/ flexmonster.less After it, we need to compile .less file into .css, which can be easily done with the following command: .less .css lessc flexmonster.less flexmonster.css Then, add flexmonster.css file to your project src folder. flexmonster.css src In index.html add this line: And also don’t forget to import flexmonster.css file to your project in App.jsx: App.jsx: import "flexmonster/flexmonster.css"; import "../flexmonster.css" import "flexmonster/flexmonster.css"; import "../flexmonster.css" When you complete all these steps, you can already see a customized pivot table in your own style! Step 10.2: Customizing Highcharts Unfortunately, not all the CSS code can be applied to Highcharts, so to reduce the number of bugs and difficulties, I decided to do the styling directly in App.jsx. Here is the code with already implemented styling of Highcharts: const handleReportComplete = () => { pivot.highcharts.getData({ type: "column" }, (data) => { Highcharts.chart("highcharts-container", { ...data, chart: { ...data.chart, backgroundColor: "transparent", style: { fontFamily: "'Poppins', 'Circular Spotify Text', 'Helvetica Neue', Helvetica, Arial, sans-serif", }, }, title: { text: "Spotify Top 200 Streams", style: { color: "#1DB954", fontWeight: "900", fontSize: "26px", textShadow: "0 0 8px #1DB954", }, }, xAxis: { ...data.xAxis, labels: { style: { color: "#E3E3E3", fontSize: "13px" }, }, lineColor: "#1DB954", tickColor: "#1DB954", }, yAxis: { ...data.yAxis, labels: { style: { color: "#E3E3E3", fontSize: "13px" }, }, gridLineColor: "rgba(29, 185, 84, 0.3)", title: { text: "Streams", style: { color: "#1DB954", fontWeight: "700" }, }, }, legend: { enabled: false, }, plotOptions: { column: { color: "#1DB954", borderRadius: 6, shadow: { color: "rgba(29, 185, 84, 0.8)", offsetX: 0, offsetY: 0, opacity: 0.9, width: 12, }, }, }, tooltip: { backgroundColor: "#1DB954", style: { color: "#121212", fontWeight: "700" }, borderRadius: 8, borderWidth: 0, shadow: true, animation: true, }, series: data.series, }); }); }; const handleReportComplete = () => { pivot.highcharts.getData({ type: "column" }, (data) => { Highcharts.chart("highcharts-container", { ...data, chart: { ...data.chart, backgroundColor: "transparent", style: { fontFamily: "'Poppins', 'Circular Spotify Text', 'Helvetica Neue', Helvetica, Arial, sans-serif", }, }, title: { text: "Spotify Top 200 Streams", style: { color: "#1DB954", fontWeight: "900", fontSize: "26px", textShadow: "0 0 8px #1DB954", }, }, xAxis: { ...data.xAxis, labels: { style: { color: "#E3E3E3", fontSize: "13px" }, }, lineColor: "#1DB954", tickColor: "#1DB954", }, yAxis: { ...data.yAxis, labels: { style: { color: "#E3E3E3", fontSize: "13px" }, }, gridLineColor: "rgba(29, 185, 84, 0.3)", title: { text: "Streams", style: { color: "#1DB954", fontWeight: "700" }, }, }, legend: { enabled: false, }, plotOptions: { column: { color: "#1DB954", borderRadius: 6, shadow: { color: "rgba(29, 185, 84, 0.8)", offsetX: 0, offsetY: 0, opacity: 0.9, width: 12, }, }, }, tooltip: { backgroundColor: "#1DB954", style: { color: "#121212", fontWeight: "700" }, borderRadius: 8, borderWidth: 0, shadow: true, animation: true, }, series: data.series, }); }); }; Feel free to change it to the way that works best for you! Finally, we have our project completely done, and I hope that you are also happy with the result! If you want to get the whole code, you can check this dashboard on my GitHub. dashboard on my GitHub And there is our result: Also, I’d love to hear your feedback and any thoughts about this webpage. Thanks for reading, and good luck with coding!