From a051e30b6a7189ae3483ca0ad4802f4687f16ec5 Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Tue, 24 May 2022 15:29:16 +0800 Subject: [PATCH 1/5] fix: markArea of bar series now covers whole category --- src/chart/bar/BaseBarSeries.ts | 24 ++++-- src/component/marker/MarkAreaView.ts | 21 ++++- src/coord/CoordinateSystem.ts | 2 + src/model/Series.ts | 3 +- test/bar-markArea.html | 117 +++++++++++++++++++++++++++ 5 files changed, 158 insertions(+), 9 deletions(-) create mode 100644 test/bar-markArea.html diff --git a/src/chart/bar/BaseBarSeries.ts b/src/chart/bar/BaseBarSeries.ts index 8dad96d280..7df29ac9c2 100644 --- a/src/chart/bar/BaseBarSeries.ts +++ b/src/chart/bar/BaseBarSeries.ts @@ -29,6 +29,9 @@ import { import GlobalModel from '../../model/Global'; import Cartesian2D from '../../coord/cartesian/Cartesian2D'; import SeriesData from '../../data/SeriesData'; +import {dimPermutations} from '../../component/marker/MarkAreaView'; +import { each } from 'zrender/src/core/util'; +import type Axis2D from '../../coord/cartesian/Axis2D'; export interface BaseBarSeriesOption @@ -82,16 +85,25 @@ class BaseBarSeriesModel = BaseBarSeri return createSeriesData(null, this, {useEncodeDefaulter: true}); } - getMarkerPosition(value: ScaleDataValue[]) { + getMarkerPosition(value: ScaleDataValue[], dims?: typeof dimPermutations[number]) { const coordSys = this.coordinateSystem; if (coordSys && coordSys.clampData) { // PENDING if clamp ? const pt = coordSys.dataToPoint(coordSys.clampData(value)); - const data = this.getData(); - const offset = data.getLayout('offset'); - const size = data.getLayout('size'); - const offsetIndex = (coordSys as Cartesian2D).getBaseAxis().isHorizontal() ? 0 : 1; - pt[offsetIndex] += offset + size / 2; + each(coordSys.getAxes(), function(axis: Axis2D, idx: number) { + //If axis type is category, use tick coords instead + if (axis.type === 'category') { + const tickCoords = axis.getTicksCoords(); + let tickIdx = coordSys.clampData(value)[idx]; + //The index of rightmost tick of markArea is 1 larger than x1/y1 index + if (dims && (dims[idx] === 'x1' || dims[idx] === 'y1')) { + tickIdx += 1; + } + (tickIdx > tickCoords.length - 1) && (tickIdx = tickCoords.length - 1); + (tickIdx < 0) && (tickIdx = 0); + tickCoords[tickIdx] && (pt[idx] = axis.toGlobalCoord(tickCoords[tickIdx].coord)); + } + }) return pt; } return [NaN, NaN]; diff --git a/src/component/marker/MarkAreaView.ts b/src/component/marker/MarkAreaView.ts index dcaa4b1c78..f9f6be0c7d 100644 --- a/src/component/marker/MarkAreaView.ts +++ b/src/component/marker/MarkAreaView.ts @@ -164,9 +164,26 @@ function getSingleMarkerEndPoint( else { // Chart like bar may have there own marker positioning logic if (seriesModel.getMarkerPosition) { + //Consider the case that user input the right-bottom point first + //Pick the larger x and y as 'x1' and 'y1' + const pointValue0 = data.getValues(['x0','y0'], idx); + const pointValue1 = data.getValues(['x1','y1'], idx); + var clampPointValue0 = coordSys.clampData(pointValue0); + var clampPointValue1 = coordSys.clampData(pointValue1); + let pointValue = []; + if (dims[0] === 'x0') { + pointValue[0] = (clampPointValue0[0] > clampPointValue1[0]) ? pointValue1[0] : pointValue0[0]; + } else { + pointValue[0] = (clampPointValue0[0] > clampPointValue1[0]) ? pointValue0[0] : pointValue1[0]; + } + if (dims[1] === 'y0') { + pointValue[1] = (clampPointValue0[1] > clampPointValue1[1]) ? pointValue1[1] : pointValue0[1]; + } else { + pointValue[1] = (clampPointValue0[1] > clampPointValue1[1]) ? pointValue0[1] : pointValue1[1]; + } // Use the getMarkerPoisition point = seriesModel.getMarkerPosition( - data.getValues(dims, idx) + pointValue, dims ); } else { @@ -202,7 +219,7 @@ function getSingleMarkerEndPoint( return point; } -const dimPermutations = [['x0', 'y0'], ['x1', 'y0'], ['x1', 'y1'], ['x0', 'y1']] as const; +export const dimPermutations = [['x0', 'y0'], ['x1', 'y0'], ['x1', 'y1'], ['x0', 'y1']] as const; class MarkAreaView extends MarkerView { diff --git a/src/coord/CoordinateSystem.ts b/src/coord/CoordinateSystem.ts index 0ebe41e916..b27f66acfa 100644 --- a/src/coord/CoordinateSystem.ts +++ b/src/coord/CoordinateSystem.ts @@ -137,6 +137,8 @@ export interface CoordinateSystem { // @param point Point in global pixel coordinate system. containPoint(point: number[]): boolean; + getAxes?: () => Axis[]; + getAxis?: (dim?: DimensionName) => Axis; getBaseAxis?: () => Axis; diff --git a/src/model/Series.ts b/src/model/Series.ts index 4c9b14186e..93ac1e8ab5 100644 --- a/src/model/Series.ts +++ b/src/model/Series.ts @@ -57,6 +57,7 @@ import { defaultSeriesFormatTooltip } from '../component/tooltip/seriesFormatToo import {ECSymbol} from '../util/symbol'; import {Group} from '../util/graphic'; import {LegendIconParams} from '../component/legend/LegendModel'; +import {dimPermutations} from '../component/marker/MarkAreaView'; const inner = modelUtil.makeInner<{ data: SeriesData @@ -99,7 +100,7 @@ interface SeriesModel { /** * Get position for marker */ - getMarkerPosition(value: ScaleDataValue[]): number[]; + getMarkerPosition(value: ScaleDataValue[], dims?: typeof dimPermutations[number]): number[]; /** * Get legend icon symbol according to each series type diff --git a/test/bar-markArea.html b/test/bar-markArea.html new file mode 100644 index 0000000000..ccce026bf6 --- /dev/null +++ b/test/bar-markArea.html @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + From 27c69b01ee566452e3d667e3fee8fb58d7176a38 Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Tue, 24 May 2022 15:50:57 +0800 Subject: [PATCH 2/5] fix lint error --- src/chart/bar/BaseBarSeries.ts | 4 ++-- src/component/marker/MarkAreaView.ts | 16 +++++++++------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/chart/bar/BaseBarSeries.ts b/src/chart/bar/BaseBarSeries.ts index 7df29ac9c2..bf55cf8f12 100644 --- a/src/chart/bar/BaseBarSeries.ts +++ b/src/chart/bar/BaseBarSeries.ts @@ -90,7 +90,7 @@ class BaseBarSeriesModel = BaseBarSeri if (coordSys && coordSys.clampData) { // PENDING if clamp ? const pt = coordSys.dataToPoint(coordSys.clampData(value)); - each(coordSys.getAxes(), function(axis: Axis2D, idx: number) { + each(coordSys.getAxes(), function (axis: Axis2D, idx: number) { //If axis type is category, use tick coords instead if (axis.type === 'category') { const tickCoords = axis.getTicksCoords(); @@ -103,7 +103,7 @@ class BaseBarSeriesModel = BaseBarSeri (tickIdx < 0) && (tickIdx = 0); tickCoords[tickIdx] && (pt[idx] = axis.toGlobalCoord(tickCoords[tickIdx].coord)); } - }) + }); return pt; } return [NaN, NaN]; diff --git a/src/component/marker/MarkAreaView.ts b/src/component/marker/MarkAreaView.ts index f9f6be0c7d..d86362c78b 100644 --- a/src/component/marker/MarkAreaView.ts +++ b/src/component/marker/MarkAreaView.ts @@ -166,19 +166,21 @@ function getSingleMarkerEndPoint( if (seriesModel.getMarkerPosition) { //Consider the case that user input the right-bottom point first //Pick the larger x and y as 'x1' and 'y1' - const pointValue0 = data.getValues(['x0','y0'], idx); - const pointValue1 = data.getValues(['x1','y1'], idx); - var clampPointValue0 = coordSys.clampData(pointValue0); - var clampPointValue1 = coordSys.clampData(pointValue1); - let pointValue = []; + const pointValue0 = data.getValues(['x0', 'y0'], idx); + const pointValue1 = data.getValues(['x1', 'y1'], idx); + const clampPointValue0 = coordSys.clampData(pointValue0); + const clampPointValue1 = coordSys.clampData(pointValue1); + const pointValue = []; if (dims[0] === 'x0') { pointValue[0] = (clampPointValue0[0] > clampPointValue1[0]) ? pointValue1[0] : pointValue0[0]; - } else { + } + else { pointValue[0] = (clampPointValue0[0] > clampPointValue1[0]) ? pointValue0[0] : pointValue1[0]; } if (dims[1] === 'y0') { pointValue[1] = (clampPointValue0[1] > clampPointValue1[1]) ? pointValue1[1] : pointValue0[1]; - } else { + } + else { pointValue[1] = (clampPointValue0[1] > clampPointValue1[1]) ? pointValue0[1] : pointValue1[1]; } // Use the getMarkerPoisition From 6dbd5df649f1587686be2c35c9f0b8693c9341fb Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Tue, 7 Jun 2022 16:33:10 +0800 Subject: [PATCH 3/5] New testcase added --- test/bar-markArea.html | 75 +++++++++++++++++++++++++++++++++++++++--- 1 file changed, 71 insertions(+), 4 deletions(-) diff --git a/test/bar-markArea.html b/test/bar-markArea.html index ccce026bf6..81de2f543a 100644 --- a/test/bar-markArea.html +++ b/test/bar-markArea.html @@ -38,10 +38,7 @@
- - - - +
+ + From b47d056732f71f5e7724880342c2e4c353b0a008 Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Mon, 13 Jun 2022 11:49:20 +0800 Subject: [PATCH 4/5] fix: markPoint now can show normally --- src/chart/bar/BaseBarSeries.ts | 37 +++++++++++++++++----------- src/component/marker/MarkAreaView.ts | 2 +- src/model/Series.ts | 2 +- 3 files changed, 25 insertions(+), 16 deletions(-) diff --git a/src/chart/bar/BaseBarSeries.ts b/src/chart/bar/BaseBarSeries.ts index bf55cf8f12..e21d968300 100644 --- a/src/chart/bar/BaseBarSeries.ts +++ b/src/chart/bar/BaseBarSeries.ts @@ -85,25 +85,34 @@ class BaseBarSeriesModel = BaseBarSeri return createSeriesData(null, this, {useEncodeDefaulter: true}); } - getMarkerPosition(value: ScaleDataValue[], dims?: typeof dimPermutations[number]) { + getMarkerPosition(value: ScaleDataValue[], dims?: typeof dimPermutations[number], startingAtTick: boolean = false) { const coordSys = this.coordinateSystem; if (coordSys && coordSys.clampData) { // PENDING if clamp ? const pt = coordSys.dataToPoint(coordSys.clampData(value)); - each(coordSys.getAxes(), function (axis: Axis2D, idx: number) { - //If axis type is category, use tick coords instead - if (axis.type === 'category') { - const tickCoords = axis.getTicksCoords(); - let tickIdx = coordSys.clampData(value)[idx]; - //The index of rightmost tick of markArea is 1 larger than x1/y1 index - if (dims && (dims[idx] === 'x1' || dims[idx] === 'y1')) { - tickIdx += 1; + if (startingAtTick) { + each(coordSys.getAxes(), function (axis: Axis2D, idx: number) { + //If axis type is category, use tick coords instead + if (axis.type === 'category') { + const tickCoords = axis.getTicksCoords(); + let tickIdx = coordSys.clampData(value)[idx]; + //The index of rightmost tick of markArea is 1 larger than x1/y1 index + if (dims && (dims[idx] === 'x1' || dims[idx] === 'y1')) { + tickIdx += 1; + } + (tickIdx > tickCoords.length - 1) && (tickIdx = tickCoords.length - 1); + (tickIdx < 0) && (tickIdx = 0); + tickCoords[tickIdx] && (pt[idx] = axis.toGlobalCoord(tickCoords[tickIdx].coord)); } - (tickIdx > tickCoords.length - 1) && (tickIdx = tickCoords.length - 1); - (tickIdx < 0) && (tickIdx = 0); - tickCoords[tickIdx] && (pt[idx] = axis.toGlobalCoord(tickCoords[tickIdx].coord)); - } - }); + }); + } + else { + const data = this.getData(); + const offset = data.getLayout('offset'); + const size = data.getLayout('size'); + const offsetIndex = (coordSys as Cartesian2D).getBaseAxis().isHorizontal() ? 0 : 1; + pt[offsetIndex] += offset + size / 2; + } return pt; } return [NaN, NaN]; diff --git a/src/component/marker/MarkAreaView.ts b/src/component/marker/MarkAreaView.ts index d86362c78b..9dfc4deb7b 100644 --- a/src/component/marker/MarkAreaView.ts +++ b/src/component/marker/MarkAreaView.ts @@ -185,7 +185,7 @@ function getSingleMarkerEndPoint( } // Use the getMarkerPoisition point = seriesModel.getMarkerPosition( - pointValue, dims + pointValue, dims, true ); } else { diff --git a/src/model/Series.ts b/src/model/Series.ts index 93ac1e8ab5..60d77e431d 100644 --- a/src/model/Series.ts +++ b/src/model/Series.ts @@ -100,7 +100,7 @@ interface SeriesModel { /** * Get position for marker */ - getMarkerPosition(value: ScaleDataValue[], dims?: typeof dimPermutations[number]): number[]; + getMarkerPosition(value: ScaleDataValue[], dims?: typeof dimPermutations[number], startingAtTick?:boolean): number[]; /** * Get legend icon symbol according to each series type From 5186308c1031dee4753eaa49197ae310ef13e4a6 Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Mon, 13 Jun 2022 11:53:06 +0800 Subject: [PATCH 5/5] fix lint error --- src/model/Series.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/model/Series.ts b/src/model/Series.ts index 60d77e431d..f4e9923dd9 100644 --- a/src/model/Series.ts +++ b/src/model/Series.ts @@ -100,7 +100,10 @@ interface SeriesModel { /** * Get position for marker */ - getMarkerPosition(value: ScaleDataValue[], dims?: typeof dimPermutations[number], startingAtTick?:boolean): number[]; + getMarkerPosition( + value: ScaleDataValue[], + dims?: typeof dimPermutations[number], + startingAtTick?:boolean): number[]; /** * Get legend icon symbol according to each series type