Merge pull request #30 from imaNNeoFighT/feature/interactivity

Feature/interactivity

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.1.1
+* nothing important
+
+## 0.1.0
+* added **Touch Interactivity**, read more about it [here](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/handle_touches.md)
+
 ## 0.0.8
 * added backgroundColor to axis based charts (LineChart, BarChart) to draw a solid background color behind the chart
 * added getDrawingHorizontalGridLine, getDrawingVerticalGridLine on FlGridData to determine how(color, strokeWidth) the grid lines should be drawn with the given value on FlGridLine

README.md

@@ -36,7 +36,7 @@ Thank you all!
 
 ```kotlin
 dependencies:
-  fl_chart: ^0.0.8
+  fl_chart: ^0.1.1
 ```
 
 

example/lib/bar_chart/samples/bar_chart_sample1.dart

@@ -1,12 +1,87 @@
+import 'dart:async';
+
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
 
-class BarChartSample1 extends StatelessWidget {
+class BarChartSample1 extends StatefulWidget {
+
+  @override
+  State<StatefulWidget> createState() => BarChartSample1State();
+
+}
+
+class BarChartSample1State extends State<BarChartSample1> {
 
   final Color barColor = Colors.white;
-  final Color barBackgroundColor = Color(0xff72d8bf);
+  final Color barBackgroundColor = const Color(0xff72d8bf);
   final double width = 22;
 
+  List<BarChartGroupData> rawBarGroups;
+  List<BarChartGroupData> showingBarGroups;
+
+  StreamController<BarTouchResponse> barTouchedResultStreamController;
+
+  int touchedGroupIndex;
+
+  @override
+  void initState() {
+    super.initState();
+    final barGroup1 = makeGroupData(0, 5);
+    final barGroup2 = makeGroupData(1, 6.5);
+    final barGroup3 = makeGroupData(2, 5);
+    final barGroup4 = makeGroupData(3, 7.5);
+    final barGroup5 = makeGroupData(4, 9);
+    final barGroup6 = makeGroupData(5, 11.5);
+    final barGroup7 = makeGroupData(6, 6.5);
+
+    final items = [
+      barGroup1,
+      barGroup2,
+      barGroup3,
+      barGroup4,
+      barGroup5,
+      barGroup6,
+      barGroup7,
+    ];
+
+    rawBarGroups = items;
+
+    showingBarGroups = rawBarGroups;
+
+    barTouchedResultStreamController = StreamController();
+    barTouchedResultStreamController.stream.distinct().listen((BarTouchResponse response) {
+      if (response == null) {
+        return;
+      }
+
+      if (response.spot == null) {
+        setState(() {
+          touchedGroupIndex = -1;
+          showingBarGroups = List.of(rawBarGroups);
+        });
+        return;
+      }
+
+      touchedGroupIndex = showingBarGroups.indexOf(response.spot.touchedBarGroup);
+
+      setState(() {
+        if (response.touchInput is FlLongPressEnd) {
+          touchedGroupIndex = -1;
+          showingBarGroups = List.of(rawBarGroups);
+        } else {
+          showingBarGroups = List.of(rawBarGroups);
+          if (touchedGroupIndex != -1) {
+            showingBarGroups[touchedGroupIndex] = showingBarGroups[touchedGroupIndex].copyWith(
+              barRods: showingBarGroups[touchedGroupIndex].barRods.map((rod) {
+                return rod.copyWith(color: Colors.yellow, y: rod.y + 1);
+              }).toList(),
+            );
+          }
+        }
+      });
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return AspectRatio(
@@ -42,6 +117,27 @@ class BarChartSample1 extends StatelessWidget {
                   padding: const EdgeInsets.symmetric(horizontal: 8.0),
                   child: FlChart(
                     chart: BarChart(BarChartData(
+                      barTouchData: BarTouchData(
+                        touchTooltipData: TouchTooltipData(
+                          tooltipBgColor: Colors.blueGrey,
+                          getTooltipItems: (touchedSpots) {
+                            return touchedSpots.map((touchedSpot) {
+                              String weekDay;
+                              switch (touchedSpot.spot.x.toInt()) {
+                                case 0: weekDay = 'Monday'; break;
+                                case 1: weekDay = 'Tuesday'; break;
+                                case 2: weekDay = 'Wednesday'; break;
+                                case 3: weekDay = 'Thursday'; break;
+                                case 4: weekDay = 'Friday'; break;
+                                case 5: weekDay = 'Saturday'; break;
+                                case 6: weekDay = 'Sunday'; break;
+                              }
+                              return TooltipItem(weekDay + '\n' + touchedSpot.spot.y.toString(), TextStyle(color: Colors.yellow));
+                            }).toList();
+                          }
+                        ),
+                        touchResponseSink: barTouchedResultStreamController.sink,
+                      ),
                       titlesData: FlTitlesData(
                         show: true,
                         showHorizontalTitles: true,
@@ -70,15 +166,7 @@ class BarChartSample1 extends StatelessWidget {
                       borderData: FlBorderData(
                         show: false,
                       ),
-                      barGroups: [
-                        makeGroupData(0, 5),
-                        makeGroupData(1, 6.5),
-                        makeGroupData(2, 5),
-                        makeGroupData(3, 7.5),
-                        makeGroupData(4, 9),
-                        makeGroupData(5, 11.5),
-                        makeGroupData(6, 6.5),
-                      ],
+                      barGroups: showingBarGroups,
                     )),
                   ),
                 ),
@@ -109,4 +197,9 @@ class BarChartSample1 extends StatelessWidget {
     ]);
   }
 
+  @override
+  void dispose() {
+    super.dispose();
+    barTouchedResultStreamController.close();
+  }
 }

example/lib/bar_chart/samples/bar_chart_sample2.dart

@@ -1,12 +1,94 @@
+import 'dart:async';
+
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
 
-class BarChartSample2 extends StatelessWidget {
+class BarChartSample2 extends StatefulWidget {
+
+  @override
+  State<StatefulWidget> createState() => BarChartSample2State();
+
+}
+
+class BarChartSample2State extends State<BarChartSample2> {
 
   final Color leftBarColor = Color(0xff53fdd7);
   final Color rightBarColor = Color(0xffff5182);
   final double width = 7;
 
+  List<BarChartGroupData> rawBarGroups;
+  List<BarChartGroupData> showingBarGroups;
+
+  StreamController<BarTouchResponse> barTouchedResultStreamController;
+
+  int touchedGroupIndex;
+
+  @override
+  void initState() {
+    super.initState();
+    final barGroup1 = makeGroupData(0, 5, 12);
+    final barGroup2 = makeGroupData(1, 16, 12);
+    final barGroup3 = makeGroupData(2, 18, 5);
+    final barGroup4 = makeGroupData(3, 20, 16);
+    final barGroup5 = makeGroupData(4, 17, 6);
+    final barGroup6 = makeGroupData(5, 19, 1.5);
+    final barGroup7 = makeGroupData(6, 10, 1.5);
+
+    final items = [
+      barGroup1,
+      barGroup2,
+      barGroup3,
+      barGroup4,
+      barGroup5,
+      barGroup6,
+      barGroup7,
+    ];
+
+    rawBarGroups = items;
+
+    showingBarGroups = rawBarGroups;
+
+    barTouchedResultStreamController = StreamController();
+    barTouchedResultStreamController.stream.distinct().listen((BarTouchResponse response) {
+      if (response == null) {
+        return;
+      }
+
+      if (response.spot == null) {
+        setState(() {
+          touchedGroupIndex = -1;
+          showingBarGroups = List.of(rawBarGroups);
+        });
+        return;
+      }
+
+      touchedGroupIndex = showingBarGroups.indexOf(response.spot.touchedBarGroup);
+
+      setState(() {
+        if (response.touchInput is FlLongPressEnd) {
+          touchedGroupIndex = -1;
+          showingBarGroups = List.of(rawBarGroups);
+        } else {
+          showingBarGroups = List.of(rawBarGroups);
+          if (touchedGroupIndex != -1) {
+            double sum = 0;
+            for (BarChartRodData rod in showingBarGroups[touchedGroupIndex].barRods) {
+              sum += rod.y;
+            }
+            double avg = sum / showingBarGroups[touchedGroupIndex].barRods.length;
+
+            showingBarGroups[touchedGroupIndex] = showingBarGroups[touchedGroupIndex].copyWith(
+              barRods: showingBarGroups[touchedGroupIndex].barRods.map((rod) {
+                return rod.copyWith(y: avg);
+              }).toList(),
+            );
+          }
+        }
+      });
+    });
+
+  }
+
   @override
   Widget build(BuildContext context) {
     return AspectRatio(
@@ -52,6 +134,18 @@ class BarChartSample2 extends StatelessWidget {
                   padding: const EdgeInsets.symmetric(horizontal: 8.0),
                   child: FlChart(
                     chart: BarChart(BarChartData(
+                      maxY: 20,
+                      barTouchData: BarTouchData(
+                        touchTooltipData: TouchTooltipData(
+                          tooltipBgColor: Colors.grey,
+                          getTooltipItems: (spots) {
+                            return spots.map((TouchedSpot spot) {
+                              return null;
+                            }).toList();
+                          }
+                        ),
+                        touchResponseSink: barTouchedResultStreamController.sink,
+                      ),
                       titlesData: FlTitlesData(
                         show: true,
                         showHorizontalTitles: true,
@@ -100,15 +194,7 @@ class BarChartSample2 extends StatelessWidget {
                       borderData: FlBorderData(
                         show: false,
                       ),
-                      barGroups: [
-                        makeGroupData(0, 5, 12),
-                        makeGroupData(1, 16, 12),
-                        makeGroupData(2, 18, 5),
-                        makeGroupData(3, 20, 16),
-                        makeGroupData(4, 17, 6),
-                        makeGroupData(5, 19, 1.5),
-                        makeGroupData(6, 10, 1.5),
-                      ],
+                      barGroups: showingBarGroups,
                     )),
                   ),
                 ),
@@ -187,5 +273,4 @@ class BarChartSample2 extends StatelessWidget {
       ],
     );
   }
-
 }