Гистограмма с React

В этой истории мы собираемся сделать компонент React, который будет доступен как модуль NPM, чтобы мы могли повторно использовать его в разных проектах. Здесь мы рассмотрим множество концепций, и вы найдете эту историю полезной, если вы думаете о создании компонента диаграммы или создании библиотеки. Весь код вы можете найти в репозитории.

План

Сначала мы загрузим проект и создадим спецификацию для нашей библиотеки. Затем мы реализуем демонстрационную страницу, которая покажет функциональность нашего компонента и функцию для генерации тестовых данных. После этого мы можем приступить к разработке гистограммы. Сначала мы создадим макет компонента. А затем мы добавим полосы, метки и настраиваемую прокрутку. Наконец, мы развернем демонстрационную страницу и опубликуем модуль NPM.

Настройка проекта

Create-react-app - отличный инструмент для начальной загрузки внешнего проекта, и я всегда использую его для новых. Однако, поскольку мы хотим создать модуль NPM, нам нужен другой стартер. После некоторого исследования я нашел инструмент под названием create-response-library, который использует create-response-app для запуска демонстрации и rollup для построить нашу библиотеку. Чтобы начать новый проект, мы наберем эти команды:

$ npm install -g create-react-library
$ create-react-library increaser-charts
$ cd increaser-charts

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

$ npm install --save styled-components

И добавьте дополнительные поля в файл rollup.config.js.

...
    external: ['styled-components'],
    globals: { 'styled-components': 'styled' }
}

Сначала мы запустим rollup, чтобы наблюдать за нашим модулем src и автоматически перекомпилировать его в dist всякий раз, когда мы вносим изменения.

$ npm start

Во второй части будет запущено приложение create-response-app, связанное с локальной версией нашего модуля. В другой вкладке:

$ cd example
$ npm start

Технические характеристики

Вы можете заметить, что когда вы используете сторонние компоненты React, ваш редактор кода автоматически заполняет имена параметров, и вы можете перейти к определению компонента, чтобы увидеть свойства и их типы. Это происходит потому, что большинство библиотек экспортируют файл с объявлениями. Давай тоже создадим.

Чтобы этот файл был опубликован в NPM вместе с кодом, нам нужно отредактировать package.json.

{
    ...
    "typings": "./index.d.ts",
    "files": ["dist", "index.d.ts"],
    ...
}

Имея этот файл на месте, когда мы используем библиотеку, мы увидим такую ​​подсказку.

Демо-страница

Когда мы используем create-response-library, у нас есть два проекта. Одна с демонстрационной страницей, которую мы используем для разработки нашего компонента, а другая - сама библиотека. Во-первых, мы собираемся разработать демонстрационную страницу со всеми параметрами, доступными для изменения в пользовательском интерфейсе, чтобы мы могли комфортно разрабатывать и тестировать нашу библиотеку.

Демо-страница будет иметь контейнер для диаграммы и панель, где мы сможем изменить параметры библиотеки. Чтобы изменить их, нам понадобятся два компонента: Switch для логических параметров и Slider для таких параметров, как ширина полосы и пробел. А поскольку они требуются только для демонстрационной страницы, мы установим material-ui в демонстрационный проект.

$ cd example
$ npm install --save @material-ui/core @material-ui/lib

Создание фиктивных данных

В конструкторе демонстрационной страницы и при изменении некоторых параметров мы создадим фиктивные данные. Функция получит количество баров, которое мы хотим сгенерировать, и должны ли они включать метку или нет. Для определения высоты столбца воспользуемся функцией, возвращающей нормально распределенное случайное число.

Макет BarChart

Мы начнем разработку BarChart с создания базового макета компонента. Начнем с index.js. В корневом компоненте мы визуализируем DataContainer, который содержит полосы и метки, а также контейнер Scroller. Перед их рендерингом нам нужно взять ширину корневого контейнера, поскольку это значение требуется для Bars, Labels и Scroller.

Полосы и метки будут размещены абсолютно внутри DataContainer. Важным моментом является то, что мы визуализируем только часть данных, которая будет видна пользователю.

Отметьте этот коммит, чтобы увидеть все изменения.

Бары

Мы будем использовать SVG для рендеринга полос. Таким образом, каждая полоса будет представлена ​​как элемент rect с соответствующим цветом.

Теперь, имея компонент Bar, мы можем обновить index.js. Мы добавим код для визуализации полос и для расчета нового смещения, которое используется для анимации, мы добавим метод getDerivedStateFromProps.

Отметьте этот коммит, чтобы увидеть все изменения.

Этикетки

Перед рендерингом меток мы проверим, есть ли у полосок хотя бы одна метка. Если есть несколько ярлыков, мы разместим их каждую прямо под соответствующей полосой. Если мы выберем какую-то панель, мы соответствующим образом изменим ее стили.

Отметьте этот коммит, чтобы увидеть все изменения.

Скроллер

Последняя функция, которая будет у нас в библиотеке, - это Скроллер. Этот элемент покажет, какая часть полосок просматривается в данный момент. Также мы можем использовать его для полос прокрутки. Когда пользователь mouseDown находится в режиме прокрутки, мы вызываем соответствующее действие, а затем будем следить за событием документа mouseUp, чтобы сообщить корневому компоненту об изменениях в x. Затем в корневом компоненте мы применим логику для изменения смещения и, следовательно, изменим положение как прокрутки, так и полос.

Окончательный index.js:

Отметьте этот коммит, чтобы увидеть все изменения.

Заключение

Теперь мы можем развернуть нашу библиотеку в NPM и демонстрацию на страницах GitHub, введя следующие команды:

$ npm publish --access-public
$ npm run deploy

Я уже встроил эту диаграмму в свое приложение - Increaser.org, и она выглядит так:

Достигните нового уровня сфокусированности и продуктивности с Increaser.org.