From e6dab043c24dba2e7c7eaba2d5529a3ea861c4da Mon Sep 17 00:00:00 2001 From: plainheart Date: Tue, 2 Jul 2024 12:12:25 +0800 Subject: [PATCH 1/3] fix(candlestick): add back missing support for non-normal states since v5.0.0 --- src/chart/candlestick/CandlestickView.ts | 23 +++++++--- src/chart/candlestick/candlestickVisual.ts | 31 +++++++------ test/candlestick-case.html | 51 +++++++++++++++++++++- test/runTest/actions/__meta__.json | 2 +- test/runTest/actions/candlestick-case.json | 2 +- 5 files changed, 84 insertions(+), 25 deletions(-) diff --git a/src/chart/candlestick/CandlestickView.ts b/src/chart/candlestick/CandlestickView.ts index 3d05e81c70..728291424c 100644 --- a/src/chart/candlestick/CandlestickView.ts +++ b/src/chart/candlestick/CandlestickView.ts @@ -20,7 +20,7 @@ import * as zrUtil from 'zrender/src/core/util'; import ChartView from '../../view/Chart'; import * as graphic from '../../util/graphic'; -import { setStatesStylesFromModel } from '../../util/states'; +import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states'; import Path, { PathProps } from 'zrender/src/graphic/Path'; import {createClipPath} from '../helper/createClipPathFromCoordSys'; import CandlestickSeriesModel, { CandlestickDataItemOption } from './CandlestickSeries'; @@ -33,6 +33,7 @@ import { CoordinateSystemClipArea } from '../../coord/CoordinateSystem'; import Model from '../../model/Model'; import { saveOldStyle } from '../../animation/basicTransition'; import Element from 'zrender/src/Element'; +import { getBorderColor, getColor } from './candlestickVisual'; const SKIP_PROPS = ['color', 'borderColor'] as const; @@ -294,6 +295,19 @@ function setBoxCommon(el: NormalBoxPath, data: SeriesData, dataIndex: number, is el.__simpleBox = isSimpleBox; setStatesStylesFromModel(el, itemModel); + + const sign = data.getItemLayout(dataIndex).sign; + zrUtil.each(el.states, (state, stateName) => { + const stateModel = itemModel.getModel(stateName as any); + const color = getColor(sign, stateModel); + const borderColor = getBorderColor(sign, stateModel) || color; + const stateStyle = state.style || (state.style = {}); + color && (stateStyle.fill = color); + borderColor && (stateStyle.stroke = borderColor); + }); + + const emphasisModel = itemModel.getModel('emphasis'); + toggleHoverEmphasis(el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled')); } function transInit(points: number[][], itemLayout: CandlestickItemLayout) { @@ -391,12 +405,9 @@ function createLarge( function setLargeStyle(sign: number, el: LargeBoxPath, seriesModel: CandlestickSeriesModel, data: SeriesData) { // TODO put in visual? - let borderColor = seriesModel.get(['itemStyle', sign > 0 ? 'borderColor' : 'borderColor0']) + const borderColor = getBorderColor(sign, seriesModel) // Use color for border color by default. - || seriesModel.get(['itemStyle', sign > 0 ? 'color' : 'color0']); - if (sign === 0) { - borderColor = seriesModel.get(['itemStyle', 'borderColorDoji']); - } + || getColor(sign, seriesModel); // Color must be excluded. // Because symbol provide setColor individually to set fill and stroke diff --git a/src/chart/candlestick/candlestickVisual.ts b/src/chart/candlestick/candlestickVisual.ts index 8882d63333..a665ea3b69 100644 --- a/src/chart/candlestick/candlestickVisual.ts +++ b/src/chart/candlestick/candlestickVisual.ts @@ -29,6 +29,21 @@ const dojiBorderColorQuery = ['itemStyle', 'borderColorDoji'] as const; const positiveColorQuery = ['itemStyle', 'color'] as const; const negativeColorQuery = ['itemStyle', 'color0'] as const; +export function getColor(sign: number, model: Model>) { + return model.get( + sign > 0 ? positiveColorQuery : negativeColorQuery + ); +} + +export function getBorderColor(sign: number, model: Model>) { + return model.get( + sign === 0 ? dojiBorderColorQuery + : sign > 0 + ? positiveBorderColorQuery + : negativeBorderColorQuery + ); +} + const candlestickVisual: StageHandler = { seriesType: 'candlestick', @@ -39,22 +54,6 @@ const candlestickVisual: StageHandler = { performRawSeries: true, reset: function (seriesModel: CandlestickSeriesModel, ecModel) { - - function getColor(sign: number, model: Model>) { - return model.get( - sign > 0 ? positiveColorQuery : negativeColorQuery - ); - } - - function getBorderColor(sign: number, model: Model>) { - return model.get( - sign === 0 ? dojiBorderColorQuery - : sign > 0 - ? positiveBorderColorQuery - : negativeBorderColorQuery - ); - } - // Only visible series has each data be visual encoded if (ecModel.isSeriesFiltered(seriesModel)) { return; diff --git a/test/candlestick-case.html b/test/candlestick-case.html index 2e5a33f747..6a408a644a 100644 --- a/test/candlestick-case.html +++ b/test/candlestick-case.html @@ -38,7 +38,7 @@
- +
@@ -363,6 +363,55 @@ }); + diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index 26eac6dd21..998f79077a 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -45,7 +45,7 @@ "calendar-heatmap": 1, "calendar-month": 1, "candlestick": 2, - "candlestick-case": 1, + "candlestick-case": 2, "candlestick-empty": 1, "candlestick-large": 4, "candlestick-large2": 1, diff --git a/test/runTest/actions/candlestick-case.json b/test/runTest/actions/candlestick-case.json index bc02692b43..0b07b405ea 100644 --- a/test/runTest/actions/candlestick-case.json +++ b/test/runTest/actions/candlestick-case.json @@ -1 +1 @@ -[{"name":"Action 1","ops":[{"type":"mousedown","time":300,"x":50,"y":77},{"type":"mouseup","time":423,"x":50,"y":77},{"time":424,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1626405373145}] \ No newline at end of file +[{"name":"Action 1","ops":[{"type":"mousedown","time":300,"x":50,"y":77},{"type":"mouseup","time":423,"x":50,"y":77},{"time":424,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1626405373145},{"name":"Action 2","ops":[{"type":"mousemove","time":303,"x":145,"y":215},{"type":"mousemove","time":505,"x":169,"y":336},{"type":"mousemove","time":722,"x":170,"y":369},{"type":"screenshot","time":1492},{"type":"mousemove","time":1769,"x":199,"y":364},{"type":"mousemove","time":1969,"x":287,"y":329},{"type":"mousemove","time":2172,"x":315,"y":329},{"type":"screenshot","time":2995},{"type":"mousemove","time":3319,"x":318,"y":329},{"type":"mousemove","time":3523,"x":446,"y":340},{"type":"mousemove","time":3742,"x":462,"y":343},{"type":"screenshot","time":4427},{"type":"mousemove","time":4885,"x":462,"y":344},{"type":"mousemove","time":5085,"x":639,"y":376},{"type":"mousemove","time":5290,"x":638,"y":381},{"type":"screenshot","time":6027}],"scrollY":357,"scrollX":0,"timestamp":1719893340178}] \ No newline at end of file From e4061f69e6eb38cccf0ca5d1c99fb48414e871df Mon Sep 17 00:00:00 2001 From: plainheart Date: Tue, 2 Jul 2024 12:57:03 +0800 Subject: [PATCH 2/3] fix(candlestick): disable emphasis state by default for forward compatibility --- src/chart/candlestick/CandlestickSeries.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/chart/candlestick/CandlestickSeries.ts b/src/chart/candlestick/CandlestickSeries.ts index 019e1c55f4..141fbf5723 100644 --- a/src/chart/candlestick/CandlestickSeries.ts +++ b/src/chart/candlestick/CandlestickSeries.ts @@ -124,7 +124,8 @@ class CandlestickSeriesModel extends SeriesModel { }, emphasis: { - scale: true, + // disable emphasis state by default for forward compatibility + disabled: true, itemStyle: { borderWidth: 2 } From 89a15af59084e1ada5bb984154674e2d6704d6ec Mon Sep 17 00:00:00 2001 From: Zhongxiang Wang Date: Mon, 15 Jul 2024 20:28:40 +0800 Subject: [PATCH 3/3] fix(candelstick): still enable emphasis state by default --- src/chart/candlestick/CandlestickSeries.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/chart/candlestick/CandlestickSeries.ts b/src/chart/candlestick/CandlestickSeries.ts index 141fbf5723..f152fce2cf 100644 --- a/src/chart/candlestick/CandlestickSeries.ts +++ b/src/chart/candlestick/CandlestickSeries.ts @@ -124,8 +124,6 @@ class CandlestickSeriesModel extends SeriesModel { }, emphasis: { - // disable emphasis state by default for forward compatibility - disabled: true, itemStyle: { borderWidth: 2 }