Problems to add a callback on data point tap #42
Description
I'm trying to add the execution of an external dart callback to the chart when I tap on a specific point in this scatter chart. The viewer doesn’t have an argument like onEvent, and I don’t see anything in the controller apart from the update method. If I click on a point, I can see that it’s still counted as selected by Apache ECharts, with the color and dot size changing very slightly. I also need to set an active point from outside the chart and not only if i tap on the dots! The code is this:
Map<String, dynamic> _generateChartOptions(BuildContext context) {
final theme = Theme.of(context);
const yStep = 5.0;
const xStep = 0.5;
final xValues =
widget.points?.map((e) => e.axisX.toPrecision(1)).toList() ?? [];
final yValues =
widget.points?.map((e) => e.axisY.toPrecision(1)).toList() ?? [];
final greaterX =
xValues.isNotEmpty ? xValues.reduce((a, b) => a > b ? a : b) : 0.0;
final greaterY =
yValues.isNotEmpty ? yValues.reduce((a, b) => a > b ? a : b) : 0.0;
const minX = 0.0;
const minY = 0.0;
final maxX = max(lastWidth, greaterX);
final maxY =
(yValues.isEmpty ? yStep : ((greaterY / yStep).ceil()) * yStep);
final seriesData = _generateSeriesData(context, theme);
final xAxis = {
'type': 'value',
'min': minX,
'max': maxX,
'interval': xStep,
'inverse': widget.reverse,
'axisLabel': {
'color': '#000',
'formatter': '{value} m',
},
'splitLine': {
'show': true,
'lineStyle': {
'type': [5, 10],
'width': 0.5,
},
},
'axisTick': {'show': false},
};
final yAxis = {
'type': 'value',
'min': minY,
'max': maxY,
'interval': yStep,
'inverse': widget.reverse,
'axisLabel': {
'color': '#000',
'formatter': '{value} m',
},
'splitLine': {
'show': true,
'lineStyle': {
'type': [5, 5],
'width': 0.5,
},
},
};
return {
'backgroundColor': 'transparent',
'grid': {
'left': '3%',
'right': '3%',
'bottom': '3%',
'top': '3%',
'containLabel': true,
},
'xAxis': xAxis,
'yAxis': yAxis,
'series': [
{
'type': 'scatter',
'data': seriesData,
'cursor': 'pointer',
},
],
};
}
List<Map<String, dynamic>> _generateSeriesData(
BuildContext context,
ThemeData theme,
) {
final isTabletDevice = isTablet(context);
final strokeWidth = isTabletDevice ? 3.5 : 2.0;
return widget.points
?.map((point) {
final colorStr = point.category?.color;
final color = hexToColor(
colorStr ?? theme.colorScheme.secondary.hex,
);
final isActive = widget.activePoint == point;
final unactiveColor =
Color.lerp(color, Colors.white, 0.5) ?? Colors.transparent;
final strokeColor = theme.primaryColor;
final radius = _findRadius(
isTabletDevice,
heightCm: point.height,
widthCm: point.width,
);
final symbolSize = radius * 2;
return {
'value': [point.axisX, point.axisY],
'itemStyle': {
'color': '#${isActive ? color.hex : unactiveColor.hex}',
'borderColor': strokeColor.hex,
'borderWidth': isActive ? strokeWidth : 1,
},
'symbolSize': symbolSize,
'pèointId': point.image,
};
})
.toList(growable: false) ??
[];
}
@override
Widget build(BuildContext context) {
final currentOptions = _generateChartOptions(context);
return GraphifyView(
controller: controller,
initialOptions: currentOptions,
onConsoleMessage: (msg) {
dev.log('[OverviewChart] $msg');
},
);
}