В этом уроке я расскажу, как устроен DataLens Editor и покажу по шагам, как в нем сделать свою таблицу-чарт на простом примере.
Если кто-то еще не знает, то напомню, что это такое.
DataLens Editor — это продвинутый инструмент в сервисе Yandex DataLens, который позволяет создавать кастомные визуализации данных с помощью JavaScript.
Основные возможности DataLens Editor:
- Гибкая кастомизация визуализаций для более глубокого анализа данных
- Интеграция с различными источниками данных, включая внешние API
- Расширенные возможности по созданию нестандартных графиков и таблиц
- Дополнительные настройки для быстрого поиска инсайтов в данных
С чего начать?
Чтобы создать такой чарт, в разделе чартов достаточно просто выбрать соответствующий тип.
А теперь посмотрим, как же устроен этот инструмент. Он выглядит вот так:
Внутри конструктор состоит из нескольких окошек с отображением кода и предпросмотром результата. Данный вид вы можете настроить под себя.
Блок с кодом также имеет несколько вкладок. Именно с их помощью мы и будем собирать наш чарт.
Вкладка Meta
Все начинается именно с этой вкладки. Здесь вам нужно указать ID датасета, с которым вы планируете работу или API ссылку. Выглядит это так.
{ "links": {"raboty": "ibp4zuxgu4no4"} }В моем примере я использую датасет, поэтому указываю его название (оно может быть любым, это название будет использоваться в коде дальше) и его ID. ID можно скопировать в самом датасете.
Вкладка Params
На этой вкладке вы можете указать какие-то параметры по аналогии с одноименным разделом в настройках датасета. В нашем примере мы их пока использовать не будем.
Вкладка Sources
Тут мы снова описываем наши источники данных, но уже более конкретно. Мы описываем такие поля из каких источником нам нужно выгружать.
const {buildSource} = require('libs/dataset/v2');
module.exports = {
'rabotyData': buildSource({
datasetId: Editor.getId('raboty'),
columns: ['Вид работ', 'Статус', 'Стоимость'],}),};Данная конструкция стандартная, вы лишь указываете ссылку на датасет с помощью названия, определенного на вкладке Meta, и названия колонок для выгрузки.
Вкладка Config
Данная вкладка нужна для дополнительных настроек чарта. В данном уроке мы ее пока рассматривать не будем.
Вкладка Prepare
А вот этой уже по сути самая основная вкладка, в которой и происходит формирование будущего чарта, его макета и дизайна.
Давайте разберем по шагам, что же нужно там писать.
Блок 1
В этом блоке мы лишь подгружаем стандартную библиотеку DataLens и просим выгрузить наш в сами датасет.
const Dataset = require('libs/dataset/v2');
const loadedData = Editor.getLoadedData();
const data = Dataset.processData(loadedData, 'rabotyData', Editor);Данная конструкция стандартная, вам нужно лишь указать свой датасет.
Блок 2
В данном разделе вы прописывает заголовки, какие именно нужны колонки, с каким названием, стилем и свойствами.
const head = [
{ id: 'id-type',
name: 'Вид работ',
type: 'text', },
{ id: 'id-status',
name: 'Статус',
type: 'text', },
{ id: 'id-amount',
name: 'Стоимость',
type: 'number', },];Конструкция тоже в целом стандартная, но тут мы можете добавить какие-то дополнительные настройки, например, зафиксировать столбец или добавить подсказку.
Блок 3
В данном разделе мы уже создаем пустой массив для строк и с помощью цикла FOR вставляем все позиции из датасета в наш чарт.
const rows = [];
for (var i = 0; i < data.length; i++) { const rowData = data[i];
rows.push({
cells: [ { value: rowData["Вид работ"], },
{ value: rowData["Статус"], },
{ value: rowData["Стоимость"],},] });}Внутри цикла также указываем, какие колонки и в какой последовательности вставлять.
Блок 5
И в конце просим вывести наши заголовки и строки.
module.exports = {head, rows};Готово. После всех манипуляций в окне предпросмотра мы видим наш выгруженный чарт.
Надеюсь, что данный урок был вам полезен.
Другие уроки
API-подключение в DataLens Editor: выводим курсы валют по шагам. КОНСПЕКТ
Более подробно можно посмотреть ниже.
Если вам понравился урок, то можете поддержать проект по кнопке ниже. Это очень поможет делать для вас больше интересных и полезных выпусков. Спасибо!
Если вам понравился урок, подписывайтесь на канал или группу и ставьте лайки. А также пишите в комментариях свои кейсы или вопросы. Самые интересные мы обязательно разберем.