Add support for customized overlay and label texts

h65wang · h65wang · commit 5f5dca0a1e58 · 2021-07-14T16:21:48.000-07:00
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -17,7 +17,7 @@ class MyApp extends StatefulWidget {
 
 class _MyAppState extends State<MyApp> {
   List<CandleData> _data = MockDataTesla.candles;
-  bool _darkMode = false;
+  bool _darkMode = true;
   bool _showAverage = false;
 
   @override
@@ -55,17 +55,24 @@ class _MyAppState extends State<MyApp> {
           child: InteractiveChart(
             candles: _data,
             style: ChartStyle(
-              priceGainColor: Colors.purple,
-              priceLossColor: Colors.deepPurple,
-              volumeColor: Colors.pink,
-              trendLineColor: Colors.teal,
-              priceGridLineColor: Colors.green,
-              priceLabelStyle: TextStyle(color: Colors.orange[800]!),
-              dateLabelStyle: TextStyle(color: Colors.indigo),
-              selectionHighlightColor: Colors.yellow.withOpacity(0.5),
-              overlayBackgroundColor: Colors.blue[100]!.withOpacity(0.8),
-              overlayTextStyle: TextStyle(color: Colors.blue[900]),
+              priceGainColor: Colors.teal[200]!,
+              priceLossColor: Colors.blueGrey,
+              volumeColor: Colors.teal.withOpacity(0.8),
+              trendLineColor: Colors.blueGrey[200]!,
+              priceGridLineColor: Colors.blue[200]!,
+              priceLabelStyle: TextStyle(color: Colors.blue[200]),
+              timeLabelStyle: TextStyle(color: Colors.indigo),
+              selectionHighlightColor: Colors.red.withOpacity(0.2),
+              overlayBackgroundColor: Colors.red[900]!.withOpacity(0.6),
+              overlayTextStyle: TextStyle(color: Colors.red[100]),
             ),
+            overlayInfo: (candle) => {
+              "💎": "🤚    ",
+              "高": "${candle.high?.toStringAsFixed(2)}",
+              "低": "${candle.low?.toStringAsFixed(2)}",
+            },
+            timeLabel: (timestamp, count) => "📅",
+            priceLabel: (price) => "${price.round()} 💎",
           ),
         ),
       ),
diff --git a/lib/chart_painter.dart b/lib/chart_painter.dart
@@ -5,15 +5,27 @@ import 'package:flutter/widgets.dart';
 import 'candle_data.dart';
 import 'painter_params.dart';
 
+typedef TimeLabelGetter = String Function(int timestamp, int visibleDataCount);
+typedef PriceLabelGetter = String Function(double price);
+typedef OverlayInfoGetter = Map<String, String> Function(CandleData candle);
+
 class ChartPainter extends CustomPainter {
   final PainterParams params;
+  final TimeLabelGetter getTimeLabel;
+  final PriceLabelGetter getPriceLabel;
+  final OverlayInfoGetter getOverlayInfo;
 
-  ChartPainter(this.params);
+  ChartPainter({
+    required this.params,
+    required this.getTimeLabel,
+    required this.getPriceLabel,
+    required this.getOverlayInfo,
+  });
 
   @override
   void paint(Canvas canvas, Size size) {
-    // Draw date labels & price labels
-    _drawDateLabels(canvas, params);
+    // Draw time labels (dates) & price labels
+    _drawTimeLabels(canvas, params);
     _drawPriceGridAndLabels(canvas, params);
 
     // Draw prices, volumes & trend line
@@ -38,8 +50,8 @@ class ChartPainter extends CustomPainter {
     }
   }
 
-  void _drawDateLabels(canvas, PainterParams params) {
-    // We draw one date label per 90 pixels of screen width
+  void _drawTimeLabels(canvas, PainterParams params) {
+    // We draw one time label per 90 pixels of screen width
     final lineCount = params.chartWidth ~/ 90;
     final gap = 1 / (lineCount + 1);
     for (int i = 1; i <= lineCount; i++) {
@@ -48,15 +60,15 @@ class ChartPainter extends CustomPainter {
       if (index < params.candles.length) {
         final candle = params.candles[index];
         final visibleDataCount = params.candles.length;
-        final dateTp = TextPainter(
+        final timeTp = TextPainter(
           text: TextSpan(
-            text: params.getDateLabel(candle.timestamp, visibleDataCount),
-            style: params.style.dateLabelStyle,
+            text: getTimeLabel(candle.timestamp, visibleDataCount),
+            style: params.style.timeLabelStyle,
           ),
         )
           ..textDirection = TextDirection.ltr
           ..layout();
-        dateTp.paint(canvas, Offset(x - dateTp.width / 2, params.chartHeight));
+        timeTp.paint(canvas, Offset(x - timeTp.width / 2, params.chartHeight));
       }
     }
   }
@@ -74,7 +86,7 @@ class ChartPainter extends CustomPainter {
       );
       final priceTp = TextPainter(
         text: TextSpan(
-          text: params.getPriceLabel(y),
+          text: getPriceLabel(y),
           style: params.style.priceLabelStyle,
         ),
       )
@@ -200,16 +212,20 @@ class ChartPainter extends CustomPainter {
           ..textDirection = TextDirection.ltr
           ..layout();
 
-    final info = params.getOverlayInfo(candle);
+    final info = getOverlayInfo(candle);
     final labels = info.keys.map((text) => makeTP(text)).toList();
     final values = info.values.map((text) => makeTP(text)).toList();
 
     final labelsMaxWidth = labels.map((tp) => tp.width).reduce(max);
     final valuesMaxWidth = values.map((tp) => tp.width).reduce(max);
     final panelWidth = labelsMaxWidth + valuesMaxWidth + xGap * 3;
-    final panelHeight =
-        values.first.height * values.length + yGap * (values.length + 1);
+    final panelHeight = max(
+          labels.map((tp) => tp.height).reduce((a, b) => a + b),
+          values.map((tp) => tp.height).reduce((a, b) => a + b),
+        ) +
+        yGap * (values.length + 1);
 
+    // Shift the canvas, so the overlay panel can appear near touch position.
     canvas.save();
     final pos = params.tapPosition!;
     final fingerSize = 32.0; // leave some margin around user's finger
@@ -226,27 +242,33 @@ class ChartPainter extends CustomPainter {
     if (dy < 0) dy = 0.0;
     canvas.translate(dx, dy);
 
-    // Paint overlay panel and texts
+    // Draw the background for overlay panel
     canvas.drawRRect(
         RRect.fromRectAndRadius(
           Offset.zero & Size(panelWidth, panelHeight),
           Radius.circular(8),
         ),
         Paint()..color = params.style.overlayBackgroundColor);
+
+    // Draw texts
+    var y = 0.0;
     for (int i = 0; i < labels.length; i++) {
-      labels[i].paint(
-        canvas,
-        Offset(xGap, (yGap + values.first.height) * i + yGap),
-      );
-    }
-    for (int i = 0; i < values.length; i++) {
-      final leading = valuesMaxWidth - values[i].width;
+      y += yGap;
+      final rowHeight = max(labels[i].height, values[i].height);
+      // Draw labels (left align, vertical center)
+      final labelY = y + (rowHeight - labels[i].height) / 2; // vertical center
+      labels[i].paint(canvas, Offset(xGap, labelY));
+
+      // Draw values (right align, vertical center)
+      final leading = valuesMaxWidth - values[i].width; // right align
+      final valueY = y + (rowHeight - values[i].height) / 2; // vertical center
       values[i].paint(
         canvas,
-        Offset(labelsMaxWidth + xGap * 2 + leading,
-            (yGap + values.first.height) * i + yGap),
+        Offset(labelsMaxWidth + xGap * 2 + leading, valueY),
       );
+      y += rowHeight;
     }
+
     canvas.restore();
   }
 
diff --git a/lib/chart_style.dart b/lib/chart_style.dart
@@ -3,9 +3,9 @@ import 'package:flutter/material.dart';
 class ChartStyle {
   final double volumeHeightFactor;
   final double priceLabelWidth;
-  final double dateLabelHeight;
+  final double timeLabelHeight;
 
-  final TextStyle dateLabelStyle;
+  final TextStyle timeLabelStyle;
   final TextStyle priceLabelStyle;
   final TextStyle overlayTextStyle;
 
@@ -27,8 +27,8 @@ class ChartStyle {
   const ChartStyle({
     this.volumeHeightFactor = 0.2,
     this.priceLabelWidth = 48.0,
-    this.dateLabelHeight = 24.0,
-    this.dateLabelStyle = const TextStyle(
+    this.timeLabelHeight = 24.0,
+    this.timeLabelStyle = const TextStyle(
       fontSize: 16,
       color: Colors.grey,
     ),
diff --git a/lib/interactive_chart.dart b/lib/interactive_chart.dart
@@ -1,6 +1,7 @@
 import 'dart:math';
 
 import 'package:flutter/widgets.dart';
+import 'package:intl/intl.dart' as intl;
 
 import 'candle_data.dart';
 import 'chart_painter.dart';
@@ -11,8 +12,18 @@ class InteractiveChart extends StatefulWidget {
   final List<CandleData> candles;
   final ChartStyle style;
 
-  const InteractiveChart({Key? key, required this.candles, ChartStyle? style})
-      : this.style = style ?? const ChartStyle(),
+  final TimeLabelGetter? timeLabel;
+  final PriceLabelGetter? priceLabel;
+  final OverlayInfoGetter? overlayInfo;
+
+  const InteractiveChart({
+    Key? key,
+    required this.candles,
+    ChartStyle? style,
+    this.timeLabel,
+    this.priceLabel,
+    this.overlayInfo,
+  })  : this.style = style ?? const ChartStyle(),
         assert(candles.length >= 3,
             "InteractiveChart requires 3 or more CandleData"),
         super(key: key);
@@ -120,7 +131,12 @@ class _InteractiveChartState extends State<InteractiveChart> {
             builder: (_, PainterParams params, __) {
               return CustomPaint(
                 size: size,
-                painter: ChartPainter(params),
+                painter: ChartPainter(
+                  params: params,
+                  getTimeLabel: widget.timeLabel ?? defaultTimeLabel,
+                  getPriceLabel: widget.priceLabel ?? defaultPriceLabel,
+                  getOverlayInfo: widget.overlayInfo ?? defaultOverlayInfo,
+                ),
               );
             },
           ),
@@ -186,4 +202,51 @@ class _InteractiveChartState extends State<InteractiveChart> {
     final start = widget.candles.length - count;
     return max(0, candleWidth * start);
   }
+
+  String defaultTimeLabel(int timestamp, int visibleDataCount) {
+    final date = DateTime.fromMillisecondsSinceEpoch(timestamp * 1000)
+        .toIso8601String()
+        .split("T")
+        .first
+        .split("-");
+
+    if (visibleDataCount > 20) {
+      // If more than 20 data points are visible, we should show year and month.
+      return "${date[0]}-${date[1]}"; // yyyy-mm
+    } else {
+      // Otherwise, we should show month and date.
+      return "${date[1]}-${date[2]}"; // mm-dd
+    }
+  }
+
+  String defaultPriceLabel(double price) => price.toStringAsFixed(2);
+
+  Map<String, String> defaultOverlayInfo(CandleData candle) {
+    final date = intl.DateFormat.yMMMd()
+        .format(DateTime.fromMillisecondsSinceEpoch(candle.timestamp * 1000));
+    return {
+      "Date": date,
+      "Open": candle.open?.toStringAsFixed(2) ?? "-",
+      "High": candle.high?.toStringAsFixed(2) ?? "-",
+      "Low": candle.low?.toStringAsFixed(2) ?? "-",
+      "Close": candle.close?.toStringAsFixed(2) ?? "-",
+      "Volume": candle.volume?.asAbbreviated() ?? "-",
+    };
+  }
+}
+
+extension Formatting on double {
+  String asPercent() {
+    final format = this < 100 ? "##0.00" : "#,###";
+    final v = intl.NumberFormat(format, "en_US").format(this);
+    return "${this >= 0 ? '+' : ''}$v%";
+  }
+
+  String asAbbreviated() {
+    if (this < 1000) return this.toStringAsFixed(3);
+    if (this >= 1e18) return this.toStringAsExponential(3);
+    final s = intl.NumberFormat("#,###", "en_US").format(this).split(",");
+    const suffixes = ["K", "M", "B", "T", "Q"];
+    return "${s[0]}.${s[1]}${suffixes[s.length - 2]}";
+  }
 }
diff --git a/lib/painter_params.dart b/lib/painter_params.dart
@@ -1,6 +1,5 @@
 import 'dart:ui';
 import 'package:flutter/widgets.dart';
-import 'package:intl/intl.dart' as intl;
 
 import 'chart_style.dart';
 import 'candle_data.dart';
@@ -41,8 +40,8 @@ class PainterParams {
   double get chartWidth => // width without price labels
       size.width - style.priceLabelWidth;
 
-  double get chartHeight => // height without date labels
-      size.height - style.dateLabelHeight;
+  double get chartHeight => // height without time labels
+      size.height - style.timeLabelHeight;
 
   double get volumeHeight => chartHeight * style.volumeHeightFactor;
 
@@ -65,37 +64,6 @@ class PainterParams {
     return volumeHeight - vol + priceHeight - baseAmount;
   }
 
-  String getDateLabel(int timestamp, int visibleDataCount) {
-    final date = DateTime.fromMillisecondsSinceEpoch(timestamp * 1000)
-        .toIso8601String()
-        .split("T")
-        .first
-        .split("-");
-
-    if (visibleDataCount > 20) {
-      // If more than 20 data points are visible, we should show year and month.
-      return "${date[0]}-${date[1]}"; // yyyy-mm
-    } else {
-      // Otherwise, we should show month and date.
-      return "${date[1]}-${date[2]}"; // mm-dd
-    }
-  }
-
-  String getPriceLabel(double price) => price.toStringAsFixed(2);
-
-  Map<String, String> getOverlayInfo(CandleData candle) {
-    final date = intl.DateFormat.yMMMd()
-        .format(DateTime.fromMillisecondsSinceEpoch(candle.timestamp * 1000));
-    return {
-      "Date": date,
-      "Open": candle.open?.toStringAsFixed(2) ?? "-",
-      "High": candle.high?.toStringAsFixed(2) ?? "-",
-      "Low": candle.low?.toStringAsFixed(2) ?? "-",
-      "Close": candle.close?.toStringAsFixed(2) ?? "-",
-      "Volume": candle.volume?.asAbbreviated() ?? "-",
-    };
-  }
-
   static PainterParams lerp(PainterParams a, PainterParams b, double t) {
     double lerpField(double getField(PainterParams p)) =>
         lerpDouble(getField(a), getField(b), t)!;
@@ -126,19 +94,3 @@ class PainterParamsTween extends Tween<PainterParams> {
   @override
   PainterParams lerp(double t) => PainterParams.lerp(begin ?? end!, end!, t);
 }
-
-extension Formatting on double {
-  String asPercent() {
-    final format = this < 100 ? "##0.00" : "#,###";
-    final v = intl.NumberFormat(format, "en_US").format(this);
-    return "${this >= 0 ? '+' : ''}$v%";
-  }
-
-  String asAbbreviated() {
-    if (this < 1000) return this.toStringAsFixed(3);
-    if (this >= 1e18) return this.toStringAsExponential(3);
-    final s = intl.NumberFormat("#,###", "en_US").format(this).split(",");
-    const suffixes = ["K", "M", "B", "T", "Q"];
-    return "${s[0]}.${s[1]}${suffixes[s.length - 2]}";
-  }
-}
