From c36949619512467024d7458f5d07b01e026615e6 Mon Sep 17 00:00:00 2001
From: Visiky <736929286@qq.com>
Date: Thu, 14 Oct 2021 16:16:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(venn):=20=E9=9F=A6=E6=81=A9=E5=9B=BE?=
=?UTF-8?q?=E9=A2=9C=E8=89=B2=E5=9B=9E=E8=B0=83=E9=87=8D=E6=9E=84=20(#2909?=
=?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat(venn): 韦恩图颜色回调重构
1. 修复 color 设置回调，导致图例颜色不正确
2. color 回调参数，增加 defaultColor 默认色
3. 完善韦恩图文档 & 增加 demo
* test(venn): 韦恩图单测
fix: #2906
* test(venn): 添加韦恩图 color 单测
---
__tests__/bugs/issue-2906-spec.ts | 28 +++++++++++++++++
__tests__/unit/plots/venn/color-spec.ts | 23 ++++++++++++++
docs/api/plots/venn.en.md | 29 +++++++++++++++++-
docs/api/plots/venn.zh.md | 29 ++++++++++++++++--
docs/manual/plots/venn.en.md | 6 ++++
docs/manual/plots/venn.zh.md | 35 ++++++++++++++++++++++
examples/more-plots/venn/demo/color.ts | 23 ++++++++++++++
examples/more-plots/venn/demo/meta.json | 16 +++++-----
src/plots/venn/adaptor.ts | 40 ++++++++++++++++++-------
src/plots/venn/types.ts | 4 +--
10 files changed, 211 insertions(+), 22 deletions(-)
create mode 100644 __tests__/bugs/issue-2906-spec.ts
create mode 100644 docs/manual/plots/venn.en.md
create mode 100644 docs/manual/plots/venn.zh.md
create mode 100644 examples/more-plots/venn/demo/color.ts
diff --git a/__tests__/bugs/issue-2906-spec.ts b/__tests__/bugs/issue-2906-spec.ts
new file mode 100644
index 0000000000..b7b863124c
--- /dev/null
+++ b/__tests__/bugs/issue-2906-spec.ts
@@ -0,0 +1,28 @@
+import { Venn } from '../../src';
+import { createDiv } from '../utils/dom';
+
+describe('#2906', () => {
+ it('venn plot color callback', () => {
+ const plot = new Venn(createDiv(), {
+ setsField: 'sets',
+ sizeField: 'size',
+ data: [
+ { sets: ['A'], size: 12, label: 'A' },
+ { sets: ['B'], size: 12, label: 'B' },
+ { sets: ['C'], size: 12, label: 'C' },
+ { sets: ['A', 'B'], size: 2, label: 'A&B' },
+ { sets: ['A', 'C'], size: 2, label: 'A&C' },
+ { sets: ['B', 'C'], size: 2, label: 'B&C' },
+ { sets: ['A', 'B', 'C'], size: 1 },
+ ],
+ pointStyle: { fillOpacity: 0.85 },
+ color: (datum) => (datum.sets?.length === 1 ? 'blue' : 'red'),
+ });
+ plot.render();
+
+ const legendController = plot.chart.getController('legend');
+ const items = legendController.getComponents()[0].component.get('items');
+ expect(items[0].marker.style.fill).toBe('blue');
+ expect(items[3].marker.style.fill).toBe('red');
+ });
+});
diff --git a/__tests__/unit/plots/venn/color-spec.ts b/__tests__/unit/plots/venn/color-spec.ts
index 64e6e6d477..0e6661a8a6 100644
--- a/__tests__/unit/plots/venn/color-spec.ts
+++ b/__tests__/unit/plots/venn/color-spec.ts
@@ -57,6 +57,29 @@ describe('venn: color', () => {
expect(plot.chart.geometries[0].elements[5].getModel().color).toBe('blue');
});
+ it('color: callback params', () => {
+ plot.update({
+ theme: { colors10: ['red', 'yellow', 'blue'] },
+ color: undefined,
+ });
+
+ expect(plot.chart.geometries[0].elements[0].getModel().color).toBe('red');
+ expect(plot.chart.geometries[0].elements[1].getModel().color).toBe('yellow');
+ expect(plot.chart.geometries[0].elements[2].getModel().color).toBe('blue');
+ expect(plot.chart.geometries[0].elements[4].getModel().color).not.toBe('black');
+
+ plot.update({
+ color: (datum, defaultColor) => {
+ return ['red', 'blue'].indexOf(defaultColor) === -1 ? 'black' : defaultColor;
+ },
+ });
+ expect(plot.chart.geometries[0].elements[0].getModel().color).toBe('red');
+ expect(plot.chart.geometries[0].elements[1].getModel().color).not.toBe('yellow');
+ expect(plot.chart.geometries[0].elements[1].getModel().color).toBe('black');
+ expect(plot.chart.geometries[0].elements[2].getModel().color).toBe('blue');
+ expect(plot.chart.geometries[0].elements[4].getModel().color).toBe('black');
+ });
+
afterAll(() => {
plot.destroy();
});
diff --git a/docs/api/plots/venn.en.md b/docs/api/plots/venn.en.md
index cfe9902037..2e5c1d718a 100644
--- a/docs/api/plots/venn.en.md
+++ b/docs/api/plots/venn.en.md
@@ -38,7 +38,34 @@ The name of the data field corresponding to the point size map.
### Geometry Style
-`markdown:docs/common/color.en.md`
+#### color
+
+**optional** _string | string[] | Function_
+
+指定图形元素的颜色。可以指定单色，或者一系列色值，也可以通过回调函数的方法根据对应数值进行设置。（**注意**：韦恩图的 color 系列色值只作用于单个集合上，交集部分通过指定 blendMode 来进行叠加处理。另外，color 回调中，第二个参数代表默认分配的颜色。）
+
+默认配置：采用 theme 中的色板。演示 [Demo](/zh/examples/more-plots/venn#blend-mode)
+
+```ts
+// 设置单一颜色
+{
+ color: '#a8ddb5'
+}
+// 设置多色
+{
+ color: ['#d62728', '#2ca02c', '#000000'],
+}
+// Function
+{
+ color: (datum, defaultColor) => {
+ if(datum.size > 100){
+ return 'red';
+ }
+ return defaultColor;
+ }
+}
+```
+
#### blendMode
diff --git a/docs/api/plots/venn.zh.md b/docs/api/plots/venn.zh.md
index 1f9ff3f5ab..efdf06b673 100644
--- a/docs/api/plots/venn.zh.md
+++ b/docs/api/plots/venn.zh.md
@@ -38,8 +38,33 @@ order: 12
### 图形样式
-
-`markdown:docs/common/color.zh.md`
+#### color
+
+**optional** _string | string[] | Function_
+
+指定图形元素的颜色。可以指定单色，或者一系列色值，也可以通过回调函数的方法根据对应数值进行设置。（**注意**：韦恩图的 color 系列色值只作用于单个集合上，交集部分通过指定 blendMode 来进行叠加处理。另外，color 回调中，第二个参数代表默认分配的颜色。）
+
+默认配置：采用 theme 中的色板。演示 [Demo](/zh/examples/more-plots/venn#blend-mode)
+
+```ts
+// 设置单一颜色
+{
+ color: '#a8ddb5'
+}
+// 设置多色
+{
+ color: ['#d62728', '#2ca02c', '#000000'],
+}
+// Function
+{
+ color: (datum, defaultColor) => {
+ if(datum.size > 100){
+ return 'red';
+ }
+ return defaultColor;
+ }
+}
+```
#### blendMode
diff --git a/docs/manual/plots/venn.en.md b/docs/manual/plots/venn.en.md
new file mode 100644
index 0000000000..7a1908b82a
--- /dev/null
+++ b/docs/manual/plots/venn.en.md
@@ -0,0 +1,6 @@
+---
+title: Venn
+order: 30
+---
+
+`markdown:docs/manual/plots/venn.zh.md`
\ No newline at end of file
diff --git a/docs/manual/plots/venn.zh.md b/docs/manual/plots/venn.zh.md
new file mode 100644
index 0000000000..963c745122
--- /dev/null
+++ b/docs/manual/plots/venn.zh.md
@@ -0,0 +1,35 @@
+---
+title: 韦恩图
+order: 30
+---
+
+