使用 dscc-gen 更快地编写可视化图表

查看社区可视化图表中的更改的典型工作流程是： 将您的文件上传到 GCS，然后刷新 Looker Studio 报告。这是可行的，但意味着您可能需要等待很长时间才能看到更改。dscc-gen 支持一种工作流程，可让您立即查看可视化图表代码更改，从而减少编写社区可视化图表所需的时间。

要开始使用，请确保您已安装 npm 5.2.0 或更高版本和 gsutil。然后运行以下命令：

npx @google/dscc-gen viz

注意 ：如果您希望使用 yarn，请将 --yarn 作为实参传递。

首次配置

dscc-gen 随附默认本地数据集，该数据集可能并不能代表您要直观显示的数据。要更新此数据集以满足您的需求，请执行以下操作：

1. 在 src/index.json 中更新配置。
2. 运行 npm run update_message。这会将一个可视化图表部署到您的 dev 存储分区，该可视化图表会以易于复制的格式显示消息。
3. 创建新报告并将其连接到可代表您要直观显示的数据的数据集。
4. 添加一个社区可视化图表（使用 dev 存储分区作为组件 ID）。
5. 将该可视化图表的内容复制到 scripts/data/localData.js。您进行本地开发时会用到此数据。

脚本

以下脚本可用于使用 dscc-gen 创建的可视化图表项目。

命令	操作
npm run start	启动本地服务器并预览可视化图表
npm run update_message	使用 objectFormat 更新消息
npm run build:dev	在停用缓存的情况下，将文件从 ./src 构建到 ./build。
npm run push:dev	将文件从 build 复制到 dev 存储分区。
npm run build:prod	在启用缓存的情况下，将文件从 ./src 构建到 ./build。
npm run push:prod	将文件从 build 复制到 prod 存储分区。

注意：在构建和部署可视化图表之前，请确保将 src/index.js 中的 const LOCAL= 更改为 false。

update_message 命令默认为 objectFormat。要使用 tableFormat，请在 package.json 中将 update_message 脚本中的参数从 -f object 修改为 -f table。

Codelab

要了解如何使用 Codelab 工具，请访问 dscc-gen codelab。