From 5487520f37d453bd5eb07006af1ab4f4808c1ce0 Mon Sep 17 00:00:00 2001 From: joaortk Date: Fri, 13 Dec 2019 02:09:10 -0300 Subject: [PATCH 1/2] Added optional animation for drawing the chart lines. --- lib/src/bezier_chart_widget.dart | 41 ++++++++++++++++++++++++++++---- 1 file changed, 36 insertions(+), 5 deletions(-) diff --git a/lib/src/bezier_chart_widget.dart b/lib/src/bezier_chart_widget.dart index 806e856..ac48eec 100644 --- a/lib/src/bezier_chart_widget.dart +++ b/lib/src/bezier_chart_widget.dart @@ -77,6 +77,9 @@ class BezierChart extends StatefulWidget { ///Notify if the `BezierChartScale` changed, it only works with date scales. final ValueChanged onScaleChanged; + ///If set, the lines ate drawn with animation. Defaults to FALSE + final bool animateAppear; + BezierChart({ Key key, this.config, @@ -96,6 +99,7 @@ class BezierChart extends StatefulWidget { @required this.bezierChartScale, @required this.series, this.onScaleChanged, + this.animateAppear = false }) : assert( (bezierChartScale == BezierChartScale.CUSTOM && xAxisCustomValues != null && @@ -147,11 +151,14 @@ class BezierChart extends StatefulWidget { @visibleForTesting class BezierChartState extends State - with SingleTickerProviderStateMixin { + with TickerProviderStateMixin { AnimationController _animationController; + Animation _appearAnimation; ScrollController _scrollController; GlobalKey _keyScroll = GlobalKey(); + double _appearFraction = 0.0; + ///Track the current position when dragging the indicator Offset _verticalIndicatorPosition; bool _displayIndicator = false; @@ -178,6 +185,7 @@ class BezierChartState extends State BezierChartScale _currentBezierChartScale; double _lastValueSnapped = double.infinity; + bool get isPinchZoomActive => (_touchFingers > 1 && widget.config.pinchZoom); ///When we only have 1 axis we don't need to much span to change the date type chart` @@ -538,13 +546,14 @@ class BezierChartState extends State valueMap = tmpMap.map((k, v) => MapEntry(k, v.length.toDouble())); } else if (widget.bezierChartAggregation == BezierChartAggregation.MAX) { - valueMap = tmpMap.map((k, v) => MapEntry(k, v.reduce((c1, c2) => c1 > c2 ? c1 : c2))); + valueMap = tmpMap.map( + (k, v) => MapEntry(k, v.reduce((c1, c2) => c1 > c2 ? c1 : c2))); } else if (widget.bezierChartAggregation == BezierChartAggregation.MIN) { - valueMap = tmpMap.map((k, v) => MapEntry(k, v.reduce((c1, c2) => c1 < c2 ? c1 : c2))); + valueMap = tmpMap.map( + (k, v) => MapEntry(k, v.reduce((c1, c2) => c1 < c2 ? c1 : c2))); } - List> newDataPoints = []; valueMap.keys.forEach( (key) { @@ -753,6 +762,21 @@ class BezierChartState extends State milliseconds: 300, ), ); + + if(widget.animateAppear) { + var controller = AnimationController( + duration: Duration(milliseconds: 2000), vsync: this); + + _appearAnimation = Tween(begin: 0.0, end: 1.0).animate(controller) + ..addListener(() { + setState(() { + _appearFraction = _appearAnimation.value; + }); + }); + + controller.forward(); + } + _buildXDataPoints(); _computeSeries(); WidgetsBinding.instance.addPostFrameCallback(_onLayoutDone); @@ -843,6 +867,7 @@ class BezierChartState extends State curve: Curves.elasticOut, ), ), + appearFraction: widget.animateAppear ? _appearFraction : 1.0, xAxisDataPoints: _xAxisDataPoints, onDataPointSnap: _onDataPointSnap, maxWidth: MediaQuery.of(context).size.width, @@ -986,6 +1011,7 @@ class _BezierChartPainter extends CustomPainter { final double radiusDotIndicatorItems = 3.5; final bool showIndicator; final Animation animation; + final double appearFraction; final ValueChanged onDataPointSnap; final BezierChartScale bezierChartScale; final double maxWidth; @@ -1007,6 +1033,7 @@ class _BezierChartPainter extends CustomPainter { this.showIndicator, this.xAxisDataPoints, this.animation, + this.appearFraction, this.bezierChartScale, this.onDataPointSnap, this.maxWidth, @@ -1255,7 +1282,10 @@ class _BezierChartPainter extends CustomPainter { //only draw the footer for the first line because it is the same for all the lines if (!footerDrawed) footerDrawed = true; - + if (appearFraction < 1.0) { + canvas.clipRect( + Rect.fromLTWH(0, 0, size.width * appearFraction, size.height)); + } canvas.drawPath(path, paintLine); if (config.showDataPoints) { //draw data points @@ -1604,6 +1634,7 @@ class _BezierChartPainter extends CustomPainter { class _AxisValue { final double x; final double y; + const _AxisValue({ this.x, this.y, From fe7b79161f1e4a73877a1d867959eade94bb23ed Mon Sep 17 00:00:00 2001 From: joaortk Date: Fri, 13 Dec 2019 02:12:59 -0300 Subject: [PATCH 2/2] Fixing code style --- lib/src/bezier_chart_widget.dart | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/lib/src/bezier_chart_widget.dart b/lib/src/bezier_chart_widget.dart index ac48eec..9101135 100644 --- a/lib/src/bezier_chart_widget.dart +++ b/lib/src/bezier_chart_widget.dart @@ -77,7 +77,7 @@ class BezierChart extends StatefulWidget { ///Notify if the `BezierChartScale` changed, it only works with date scales. final ValueChanged onScaleChanged; - ///If set, the lines ate drawn with animation. Defaults to FALSE + ///If set, the lines are drawn with animation. Defaults to FALSE final bool animateAppear; BezierChart({ @@ -185,7 +185,6 @@ class BezierChartState extends State BezierChartScale _currentBezierChartScale; double _lastValueSnapped = double.infinity; - bool get isPinchZoomActive => (_touchFingers > 1 && widget.config.pinchZoom); ///When we only have 1 axis we don't need to much span to change the date type chart` @@ -546,14 +545,13 @@ class BezierChartState extends State valueMap = tmpMap.map((k, v) => MapEntry(k, v.length.toDouble())); } else if (widget.bezierChartAggregation == BezierChartAggregation.MAX) { - valueMap = tmpMap.map( - (k, v) => MapEntry(k, v.reduce((c1, c2) => c1 > c2 ? c1 : c2))); + valueMap = tmpMap.map((k, v) => MapEntry(k, v.reduce((c1, c2) => c1 > c2 ? c1 : c2))); } else if (widget.bezierChartAggregation == BezierChartAggregation.MIN) { - valueMap = tmpMap.map( - (k, v) => MapEntry(k, v.reduce((c1, c2) => c1 < c2 ? c1 : c2))); + valueMap = tmpMap.map((k, v) => MapEntry(k, v.reduce((c1, c2) => c1 < c2 ? c1 : c2))); } + List> newDataPoints = []; valueMap.keys.forEach( (key) { @@ -1283,8 +1281,7 @@ class _BezierChartPainter extends CustomPainter { //only draw the footer for the first line because it is the same for all the lines if (!footerDrawed) footerDrawed = true; if (appearFraction < 1.0) { - canvas.clipRect( - Rect.fromLTWH(0, 0, size.width * appearFraction, size.height)); + canvas.clipRect(Rect.fromLTWH(0, 0, size.width * appearFraction, size.height)); } canvas.drawPath(path, paintLine); if (config.showDataPoints) {