Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Aby zobaczyć zmiany w wizualizacji utworzonej przez społeczność, zwykle
prześlij pliki do GCS, a następnie odśwież raport Looker Studio. To działa,
ale oznacza to, że oczekiwanie na pojawienie się zmian może zająć dużo czasu. dscc-gen
umożliwia przepływowi pracy natychmiastowego sprawdzenia zmian w kodzie wizualizacji, ograniczając
czas potrzebny na opracowanie wizualizacji utworzonej przez społeczność.
dscc-gen zawiera domyślny lokalny zbiór danych, który prawdopodobnie nie jest reprezentatywny
z danymi, które chcesz zwizualizować. Aby dostosować ten zbiór danych do swoich potrzeb:
Skopiuj zawartość wizualizacji do scripts/data/localData.js. Ten
dane będą używane podczas programowania lokalnego.
Skrypty
W projektach wizualizacji utworzonych za pomocą
dscc-gen
Polecenie
Działanie
npm run start
Uruchom serwer lokalny i wyświetl podgląd
wizualizacja
npm run update_message
Zaktualizuj wiadomość za pomocą obiektu objectFormat
npm run build:dev
Utwórz pliki z ./src w ./build za pomocą
buforowanie wyłączone.
npm run push:dev
Skopiuj pliki z folderu build do zasobnika dev.
npm run build:prod
Utwórz pliki z ./src w ./build za pomocą
buforowanie włączone.
npm run push:prod
Skopiuj pliki z usługi build do urządzenia prod
zasobnika.
Wartość domyślna polecenia update_message to objectFormat. Aby użyć funkcji
tableFormat, zmodyfikuj parametry w skrypcie update_message w
package.json od -f object do -f table.
Ćwiczenia z programowania
Aby dowiedzieć się, jak używać tego narzędzia, zapoznaj się z laboratorium dscc-gen.
[null,null,["Ostatnia aktualizacja: 2025-07-25 UTC."],[[["\u003cp\u003e\u003ccode\u003edscc-gen\u003c/code\u003e accelerates community visualization development in Looker Studio by enabling immediate visualization of code changes.\u003c/p\u003e\n"],["\u003cp\u003eTo utilize \u003ccode\u003edscc-gen\u003c/code\u003e, ensure npm 5.2.0 or later and gsutil are installed, then execute the command \u003ccode\u003enpx @google/dscc-gen viz\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eThe initial setup involves configuring the local dataset, deploying a visualization to your \u003ccode\u003edev\u003c/code\u003e bucket, and connecting to a representative dataset in Looker Studio.\u003c/p\u003e\n"],["\u003cp\u003eVarious scripts are provided for development, including \u003ccode\u003estart\u003c/code\u003e, \u003ccode\u003eupdate_message\u003c/code\u003e, \u003ccode\u003ebuild:dev\u003c/code\u003e, \u003ccode\u003epush:dev\u003c/code\u003e, \u003ccode\u003ebuild:prod\u003c/code\u003e, and \u003ccode\u003epush:prod\u003c/code\u003e, each serving specific functions in the workflow.\u003c/p\u003e\n"],["\u003cp\u003eA detailed codelab is available to guide users through the process of using the \u003ccode\u003edscc-gen\u003c/code\u003e tooling.\u003c/p\u003e\n"]]],[],null,["# Write your visualizations faster with dscc-gen\n\nThe typical workflow for seeing changes in your community visualization is to\n[upload](/looker-studio/visualization/upload-viz) your files to GCS, then refresh your Looker Studio report. This works,\nbut means that you can spend a lot of time waiting to see changes. [dscc-gen](https://github.com/googledatastudio/dscc-gen)\nenables a workflow to immediately see your visualization code changes, reducing\nthe time it takes to write a community visualization.\n\nTo get started, make sure [npm 5.2.0 or later](https://www.npmjs.com/get-npm) and [gsutil](https://cloud.google.com/storage/docs/gsutil) are installed. Then,\nrun: \n\n npx @google/dscc-gen viz\n\n| **Note:** If you prefer to use yarn, pass `--yarn` as an argument.\n\nFirst Time Configuration\n------------------------\n\n`dscc-gen` comes with a default local dataset that's probably not representative\nof the data you want to visualize. To update this dataset to meet your needs:\n\n1. [Update your config](/looker-studio/visualization/config-reference) at `src/index.json`.\n2. Run `npm run update_message`. This deploys a visualization to your `dev` bucket that displays the [message](/looker-studio/visualization/library-reference) in a format that's easy to copy.\n3. [Create a new report](https://lookerstudio.google.com) and connect to a dataset that's representative of the data you want to visualize.\n4. [Add a community visualization](/looker-studio/visualization/load-viz) using your `dev` bucket as your component ID.\n5. Copy the contents of the visualization to `scripts/data/localData.js`. This data will be used when you develop locally.\n\nScripts\n-------\n\nThe following scripts are available for visualization projects created with\n`dscc-gen`.\n\n| Command | Action |\n|--------------------------|--------------------------------------------------------------------------------------------------------------------|\n| `npm run start` | Start the local server and preview your visualization |\n| `npm run update_message` | Update the message using the [objectFormat](/looker-studio/visualization/library-reference#objectformat_reference) |\n| `npm run build:dev` | Build files from `./src` into `./build` with [caching](/looker-studio/visualization/caching) disabled. |\n| `npm run push:dev` | Copy the files from `build` to your `dev` bucket. |\n| `npm run build:prod` | Build files from `./src` into `./build` with [caching](/looker-studio/visualization/caching) enabled. |\n| `npm run push:prod` | Copy the files from `build` to your `prod` bucket. |\n\n| **Caution:** Before you build \\& deploy your viz, make sure you change `const LOCAL=` in `src/index.js` to `false`.\n\nThe `update_message` command defaults to the [objectFormat](/looker-studio/visualization/library-reference#objectformat_reference). To use the\n[tableFormat](/looker-studio/visualization/library-reference#tableformat_reference), edit the parameters in the `update_message` script in\n`package.json` from `-f object` to `-f table`.\n\nCodelab\n-------\n\nTo learn how to use the tooling, review the dscc-gen [codelab](https://codelabs.developers.google.com/codelabs/community-visualization-dscc-gen/).\n\n[](https://codelabs.developers.google.com/codelabs/community-visualization-dscc-gen/)"]]
