Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add optional parameter showPoint, pointRadius #11

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

add optional parameter showPoint, pointRadius #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@ It is a library that provides different types of charts to plot data points. Cur
* **chartRadiusFactor** - defines the factor by which the chart radius increases with respect
to width or height (whatever is minimum). If not provided, defaults to **0.8 (80%)**.

* **showPoint** - which will be shown dot shape of values edges, defaults to **false**.

* **pointRadius** - defines the radius of point, defaults to **Depends on widget size**.

### Screenshots

<img src="https://drive.google.com/uc?export=view&id=1xBM5mTMdU9d49Qo2vrxsq4UmBk2cEaps" alt="Radar Chart Red" width="200" height="400"/>
Expand Down
65 changes: 32 additions & 33 deletions lib/src/radar_chart/radar_chart.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ class RadarChart extends StatefulWidget {
final Duration animationDuration;
final Curve curve;
final double chartRadiusFactor;
final bool showPoint;
final double pointRadius;

/// Creates a chart which plots the values in the form of a spider web or radar.
///
Expand All @@ -85,7 +87,9 @@ class RadarChart extends StatefulWidget {
this.animate = true,
this.animationDuration = const Duration(milliseconds: 1500),
this.curve = Curves.easeIn,
this.chartRadiusFactor = 0.8});
this.chartRadiusFactor = 0.8,
this.showPoint = false,
this.pointRadius = 0.0});
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

default value of pointRadius should not be 0.0, keep something smaller value

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you mean minus(-) value? @intkhabahmed

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In 'radar_chart_painter.dart'
0.0 value is depend on screen size

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be greater than 0 by default


@override
_RadarChartState createState() => _RadarChartState();
Expand Down Expand Up @@ -113,16 +117,11 @@ class _RadarChartState extends State<RadarChart> with TickerProviderStateMixin {
throw ArgumentError("values and labels should have same size");
}
_dataAnimationController = AnimationController(
vsync: this,
duration: widget.animate
? widget.animationDuration
: Duration(milliseconds: 1))
vsync: this, duration: widget.animate ? widget.animationDuration : Duration(milliseconds: 1))
..forward();
_outlineAnimationController = AnimationController(
vsync: this, duration: Duration(milliseconds: widget.animate ? 500 : 1))
..forward();
curve =
CurvedAnimation(parent: _dataAnimationController, curve: widget.curve);
_outlineAnimationController =
AnimationController(vsync: this, duration: Duration(milliseconds: widget.animate ? 500 : 1))..forward();
curve = CurvedAnimation(parent: _dataAnimationController, curve: widget.curve);
}

@override
Expand All @@ -141,17 +140,15 @@ class _RadarChartState extends State<RadarChart> with TickerProviderStateMixin {
throw ArgumentError("All values of graph should be less than maxValue");
} else if (widget.values.length < 3) {
throw ArgumentError("Minimum 3 values are required for Radar chart");
} else if (widget.labels != null &&
widget.values.length != widget.labels.length) {
} else if (widget.labels != null && widget.values.length != widget.labels.length) {
throw ArgumentError("values and labels should have same size");
} else if (widget.animate) {
if (oldWidget.animationDuration != widget.animationDuration) {
_dataAnimationController.duration = widget.animationDuration;
_outlineAnimationController.duration = Duration(milliseconds: 500);
}
if (oldWidget.curve != widget.curve) {
curve = CurvedAnimation(
parent: _dataAnimationController, curve: widget.curve);
curve = CurvedAnimation(parent: _dataAnimationController, curve: widget.curve);
}
setState(() {
_dataAnimationController
Expand All @@ -172,32 +169,34 @@ class _RadarChartState extends State<RadarChart> with TickerProviderStateMixin {
dataAnimationPercent = _dataAnimation.value;
});
});
_outlineAnimation =
Tween(begin: 0.0, end: 1.0).animate(_outlineAnimationController)
..addListener(() {
setState(() {
outlineAnimationPercent = _outlineAnimation.value;
});
});
_outlineAnimation = Tween(begin: 0.0, end: 1.0).animate(_outlineAnimationController)
..addListener(() {
setState(() {
outlineAnimationPercent = _outlineAnimation.value;
});
});
return LimitedBox(
maxWidth: widget.maxWidth,
maxHeight: widget.maxHeight,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: CustomPaint(
painter: RadarChartPainter(
widget.values,
widget.labels,
widget.maxValue,
widget.fillColor,
widget.strokeColor,
widget.labelColor,
widget.textScaleFactor,
widget.labelWidth,
widget.maxLinesForLabels,
widget.animate ? dataAnimationPercent : 1.0,
widget.animate ? outlineAnimationPercent : 1.0,
widget.chartRadiusFactor),
widget.values,
widget.labels,
widget.maxValue,
widget.fillColor,
widget.strokeColor,
widget.labelColor,
widget.textScaleFactor,
widget.labelWidth,
widget.maxLinesForLabels,
widget.animate ? dataAnimationPercent : 1.0,
widget.animate ? outlineAnimationPercent : 1.0,
widget.chartRadiusFactor,
widget.showPoint,
widget.pointRadius,
),
size: widget.size,
),
),
Expand Down
83 changes: 53 additions & 30 deletions lib/src/radar_chart/utils/painters/radar_chart_painter.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,54 +23,77 @@ class RadarChartPainter extends CustomPainter {
final double dataAnimationPercent;
final double outlineAnimationPercent;
final double chartRadiusFactor;
final bool showPoint;
final double pointRadius;

RadarChartPainter(
this.values,
this.labels,
this.maxValue,
this.fillColor,
this.strokeColor,
this.labelColor,
this.textScaleFactor,
this.labelWidth,
this.maxLinesForLabels,
this.dataAnimationPercent,
this.outlineAnimationPercent,
this.chartRadiusFactor);
this.values,
this.labels,
this.maxValue,
this.fillColor,
this.strokeColor,
this.labelColor,
this.textScaleFactor,
this.labelWidth,
this.maxLinesForLabels,
this.dataAnimationPercent,
this.outlineAnimationPercent,
this.chartRadiusFactor,
this.showPoint,
this.pointRadius,
);

@override
void paint(Canvas canvas, Size size) {
Offset center = Offset(size.width / 2.0, size.height / 2.0);
double angle = (2 * pi) / values.length;
var valuePoints = List<Offset>();

for (var i = 0; i < values.length; i++) {
var radius = (values[i] / maxValue) *
(min(center.dx, center.dy) * chartRadiusFactor);
var radius = (values[i] / maxValue) * (min(center.dx, center.dy) * chartRadiusFactor);
var x = dataAnimationPercent * radius * cos(angle * i - pi / 2);
var y = dataAnimationPercent * radius * sin(angle * i - pi / 2);

valuePoints.add(Offset(x, y) + center);
}

if (showPoint) {
Paint brush = Paint()
..color = fillColor
..strokeCap = StrokeCap.round
..style = PaintingStyle.fill
..strokeWidth = 30;
valuePoints.forEach(
(element) {
pointRadius == 0.0
? canvas.drawCircle(element, size.width > size.height ? size.height / 100 : size.width / 100, brush)
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check here plz @intkhabahmed

: canvas.drawCircle(element, pointRadius, brush);
},
);
}

var outerPoints = PaintUtils.drawChartOutline(
canvas,
center,
angle,
strokeColor,
maxValue,
values.length,
outlineAnimationPercent,
(min(center.dx, center.dy) * chartRadiusFactor));
canvas,
center,
angle,
strokeColor,
maxValue,
values.length,
outlineAnimationPercent,
(min(center.dx, center.dy) * chartRadiusFactor),
);

PaintUtils.drawGraphData(canvas, valuePoints, fillColor, strokeColor);
PaintUtils.drawLabels(
canvas,
center,
labels ?? values.map((v) => v.toString()).toList(),
outerPoints,
PaintUtils.getTextSize(size, textScaleFactor),
labelWidth ?? PaintUtils.getDefaultLabelWidth(size, center, angle),
maxLinesForLabels ?? PaintUtils.getDefaultMaxLinesForLabels(size),
labelColor);
canvas,
center,
labels ?? values.map((v) => v.toString()).toList(),
outerPoints,
PaintUtils.getTextSize(size, textScaleFactor),
labelWidth ?? PaintUtils.getDefaultLabelWidth(size, center, angle),
maxLinesForLabels ?? PaintUtils.getDefaultMaxLinesForLabels(size),
labelColor,
);
}

@override
Expand Down