Mit dscc-gen Visualisierungen schneller schreiben

Der typische Workflow, um Änderungen an Ihrer Community-Visualisierung zu sehen, besteht darin, Ihre Dateien in GCS hochzuladen und dann Ihren Data Studio-Bericht zu aktualisieren. Das funktioniert zwar, aber Sie müssen möglicherweise lange warten, bis die Änderungen angezeigt werden. Mit dscc-gen ermöglicht einen Workflow, mit dem Sie Änderungen am Visualisierungscode sofort sehen können. So lässt sich die Zeit verkürzen, die zum Schreiben einer Community-Visualisierung erforderlich ist.

Prüfen Sie, ob npm 5.2.0 oder höher und gsutil installiert sind. Führen Sie dann Folgendes aus:

npx @google/dscc-gen viz

Hinweis: Wenn Sie Yarn verwenden möchten, übergeben Sie --yarn als Argument.

Ersteinrichtung

dscc-gen enthält ein standardmäßiges lokales Dataset, das wahrscheinlich nicht repräsentativ für die Daten ist, die Sie visualisieren möchten. So aktualisieren Sie dieses Dataset nach Bedarf:

1. Aktualisieren Sie die Konfiguration unter src/index.json.
2. Führen Sie npm run update_message aus. Dadurch wird eine Visualisierung in Ihrem dev Bucket bereitgestellt, in der die Nachricht in einem Format angezeigt wird, das sich leicht kopieren lässt.
3. Erstellen Sie einen neuen Bericht und stellen Sie eine Verbindung zu einem Dataset her, das repräsentativ für die Daten ist, die Sie visualisieren möchten.
4. Fügen Sie eine Community-Visualisierung hinzu und verwenden Sie Ihren dev Bucket als Komponenten ID.
5. Kopieren Sie den Inhalt der Visualisierung nach scripts/data/localData.js. Diese Daten werden verwendet, wenn Sie lokal entwickeln.

Scripts

Die folgenden Skripts sind für Visualisierungsprojekte verfügbar, die mit dscc-gen erstellt wurden.

Befehl	Aktion
npm run start	Starten Sie den lokalen Server und rufen Sie eine Vorschau Ihrer Visualisierung auf.
npm run update_message	Aktualisieren Sie die Nachricht mit dem objectFormat.
npm run build:dev	Erstellen Sie Dateien aus ./src in ./build, wobei das Caching deaktiviert ist.
npm run push:dev	Kopieren Sie die Dateien aus build in Ihren dev-Bucket.
npm run build:prod	Erstellen Sie Dateien aus ./src in ./build, wobei das Caching aktiviert ist.
npm run push:prod	Kopieren Sie die Dateien aus build in Ihren prod-Bucket.

Achtung: Bevor Sie Ihre Visualisierung erstellen und bereitstellen, müssen Sie const LOCAL= in src/index.js in false ändern.

Der update_message Befehl verwendet standardmäßig das objectFormat. Wenn Sie das tableFormat verwenden möchten, bearbeiten Sie die Parameter im update_message Skript in package.json von -f object zu -f table.

Codelab

Informationen zur Verwendung der Tools finden Sie im Codelab zu dscc-gen codelab.