Графіки в мобільному додатку: бібліотеки та оптимізація

List<FlSpot> lttbDownsample(List<FlSpot> data, int threshold) {
  if (data.length <= threshold) return data;
  final sampled = <FlSpot>[data.first];
  final bucketSize = (data.length - 2) / (threshold - 2);
  var a = 0;
  for (var i = 0; i < threshold - 2; i++) {
    final rangeStart = (i * bucketSize + 1).floor();
    final rangeEnd = ((i + 1) * bucketSize + 1).floor().clamp(0, data.length);
    final nextA = ((i + 1) * bucketSize + 1).floor().clamp(0, data.length - 1);
    double maxArea = -1;
    int maxAreaPoint = rangeStart;
    for (var j = rangeStart; j < rangeEnd; j++) {
      final area = (data[a].x * (data[nextA].y - data[j].y) +
              data[nextA].x * (data[j].y - data[a].y) +
              data[j].x * (data[a].y - data[nextA].y))
          .abs() /
          2;
      if (area > maxArea) {
        maxArea = area;
        maxAreaPoint = j;
      }
    }
    sampled.add(data[maxAreaPoint]);
    a = maxAreaPoint;
  }
  sampled.add(data.last);
  return sampled;
}

500 точок замість 5000 — FPS повертається до 60. LTTB дає скорочення часу рендерингу в 10 разів порівняно з повним набором.

Порівняння методів downsampling

Для мобільних графіків LTTB — оптимальний баланс.

Руководство з впровадження downsampling за 3 кроки

1. Виберіть алгоритм LTTB — він дає найкраще співвідношення швидкості та якості для лінійних графіків.
2. Підготуйте дані — відфільтруйте null і NaN, приведіть до набору FlSpot.
3. Інтегруйте в LineChart — замініть вихідний масив на результат lttbDownsample перед передачею в LineChartData.

Анімації при появі даних

Анімація лінії, що «малюється» зліва направо — популярний UX-паттерн. На Flutter через AnimationController + TweenAnimationBuilder, обмежуючи кількість відображуваних точок через t:

TweenAnimationBuilder<double>(
  tween: Tween(begin: 0.0, end: 1.0),
  duration: const Duration(milliseconds: 800),
  curve: Curves.easeOut,
  builder: (context, value, _) {
    final visiblePoints = (allSpots.length * value).round();
    return LineChart(
      LineChartData(
        lineBarsData: [
          LineChartBarData(
            spots: allSpots.take(visiblePoints).toList(),
          ),
        ],
      ),
    );
  },
)

Для bar chart — анімація зростання стовпців через fromY параметр і AnimatedContainer.

Як реалізувати real-time оновлення без втрати FPS?

Графіки з оновленням щосекунди (метрики, біржові дані) вимагають setState тільки для змінених даних. Неправильно викликати setState на весь екран — перебудовується все дерево віджетів. Правильно: ValueNotifier + ValueListenableBuilder навколо тільки віджета графіка.

1. Визначте максимальну кількість відображуваних точок (ковзне вікно).
2. Використовуйте ValueNotifier для зберігання списку точок.
3. Оновлюйте ValueNotifier при надходженні нових даних.

final chartData = ValueNotifier<List<FlSpot>>([]);

// У віджеті:
ValueListenableBuilder<List<FlSpot>>(
  valueListenable: chartData,
  builder: (_, spots, __) => LineChart(
    LineChartData(
      lineBarsData: [
        LineChartBarData(
          spots: spots,
        ),
      ],
    ),
  ),
)

// При отриманні нової точки:
void addDataPoint(double x, double y) {
  final current = [...chartData.value, FlSpot(x, y)];
  if (current.length > maxPoints) current.removeAt(0); // sliding window
  chartData.value = current;
}

Як зробити графіки доступними?

Графіки недоступні для VoiceOver / TalkBack без додаткової роботи. Мінімум: Semantics віджет з описом того, що показує графік. Для фінансових або медичних додатків — обов'язкова таблична альтернатива даних графіка, перемикається через кнопку. Це відповідає WCAG 2.1 і App Store Review Guidelines (Section 5.1).

Що входить в роботу

• Вибір бібліотеки під вимоги проекту з обґрунтуванням
• Реалізація потрібних типів графіків (line, bar, pie, candlestick тощо)
• Оптимізація продуктивності (downsampling, рендеринг)
• Анімації при завантаженні даних
• Інтерактивність: zoom, pan, tooltip при дотику
• Accessibility підтримка
• Інтеграція з real-time джерелами даних
• Гарантія якості: 30-денна підтримка після здачі та безкоштовне виправлення помилок

Строки та вартість

Один тип графіка з базовою інтерактивністю: 2–3 дні. Набір з 3–5 типів з анімаціями та real-time оновленнями: 1–2 тижні. Вартість одного типу графіка з базовою інтерактивністю становить від $500. Економія часу на оптимізацію сягає 50% (наприклад, 2 дні замість 4). Замовте реалізацію під ключ: отримайте консультацію з вибору бібліотеки та оптимізації. Наші інженери допоможуть зекономити час і бюджет.