1. Wprowadzenie
Studio danych Google umożliwia bezpłatne tworzenie dynamicznych, interaktywnych paneli z atrakcyjnymi wizualizacjami danych. Wizualizacje utworzone przez społeczność to funkcja Studia danych, która umożliwia tworzenie niestandardowych wizualizacji w JavaScript, które można zintegrować z raportami Studia danych.
Czego się nauczysz
Z tego laboratorium dowiesz się:
- Jak działa wizualizacja utworzona przez społeczność w Studiu danych Google
- Jak utworzyć wizualizację utworzoną przez społeczność za pomocą naszego narzędzia do tworzenia szablonów wiersza poleceń
- Jak używać bibliotek wizualizacji JavaScript do tworzenia wizualizacji utworzonych przez społeczność
- Jak zintegrować wizualizację utworzoną przez społeczność z panelem Studia danych
Czego potrzebujesz
Aby ukończyć to ćwiczenie, potrzebujesz:
- dostęp do internetu, przeglądarki i terminala oraz ulubiony edytor tekstu;
- konto Google,
- Dostęp do zasobnika Cloud Storage w Google Cloud
- Znajomość języka JavaScript, Node.js i wiersza poleceń.
W tym ćwiczeniu zakładamy, że:
- Masz już utworzoną wizualizację utworzoną przez społeczność (TODO link first codelab)
- znajomość Google Cloud Storage,
Aby rozpocząć, skopiuj ten raport , klikając 
w prawym górnym rogu. Podczas wykonywania ćwiczeń z programowania pozostaw ją otwartą na innej karcie.
2. Krótka ankieta
Dlaczego wybierasz ten codelab?
Jak zamierzasz korzystać z tego laboratorium/samouczka?
Jak oceniasz korzystanie ze Studia danych?
Które z poniższych stwierdzeń najlepiej opisuje Twoje doświadczenie?
Aby przesłać informacje z ankiety, przejdź na następną stronę.
3. Tworzenie wizualizacji utworzonych przez społeczność za pomocą dscc-gen
dscc-gen
dscc-gen to narzędzie wiersza poleceń, które udostępnia opinie na temat szablonów i przepływów pracy w przypadku wizualizacji utworzonych przez społeczność i oprogramowania sprzęgającego utworzonego przez społeczność. Szablon wizualizacji społecznościowej zawiera działającą wizualizację i przepływ pracy, który umożliwia natychmiastowe sprawdzenie zmian w kodzie wizualizacji, oraz skrypty do weryfikowania, tworzenia i wdrażania wizualizacji.
Konfiguracja
dscc-gen używa gsutil w skryptach wdrażania oraz npm i webpack do tworzenia kodu JavaScript wizualizacji utworzonych przez społeczność.
- Zainstaluj npm na komputerze lokalnym.
- Zapoznaj się z krótkim wprowadzeniem do gsutil i skonfiguruj zasobnik Google Cloud Storage.
- Przejdź do katalogu lokalnego, w którym chcesz umieścić projekt.
4. Rozpocznij nowy projekt wizualizacji utworzonej przez społeczność dscc-gen
Otwórz terminal i uruchom polecenie:
npx @google/dscc-gen viz
dscc-gen poprosi Cię o nazwę projektu, lokalizację pamięci GCS „dev” i lokalizację pamięci „prod”. Wpisz lokalizację jako identyfikator URI z protokołem gs, np. gs://my-gs-project/example-dev. „Lokalizacja” może być zasobnikiem Cloud Storage lub folderem w tym zasobniku. Obie lokalizacje pamięci muszą być różne. Narzędzie sprawdzi, czy masz dostęp do wpisanych wartości. Jeśli lokalizacje nie istnieją, zostaną utworzone.
Gdy dscc-gen utworzy nową wizualizację utworzoną przez społeczność, wyświetli instrukcje, jak zacząć z niej korzystać. Terminal będzie wyglądać mniej więcej tak (wpisane przez Ciebie dane są wytłuszczone kursywą):
$ npx @google/dscc-gen viz
npx: installed 345 in 14.957s
? Project name barchart
? What is your GCS dev directory? gs://community-visualizations-codelab/barchart-dev
? What is your GCS prod directory? gs://community-visualizations-codelab/barchart-prod
Installing dependencies...
Created new community viz: barchart
cd barchart and npm run start to begin working on your viz!
Aby utworzyć wizualizację, będziesz edytować pliki w src/, a konkretnie index.js, index.json i index.css.
Pliki w dist/ umożliwiają wyświetlenie podglądu wizualizacji lokalnie w przeglądarce. webpack.config.js służy do lokalnego uruchamiania wizualizacji. README.md zawiera omówienie plików szablonu i poleceń.
5. Wyświetlanie podglądu wizualizacji lokalnie
Postępuj zgodnie z sugerowanymi instrukcjami i uruchom w terminalu te polecenia:
cd <folder name>
npm run start
Otworzy się przeglądarka ze stroną internetową, która wygląda tak:
Więcej informacji znajdziesz w następnym kroku.
6. [Info] Jak ma działać przepływ pracy dscc-gen
Szablon wizualizacji dscc-gen zawiera działającą wizualizację i instrukcje korzystania z niego. Oto główne funkcje:
Zaktualizuj lokalny komunikat: w szablonie znajduje się przykładowy komunikat, ale prawdopodobnie nie odzwierciedla on przypadku użycia, który chcesz obsługiwać. Pobierz przykładowe dane odzwierciedlające wizualizację, którą chcesz utworzyć.
Lokalny proces programowania: użyj danych produktów dostępnych lokalnie z sekcji Aktualizowanie danych lokalnych, aby napisać i przetestować kod lokalnie.
Tworzenie i wdrażanie wizualizacji: utwórz kod i prześlij go do zasobników Google Cloud Storage.
Wczytaj wizualizację w Studiu danych: dodaj wizualizację do raportu w Studiu danych.
7. Definiowanie konfiguracji
Plik konfiguracyjny to umowa między Tobą (deweloperem wizualizacji) a edytorem raportu, który korzysta z wizualizacji. Określa opcje dostępne po załadowaniu wizualizacji do Studia danych.
W przypadku wizualizacji w postaci wykresu słupkowego konfiguracja będzie zawierać 1 wymiar i 1 rodzaj danych, a także element stylu, który umożliwi edytującemu raport zmianę stylu wykresu słupkowego.
Zastąp zawartość pliku src/index.json tym kodem: Pamiętaj, aby uwzględnić wszystkie nawiasy. Jeśli przepisujesz kod, zwróć uwagę na różnicę między nawiasami kwadratowymi i klamrowymi oraz na strukturę zagnieżdżenia.
index.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "dimension",
"label": "Dimensions",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "metric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "barStyling",
"label": "Bar Styles",
"elements": [
{
"id": "barColor",
"label": "Bar Color",
"type": "FILL_COLOR",
"defaultValue": {
"color": "#1E555C"
}
}
]
}
]
}
8. Pobieranie zaktualizowanej wiadomości
Aby zaktualizować dane przechowywane lokalnie, uruchom:
npm run update_message
Terminal powinien wyglądać mniej więcej tak:
barchart $ npm run update_message
> @ update message /Users/Code/barchart
> dscc-scripts viz update_message -f object
Copying file://build/index.js [Content-Type=application/javascript]...
Copying file://build/index.css [Content-Type=text/css]...
Copying file://build/manifest.json [Content-Type=application/json]...
Copying file://build/index.json [Content-Type=application/json]...
\ [4 files][ 48.5 KiB/ 48.5 KiB]
Operation completed over 4 objects/48.5 KiB.
Viz deployed to gs://community-visualizations-codelabs/barchart-dev
To polecenie wdraża w Studio danych wizualizację, która drukuje otrzymane dane w lokalnej wizualizacji. Skrypty drukują lokalizację wdrożenia wizualizacji (zaznaczoną powyżej). Użyjesz tej lokalizacji, aby wczytać wizualizację w Studiu danych.
Aby wczytać wizualizację, otwórz skopiowany wcześniej raport.
- Otwórz „Edytuj raport”.
- Na pasku narzędzi kliknij „Wizualizacje i komponenty utworzone przez społeczność”.
- Kliknij „Odkryj więcej”.
- Kliknij „Utwórz własną wizualizację”.
- Wpisz ścieżkę pliku manifestu (lokalizację
gs://...wydrukowaną w terminalu) i kliknij Prześlij.
- Kliknij wyrenderowaną kartę, aby dodać ją do raportu.
Wizualizacja powinna renderować kod JSON, który wygląda mniej więcej tak:
Skopiuj całą wiadomość, klikając ją prawym przyciskiem myszy i wybierając opcję „Zaznacz wszystko”, a następnie zastąp zawartość src/localMessage.js skopiowaną treścią. Zapisz plik.
Wizualizacja uruchomiona lokalnie w przeglądarce nie powinna się już wyświetlać, a w konsoli zobaczysz błąd.
9. Napisz kod JavaScript do wykresu słupkowego
Najpierw uruchom to polecenie, aby dodać d3.js jako zależność.
npm install d3
Następnie zastąp src/index.js tym kodem. Zmiany w stosunku do ostatniego kroku są wyróżnione pogrubieniem.
src/index.js
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = true;
const drawViz = (message) => {
const margin = { left: 20, right: 20, top: 20, bottom: 20 };
const height = dscc.getHeight() - 10;
const width = dscc.getWidth();
const chartHeight = height - margin.top - margin.bottom;
const chartWidth = width - margin.left - margin.right;
// remove existing svg
d3.select("body")
.selectAll("svg")
.remove();
// make a canvas
const svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// make an svg for the bar chart
const chartSvg = svg
.append("svg")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", chartWidth)
.attr("height", chartHeight);
// xScale to distribute bars
const xScale = d3
.scaleBand()
.domain(message.tables.DEFAULT.map(d => d.dimension[0]))
.range([0, chartWidth])
.paddingInner(0.3);
// yScale to size bars
const yScale = d3
.scaleLinear()
.domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
.range([0, chartHeight]);
// add bars
const bars = chartSvg
.append("g")
.attr("class", "bars")
.selectAll("rect.bars")
.data(message.tables.DEFAULT)
.enter()
.append("rect")
.attr("x", d => xScale(d.dimension[0]))
.attr("y", d => chartHeight - yScale(d.metric[0]))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d.metric[0]));
// add text
const text = svg
.append("g")
.selectAll("text")
.data(message.tables.DEFAULT)
.enter()
.append("text")
.attr(
"x",
d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
)
.attr("y", height - margin.bottom / 4)
.attr("text-anchor", "middle")
.text(d => d.dimension[0]);
};
// renders locally
if (LOCAL) {
drawViz(local.message);
} else {
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}
Jeśli lokalny serwer nadal działa, sprawdź przeglądarkę. Na stronie lokalnego środowiska deweloperskiego powinien się teraz wyświetlać wykres słupkowy podobny do tego poniżej.
10. Aktualizacja pliku manifestu (opcjonalnie)
Manifest wizualizacji zawiera metadane wizualizacji, a także lokalizację plików JavaScript, konfiguracyjnych i CSS wizualizacji. Zaktualizuj wartości w pliku manifestu – będą one używane do przekazywania użytkownikowi końcowemu informacji o wizualizacji.
Edytuj plik src/manifest.json, aby opisać wizualizację. Przykładowy plik manifestu znajdziesz poniżej.
src/manifest.json
{
"name": "Bar Chart",
"organization": "[My name]",
"description": "Bar chart",
"logoUrl": "https://storage.googleapis.com/community-visualizations-codelabs/barchart/bar_chart.png",
"organizationUrl": "https://github.com/googledatastudio/",
"supportUrl": "http://github.com/googledatastudio/community-visualizations",
"privacyPolicyUrl": "http://github.com/googledatastudio/community-visualizations",
"termsOfServiceUrl": "http://github.com/googledatastudio/community-visualizations",
"packageUrl": "",
"devMode": "DEVMODE_BOOL",
"components": [
{
"id": "Bar chart",
"name": "Bar chart",
"description": "My first Community Visualization",
"iconUrl": "https://storage.googleapis.com/community-visualizations-codelabs/table/table_icon.png",
"resource": {
"js": "YOUR_GCS_BUCKET/index.js",
"config": "YOUR_GCS_BUCKET/index.json",
"css": "YOUR_GCS_BUCKET/index.css"
}
}
]
}
11. Wdrażanie wizualizacji
W pliku src/index.js zmień wartość stałej LOCAL na „false”. Wizualizacja w przeglądarce powinna przestać działać. Zmieniona linia kodu jest wyróżniona pogrubieniem. Ta wartość logiczna określa, czy kod ma używać „lokalnego” pliku danych, czy danych otrzymanych ze Studia danych.
src/index.js (abridged)
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deployment
export const LOCAL = false;
const drawViz = (message) => {...}
Następnie w terminalu uruchom:
npm run build:dev
npm run push:dev
Polecenie build:dev łączy zależności JavaScript w nieskompresowany plik wyjściowy i zastępuje wartości w pliku manifestu, aby wyłączyć buforowanie i skierować do skonfigurowanego wcześniej zasobnika „dev”.
Polecenie push:dev przesyła zasoby wizualizacji do zasobnika „dev” skonfigurowanego w kroku 1 i wyświetla w konsoli lokalizację zasobnika.
Odśwież raport Studia danych. Powinien pojawić się wykres słupkowy. Spróbuj zmienić opcje danych i stylu w panelu właściwości. Zmiana danych spowoduje zmianę słupków. Selektor stylu koloru paska nie będzie jeszcze działać.
12. Używanie w wykresie słupkowym kolorów wybranych w edytorze raportów
Aby edytować kod lokalnie, najpierw zaktualizuj zmienną const LOCAL w pliku src/index.js na true. Następnie dodaj nową funkcję o nazwie styleVal() i zaktualizuj kod w funkcji drawViz(). Plik src/index.js powinien wyglądać tak:
src/index.js
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = false;
// parse the style value
const styleVal = (message, styleId) => {
if (typeof message.style[styleId].defaultValue === "object") {
return message.style[styleId].value.color !== undefined
? message.style[styleId].value.color
: message.style[styleId].defaultValue.color;
}
return message.style[styleId].value !== undefined
? message.style[styleId].value
: message.style[styleId].defaultValue;
};
const drawViz = message => {
const margin = { left: 20, right: 20, top: 20, bottom: 20 };
const height = dscc.getHeight() - 10;
const width = dscc.getWidth();
const chartHeight = height - margin.top - margin.bottom;
const chartWidth = width - margin.left - margin.right;
// remove existing svg
d3.select("body")
.selectAll("svg")
.remove();
// make a canvas
const svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// make an svg for the bar chart
const chartSvg = svg
.append("svg")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", chartWidth)
.attr("height", chartHeight);
// xScale to distribute bars
const xScale = d3
.scaleBand()
.domain(message.tables.DEFAULT.map(d => d.dimension[0]))
.range([0, chartWidth])
.paddingInner(0.3);
// yScale to size bars
const yScale = d3
.scaleLinear()
.domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
.range([0, chartHeight]);
// get the user-selected bar color
let barColor = styleVal(message, "barColor");
// add bars
const bars = chartSvg
.append("g")
.attr("class", "bars")
.selectAll("rect.bars")
.data(message.tables.DEFAULT)
.enter()
.append("rect")
.attr("x", d => xScale(d.dimension[0]))
.attr("y", d => chartHeight - yScale(d.metric[0]))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d.metric[0]))
.attr("fill", barColor);
// add text
const text = svg
.append("g")
.selectAll("text")
.data(message.tables.DEFAULT)
.enter()
.append("text")
.attr(
"x",
d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
)
.attr("y", height - margin.bottom / 4)
.attr("text-anchor", "middle")
.attr("fill", barColor)
.text(d => d.dimension[0]);
};
// renders locally
if (LOCAL) {
drawViz(local.message);
} else {
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}
Zapisz plik src/index.js, a następnie wróć do lokalnej sesji przeglądarki. Uruchom go lokalnie, a następnie zmień wartość stałej LOCAL na false.
Prześlij zaktualizowane pliki do Google Cloud Storage, uruchamiając to polecenie:
npm run build:dev
npm run push:dev
Odśwież raport Studia danych. Powinna być teraz możliwość zmiany koloru pasków.
13. Wdrożenia w środowisku produkcyjnym
Wdrożenia w środowisku produkcyjnym
Gdy wizualizacja będzie gotowa, sprawdź, czy wartość const LOCAL w src/index.js to „false”, a potem uruchom kod.
npm run build:prod
npm run push:prod
Spowoduje to wdrożenie plików w lokalizacji zasobnika GCS „prod”. Dodatkowo włączone zostanie buforowanie, a dołączony kod JavaScript zostanie odpowiednio zminimalizowany.
Podobnie jak wcześniej, lokalizacja wdrożenia zostanie wydrukowana w konsoli. Użyj tej „ścieżki pliku manifestu”, aby wczytać wizualizację „prod” w raporcie Studio danych.
Gratulacje! Właśnie udało Ci się utworzyć pierwszą wizualizację utworzoną przez społeczność za pomocą narzędzia dscc-gen.
14. Dalsze kroki
Rozszerzanie wizualizacji
- Dodawanie interakcji do wizualizacji
- Dowiedz się więcej o dostępnych elementach stylu i dodaj dodatkowy styl do wizualizacji.
Więcej możliwości wizualizacji utworzonych przez społeczność
- Zapoznaj się z informacjami o bibliotece pomocniczej dscc, pliku manifestu i pliku konfiguracji.
- Prześlij wizualizację do naszej galerii wizualizacji utworzonych przez społeczność.
- Utwórz społecznościowe oprogramowanie sprzęgające dla Studia danych.
Dodatkowe materiały
Poniżej znajdziesz różne zasoby, które pomogą Ci pogłębić informacje przedstawione w tym module.
Typ zasobu | Funkcje dla użytkowników | Funkcje dla programistów |
Dokumentacja | ||
Wiadomości i aktualności | Zarejestruj się w Studio danych > Ustawienia użytkownika. | |
Zadawanie pytań | Stack Overflow [google-data-studio]Forum deweloperów Studia danych | |
Filmy | Już wkrótce | |
Przykłady |