chart data sent when tapped

Author: handgull

.flutter-plugins-dependencies

@@ -27,3 +27,7 @@ migrate_working_dir/
 **/doc/api/
 .dart_tool/
 build/
+.flutter-plugins
+.flutter-plugins-dependencies
+.pub-cache/
+.pub/

.gitignore

@@ -0,0 +1,96 @@
+import 'dart:developer';
+
+import 'package:flutter/material.dart';
+import 'package:graphify/graphify.dart';
+
+class ChartClick extends StatefulWidget {
+  const ChartClick({super.key});
+
+  @override
+  State<ChartClick> createState() => _ChartClickState();
+}
+
+class _ChartClickState extends State<ChartClick> {
+  late final GraphifyController _controller;
+  String _status = 'Ready to test clicks';
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = GraphifyController();
+    _controller.chartClickedEvent.listen((data) {
+      debugPrint('listener received: $data');
+      setState(() {
+        _status = 'Click received: ${data['name'] ?? 'Unknown'}';
+      });
+
+      log('TEST: Chart click received: $data');
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Expanded(
+          child: Padding(
+            padding: const EdgeInsets.all(16),
+            child: Text(
+              _status,
+              style: const TextStyle(fontWeight: FontWeight.bold),
+              textAlign: TextAlign.center,
+            ),
+          ),
+        ),
+        Container(
+          height: 400,
+          margin: const EdgeInsets.all(8),
+          decoration: BoxDecoration(
+            border: Border.all(color: Colors.grey),
+            borderRadius: BorderRadius.circular(8),
+          ),
+          child: GraphifyView(
+            controller: _controller,
+            onConsoleMessage: (msg) {
+              debugPrint('WebView console: ${(msg as dynamic).message}');
+            },
+            initialOptions: const {
+              "tooltip": {
+                "trigger": "axis",
+                "axisPointer": {"type": "shadow"}
+              },
+              "legend": {
+                "data": ["Sales", "Marketing"]
+              },
+              "xAxis": {
+                "type": "category",
+                "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
+              },
+              "yAxis": {"type": "value"},
+              "series": [
+                {
+                  "name": "Sales",
+                  "type": "bar",
+                  "data": [120, 200, 150, 80, 70, 110, 130],
+                  "itemStyle": {"color": "#5470c6"}
+                },
+                {
+                  "name": "Marketing",
+                  "type": "bar",
+                  "data": [60, 100, 75, 40, 35, 55, 65],
+                  "itemStyle": {"color": "#91cc75"}
+                }
+              ]
+            },
+          ),
+        ),
+      ],
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+}

example/lib/charts/chart_click.dart

@@ -5,6 +5,7 @@ import 'package:graphify_example/charts/basic_area_chart.dart';
 import 'package:graphify_example/charts/basic_bar_chart.dart';
 import 'package:graphify_example/charts/basic_line_chart.dart';
 import 'package:graphify_example/charts/candle_stick_brush.dart';
+import 'package:graphify_example/charts/chart_click.dart';
 import 'package:graphify_example/charts/customized_radar_chart.dart';
 import 'package:graphify_example/charts/graph_webkit_dep.dart';
 import 'package:graphify_example/charts/heatmap_discrete_mapping_of_color.dart';
@@ -18,7 +19,6 @@ import 'package:graphify_example/charts/shang_hai_index.dart';
 import 'package:graphify_example/charts/stacked_area_chart.dart';
 import 'package:graphify_example/charts/tangential_polar_bar_chart.dart';
 import 'package:graphify_example/charts/world_population.dart';
-import 'package:graphify_example/test_chart_click.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 
 void main() {
@@ -29,7 +29,7 @@ class MyApp extends StatelessWidget {
   const MyApp({super.key});
 
   static const charts = {
-    "Chart Click Test": TestChartClick(),
+    "Chart Click Test": ChartClick(),
     "Basic Line Chart": BasicLineChart(),
     'Basic Area Chart': BasicAreaChart(),
     'Stacked Area Chart': StackedAreaChart(),

example/lib/main.dart

@@ -1,15 +1,17 @@
 import 'package:graphify/src/controller/interface.dart' as controller_interface;
 
 class GraphifyController extends controller_interface.GraphifyController {
-
   @override
   void update(Map<String, dynamic>? options) {
     throw UnimplementedError("update() is not implemented");
   }
 
+  @override
+  Stream<Map<String, dynamic>> get chartClickedEvent =>
+      throw UnimplementedError("chartClickedEvent is not implemented");
+
   @override
   void dispose() {
     throw UnimplementedError("dispose() is not implemented");
   }
-
-}
+}

example/lib/test_chart_click.dart

@@ -6,6 +6,8 @@ import 'package:graphify/src/controller/js_methods.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 
 class GraphifyController extends controller_interface.GraphifyController {
+  final StreamController<Map<String, dynamic>> _clicks =
+      StreamController<Map<String, dynamic>>.broadcast();
 
   late final WebViewController _connector;
 
@@ -22,7 +24,24 @@ class GraphifyController extends controller_interface.GraphifyController {
   }
 
   @override
-  void dispose() async => _eval(JsMethods.disposeChart, [_quotedUid]);
+  void dispose() async {
+    await _clicks.close();
+    try {
+      await _eval(JsMethods.disposeChart, [_quotedUid]);
+    } catch (_) {}
+  }
+
+  @override
+  Stream<Map<String, dynamic>> get chartClickedEvent => _clicks.stream;
+
+  void onChartClick(String message) {
+    try {
+      final dynamic decoded = jsonDecode(message);
+      if (decoded is Map<String, dynamic>) {
+        _clicks.sink.add(decoded);
+      }
+    } catch (_) {}
+  }
 
   Future<void> _eval(String method, List<String> args) async {
     return _connector.runJavaScript(_buildJsMethod(method, args));
@@ -31,5 +50,4 @@ class GraphifyController extends controller_interface.GraphifyController {
   String _buildJsMethod(String method, List<String> args) {
     return 'window.$method(${args.map((String arg) => arg).join(', ')})';
   }
-
 }

lib/src/controller/implements/facade.dart

@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'dart:convert';
 import 'dart:js_interop';
 import 'dart:js_interop_unsafe';
@@ -7,6 +8,45 @@ import 'package:graphify/src/controller/js_methods.dart';
 import 'package:web/web.dart';
 
 class GraphifyController extends controller_interface.GraphifyController {
+  GraphifyController() {
+    _messageListener = ((Event event) {
+      try {
+        final msgEvent = event as MessageEvent;
+        final dataAny = msgEvent.data;
+        if (dataAny is! String) {
+          return;
+        }
+        final decoded = jsonDecode(dataAny as String);
+        if (decoded is! Map<String, dynamic>) {
+          return;
+        }
+        if (decoded['source'] != 'graphify') {
+          return;
+        }
+        if (decoded['chartId'] != uid) {
+          return;
+        }
+
+        final payloadString = decoded['payload'];
+        if (payloadString is! String) {
+          return;
+        }
+        final payloadDecoded = jsonDecode(payloadString);
+        if (payloadDecoded is Map<String, dynamic>) {
+          _clicks.add(payloadDecoded);
+        }
+      } catch (_) {}
+    }).toJS as EventListener;
+    window.addEventListener('message', _messageListener);
+  }
+
+  final StreamController<Map<String, dynamic>> _clicks =
+      StreamController<Map<String, dynamic>>.broadcast();
+
+  late final EventListener _messageListener;
+
+  @override
+  Stream<Map<String, dynamic>> get chartClickedEvent => _clicks.stream;
 
   @override
   void update(Map<String, dynamic>? options) {
@@ -19,6 +59,12 @@ class GraphifyController extends controller_interface.GraphifyController {
 
   @override
   void dispose() {
-    window.callMethod(JsMethods.disposeChart.toJS, uid.toJS);
+    try {
+      window.removeEventListener('message', _messageListener);
+    } catch (_) {}
+    try {
+      window.callMethod(JsMethods.disposeChart.toJS, uid.toJS);
+    } catch (_) {}
+    _clicks.close();
   }
 }