Community Visualizations: Tracking filter state

Community Visualizations: Tracking filter state


[MUSIC PLAYING] YULAN LIN: Hi. My name is Yulan Lin, and
I’m a Developer Advocate for Data Studio. Today, I’m going to be
talking about best practices for keeping track of how your
community visualization is being used as a chart filter. To do that, let’s
first take a look at how first-party charts
in Data Studio do it. And so, if I have
this pie chart here that’s acting as a chart
filter, if I click on it, I can see which slice of the
pie is being used as a filter, because there’s some
sort of visual cue. In this case, this filter slice
that I’ve selected is brighter and the opacity has changed
on the rest of the chart. So when I write a
community visualization, I also want to be able to
reflect, visually, how it’s being used as a chart filter. So I click on a bar,
click on another bar, and I can see that there’s this
red highlight, this red outline to tell me which dimensions
are being used as a filter. It’s great if I can keep track
of the user clicks and all, but there are other ways
that a filter is cleared. For example, there’s
a reset action button. Or if I have it
working as a filter and I go from view into edit
mode, the filter clears. So in order to
keep track of that, Data Studio actually passes
you the value that’s currently being used as an interaction,
and we’ll talk a little bit more about what that means. But first, let’s
remind ourselves what the data you
send to Data Studio in order to apply a
filter looks like. You have this
interaction data object. You have concepts. You have this field ID,
which is the dimension ID that you want to filter on, and
values, which are the dimension values that you care about. And then Data Studio sends data
back about this applied filter. And so, in this case, this
interaction value object, which comes from
the data.interaction s.interactionId.value object– you don’t have to
remember all that, it’s in the documentation– comes back and it tells
you type is filter. So the user has selected, I want
to use this as a chart filter. And here, the data is kind of
concepts– here’s this concept ID or dimension
ID, and the values is an array of arrays
of selected value. In other words, it’s actually
a mirror of the thing that you send to Data Studio
in order to apply a filter. And so, for example, if
you have a bar chart acting as a single-value filter,
so I’m saying dimension ID and I’m going to
send the value Spanish. This is the data you send
to Data Studio saying, like, I want a filter on
dimension ID equals Spanish. Data Studio’s going to send
back an acknowledgment saying, I’ve applied this filter on
dimension ID equals Spanish. How about when a
visualization is no longer acting as a filter? For example, if I’ve
acted as a filter and now I’m clicking
on the reset action, how does my chart know when to
take the red highlights off? The value it sends back will
still have the type filter, but the data will be undefined. So you should be checking
kind of this interaction value object for the data and
whether or not it’s undefined. So for example, I would
have some code that writes, if interactionValue.data
is undefined, I’m going to then
clear the outline because I know it’s
no longer acting as a filter of other
things on my dashboard. Else, if it’s not
undefined, then it’s currently acting as a filter and
I want to outline certain bars. And the data for which bars I
should be highlighting is going to be in this .data object. And so this is how I
actually write my own code. So in summary,
I’ve kind of given you a quick overview of this
interaction value object and how you can use it to
keep track of whether or not and how your
visualization is acting as a filter for other
components on your dashboard. This will help you
to add functionality to your community
visualizations and also have a more helpful UI. So you should go
to developers.googl e.com/datastudio/visualization. Share it on social media using
the hashtag #datastudiodevs or submit to our showcase.

2 thoughts on “Community Visualizations: Tracking filter state

Leave a Reply

Your email address will not be published. Required fields are marked *