How To Construct Customized Knowledge Visualizations Utilizing Luzmo Flex

This text is a sponsored by Luzmo

On this article, I’ll introduce you to Luzmo Flex, a brand new characteristic from the Luzmo crew who’ve been working laborious making developer tooling to flatten the on-ramp for analytics reporting and information visualization.

With Luzmo Flex, you possibly can hook up a dataset and create superbly crafted, totally customizable interactive charts that meet your reporting wants. They simply combine and work together with different parts of your internet app, permitting you to maneuver away from a conventional “dashboard” interface and construct extra bespoke information merchandise.

Whereas many charting libraries provide related options, I usually discovered it difficult to get the info into the suitable form that the library wanted. On this article, I’ll present you how one can construct stunning information visualizations utilizing the Google Analytics API, and also you gained’t need to spend any time “massaging” the info!

What Is Luzmo Flex?

Nicely, it’s two issues, actually. Initially, Luzmo is a low-code platform for embedded analytics. You possibly can create datasets from absolutely anything, join them to APIs like Google Analytics or your PostgreSQL database, and even add static information in a .csv file and begin creating information visualizations with drag and drop.

Secondly, Luzmo Flex is their new React element that may be configured to create {custom} information visualizations. All the things from the best way you question your information to the best way you show it may be achieved by way of code utilizing the LuzmoVizItemComponent.

What makes Luzmo Flex distinctive is that you may reuse the core functionalities of Luzmo’s low-code embedded analytics platform in your custom-coded parts.

Meaning, moreover creating ready-to-use datasets, you possibly can arrange capabilities like the next out-of-the-box:

Multi-tenant analytics: Displaying completely different information or visualizations to completely different customers of your app.
Localization: Displaying charts in a number of languages, currencies, and timezones with out a lot {custom} growth.
Interactivity: Arrange occasion listeners to create complicated interactivity between Luzmo’s viz objects and any non-Luzmo parts in your app.

What Can You Construct With Luzmo Flex?

By combining these off-the-shelf capabilities with flexibility by way of code, Luzmo Flex makes a terrific resolution for constructing bespoke information merchandise that transcend the boundaries of a conventional dashboard interface. Beneath are a couple of examples of what that would appear like.

Report Builder

A {custom} report builder that lets customers search and filter a dataset and render it out utilizing quite a few completely different charts.

Filter Panel

Allow highly effective filtering utilizing HTML Choose inputs, which is able to replace every chart proven on the web page.

Wearables Dashboard

Or how a couple of sleep tracker hooked as much as your telephone to trace all these essential snoozes?

When to Take into account Luzmo Flex vs Chart Libraries

When constructing data-intensive functions, utilizing one thing like Recharts, a widely known React charting library, you’ll seemingly must reformat the info to suit the required form. As an example, if I request the highest 3 web page views from the final seven days for my website, paulie.dev, I must use the Google Analytics API utilizing the next question.

The response would look one thing like this:

To make that information work with Recharts, I’d must reformat it so it conforms to the next information form.

To perform this, I’d want to make use of an Array.prototype.map() to iterate over every merchandise, destructure the related information and return a key-value pair for the identify and worth for every.

const information = response.rows.map((row) => {
const { dimensionValues, metricValues } = row;

const pageTitle = dimensionValues[1].worth;
const totalUsers = parseInt(metricValues[0].worth);

return {
identify: pageTitle,
worth: totalUsers,
};
});

And naturally, for those who’re reformatting information this fashion in your utility, you’d additionally wish to write unit assessments to make sure the info is at all times formatted appropriately to keep away from breaking your utility… and all of this earlier than you even get on to creating your charts!

With Luzmo Flex, all of this goes away, leaving you extra time to concentrate on which information to show and the way greatest to show it.

The First Steps to Constructing Bespoke Knowledge Merchandise

Sometimes, when constructing person interfaces that show information insights, your first job shall be to determine how one can question the info supply. This will take many varieties, from RESTful API requests to direct database queries or generally studying from static information. Your subsequent job shall be determining when and the way usually these requests must happen.

For information that hardly ever modifications: Maybe a question within the construct step will work.
For information that modifications repeatedly: A server-side request on web page load.
For ever-changing information: A client-side request that polls an API on an interval.

Every will seemingly inform your utility’s structure, and there’s no single resolution to this. Your final job, as talked about, shall be wrangling the responses, reformatting the info, and displaying it within the UI.

Beneath, I’ll present you ways to do that utilizing Luzmo Flex through the use of a easy instance product.

What We’re Constructing: Customized Knowledge Visualizations As Code

Right here’s a screenshot of a easy information product I’ve constructed that shows three completely different charts for various reporting dimensions uncovered by the Google Analytics API for web page views for my website, paulie.dev, from the final seven days.

You will discover all of the code used on this article on the next hyperlink:

https://github.com/luzmo-official/luzmo-flex-tutorial

Getting Began With Luzmo

Earlier than we get going, jump over to Luzmo and join a free trial. You may additionally wish to have a learn of one of many getting began guides listed beneath. On this article, I’ll be utilizing the Subsequent.js starter.

Getting began with Luzmo Knowledge Visualization and Subsequent.js
https://github.com/luzmo-official/luzmo-getting-started-next-js

Getting began with Luzmo Knowledge Visualization and Astro
https://github.com/luzmo-official/luzmo-getting-started-astro

Making a Google Analytics Dataset

To create information visualization, you’ll first want information! To attain this utilizing Luzmo, head over to the dashboard, choose Datasets from the navigation, and choose GA4 Google Analytics. Observe the steps proven within the UI to attach Luzmo along with your Google Analytics account.

With the setup full, now you can choose which reporting dimensions so as to add to your dataset. To observe together with this text, choose Customized choice.

Lastly, choose the next utilizing the search enter. System Class, Web page Title, Date, and Complete customers, then click on Import while you’re prepared.

You now have all the info required to construct the Google Analytics dashboard. You possibly can entry the dataset ID from the URL handle bar in your browser. You’ll want this in a later step.

For those who’ve adopted alongside from both of the primary two getting began guides, you’ll have your API Key, API Token, App server, and API host setting variables arrange and saved in a .env file.

Set up Dependencies

For those who’ve cloned one of many starter repositories, run the next to put in the required dependencies.

npm set up

Subsequent, set up the Luzmo React Embed dependency which exports the LuzmoVizItemComponent.

npm set up @luzmo/react-embed@newest

Now, discover web page.tsx positioned within the src/app listing, and add your dataset id as proven beneath.

Add the entry object from the destructured response and go entry.datasets[0].id onto the LuzmoClientComponent element utilizing a prop named datasetId.

And lastly, discover luzmo-client-component.tsx positioned in src/app/parts. That is the place you’ll be creating your charts.

Constructing a Donut Chart

The primary chart you’ll create is a Donut chart that reveals the varied gadgets utilized by guests to your website.

Add the next code to luzmo-client-component.tsx element.

There’s rather a lot happening within the above code snippet, and I’ll clarify all of it sooner or later, however first, I’ll must cowl a very difficult a part of the configuration.

Column IDs

You’ll discover the filters parameters, measure, and class content material all require a column id.

Within the filters parameters, the bottom line is named column_id, and within the measure and class, the bottom line is named column. Each of those are literally the column IDs from the dataset. And right here’s how you could find them.

Again within the Luzmo dashboard, click on into your dataset and search for the “extra dots” subsequent to every column heading. From the menu, choose Copy column id. Add every column ID to the keys within the configuration objects.

In my instance, I’m utilizing the Complete customers for the measure, the System class for the class, and the Date for the filter.

For those who’ve added the column IDs appropriately, you need to be capable to see a rendered chart in your display screen!

… and as promised, right here’s a breakdown of the configuration.

Preliminary Props Donut chart

The primary half is pretty easy. appServer and authKey are the setting variables you saved to your .env file, and authKey and authToken are destructured from the authorization request and handed into this element through props.

The kind prop determines which sort of chart to render. In my instance, I’m utilizing donut-chart, however you possibly can select from one of many many choices out there, area-chart, bar-chart, bubble-chart, box-plot, and plenty of extra. You possibly can see all of the out there choices within the Luzmo documentation beneath Chart docs.

<LuzmoVizItemComponent
appServer={course of.env.NEXT_PUBLIC_LUZMO_APP_SERVER}
apiHost={course of.env.NEXT_PUBLIC_LUZMO_API_HOST}
authKey={authKey}
authToken={authToken}
sort=’donut-chart’

The one factor I ought to level out is my use of Tailwind lessons: w-1/2 (width: 50%) and h-80 (top: 20rem). The LuzmoVizItemComponent ships with top 100%, so that you’ll must wrap the element with a component that has an precise top, otherwise you gained’t be capable to see the chart on the web page because it might be 100% of the peak of a component with no top.

Donut Chart Choices

The choices object is the place you possibly can customise the looks of your chart. It accepts many configuration choices, amongst which:

A title for the chart that accepts a locale with corresponding textual content to show.
A show title worth to find out if the title is proven or not.
A mode to find out if the chart is to be of sort donut or pie chart.
A legend choice to find out the place the legend may be positioned.

All of the out there configuration choices may be seen within the Donut chart documentation.

choices={{
title: {
en: `Gadgets from final 7 days`,
},
show: {
title: true,
},
mode: ‘donut’,
legend: {
place: ‘backside’,
},
}}

Donut Chart Slots

Slots are the place you possibly can configure which column out of your dataset to make use of for the class and measure.

Slots can comprise a number of measures, helpful for displaying two columns of information per chart, but when greater than two are used, one will change into the measure.

Every measure incorporates a content material array. The content material array, amongst many different configurations, can embrace the next:

A label and locale,
The column id from the dataset,
The datasetId,
The kind of information you’re displaying,
A format for the info.

The format used right here is Python syntax for floating-point numbers; it’s just like JavaScript’s .toFixed() technique, e.g quantity.toFixed(4).

The hierarchy sort is ​​the Luzmo normal information sort. Any textual content column is taken into account as an hierarchical information sort.

You possibly can learn extra within the Donut chart documentation about out there configuration choices for slots.

slots={[
{
name: ‘measure’,
content: [
{
label: {
en: ‘Total users’,
},
column: ‘<column id>’, // Total users
set: datasetId,
type: ‘numeric’,
format: ‘.4f’,
},
],
},
{
identify: ‘class’,
content material: [
{
label: {
en: ‘Device category’,
},
column: ‘<column id>’, // Device category
set: datasetId,
type: ‘hierarchy’,
},
],
},
]}

Donut Chart Filters

The filters object is the place you possibly can apply situations that can decide which information shall be proven. In my instance, I solely wish to present information from the final seven days. To perform this, I first create the date variable:

This might produce an ISO date string, e.g., 2024-08-21T14:25:40.088Z, which I can use with the filter. The filter makes use of Luzmo’s Filter Expressions, to find out if the date for every row of the info is bigger than or equal to the date variable. You possibly can learn extra about Filter Expressions in Luzmo’s Academy article.

filters={[
{
condition: ‘or’,
filters: [
{
expression: ‘? >= ?’,
parameters: [
{
column_id: ‘<column id>’, // Date
dataset_id: datasetId,
},
date,
],
},
],
},
]}

Constructing a Line Chart

The second chart you’ll be creating is a Line chart that shows the variety of web page views on every date from the final seven days from people who go to your website.

Preliminary Props Line Chart

As with the Donut chart, the preliminary props are just about the identical, however the sort has been modified to line-chart.

<LuzmoVizItemComponent
appServer={course of.env.NEXT_PUBLIC_LUZMO_APP_SERVER}
apiHost={course of.env.NEXT_PUBLIC_LUZMO_API_HOST}
authKey={authKey}
authToken={authToken}
sort=’line-chart’

Line Chart Choices

The choices for the Line chart are as follows, and the mode has been modified to line-chart.

choices={{
title: {
en: `Website visits from final 7 days`,
},
show: {
title: true,
},
mode: ‘grouped’,
}}

Line Chart Slots

The slots object is sort of the identical as earlier than with the Donut chart, however for the Line chart, I’m utilizing the date column from the dataset as an alternative of the gadget class, and as an alternative of class, I’m utilizing the x-axis slot sort. To make sure I’m formatting the info appropriately (by day), I’ve used stage 5. You possibly can learn extra about ranges within the docs.

slots={[
{
name: ‘measure’,
content: [
{
label: {
en: ‘Total users’,
},
column: ‘<column id>’, // Total users
set: datasetId,
type: ‘numeric’,
format: ‘.4f’,
},
],
},
{
identify: ‘x-axis’,
content material: [
{
label: {
en: ‘Date’,
},
column: ‘<column id>’, // Date
set: datasetId,
type: ‘datetime’,
level: 5,
},
],
},
]}

Line Chart Filters

I’ve used the identical filters as I used within the Donut chart.

Constructing a Bar Chart

The final chart you’ll be creating is a Bar chart that shows the variety of web page views for the highest ten most considered pages in your website.

Preliminary Props Bar Chart

As with the Donut and Line chart, the preliminary props are just about the identical, however the sort has been modified to bar-chart.

<LuzmoVizItemComponent
className=’w-full h-80′
appServer={course of.env.NEXT_PUBLIC_LUZMO_APP_SERVER}
apiHost={course of.env.NEXT_PUBLIC_LUZMO_API_HOST}
authKey={authKey}
authToken={authToken}
sort=’bar-chart’

Bar Chart Choices

The choices for the Bar chart are somewhat extra concerned. I’ve included some styling choices for the border-radii of the bars, restricted the variety of outcomes to 10, and sorted the info by the very best web page view rely first utilizing the kind by measure and route choices.

choices={{
title: {
en: `Web page views from final 7 days`,
},
show: {
title: true,
},
mode: ‘grouped’,
bars: {
roundedCorners: 5,
},
restrict: {
quantity: 10,
},
type: {
by: ‘measure’,
route: ‘desc’,
},
}}

Line Chart Slots

As with the Line chart, I’ve used an axis for one of many columns from the dataset. On this case, it’s the y-axis which shows the web page title.

slots={[
{
name: ‘measure’,
content: [
{
label: {
en: ‘Total users’,
},
column: ‘<column id>’, // Total users
set: datasetId,
type: ‘numeric’,
format: ‘.4f’,
},
],
},
{
identify: ‘y-axis’,
content material: [
{
label: {
en: ‘Page title’,
},
column: ‘<column id>’, // Page title
set: datasetId,
type: ‘hierarchy’,
},
],
},
]}

Bar Chart Filters

I’ve used the identical filters as I used within the Donut and Line chart.

What’s Subsequent

As you possibly can see, there are many sorts of charts and customization choices. As a result of that is simply an “peculiar” React element, you possibly can very simply make it configurable by an finish person by permitting choices to be set and unset utilizing HTML enter parts, checkbox, choose, date, and so forth.

However for me, the true energy behind this isn’t having to mutate information!

That is significantly pertinent when displaying a number of charts with completely different reporting dimensions. Sometimes, this could require every to have their very own utility perform or reformatting technique. That stated, setting column IDs and dataset IDs is somewhat fiddly, however after you have the element hooked as much as the dataset, you possibly can configure and reconfigure as a lot as you want, all with out having to rewrite information formatting capabilities.

For those who’re enthusiastic about bringing information to life in your utility and wish to get it executed with out the same old complications, guide a free demo with the Luzmo crew to study extra!