MetricsChart.tsx

Обзор

MetricsChart.tsx — это React-компонент, предназначенный для визуализации временных рядов метрик в виде интерактивных графиков. Файл содержит основной компонент MetricsChart, который отображает линейный график с заливкой, шкалами, сеткой, индикаторами тренда и дополнительной информацией о текущем значении и изменениях метрик. Также в файле определены специализированные компоненты для отображения конкретных метрик: TPS (транзакций в секунду), среднего времени блока, состояния сети и количества активных валидаторов.

Графики рисуются с помощью HTML5 <canvas>, что обеспечивает высокую производительность и гибкость визуализации. Компонент поддерживает настройку цвета, высоты, иконки, единиц измерения, форматирования значений и отображения тренда.

Подробное описание компонентов и функций

Типы и интерфейсы

interface MetricPoint {
  timestamp: number;
  value: number;
}

• Представляет точку данных метрики с временной меткой и числовым значением.

interface MetricsChartProps {
  title: string;
  data: MetricPoint[];
  color: string;
  unit?: string;
  icon?: React.ReactNode;
  height?: number;
  showTrend?: boolean;
  formatValue?: (value: number) => string;
}

• Свойства компонента MetricsChart.

• Параметры:

  • title: заголовок графика.

  • data: массив точек метрик.

  • color: цвет линии и заливки графика (в формате CSS).

  • unit (опционально): единица измерения, отображается рядом со значением.

  • icon (опционально): React-элемент для отображения иконки слева от заголовка.

  • height (опционально, по умолчанию 200): высота канваса в пикселях.

  • showTrend (опционально, по умолчанию true): флаг отображения индикатора тренда.

  • formatValue (опционально): функция форматирования значений (по умолчанию округляет до 1 знака).

Компонент MetricsChart

export function MetricsChart(props: MetricsChartProps)

Описание

Основной компонент визуализации метрик. Отрисовывает график с сеткой, линией, заливкой, точками данных, текущим значением, трендом и информацией о максимуме и минимуме.

Параметры

Передаётся объект с пропсами, описанными в интерфейсе MetricsChartProps.

Логика и особенности реализации

• Использует useRef для получения ссылки на <canvas>.

• В useEffect происходит отрисовка графика при изменении данных, цвета, высоты или флага тренда.

• Отрисовка включает:

  • Установка размеров канваса с учетом devicePixelRatio для чёткого изображения.

  • Отрисовка пунктирных горизонтальных и вертикальных линий сетки.

  • Заполнение области под графиком градиентом с прозрачностью.

  • Отрисовка линии графика.

  • Отрисовка последних 10 точек данных в виде кружков.

• Подсчёт тренда на основе сравнения средних значений последних 10 и предыдущих 10 точек.

• Отображение заголовка с иконкой, текущего значения и индикатора тренда.

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

• Отображение мгновенного изменения между последними двумя значениями.

Возвращаемое значение

JSX-разметка, отображающая оформленный график с дополнительной информацией.

Пример использования

<MetricsChart
  title="Example Metric"
  data={[{ timestamp: 1, value: 10 }, { timestamp: 2, value: 15 }]}
  color="#ff0000"
  unit=" units"
  icon={<SomeIcon />}
  height={250}
  showTrend={true}
  formatValue={(v) => v.toFixed(2)}
/>

Специализированные компоненты

Каждый из следующих компонентов является обёрткой над MetricsChart, задающей конкретные параметры для разных метрик.

TPSChart

export function TPSChart({ data }: { data: MetricPoint[] })

• Визуализирует транзакции в секунду (TPS).

• Цвет: жёлтый (#fbbf24).

• Юнит: " TPS".

• Иконка: <Zap /> из lucide-react.

• Формат значения: округление до целого числа.

BlockTimeChart

export function BlockTimeChart({ data }: { data: MetricPoint[] })

• Визуализирует среднее время блока в секундах.

• Цвет: зелёный (#10b981).

• Юнит: "s".

• Иконка: <Clock />.

• Формат значения: два знака после запятой.

NetworkHealthChart

export function NetworkHealthChart({ data }: { data: MetricPoint[] })

• Визуализирует состояние сети в процентах.

• Цвет: синий (#3b82f6).

• Юнит: "%".

• Иконка: <Activity />.

• Формат значения: один знак после запятой.

ValidatorCountChart

export function ValidatorCountChart({ data }: { data: MetricPoint[] })

• Визуализирует количество активных валидаторов.

• Цвет: фиолетовый (#8b5cf6).

• Юнит: отсутствует.

• Иконка: <Users />.

• Формат значения: округление до целого.

• Отключён индикатор тренда (showTrend=false).

Важные детали реализации и алгоритмы

• Масштабирование канваса: учитывается window.devicePixelRatio для чёткого рендеринга на дисплеях с высокой плотностью пикселей.

• Рисование сетки: 5 горизонтальных и 7 вертикальных пунктирных линий, равномерно распределённых по области графика.

• Градиент заливки под графиком: плавный переход прозрачности цвета метрики от 25% к 6%.

• Отрисовка линии графика: плавное соединение точек данных с толщиной 2px.

• Индикатор тренда:

  • Рассчитывается на основе сравнения средних значений последних 10 и 10 предыдущих точек.

  • Процентное изменение вычисляется и на его основании определяется тренд: "up", "down" или "stable".

• Отображение мгновенного изменения: разница между последними двумя значениями показывается с цветовой индикацией (зелёный — рост, красный — падение).

Взаимодействие с другими частями системы

• Использует иконки из библиотеки lucide-react для визуального оформления.

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

• Специализированные компоненты (TPSChart, BlockTimeChart и др.) позволяют быстро создавать типовые графики с преднастроенными параметрами.

• Компонент можно использовать совместно с системами сбора метрик, передавая им массивы данных в виде MetricPoint[].

Диаграмма структуры компонентов

componentDiagram
    MetricsChart <|-- TPSChart
    MetricsChart <|-- BlockTimeChart
    MetricsChart <|-- NetworkHealthChart
    MetricsChart <|-- ValidatorCountChart

    MetricsChart : +title: string
    MetricsChart : +data: MetricPoint[]
    MetricsChart : +color: string
    MetricsChart : +unit?: string
    MetricsChart : +icon?: React.ReactNode
    MetricsChart : +height?: number
    MetricsChart : +showTrend?: boolean
    MetricsChart : +formatValue?: (value: number) => string

    TPSChart --> MetricsChart : Использует с параметрами (title="Transactions Per Second", color="#fbbf24", unit=" TPS", icon=Zap)
    BlockTimeChart --> MetricsChart : Использует с параметрами (title="Average Block Time", color="#10b981", unit="s", icon=Clock)
    NetworkHealthChart --> MetricsChart : Использует с параметрами (title="Network Health", color="#3b82f6", unit="%", icon=Activity)
    ValidatorCountChart --> MetricsChart : Использует с параметрами (title="Active Validators", color="#8b5cf6", icon=Users, showTrend=false)

Резюме

Файл MetricsChart.tsx предоставляет мощный и настраиваемый компонент для визуализации временных рядов метрик в виде красочных и информативных линейных графиков. Он сочетает в себе эффективную отрисовку на <canvas>, расчет трендов и удобную структуру с возможностью расширения через специализированные обёртки. Это ключевой элемент для построения аналитических панелей и мониторинговых систем в React-приложениях.