[MUSIC PLAYING]
YULAN LIN: Hi, my name is Yulan Lin,
and I'm a developer advocate for Data Studio.
In this video, we're going to talk
about writing a configuration for a community visualization.
Data Studio Community visualizations
allow you to create custom components that
integrate seamlessly with your data through your dashboards.
So in the configuration, it's a JSON
that provides options that show up in the Property panel.
You have data, style, and interactions.
And it's essentially the contract between you
and the report editor as to what's
possible with this visualization.
As I talk about the configuration,
pay attention to whether or not brackets are square
or whether they're curly and the different nesting structures.
So there's three keys.
There's data, style, and interactions.
And so for the data key, you have a list of data sections.
Each section has an ID, a label which
is rendered in the Property panel, and different elements.
For example, this is a metric element.
It has an ID, has a label, which, again, shows up
in the Property panel, a type--
in this case, metric--
and options.
So you can say there must be at least one field in here,
or you can have up to five fields in here.
And the dimension data element looks relatively similar.
It has an ID, a label.
The type is dimension.
But there's one more option, which is supported types.
And the three enums that are possible
here are time, geo, and default. And the supported types key
tells Data Studio what kinds of data
are possible to put into this data element.
Finally, there's the max results data element.
You have an ID.
You have a label.
The type is max elements, or max results.
And there is one option, which is max.
And this number configures how many results Data Studio
will return to your visualization.
In this case, Data Studio would only
return up to 10 rows of data to the visualization.
Now let's look at the style configuration.
The style configuration is the list of style sections.
So again, you have an ID, a label
which is rendered in the Property panel,
and a list of elements.
A style element looks something like this.
You have an ID, which is used to access the selection later
when you write your JavaScript, a label
which shows up in the Property panel,
the type of style element, and the default value.
Let's talk about the different style element types.
So this is a noncomprehensive list,
but what I want to show you here is that the type maps
to the icon and the selector that
is rendered in the Property panel
when you create a style element.
And so you have different color selectors, an opacity selector,
a checkbox, and a border radius selector, shown on this slide.
Next, let's talk about interactions.
Interactions configuration is just
a list of interactions elements, so there's no extra nesting
here.
And you have an ID, and you have supported actions.
So in this case, I'm configuring a community visualization
that supports chart filter interactions.
If this were not configured, you would not
be able to use this visualization
to act on other charts in the Data Studio dashboard.
So let's take a look at the Property panel in Data Studio
and how that maps to these different parts
of the configuration.
Here I have a community visualization
that literally just renders a heading,
but what we're interested in is the Property panel.
And so if you look at the data section of the Property panel,
this mandatory data is the data section label.
And then x metric, y metric, and z metric are all data element
labels.
And I have it configured that there's a min of 1
and a max of 1 for each of these data elements.
So Data Studio slots a field into them
and also will not let me remove them
because there is a minimum of one field in these.
If you look at the second section,
the section label is optional data.
And the data element labels are size metric, color dimension,
and date dimension.
And they're empty because I don't have a minimum configured
in the data configuration.
If I click on Add Dimension under Date Dimension,
you'll actually note that only time like fields show up.
And that's because I set supported types
to time in the configuration.
Next thing we'll show is the interactions
and this Apply Filter checkbox.
So this checkbox will only show up
if you have interactions configured in the interaction
section of your community visualizations configuration
JSON file.
Now let's take a look at style.
So similarly to data, you have a style section heading.
In this case, it's highlight colors.
And then you also have the element labels.
And so they're either rendered as text,
or they show up as tool tips as you hover over different style
elements.
And you see here different types of style elements.
You have a dropdown select.
You have a checkbox.
This is a fill color selector and an opacity selector.
And here I have a second style section,
where it's labeled Highlight Text.
And the element labels are Font Size and Font Family.
So let's take a breath.
That was a ton of information about the configuration.
But essentially, what you need to know
is that the configuration is a contract
between the visualization developer
and the report editor as to what options
are available for the visualization.
And these options show up in the Property panel.
To learn more about Data Studio Community Visualizations,
visit our documentation at developers.googl
e.com/datastudio/visualization.
And connect with us on social media using the hashtag,
#datastudiodevs.