The typical workflow for seeing changes in your community visualization is to upload your files to GCS, then refresh your Looker Studio report. This works, but means that you can spend a lot of time waiting to see changes. dscc-gen enables a workflow to immediately see your visualization code changes, reducing the time it takes to write a community visualization.
To get started, make sure npm 5.2.0 or later and gsutil are installed. Then, run:
npx @google/dscc-gen viz
First Time Configuration
dscc-gen comes with a default local dataset that's probably not representative
of the data you want to visualize. To update this dataset to meet your needs:
- Update your config at
src/index.json. - Run
npm run update_message. This deploys a visualization to yourdevbucket that displays the message in a format that's easy to copy. - Create a new report and connect to a dataset that's representative of the data you want to visualize.
- Add a community visualization using your
devbucket as your component ID. - Copy the contents of the visualization to
scripts/data/localData.js. This data will be used when you develop locally.
Scripts
The following scripts are available for visualization projects created with
dscc-gen.
| Command | Action |
|---|---|
npm run start
|
Start the local server and preview your visualization |
npm run update_message |
Update the message using the objectFormat |
npm run build:dev
|
Build files from ./src into ./build with
caching disabled. |
npm run push:dev |
Copy the files from build to your dev bucket. |
npm run build:prod
|
Build files from ./src into ./build with
caching enabled. |
npm run push:prod
|
Copy the files from build to your prod
bucket. |
The update_message command defaults to the objectFormat. To use the
tableFormat, edit the parameters in the update_message script in
package.json from -f object to -f table.
Codelab
To learn how to use the tooling, review the dscc-gen codelab.
