feat(state-style): 若干图表支持 state 设置样式 & 增加文档 (#2334)

* feat(heatmap): 热力图支持 state 设置样式 * feat(state-style): 面积图、柱条形图、直方图支持state设置样式 & 增加若干state-style文档
antvis · Feb 19, 2021 · f45d02b · f45d02b
1 parent ea9a575
commit f45d02b
Show file tree

Hide file tree

Showing 26 changed files with 257 additions and 24 deletions.
diff --git a/__tests__/unit/plots/heatmap/state-spec.ts b/__tests__/unit/plots/heatmap/state-spec.ts
@@ -0,0 +1,71 @@
+import { Heatmap } from '../../../../src';
+import { semanticBasicHeatmapData } from '../../../data/basic-heatmap';
+import { createDiv } from '../../../utils/dom';
+
+describe('heatmap', () => {
+  const heatmap = new Heatmap(createDiv('basic heatmap'), {
+    width: 400,
+    height: 300,
+    data: semanticBasicHeatmapData,
+    xField: 'name',
+    yField: 'day',
+    colorField: 'sales',
+    interactions: [{ type: 'element-active' }],
+  });
+
+  heatmap.render();
+
+  it('set statesStyle', () => {
+    heatmap.update({
+      state: {
+        active: {
+          style: {
+            stroke: 'red',
+          },
+        },
+      },
+    });
+
+    heatmap.setState(
+      'active',
+      (d: any) => d.name === semanticBasicHeatmapData[0].name && d.day === semanticBasicHeatmapData[0].day
+    );
+
+    const shape = heatmap.chart.geometries[0].elements[0].shape;
+
+    expect(shape.attr('stroke')).toBe('red');
+  });
+
+  it('set statesStyle by theme', () => {
+    heatmap.update({
+      state: undefined,
+      shape: 'square',
+      theme: {
+        geometries: {
+          polygon: {
+            square: {
+              active: {
+                style: {
+                  stroke: 'yellow',
+                },
+              },
+            },
+          },
+        },
+      },
+    });
+
+    heatmap.setState(
+      'active',
+      (d: any) => d.name === semanticBasicHeatmapData[0].name && d.day === semanticBasicHeatmapData[0].day
+    );
+
+    const shape = heatmap.chart.geometries[0].elements[0].shape;
+
+    expect(shape.attr('stroke')).toBe('yellow');
+  });
+
+  afterAll(() => {
+    heatmap.destroy();
+  });
+});
diff --git a/docs/api/plots/area.en.md b/docs/api/plots/area.en.md
@@ -77,6 +77,12 @@ Point graphic style in the Area.
 
 `markdown:docs/common/color.en.md`
 
+#### state
+
+<description>**optional** _object_</description>
+
+`markdown:docs/common/state-style.en.md`
+
 ### Plot Components
 
 `markdown:docs/common/component.en.md`

diff --git a/docs/api/plots/area.zh.md b/docs/api/plots/area.zh.md
@@ -77,6 +77,12 @@ order: 1
 
 `markdown:docs/common/color.zh.md`
 
+#### state
+
+<description>**可选** _object_</description>
+
+`markdown:docs/common/state-style.zh.md`
+
 ### 图表组件
 
 `markdown:docs/common/component.zh.md`
diff --git a/docs/api/plots/bar.en.md b/docs/api/plots/bar.en.md
@@ -75,6 +75,12 @@ The ratio of bar width( Range:[0-1] ).
 
 The ratio of spacing between columns in groups( Range:[0-1] ), only for Grouped Bar.
 
+#### state
+
+<description>**optional** _object_</description>
+
+`markdown:docs/common/state-style.en.md`
+
 ### Plot Components
 
 `markdown:docs/common/component.en.md`

diff --git a/docs/api/plots/bar.zh.md b/docs/api/plots/bar.zh.md
@@ -75,6 +75,12 @@ order: 3
 
 分组中柱子之间的间距 [0-1]，仅对分组条形图适用。
 
+#### state
+
+<description>**可选** _object_</description>
+
+`markdown:docs/common/state-style.zh.md`
+
 ### 图表组件
 
 `markdown:docs/common/component.zh.md`

diff --git a/docs/api/plots/column.en.md b/docs/api/plots/column.en.md
@@ -75,6 +75,12 @@ Width ratio of column [0-1].
 
 The spacing between columns in a grouping [0-1] applies only to grouping columns.
 
+#### state
+
+<description>**optional** _object_</description>
+
+`markdown:docs/common/state-style.en.md`
+
 ### Plot Components
 
 `markdown:docs/common/component.en.md`

diff --git a/docs/api/plots/column.zh.md b/docs/api/plots/column.zh.md
@@ -77,6 +77,12 @@ order: 2
 
 分组中柱子之间的间距 [0-1]，仅对分组柱状图适用。
 
+#### state
+
+<description>**可选** _object_</description>
+
+`markdown:docs/common/state-style.zh.md`
+
 ### 图表组件
 
 `markdown:docs/common/component.zh.md`

diff --git a/docs/api/plots/heatmap.en.md b/docs/api/plots/heatmap.en.md
@@ -94,6 +94,12 @@ Default configuration:
 }
 ```
 
+#### state
+
+<description>**optional** _object_</description>
+
+`markdown:docs/common/state-style.en.md`
+
 ### Plot Components
 
 `markdown:docs/common/component.en.md`

diff --git a/docs/api/plots/heatmap.zh.md b/docs/api/plots/heatmap.zh.md
@@ -23,25 +23,25 @@ order: 23
 
 #### type
 
-<description>**optional** _polygon | density_ _default:_ `polygon`</description>
+<description>**可选** _polygon | density_ _default:_ `polygon`</description>
 
 密度热力图需要指定为 density。
 
 #### colorField
 
-<description>**optional** _string_</description>
+<description>**可选** _string_</description>
 
 颜色映射字段名。
 
 #### sizeField
 
-<description>**optional** _string_</description>
+<description>**可选** _string_</description>
 
 点大小映射对应的数据字段名。
 
 #### reflect
 
-<description>**optional** _x | y_</description>
+<description>**可选** _x | y_</description>
 
 坐标轴映射。
 
@@ -51,19 +51,19 @@ order: 23
 
 #### shape
 
-<description>**optional** _rect | square | circle_</description>
+<description>**可选** _rect | square | circle_</description>
 
 热力格子中的形状，密度热力图不用指定。
 
 #### sizeRatio
 
-<description>**optional** _number_</description>
+<description>**可选** _number_</description>
 
 热力格子中图形的尺寸比例，可选，只有当 shape 和 sizeField 至少指定一项后才生效。
 
 #### heatmapStyle
 
-<description>**optional** _object_</description>
+<description>**可选** _object_</description>
 
 热力图样式。 heatmapStyle 中的`fill`会覆盖 `color` heatmapStyle 可以直接指定，也可以通过 callback 的方式，根据数据指定单独的样式。
 
@@ -94,6 +94,12 @@ order: 23
 }
 ```
 
+#### state
+
+<description>**可选** _object_</description>
+
+`markdown:docs/common/state-style.en.md`
+
 ## 图表组件
 
 ### 图表组件

diff --git a/docs/api/plots/histogram.en.md b/docs/api/plots/histogram.en.md
@@ -55,6 +55,12 @@ Column style configuration.
 
 `markdown:docs/common/color.en.md`
 
+#### state
+
+<description>**optional** _object_</description>
+
+`markdown:docs/common/state-style.en.md`
+
 ### Plot Components
 
 `markdown:docs/common/component.en.md`
@@ -69,6 +75,4 @@ Column style configuration.
 
 ### Plot Theme
 
-### Plot Theme
-
 `markdown:docs/common/theme.en.md`
diff --git a/docs/api/plots/histogram.zh.md b/docs/api/plots/histogram.zh.md
@@ -55,6 +55,12 @@ order: 11
 
 `markdown:docs/common/color.zh.md`
 
+#### state
+
+<description>**可选** _object_</description>
+
+`markdown:docs/common/state-style.zh.md`
+
 ### 图表组件
 
 `markdown:docs/common/component.zh.md`
@@ -67,8 +73,6 @@ order: 11
 
 `markdown:docs/common/chart-methods.zh.md`
 
-
-
 ### 图表主题
 
 `markdown:docs/common/theme.zh.md`
diff --git a/docs/api/plots/line.en.md b/docs/api/plots/line.en.md
@@ -72,12 +72,18 @@ Polyline graphic style. You can either pass in the 'shapeStyle' structure direct
 
 #### point
 
-<description>**optional**</description>
+<description>**optional** _object_</description>
 
 Polyline data point graph style.
 
 `markdown:docs/common/point-style.en.md`
 
+#### state
+
+<description>**optional** _object_</description>
+
+`markdown:docs/common/state-style.en.md`
+
 ### Plot Components
 
 `markdown:docs/common/component.en.md`

diff --git a/docs/api/plots/line.zh.md b/docs/api/plots/line.zh.md
@@ -26,7 +26,7 @@ const data = [
 
 #### seriesField
 
-<description>**optional** _string_</description>
+<description>**可选** _string_</description>
 
 分组字段。用于同时看一个维度中不同情况的指标需求。比如：我们看不同大区最近 30 天的销售额趋势情况，那么这里的大区字段就是 seriesField。
 
@@ -38,46 +38,52 @@ const data = [
 
 #### smooth
 
-<description>**optional** _boolean_ _default:_ `false`</description>
+<description>**可选** _boolean_ _default:_ `false`</description>
 
 曲线是否平滑。
 
 #### stepType
 
-<description>**optional** _hv | vh | hvh | vhv_</description>
+<description>**可选** _hv | vh | hvh | vhv_</description>
 
 阶梯折线图类型，配置后 smooth 无效。 这里的 h 和 v 是 `horizontal` 和 `vertical` 的首字母。所以 vh 的意思就是起始点先竖直方向，然后水平方向。
 
 #### connectNulls
 
-<description>**optional** _boolean_ _default:_ `true`</description>
+<description>**可选** _boolean_ _default:_ `true`</description>
 
 对于折线图中缺失的值，是否连接空数据为一条线，或者折线断开。
 
 #### isStack
 
-<description>**optional** _boolean_ _default:_ `false`</description>
+<description>**可选** _boolean_ _default:_ `false`</description>
 
 对于存在 seriesField 分组字段的情况，我们可以设置 isStack = true，让折线堆叠累加起来。
 
 `markdown:docs/common/color.zh.md`
 
 #### lineStyle
 
-<description>**optional** _StyleAttr | Function_</description>
+<description>**可选** _StyleAttr | Function_</description>
 
 折线图形样式。可以直接传入 `ShapeStyle` 结构，也可以使用回调函数的方式，针对不同的数据，来返回不同的样式。对于 ShapeStyle 的数据结构，可以参考：
 
 `markdown:docs/common/shape-style.zh.md`
 
 #### point
 
-<description>**optional**</description>
+<description>**可选** _object_</description>
 
 折线数据点图形样式。
 
 `markdown:docs/common/point-style.zh.md`
 
+#### state
+
+<description>**可选** _object_</description>
+
+`markdown:docs/common/state-style.zh.md`
+
 ### 图表组件
 
 `markdown:docs/common/component.zh.md`

diff --git a/docs/api/plots/pie.en.md b/docs/api/plots/pie.en.md
@@ -99,6 +99,12 @@ Set the sector style. The 'fill' in the pieStyle will override the 'color' confi
 
 `markdown:docs/common/shape-style.en.md`
 
+#### state
+
+<description>**optional** _object_</description>
+
+`markdown:docs/common/state-style.en.md`
+
 ### Plot Components
 
 <img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*TBHtTY6RmHIAAAAAAAAAAAAAARQnAQ" alt="Load failed" width="600">

diff --git a/docs/api/plots/pie.zh.md b/docs/api/plots/pie.zh.md
@@ -108,6 +108,12 @@ piePlot.render();
 
 `markdown:docs/common/shape-style.zh.md`
 
+#### state
+
+<description>**可选** _object_</description>
+
+`markdown:docs/common/state-style.zh.md`
+
 ### 图表组件
 
 <img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*TBHtTY6RmHIAAAAAAAAAAAAAARQnAQ" alt="加载失败" width="600">

diff --git a/docs/api/plots/rose.en.md b/docs/api/plots/rose.en.md
@@ -111,6 +111,12 @@ Set the sector style. The 'fill' in sectorStyle overrides the 'color' configurat
 
 `markdown:docs/common/shape-style.en.md`
 
+#### state
+
+<description>**optional** _object_</description>
+
+`markdown:docs/common/state-style.en.md`
+
 ### Plot Components
 
 `markdown:docs/common/component.en.md`