Data Studio Community Visualization Local Development Template

Data Studio community visualizations allow you to write custom JavaScript visualizations for Google Data Studio.

About this template

This template provides

1. An opinionated workflow for developing community visualizations
2. A local development workflow with immediate feedback
3. Scripts to manage building and deploying your visualization

Files included

To develop your visualization, you should be editing the files in the [./src] directory.

File	Template location	Documentation
Manifest	src/manifest.json	manifest reference
Config	src/index.json	config reference
JavaScript	src/index.js	write viz code
CSS	src/index.css	[write css code]

Using this template

To create a new community visualization based on this template, run the command

npx @google/dscc-gen viz

After running this command (and answering some prompts), you will have a minimal working visualization and have set GCS buckets for a dev and prod version. Edit src/index.js to see changes.

Update your local data

1. Update the dimensions and metrics your visualization requires in src/index.json
2. Run the command npm run update_message to build and deploy your visualization to your "dev" bucket.
3. Create a new report and connect to the dataset you want to use for your sample message.
4. Use your "dev bucket" to add this visualization to your report. It will display div with the data returned by the ds-component helper library.
5. Copy the data in the visualization and replace the empty object in src/localData.js. This is the "local data" that you will develop with.

Local development workflow

To develop locally:

1. Change const LOCAL to true in src/index.js.
2. Run npm run start to start a local server. A browser tab should open with the visualization you just deployed in Data Studio.
3. Make changes in src/index.js and src/index.css, save the changes, and see them reflected in the browser tab.

Deployment workflow

You should have two deployments of your visualization: a "dev" version, where caching is disabled and where you normally develop, and a "prod" version, where caching is enabled and you only push "finished" visualizations.

To deploy:

1. Change const LOCAL to false in src/index.js
2. Run the appropriate build and push command (see below)
3. Load your viz in Data Studio

Key commands:

To update the message:

npm run update_message

Note: The message update script uses the object format by default. To update the message with the table format, change the -f parameter update_message script in package.json from object to table.

Build the "dev" (devMode is true) visualization

npm run build:dev

Deploy the "dev" (devMode is true) visualization

npm run push:dev

Build the "prod" (devMode is false) visualization

npm run build:prod

Deploy the "prod" (devMode is false) visualization

npm run push:prod

Scripts

The build and deploy scripts can be found in the ./scripts/bin directory.