Вайб-чартинг Воркшоп. Scale 2025

Краткие шаги и основные ссылки для работы. Для удобства копирования информации.

Активация окружения и бизнес-тарифа

Инструкция по настройке бизнес-тарифа

Основные ссылки для работы

  • https://datalens.ru
  • Ссылка на скачивание Воркбука для Editor (правой кнопкой мыши)
  • Доска для картинок (чтобы делиться результатами)

Если не получается активировать бизнес тариф в своей организации

логинпароль
one@scale2025.idp.yandexcloud.net1one@Scale
two@scale2025.idp.yandexcloud.net2two@Scale
three@scale2025.idp.yandexcloud.net3three@Scale
four@scale2025.idp.yandexcloud.net4four@Scale
five@scale2025.idp.yandexcloud.net5five@Scale

Разбираемся, как работает AI в DataLens

Для начала работы давайте просто создадим пустой Advanced чарт и откроем AI-разработчика

попробуем реализовать базовый график «в вакууме», чтобы прочувствовать, что и как делает AI в DataLens

ВОРОНКА

Нарисуй воронку от входа на сайт до продажи сверху вниз со всеми этапами
Подписи слева

Иногда воронка рисуется не идеально, можно попробовать после этого добавить следующий промпт

не очень красиво получилось - сделай воронку сходящуюся к центру слева и справа одинаково

и если нам не хватает как выглядит — может улучшить уже существующий код

пусть подписи будут по центру белыми и с % в скобках дополнительно

Пример 1

Давайте потренируемся, наша задача — поменять немного уже существующий шаблон, откроем 0. Edit Chart with AI, разберемся немного в коде

Что мы хотим — чтобы названия метрик можно было вести и на русском и на английском языке.

У нас для этого есть

  • params.lang — язык
  • metrics_defs с полями alias и alias_en

АНГЛИЙСКИЙ

Cделай перевод заголовков метрик следующим образом:
если параметр params.lang[0] равен en, то в заголовок метрики брать alias_en, иначе просто alias

Возврати только ту измененную функцию, которая требуется

Пример 2

Пример из жизни, когда мы сначала разбираемся с датасетом и с данными и потом хотим, чтобы моделька нарисовала нам по этим данным визуализацию

Откроем чарт 1. AI Chart

У нас на входе будет 2 датасета — total и детальные данные, нам надо сделать так, чтобы появился чарт со всеми данными в удобном виде, почему это хорошо

  • Будет проще анализировать все данные единообразно
  • У нас на все данные будет грузиться только 1 чарт
  • Экономим место и когнитивная нагрузка будет на индикатор + лайн чарт

Шаги

  • Сначала запускаем просто чарт
  • Берем информацию из Console и вставляем в сам чарт
  • Вставляем промпт

ФАКТОИД

# Задача
у тебя в getCurrentCodePrompt описаны 4 массива с метриками их описанием и значениями тотал и по дням, придумай сам и напиши код, который будет показывать каждую из этих метрик в виде большого числа и детальные данные внутри красивой и понятной плитики (плитка вниз или вправо заложено в коде) числа должна быть отформатированы до 1 знака и размерности указаны 1 буквой, форматирование всех чисел сделай до передачи в render

на детальных графиках должен быть тултип на точках


# ОГРАНИЧЕНИЯ РАБОТЫ!!
- никакие атрибуты для передачи информации кроме data-id не разрешены.
- с датами работай как со строками, не используй библиотеки по работе с данными, просто обрезай 10 символов.
- не забывай, клики и тултипы можно только через renderer делать
- в значении data-id используй _ для разделителя
- чтобы линии встраивались в график используй preserveAspectRatio="none"

не выводи в результатах закоменченные примеры данных

Пример 3

Теперь давайте попробуем создать нестандартный чарт, не очень популярный в BI инструментах, но все же имеющий место быть: Диаграмму Гантта

На вход у нас будут данные об этапах проекта, на выход нам хочется получить диаграмму Гантта по всем проектам.

Откроем чарт 2 AI Chart Gantt

Данные — это информация об этапах проекта из датасета

Чтобы реализовать чарт диаграммы Гантта воспользуемся следующим промптом

ГАНТТ Версия 1

Ты - опытный JavaScript-разработчик.
Твоя задача - нарисовать диаграмму гантта без стрелок, только полосы. Для этого в коде надо написать единую, самодостаточную JavaScript-функцию renderGanttChart(data). Эта функция должна принимать на вход массив данных о задачах из full_data и после расчета результат отдавать в config в объект rendered_gantt и отрисовывать его в чарте через Editor.generateHtml(config.rendered_gantt) с учетом того, чтобы по высоте, если требуется, появлялся скролл

Входные данные (data): в комментарии в объекте full_data.
Массив объектов, где каждый объект представляет этап проекта и имеет следующую структуру:

stage_id (string): Идентификатор этапа.
stage_name (string): Название этапа.
start_dt (string, "YYYY-MM-DD"): Дата начала. Может быть пустой строкой.
duration (string): Длительность этапа в днях.
prevous_stage_id (string): ID предыдущего этапа. Может быть:
пустой строкой (этап не имеет зависимостей и начинается в start_dt с нулевой длительностью, даже если указано иное),
одним ID (например, "1"),
несколькими ID через запятую (например, "12,13").
executor_login (string): Исполнитель.

Основная логика (вычисление дат):
Это самый важный шаг. Перед отрисовкой необходимо вычислить фактические даты начала и окончания для всех этапов.

Если у этапа заполнено поле start_dt, он является отправной точкой.
Если поле start_dt пустое, его дата начала должна быть вычислена на основе даты окончания этапа(-ов) из prevous_stage_id.
При наличии нескольких зависимостей (prevous_stage_id содержит несколько ID), дата начала текущего этапа - это самая поздняя дата окончания среди всех его предшественников.
Дата окончания любого этапа = его (вычисленная) дата начала + duration в днях.

Отрисовка (выходной результат):
Функция должна генерировать table-структуру с текстом и svg и возвращать ее в результате

Диаграмма должна состоять из:
Списка задач (слева): Названия этапов (stage_name). 20% ширины (можно конфигурировать) отступом от края экрана слева 10px.
Отображай первые 30 символов, потом троеточие и остальное убери в title при наведении
Если нет prevous_stage_id - выделяй жирным uppercase

Шкалы времени (название второго столбца): Отображает месяцы и годы, охватывающие весь период проекта, занимает 80% ширины чарта, года над месяцами нарисуй, чтобы не наезжал текст друг на друга, это svg

В той же колонке, где шкала времени, в строках проекта распогалаются svg с
Полосами задач: Положение по горизонтали и ширина каждой полосы в svg должны точно соответствовать вычисленным датам начала и окончания этапа.
высота svg параметризируется
- одна строка в таблице должна включать и название этапа и один длинный svg

Технические ограничения:
- Не использовать внешние библиотеки (никаких D3.js, Chart.js, Moment.js и т.д.). Только чистый (vanilla) JavaScript.
- Весь код (логика, генерация) должен находиться внутри одной функции.
- убери длинный комментарий full_data из ответа
- не забывай, что для корректного расчета нужно идти от 1 до последнего id отсортированных

Это решение работает не очень стабильно, возможно, надо будет перезапустить 2-3 раза

Пример 3 — с табличкой

Откроем 2t AI Gantt in Table и теперь посмотрим, на сколько быстро реализовать похожее решение внутри таблицы (а ее сильно проще расширять и управлять новыми столбцами етс)

ГАНТТ Версия 2


ты разработчик js, знающий ограничения datalens
проанализируй full_data
выведи в таблицу поля
- stage_name (если нет previous_stage_id, то фон покрасить серым, а подпись жирным, для других строк отступ 1 таб)
- executor_login
и добавь колонку шириной в 300 и  внутри которой у каждого этапа куда выведи ТОЛЬКО svg полоской этап и длину в днях на таймлайне общем, дата начала этапа или берется из start_dt или зависит от previous_stage_id и рассчитанного значения end_dt = start_dt + duration в днях

вся ширина svg занимает весь нужный таймлайн, масштаб автоматически был по всем этапам рассчитан

этапа проекта отсортированы по stage_id

в ответе убери коммент со значениями full_data

пример как добавлять svg корректно

    rows.push({
        cells: [
            {
                value: key,
            },
            ...years.map(year => {
                const salesByYear = salesByYears[year] ?? [];
                const yearSales = salesByYear.map(d => ({
                    x: new Date(d.OrderMonth).getTime(), 
                    y: d.Sales,
                }));
                const maxSales = Math.max(...salesByYear.map(d => d.Sales));
                const minSales = Math.min(...salesByYear.map(d => d.Sales));

                return {
                    value: maxSales, 
                    formattedValue: Editor.generateHtml(`
                        <div>
                            ${createChart(yearSales)}
                            <div style="margin-top: 8px;">Min: <b>${formatSalesValue(minSales)}<b></div>
                            <div>Max: <b>${formatSalesValue(maxSales)}</b></div>
                        </div>
                    `),   
                };
            }),
            {
                value: totalSales,
                formattedValue: formatSalesValue(totalSales),
                css: {
                    verticalAlign: 'middle',
                    textAlign: 'center',
                }
            },
        ],
    });