Docs

Docs

Visualizing Data in a Dashboard Using Charts

Learn how to use the Hilla Charts web component API to display chart data.

The dashboard view displays contact statistics. You already have all the required data in the MobX store, so you can calculate statistics using computed properties.

This chapter covers:

  • using computed properties,

  • using Hilla charts.

Creating a MobX Store for the Dashboard View

Create a new file, frontend/views/dashboard/dashboard-view-store.ts, and initialize a new MobX store:

import { crmStore } from 'Frontend/stores/app-store';
import { makeAutoObservable } from 'mobx';

class DashboardViewStore {
  constructor() {
    makeAutoObservable(this);
  }
}

export const dashboardViewStore = new DashboardViewStore();

Calculating Statistics with Computed Properties

All the data you need is already in CrmStore. Because of this, the dashboard store doesn’t need any state. It can use computed properties to calculate the required properties.

Add the following two computed properties to the class:

get contactCount() {
  return crmStore.contacts.length;
}

get companyStats() {
  const countByCompany = crmStore.contacts.reduce((map, contact) => {
    const name = contact.company?.name || "Unknown";
    return map.set(name, (map.get(name) || 0) + 1);
  }, new Map<string, number>());

  return Array.from(countByCompany.entries()).map(([company, employees]) => ({
    name: company,
    y: employees,
  }));
}

  • contactCount() is straightforward; it returns the length of the contacts array.

  • companyStats() is more complex. First, it uses a reduce operation to produce a Map of employee count per company. Then, it transforms these entries into objects with name and y properties using the map operator. This gives you an array of values that’s compatible with the Hilla pie chart API.

Displaying a Pie Chart Using Vaadin Charts

Add the following three imports to dashboard-view.ts:

import '@vaadin/charts';
import '@vaadin/charts/src/vaadin-chart-series';
import { dashboardViewStore } from './dashboard-view-store';

Next, update the template in the render() method:

render() {
  return html`
    <div class="text-xl mb-xl">
      ${dashboardViewStore.contactCount} contacts
    </div>

    ${this.getCompanyStats()}
  `;
}

The chart template is split into a separate method, getCompanyStats().

getCompanyStats() {
  if (dashboardViewStore.companyStats.length === 0) {
    return html`<p>Loading stats...</p>`;
  } else {
    return html`
      <vaadin-chart type="pie">
        <vaadin-chart-series
          .values=${dashboardViewStore.companyStats}
        ></vaadin-chart-series>
      </vaadin-chart>
    `;
  }
}

The template shows a loading message if the contacts haven’t loaded yet, and a pie chart using the computed companyStats property, if they have loaded.

In your browser, verify that you can see the pie chart. Try going to the contacts page and add or remove contacts, and then verify that the dashboard reflects the changes.

Dashboard view showing a pie chart of employees per company
Note
Hilla Charts is a commercial add-on library.

You can get a free trial by following the instructions in the pop-up. Students can get free licenses through the Hilla student program.