From b4e1c5828f18cb560fbeb9980ea6621db9c66931 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Wed, 12 Jul 2023 17:28:21 +0800 Subject: [PATCH 1/4] fix: change mark default stroke color to the series color --- ...173-mark-stroke-follow-series_2023-07-12-09-27.json | 10 ++++++++++ packages/vchart/src/series/base/base-series.ts | 6 ++---- 2 files changed, 12 insertions(+), 4 deletions(-) create mode 100644 common/changes/@visactor/vchart/fix-173-mark-stroke-follow-series_2023-07-12-09-27.json diff --git a/common/changes/@visactor/vchart/fix-173-mark-stroke-follow-series_2023-07-12-09-27.json b/common/changes/@visactor/vchart/fix-173-mark-stroke-follow-series_2023-07-12-09-27.json new file mode 100644 index 0000000000..e859c87ca0 --- /dev/null +++ b/common/changes/@visactor/vchart/fix-173-mark-stroke-follow-series_2023-07-12-09-27.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "fix: change mark default stroke color to the series color", + "type": "patch" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file diff --git a/packages/vchart/src/series/base/base-series.ts b/packages/vchart/src/series/base/base-series.ts index 564d58b6eb..e9daf1d844 100644 --- a/packages/vchart/src/series/base/base-series.ts +++ b/packages/vchart/src/series/base/base-series.ts @@ -690,12 +690,10 @@ export abstract class BaseSeries extends BaseModel implem // 此时mark相关的统计数据收集完成 this._rawDataStatistics?.reRunAllTransform(); this.setSeriesField(this._spec.seriesField); - // set mark stroke color follow fill + // set mark stroke color follow series color // only set normal state in the level lower than level Series this.getMarks().forEach(m => { - if (m.stateStyle.normal?.fill?.style) { - m.setAttribute('stroke', m.stateStyle.normal.fill.style, 'normal', AttributeLevel.Chart); - } + m.setAttribute('stroke', this.getColorAttribute(), 'normal', AttributeLevel.Series); }); } From 6c79b457e3276e0787c97c7e485dfb5d33047e4c Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Thu, 13 Jul 2023 20:25:19 +0800 Subject: [PATCH 2/4] fix: check linewidth before set stroke --- packages/vchart/src/series/base/base-series.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/vchart/src/series/base/base-series.ts b/packages/vchart/src/series/base/base-series.ts index e9daf1d844..18c9cf1b26 100644 --- a/packages/vchart/src/series/base/base-series.ts +++ b/packages/vchart/src/series/base/base-series.ts @@ -693,7 +693,9 @@ export abstract class BaseSeries extends BaseModel implem // set mark stroke color follow series color // only set normal state in the level lower than level Series this.getMarks().forEach(m => { - m.setAttribute('stroke', this.getColorAttribute(), 'normal', AttributeLevel.Series); + if (m.stateStyle?.normal?.lineWidth) { + m.setAttribute('stroke', this.getColorAttribute(), 'normal', AttributeLevel.Series); + } }); } From cb22d1dea2ea40d1d6e33b10426af8ede29e14b0 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Mon, 17 Jul 2023 10:51:52 +0800 Subject: [PATCH 3/4] fix: general stroke might cover series stroke style --- .../vchart/src/component/legend/discrete/legend.ts | 4 ++-- packages/vchart/src/constant/index.ts | 11 ++++++----- packages/vchart/src/mark/path.ts | 1 + packages/vchart/src/mark/polygon/polygon.ts | 10 +++++++++- packages/vchart/src/series/base/base-series.ts | 2 +- 5 files changed, 19 insertions(+), 9 deletions(-) diff --git a/packages/vchart/src/component/legend/discrete/legend.ts b/packages/vchart/src/component/legend/discrete/legend.ts index 0376230321..ac8f5cf2a8 100644 --- a/packages/vchart/src/component/legend/discrete/legend.ts +++ b/packages/vchart/src/component/legend/discrete/legend.ts @@ -180,7 +180,7 @@ export class DiscreteLegend extends BaseLegend { private _getLegendItems() { const originData = (this._legendData.getLatestData() || []).map((datum: any) => { const fill = datum.style('fill'); - const stroke = datum.style('stroke'); + // const stroke = datum.style('stroke'); const symbolType = datum.style('symbolType'); const fillOpacity = datum.style('fillOpacity'); const strokeOpacity = datum.style('strokeOpacity'); @@ -195,7 +195,7 @@ export class DiscreteLegend extends BaseLegend { shape: { fill, symbolType: symbolType ?? datum.shapeType ?? 'circle', - stroke: fill === stroke ? null : stroke, + // stroke: fill === stroke ? null : stroke, fillOpacity: isValidNumber(fillOpacity) ? fillOpacity : 1, strokeOpacity: isValidNumber(strokeOpacity) ? strokeOpacity : 1, opacity: isValidNumber(opacity) ? opacity : 1, diff --git a/packages/vchart/src/constant/index.ts b/packages/vchart/src/constant/index.ts index 792df4f110..4809cfa305 100644 --- a/packages/vchart/src/constant/index.ts +++ b/packages/vchart/src/constant/index.ts @@ -14,11 +14,12 @@ export enum AttributeLevel { Default = 0, Theme = 1, Chart = 2, - Series = 3, - Mark = 4, - User_Chart = 5, - User_Series = 6, - User_Mark = 7, + Base_Series = 3, // general operation in base series + Series = 4, // specified operation in derived series + Mark = 5, + User_Chart = 6, + User_Series = 7, + User_Mark = 8, Built_In = 99 } diff --git a/packages/vchart/src/mark/path.ts b/packages/vchart/src/mark/path.ts index 055f32fb3a..ce8dde3eef 100644 --- a/packages/vchart/src/mark/path.ts +++ b/packages/vchart/src/mark/path.ts @@ -13,6 +13,7 @@ export class PathMark extends BaseMark implements IPathMark { protected _getDefaultStyle() { const defaultStyle: IMarkStyle = { ...super._getDefaultStyle(), + lineWidth: 0, path: '' }; return defaultStyle; diff --git a/packages/vchart/src/mark/polygon/polygon.ts b/packages/vchart/src/mark/polygon/polygon.ts index f7e6e6d2ad..53ed45f90b 100644 --- a/packages/vchart/src/mark/polygon/polygon.ts +++ b/packages/vchart/src/mark/polygon/polygon.ts @@ -1,7 +1,7 @@ /* eslint-disable no-duplicate-imports */ import type { IPolygonMarkSpec } from '../../typings/visual'; import { BasePolygonMark } from './base-polygon'; -import type { IMarkRaw } from '../interface'; +import type { IMarkRaw, IMarkStyle } from '../interface'; import { MarkTypeEnum } from '../interface'; export type IPolygonMark = IMarkRaw; @@ -9,4 +9,12 @@ export type IPolygonMark = IMarkRaw; export class PolygonMark extends BasePolygonMark implements IPolygonMark { static readonly type = MarkTypeEnum.polygon; readonly type = PolygonMark.type; + + protected _getDefaultStyle() { + const defaultStyle: IMarkStyle = { + ...super._getDefaultStyle(), + lineWidth: 0 + }; + return defaultStyle; + } } diff --git a/packages/vchart/src/series/base/base-series.ts b/packages/vchart/src/series/base/base-series.ts index 18c9cf1b26..d4bd812c61 100644 --- a/packages/vchart/src/series/base/base-series.ts +++ b/packages/vchart/src/series/base/base-series.ts @@ -694,7 +694,7 @@ export abstract class BaseSeries extends BaseModel implem // only set normal state in the level lower than level Series this.getMarks().forEach(m => { if (m.stateStyle?.normal?.lineWidth) { - m.setAttribute('stroke', this.getColorAttribute(), 'normal', AttributeLevel.Series); + m.setAttribute('stroke', this.getColorAttribute(), 'normal', AttributeLevel.Base_Series); } }); } From 6f9d8ea45303444d926bc7fe1f56eacc5fbb6ab3 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Mon, 17 Jul 2023 12:37:26 +0800 Subject: [PATCH 4/4] fix: legend stroke without linewidth --- packages/vchart/src/component/legend/discrete/legend.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/vchart/src/component/legend/discrete/legend.ts b/packages/vchart/src/component/legend/discrete/legend.ts index ac8f5cf2a8..37cf732f16 100644 --- a/packages/vchart/src/component/legend/discrete/legend.ts +++ b/packages/vchart/src/component/legend/discrete/legend.ts @@ -180,7 +180,8 @@ export class DiscreteLegend extends BaseLegend { private _getLegendItems() { const originData = (this._legendData.getLatestData() || []).map((datum: any) => { const fill = datum.style('fill'); - // const stroke = datum.style('stroke'); + const stroke = datum.style('stroke'); + const lineWidth = datum.style('lineWidth'); const symbolType = datum.style('symbolType'); const fillOpacity = datum.style('fillOpacity'); const strokeOpacity = datum.style('strokeOpacity'); @@ -195,7 +196,7 @@ export class DiscreteLegend extends BaseLegend { shape: { fill, symbolType: symbolType ?? datum.shapeType ?? 'circle', - // stroke: fill === stroke ? null : stroke, + stroke: lineWidth === 0 || fill === stroke ? null : stroke, fillOpacity: isValidNumber(fillOpacity) ? fillOpacity : 1, strokeOpacity: isValidNumber(strokeOpacity) ? strokeOpacity : 1, opacity: isValidNumber(opacity) ? opacity : 1,