Дизайн-система Consta | echarts-adapter

Этот адаптер стилизует графики echarts для дизайн-системы Consta.

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

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

# NPM
$ npm install @consta/echarts-adapter
# Yarn
$ yarn add @consta/echarts-adapter

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

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

Можно использовать

Например, так:

import React from 'react';
import ReactECharts from 'echarts-for-react';
import { useEChartsTheme } from '@consta/echarts-adapter';

const LineChart = () => {
  const theme = useEChartsTheme();

  const lineChartOptions = {
    grid: { top: 8, right: 8, bottom: 24, left: 36 },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
  };
  return <ReactECharts option={lineChartOptions} theme={theme} />;
};

Разработка

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

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

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

$ yarn install

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

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

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

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

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

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

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

Лицензия

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