Feat/box plot labels #17579
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -30,15 +30,16 @@ import { | |
| ColorString, | ||
| ZRStyleProps, | ||
| AnimationOptionMixin, | ||
| InterpolatableValue, | ||
| ViewRootGroup | ||
| } from '../util/types'; | ||
| import GlobalModel from '../model/Global'; | ||
| import { isFunction, retrieve2, extend, keys, trim } from 'zrender/src/core/util'; | ||
| import { SPECIAL_STATES, DISPLAY_STATES } from '../util/states'; | ||
| import { deprecateReplaceLog } from '../util/log'; | ||
| import { makeInner, interpolateRawValues } from '../util/model'; | ||
| import SeriesData from '../data/SeriesData'; | ||
| import * as graphic from '../util/graphic'; | ||
|
|
||
| type TextCommonParams = { | ||
| /** | ||
|
|
@@ -292,6 +293,66 @@ function setLabelStyle<TLabelDataIndex>( | |
| } | ||
| export { setLabelStyle }; | ||
|
|
||
| /** | ||
| * Set and create specific labels for box plot. | ||
| * | ||
| * This method should only be used for this case, | ||
| * as it manually creates multiple alternating labels | ||
| * specifically for the box plot. | ||
| */ | ||
| export function setBoxLabels(boxItemPositions: number[][], formattedLabels: Array<string>, | ||
| labelOption: any, group: ViewRootGroup) { | ||
| // get sorted and unique y positions of box items | ||
| const yPositions = boxItemPositions.map((pos: number[]) => pos[1]); | ||
| const uniqueYPositions: number[] = []; | ||
| yPositions.forEach(position => { | ||
| if (!uniqueYPositions.includes(position)) { | ||
| uniqueYPositions.push(position); | ||
| } | ||
| }); | ||
| uniqueYPositions.sort(function (a: number, b: number) { | ||
| return b - a; | ||
| }); | ||
|
|
||
| boxItemPositions.sort(function (a: number[], b: number[]) { | ||
| return a[0] - b[0]; | ||
| }); | ||
|
|
||
| // get alternating y positions for labels to avoid overlap | ||
| const uniqueAlternatingPositions = uniqueYPositions.map((posY: number, ind: number) => { | ||
| const matchingPositions = boxItemPositions.filter((orgPos: number[]) => orgPos[1] === posY); | ||
| const index = (ind % 2 === 0) ? 0 : matchingPositions.length - 1; | ||
| return matchingPositions[index]; | ||
| }); | ||
|
|
||
| // create labels and add them to their respective positions | ||
| formattedLabels.forEach((labelText: string, ind: number) => { | ||
| if (labelOption.show === 'iqr' && (ind === 0 || ind === 4)) { | ||
| return; | ||
| } | ||
| if (labelOption.show === 'median' && (ind !== 2)) { | ||
| return; | ||
| } | ||
| if (labelOption.show === 'whiskers' && (ind !== 0 && ind !== 4)) { | ||
| return; | ||
| } | ||
| const label = new graphic.Text({ | ||
| style: { | ||
| text: labelText | ||
| }, | ||
| z2: 1000 | ||
| }); | ||
| const defaultOffset = 5; | ||
| const defaultXOffset = (ind % 2) === 0 ? (-(label.getBoundingRect().width + defaultOffset)) : defaultOffset; | ||
|
There was a problem hiding this comment. As I said before, we should provide a way to let developers decide where to display the label to the left or right. The There was a problem hiding this comment. @Ovilia Sorry, maybe I am missing something here as well but there is no single label. We have five labels, right? I still don't get how someone could choose the align for the five in a way that makes sense - e.g. all labels on one side - even though they might overlap? |
||
| const defaultYOffset = -defaultOffset; | ||
| const customOffset = labelOption.offset ? labelOption.offset : [0, 0]; | ||
| label.x = uniqueAlternatingPositions[ind][0] + defaultXOffset + customOffset[0], | ||
| label.y = uniqueAlternatingPositions[ind][1] + defaultYOffset + customOffset[1], | ||
| group.add(label); | ||
| }); | ||
| } | ||
|
|
||
|
|
||
| export function getLabelStatesModels<LabelName extends string = 'label'>( | ||
| itemModel: Model<StatesOptionMixin<any, any> & Partial<Record<LabelName, any>>>, | ||
| labelName?: LabelName | ||
|
|
@@ -726,8 +787,8 @@ export function animateLabelValue( | |
|
|
||
| (textEl as ZRText & {percent?: number}).percent = 0; | ||
| (labelInnerStore.prevValue == null | ||
| ? graphic.initProps | ||
| : graphic.updateProps | ||
| )<TextProps & {percent?: number}>(textEl, { | ||
| // percent is used to prevent animation from being aborted #15916 | ||
| percent: 1 | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is not the correct way to format labels. If
formatteris not defined, this should go wrong. You should probably do like sunburst.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Ovilia I am not sure if I understood correctly -
getFormattedLabelis defined to return astringbut somehow returns anobjectwhen being called withdataIndex.I think I am missing something here, could you clarify how you would implement the formatting of the labels?
Thanks