Skip to content

Grid и шкала времени

Grid повышает читаемость плотного timeline: линии времени и строк помогают сопоставлять интервалы с группами. Это визуальная настройка, поэтому ее удобнее рассматривать рядом с темами, templates и task profiles.

grid задается в TimelineOptions, а не через отдельный plugin. Он работает вместе с timeScale: шкала дает подписи времени, grid продолжает эти ориентиры в основной области задач.

ts
const options = {
  grid: {
    type: 'striped',
    horizontal: {
      color: '#d4d7dd',
      width: 0.5,
      accent: 'rgba(36, 107, 254, 0.06)',
    },
    vertical: {
      major: { color: '#b8bdca', width: 0.75 },
      minor: { color: '#e1e4ea', width: 0.5 },
      accent: 'rgba(36, 107, 254, 0.08)',
    },
  },
  timeScale: {
    enabled: true,
    minTickWidthPx: 56,
    maxTicksInView: 14,
  },
}

Режимы

ПолеЧто настраивает
grid.typeОбщий режим сетки: plain или striped.
grid.horizontalЛинии и accent между строками групп.
grid.vertical.majorОсновные вертикальные линии, которые визуально совпадают с крупными ticks шкалы.
grid.vertical.minorВторичные вертикальные линии для более мелких делений.
grid.vertical.accentМягкая заливка интервалов в режиме striped.

Рекомендация

Включайте grid для операционных интерфейсов, где пользователь сравнивает много задач по времени. Для dashboard-preview его можно приглушить: оставить только major vertical lines или снизить opacity через цвета.