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.

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

feat: allow closing a curve on polar line series #17720

Open
wants to merge 12 commits into
base: master
Choose a base branch
from

Conversation

yassilah
Copy link
Contributor

@yassilah yassilah commented Oct 1, 2022

Brief Information

This pull request is in the type of:

  • bug fixing
  • new feature
  • others

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?

Capture d’écran 2022-10-01 à 16 08 48

After: How does it behave after the fixing?

Capture d’écran 2022-10-01 à 16 08 53

Document Info

One of the following should be checked.

  • This PR doesn't relate to document changes
  • The document should be updated later
  • The document changes have been made in apache/echarts-doc

Misc

ZRender Changes

  • This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

N.A.

Others

Merging options

  • Please squash the commits into a single one when merging.

Other information

@echarts-bot echarts-bot bot added PR: awaiting doc Document changes is required for this PR. PR: awaiting review labels Oct 1, 2022
@echarts-bot
Copy link

echarts-bot bot commented Oct 1, 2022

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

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 PR: awaiting doc label.

Copy link
Contributor

@Ovilia Ovilia left a comment

Choose a reason for hiding this comment

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

I think this would be a very useful feature.

Please also test the cases with areaStyle.

@@ -725,10 +727,10 @@ class LineView extends ChartView {
}
}

polyline = this._newPolyline(points);
polyline = this._newPolyline(points, closed);
Copy link
Contributor

Choose a reason for hiding this comment

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

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.

const points = shape.points;
const points = shape.closed
? [
shape.points[shape.points.length - 2],
Copy link
Contributor

Choose a reason for hiding this comment

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

What if shape.points.length is less than 2?

Copy link
Contributor

Choose a reason for hiding this comment

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

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.

@@ -120,6 +120,8 @@ export interface LineSeriesOption extends SeriesOption<LineStateOption<CallbackD
data?: (LineDataValue | LineDataItemOption)[]

triggerLineEvent?: boolean

closed?: boolean
Copy link
Contributor

Choose a reason for hiding this comment

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

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.

@Ovilia Ovilia added this to the 5.4.1 milestone Oct 18, 2022
@yassilah
Copy link
Contributor Author

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 :)

@@ -1028,7 +1030,8 @@ class LineView extends ChartView {

polyline = new ECPolyline({
shape: {
points
points,
loop
Copy link
Contributor

Choose a reason for hiding this comment

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

Can ECPolygon be used if loop is true? If so, you don't have to implement the loop logic.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes it can, what do you mean I don't have to implement it?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes. I think if it passes the test, you can use ECPolygon and remove getPoints.

@yassilah
Copy link
Contributor Author

Hi, is there anything else I can do to get this PR merged?

Copy link
Contributor

@Ovilia Ovilia left a comment

Choose a reason for hiding this comment

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

Sorry for the late reply. I think the overall logic is fine. Just a small problem.

@@ -211,12 +211,34 @@ function drawSegment(
return k;
}

function getPoints(shape: ECPolygonShape|ECPolylineShape) {
let points = Array.from(shape.points);
Copy link
Contributor

Choose a reason for hiding this comment

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

Please use shape.points.slice instead of Array.from. BTW, if shape.loop is false, you can just return shape.points to improve efficiency.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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?

@echarts-bot echarts-bot bot added PR: doc ready and removed PR: awaiting doc Document changes is required for this PR. labels Oct 12, 2023
Copy link
Contributor

@Ovilia Ovilia left a comment

Choose a reason for hiding this comment

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

I would suggest using ECPolygon when loop so that you don't have to write extra code to make the looped array.

@yassilah
Copy link
Contributor Author

Hi! So I got rid of the loop implementation for ECPolyline, which will use the ECPolygon buildPath method when loop: true instead. I tried to get rid of the getPoints function entirely and instead implement the logic in drawSegment directly to avoid unnecessary array manipulation but I actually can't because I still need it to work when smooth: true. So, instead I added a check to see whether the extra before/after points were necessary (when both loop and smooth are truthy), which should only trigger array manipulation when visually necessary. Hope that makes sense!

@Ovilia Ovilia modified the milestones: 5.5.0, 5.5.1 Jan 18, 2024
@Ovilia Ovilia modified the milestones: 5.5.1, 5.5.2 Jun 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants