Поле header

Поле header используется в конфигурации фасетных и композитных визуализаций, где данные разбиваются на подграфики по категориям. Оно управляет отображением заголовков строк и колонок, формируемых при использовании facet, row и column. В рамках Vega-Lite именно header определяет внешний вид и поведение этих заголовков, не затрагивая сами данные и логику построения графика.

Роль header в фасетной системе

Фасетирование в Vega-Lite создаёт сетку графиков, где каждая ячейка соответствует подмножеству данных. Поле header отвечает за визуальное оформление подписей этих ячеек.

Фактически header управляет:

  • отображением заголовков строк и столбцов;
  • стилем текста и расположением;
  • форматированием значений, отображаемых как подписи;
  • визуальной иерархией между группами данных.

Без настройки header система использует значения по умолчанию, что часто приводит к перегруженным или недостаточно информативным подписям.

Базовая структура header

В Vega-Lite header может быть определён внутри facet, row или column.

Пример базовой структуры:

{
  "facet": {
    "row": {
      "field": "category",
      "type": "nominal",
      "header": {
        "title": "Категория"
      }
    }
  }
}

Здесь header.title задаёт отображаемый заголовок для строк фасета.

Основные свойства header

title

title задаёт текст заголовка группы.

"header": {
  "title": "Продажи по регионам"
}

Используется для замены имени поля на человекочитаемую подпись.

label

label управляет отображением значений категорий.

"header": {
  "label": true
}

При false подписи скрываются полностью, что полезно при плотных сетках графиков.

labelAngle

Определяет угол наклона текста.

"header": {
  "labelAngle": 45
}

Применяется для предотвращения наложения длинных строк в заголовках.

labelAlign и labelBaseline

Управляют выравниванием текста:

"header": {
  "labelAlign": "right",
  "labelBaseline": "middle"
}
  • labelAlign — горизонтальное выравнивание (left, center, right)
  • labelBaseline — вертикальное выравнивание (top, middle, bottom)

labelColor и labelFont

Позволяют управлять визуальным стилем:

"header": {
  "labelColor": "#333",
  "labelFont": "Arial"
}

Используются для интеграции с дизайн-системами.

format

Поле format применяется для преобразования значений перед отображением.

"header": {
  "format": ".2f"
}

Часто используется для числовых или временных значений.

labelPadding

Управляет отступами между заголовком и графиком.

"header": {
  "labelPadding": 8
}

Позволяет улучшить читаемость при плотной компоновке.

Header в row и column

Row header

Используется для вертикального разбиения:

{
  "row": {
    "field": "region",
    "type": "nominal",
    "header": {
      "title": "Регион",
      "labelAngle": 0
    }
  }
}

Row header отображается слева от каждой строки графиков.

Column header

Используется для горизонтального разбиения:

{
  "column": {
    "field": "year",
    "type": "ordinal",
    "header": {
      "title": "Год",
      "labelAngle": -45
    }
  }
}

Column header располагается сверху над колонками.

Наследование и переопределение header

В Vega-Lite существует иерархия настроек:

  1. глобальные настройки config.header
  2. локальные настройки в row или column
  3. локальные настройки header внутри конкретного фасета

Пример глобальной конфигурации:

{
  "config": {
    "header": {
      "labelFontSize": 12,
      "labelColor": "#666"
    }
  }
}

Эти параметры применяются ко всем заголовкам, если не переопределены локально.

Отличие header от title и axis

header часто путают с другими визуальными элементами:

  • title — заголовок всей визуализации
  • axis — подписи осей координат
  • header — подписи групп в фасетной сетке

Ключевое различие заключается в уровне абстракции: header не относится к координатным осям, а описывает структуру разбиения данных.

Применение в сложных фасетах

При использовании вложенных фасетов (facet внутри facet) header управляет несколькими уровнями группировки.

Пример:

{
  "facet": {
    "row": {
      "field": "continent",
      "header": {
        "title": "Континент"
      }
    },
    "column": {
      "field": "year",
      "header": {
        "labelAngle": -90
      }
    }
  }
}

Каждый уровень имеет собственный header, что позволяет строить многомерные сетки визуализаций.

Стилизация и визуальная консистентность

В сложных дашбордах header становится элементом интерфейсного дизайна. Его настройка влияет на восприятие структуры данных.

Типовые задачи:

  • уменьшение визуального шума через label → false;
  • унификация шрифтов через labelFont;
  • управление плотностью информации через labelAngle;
  • улучшение читаемости через labelPadding.

Поведение при отсутствии header

Если header не задан:

  • используется автоматическое имя поля;
  • форматирование ограничено типом данных;
  • визуальный стиль берётся из глобального config.

Это упрощает быстрые прототипы, но ухудшает контроль над интерфейсом.

Особенности рендеринга

В Vega-Lite header рендерится отдельно от основного графика. Это означает:

  • он не участвует в масштабировании осей;
  • не влияет на вычисление размеров графика;
  • может быть скрыт без изменения данных.

Это делает его независимым слоем визуализации.

Использование с условными данными

При динамических данных header часто комбинируется с трансформациями:

{
  "transform": [
    {"filter": "datum.value > 10"}
  ],
  "facet": {
    "row": {
      "field": "group",
      "header": {
        "labelColor": "steelblue"
      }
    }
  }
}

В таких случаях header помогает визуально выделять группы после фильтрации или агрегации.

Ограничения header

  • не поддерживает сложные интерактивные события;
  • не может содержать произвольные HTML-элементы;
  • ограничен набором стилевых параметров;
  • не влияет на вычисления данных.

Поведение в responsive-режиме

При адаптивной верстке header может:

  • переносить текст (в зависимости от renderer);
  • обрезать длинные подписи;
  • изменять угол наклона при ограниченной ширине.

Эти изменения происходят на уровне движка рендеринга, а не через декларативные настройки.

Сравнение header в Vega и Vega-Lite

В Vega header является частью более низкоуровневой системы и требует ручного управления layout-узлами.

В Vega-Lite он абстрагирован и интегрирован в фасетную модель, что позволяет задавать его декларативно внутри row и column без описания layout-логики.

Основное различие:

  • Vega: ручная компоновка и контроль
  • Vega-Lite: декларативная конфигурация через header
Оглавление