issue-2748: treemap color function apply rawFields (#2750)

* feat: treemap color function apply rawFields

* feat: 增加 treemap.rawFields 文档

Co-authored-by: aiyin.lzy <[email protected]>

Author: liuzhenying

__tests__/unit/plots/treemap/color-spec.ts

@@ -99,6 +99,19 @@ describe('treemap color', () => {
     expect(elements[5].model.color).toBe('#0f0');
   });
 
+  it('color rawFields', () => {
+    treemapPlot.update({
+      rawFields: ['value', 'ext'],
+      color: (v) => {
+        return v.ext ? '#f00' : '#0f0';
+      },
+    });
+
+    const elements = treemapPlot.chart.geometries[0].elements;
+    expect(elements[1].model.color).toBe('#f00');
+    expect(elements[5].model.color).toBe('#f00');
+  });
+
   it('multi nest treemap', () => {
     treemapPlot.update({
       data: data,

docs/api/plots/treemap.en.md

@@ -48,6 +48,11 @@ Among them, you can get the path parameter in the formatter function of label (t
 
 Color mapping field name.
 
+#### rawFields
+
+<description>**optional** _string[]_</description>
+
+Extra original fields. Once configured, you can retrieve additional raw data in the datum parameter of callback functions such as color.
 ### Geometry Style
 
 `markdown:docs/common/color.en.md`

docs/api/plots/treemap.zh.md

@@ -48,6 +48,12 @@ G2 plot 会根据 data 生成以下数据结构：
 
 颜色映射字段名。
 
+#### rawFields
+
+<description>**optional** _string[]_</description>
+
+额外的原始字段。配置之后，可以在 color 等回调函数的 datum 参数中，获取到更多额外的原始数据。
+
 ### 图形样式
 
 `markdown:docs/common/color.zh.md`

src/plots/treemap/adaptor.ts

@@ -18,6 +18,7 @@ function defaultOptions(params: Params<TreemapOptions>): Params<TreemapOptions>
   return deepAssign(
     {
       options: {
+        rawFields: ['value'],
         tooltip: {
           fields: ['name', 'value', colorField, 'path'],
           formatter: (data) => {
@@ -39,7 +40,7 @@ function defaultOptions(params: Params<TreemapOptions>): Params<TreemapOptions>
  */
 function geometry(params: Params<TreemapOptions>): Params<TreemapOptions> {
   const { chart, options } = params;
-  const { color, colorField, rectStyle, hierarchyConfig } = options;
+  const { color, colorField, rectStyle, hierarchyConfig, rawFields } = options;
 
   const data = transformData({
     data: options.data,
@@ -57,7 +58,7 @@ function geometry(params: Params<TreemapOptions>): Params<TreemapOptions> {
         xField: 'x',
         yField: 'y',
         seriesField: colorField,
-        rawFields: ['value'],
+        rawFields: rawFields,
         polygon: {
           color,
           style: rectStyle,

src/plots/treemap/types.ts

@@ -11,7 +11,10 @@ export interface TreemapOptions extends Omit<Options, 'data'> {
   readonly rectStyle?: StyleAttr;
   /** 层级布局配置 */
   readonly hierarchyConfig?: Omit<HierarchyOption, 'as' | 'type' | 'field'>;
-
+  /**
+   * 附加的 源字段
+   */
+  readonly rawFields?: string[];
   // 矩阵树图 内置一些交互
   /** 下钻交互相关配置 */
   readonly drilldown?: DrillDownCfg;