From 68073f98bc97b042a4faeec0d31608c489d687c5 Mon Sep 17 00:00:00 2001 From: LavanyaGowtham2021 Date: Fri, 21 Jun 2024 09:35:36 +0530 Subject: [PATCH 1/2] Updated demo --- lib/main.dart | 11 +++-- lib/selection.dart | 66 ++++++++----------------- lib/trackball.dart | 79 ++++++++++-------------------- lib/zoompan.dart | 117 +++++++++++++++------------------------------ 4 files changed, 89 insertions(+), 184 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index 2d66e07..b174941 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -14,6 +14,8 @@ class MyApp extends StatelessWidget { 'Selection', ]; + MyApp({super.key}); + @override Widget build(BuildContext context) { return MaterialApp( @@ -29,20 +31,19 @@ class MyApp extends StatelessWidget { return ListTile( title: Text(items[index]), onTap: () { - String title = 'Synchronized ${items[index]}'; Navigator.push( context, MaterialPageRoute( builder: (context) => Scaffold( appBar: AppBar( - title: Text('$title'), + title: Text('Synchronized ${items[index]}'), ), body: Center( child: index == 0 - ? SynchronizedTrackball() + ? const SynchronizedTrackball() : index == 1 - ? SynchronizedZoomPan() - : SynchronizedSelection(), + ? const SynchronizedZoomPan() + : const SynchronizedSelection(), ), ), ), diff --git a/lib/selection.dart b/lib/selection.dart index 39e4d3c..62bdd4c 100644 --- a/lib/selection.dart +++ b/lib/selection.dart @@ -1,3 +1,5 @@ +// ignore_for_file: must_be_immutable + import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; @@ -8,26 +10,10 @@ class SynchronizedSelection extends StatelessWidget { @override Widget build(BuildContext context) { - return const MaterialApp( + return MaterialApp( debugShowCheckedModeBanner: false, title: 'Synchronized Selection', - home: MyHomePage(), - ); - } -} - -class MyHomePage extends StatefulWidget { - const MyHomePage({super.key}); - - @override - _MyHomePageState createState() => _MyHomePageState(); -} - -class _MyHomePageState extends State { - @override - Widget build(BuildContext context) { - return const SafeArea( - child: Scaffold( + home: Scaffold( backgroundColor: Colors.white, body: Row( children: [ @@ -40,12 +26,12 @@ class _MyHomePageState extends State { } } -SelectionBehavior selectionBehavior1 = +SelectionBehavior _baseSelection = SelectionBehavior(enable: true, toggleSelection: false); -SelectionBehavior selectionBehavior2 = +SelectionBehavior _targetSelection = SelectionBehavior(enable: true, toggleSelection: false); int selectedIndex = -1; -List data = [ +List _data = [ SalesData('Jan', 21), SalesData('Feb', 24), SalesData('Mar', 35), @@ -54,16 +40,9 @@ List data = [ SalesData('Jun', 21), ]; -class FirstChart extends StatefulWidget { - const FirstChart({super.key}); +class FirstChart extends StatelessWidget { + FirstChart({super.key}); - @override - State createState() { - return FirstChartState(); - } -} - -class FirstChartState extends State { bool _isInteractive = false; @override @@ -75,7 +54,7 @@ class FirstChartState extends State { onSelectionChanged: (selectionArgs) { if (_isInteractive && selectedIndex != selectionArgs.pointIndex) { selectedIndex = selectionArgs.pointIndex; - selectionBehavior2.selectDataPoints(selectedIndex); + _targetSelection.selectDataPoints(selectedIndex); _isInteractive = false; } }, @@ -83,10 +62,10 @@ class FirstChartState extends State { title: const ChartTitle(text: 'Chart 1'), series: >[ ColumnSeries( - dataSource: data, - xValueMapper: (SalesData sales, _) => sales.year, - yValueMapper: (SalesData sales, _) => sales.sales, - selectionBehavior: selectionBehavior1, + dataSource: _data, + xValueMapper: (SalesData sales, int index) => sales.year, + yValueMapper: (SalesData sales, int index) => sales.sales, + selectionBehavior: _baseSelection, color: const Color.fromRGBO(99, 85, 199, 1), ), ], @@ -94,16 +73,9 @@ class FirstChartState extends State { } } -class SecondChart extends StatefulWidget { - const SecondChart({super.key}); - - @override - State createState() { - return SecondChartState(); - } -} +class SecondChart extends StatelessWidget { + SecondChart({super.key}); -class SecondChartState extends State { bool _isInteractive = false; @override @@ -115,7 +87,7 @@ class SecondChartState extends State { onSelectionChanged: (selectionArgs) { if (_isInteractive && selectedIndex != selectionArgs.pointIndex) { selectedIndex = selectionArgs.pointIndex; - selectionBehavior1.selectDataPoints(selectedIndex); + _baseSelection.selectDataPoints(selectedIndex); _isInteractive = false; } }, @@ -123,10 +95,10 @@ class SecondChartState extends State { title: const ChartTitle(text: 'Chart 2'), series: >[ ColumnSeries( - dataSource: data, + dataSource: _data, xValueMapper: (SalesData sales, _) => sales.year, yValueMapper: (SalesData sales, _) => sales.sales, - selectionBehavior: selectionBehavior2, + selectionBehavior: _targetSelection, color: const Color.fromRGBO(99, 85, 199, 1), ), ], diff --git a/lib/trackball.dart b/lib/trackball.dart index 55cca07..c60dc62 100644 --- a/lib/trackball.dart +++ b/lib/trackball.dart @@ -1,3 +1,5 @@ +// ignore_for_file: must_be_immutable + import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; @@ -11,26 +13,10 @@ class SynchronizedTrackball extends StatelessWidget { @override Widget build(BuildContext context) { - return const MaterialApp( + return MaterialApp( debugShowCheckedModeBanner: false, title: 'Synchronized Trackball', - home: MyHomePage(), - ); - } -} - -class MyHomePage extends StatefulWidget { - const MyHomePage({super.key}); - - @override - _MyHomePageState createState() => _MyHomePageState(); -} - -class _MyHomePageState extends State { - @override - Widget build(BuildContext context) { - return const SafeArea( - child: Scaffold( + home: Scaffold( backgroundColor: Colors.white, body: Row( children: [ @@ -43,26 +29,18 @@ class _MyHomePageState extends State { } } -TrackballBehavior trackball1 = +TrackballBehavior _baseTrackball = TrackballBehavior(enable: true, activationMode: ActivationMode.singleTap); -TrackballBehavior trackball2 = +TrackballBehavior _targetTrackball = TrackballBehavior(enable: true, activationMode: ActivationMode.singleTap); - -ChartSeriesController? _controller1; -ChartSeriesController? _controller2; -DataModel dataModel = DataModel(); +ChartSeriesController? _baseSeriesController; +ChartSeriesController? _targetSeriesController; +DataModel _dataModel = DataModel(); Offset? _position; -class FirstChart extends StatefulWidget { - const FirstChart({super.key}); - - @override - State createState() { - return FirstChartState(); - } -} +class FirstChart extends StatelessWidget { + FirstChart({super.key}); -class FirstChartState extends State { bool _isInteractive = false; @override @@ -73,14 +51,14 @@ class FirstChartState extends State { }, onChartTouchInteractionUp: (ChartTouchInteractionArgs tapArgs) { _isInteractive = false; - trackball2.hide(); + _targetTrackball.hide(); }, onTrackballPositionChanging: (TrackballArgs trackballArgs) { if (_isInteractive) { - _position = _controller1!.pointToPixel( + _position = _baseSeriesController!.pointToPixel( trackballArgs.chartPointInfo.chartPoint!, ); - trackball2.show(_position!.dx, _position!.dy, 'pixel'); + _targetTrackball.show(_position!.dx, _position!.dy, 'pixel'); } }, primaryXAxis: DateTimeAxis( @@ -96,15 +74,15 @@ class FirstChartState extends State { interval: 0.025, ), title: const ChartTitle(text: 'Chart 1'), - trackballBehavior: trackball1, + trackballBehavior: _baseTrackball, series: >[ LineSeries( color: const Color.fromRGBO(99, 85, 199, 1), - dataSource: dataModel.data, + dataSource: _dataModel.data, xValueMapper: (SalesData sales, int index) => sales.dateTime, yValueMapper: (SalesData sales, int index) => sales.y, onRendererCreated: (ChartSeriesController controller) { - _controller2 = controller; + _targetSeriesController = controller; }, ), ], @@ -112,16 +90,9 @@ class FirstChartState extends State { } } -class SecondChart extends StatefulWidget { - const SecondChart({super.key}); - - @override - State createState() { - return SecondChartState(); - } -} +class SecondChart extends StatelessWidget { + SecondChart({super.key}); -class SecondChartState extends State { bool _isInteractive = false; @override @@ -132,14 +103,14 @@ class SecondChartState extends State { }, onChartTouchInteractionUp: (ChartTouchInteractionArgs tapArgs) { _isInteractive = false; - trackball1.hide(); + _baseTrackball.hide(); }, onTrackballPositionChanging: (TrackballArgs trackballArgs) { if (_isInteractive) { - _position = _controller2!.pointToPixel( + _position = _targetSeriesController!.pointToPixel( trackballArgs.chartPointInfo.chartPoint!, ); - trackball1.show(_position!.dx, _position!.dy, 'pixel'); + _baseTrackball.show(_position!.dx, _position!.dy, 'pixel'); } }, primaryXAxis: DateTimeAxis( @@ -155,15 +126,15 @@ class SecondChartState extends State { interval: 0.025, ), title: const ChartTitle(text: 'Chart 2'), - trackballBehavior: trackball2, + trackballBehavior: _targetTrackball, series: >[ LineSeries( color: const Color.fromRGBO(99, 85, 199, 1), - dataSource: dataModel.data, + dataSource: _dataModel.data, xValueMapper: (SalesData sales, int index) => sales.dateTime, yValueMapper: (SalesData sales, int index) => sales.y, onRendererCreated: (ChartSeriesController controller) { - _controller1 = controller; + _baseSeriesController = controller; }, ), ], diff --git a/lib/zoompan.dart b/lib/zoompan.dart index df55bd9..26e4d10 100644 --- a/lib/zoompan.dart +++ b/lib/zoompan.dart @@ -14,29 +14,7 @@ class SynchronizedZoomPan extends StatelessWidget { return const MaterialApp( debugShowCheckedModeBanner: false, title: 'Synchronized ZoomPan', - home: MyHomePage(), - ); - } -} - -double zoomPosition = 0; -double zoomFactor = 1; -DateTimeAxisController? axisController1; -DateTimeAxisController? axisController2; -DataModel dataModel = DataModel(); - -class MyHomePage extends StatefulWidget { - const MyHomePage({super.key}); - - @override - _MyHomePageState createState() => _MyHomePageState(); -} - -class _MyHomePageState extends State { - @override - Widget build(BuildContext context) { - return const SafeArea( - child: Scaffold( + home: Scaffold( backgroundColor: Colors.white, body: Row( children: [ @@ -49,16 +27,12 @@ class _MyHomePageState extends State { } } -class FirstChart extends StatefulWidget { - const FirstChart({super.key}); - @override - State createState() { - return FirstChartState(); - } -} +DateTimeAxisController? _firstAxisController; +DateTimeAxisController? _secondAxisController; +DataModel _dataModel = DataModel(); -class FirstChartState extends State { - FirstChartState({Key? key}); +class FirstChart extends StatelessWidget { + const FirstChart({super.key}); @override Widget build(BuildContext context) { @@ -71,36 +45,33 @@ class FirstChartState extends State { zoomMode: ZoomMode.x), onZooming: (ZoomPanArgs args) { if (args.axis!.name == 'primaryXAxis') { - zoomPosition = args.currentZoomPosition; - zoomFactor = args.currentZoomFactor; - axisController2!.zoomFactor = zoomFactor; - axisController2!.zoomPosition = zoomPosition; + _secondAxisController!.zoomFactor = args.currentZoomFactor; + _secondAxisController!.zoomPosition = args.currentZoomPosition; } }, primaryXAxis: DateTimeAxis( - minimum: DateTime(2023, 02, 18), - maximum: DateTime(2023, 08, 18), - dateFormat: DateFormat.MMMd(), - edgeLabelPlacement: EdgeLabelPlacement.shift, - majorGridLines: const MajorGridLines(width: 0), - onRendererCreated: (DateTimeAxisController controller) { - axisController1 = controller; - }, - initialZoomFactor: zoomFactor, - initialZoomPosition: zoomPosition, - name: 'primaryXAxis'), + minimum: DateTime(2023, 02, 18), + maximum: DateTime(2023, 08, 18), + dateFormat: DateFormat.MMMd(), + edgeLabelPlacement: EdgeLabelPlacement.shift, + majorGridLines: const MajorGridLines(width: 0), + onRendererCreated: (DateTimeAxisController controller) { + _firstAxisController = controller; + }, + initialZoomFactor: 1, + initialZoomPosition: 0, + ), primaryYAxis: const NumericAxis( minimum: 0.85, maximum: 1, interval: 0.025, - name: 'primaryYAxis', ), title: const ChartTitle(text: 'Chart 1'), series: >[ SplineSeries( - dataSource: dataModel.data, - xValueMapper: (SalesData sales, _) => sales.dateTime, - yValueMapper: (SalesData sales, _) => sales.y, + dataSource: _dataModel.data, + xValueMapper: (SalesData sales, int index) => sales.dateTime, + yValueMapper: (SalesData sales, int index) => sales.y, color: const Color.fromRGBO(99, 85, 199, 1), ) ], @@ -108,16 +79,8 @@ class FirstChartState extends State { } } -class SecondChart extends StatefulWidget { +class SecondChart extends StatelessWidget { const SecondChart({super.key}); - @override - State createState() { - return SecondChartState(); - } -} - -class SecondChartState extends State { - SecondChartState({Key? key}); @override Widget build(BuildContext context) { @@ -130,24 +93,22 @@ class SecondChartState extends State { zoomMode: ZoomMode.x), onZooming: (ZoomPanArgs args) { if (args.axis!.name == 'primaryXAxis') { - zoomPosition = args.currentZoomPosition; - zoomFactor = args.currentZoomFactor; - axisController1!.zoomFactor = zoomFactor; - axisController1!.zoomPosition = zoomPosition; + _firstAxisController!.zoomFactor = args.currentZoomFactor; + _firstAxisController!.zoomPosition = args.currentZoomPosition; } }, primaryXAxis: DateTimeAxis( - minimum: DateTime(2023, 02, 18), - maximum: DateTime(2023, 08, 18), - dateFormat: DateFormat.MMMd(), - edgeLabelPlacement: EdgeLabelPlacement.shift, - majorGridLines: const MajorGridLines(width: 0), - onRendererCreated: (DateTimeAxisController controller) { - axisController2 = controller; - }, - initialZoomFactor: zoomFactor, - initialZoomPosition: zoomPosition, - name: 'primaryXAxis'), + minimum: DateTime(2023, 02, 18), + maximum: DateTime(2023, 08, 18), + dateFormat: DateFormat.MMMd(), + edgeLabelPlacement: EdgeLabelPlacement.shift, + majorGridLines: const MajorGridLines(width: 0), + onRendererCreated: (DateTimeAxisController controller) { + _secondAxisController = controller; + }, + initialZoomFactor: 1, + initialZoomPosition: 0, + ), primaryYAxis: const NumericAxis( minimum: 0.85, maximum: 1, @@ -156,9 +117,9 @@ class SecondChartState extends State { title: const ChartTitle(text: 'Chart 2'), series: >[ SplineSeries( - dataSource: dataModel.data, - xValueMapper: (SalesData sales, _) => sales.dateTime, - yValueMapper: (SalesData sales, _) => sales.y, + dataSource: _dataModel.data, + xValueMapper: (SalesData sales, int index) => sales.dateTime, + yValueMapper: (SalesData sales, int index) => sales.y, color: const Color.fromRGBO(99, 85, 199, 1), ) ], From 9e17f01ff2649ec3ec6b73b027e69be26654cb00 Mon Sep 17 00:00:00 2001 From: LavanyaGowtham2021 Date: Fri, 21 Jun 2024 09:38:27 +0530 Subject: [PATCH 2/2] Updated demo --- lib/selection.dart | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/lib/selection.dart b/lib/selection.dart index 62bdd4c..1ac08e1 100644 --- a/lib/selection.dart +++ b/lib/selection.dart @@ -30,7 +30,7 @@ SelectionBehavior _baseSelection = SelectionBehavior(enable: true, toggleSelection: false); SelectionBehavior _targetSelection = SelectionBehavior(enable: true, toggleSelection: false); -int selectedIndex = -1; +int _selectedIndex = -1; List _data = [ SalesData('Jan', 21), SalesData('Feb', 24), @@ -52,9 +52,9 @@ class FirstChart extends StatelessWidget { _isInteractive = true; }, onSelectionChanged: (selectionArgs) { - if (_isInteractive && selectedIndex != selectionArgs.pointIndex) { - selectedIndex = selectionArgs.pointIndex; - _targetSelection.selectDataPoints(selectedIndex); + if (_isInteractive && _selectedIndex != selectionArgs.pointIndex) { + _selectedIndex = selectionArgs.pointIndex; + _targetSelection.selectDataPoints(_selectedIndex); _isInteractive = false; } }, @@ -85,9 +85,9 @@ class SecondChart extends StatelessWidget { _isInteractive = true; }, onSelectionChanged: (selectionArgs) { - if (_isInteractive && selectedIndex != selectionArgs.pointIndex) { - selectedIndex = selectionArgs.pointIndex; - _baseSelection.selectDataPoints(selectedIndex); + if (_isInteractive && _selectedIndex != selectionArgs.pointIndex) { + _selectedIndex = selectionArgs.pointIndex; + _baseSelection.selectDataPoints(_selectedIndex); _isInteractive = false; } },