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

Jump to bottom

💄 Improve draw style #22

Merged
merged 2 commits into from
Oct 13, 2024
Merged

💄 Improve draw style #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5214a5e
💄 Support more draw style
moxiaov587 Oct 13, 2024
ddb1762
🔖 Release 1.4.0
moxiaov587 Oct 13, 2024
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
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
## 1.4.0

- Support custom disabled opacity.
- Support align the first and last points of the chart with both ends when display mode.
- Support drawing grid lines as dotted lines. Now the y-axis can also draw grid lines.

## 1.3.0

- Fix the issue of being unable to respond to touch events when the coordinate point touch area overflows.
Expand Down
8 changes: 7 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ Fields in `SlidableLineChart`:
| onlyRenderEvenAxisLabel | `bool` | Whether the y-axis label renders only even items. | `true` |
| enableInitializationAnimation | `bool` | Whether the coordinate system triggers animation when initialized. | `true` |
| initializationAnimationDuration | `Duration` | Initialize the duration of the animation. | `const Duration(seconds: 1)` |
| fillWidth | `bool` | Align the first and last points of the chart with both ends. | `false` |
| enableFeedback | `bool` | Whether audible and/or haptic feedback should be provided during user interaction. | `true` |
| onDrawCheckOrClose | `OnDrawCheckOrClose?` | Called when the user slides coordinate, the return value determines the indicator type. | `null` |
| onChange | `CoordinatesOptionsChanged<Enum>` | Called when the user slides coordinate. | `null` |
Expand All @@ -76,6 +77,10 @@ Fields in `SlidableLineChartThemeData`:
| axisLineWidth | `double?` | Axis line width for the coordinate system. | `null` |
| gridLineColor | `Color?` | Grid line color for the coordinate system. | `null` |
| gridLineWidth | `double?` | Grid line width for the coordinate system. | `null` |
| drawGridLineType | `DrawGridLineType?` | The type of grid lines to draw. | `null` |
| drawGridLineStyle | `DrawGridLineStyle?` | The style of grid lines to draw. | `null` |
| dashedGridLineWidth | `double?` | The unit width of the dashed grid lines. | `null` |
| dashedGridLineGap | `double?` | The gap width of the dashed grid lines. | `null` |
| showTapArea | `bool?` | Whether to display the user's touch area. | `null` |
| lineWidth | `double?` | Line width on the all coordinates. | `null` |
| displayValueTextStyle | `TextStyle?` | Text style for display value on the coordinate system. | `null` |
Expand All @@ -86,4 +91,5 @@ Fields in `SlidableLineChartThemeData`:
| closeBackgroundColor | `Color?` | Background color for close indicator on the coordinate system. | `null` |
| checkColor | `Color?` | Color for check symbol on the coordinate system. | `null` |
| closeColor | `Color?` | Color for close symbol on the coordinate system. | `null` |
| smooth | `double?` | Smoothness of the line chart. | `null` |
| smooth | `double?` | Smoothness of the line chart. | `null` |
| disabledOpacity | `double?` | Opacity when line chart is can't change. | `null` |
24 changes: 12 additions & 12 deletions example/pubspec.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,18 +79,18 @@ packages:
dependency: transitive
description:
name: leak_tracker
sha256: "7f0df31977cb2c0b88585095d168e689669a2cc9b97c309665e3386f3e9d341a"
sha256: "3f87a60e8c63aecc975dda1ceedbc8f24de75f09e4856ea27daf8958f2f0ce05"
url: "https://pub.flutter-io.cn"
source: hosted
version: "10.0.4"
version: "10.0.5"
leak_tracker_flutter_testing:
dependency: transitive
description:
name: leak_tracker_flutter_testing
sha256: "06e98f569d004c1315b991ded39924b21af84cf14cc94791b8aea337d25b57f8"
sha256: "932549fb305594d82d7183ecd9fa93463e9914e1b67cacc34bc40906594a1806"
url: "https://pub.flutter-io.cn"
source: hosted
version: "3.0.3"
version: "3.0.5"
leak_tracker_testing:
dependency: transitive
description:
Expand Down Expand Up @@ -119,18 +119,18 @@ packages:
dependency: transitive
description:
name: material_color_utilities
sha256: "0e0a020085b65b6083975e499759762399b4475f766c21668c4ecca34ea74e5a"
sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.8.0"
version: "0.11.1"
meta:
dependency: transitive
description:
name: meta
sha256: "7687075e408b093f36e6bbf6c91878cc0d4cd10f409506f7bc996f68220b9136"
sha256: bdb68674043280c3428e9ec998512fb681678676b3c54e773629ffe74419f8c7
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.12.0"
version: "1.15.0"
path:
dependency: transitive
description:
Expand Down Expand Up @@ -195,10 +195,10 @@ packages:
dependency: transitive
description:
name: test_api
sha256: "9955ae474176f7ac8ee4e989dadfb411a58c30415bcfb648fa04b2b8a03afa7f"
sha256: "5b8a98dafc4d5c4c9c72d8b31ab2b23fc13422348d2997120294d3bac86b4ddb"
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.7.0"
version: "0.7.2"
vector_math:
dependency: transitive
description:
Expand All @@ -211,10 +211,10 @@ packages:
dependency: transitive
description:
name: vm_service
sha256: "3923c89304b715fb1eb6423f017651664a03bf5f4b29983627c4da791f74a4ec"
sha256: "5c5f338a667b4c644744b661f309fb8080bb94b18a7e91ef1dbd343bed00ed6d"
url: "https://pub.flutter-io.cn"
source: hosted
version: "14.2.1"
version: "14.2.5"
sdks:
dart: ">=3.3.0 <4.0.0"
flutter: ">=3.18.0-18.0.pre.54"
97 changes: 91 additions & 6 deletions lib/coordinate_system_painter.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ class CoordinateSystemPainter<E extends Enum> extends CustomPainter {
required this.divisions,
required this.reversed,
required this.onlyRenderEvenAxisLabel,
required this.fillWidth,
required this.onDrawCheckOrClose,
required this.yAxis,
required this.slidableCoordsAnimationCtrl,
Expand Down Expand Up @@ -75,6 +76,9 @@ class CoordinateSystemPainter<E extends Enum> extends CustomPainter {
/// {@macro package.SlidableLineChart.onlyRenderEvenAxisLabel}
final bool onlyRenderEvenAxisLabel;

/// {@macro package.SlidableLineChart.fillWidth}
final bool fillWidth;

/// {@macro package.SlidableLineChart.onDrawCheckOrClose}
final OnDrawIndicator? onDrawCheckOrClose;

Expand Down Expand Up @@ -584,7 +588,7 @@ class CoordinateSystemPainter<E extends Enum> extends CustomPainter {
canvas
..save()
..translate(
xAxisTickLineWidth / 2 + positionPadding.left,
(fillWidth ? 0 : xAxisTickLineWidth / 2) + positionPadding.left,
_chartHeight,
);

Expand All @@ -596,6 +600,31 @@ class CoordinateSystemPainter<E extends Enum> extends CustomPainter {
alignment: Alignment.center,
);

if (<DrawGridLineType>[
DrawGridLineType.all,
DrawGridLineType.onlyYAxis,
].contains(
slidableLineChartThemeData?.drawGridLineType ?? kDrawGridLineType,
)) {
if (!fillWidth || (fillWidth && i != 0)) {
if (slidableLineChartThemeData?.drawGridLineStyle ==
DrawGridLineStyle.dashed) {
_drawDashedLine(
canvas,
Offset(0, -positionPadding.bottom),
Offset(0, -_chartHeight + positionPadding.bottom),
_gridLinePaint,
);
} else {
canvas.drawLine(
Offset(0, -positionPadding.bottom),
Offset(0, -_chartHeight + positionPadding.bottom),
_gridLinePaint,
);
}
}
}

canvas.translate(xAxisTickLineWidth, 0);
}

Expand Down Expand Up @@ -623,11 +652,28 @@ class CoordinateSystemPainter<E extends Enum> extends CustomPainter {

for (int i = 1; i < yAxis.length; i++) {
// Drawing coordinate line.
canvas.drawLine(
Offset.zero,
Offset(_chartActualWidth, 0),
_gridLinePaint,
);
if (<DrawGridLineType>[
DrawGridLineType.all,
DrawGridLineType.onlyXAxis,
].contains(
slidableLineChartThemeData?.drawGridLineType ?? kDrawGridLineType,
)) {
if (slidableLineChartThemeData?.drawGridLineStyle ==
DrawGridLineStyle.dashed) {
_drawDashedLine(
canvas,
Offset.zero,
Offset(_chartActualWidth, 0),
_gridLinePaint,
);
} else {
canvas.drawLine(
Offset.zero,
Offset(_chartActualWidth, 0),
_gridLinePaint,
);
}
}

if (!onlyRenderEvenAxisLabel || (onlyRenderEvenAxisLabel && i.isEven)) {
_drawAxisLabel(
Expand All @@ -641,6 +687,45 @@ class CoordinateSystemPainter<E extends Enum> extends CustomPainter {
canvas.restore();
}

void _drawDashedLine(
Canvas canvas,
Offset p1,
Offset p2,
Paint paint,
) {
final double dashWidth =
slidableLineChartThemeData?.dashedGridLineWidth ?? kDashedGridLineWidth;
final double dashGap =
slidableLineChartThemeData?.dashedGridLineGap ?? kDashedGridLineGap;

double dx = p2.dx - p1.dx;
double dy = p2.dy - p1.dy;

final double magnitude = math.sqrt(dx * dx + dy * dy);
dx = dx / magnitude;
dy = dy / magnitude;

final int steps = magnitude ~/ (dashWidth + dashGap);

double startX = p1.dx;
double startY = p1.dy;

double? endX;
double? endY;

for (int i = 0; i < steps; i++) {
endX = startX + dx * dashWidth;
endY = startY + dy * dashWidth;
canvas.drawLine(Offset(startX, startY), Offset(endX, endY), paint);
startX += dx * (dashWidth + dashGap);
startY += dy * (dashWidth + dashGap);
}

if (endX != null && endY != null && (endX < p2.dx || endY < p2.dy)) {
canvas.drawLine(Offset(startX, startY), p2, paint);
}
}

void _drawAxisLabel(
Canvas canvas,
String text, {
Expand Down
32 changes: 27 additions & 5 deletions lib/slidable_line_chart.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ class SlidableLineChart<E extends Enum> extends StatefulWidget {
this.enableInitializationAnimation = true,
this.initializationAnimationDuration =
kDefaultInitializationAnimationDuration,
this.fillWidth = false,
this.enableFeedback = true,
this.onDrawCheckOrClose,
this.onChange,
Expand All @@ -70,6 +71,10 @@ class SlidableLineChart<E extends Enum> extends StatefulWidget {
slidePrecision == null || (slidePrecision * 100) % 1 == 0,
'slidePrecision($slidePrecision) must be a multiple of 0.01',
),
assert(
fillWidth == false || (fillWidth && onChange == null),
'fillWidth($fillWidth) can only be set to true if onChange is null.',
),
super(key: key);

/// {@template package.SlidableLineChart.slidableCoordinateType}
Expand Down Expand Up @@ -181,6 +186,13 @@ class SlidableLineChart<E extends Enum> extends StatefulWidget {
/// Defaults to Duration(seconds: 1).
final Duration initializationAnimationDuration;

/// {@template package.SlidableLineChart.fillWidth}
/// Align the first and last points of the chart with both ends.
///
/// Can only be set to true if [onChange] is null.
/// {@endtemplate}
final bool fillWidth;

/// Whether audible and/or haptic feedback should be provided during user
/// interaction.
///
Expand Down Expand Up @@ -571,7 +583,8 @@ class SlidableLineChartState<E extends Enum> extends State<SlidableLineChart<E>>
/// This value divided by 2 is dx for the coordinate offset.
/// {@endtemplate}
double _getXAxisTickLineWidth(double chartActualWidth) =>
chartActualWidth / widget.xAxis.length;
chartActualWidth /
(widget.fillWidth ? widget.xAxis.length - 1 : widget.xAxis.length);

/// Get the conversion factor from the Y-axis display value to the offset
/// value.
Expand Down Expand Up @@ -713,7 +726,8 @@ class SlidableLineChartState<E extends Enum> extends State<SlidableLineChart<E>>
(int index, double value) => Coordinate(
value: value,
offset: Offset(
xAxisTickLineWidth * (index + 0.5) +
xAxisTickLineWidth *
(index + (widget.fillWidth ? 0 : 0.5)) +
_positionPadding.left,
_displayValue2YAxisOffsetValue(
value,
Expand Down Expand Up @@ -746,6 +760,9 @@ class SlidableLineChartState<E extends Enum> extends State<SlidableLineChart<E>>
maxOffsetValueOnYAxisSlidingArea = chartActualHeight;
}

final SlidableLineChartThemeData<E>? theme =
SlidableLineChartTheme.maybeOf<E>(context);

final Widget coordinateSystemPainter = CustomPaint(
size: Size(chartWidth, chartHeight),
isComplex: true,
Expand All @@ -759,6 +776,7 @@ class SlidableLineChartState<E extends Enum> extends State<SlidableLineChart<E>>
divisions: widget.divisions,
reversed: widget.reversed,
onlyRenderEvenAxisLabel: widget.onlyRenderEvenAxisLabel,
fillWidth: widget.fillWidth,
onDrawCheckOrClose: widget.onDrawCheckOrClose,
yAxis: _yAxis,
slidableCoordsAnimationCtrl: _slidableCoordsAnimationCtrl,
Expand All @@ -768,14 +786,18 @@ class SlidableLineChartState<E extends Enum> extends State<SlidableLineChart<E>>
getYAxisTickLineHeight: _getYAxisTickLineHeight,
maxOffsetValueOnYAxisSlidingArea:
maxOffsetValueOnYAxisSlidingArea,
slidableLineChartThemeData:
SlidableLineChartTheme.maybeOf<E>(context),
slidableLineChartThemeData: theme,
triggerClear: _triggerClear,
),
);

if (widget.onChange == null) {
return Opacity(opacity: 0.6, child: coordinateSystemPainter);
final double opacity = theme?.disabledOpacity ?? kDisabledOpacity;

if (opacity == 1) {
return coordinateSystemPainter;
}
return Opacity(opacity: opacity, child: coordinateSystemPainter);
}

if (_slidableCoordinates == null) {
Expand Down
Loading
Loading