feat: allow closing a curve on polar line series#17720
feat: allow closing a curve on polar line series#17720yassilah wants to merge 12 commits intoapache:masterfrom
Conversation
|
Thanks for your contribution! Document changes are required in this PR. Please also make a PR to apache/echarts-doc for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the |
Ovilia
left a comment
There was a problem hiding this comment.
I think this would be a very useful feature.
Please also test the cases with areaStyle.
src/chart/line/LineView.ts
Outdated
| } | ||
|
|
||
| polyline = this._newPolyline(points); | ||
| polyline = this._newPolyline(points, closed); |
There was a problem hiding this comment.
It's a better idea to define const closed = isCoordSysPolar && seriesModel.get('closed'); here. It will make the code more readable and postpone the execution until necessary.
src/chart/line/poly.ts
Outdated
| const points = shape.points; | ||
| const points = shape.closed | ||
| ? [ | ||
| shape.points[shape.points.length - 2], |
There was a problem hiding this comment.
What if shape.points.length is less than 2?
There was a problem hiding this comment.
We also need to consider the situation when some of the data is null and when connectNulls is set to either true or false. Please add test cases.
src/chart/line/LineSeries.ts
Outdated
|
|
||
| triggerLineEvent?: boolean | ||
|
|
||
| closed?: boolean |
There was a problem hiding this comment.
I think loop (inspired by gl.LINE_LOOP of WebGL) may be a better name than closed because it may not always be closed due to the existance of null data.
|
hi! sorry for the delay but I finally added some tests, they did help in avoiding some issues and avoiding code repetition so I hope it's enough :) |
| shape: { | ||
| points | ||
| points, | ||
| loop |
There was a problem hiding this comment.
Can ECPolygon be used if loop is true? If so, you don't have to implement the loop logic.
There was a problem hiding this comment.
Yes it can, what do you mean I don't have to implement it?
There was a problem hiding this comment.
Yes. I think if it passes the test, you can use ECPolygon and remove getPoints.
|
Hi, is there anything else I can do to get this PR merged? |
Ovilia
left a comment
There was a problem hiding this comment.
Sorry for the late reply. I think the overall logic is fine. Just a small problem.
src/chart/line/poly.ts
Outdated
| } | ||
|
|
||
| function getPoints(shape: ECPolygonShape|ECPolylineShape) { | ||
| let points = Array.from(shape.points); |
There was a problem hiding this comment.
Please use shape.points.slice instead of Array.from. BTW, if shape.loop is false, you can just return shape.points to improve efficiency.
There was a problem hiding this comment.
One small thing: the type of ECPolygonShape|ECPolylineShape is ArrayLike<number> so the slice method doesn't exist as it's not a regular array (that's why i used Array.from in the first place). Is it still safe to just force it to be inferred as an array?
Ovilia
left a comment
There was a problem hiding this comment.
I would suggest using ECPolygon when loop so that you don't have to write extra code to make the looped array.
|
Hi! So I got rid of the loop implementation for ECPolyline, which will use the ECPolygon |
Ovilia
left a comment
There was a problem hiding this comment.
Sorry for the late reply!
| points = nonNull; | ||
| } | ||
|
|
||
| return [points[points.length - 2], points[points.length - 1], ...points, points[0], points[1]]; |
There was a problem hiding this comment.
What if points.length is less than 5?
| buildPath(ctx: PathProxy, shape: ECPolylineShape) { | ||
| const points = shape.points; | ||
| if (shape.loop) { | ||
| return ECPolygon.prototype.buildPath.call(this, ctx, { |
There was a problem hiding this comment.
I didn't mean implement loop inside Polyline by calling Polygon, because this will cause dependency on the later. Instead, we should decide to call Polygon or Polyline in LineView.
Brief Information
This pull request is in the type of:
What does this PR do?
This PR allows to close a curve on a line series with a polar coord system.
Fixed issues
Details
Before: What was the problem?
After: How does it behave after the fixing?
Document Info
One of the following should be checked.
Misc
ZRender Changes
Related test cases or examples to use the new APIs
N.A.
Others
Merging options
Other information