VisActor · kkxxkk2019 · Jul 24, 2023 · Jul 24, 2023 · Jul 24, 2023 · Jul 24, 2023
diff --git a/common/changes/@visactor/vchart/feat-component-state-style-enhancement_2023-07-24-05-45.json b/common/changes/@visactor/vchart/feat-component-state-style-enhancement_2023-07-24-05-45.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "feat: axis's label, tick's state style supports function",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}
diff --git a/common/changes/@visactor/vchart/feat-component-state-style-enhancement_2023-07-24-05-59.json b/common/changes/@visactor/vchart/feat-component-state-style-enhancement_2023-07-24-05-59.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "feat: discrete legend's item's style and state style supports function",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}
diff --git a/packages/vchart/src/component/axis/base-axis.ts b/packages/vchart/src/component/axis/base-axis.ts
@@ -20,7 +20,7 @@ import { animationConfig } from '../../animation/utils';
 import { DEFAULT_MARK_ANIMATION } from '../../animation/config';
 import { degreeToRadian, type LooseFunction } from '@visactor/vutils';
 import { DEFAULT_TITLE_STYLE, transformAxisLineStyle } from './utils';
-import { transformStateStyle, transformToGraphic } from '../../util/style';
+import { transformAxisLabelStateStyle, transformStateStyle, transformToGraphic } from '../../util/style';
 import type { ITransformOptions } from '@visactor/vdataset';
 
 export abstract class AxisComponent extends BaseComponent implements IAxis {
@@ -341,9 +341,8 @@ export abstract class AxisComponent extends BaseComponent implements IAxis {
         space: spec.label.space,
         inside: spec.label.inside,
         style: isFunction(spec.label.style)
-          ? (datum: Datum, index: number) => {
-              const style = this._preprocessSpec(spec.label.style(datum.rawValue, index, datum));
-
+          ? (datum: Datum, index: number, data: Datum[], layer?: number) => {
+              const style = this._preprocessSpec(spec.label.style(datum.rawValue, index, datum, data, layer));
               return transformToGraphic(this._preprocessSpec(merge({}, this._theme.label?.style, style)));
             }
           : transformToGraphic(spec.label.style),
@@ -352,7 +351,7 @@ export abstract class AxisComponent extends BaseComponent implements IAxis {
               return spec.label.formatMethod(datum.rawValue, datum);
             }
           : null,
-        state: transformStateStyle(spec.label.state),
+        state: transformAxisLabelStateStyle(spec.label.state),
         autoRotate: !!spec.label.autoRotate,
         autoHide: !!spec.label.autoHide,
         autoLimit: !!spec.label.autoLimit,
@@ -368,9 +367,8 @@ export abstract class AxisComponent extends BaseComponent implements IAxis {
         inside: spec.tick.inside,
         alignWithLabel: spec.tick.alignWithLabel,
         style: isFunction(spec.tick.style)
-          ? (datum: Datum, index: number) => {
-              const style = this._preprocessSpec(spec.tick.style(datum.rawValue, index, datum));
-
+          ? (value: number, index: number, datum: Datum, data: Datum[]) => {
+              const style = this._preprocessSpec(spec.tick.style(value, index, datum, data));
               return transformToGraphic(this._preprocessSpec(merge({}, this._theme.tick?.style, style)));
             }
           : transformToGraphic(spec.tick.style),
@@ -381,7 +379,12 @@ export abstract class AxisComponent extends BaseComponent implements IAxis {
         length: spec.subTick.tickSize,
         inside: spec.subTick.inside,
         count: spec.subTick.tickCount,
-        style: transformToGraphic(spec.subTick.style),
+        style: isFunction(spec.subTick.style)
+          ? (value: number, index: number, datum: Datum, data: Datum[]) => {
+              const style = spec.subTick.style(value, index, datum, data);
+              return transformToGraphic(merge({}, this._theme.subTick?.style, style));
+            }
+          : transformToGraphic(spec.subTick.style),
         state: transformStateStyle(spec.subTick.state)
       },
       grid: {
@@ -392,7 +395,6 @@ export abstract class AxisComponent extends BaseComponent implements IAxis {
         style: isFunction(spec.grid.style)
           ? (datum: Datum, index: number) => {
               const style = spec.grid.style(datum.datum?.rawValue, index, datum.datum);
-
               return transformToGraphic(this._preprocessSpec(merge({}, this._theme.grid?.style, style)));
             }
           : transformToGraphic(spec.grid.style)

diff --git a/packages/vchart/src/component/axis/interface.ts b/packages/vchart/src/component/axis/interface.ts
@@ -264,7 +264,7 @@ export type ILabel = IAxisItem<ITextMarkSpec> & {
    * @param datum 图形数据
    * @returns 格式化后的文本
    */
-  formatMethod?: (text: string | string[], datum?: any) => string | string[];
+  formatMethod?: (text: string | string[], datum?: Datum) => string | string[];
   /** 标签同 tick 之间的间距 */
   space?: number;
   /**
@@ -359,7 +359,7 @@ export type ITitle = IAxisItem<ITextMarkSpec> & {
   state?: AxisItemStateStyle<Partial<ITextMarkSpec>>;
 };
 
-export type StyleCallback<T> = (value: any, index: number, datum: Datum) => T;
+export type StyleCallback<T> = (value: any, index: number, datum: Datum, data: Datum[]) => T;
 export type AxisType = 'linear' | 'ordinal' | 'band' | 'point' | 'time' | 'log';
 
 export interface IAxisCommonTheme {
@@ -376,5 +376,5 @@ export interface IAxisCommonTheme {
   /** 轴刻度线配置 */
   tick?: ITick;
   /** 轴刻度线配置 */
-  subTick?: ITick;
+  subTick?: ISubTick;
 }
diff --git a/packages/vchart/src/component/axis/utils.ts b/packages/vchart/src/component/axis/utils.ts
@@ -19,9 +19,9 @@ export const DEFAULT_TITLE_STYLE = {
 };
 
 export function transformAxisLineStyle(lineCfg: any) {
-  transformComponentStyle(lineCfg);
-  transformComponentStyle(lineCfg.startSymbol);
-  transformComponentStyle(lineCfg.endSymbol);
+  lineCfg = transformComponentStyle(lineCfg);
+  lineCfg.startSymbol = transformComponentStyle(lineCfg.startSymbol);
+  lineCfg.endSymbol = transformComponentStyle(lineCfg.endSymbol);
 
   return lineCfg;
 }

diff --git a/packages/vchart/src/component/legend/discrete/interface.ts b/packages/vchart/src/component/legend/discrete/interface.ts
@@ -4,7 +4,9 @@ import type { ILegendCommonSpec, NoVisibleMarkStyle } from '../interface';
 import type { StringOrNumber } from '../../../typings';
 
 export type formatterCallback = (text: StringOrNumber, item: LegendItemDatum, index: number) => any;
-
+export type LegendItemStyleValue<T> =
+  | T
+  | ((item: LegendItemDatum, isSelected: boolean, index: number, allItems: LegendItemDatum[]) => T);
 export type LegendItemStyle<T> = {
   /**
    * 样式配置
@@ -42,7 +44,7 @@ export type IItem = {
      * 是否展示图例项背景
      */
     visible?: boolean;
-  } & LegendItemStyle<NoVisibleMarkStyle<IRectMarkSpec>>;
+  } & LegendItemStyle<LegendItemStyleValue<NoVisibleMarkStyle<IRectMarkSpec>>>;
   /**
    * 图例项的 shape 图标的配置
    */
@@ -53,7 +55,7 @@ export type IItem = {
     visible?: boolean;
     /** shape 同后面 label 的间距 */
     space?: number;
-  } & LegendItemStyle<Partial<NoVisibleMarkStyle<ISymbolMarkSpec>>>;
+  } & LegendItemStyle<LegendItemStyleValue<Partial<NoVisibleMarkStyle<ISymbolMarkSpec>>>>;
   /**
    * 图例项的 label 文本配置
    */
@@ -66,7 +68,7 @@ export type IItem = {
      * 格式化文本函数
      */
     formatMethod?: formatterCallback;
-  } & LegendItemStyle<NoVisibleMarkStyle<ITextMarkSpec>>;
+  } & LegendItemStyle<LegendItemStyleValue<NoVisibleMarkStyle<ITextMarkSpec>>>;
   /**
    * 图例项 value 配置
    */
@@ -82,7 +84,7 @@ export type IItem = {
      * 格式化文本函数
      */
     formatMethod?: formatterCallback;
-  } & LegendItemStyle<NoVisibleMarkStyle<ITextMarkSpec>>;
+  } & LegendItemStyle<LegendItemStyleValue<NoVisibleMarkStyle<ITextMarkSpec>>>;
   /**
    * 聚焦按钮配置
    */

diff --git a/packages/vchart/src/component/legend/discrete/util.ts b/packages/vchart/src/component/legend/discrete/util.ts
@@ -42,10 +42,10 @@ export function getLegendAttributes(spec: IDiscreteLegendSpec, rect: ILayoutRect
   if (!isEmpty(item.focusIconStyle)) {
     transformToGraphic(item.focusIconStyle);
   }
-  transformComponentStyle(item.shape);
-  transformComponentStyle(item.label);
-  transformComponentStyle(item.value);
-  transformComponentStyle(item.background);
+  item.shape = transformComponentStyle(item.shape);
+  item.label = transformComponentStyle(item.label);
+  item.value = transformComponentStyle(item.value);
+  item.background = transformComponentStyle(item.background);
 
   if (isPercent(item.maxWidth)) {
     item.maxWidth = (Number(item.maxWidth.substring(0, item.maxWidth.length - 1)) * rect.width) / 100;

diff --git a/packages/vchart/src/util/style.ts b/packages/vchart/src/util/style.ts
@@ -1,4 +1,6 @@
-import { degreeToRadian, isEmpty, isValid, isValidNumber } from '@visactor/vutils';
+import { degreeToRadian, isEmpty, isFunction } from '@visactor/vutils';
+import type { Datum } from '../typings';
+import type { LegendItemDatum } from '@visactor/vrender-components';
 
 /**
  * 针对一些可以配置状态样式的属性的转换函数，结构如下：
@@ -7,32 +9,66 @@ import { degreeToRadian, isEmpty, isValid, isValidNumber } from '@visactor/vutil
  * @returns
  */
 export function transformComponentStyle(cfg: any = {}) {
-  if (!isEmpty(cfg.style)) {
-    cfg.style = transformToGraphic(cfg.style);
+  const newConfig = {
+    ...cfg
+  };
+
+  if (isFunction(cfg.style)) {
+    newConfig.style = (item: LegendItemDatum, isSelected: boolean, index: number, allItems: LegendItemDatum[]) =>
+      transformToGraphic(cfg.style(item, isSelected, index, allItems));
+  } else if (!isEmpty(cfg.style)) {
+    newConfig.style = transformToGraphic(cfg.style);
   }
 
   if (!isEmpty(cfg.state)) {
+    const newStateStyle = {};
     Object.keys(cfg.state).forEach(key => {
-      if (!isEmpty(cfg.state[key])) {
-        cfg.state[key] = transformToGraphic(cfg.state[key]);
+      if (isFunction(cfg.state[key])) {
+        newStateStyle[key] = (item: LegendItemDatum, isSelected: boolean, index: number, allItems: LegendItemDatum[]) =>
+          transformToGraphic(cfg.state[key](item, isSelected, index, allItems));
+      } else if (!isEmpty(cfg.state[key])) {
+        newStateStyle[key] = transformToGraphic(cfg.state[key]);
       }
     });
+    newConfig.state = newStateStyle;
   }
 
-  return cfg;
+  return newConfig;
 }
 
 export function transformStateStyle(stateStyle: any) {
   if (isEmpty(stateStyle)) {
     return null;
   }
+  const newStateStyle = {};
+  Object.keys(stateStyle).forEach(key => {
+    if (isFunction(stateStyle[key])) {
+      newStateStyle[key] = (value: any, index: number, datum: Datum, data: Datum[]) =>
+        transformToGraphic(stateStyle[key](value, index, datum, data));
+    } else if (!isEmpty(stateStyle[key])) {
+      newStateStyle[key] = transformToGraphic(stateStyle[key]);
+    }
+  });
+
+  return newStateStyle;
+}
+
+export function transformAxisLabelStateStyle(stateStyle: any) {
+  if (isEmpty(stateStyle)) {
+    return null;
+  }
+  const newStateStyle = {};
   Object.keys(stateStyle).forEach(key => {
-    if (!isEmpty(stateStyle[key])) {
-      stateStyle[key] = transformToGraphic(stateStyle[key]);
+    if (isFunction(stateStyle[key])) {
+      newStateStyle[key] = (datum: Datum, index: number, data: Datum[], layer?: number) => {
+        return transformToGraphic(stateStyle[key](datum.rawValue, index, datum, data, layer));
+      };
+    } else if (!isEmpty(stateStyle[key])) {
+      newStateStyle[key] = transformToGraphic(stateStyle[key]);
     }
   });
 
-  return stateStyle;
+  return newStateStyle;
 }
 
 export function transformToGraphic(style: any) {