dscc-gen을 사용해 시각화를 더 빠르게 작성하기

커뮤니티 시각화에서 변경사항을 확인하는 일반적인 워크플로는 파일을 GCS에 업로드한 다음 Looker Studio 보고서를 새로고침하는 것입니다. 이 방법으로 문제가 해결되지만 변경사항을 확인하는 데 시간이 많이 걸릴 수 있습니다. 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.jsonupdate_message 스크립트에서 매개변수를 -f object에서 -f table로 수정합니다.

Codelab

도구 사용 방법은 dscc-gen Codelab을 참조하세요.

dscc-gen Codelab