[MUSIC PLAYING]
YULAN LIN: Hi.
My name is Yulan Lin, and I'm a developer advocate
for Data Studio.
Community visualizations augment the kinds
of charts and visualizations that you can add
to your Data Studio dashboard.
In this video, we're going to talk specifically
about the configuration file.
This is the file that defines how your user can interact
with a community visualization.
Quick vocabulary note.
When I say "you" in this video, I'm
going to mean the visualization developer.
And when I say "user," I mean the person
who is loading the visualization into a Data Studio dashboard.
Back to the configuration file.
There's three key parts to the Data Studio community
visualizations configuration file.
There's a data, style, and interactions part.
Let's start with the data section.
When you define the data part of your configuration, what
it actually does is define what shows up
in the data half of the Property panel in Data Studio.
So here I've screenshotted that part of the Property panel.
But how does this translate into the Property panel,
or how do I define it?
If you look at a data element, it
defines each individual section where you can load data
into your visualization.
So there is an ID.
There's a label that's rendered to the end user.
There's a type.
There's options, and different types of different options.
There's three types of data elements.
You have dimension and metric elements,
which render in the Property panel as places
where you can load a dimension or a metric
into your visualization.
But there's also this third type, the max results type.
So this is the max results data element.
The type is max results.
And it defines the max number of rows
that Data Studio will return to your visualization.
If you don't define this, Data Studio
will actually return 2,500 rows max to your community
visualization.
How do these data elements then fit together
into the whole data part of your config?
So the data config structure actually
consists of a list of data sections.
So each data section has an ID, a label that
is rendered in the Property panel
as a heading for a group of data elements,
and then you also define a list of data elements
that belong to this data section.
And so a data config can actually
have multiple data sections defined.
The next thing we'll talk about is the style section.
This is where you can change the styling of a visualization.
And in order to pick what renders in the style
section for your community visualization,
you have to define different style elements.
So here's a sample style element.
You have an ID, which defines how your visualization
code is going to access this data later on.
You have a label, which renders as a Tooltip.
A type, which defines the type of style
selector that is rendered.
So in this case, I've defined an opacity selector.
You can also have a checkbox.
You can have different color selectors.
All these can be found in the reference
section of our documentation.
And then you can also define a default value.
Before the user has selected anything,
what is the default of this particular style section?
What does the style config overall look like?
Similarly to the data config, you
have style sections that then group style elements together.
So you have an ID.
You have a label that says, this is
the header for this grouping of style elements.
And then you have a list of style elements.
And again, you can have multiple style sections within the style
config.
The last thing we're going to talk about is interactions.
Whether or not this checkbox that
says Interactions Apply Filter shows up
in your property panel.
And the way you define that is through defining
this interaction element inside of your config.
This interaction element has an ID,
and it has a list of supported actions.
So if you have supportedActions is a list with this enum
filter, the Apply Filter checkbox will show up.
And your community visualization will
be able to act as a chart interaction filter.
And the interaction config is a list
of these interaction elements.
Unlike the data and the style configs,
though, there's no intermediate section grouping.
It's just a list of interaction elements.
So in this video, I've talked through the three sections
of a visualization config.
You have data, style, and interactions.
These define the parameters by which
your user will interact with your Data Studio community
visualization.
Thanks for watching, and I hope you continue
to build cool visualizations.
To learn more, visit developers.googl
e.com/datastudio/visualization.
When you build something cool, share it
on social media using the hashtag #DataStudioDevs.