Графики

Шаг График превращает результаты предыдущих шагов в графики. Он не обращается к базе данных. Шаг выполняет JavaScript, как JavaScript-шаг, но возвращает не данные, а описания графиков для Apache ECharts.

Добавить шаг с графиком

1. Откройте задачу в редакторе.

2. В поле Тип шага выберите График и нажмите Добавить шаг. Новый шаг сразу содержит пример Линия по времени.

3. Чтобы начать с другого примера, выберите его в поле Шаблон:

   • Линия по времени
   • Столбцы по категориям
   • Круговая диаграмма
   • Ключевое число
   • Несколько графиков

   Если вы уже меняли код, QueryLane спросит, прежде чем заменить его шаблоном.

4. Замените строки из примера результатом предыдущего шага. Токены ${step_id} и ${variable} превращаются в JSON-значения, как в JavaScript-шагах.

Каждый шаблон начинается с комментария, в котором показана строка для замены:

const rows = ${step_orders_by_day};
return [{
  title: 'Orders by day',
  option: {
    tooltip: { trigger: 'axis' },
    dataset: { source: rows },
    xAxis: { type: 'category' },
    yAxis: { type: 'value' },
    series: [{ type: 'line', encode: { x: 'day', y: 'orders' } }],
  },
}];

Что возвращает код

Код может вернуть:

• объект настроек ECharts (option);
• объект { title, option, height };
• массив из таких значений, чтобы нарисовать несколько графиков в одном шаге.

height задаётся в пикселях, от 120 до 1200. Без него высота графика 320 пикселей. Чтобы показать одно число, возьмите шаблон Ключевое число: это график только с крупным заголовком и небольшой высотой.

Результат должен быть обычным JSON, поэтому часть возможностей ECharts работает иначе:

• Функции не принимаются. Используйте строковые шаблоны ECharts, например formatter: '{b}: {c}' или axisLabel: { formatter: '{value} ms' }.
• Подсказки показываются простым текстом. Для переноса строки используйте \n, а не HTML.
• Картинки допускаются только как URI data:image/. Ссылки на внешние изображения отклоняются.
• Один шаг может вернуть не больше 24 графиков и 5 МБ настроек.

Большие таблицы агрегируйте в SQL или в JavaScript-шаге до шага с графиком. График на миллион точек рисуется долго и плохо читается.

К шагу График нельзя добавить проверки результата.

Графики после запуска

Если в запуске есть графики, у его записи в Истории выполнений появляются две вкладки:

• Отчёт показывает все графики запуска, сгруппированные по шагам в порядке шагов задачи.
• Результаты показывает список шагов и данные, как у любого другого запуска.

Запуск открывается на вкладке Отчёт, если последний шаг задачи строит график, и на вкладке Результаты в остальных случаях. Подробнее о запусках в разделе Запуски и артефакты.

Результат отдельного шага с графиком тоже открывается в виде графиков. В заголовке видно их число, например Графиков: 3, а режим JSON показывает возвращённые настройки.

Графики следуют светлой или тёмной теме приложения.

Полный экран и сохранение

В углу каждого графика две кнопки:

• На весь экран открывает график в большом окне. Закройте его крестиком в заголовке.
• Сохранить картинку предлагает Картинка PNG или Векторная картинка SVG. QueryLane спрашивает, куда сохранить файл, и предлагает имя из названия задачи и заголовка графика.

PNG сохраняется в двойном разрешении вместе с фоном графика. Если QueryLane не может нарисовать график, вместо него появляется Не удалось нарисовать график и текст ошибки ECharts.

Графики и ИИ-агенты

Агент, подключённый по MCP, может отрисовать график завершённого запуска инструментом querylane_chart_render и посмотреть на картинку, прежде чем предложить шаг.