Поле config: глобальные настройки

Поле config в спецификациях Vega (software) и Vega-Lite определяет глобальные параметры оформления и поведения визуализаций. Это централизованный механизм управления стилем, который применяется ко всем компонентам графика: осям, легендам, шкалам, маркерам, сетке, шрифтам, интерактивности и базовым отступам.

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

Структура объекта config

Базовая форма:

{
  "config": {
    "background": "#ffffff",
    "font": "Arial",
    "title": {
      "fontSize": 16,
      "fontWeight": "bold"
    }
  }
}

Объект допускает вложенную структуру. Каждый раздел отвечает за определённую подсистему:

  • background, padding — общие параметры холста
  • title — оформление заголовков
  • axis — глобальные настройки осей
  • legend — настройки легенд
  • mark — стили маркеров по умолчанию
  • scale — дефолтное поведение шкал
  • range — диапазоны отображения
  • view — параметры контейнера визуализации
  • style — именованные стили компонентов

Приоритет конфигурации

Механизм разрешения значений основан на строгой иерархии:

  1. Локальное значение в конкретном элементе (например, axis.labelColor)
  2. Спецификация конкретного канала (например, encoding.color)
  3. Значение из config (например, config.axis.labelColor)
  4. Встроенные значения по умолчанию Vega / Vega-Lite

Такая модель позволяет строить визуализации с минимальной декларацией, сохраняя возможность точечной кастомизации.

Глобальные параметры оформления

background и padding

{
  "config": {
    "background": "#f9f9f9",
    "padding": 20
  }
}

background задаёт цвет всего холста визуализации. Используется как базовый слой под всеми графическими элементами.

padding определяет внешние отступы между краем контейнера и областью построения графика. Значение может быть числом или объектом:

{
  "config": {
    "padding": {
      "left": 10,
      "right": 20,
      "top": 10,
      "bottom": 30
    }
  }
}

Конфигурация шрифтов и типографики

Типографика задаётся через глобальные параметры:

{
  "config": {
    "font": "Inter",
    "fontSize": 12,
    "title": {
      "font": "Inter",
      "fontSize": 18
    },
    "axis": {
      "labelFont": "Inter",
      "labelFontSize": 11
    }
  }
}

Если не указано иное, все текстовые элементы наследуют font и fontSize.

axis: глобальная настройка осей

Раздел axis является одним из наиболее детализированных.

{
  "config": {
    "axis": {
      "domainColor": "#333",
      "gridColor": "#e0e0e0",
      "labelColor": "#444",
      "titleFontSize": 14
    }
  }
}

Ключевые параметры:

  • domain — линия оси
  • grid — сетка
  • ticks — засечки
  • labels — подписи значений
  • title — заголовок оси

Допустима сегментация по направлениям:

{
  "config": {
    "axisX": {
      "labelAngle": -45
    },
    "axisY": {
      "labelFlush": true
    }
  }
}

Таким образом возможно различное поведение горизонтальных и вертикальных осей без локальных переопределений.

legend: глобальные стили легенд

Легенды управляются через config.legend:

{
  "config": {
    "legend": {
      "labelFontSize": 11,
      "symbolSize": 100,
      "titleFontSize": 13
    }
  }
}

Поддерживаются настройки:

  • ориентации (orient)
  • расположения (offset)
  • размеров символов (symbolSize)
  • формы маркеров (symbolType)

Легенда может наследовать стили от маркеров, если не задано явно.

mark: базовые стили геометрических примитивов

Раздел mark задаёт дефолтное поведение графических элементов: линий, точек, областей, прямоугольников.

{
  "config": {
    "mark": {
      "color": "#4682b4",
      "opacity": 0.8
    },
    "line": {
      "strokeWidth": 2
    },
    "point": {
      "size": 60
    }
  }
}

Разделение по типам маркеров позволяет задавать поведение на уровне всей системы визуализации:

  • point
  • bar
  • line
  • area
  • rect

scale: глобальные параметры шкал

scale влияет на преобразование данных в координаты.

{
  "config": {
    "scale": {
      "bandPaddingInner": 0.1,
      "bandPaddingOuter": 0.2,
      "round": true
    }
  }
}

Наиболее значимые параметры:

  • padding для band-скейлов
  • clamp для ограничения значений
  • nice для округления диапазонов
  • zero для включения нулевой базы

view: параметры контейнера визуализации

{
  "config": {
    "view": {
      "stroke": "transparent",
      "continuousWidth": 400,
      "continuousHeight": 300
    }
  }
}

view управляет внешней рамкой графика и базовыми размерами, если они не переопределены в спецификации.

style: именованные стили компонентов

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

{
  "config": {
    "style": {
      "cell": {
        "stroke": "#ddd"
      },
      "guide-label": {
        "fontSize": 10,
        "fill": "#666"
      }
    }
  }
}

Стили применяются через ссылку в спецификации:

{
  "marks": [
    {
      "type": "text",
      "style": "guide-label"
    }
  ]
}

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

Система конфигурации строится на принципе каскадности. При объединении нескольких источников (например, базовый конфиг библиотеки + пользовательский конфиг + локальные настройки) применяется глубокое слияние объектов.

Пример поведения:

{
  "config": {
    "axis": {
      "labelColor": "gray",
      "labelFontSize": 10
    }
  }
}

И локальное переопределение:

{
  "axes": [
    {
      "orient": "bottom",
      "labelColor": "black"
    }
  ]
}

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

Theme-конфигурации

config часто используется как основа темизации. Темы представляют собой предустановленные наборы параметров:

  • светлые темы
  • тёмные темы
  • минималистичные схемы
  • корпоративные стили

Пример тёмной темы:

{
  "config": {
    "background": "#1e1e1e",
    "axis": {
      "labelColor": "#cccccc",
      "gridColor": "#333333"
    },
    "legend": {
      "labelColor": "#cccccc"
    }
  }
}

Темы обычно подключаются как базовый config, который затем расширяется прикладной спецификацией.

Поведение config в Vega-Lite

В Vega-Lite config дополнительно включает высокоуровневые абстракции:

  • mark на уровне всей грамматики
  • view как контейнер для всех композиций
  • facet, concat, repeat как структурные параметры
  • специфичные настройки для bar, line, point как декларативные шаблоны

Пример:

{
  "config": {
    "bar": {
      "binSpacing": 2
    },
    "axis": {
      "labelAngle": 0
    }
  }
}

Такие настройки автоматически применяются ко всем соответствующим типам графиков без необходимости явного указания в каждом описании.

Практическая роль config в архитектуре визуализаций

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

В крупных системах визуализации используется разделение:

  • базовый config платформы
  • доменный config (финансы, аналитика, мониторинг)
  • локальный config конкретного графика

Итоговая визуализация формируется через композицию этих уровней с предсказуемым порядком приоритетов и глубинным слиянием объектов.

Оглавление