[MUSIC PLAYING]
YULAN YIN: Hi.
My name is Yulan Lin.
And I'm a developer advocate for Data Studio.
In this video, I'm going to talk about the message
that Data Studio sends in community visualization.
As a reminder, Data Studio Community Visualizations
allow you to create custom components that
integrate seamlessly with your Data Studio dashboards.
In a previous video, we talked about what
happens when you load a community
visualization in a report.
As a reminder, the manifest path is entered, a bunch of stuff
happens, and then Data Studio sends a post message
to the component's iFrame.
We're going to focus in on this part, where Data Studio sends
a post message with data, style, and interactions information.
For extra clarity, I do want to emphasize
that the information sent by Data Studio
actually passes through a transform
from the ds-component JavaScript helper library.
And I'm going to be talking about the transformed message.
This message has five keys--
fields, tables, style, interactions, and theme.
The fields key is essentially the metadata
for the information in your visualization.
It's an object of fields keyed by their data element ID,
which is defined in the visualization config.
Here, I've called it the configId.
Each configId corresponds to a list of fields.
And the number of fields in the list corresponds
to the number of data fields a report editor slots
into the space defined by a data element.
Inside each of the fields, you have an ID,
which is a unique Data Studio generated
string, the human readable name, the type of the field,
and the concept type, which is either dimension or metric.
Tables is normally what we call the core of the data
you want in a visualization.
If you were building a table visualization, for example,
tables would consider the information
that would be in the rows.
The exact format of tables depends
on the transform you pick as a ds-component option.
There are two built-in transforms, object format
and table format, which are optimized to map easily
to the data format expected by different JavaScript
visualization libraries.
Both transforms, however, contain two things--
default tables, which is the information
from any visualization, and comparison, which
is where comparison information will show up
if date comparison ranges are configured
in the visualization.
Style contains the information associated with the report
editor selected style.
The style objects are indexed by their configId,
which is the style element ID defined in the visualization.
So here, reverseColor and fillColor
are style element IDs.
Value corresponds to the report editor selected value,
and default value corresponds to the default
value set in the config.
Note that color style elements have an object as their value,
with the actual hex color returned in the color property.
Interactions contains information
about whether this visualization is
configured to interact with other dashboard components.
If no interactions are defined in the config,
this will be an empty object.
However, if interactions are defined,
the interactionsConfigId will correspond
to the configId of the interactions element
in the config.
And if the checkbox is checked, type will be FILTER.
And if data is non-empty, the visualization
is currently acting as a filter.
And the data will reflect the current filter state.
Theme contains the theme style object.
I won't go through the whole object here,
but it includes report theme information, like font family
and accent fill color and theme font color.
So in summary, the message includes fields, tables, style,
interactions, and theme.
So in this video, we did a deep dive into the information
that Data Studio passes to a community visualization, which
allows you to transform raw data into charts, stories,
and insights.
For more information, visit developers.googl
e.com/datastudio/visualization.
And connect with us on social media using the hashtag
#datastudiodevs.
[MUSIC PLAYING]