Дизайн-система Consta | Библиотека графиков

Эта версия библиотеки поддерживается, но больше не развивается Посмотреть актуальную библиотеку графиков

Библиотека графиков: линейные, столбчатые, круговые диаграммы и другие компоненты, с помощью которых удобно показывать статистику. Библиотека сделана на основе D3.js.

NPM | Документация и стенд | Макеты в Figma

Следите за новостями и релизами в телеграм-канале дизайн-системы

Как использовать

Установите пакет

# NPM
$ npm i @consta/widgets
# Yarn
$ yarn add @consta/widgets

Подключите зависимости

Чтобы начать работу, установите библиотеку @consta/uikit и настройте тему

Можно использовать компоненты

Пример импорта:

import { Theme, presetGpnDefault } from '@consta/uikit/Theme';
import { BarChart } from '@consta/widgets/Barchart';

Документация и стенд

На стенде можно менять параметры и смотреть, как меняются компоненты. Документация — во вкладке у каждого компонента.

Вперёд, к стенду

Разработка

Подготовка окружения

Рабочее окружение должно содержать NodeJS и Yarn.

Чтобы установить зависимости, выполните команду:

$ yarn install

Основные команды

# Запуск локального сервера для разработки
$ yarn start

# Сборка пакета
$ yarn build

# Сборка стенда
$ yarn stand:build

# Запуск тестов
$ yarn test

Контрибьюторам

Будем рады, если вы захотите принять участие в разработке дизайн-системы =) Но сначала прочитайте инструкцию для контрибьюторов.

Лицензия

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