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

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

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

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.

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.

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.

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

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

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