customize axis properties and graph color
This commit is contained in:
parent
993603a02b
commit
ba4723433b
@ -12,12 +12,18 @@ class RealTimeGraph extends StatefulWidget {
|
||||
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,
|
||||
}) : 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;
|
||||
@ -63,12 +69,9 @@ class RealTimeGraphState extends State<RealTimeGraph>
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ClipRRect(
|
||||
child: RepaintBoundary(
|
||||
child: LayoutBuilder(
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
if (!constraints.maxWidth.isFinite ||
|
||||
!constraints.maxHeight.isFinite) {
|
||||
if (!constraints.maxWidth.isFinite || !constraints.maxHeight.isFinite) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
@ -80,33 +83,39 @@ class RealTimeGraphState extends State<RealTimeGraph>
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
children: [
|
||||
Container(
|
||||
color: Colors.grey,
|
||||
width: 1,
|
||||
color: widget.axisColor,
|
||||
width: widget.axisWidth,
|
||||
height: constraints.maxHeight,
|
||||
),
|
||||
Column(
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
children: [
|
||||
CustomPaint(
|
||||
ClipRRect(
|
||||
child: RepaintBoundary(
|
||||
child: CustomPaint(
|
||||
size: Size(
|
||||
constraints.maxWidth - 1,
|
||||
constraints.maxHeight - 1,
|
||||
constraints.maxWidth - widget.axisWidth,
|
||||
constraints.maxHeight - widget.axisWidth,
|
||||
),
|
||||
painter: widget.displayMode == ChartDisplay.points
|
||||
? _PointGraphPainter(
|
||||
data: _data,
|
||||
pointsSpacing: widget.pointsSpacing,
|
||||
graphStroke: widget.graphStroke,
|
||||
color: widget.graphColor,
|
||||
)
|
||||
: _LineGraphPainter(
|
||||
data: _data,
|
||||
graphStroke: widget.graphStroke,
|
||||
color: widget.graphColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Container(
|
||||
color: Colors.grey,
|
||||
height: 1,
|
||||
width: constraints.maxWidth - 1,
|
||||
color: widget.axisColor,
|
||||
height: widget.axisWidth,
|
||||
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.pointsSpacing,
|
||||
required this.graphStroke,
|
||||
required this.color,
|
||||
});
|
||||
|
||||
final List<Point<double>> data;
|
||||
final double pointsSpacing;
|
||||
final double graphStroke;
|
||||
final Color color;
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
final paint = Paint()
|
||||
..style = PaintingStyle.fill
|
||||
..strokeWidth = graphStroke
|
||||
..color = Colors.white;
|
||||
..color = color;
|
||||
|
||||
// Find the maximum y value in the data
|
||||
double maxY = 0;
|
||||
@ -206,17 +215,19 @@ class _LineGraphPainter extends CustomPainter {
|
||||
_LineGraphPainter({
|
||||
required this.data,
|
||||
required this.graphStroke,
|
||||
required this.color,
|
||||
});
|
||||
|
||||
final List<Point<double>> data;
|
||||
final double graphStroke;
|
||||
final Color color;
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
final paint = Paint()
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = graphStroke
|
||||
..color = Colors.white;
|
||||
..color = color;
|
||||
Path path = Path();
|
||||
// Find the maximum y value in the data
|
||||
double maxY = 0;
|
||||
|
Loading…
x
Reference in New Issue
Block a user