bachelor/real_time_chart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

customize axis properties and graph color

Browse Source
This commit is contained in:
TAJAOUART Mounir 2023-02-09 22:19:43 +01:00
parent 993603a02b
commit ba4723433b
1 changed files with 47 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
lib/src/live_chart.dart
View File

@ -12,12 +12,18 @@ class RealTimeGraph extends StatefulWidget {
this.updateDelay = const Duration(milliseconds: 50), this.updateDelay = const Duration(milliseconds: 50),
this.speed = 1, this.speed = 1,
this.graphStroke = 0.5, this.graphStroke = 0.5,
this.graphColor = Colors.red,
this.axisColor = Colors.green,
this.axisWidth = 1.0,
required this.stream, required this.stream,
this.pointsSpacing = 3.0, this.pointsSpacing = 3.0,
this.displayMode = ChartDisplay.line, this.displayMode = ChartDisplay.line,
}) : super(key: key); }) : super(key: key);
final Stream<double> stream; final Stream<double> stream;
final Color graphColor;
final double axisWidth;
final Color axisColor;
final Duration updateDelay; final Duration updateDelay;
final int speed; final int speed;
final double graphStroke; final double graphStroke;
@ -63,12 +69,9 @@ class RealTimeGraphState extends State<RealTimeGraph>
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ClipRRect( return LayoutBuilder(
child: RepaintBoundary(
child: LayoutBuilder(
builder: (context, constraints) { builder: (context, constraints) {
if (!constraints.maxWidth.isFinite || if (!constraints.maxWidth.isFinite || !constraints.maxHeight.isFinite) {
!constraints.maxHeight.isFinite) {
return const SizedBox.shrink(); return const SizedBox.shrink();
} }
@ -80,33 +83,39 @@ class RealTimeGraphState extends State<RealTimeGraph>
mainAxisSize: MainAxisSize.max, mainAxisSize: MainAxisSize.max,
children: [ children: [
Container( Container(
color: Colors.grey, color: widget.axisColor,
width: 1, width: widget.axisWidth,
height: constraints.maxHeight, height: constraints.maxHeight,
), ),
Column( Column(
mainAxisSize: MainAxisSize.max, mainAxisSize: MainAxisSize.max,
children: [ children: [
CustomPaint( ClipRRect(
child: RepaintBoundary(
child: CustomPaint(
size: Size( size: Size(
constraints.maxWidth - 1, constraints.maxWidth - widget.axisWidth,
constraints.maxHeight - 1, constraints.maxHeight - widget.axisWidth,
), ),
painter: widget.displayMode == ChartDisplay.points painter: widget.displayMode == ChartDisplay.points
? _PointGraphPainter( ? _PointGraphPainter(
data: _data, data: _data,
pointsSpacing: widget.pointsSpacing, pointsSpacing: widget.pointsSpacing,
graphStroke: widget.graphStroke, graphStroke: widget.graphStroke,
color: widget.graphColor,
) )
: _LineGraphPainter( : _LineGraphPainter(
data: _data, data: _data,
graphStroke: widget.graphStroke, graphStroke: widget.graphStroke,
color: widget.graphColor,
),
),
), ),
), ),
Container( Container(
color: Colors.grey, color: widget.axisColor,
height: 1, height: widget.axisWidth,
width: constraints.maxWidth - 1, width: constraints.maxWidth - widget.axisWidth,
) )
], ],
), ),
@ -114,8 +123,6 @@ class RealTimeGraphState extends State<RealTimeGraph>
), ),
); );
}, },
),
),
); );
} }
@ -138,18 +145,20 @@ class _PointGraphPainter extends CustomPainter {
required this.data, required this.data,
required this.pointsSpacing, required this.pointsSpacing,
required this.graphStroke, required this.graphStroke,
required this.color,
}); });
final List<Point<double>> data; final List<Point<double>> data;
final double pointsSpacing; final double pointsSpacing;
final double graphStroke; final double graphStroke;
final Color color;
@override @override
void paint(Canvas canvas, Size size) { void paint(Canvas canvas, Size size) {
final paint = Paint() final paint = Paint()
..style = PaintingStyle.fill ..style = PaintingStyle.fill
..strokeWidth = graphStroke ..strokeWidth = graphStroke
..color = Colors.white; ..color = color;
// Find the maximum y value in the data // Find the maximum y value in the data
double maxY = 0; double maxY = 0;
@ -206,17 +215,19 @@ class _LineGraphPainter extends CustomPainter {
_LineGraphPainter({ _LineGraphPainter({
required this.data, required this.data,
required this.graphStroke, required this.graphStroke,
required this.color,
}); });
final List<Point<double>> data; final List<Point<double>> data;
final double graphStroke; final double graphStroke;
final Color color;
@override @override
void paint(Canvas canvas, Size size) { void paint(Canvas canvas, Size size) {
final paint = Paint() final paint = Paint()
..style = PaintingStyle.stroke ..style = PaintingStyle.stroke
..strokeWidth = graphStroke ..strokeWidth = graphStroke
..color = Colors.white; ..color = color;
Path path = Path(); Path path = Path();
// Find the maximum y value in the data // Find the maximum y value in the data
double maxY = 0; double maxY = 0;