1. Введение
Google Data Studio позволяет бесплатно создавать динамические интерактивные панели мониторинга с красивыми визуализациями данных. Функция «Визуализации от сообщества» — это возможность Data Studio создавать собственные визуализации с помощью JavaScript, которые интегрируются с отчетами Data Studio.
Что вы узнаете
В этом практическом занятии вы узнаете:
- Как работает визуализация данных в Google Data Studio Community.
- Как создать визуализацию сообщества с помощью нашего инструмента командной строки для создания шаблонов
- Как использовать библиотеки визуализации JavaScript для создания визуализаций, созданных сообществом.
- Как интегрировать визуализацию сообщества в панель мониторинга Data Studio
Что вам понадобится
Для выполнения этого практического задания вам потребуется:
- Доступ к интернету, веб-браузеру, терминалу и вашему любимому текстовому редактору.
- Аккаунт Google
- Доступ к хранилищу Google Cloud Storage.
- Знание JavaScript, Node.js и работы с командной строкой.
В этом практическом занятии предполагается следующее:
- Вы уже создали визуализацию сообщества (ссылка на первый код-лабораторный пример в TODO)
- Знакомы с Google Cloud Storage?
Для начала создайте копию этого отчета , нажав на соответствующую кнопку. 
в правом верхнем углу. Держите его открытым в другой вкладке, пока выполняете задание.
2. Краткий опрос
Почему вы выбрали именно этот учебный семинар?
Как вы планируете использовать этот практический пример/учебное пособие?
Как бы вы оценили свой опыт работы с Data Studio?
Что лучше всего описывает ваше прошлое?
Перейдите на следующую страницу, чтобы отправить информацию для опроса.
3. Разработка средств визуализации сообщества с помощью dscc-gen
dscc-gen
dscc-gen — это инструмент командной строки, предоставляющий шаблоны и рабочие процессы для визуализаций сообщества и коннекторов сообщества. Шаблон визуализации сообщества предоставляет работающую визуализацию и рабочий процесс, позволяющий немедленно увидеть изменения в коде визуализации, а также скрипты для проверки, сборки и развертывания ваших визуализаций.
Настраивать
dscc-gen использует gsutil в скриптах развертывания, а также npm и webpack для сборки JavaScript-кода для визуализации сообщества.
- Установите npm на свой локальный компьютер.
- Пройдите краткое руководство по gsutil и настройте хранилище Google Cloud Storage.
- Перейдите в локальную директорию, где вы хотите разместить свой проект.
4. Запустите новый проект dscc-gen Community Visualization.
Откройте терминал и выполните команду:
npx @google/dscc-gen viz
dscc-gen запросит у вас имя проекта, местоположение хранилища GCS для версии «dev» и местоположение хранилища для версии «prod». Введите местоположение в виде URI с протоколом gs , например gs://my-gs-project/example-dev . «Местоположение» может быть либо корзиной Cloud Storage, либо папкой внутри этой корзины. Два местоположения хранилища должны быть разными. Инструмент проверит наличие у вас доступа к введенным значениям. Если местоположения не существуют, они будут созданы для вас.
После создания новой визуализации сообщества программой dscc-gen она выведет инструкции по началу работы. Ваш терминал будет выглядеть примерно так (ваш ввод выделен жирным курсивом ):
$ 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!
Вам предстоит отредактировать файлы в папке src/ — а именно, index.js , index.json и index.css — для создания визуализации.
Файлы в dist/ позволяют просматривать визуализацию локально в браузере. webpack.config.js используется для локального запуска визуализации. README.md содержит обзор файлов шаблонов и команд.
5. Предварительный просмотр визуализации локально.
Следуйте предложенным инструкциям и выполните следующие команды в терминале:
cd <folder name>
npm run start
В браузере откроется веб-страница, которая будет выглядеть примерно так:
Узнайте больше на следующем шаге.
6. [Информация] Как должен работать рабочий процесс dscc-gen
Шаблон визуализации dscc-gen поставляется с работающей визуализацией и инструкциями по ее использованию. Вот основные функции:
Обновите ваше локальное сообщение: Пример сообщения включен в шаблон, но, вероятно, он не соответствует сценарию использования, который вы хотите реализовать. Вам следует загрузить примеры данных, отражающие визуализацию, которую вы хотите создать.
Локальный процесс разработки : используя данные из раздела «Обновите свои локальные данные» , пишите и тестируйте свой код локально.
Создайте и разверните свою визуализацию: соберите код и загрузите его в свои хранилища Google Cloud Storage.
Загрузите визуализацию в Data Studio: добавьте визуализацию в отчет Data Studio.
7. Определите конфигурацию.
Файл конфигурации — это соглашение между вами (разработчиком визуализации) и редактором отчетов, использующим визуализацию. Он определяет параметры, доступные после загрузки визуализации в Data Studio.
Для этой визуализации в виде столбчатой диаграммы в конфигурации будет одно измерение и одна метрика, а также элемент стиля, позволяющий редактору отчетов изменять стиль столбчатой диаграммы.
Замените содержимое файла src/index.json следующим содержимым. Убедитесь, что все скобки присутствуют. При повторном вводе обратите внимание на разницу между квадратными и фигурными скобками, а также на структуру вложенности.
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. Загрузите обновленное сообщение.
Для обновления локально сохранённых данных выполните следующую команду:
npm run update_message
В терминале должно отображаться примерно следующее:
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
Эта команда развертывает визуализацию в Data Studio, которая выводит полученные данные в локальную визуализацию. Скрипты выводят местоположение развертывания вашей визуализации (выделено выше). Вы будете использовать это местоположение для загрузки вашей визуализации в Data Studio.
Чтобы загрузить визуализацию, откройте отчет, который вы скопировали ранее.
- Перейдите в раздел «Редактировать отчет».
- Нажмите на кнопку «Визуализации и компоненты сообщества» на панели инструментов.
- Нажмите «Узнать больше»
- Нажмите «Создать собственную визуализацию».
- Введите путь к вашему манифесту (адрес
gs://..., отображаемый в терминале) и нажмите «Отправить».
- Нажмите на отобразившуюся карточку, чтобы добавить её в отчёт.
Визуализация должна отображать JSON-данные, которые выглядят примерно так:
Скопируйте всё сообщение, щёлкнув правой кнопкой мыши и выделив всё, и замените содержимое файла src/localMessage.js скопированным текстом. Сохраните файл.
Визуализация, запущенная локально в вашем браузере, больше не должна отображаться, и если вы посмотрите в консоль, то увидите ошибку.
9. Напишите код JavaScript для построения столбчатой диаграммы.
Сначала выполните следующую команду, чтобы добавить d3.js в качестве зависимости.
npm install d3
Затем замените src/index.js следующим кодом. Изменения, внесенные на предыдущем шаге, выделены жирным шрифтом.
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});
}
Если локальный сервер всё ещё работает, проверьте свой браузер. На локальной веб-странице для разработчиков теперь должна отображаться гистограмма, как показано ниже.
10. Обновить манифест (необязательно)
В вашем манифесте визуализации содержатся метаданные о вашей визуализации, а также местоположение JavaScript-кода, конфигурации и CSS-файлов визуализации. Обновите значения в вашем манифесте — они будут использоваться для предоставления конечному пользователю информации о вашей визуализации.
Отредактируйте файл src/manifest.json, чтобы описать вашу визуализацию. Пример манифеста приведен ниже.
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. Разверните визуализацию.
В src/index.js измените значение параметра const LOCAL на "false". Визуализация в браузере должна перестать работать. Измененная строка кода выделена жирным шрифтом. Этот логический параметр определяет, следует ли использовать локальный файл данных или данные, полученные из Data Studio.
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) => {...}
Затем в терминале выполните следующую команду:
npm run build:dev
npm run push:dev
Команда build:dev объединяет ваши зависимости JavaScript в неминифицированный выходной файл и заменяет значения в вашем манифесте, чтобы отключить кэширование и указать на сегмент "dev", который вы настроили ранее.
Команда push:dev загружает ваши ресурсы визуализации в контейнер "dev", который вы настроили на шаге 1, и выводит местоположение контейнера в консоль.
Обновите отчет Data Studio. Вы должны увидеть столбчатую диаграмму. Попробуйте изменить данные и параметры стиля на панели свойств. Изменение данных изменит столбцы. Однако селектор стиля цвета столбцов пока работать не будет.
12. Используйте выбор цветов в редакторе отчетов для гистограммы.
Чтобы отредактировать код локально, сначала измените значение переменной `const LOCAL` в src/index.js на true . Затем добавьте новую функцию с именем styleVal() и обновите код в функции `drawViz()`. Ваш файл `src/index.js` должен выглядеть примерно так:
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});
}
Сохраните файл src/index.js, затем вернитесь в локальную сессию браузера. Убедитесь, что он работает локально, а затем снова измените значение const LOCAL на false .
Загрузите обновленные файлы в Google Cloud Storage, выполнив следующую команду:
npm run build:dev
npm run push:dev
Обновите отчет в Data Studio. Теперь вы сможете изменить цвет столбцов.
13. Развертывание в производственной среде
Развертывание в производственной среде
Когда вас устроит визуализация, убедитесь, что параметр const LOCAL в src/index.js имеет значение false, а затем запустите программу.
npm run build:prod
npm run push:prod
Это позволит развернуть ваши файлы в вашем "производственном" сегменте GCS. Кроме того, будет включено кэширование, а встроенный JavaScript будет соответствующим образом минифицирован.
Как и прежде, местоположение вашего развертывания будет отображено в консоли. Используйте этот "путь в манифесте", чтобы загрузить визуализацию "prod" в отчет Data Studio.
Поздравляем! Вы только что создали свою первую визуализацию сообщества с помощью инструмента dscc-gen.
14. Дальнейшие шаги
Расширьте возможности визуализации.
- Добавьте интерактивные элементы в свою визуализацию.
- Узнайте больше о доступных элементах стиля и добавьте дополнительные стилистические возможности в свою визуализацию.
Расширьте возможности визуализации данных, созданной сообществом.
- Ознакомьтесь с справочными материалами по вспомогательной библиотеке dscc , манифесту и файлу конфигурации .
- Отправьте свою визуализацию на нашу выставку визуализаций сообщества .
- Создайте коннектор для сообщества Data Studio.
Дополнительные ресурсы
Ниже представлены различные ресурсы, которые помогут вам глубже изучить материал, рассматриваемый в этом практическом занятии.
Тип ресурса | Пользовательские функции | Функции для разработчиков |
Документация | ||
Новости и обновления | Зарегистрируйтесь в Data Studio > Настройки пользователя | |
Задавайте вопросы | Stack Overflow [google-data-studio] Форум разработчиков Data Studio | |
Видео | Вскоре! | |
Примеры |