Add support for multiple trend lines

Author: h65wang

example/lib/main.dart

@@ -39,9 +39,9 @@ class _MyAppState extends State<MyApp> {
               onPressed: () {
                 setState(() => _showAverage = !_showAverage);
                 if (_showAverage) {
-                  CandleData.computeMA(_data, 7);
+                  _computeTrendLines();
                 } else {
-                  CandleData.deleteMA(_data);
+                  _removeTrendLines();
                 }
               },
             ),
@@ -59,7 +59,16 @@ class _MyAppState extends State<MyApp> {
             //   priceGainColor: Colors.teal[200]!,
             //   priceLossColor: Colors.blueGrey,
             //   volumeColor: Colors.teal.withOpacity(0.8),
-            //   trendLineColor: Colors.blueGrey[200]!,
+            //   trendLineStyles: [
+            //     Paint()
+            //       ..strokeWidth = 2.0
+            //       ..strokeCap = StrokeCap.round
+            //       ..color = Colors.deepOrange,
+            //     Paint()
+            //       ..strokeWidth = 4.0
+            //       ..strokeCap = StrokeCap.round
+            //       ..color = Colors.orange,
+            //   ],
             //   priceGridLineColor: Colors.blue[200]!,
             //   priceLabelStyle: TextStyle(color: Colors.blue[200]),
             //   timeLabelStyle: TextStyle(color: Colors.blue[200]),
@@ -86,4 +95,20 @@ class _MyAppState extends State<MyApp> {
       ),
     );
   }
+
+  _computeTrendLines() {
+    final ma7 = CandleData.computeMA(_data, 7);
+    final ma30 = CandleData.computeMA(_data, 30);
+    final ma90 = CandleData.computeMA(_data, 90);
+
+    for (int i = 0; i < _data.length; i++) {
+      _data[i].trends = [ma7[i], ma30[i], ma90[i]];
+    }
+  }
+
+  _removeTrendLines() {
+    for (final data in _data) {
+      data.trends = [];
+    }
+  }
 }

example/lib/mock_data.dart

@@ -23,8 +23,18 @@ class CandleData {
   /// The volume information of this data point.
   final double? volume;
 
-  /// Optional data holder for drawing a trend line, e.g. moving average.
-  double? trend;
+  /// Data holder for additional trend lines, for this data point.
+  ///
+  /// For a single trend line, we can assign it as a list with a single element.
+  /// For example if we want "7 days moving average", do something like
+  /// `trends = [ma7]`. If there are multiple tread lines, we can assign a list
+  /// with multiple elements, like `trends = [ma7, ma30]`.
+  /// If we don't want any trend lines, we can assign an empty list.
+  ///
+  /// This should be an unmodifiable list, so please do not use `add`
+  /// or `clear` methods on the list. Always assign a new list if values
+  /// are changed. Otherwise the UI might not be updated.
+  List<double?> trends;
 
   CandleData({
     required this.timestamp,
@@ -33,26 +43,32 @@ class CandleData {
     required this.volume,
     this.high,
     this.low,
-  });
+    List<double?>? trends,
+  }) : this.trends = List.unmodifiable(trends ?? []);
 
-  static void computeMA(List<CandleData> data, [int period = 7]) {
-    if (data.length < period * 2) return;
+  static List<double?> computeMA(List<CandleData> data, [int period = 7]) {
+    // If data is not at least twice as long as the period, return nulls.
+    if (data.length < period * 2) return List.filled(data.length, null);
+
+    final List<double?> result = [];
+    // Skip the first [period] data points. For example, skip 7 data points.
     final firstPeriod =
         data.take(period).map((d) => d.close).whereType<double>();
     double ma = firstPeriod.reduce((a, b) => a + b) / firstPeriod.length;
+    result.addAll(List.filled(period, null));
 
+    // Compute the moving average for the rest of the data points.
     for (int i = period; i < data.length; i++) {
       final curr = data[i].close;
       final prev = data[i - period].close;
       if (curr != null && prev != null) {
         ma = (ma * period + curr - prev) / period;
-        data[i].trend = ma;
+        result.add(ma);
+      } else {
+        result.add(null);
       }
     }
-  }
-
-  static void deleteMA(List<CandleData> data) {
-    data.forEach((element) => element.trend = null);
+    return result;
   }
 
   @override

lib/src/candle_data.dart

@@ -1,5 +1,6 @@
 import 'dart:math';
 
+import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 
 import 'candle_data.dart';
@@ -150,39 +151,44 @@ class ChartPainter extends CustomPainter {
       );
     }
     // Draw trend line
-    final trendLinePaint = Paint()
-      ..strokeWidth = 2.0
-      ..strokeCap = StrokeCap.round
-      ..color = params.style.trendLineColor;
-    final pt = candle.trend; // current data point
-    final prevPt = params.candles.at(i - 1)?.trend;
-    if (pt != null && prevPt != null) {
-      canvas.drawLine(
-        Offset(x - params.candleWidth, params.fitPrice(prevPt)),
-        Offset(x, params.fitPrice(pt)),
-        trendLinePaint,
-      );
-    }
-    if (i == 0) {
-      // In the front, draw an extra line connecting to out-of-window data
-      if (pt != null && params.leadingTrend != null) {
+    for (int j = 0; j < candle.trends.length; j++) {
+      final trendLinePaint = params.style.trendLineStyles.at(j) ??
+          (Paint()
+            ..strokeWidth = 2.0
+            ..strokeCap = StrokeCap.round
+            ..color = Colors.blue);
+
+      final pt = candle.trends.at(j); // current data point
+      final prevPt = params.candles.at(i - 1)?.trends.at(j);
+      if (pt != null && prevPt != null) {
         canvas.drawLine(
-          Offset(x - params.candleWidth, params.fitPrice(params.leadingTrend!)),
+          Offset(x - params.candleWidth, params.fitPrice(prevPt)),
           Offset(x, params.fitPrice(pt)),
           trendLinePaint,
         );
       }
-    } else if (i == params.candles.length - 1) {
-      // At the end, draw an extra line connecting to out-of-window data
-      if (pt != null && params.trailingTrend != null) {
-        canvas.drawLine(
-          Offset(x, params.fitPrice(pt)),
-          Offset(
-            x + params.candleWidth,
-            params.fitPrice(params.trailingTrend!),
-          ),
-          trendLinePaint,
-        );
+      if (i == 0) {
+        // In the front, draw an extra line connecting to out-of-window data
+        if (pt != null && params.leadingTrends?.at(j) != null) {
+          canvas.drawLine(
+            Offset(x - params.candleWidth,
+                params.fitPrice(params.leadingTrends!.at(j)!)),
+            Offset(x, params.fitPrice(pt)),
+            trendLinePaint,
+          );
+        }
+      } else if (i == params.candles.length - 1) {
+        // At the end, draw an extra line connecting to out-of-window data
+        if (pt != null && params.trailingTrends?.at(j) != null) {
+          canvas.drawLine(
+            Offset(x, params.fitPrice(pt)),
+            Offset(
+              x + params.candleWidth,
+              params.fitPrice(params.trailingTrends!.at(j)!),
+            ),
+            trendLinePaint,
+          );
+        }
       }
     }
   }

lib/src/chart_painter.dart

@@ -38,8 +38,10 @@ class ChartStyle {
   /// The color of the `volume` bars.
   final Color volumeColor;
 
-  /// The color of the trend line, if available.
-  final Color trendLineColor;
+  /// The style of trend lines. If there are multiple lines, their styles will
+  /// be chosen in the order of appearance in this list. If this list is shorter
+  /// than the number of trend lines, a default blue paint will be applied.
+  final List<Paint> trendLineStyles;
 
   /// The color of the price grid line.
   final Color priceGridLineColor;
@@ -71,7 +73,7 @@ class ChartStyle {
     this.priceGainColor = Colors.green,
     this.priceLossColor = Colors.red,
     this.volumeColor = Colors.grey,
-    this.trendLineColor = Colors.blue,
+    this.trendLineStyles = const [],
     this.priceGridLineColor = Colors.grey,
     this.selectionHighlightColor = const Color(0x33757575),
     this.overlayBackgroundColor = const Color(0xEE757575),

lib/src/chart_style.dart

@@ -111,8 +111,8 @@ class _InteractiveChartState extends State<InteractiveChart> {
 
         // If possible, find neighbouring trend line data,
         // so the chart could draw better-connected lines
-        final leadingTrend = widget.candles.at(start - 1)?.trend;
-        final trailingTrend = widget.candles.at(end + 1)?.trend;
+        final leadingTrends = widget.candles.at(start - 1)?.trends;
+        final trailingTrends = widget.candles.at(end + 1)?.trends;
 
         // Find the horizontal shift needed when drawing the candles.
         // First, always shift the chart by half a candle, because when we
@@ -179,8 +179,8 @@ class _InteractiveChartState extends State<InteractiveChart> {
                 minVol: minVol,
                 xShift: xShift,
                 tapPosition: _tapPosition,
-                leadingTrend: leadingTrend,
-                trailingTrend: trailingTrend,
+                leadingTrends: leadingTrends,
+                trailingTrends: trailingTrends,
               ),
             ),
             duration: Duration(milliseconds: 300),

lib/src/interactive_chart.dart

@@ -18,8 +18,8 @@ class PainterParams {
 
   final double xShift;
   final Offset? tapPosition;
-  final double? leadingTrend;
-  final double? trailingTrend;
+  final List<double?>? leadingTrends;
+  final List<double?>? trailingTrends;
 
   PainterParams({
     required this.candles,
@@ -33,8 +33,8 @@ class PainterParams {
     required this.minVol,
     required this.xShift,
     required this.tapPosition,
-    required this.leadingTrend,
-    required this.trailingTrend,
+    required this.leadingTrends,
+    required this.trailingTrends,
   });
 
   double get chartWidth => // width without price labels
@@ -79,8 +79,8 @@ class PainterParams {
       minVol: lerpField((p) => p.minVol),
       xShift: b.xShift,
       tapPosition: b.tapPosition,
-      leadingTrend: b.leadingTrend,
-      trailingTrend: b.trailingTrend,
+      leadingTrends: b.leadingTrends,
+      trailingTrends: b.trailingTrends,
     );
   }
 
@@ -99,8 +99,8 @@ class PainterParams {
 
     if (tapPosition != other.tapPosition) return true;
 
-    if (leadingTrend != other.leadingTrend ||
-        trailingTrend != other.trailingTrend) return true;
+    if (leadingTrends != other.leadingTrends ||
+        trailingTrends != other.trailingTrends) return true;
 
     if (style != other.style) return true;