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

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

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

npx @google/dscc-gen viz

首次配置

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 存储分区。

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

Codelab

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

dscc-gen codelab