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

(feat): marker upgrade for stock charts #20166

Open
wants to merge 4 commits into
base: v6
Choose a base branch
from
Open

(feat): marker upgrade for stock charts #20166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ec7d082
feat(marker): relativeTo
Ovilia Jul 11, 2024
8c4a2d8
test(marker): add test case for markline
Ovilia Jul 12, 2024
9766e2f
test(marker): relative to coordinate
Ovilia Jul 16, 2024
0ac383d
test(marker): update test case
Ovilia Jul 25, 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
1 change: 1 addition & 0 deletions src/component/marker/MarkPointModel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export interface MarkPointDataItemOption extends
SymbolOptionMixin<CallbackDataParams>,
MarkerPositionOption {
name: string
relativeTo: 'screen' | 'coordinate'
}

export interface MarkPointOption extends MarkerOption,
Expand Down
21 changes: 19 additions & 2 deletions src/component/marker/MarkPointView.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,28 @@ function updateMarkerLayout(
api: ExtensionAPI
) {
const coordSys = seriesModel.coordinateSystem;
const apiWidth = api.getWidth();
const apiHeight = api.getHeight();
const coordRect = coordSys.getArea && coordSys.getArea();
mpData.each(function (idx: number) {
const itemModel = mpData.getItemModel<MarkPointDataItemOption>(idx);
const relativeTo = itemModel.get('relativeTo');
const width = relativeTo === 'coordinate'
? coordRect ? coordRect.width : 0
: apiWidth;
const height = relativeTo === 'coordinate'
? coordRect ? coordRect.height : 0
: apiHeight;
const left = relativeTo === 'coordinate'
? coordRect ? coordRect.x : 0
: 0;
const top = relativeTo === 'coordinate'
? coordRect ? coordRect.y : 0
: 0;

let point;
const xPx = numberUtil.parsePercent(itemModel.get('x'), api.getWidth());
const yPx = numberUtil.parsePercent(itemModel.get('y'), api.getHeight());
const xPx = numberUtil.parsePercent(itemModel.get('x'), width) + left;
const yPx = numberUtil.parsePercent(itemModel.get('y'), height) + top;
if (!isNaN(xPx) && !isNaN(yPx)) {
point = [xPx, yPx];
}
Expand Down
1 change: 1 addition & 0 deletions src/component/marker/MarkerModel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
// Absolute position, px or percent string
x?: number | string
y?: number | string
relativeTo?: 'screen' | 'coordinate'
Copy link
Member

Choose a reason for hiding this comment

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

  1. I think that using screen might misleads users, because the the chart is just a part of a html webpage, and in CSS the screen already has some specific meaning (also doesn't refer to the real screen but the semantic is well-known).
    But I haven't come up with a perfect name yet.
    Some candidates:
  • viewport (also has specific meaning in HTML/CSS but better than screen?)
  • global (a more general term?)
  • global-container
  1. The term coordinate is a point in a coordinate system, rather than coordinate system itself.
    Should this option be coordinateSystem or coordinate-system, since the term coordinateSystem has been used in echarts option?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

global sounds good to me, only that it's an adj. instead of noun. In the case of relativeTo something, it may be better to follow with a noun. GPT suggests container and coordinateSystem and I think it's Okay. What do you think?


/**
* Coord on any coordinate system
Expand Down Expand Up @@ -259,7 +260,7 @@
}
}

interface MarkerModel<Opts extends MarkerOption = MarkerOption> extends DataFormatMixin {}

Check warning on line 263 in src/component/marker/MarkerModel.ts

View workflow job for this annotation

GitHub Actions / lint (18.x) 

'Opts' is defined but never used
zrUtil.mixin(MarkerModel, DataFormatMixin.prototype);

export default MarkerModel;
1 change: 1 addition & 0 deletions src/component/marker/markerHelper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ export function dataTransform(
// x y is provided
if (item.coord == null || !isArray(dims)) {
item.coord = [];
item.value = numCalculate(data, data.mapDimension(dims[1]), item.type);
Copy link
Member

Choose a reason for hiding this comment

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

Should it be

numCalculate(data, data.mapDimension(seriesModel.getBaseAxis()), item.type);

?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

OK. Thanks for correction.

}
else {
// Each coord support max, min, average
Expand Down
6 changes: 5 additions & 1 deletion src/coord/CoordinateSystem.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,11 @@ export interface CoordinateSystemHostModel extends ComponentModel {
* It is used to clip the graphic elements with the contain methods.
*/
export interface CoordinateSystemClipArea {
contain(x: number, y: number): boolean
x: number;
y: number;
width: number;
height: number;
contain(x: number, y: number): boolean;
}

export function isCoordinateSystemType<T extends CoordinateSystem, S = T['type']>(
Expand Down
8 changes: 7 additions & 1 deletion src/coord/polar/Polar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,13 @@ class Polar implements CoordinateSystem, CoordinateSystemMaster {
const r0 = this.r0;

return d2 <= r * r && d2 >= r0 * r0;
}
},

// As the bounding box
x: this.cx - radiusExtent[1],
y: this.cy - radiusExtent[1],
width: radiusExtent[1] * 2,
height: radiusExtent[1] * 2
Copy link
Member

Choose a reason for hiding this comment

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

Should we support r0 > r1? I tried it just now and it works.
It might be more robustness if take the max(radiusExtent[0], radiusExtent[1]) here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It seems the contain (d2 <= r * r && d2 >= r0 * r0) assumes r0 <= r. If max(radiusExtent[0], radiusExtent[1]) is used here, maybe we should also change other places, or just assumes r0 <= r until other requirement.

};
}

Expand Down
207 changes: 207 additions & 0 deletions test/markPoint-stock.html
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.