Здесь мы хотим представить вам шаги, которые необходимо предпринять, если вы хотите интегрировать чистую библиотеку JavaScript в собственное приложение React. Мы следуем рекомендациям, изложенным в официальном руководстве React Интеграция с другими библиотеками (https://reactjs.org/docs/integrating-with-other-libraries.html). В этом руководстве используется пример RealTimeChart (https://mindfusion.eu/samples/javascript/chart/RealTimeStockChart/RealTimeStockChart.html), который MindFusion разработал для JavaScript и создает с нуля такую же диаграмму в React. Мы снова используем библиотеку JavaScript для диаграмм и индикаторов от MindFusion (https://mindfusion.eu/javascript-chart.html).
Шаги, описанные ниже, универсальны, и вы можете следовать им, если хотите интегрировать любую библиотеку JS в свой компонент React.
И. Создайте проект React
Мы создаем пустой проект React, используя библиотеку npm create-react-app, которая доступна по адресу https://www.npmjs.com/package/create-react-app. Если вы новичок в этом инструменте, их официальная документация доступна по адресу https://create-react-app.dev/docs/getting-started/.
npx create-react-app realtimechart cd realtimechart npm start
Мы создаем проект под названием realtimechart и заходим в его каталог. Команда запуска открывает приложение, которое является пустым родным приложением React.
Устанавливаем модуль диаграммы JavaScript из npm (https://www.npmjs.com/package/chart-library)
npm i chart-library
Это все, что нам нужно для установки. Нам требуется jQuery, но он автоматически устанавливается приложением create-react-app, поэтому мы готовы к установке модулей и начинаем писать диаграмму в реальном времени.
II. Ссылка на модуль диаграммы
Мы создаем пустой файл JavaScript, который помещаем в папку «src» нашего проекта. Туда мы импортируем библиотеку React:
import React, { Component } from ‘react’;
Вопрос в том, как нам импортировать библиотеку Charting, которая находится в подпапке «chart-library» в папке node-modules? Мы импортируем его таким образом:
import * as Charting from ‘chart-library’;
Если есть дополнительные модули, например те, которые требуются библиотеке диаграмм, вы импортируете их следующим образом:
import MindFusion from ‘mindfusion-common’
Здесь мы импортируем все классы из вспомогательного общего npm-пакета MindFusion (https://www.npmjs.com/package/mindfusion-common) как MindFusion.
III. Диаграмма
Теперь мы создаем компонент RealTimeChart React в пустом файле RealTimeChart.js:
export class RealTimeChart extends Component {
}
Сначала мы реализуем метод рендеринга. Он возвращает элементы HTML, которые мы хотим, чтобы наш компонент имел. В этом случае нам нужно добавить только Canvas. Диаграмма MindFusion JavaScript требует, чтобы экземпляр Canvas отображался на:
render() {
return (
<div>
<canvas width=”1000px” height=”800px” ref={this.el}></canvas>
</div>
);
}
Обратите внимание, что мы добавляем атрибут ref к элементу canvas. Это имя, через которое мы сможем обращаться к элементу canvas в остальной части кода React. Холст инициализируется в render(), но мы должны иметь доступ к нему и в других методах. Таким образом, мы получим к нему доступ через «this.el».
Теперь мы добавляем конструктор. В нем мы создаем ссылку на холст диаграммы, используя метод createRef React, и сохраняем переменную с именем chart в состоянии компонента. Первоначально значение этого состояния равно нулю:
constructor(props) {
super(props);
this.el = React.createRef();
this.state = {
chart: null
}
}
Затем мы добавляем метод componentDidMount, в котором мы должны выполнить инициализацию и настройку диаграммы. В этом методе мы получаем ссылку на экземпляр this.el и можем использовать его для создания объекта диаграммы JS:
componentDidMount() {
var stockChart = new Charting.MindFusion.Charting.Controls.CandlestickChart(this.el.current);
stockChart.title = “The Big Corporation”;
stockChart.theme.titleFontSize = 16;
stockChart.candlestickWidth = 12;
stockChart.showLegend = false;
…………………
…………………
…………………
}
В componentDidMount мы также назначаем вновь созданный экземпляр диаграммы объекту состояния. Это позволяет нам получить ссылку на объект диаграммы JavaScript в любом месте кода:
this.setState({ chart: stockChart, data: dataList, intervalId: intervalId });
Здесь мы сохраняем три переменные в состоянии компонента React: биржевую диаграмму, список с данными диаграммы и экземпляр таймера intervalId. Нам нужен таймер, потому что мы хотим, чтобы наша диаграмма обновлялась через равные промежутки времени. В нашем случае — 1 минута или 6000 миллисекунд.
Вот как мы создаем таймер:
var intervalId = setInterval(this.updateStock.bind(this), 60000);
Итак, componentDidMount — это место, где вы получаете ссылку на элементы DOM, созданные в render(). Это место, где вы можете разместить важные данные в состоянии компонента, к которым вы будете обращаться в других методах. Здесь вы также вызываете другие методы, необходимые для сборки компонента. У нас есть один, и это метод, который анализирует данные диаграммы. Он называется updateStock, и мы вызываем его в конце componentDidMount:
this.updateStock();
Обратите внимание, что все методы, которые добавляются в наш компонент React, вызываются с помощью «this».
IV. Очистить данные
Наконец, мы используем метод componentWillUnmount для очистки интервала, который использовался для обновления диаграммы:
componentWillUnmount() {
clearInterval(this.state.intervalId);
}
Это место, где вы очищаете все прослушиватели событий и другие данные, экземпляры объектов, такие как таймер, которые вы создаете в componentDidMount.
И это идея вкратце. Вы узнали основы того, как интегрировать стороннюю библиотеку, написанную на чистом JavaScript, в собственное приложение React. Пример проекта доступен для скачивания по адресу:
http://mindfusion.eu/samples/javascript/chart/realtimechart-react.zip
О MindFusion JavaScript Gauges: набор из двух элементов управления: овальный и прямоугольный, с возможностью добавления неограниченного количества шкал и датчиков. Все элементы датчика поддерживают полную настройку внешнего вида. Также возможен пользовательский рисунок, где вы можете заменить визуализацию элемента датчика по умолчанию или добавить к ней. Элементы управления датчиками включают в себя множество примеров, которые предлагают прекрасные реализации самых популярных приложений датчиков: термометр, приборная панель автомобиля, функции, компас, часы, счетчик затрат и многое другое.
Датчики для JavaScript являются частью диаграмм и информационных панелей MindFusion. для JavaScript. Подробности на https://mindfusion.eu/javascript-chart.html.
