График временных рядов

График смешанного типа: принимает четыре последовательности данных (time-series) и рисует каждую из них по-своему, повторяя график из референса:

#	Серия (демо)	Чем рисуется
1	Cost	area — сглаженная область с заливкой
2	CPA	bar — столбики со скруглёнными краями
3	ROI confirmed	spline — толстая сглаженная кривая
4	Conversions	line — прямая линия с квадратными маркерами

Поведение соответствует референсу: оси и сетка скрыты, у каждой последовательности своя шкала (CPA намеренно делит денежную шкалу с Cost — поэтому его столбики остаются маленькими), а общий тултип следует за курсором. При наведении подсвечивается текущая точка у всех линейных серий: у area, spline и line появляется точка цвета серии, а у Conversions, где маркеры видны всегда, увеличивается тот квадрат, что находится под курсором. У столбиков точки для подсветки нет.

Стек: Preact 10 + TypeScript + Vite 7 + ApexCharts 7 (других зависимостей нет).

Быстрый старт

Требуется Node.js 20.19+ или 22.12+ (ограничение Vite 7 / ApexCharts 7).

npm install
npm run dev        # дев-сервер на http://localhost:5173

Продакшен-сборка и просмотр:

npm run build
npm run preview

Инициализация графика четырьмя последовательностями данных

График — это один компонент, TimeSeriesChart, которому передаётся массив из четырёх серий. Каждая серия сама указывает, чем её рисовать (area / spline / line / bar), и несёт собственные точки вида { date, value }:

import { TimeSeriesChart } from './chart/TimeSeriesChart';
import type { SeriesInput } from './chart/types';

const series: SeriesInput[] = [
  {
    name: 'Cost',
    type: 'area',
    decimals: 2,
    data: [
      { date: '10.06.2026', value: 2.04 },
      { date: '11.06.2026', value: 25.85 },
      // ...
    ],
  },
  {
    name: 'CPA',
    type: 'bar',
    decimals: 2,
    scaleWith: 'Cost', // денежная метрика -> едет на шкале Cost, как в референсе
    data: [{ date: '10.06.2026', value: 0.68 } /* ... */],
  },
  {
    name: 'ROI confirmed',
    type: 'spline',
    decimals: 2,
    data: [{ date: '10.06.2026', value: 610.78 } /* ... */],
  },
  {
    name: 'Conversions',
    type: 'line',
    marker: 'square',
    decimals: 0,
    data: [{ date: '10.06.2026', value: 3 } /* ... */],
  },
];

<TimeSeriesChart series={series} height={340} />;

Чтобы подставить в демо-приложение свои четыре последовательности, достаточно отредактировать src/demo-data.ts — больше менять ничего не нужно. Поле date принимает либо готовую строку в формате DD.MM.YYYY, либо JS-объект Date.

Наборы дат у последовательностей могут не совпадать: ось X собирается как объединение дат всех серий (для меток DD.MM.YYYY — в хронологическом порядке, иначе — в порядке их появления), а серия, у которой какой-то даты нет, просто оставляет там пропуск, а не сдвигает остальные точки влево. Отрицательные значения рисуются ниже нулевой линии, а не прижимаются к ней.

Параметры серии

Поле	Тип	Назначение
name	string	Название серии, отображается в тултипе
type	'area' | 'spline' | 'line' | 'bar'	Чем рисуется последовательность
data	{ date, value }[]	Сама последовательность
color	string?	Цвет серии (по умолчанию — палитра из референса)
marker	'none' | 'circle' | 'square'?	Постоянно видимые маркеры точек
scaleWith	string?	Имя другой серии, с которой делится шкала Y
decimals	number?	Фиксированное число знаков после запятой в тултипе (2 → 180.50)

Структура проекта

src/
  chart/
    TimeSeriesChart.tsx   Preact-компонент (монтирование / обновление / уничтожение)
    buildOptions.ts       SeriesInput[] -> опции ApexCharts (вся стилизация живёт здесь)
    types.ts              публичные типы
    chart.css             оформление тултипа
  demo-data.ts            четыре последовательности из референса
  app.tsx                 демо-страница (фон дашборда + панель с графиком)