HTML: Гистограмма

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

Гистограмма представляет собой таблицу с точки зрения вёрстки. Это важный момент — если стили не загрузятся, то вся информация будет выведена в виде таблицы, а значит её можно будет прочитать. Такое поведение будет почти невозможно при использовании других структур.

Заголовок гистограммы

В качестве заголовка гистограммы используется шапка таблицы. Внутри неё расположите три табличных заголовка с названием жанров литературы:

• Классическая
• Фантастика
• Романы

Структура шапки:

<thead class="histogram-header">
  <tr>
    <th>Жанры:</th>
    <th class="px-20 histogram-header-[color]">[genre]</th>
  </tr>
</thead>

Где [color] — цвет жанра, а [genre] — название. Класс .px-20 уже доступен в файле app.css, поэтому его описывать отдельно не нужно.

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

• Красный
• Синий
• Зелёный

Каждый из цветов уже есть в файле app.css в виде переменной. Используйте их для создания гибкой структуры цветовой схемы.

.histogram-red {
  background-color: var(--red);
}

Слева от каждого жанра нарисуйте квадрат со стороной 10 пикселей. Разместите его на 5 пикселей правее от левого края названия. Это нужно для создания правильного расположения относительно внутреннего отступа <th>. Для отцентровки квадрата по вертикали можете использовать следующий шаблон:

top: 50%;
transform: translateY(-50%);

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

Столбцы

• Отступ от tbody: 50px сверху

Столбцы реализуются по следующему шаблону:

<tr class="histogram-row">
  <td class="histogram-name">[year]</td>
  <td class="histogram-col">
    <span [value] class="w-50px histogram-[color]"></span>
    <p>[value description]</p>
  </td>
</tr>

где:

• [year] — год
• [value] — data-атрибут со значением высоты столбца
• [color] — цвет столбца
• [value description] — текстовое описание столбца

Каждая строка .histogram-row содержит все значения, которые относятся к текущему году.

Используя Flex расположите элементы контейнера .histogram-row в соответствии с шаблоном, учитывая следующие моменты:

• Минимальная высота строки: 400 пикселей.
• Внутренние отступы по горизонтали: по 50 пикселей.

Год, указывающий период продаж книг использует абсолютное позиционирование. Элемент располагается на 5 пикселей выше максимального столбца. Для получения нужного значения обратите внимание на внутренние отступы колонок .histogram-col

Расположите элементы внутри контейнера .histogram-col в соответствии с шаблоном, учитывая следующие моменты:

• Внутренние отступы контейнера: по 10 пикселей с каждой стороны.
• Для определения высоты столбца используйте проценты. В HTML используйте data-атрибут, в котором будете хранить значение и, используя селектор по атрибуту, устанавливать необходимую высоту. Эти значения равны числу проданных книг без учёта тысяч. Например, 40k = 40% высоты.

Данные гистограммы

2018 год

• Классическая: 40k
• Фантастика: 80k
• Романы: 75k

2019 год

• Классическая: 35k
• Фантастика: 63k
• Романы: 50k

2020 год

• Классическая: 90k
• Фантастика: 77k
• Романы: 80k

Подсказки

• Вам потребуется работа с относительным и абсолютным позиционированием
• Для удобства используйте селектор по атрибуту там, где это необходимо
• Не все элементы являются Flex-контейнерами. Блоки container, histogram не являются Flex-контейнерами

Без стилей гистограмма выглядит так: