Научитесь создавать многонаправленную приборную панель на TypeScript

Продолжая серию «простых», но функциональных статей по TypeScript, представляю вашему вниманию руководство по созданию типа приборной панели, о которой я ничего не нашел в Интернете.

Если вы наберёте в Google «dashboard multi-direction», то найдёте только онлайн-версию этого же примера.

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

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

Настройка шаблона нашего проекта

  1. Пожалуйста, скачайте шаблон, который предоставляется в этой статье. Проект находится в файле .RAR, который вы можете скачать здесь.

  2. Вы увидите дерево файлов, подобное этому:

  1. Теперь, пожалуйста, откройте новый терминал в Visual Studio Code.

  2. Как обычно в Node JS проекте, нам нужно будет запустить команду NPM Install.

Это будет все для нашей начальной установки. Давайте напишем код.

CHART.ts

Внутри этого файла будет вся логика, необходимая для создания нашего графика, настройки анимации и форматирования данных.

  1. Объявим константу lcjs, которая будет ссылаться на нашу библиотеку @arction/lcjs.
  2. Извлеките необходимые классы из lcjs.
  3. Извлеките необходимые классы из xydata.
// Import LightningChartJS
const lcjs = require('@arction/lcjs')

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    SolidFill,
    ColorRGBA,
    AxisScrollStrategies,
    DataPatterns,
    Themes
} = lcjs

// Import data-generators from 'xydata'-library.
const {
    createProgressiveTraceGenerator,
    createTraceGenerator
} = require('@arction/xydata')
Войдите в полноэкранный режим Выход из полноэкранного режима
  1. Теперь давайте создадим приборную панель:
const grid = lightningChart().Dashboard({
    theme: Themes.darkRed, 
    numberOfRows: 3,
    numberOfColumns: 3
})
Войти в полноэкранный режим Выйти из полноэкранного режима
  • NumberOfRows/Columns: указывает количество строк и столбцов в приборной панели. Мы можем указать по индексу строки/столбца, где будет отображаться график.

Например, вот приборная панель 3×3:

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

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

Подробнее о свойстве Themes можно узнать здесь.

  • Cells: Этот массив будет содержать расположение 5 графиков XY. В рамках приборной панели 3×3 мы можем создать до 9 графиков, поэтому не стесняйтесь экспериментировать и добавлять или удалять индексы.
const cells = [
    { row: 1, col: 0 },
    { row: 2, col: 1 },
    { row: 1, col: 2 },
    { row: 0, col: 1 },
    { row: 1, col: 1 }
]
Вход в полноэкранный режим Выход из полноэкранного режима
  • chooseRandom: Эта константа поможет нам указать, какой тип XY-графика будет создан. Случайное значение всегда будет равно 0 или 1.
const chooseRandom = (options) => options[Math.round(Math.random() * (options.length - 1))]
Войти в полноэкранный режим Выйти из полноэкранного режима
  • createCell:
const createCell = (cell) => {
    const chart = grid.createChartXY({
        columnIndex: cell.col,
        rowIndex: cell.row,
        columnSpan: 1,
        rowSpan: 1
    })
    // Add a random omni-directional series.
    const type = chooseRandom(['PointSeries', 'LineSeries'])
    // Setup data-generation for series.
    if (cell.row == cell.col) {
        const series = chart['add' + type]()
        if (type === 'LineSeries') {
            series.setCursorSolveBasis('nearest')
        }
        // Random trace
        createTraceGenerator()
            .setNumberOfPoints(100000)
            .generate()
            .setStreamInterval(50)
            .setStreamBatchSize(10)
            .setStreamRepeat(true)
            .toStream()
            .forEach(point => series.add(point))
Войти в полноэкранный режим Выйти из полноэкранного режима

Эта функция создаст случайный график для каждого индекса в массиве ячеек (карте).

  • createChartXY: Новый объект графика XY добавляется к объекту приборной панели (сетки). Местоположение будет задано свойствами индексов столбцов и строк. Значения были указаны в объекте массива ячеек.

  • const type: Получает тип графика для этого нового объекта, используя функцию random, описанную выше.
    0 = ‘PointSeries’
    1 = ‘LineSeries’

  • setCursorSolveBasis: Устанавливает основу для разрешения ближайшей точки данных к заданному местоположению в этой серии. Подробнее о setCursorSolveBasis можно узнать в документации.

  • createTraceGenerator: Создает базовый прогрессивный генератор случайных данных и использует Stream API для вывода данных на консоль.

setNumberOfPoints: Определяет, что должно быть сгенерировано 100000 точек.

generate: Генерирует эти 100000 точек.

setStreamInterval: Интервал выполнения будет равен 50 миллисекундам.

setStreamBatchSize: Поток будет генерировать 10 точек за раз.

setStreamRepeat: Поток будет повторяться бесконечно.

toStream: Создать новый поток с указанными выше настройками.

forEach: Эта функция будет выполняться для каждой точки в данных.

Добавление поведения к графикам:

const flipPlane = cell.col == 1
        const mul = { x: cell.col == 0 ? -1 : 1, y: cell.row == 0 ? 1 : -1 }
        // Configure axes.
        let axisX = chart.getDefaultAxisX(), axisY = chart.getDefaultAxisY()
Вход в полноэкранный режим Выход из полноэкранного режима

getDefaultAxisX / getDefaultAxisY: С помощью этих функций мы сможем добавить свойства к осям X и Y текущего отображаемого графика.

if (mul.x < 0) {
            axisX
                .setInterval(-100, 0)
                .setScrollStrategy(flipPlane ? AxisScrollStrategies.fitting : AxisScrollStrategies.regressive)
        } else
            axisX
                .setInterval(0, 100)
                .setScrollStrategy(flipPlane ? AxisScrollStrategies.fitting : AxisScrollStrategies.progressive)

        if (mul.y < 0) {
            axisY
                .setInterval(-100, 0)
                .setScrollStrategy(flipPlane ? AxisScrollStrategies.regressive : AxisScrollStrategies.fitting)
        } else
            axisY
                .setInterval(0, 100)
                .setScrollStrategy(flipPlane ? AxisScrollStrategies.progressive : AxisScrollStrategies.fitting)
Вход в полноэкранный режим Выход из полноэкранного режима

Добавление стратегий AxisScrollStrategies в зависимости от значения столбца Axis:

AxisScrollStrategies можно использовать для настройки поведения прокрутки оси.

расширение: Ось будет прокручиваться, чтобы вместить серии, находящиеся вне поля зрения, но не будет сжиматься, даже если есть пустое пространство (как это делает «fitting»).

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

прогрессировать: Ось будет прокручиваться для отображения новых, прогрессирующих данных, но сохранит постоянный интервал, оставляя старые данные вне поля зрения.

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

npm start

Чтобы визуализировать приложение, откройте терминал и выполните команду npm start. Вы сможете увидеть приборную панель на локальном хост-сервере.


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

Чтобы увидеть больше высокопроизводительных и полностью интерактивных JS диаграмм, посетите LightningChart JS.

Надеюсь, эта статья была полезной, до встречи в следующей!

Автор:
Омар Урбано | Найдите меня на LinkedIn

Оцените статью
devanswers.ru
Добавить комментарий