fix: fix color of outlier in boxPlot

docs/assets/option/en/mark/box-plot.md

@@ -1,29 +1,111 @@
 {{ target: mark-box-plot }}
 
-<!-- IBoxPlotSeriesSpec -->
+<!-- IBoxPlotMarkSpec -->
+
+#${prefix} shaftShape(string) = 'line'
+The rendering shape of the box plot, controlling its visual presentation
+
+Optional values:
+
+- `'line'` - Standard line form with rectangular box and line whiskers
+- `'bar'` - Bar form using rectangles to represent data ranges
+- `'filled-line'` - Filled line form
+
+#${prefix} boxWidth(number|string)
+The width of the box (for vertical box plot) or height (for horizontal box plot)
+
+Supports numbers or percentage strings. Adaptive to group width when empty.
+
+Default: `30`
+
+#${prefix} boxHeight(number|string)
+The height of the box (for vertical box plot) or width (for horizontal box plot)
+
+Supports numbers or percentage strings.
+
+#${prefix} shaftWidth(number|string)
+The width of whisker caps (for vertical box plot) or height (for horizontal box plot)
+
+Supports numbers or percentage strings. Adaptive when empty. Only effective when `shaftShape='line'` or `'filled-line'`.
+
+Default: `20`
+
+#${prefix} ruleWidth(number|string)
+The width of whisker cap lines (for vertical box plot) or height (for horizontal box plot)
+
+Only effective when `shaftShape='line'` or `'filled-line'`.
+
+#${prefix} ruleHeight(number|string)
+The height of whisker cap lines (for vertical box plot) or width (for horizontal box plot)
+
+Only effective when `shaftShape='line'` or `'filled-line'`.
+
+#${prefix} minMaxWidth(number|string)
+The following configurations only take effect when `shaftShape='bar'`.
+The width of the min-max rectangle (for vertical box plot) or height (for horizontal box plot)
+
+#${prefix} minMaxHeight(number|string)
+The height of the min-max rectangle (for vertical box plot) or width (for horizontal box plot)
+
+#${prefix} q1q3Width(number|string)
+The width of the Q1-Q3 quartile rectangle (for vertical box plot) or height (for horizontal box plot)
+
+#${prefix} q1q3Height(number|string)
+The height of the Q1-Q3 quartile rectangle (for vertical box plot) or width (for horizontal box plot)
 
 #${prefix} lineWidth(number) = 2
-Box plot stroke thickness
+The stroke width of the box plot
 
-#${prefix} boxWidth(number)
-Box plot box width, adaptive if empty
+Affects all line widths in `shaftShape='line'` or `'filled-line'` mode.
+No stroke is displayed in `shaftShape='bar'` mode.
 
-#${prefix} shaftWidth(number)
-Box plot maximum-minimum value width, adaptive if empty
+#${prefix} stroke(string)
+The stroke color of the box plot
 
-#${prefix} shaftShape(string) = 'line'
-Box plot center axis shape connecting maximum and minimum values
+#${prefix} boxStroke(string)
+The stroke color of the box, can be set separately to distinguish from other parts
 
-Optional values:
+{{ use: common-version(version: '2.0.11') }}
 
-- `line` Linear
-- `bar` Bar
+#${prefix} medianStroke(string)
+The stroke color of the median line, can be set separately to highlight the median
+
+{{ use: common-version(version: '2.0.11') }}
 
 #${prefix} boxFill(string)
-Box plot box fill color, no fill if empty
+The fill color of the box, no fill if empty
 
-#${prefix} stroke(string)
-Box plot stroke color, effective only when shaftShape='line'
+#${prefix} minMaxFillOpacity(number)
+The fill opacity of the min-max rectangle
+
+Only effective when `shaftShape='bar'`.
+
+#${prefix} boxCornerRadius(number)
+The corner radius of the box, rounded corners will be displayed when set
+
+{{ use: common-version(version: '2.0.11') }}
+
+#${prefix} min(Function)
+Data mapping function for minimum value
+
+Type: `(datum: Datum) => number`
+
+#${prefix} q1(Function)
+Data mapping function for first quartile (Q1, 25th percentile)
+
+Type: `(datum: Datum) => number`
+
+#${prefix} median(Function)
+Data mapping function for median (Q2, 50th percentile)
+
+Type: `(datum: Datum) => number`
+
+#${prefix} q3(Function)
+Data mapping function for third quartile (Q3, 75th percentile)
+
+Type: `(datum: Datum) => number`
+
+#${prefix} max(Function)
+Data mapping function for maximum value
 
-#${prefix} shaftFillOpacity(number) = 0.5
-Box plot center axis line opacity connecting maximum and minimum values, effective only when shaftType=bar
+Type: `(datum: Datum) => number`

docs/assets/option/zh/mark/box-plot.md

@@ -1,29 +1,111 @@
 {{ target: mark-box-plot }}
 
-<!-- IBoxPlotSeriesSpec -->
+<!-- IBoxPlotMarkSpec -->
+
+#${prefix} shaftShape(string) = 'line'
+箱线图的绘制形状，控制箱线图的视觉呈现方式
+
+可选值：
+
+- `'line'` - 标准线条形式，箱体为矩形，须线为线条
+- `'bar'` - 柱状形式，使用矩形表示数据范围
+- `'filled-line'` - 填充线条形式
+
+#${prefix} boxWidth(number|string)
+箱体的宽度（垂直箱线图）或高度（水平箱线图）
+
+支持数字或百分比字符串。为空时自适应分组宽度。
+
+默认值：`30`
+
+#${prefix} boxHeight(number|string)
+箱体的高度（垂直箱线图）或宽度（水平箱线图）
+
+支持数字或百分比字符串。
+
+#${prefix} shaftWidth(number|string)
+须线端点的宽度（垂直箱线图）或高度（水平箱线图）
+
+支持数字或百分比字符串。为空时自适应。仅在 `shaftShape='line'` 或 `'filled-line'` 时生效。
+
+默认值：`20`
+
+#${prefix} ruleWidth(number|string)
+须线端点横线的宽度（垂直箱线图）或高度（水平箱线图）
+
+仅在 `shaftShape='line'` 或 `'filled-line'` 时生效。
+
+#${prefix} ruleHeight(number|string)
+须线端点横线的高度（垂直箱线图）或宽度（水平箱线图）
+
+仅在 `shaftShape='line'` 或 `'filled-line'` 时生效。
+
+#${prefix} minMaxWidth(number|string)
+以下配置仅在 `shaftShape='bar'` 时生效。
+最小-最大值矩形的宽度（垂直箱线图）或高度（水平箱线图）
+
+#${prefix} minMaxHeight(number|string)
+最小-最大值矩形的高度（垂直箱线图）或宽度（水平箱线图）
+
+#${prefix} q1q3Width(number|string)
+Q1-Q3 四分位数矩形的宽度（垂直箱线图）或高度（水平箱线图）
+
+#${prefix} q1q3Height(number|string)
+Q1-Q3 四分位数矩形的高度（垂直箱线图）或宽度（水平箱线图）
 
 #${prefix} lineWidth(number) = 2
-箱型图箱体描边粗细
+箱线图的描边宽度
 
-#${prefix} boxWidth(number)
-箱型图箱体宽度，为空则自适应
+在 `shaftShape='line'` 或 `'filled-line'` 模式下影响所有线条的宽度。
+在 `shaftShape='bar'` 模式下不显示描边。
 
-#${prefix} shaftWidth(number)
-箱型图最大最小值宽度，为空则自适应
+#${prefix} stroke(string)
+箱线图的描边颜色
 
-#${prefix} shaftShape(string) = 'line'
-箱型图连接最大最小值的中轴线形状
+#${prefix} boxStroke(string)
+箱体的描边颜色，可单独设置以区别于其他部分
 
-可选值：
+{{ use: common-version(version: '2.0.11') }}
 
-- `line` 线形
-- `bar` 条形
+#${prefix} medianStroke(string)
+中位数线的描边颜色，可单独设置以突出显示中位数
+
+{{ use: common-version(version: '2.0.11') }}
 
 #${prefix} boxFill(string)
-箱型图箱体填充颜色，为空则不填充
+箱体的填充颜色，为空则不填充
 
-#${prefix} stroke(string)
-箱型图描边颜色，仅当 shaftShape='line'时生效
+#${prefix} minMaxFillOpacity(number)
+最小-最大值矩形的填充透明度
+
+仅在 `shaftShape='bar'` 模式下生效。
+
+#${prefix} boxCornerRadius(number)
+箱体的圆角半径，设置后箱体四角将显示为圆角
+
+{{ use: common-version(version: '2.0.11') }}
+
+#${prefix} min(Function)
+最小值的数据映射函数
+
+类型：`(datum: Datum) => number`
+
+#${prefix} q1(Function)
+第一四分位数（Q1，25%分位数）的数据映射函数
+
+类型：`(datum: Datum) => number`
+
+#${prefix} median(Function)
+中位数（Q2，50%分位数）的数据映射函数
+
+类型：`(datum: Datum) => number`
+
+#${prefix} q3(Function)
+第三四分位数（Q3，75%分位数）的数据映射函数
+
+类型：`(datum: Datum) => number`
+
+#${prefix} max(Function)
+最大值的数据映射函数
 
-#${prefix} shaftFillOpacity(number) = 0.5
-箱型图连接最大最小值的中轴线透明度，仅当 shaftType=bar 时生效
+类型：`(datum: Datum) => number`

packages/vchart/src/data/transforms/box-plot.ts

@@ -1,10 +1,11 @@
-import { isArray } from '@visactor/vutils';
+import { isArray, isValid } from '@visactor/vutils';
 import { BOX_PLOT_OUTLIER_VALUE_FIELD } from '../../constant/box-plot';
 import type { Datum } from '../../typings';
 
 export interface IBoxPlotOutlierOpt {
   dimensionField: string[];
   outliersField: string;
+  seriesField?: string;
 }
 /**
  * 将箱型图outlier数组展平
@@ -14,8 +15,9 @@ export interface IBoxPlotOutlierOpt {
  */
 export const foldOutlierData = (data: Array<DataView>, op: IBoxPlotOutlierOpt) => {
   const result: any = [];
-  const { outliersField, dimensionField } = op;
+  const { outliersField, dimensionField, seriesField } = op;
   const latestData = (data[0] as any).latestData || [];
+
   latestData.forEach((d: Datum) => {
     let outlierValues = d[outliersField];
     if (!isArray(outlierValues)) {
@@ -27,8 +29,13 @@ export const foldOutlierData = (data: Array<DataView>, op: IBoxPlotOutlierOpt) =
           [BOX_PLOT_OUTLIER_VALUE_FIELD]: v
         };
         dimensionField.forEach(field => {
-          resData[field] = d[field];
+          (resData as any)[field] = d[field];
         });
+
+        if (isValid(seriesField)) {
+          (resData as any)[seriesField] = d[seriesField];
+        }
+
         return resData;
       })
     );

packages/vchart/src/mark/box-plot.ts

@@ -171,7 +171,11 @@ export class BoxPlotMark
         median: { type: 'line', defaultAttributes: { x: 0, y: 0 } }
       };
       this._positionChannels = BOX_PLOT_CHANNELS;
-      this._channelEncoder = null;
+      this._channelEncoder = {
+        boxStroke: (val: string) => ({ box: { stroke: val } }),
+        medianStroke: (val: string) => ({ median: { stroke: val } }),
+        boxCornerRadius: (val: number) => ({ box: { cornerRadius: val } })
+      };
       this._positionEncoder = (glyphAttrs: any, datum: Datum, g: IGlyph) => {
         const {
           x = g.attribute.x,

packages/vchart/src/series/box-plot/box-plot.ts

@@ -188,7 +188,8 @@ export class BoxPlotSeries<T extends IBoxPlotSeriesSpec = IBoxPlotSeriesSpec> ex
       this.setMarkStyle(
         outlierMark,
         {
-          fill: this._outliersStyle?.fill ?? this.getColorAttribute(),
+          fill: this._outliersStyle?.fill ?? this._boxFillColor ?? this.getColorAttribute(),
+          stroke: this.getColorAttribute(),
           size: isNumber(this._outliersStyle?.size) ? this._outliersStyle.size : DEFAULT_OUTLIER_SIZE
         },
         STATE_VALUE_ENUM.STATE_NORMAL,
@@ -307,7 +308,8 @@ export class BoxPlotSeries<T extends IBoxPlotSeriesSpec = IBoxPlotSeriesSpec> ex
       type: 'foldOutlierData',
       options: {
         dimensionField: this._direction === Direction.horizontal ? this._fieldY : this._fieldX,
-        outliersField: this._outliersField
+        outliersField: this._outliersField,
+        seriesField: this._seriesField
       }
     });