Making Charts Interactive

So far, we have a beautiful server-side rendered dashboard, but we haven’t done anything yet that is LiveView specific. In this section, we’ll change that. We’ll give our users the ability to filter the survey results chart by demographic, and we’ll see how we can re-use the reducers we wrote earlier to support this functionality.

In this lesson, we’ll walk through building out a “filter by age group” feature, and leave it up to you to review the code for the “filter by gender” feature.

How to filter by age group

It’s time to make the component smarter. When it’s done, it will let users filter the survey results chart by demographic data. Along the way, we’ll get another chance to implement event handlers on a stateful component. All we need to do is build a form for various age groups, and then capture a LiveView event to refresh the survey data with a query.

We’ll support age filters for all, under 18, 18 to 25, 25 to 35, and over 35. Here’s what it will look like when we’re done:

It’s a pretty simple form with a single control. We’ll capture the form change event to update a query, and the survey will default to the unfiltered all when the page loads.

Let’s get started.

How to build the age group query filters

We’ll begin by building a set of query functions that will allow us to trim our survey results to match the associated age demographic. We’ll need to surface an API in the boundary code and add a query to satisfy the age requirement in the core. The result will be consistent, testable, and maintainable code.

We started with adding a few functions to the core in pento/lib/pento/catalog/product/query.ex. First, make sure you alias Pento.Accounts.User ...