DEV Community

Cover image for Svelte + Flexmonster Pivot: Building an Interactive Dashboard of World Happiness
Daria Filozop
Daria Filozop

Posted on

Svelte + Flexmonster Pivot: Building an Interactive Dashboard of World Happiness

#frontend #svelte #analytics #webdev

Hi guys!

Recently, I was thinking about what new project I could create and ended up scrolling through Kaggle in search of a new interesting dataset. And actually, I found it! When I saw its caption, I understood—that’s it. Okay, I’m not gonna keep long intrigues. It’s the World Happiness Report—2024. I think it’s quite interesting data to explore because I’ve always been curious about which country people are the happiest in and which position in this rating is my own country.

As for the tech stack, I used Svelte. It’s a pretty new framework that is actively developing and gaining popularity nowadays. I did some brief research and found that it compiles your code at build time, making it much faster. Also, the community admires its readability, because it has a familiar structure based on HTML, CSS, and JavaScript. Since Svelte is similar to React, which I had experience using before, I thought it would be a good idea to try it out. As well, I was curious to see whether it’s really that good or just hype from the community. By the way, what do you think about Svelte rapidly gaining popularity? Have you tried it already? Would really appreciate your thoughts on it.

For data visualization, I’ve chosen Flexmonster. It’s a pivot grid library that helps conveniently organize and display your data. Moreover, Flexmonster recently announced its integration with Svelte, making it easier to start.

As a result, I want to get an interactive report based on Svelte and the World Happiness Report 2024 data.

Flexmonster Pivot Table

Flexmonster Charts

Flexmonster Charts Top 10

To achieve it, I took the next steps.

 

Step 1: Setting up the project 🔧

Firstly, you need to create a Svelte project. I was doing it using the command line:

npx sv create fm-svelte-app
cd fm-svelte-app
Enter fullscreen mode Exit fullscreen mode

Then get Flexmonster for your project:

npm install svelte-flexmonster --save-exact
Enter fullscreen mode Exit fullscreen mode

Note. Don’t forget to import Flexmonster styles:

import "flexmonster/flexmonster.css";
Enter fullscreen mode Exit fullscreen mode

And now, after these two easy steps, we can start coding!

 

Step 2: Building the Pivot Table 🔢

Next step is to add the <Flexmonster> component to App.svelte file for rendering the pivot table:

<Flexmonster
  toolbar={true}
  report={{
    dataSource: {
      type: "csv",
      filename: "/World-happiness-report-2024.csv"
    },
    ...
  }}
/>
Enter fullscreen mode Exit fullscreen mode

Here, you can see I enabled the Toolbar. You can also set its value to false if it’s more convenient for you to work without it.

 

Step 3: Setting fields to display 📝

I think this is quite an essential step in the whole project, because now it’s the time to decide which fields to use and how to display them. In my project, I grouped countries by regions and presented them this way:

rows: [
  { uniqueName: "Regional indicator" },
  { uniqueName: "Country name", sorting: "CountrySorting" }
]
Enter fullscreen mode Exit fullscreen mode

For measures, I wanted to display all the main info from the dataset, so I’ve chosen these parameters: Ladder score, Log GDP per capita, Social support, Healthy life expectancy:

measures: [
  { uniqueName: "Ladder score", aggregation: "average" },
  { uniqueName: "Log GDP per capita", aggregation: "average" },
  { uniqueName: "Social support", aggregation: "average" },
  { uniqueName: "Healthy life expectancy", aggregation: "average" }
]
Enter fullscreen mode Exit fullscreen mode

Why not only the Ladder score? It shows how happy people are (they rate their life wellbeing from 0 to 10), but it doesn’t explain why they feel that way. I thought it would be better to analyze which factors impact the level of happiness, so I’ve chosen three more (Log GDP per capita, Social support, and Healthy life expectancy).

Log GDP per capita measures the average income of people in a country,
Social support shows whether people have relatives or friends to count on in difficult times.
Healthy life expectancy displays the average number of years a newborn can live in good health, without major illness or disability.

 

Step 4: Numbers Formatting 📐

Here, I’ve noticed that some numbers in the dataset are five or more digits, which makes the data difficult to read and analyze. So, I formatted all numeric values to show exactly three digits after the decimal point:

formats: [
  {
    name: "",
    decimalPlaces: 3
  }
]
Enter fullscreen mode Exit fullscreen mode

By the way, Flexmonster has many number formatting options; you can read more about them on this documentation page.

 

Step 5: Sorting by Ladder Score 📈

Also, I wanted to structure the whole data more, so I sorted all rows in descending order by Ladder Score. You can easily achieve it by writing this code:

sorting: {
    column: {
        type: "desc",
        tuple: [],
        measure: {
            uniqueName: "Ladder score",
            aggregation: "average"
        }
    }

}
Enter fullscreen mode Exit fullscreen mode

 

Step 6: Customizing Ladder Score with Emojis 😃

Now, to make the dashboard look better, I decided to add emojis depending on the ladder score for each country:

function customizeCell(cell: any, data: any) {
    if (data.type !== "value")
        return;

    if (!data.measure || data.measure.uniqueName !== "Ladder score") return;

    const score = data.value;

    let emoji = "";

    if (score >= 7) {
        emoji = "😃";
    } else if (score >= 5) {
        emoji = "😊";
    } else if (score >= 4) {
        emoji = "😐";
    } else {
        emoji = "😢";
    }

    cell.text = cell.text + emoji;

}
Enter fullscreen mode Exit fullscreen mode

And don’t forget about adding the customizeCell function to <Flexmonster> component:

<Flexmonster
  toolbar={true}
  report={{
    dataSource: {
      type: "csv",
      filename: "/World-happiness-report-2024.csv"
    },
    ...
  }}
  customizeCell={customizeCell}
/>
Enter fullscreen mode Exit fullscreen mode

 

Step 7: Adding Charts 📊

Now it’s time for charts! Using them, I displayed information about the Ladder score in every country. Also, I decided to add to the filter values the top 10 happiest countries (You can do the same with the least happy countries, just by changing desc to asc):

slice: {
  rows: [{
    uniqueName: "Country name",
    sort: "desc",
    filter: {
      query: {
        top: 10,
        measure: "Ladder score"
      }
    }
  }],
  columns: [{ uniqueName: "[Measures]" }],
  measures: [
    { uniqueName: "Ladder score", aggregation: "average", format: "averageNumber" }
  ]
}
Enter fullscreen mode Exit fullscreen mode

As I’m using Flexmonster built-in charts, there’s no need to integrate other libraries; adding these lines is enough:

options: {
  viewType: "charts",
  chart: {
    type: "bar",
    showDataLabels: true
  }
}
Enter fullscreen mode Exit fullscreen mode

But if you prefer other charts, Flexmonster integrates with Highcharts, amCharts, Google Charts, and so on. You can learn more about integration options with other charting libraries in the docs.

 

Step 8: Customization and Styling 🎨

And here’s, honestly, my favourite part of every project — styling!

First things first, import into your App.svelte file your main css file, where you plan to set all customization settings:

import "./styles.css";
Enter fullscreen mode Exit fullscreen mode

I decided to do this project quite simple, but modern at the same time.I added borders to the grid, added some spacing, and chose a light gradient background to match the mood of the project. Nothing really complex and easy to do.

 

My results 🏆

This project was a great way for me to explore Svelte and its integration with Flexmonster. It was also quite enjoyable working with this dataset, learning which countries are the happiest in the world and analyzing how they may achieve this.

If you want to look closer at my project, I’ve shared it on my GitHub. Also, in the README, you can find a GIF showing the result.

Hope this article inspired you to experiment more with new tools and data visualization libraries.

I would also appreciate your thoughts and feedback. Feel free to ask any questions in the comments!

Top comments (3)

Collapse
 
anik_sikder_313 profile image
Anik Sikder •

Really cool project! I love how you combined Svelte’s modern, compile-time approach with Flexmonster’s powerful pivot grid to create an interactive dashboard, it’s a perfect match for exploring complex datasets like the World Happiness Report. Your choice to go beyond just the overall happiness score and include key factors like GDP, social support, and healthy life expectancy really adds depth to the analysis.

I’ve been curious about Svelte too, and your description of its speed and readability resonates with what I’ve heard from the community. It’s great to see Flexmonster integrating smoothly with Svelte, making it easier for developers to build rich data apps without tons of boilerplate.

How did you find working with the Flexmonster-Svelte integration in terms of developer experience and customization? Any tips for someone just starting with it?

Collapse
 
daria_filozop_bfe6aa68940 profile image
Daria Filozop •

Thanks a lot!

Using Flexmonster with Svelte was actually pretty easy! I had no difficulties with it. Most of the setup was just adjusting settings and styles.
In the beginning, I recommend you try small datasets. They will help you explore functionality on easier examples.

Also, Flexmonster has a Svelte GitHub sample you can check out. For smooth integration, follow the steps in their docs.
And of course, if you have any more questions, feel free to ask me!

Collapse
 
anik_sikder_313 profile image
Anik Sikder •

Thanks for the helpful advice! Starting with smaller datasets sounds like a smart way to get familiar with Flexmonster’s features without getting overwhelmed, I'll definitely take that approach.
I’ll check out the GitHub sample and docs as you suggested. It’s encouraging to hear that the integration was smooth for you; that kind of developer experience really makes a difference when exploring new tools.
Appreciate your openness to questions, I'll be diving in soon, and might reach out as I experiment more. It’s great to see projects like yours showing how Svelte and Flexmonster can work together so effectively