diff --git a/example/lib/radar_chart/samples/radar_chart_sample1.dart b/example/lib/radar_chart/samples/radar_chart_sample1.dart index 2e3c61f14..da1fd4fce 100644 --- a/example/lib/radar_chart/samples/radar_chart_sample1.dart +++ b/example/lib/radar_chart/samples/radar_chart_sample1.dart @@ -31,21 +31,23 @@ class _RadarChartSampleState extends State { fontSize: 10, ), titleTextStyle: const TextStyle( - color: Colors.blue, + color: Colors.red, fontSize: 14, ), radarTouchData: RadarTouchData(touchCallback: (response) { - setState(() { - log('response type: ${response.touchInput}'); + log('response type: ${response.touchInput}'); - if (response.touchedSpot != null && - response.touchInput is! FlPanEnd && - response.touchInput is! FlLongPressEnd) { + if (response.touchedSpot != null && + response.touchInput is! FlPanEnd && + response.touchInput is! FlLongPressEnd) { + setState(() { touchedDataSetIndex = response?.touchedSpot?.touchedDataSetIndex ?? -1; - } else { + }); + } else { + setState(() { touchedDataSetIndex = -1; - } - }); + }); + } })), ), ), @@ -60,7 +62,7 @@ class _RadarChartSampleState extends State { const RadarEntry(value: 28), const RadarEntry(value: 25), ], - borderWidth: 3, + borderWidth: touchedDataSetIndex == 0 ? 4 : 3, color: Colors.red, entryRadius: (touchedDataSetIndex == 0) ? 6.0 : 3.0, ), @@ -70,7 +72,7 @@ class _RadarChartSampleState extends State { const RadarEntry(value: 20), const RadarEntry(value: 30), ], - borderWidth: 3, + borderWidth: touchedDataSetIndex == 1 ? 4 : 3, color: Colors.orange, entryRadius: (touchedDataSetIndex == 1) ? 6.0 : 3.0, ), diff --git a/lib/src/chart/radar_chart/radar_chart.dart b/lib/src/chart/radar_chart/radar_chart.dart index b1a0a85af..371b40971 100644 --- a/lib/src/chart/radar_chart/radar_chart.dart +++ b/lib/src/chart/radar_chart/radar_chart.dart @@ -5,18 +5,20 @@ import 'package:fl_chart/src/chart/radar_chart/radar_chart_painter.dart'; import 'package:fl_chart/src/utils/utils.dart'; import 'package:flutter/material.dart'; -//ToDo(payam) : extend this widget from [ImplicitlyAnimatedWidget] -class RadarChart extends StatefulWidget { +class RadarChart extends ImplicitlyAnimatedWidget { final RadarChartData data; - const RadarChart(this.data, {Key key}) : super(key: key); + const RadarChart( + this.data, { + Key key, + Duration swapAnimationDuration = const Duration(milliseconds: 150), + }) : super(key: key, duration: swapAnimationDuration); @override _RadarChartState createState() => _RadarChartState(); } -//ToDo(payam) : handle animation -class _RadarChartState extends State { +class _RadarChartState extends AnimatedWidgetBaseState { /// we handle under the hood animations (implicit animations) via this tween, /// it lerps between the old [PieChartData] to the new one. RadarChartDataTween _radarChartDataTween; @@ -116,9 +118,8 @@ class _RadarChartState extends State { key: _chartKey, size: getDefaultSize(context), painter: RadarChartPainter( - widget.data, - //ToDo(payam) : update it for animations - widget.data, + _radarChartDataTween.evaluate(animation), + showingData, (touchHandler) { setState(() { _touchHandler = touchHandler; @@ -149,4 +150,13 @@ class _RadarChartState extends State { bool _canHandleTouch(RadarTouchResponse response, RadarTouchData touchData) { return response != null && touchData != null && touchData.touchCallback != null; } + + @override + void forEachTween(visitor) { + _radarChartDataTween = visitor( + _radarChartDataTween, + widget.data, + (dynamic value) => RadarChartDataTween(begin: value), + ); + } } diff --git a/lib/src/chart/radar_chart/radar_chart_data.dart b/lib/src/chart/radar_chart/radar_chart_data.dart index 5c53499a5..f6dbb3adc 100644 --- a/lib/src/chart/radar_chart/radar_chart_data.dart +++ b/lib/src/chart/radar_chart/radar_chart_data.dart @@ -95,7 +95,7 @@ class RadarChartData extends BaseChartData { t, ), tickCount: lerpInt(a.tickCount, b.tickCount, t), - ticksTextStyle: TextStyle.lerp(a.ticksTextStyle, b.titleTextStyle, t), + ticksTextStyle: TextStyle.lerp(a.ticksTextStyle, b.ticksTextStyle, t), gridData: BorderSide.lerp(a.gridData, b.gridData, t), borderData: FlBorderData.lerp(a.borderData, b.borderData, t), radarTouchData: b.radarTouchData, diff --git a/lib/src/chart/radar_chart/radar_chart_painter.dart b/lib/src/chart/radar_chart/radar_chart_painter.dart index 4010fac8d..ce8d48b32 100644 --- a/lib/src/chart/radar_chart/radar_chart_painter.dart +++ b/lib/src/chart/radar_chart/radar_chart_painter.dart @@ -1,3 +1,4 @@ +import 'dart:developer'; import 'dart:math' show pi, cos, sin, min; import 'dart:ui'; @@ -15,6 +16,8 @@ class RadarChartPainter extends BaseChartPainter List dataSetsPosition; + + RadarChartPainter( RadarChartData data, RadarChartData targetData, @@ -97,11 +100,7 @@ class RadarChartPainter extends BaseChartPainter }); } - double radarCenterY(Size size) => size.height / 2.0; - double radarCenterX(Size size) => size.width / 2.0; - - double radarRadius(Size size) => min(radarCenterX(size), radarCenterY(size)) * 0.7; void drawGrids(Size size, Canvas canvas) { final centerX = radarCenterX(size); @@ -179,7 +178,7 @@ class RadarChartPainter extends BaseChartPainter _graphBorderPaint ..color = graph.color ..style = PaintingStyle.stroke - ..strokeWidth = 2.0 + ..strokeWidth = graph.borderWidth ..isAntiAlias = true; _graphPointPaint @@ -225,6 +224,12 @@ class RadarChartPainter extends BaseChartPainter return RadarTouchResponse(touchedSpot, touchInput); } + double radarCenterY(Size size) => size.height / 2.0; + + double radarCenterX(Size size) => size.width / 2.0; + + double radarRadius(Size size) => min(radarCenterX(size), radarCenterY(size)) * 0.7; + RadarTouchedSpot _getNearestTouchSpot( Size viewSize, Offset touchedPoint, @@ -289,9 +294,12 @@ class RadarChartPainter extends BaseChartPainter @override bool shouldRepaint(RadarChartPainter oldDelegate) { - //ToDo(payam) : override this method - return true; + final repaint = oldDelegate.data != data; + log('repaint radar chart: $repaint'); + return repaint; } + + } class RadarDataSetsPosition {