Построение дашбордов

Carbon Components Svelte — это библиотека компонентов для Svelte, реализующая дизайн-систему Carbon от IBM. Она предоставляет готовые элементы интерфейса, которые упрощают построение сложных дашбордов, сохраняя единый стиль и обеспечивая удобство использования.

Установка и настройка

Для начала необходимо установить библиотеку через npm:

npm install carbon-components-svelte carbon-components

Затем подключается CSS Carbon:

import 'carbon-components-svelte/css/all.css';

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

Организация структуры дашборда

Дашборд обычно состоит из нескольких ключевых областей:

  1. Навигационная панель (SideNav или Header)
  2. Контейнеры с данными (Cards, Tiles, DataTable)
  3. Фильтры и интерактивные элементы (Dropdown, ComboBox, Slider, DatePicker)

Для Svelte важно разбивать интерфейс на отдельные компоненты, чтобы облегчить поддержку и переиспользование элементов. Например, Dashboard.svelte может содержать общую структуру, а отдельные Card.svelte компоненты — отдельные блоки данных.

Компоненты для визуализации данных

Tiles и Cards — основа для отображения метрик. Они могут содержать иконки, значения и подписи:


    
Общая сумма: 125 000

DataTable используется для отображения табличных данных с поддержкой сортировки и фильтров:

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

Взаимодействие с формами и фильтрами

Dropdown, ComboBox, MultiSelect используются для фильтрации данных. Пример Dropdown:

Slider и NumberInput подходят для диапазонных фильтров:

Связывание данных через bind:value позволяет автоматически обновлять состояние дашборда при изменении фильтров.

Графики и визуальные компоненты

Carbon Components Svelte не включает встроенные графики, поэтому для дашбордов часто комбинируют библиотеку с Chart.js или D3.js. При этом компоненты Carbon обеспечивают управление фильтрами, а визуализация строится через внешние библиотеки.

Пример интеграции с Chart.js:

Состояния компонентов и реактивность

Svelte обеспечивает реактивность через $: и bind. В дашбордах это критично для обновления метрик в реальном времени:




    
{revenue} ₽

Любое изменение sales автоматически пересчитает revenue и обновит отображение на дашборде.

Стилизация и кастомизация

Carbon Components Svelte поддерживает тему через CSS-переменные. Можно изменять цвета, шрифты и отступы без переписывания компонентов:

:root {
    --cds-ui-01: #f4f4f4; /* фон карточек */
    --cds-text-01: #161616; /* основной текст */
}

Для сложной кастомизации применяются слоты и пропсы компонентов, например, добавление иконок, кнопок действий и дополнительных меток.

Примеры шаблонов дашбордов

  1. Финансовый дашборд

    • Cards для ключевых показателей
    • DataTable для транзакций
    • Dropdown для выбора периода
    • Chart.js для графиков доходов и расходов

  2. Маркетинговый дашборд

    • Tiles с метриками по кампаниям
    • MultiSelect для сегментации аудитории
    • Line Chart для отслеживания трафика

  3. Административный дашборд

    • SideNav для навигации
    • Таблицы пользователей с фильтрами
    • Слайдеры для настройки квот и лимитов

Оптимизация производительности

  • Использовать each блоки Svelte с ключами ({#each items as item (item.id)}) для корректного обновления списка.
  • Минимизировать количество одновременно рендерящихся компонентов. В больших дашбордах это критично для плавной работы.
  • Разделять данные на асинхронные блоки с await или onMount, чтобы избежать блокировки интерфейса при загрузке больших наборов данных.
Оглавление