Элементы

Показатель

Карточка показателя: число, подпись, изменение (рост или падение) и спарклайн.

Примеры

<div class="stats">
  <div class="stat">
    <div class="stat__label">Аптайм, 30 дней</div>
    <div class="stat__value">99,98<span class="stat__unit">%</span></div>
    <div class="stat__delta stat__delta--up">+0,03 п.п. <span class="visually-hidden">рост</span></div>
    <span class="chart chart--spark" data-ui-chart="spark" data-ui-values="99.91,99.95,99.9,99.96,99.97,99.98" role="img" aria-label="Аптайм за последние шесть недель: от 99,91 до 99,98 процента"></span>
  </div>
  <div class="stat">
    <div class="stat__label">Участников сегодня</div>
    <div class="stat__value">1 248</div>
    <div class="stat__delta stat__delta--up">+12% <span class="visually-hidden">рост</span></div>
    <span class="chart chart--spark" data-ui-chart="spark" data-ui-values="620,810,790,950,1100,1248" role="img" aria-label="Участники по дням: от 620 до 1248"></span>
  </div>
  <div class="stat stat--accent">
    <div class="stat__label">Задержка ответа</div>
    <div class="stat__value">340<span class="stat__unit">мс</span></div>
    <div class="stat__delta stat__delta--up stat__delta--bad">+120 мс <span class="visually-hidden">рост, это плохо</span></div>
    <span class="chart chart--spark" data-ui-chart="spark" data-ui-values="210,220,215,260,300,340" role="img" aria-label="Задержка ответа: от 210 до 340 мс"></span>
  </div>
</div>

<div class="stat">
  <div class="stat__label">Ошибок за сутки</div>
  <div class="stat__value">14</div>
  <div class="stat__delta stat__delta--down stat__delta--good">−6 <span class="visually-hidden">снижение, это хорошо</span></div>
  <div class="stat__note">Вчера: 20</div>
</div>

Установка

bukatchuk-ui add stat

Файлы

Варианты

Вставка для Jekyll

{%- comment -%}
  Карточка показателя. Параметры: label, value, unit, delta (текст изменения), dir (up | down | flat),
  tone (good | bad), values (числа через запятую для спарклайна), note.
{%- endcomment -%}
<div class="stat">
  <div class="stat__label">{{ include.label }}</div>
  <div class="stat__value">{{ include.value }}{% if include.unit %}<span class="stat__unit">{{ include.unit }}</span>{% endif %}</div>
  {%- if include.delta %}
  <div class="stat__delta stat__delta--{{ include.dir | default: 'flat' }}{% if include.tone %} stat__delta--{{ include.tone }}{% endif %}">{{ include.delta }}</div>
  {%- endif %}
  {%- if include.values %}
  <span class="chart chart--spark" data-ui-chart="spark" data-ui-values="{{ include.values }}" role="img" aria-label="{{ include.label }}: {{ include.values }}"></span>
  {%- endif %}
  {%- if include.note %}
  <div class="stat__note">{{ include.note }}</div>
  {%- endif %}
</div>

Макрос для Jinja

{#- Карточка показателя. delta — текст изменения, dir: up | down | flat, tone: good | bad,
    values — числа через запятую для спарклайна. -#}
{% macro stat(label, value, unit=None, delta=None, dir='flat', tone=None, values=None, note=None) -%}
<div class="stat">
  <div class="stat__label">{{ label }}</div>
  <div class="stat__value">{{ value }}{% if unit %}<span class="stat__unit">{{ unit }}</span>{% endif %}</div>
  {%- if delta %}
  <div class="stat__delta stat__delta--{{ dir }}{{ ' stat__delta--' ~ tone if tone }}">{{ delta }}</div>
  {%- endif %}
  {%- if values %}
  <span class="chart chart--spark" data-ui-chart="spark" data-ui-values="{{ values }}" role="img" aria-label="{{ label }}: {{ values }}"></span>
  {%- endif %}
  {%- if note %}
  <div class="stat__note">{{ note }}</div>
  {%- endif %}
</div>
{%- endmacro %}