[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.