display axis values

This commit is contained in:
TAJAOUART Mounir 2023-02-10 09:18:52 +01:00
parent ba4723433b
commit 2c21d3f994
2 changed files with 104 additions and 68 deletions

View File

@ -37,7 +37,6 @@ class _MyHomePageState extends State<MyHomePage> {
final stream = getDataStream().asBroadcastStream();
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text(widget.title),
),

View File

@ -8,27 +8,33 @@ import 'point.dart';
class RealTimeGraph extends StatefulWidget {
const RealTimeGraph({
Key? key,
this.updateDelay = const Duration(milliseconds: 50),
this.speed = 1,
this.graphStroke = 0.5,
this.graphColor = Colors.red,
this.axisColor = Colors.green,
this.axisWidth = 1.0,
required this.stream,
this.pointsSpacing = 3.0,
this.displayMode = ChartDisplay.line,
this.displayYAxisValues = true,
this.axisColor = Colors.black87,
this.graphColor = Colors.black45,
this.pointsSpacing = 3.0,
this.graphStroke = 1,
this.axisStroke = 1.0,
this.axisTextBuilder,
required this.stream,
this.minValue = 0,
this.speed = 1,
Key? key,
}) : super(key: key);
final Stream<double> stream;
final Color graphColor;
final double axisWidth;
final Color axisColor;
final Duration updateDelay;
final int speed;
final double graphStroke;
final double pointsSpacing;
final Widget Function(double)? axisTextBuilder;
final ChartDisplay displayMode;
final bool displayYAxisValues;
final Stream<double> stream;
final Duration updateDelay;
final double pointsSpacing;
final double axisStroke;
final double graphStroke;
final Color graphColor;
final Color axisColor;
final double minValue;
final int speed;
@override
RealTimeGraphState createState() => RealTimeGraphState();
@ -67,35 +73,57 @@ class RealTimeGraphState extends State<RealTimeGraph>
});
}
double get maxValue {
return _data.isEmpty ? 0 : _data.map((point) => point.y).reduce(max);
}
double get minValue => widget.minValue;
double get medianValue => (maxValue + minValue) / 2;
@override
Widget build(BuildContext context) {
return LayoutBuilder(
return Row(
mainAxisSize: MainAxisSize.max,
children: [
if (widget.displayYAxisValues)
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
widget.axisTextBuilder?.call(maxValue) ?? textBuilder(maxValue),
widget.axisTextBuilder?.call(medianValue) ??
textBuilder(medianValue),
widget.axisTextBuilder?.call(minValue) ?? textBuilder(minValue),
],
),
Container(
color: widget.axisColor,
width: widget.axisStroke,
height: double.maxFinite,
),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: LayoutBuilder(
builder: (context, constraints) {
if (!constraints.maxWidth.isFinite || !constraints.maxHeight.isFinite) {
if (!constraints.maxWidth.isFinite ||
!constraints.maxHeight.isFinite) {
return const SizedBox.shrink();
}
return SizedBox(
key: Key('${constraints.maxWidth}${constraints.maxHeight}'),
key: Key(
'${constraints.maxWidth}${constraints.maxHeight}'),
height: constraints.maxHeight,
width: constraints.maxWidth,
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Container(
color: widget.axisColor,
width: widget.axisWidth,
height: constraints.maxHeight,
),
Column(
mainAxisSize: MainAxisSize.max,
children: [
ClipRRect(
child: ClipRRect(
child: RepaintBoundary(
child: CustomPaint(
size: Size(
constraints.maxWidth - widget.axisWidth,
constraints.maxHeight - widget.axisWidth,
constraints.maxWidth,
constraints.maxHeight,
),
painter: widget.displayMode == ChartDisplay.points
? _PointGraphPainter(
@ -112,17 +140,26 @@ class RealTimeGraphState extends State<RealTimeGraph>
),
),
),
);
},
),
),
Container(
color: widget.axisColor,
height: widget.axisWidth,
width: constraints.maxWidth - widget.axisWidth,
height: widget.axisStroke,
width: double.maxFinite,
)
],
),
],
),
],
);
},
}
Widget textBuilder(double value) {
return Text(
value.toString(),
style: const TextStyle(color: Colors.black),
);
}