test(pattern-in-plot): 逐个给每个plot添加pattern的单测，并添加对应的pattern文档 (#2805)

* test(pattern-in-plot): 逐个给每个plot添加pattern的单测，并添加对应的pattern文档 * docs: 修改部分pattern的文档说明以及默认值等 * fix: 修复pattern回调问题，对应的图形如果没有pattern，默认为主题色 * test: 添加column引入pattern的单测，并添加文档 * test: 添加bar引入pattern的单测，并添加文档 * test: 给pie添加pattern的单测，添加文档 * fix(pattern-util): 处理color为数组导致pie的图形变黑情况，统一返回字符串 * test: 给直方图添加pattern的单测，增加文档 * test: 给treemap添加pattern的单测，增加文档 * test: 给heatmap添加pattern的单测和文档，并给patternAttr的类型增加布尔值 * test: 给radial-bar添加pattern的单测，增加文档 * test: 给tiny-column添加pattern的单测，增加文档 * test: 给circle-packing添加pattern的单测，增加文档 * docs: 修改接入文档方式，把标题抽出来 * fix: 给patternAdaptor补充stackFields映射字段，修复stack模式的直方图添加pattern变黑问题 Co-authored-by: 酥云 <lisuwen.lsw@antgroup.com>
antvis · Aug 18, 2021 · a3900fb · a3900fb
1 parent f733b5b
commit a3900fb
Show file tree

Hide file tree

Showing 34 changed files with 900 additions and 18 deletions.
diff --git a/__tests__/unit/plots/area/pattern-spec.ts b/__tests__/unit/plots/area/pattern-spec.ts
@@ -0,0 +1,77 @@
+import { Area } from '../../../../src';
+import { percentData } from '../../../data/area';
+import { createDiv } from '../../../utils/dom';
+
+describe('area', () => {
+  it('pattern: obj', () => {
+    const area = new Area(createDiv(), {
+      data: percentData,
+      width: 400,
+      height: 300,
+      xField: 'year',
+      yField: 'value',
+      seriesField: 'country',
+      pattern: {
+        type: 'line',
+      },
+    });
+
+    area.render();
+
+    const geometry = area.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(elements[2].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+
+    area.update({
+      pattern: {
+        type: 'dot',
+      },
+    });
+
+    expect(area.chart.geometries[0].elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(area.chart.geometries[0].elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(area.chart.geometries[0].elements[2].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+
+    area.destroy();
+  });
+
+  it('pattern: function', () => {
+    const area = new Area(createDiv(), {
+      data: percentData,
+      width: 400,
+      height: 300,
+      xField: 'year',
+      yField: 'value',
+      seriesField: 'country',
+      pattern: ({ country }) => {
+        if (country === 'Asia') {
+          return {
+            type: 'line',
+          };
+        }
+      },
+    });
+    area.render();
+
+    const geometry = area.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(false);
+
+    area.update({
+      pattern: ({ country }) => {
+        if (country === 'Africa') {
+          return {
+            type: 'line',
+          };
+        }
+      },
+    });
+    expect(area.chart.geometries[0].elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(area.chart.geometries[0].elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(false);
+
+    area.destroy();
+  });
+});
diff --git a/__tests__/unit/plots/bar/pattern-spec.ts b/__tests__/unit/plots/bar/pattern-spec.ts
@@ -0,0 +1,73 @@
+import { Bar } from '../../../../src';
+import { salesByArea } from '../../../data/sales';
+import { createDiv } from '../../../utils/dom';
+
+describe('bar style', () => {
+  it('pattern: obj', () => {
+    const bar = new Bar(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'sales',
+      yField: 'area',
+      pattern: {
+        type: 'line',
+      },
+    });
+
+    bar.render();
+
+    const geometry = bar.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(elements[2].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+
+    bar.update({
+      pattern: {
+        type: 'dot',
+      },
+    });
+
+    expect(bar.chart.geometries[0].elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(bar.chart.geometries[0].elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(bar.chart.geometries[0].elements[2].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+
+    bar.destroy();
+  });
+
+  it('pattern: callback', () => {
+    const bar = new Bar(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'sales',
+      yField: 'area',
+      pattern: ({ area }) => {
+        if (area === '华北') {
+          return { type: 'dot' };
+        }
+      },
+    });
+
+    bar.render();
+
+    const geometry = bar.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[2].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(false);
+
+    bar.update({
+      pattern: ({ area }) => {
+        if (area === '西南') {
+          return { type: 'dot' };
+        }
+      },
+    });
+
+    expect(bar.chart.geometries[0].elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(bar.chart.geometries[0].elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(false);
+
+    bar.destroy();
+  });
+});
diff --git a/__tests__/unit/plots/circle-packing/pattern-spec.ts b/__tests__/unit/plots/circle-packing/pattern-spec.ts
@@ -0,0 +1,67 @@
+import { CirclePacking } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { DATA } from '../../../data/circle-packing';
+import { DEFAULT_OPTIONS } from '../../../../src/plots/circle-packing/constant';
+
+describe('Circle-Packing', () => {
+  const div = createDiv();
+  it('pattern: obj', () => {
+    const plot = new CirclePacking(div, {
+      padding: 0,
+      data: DATA,
+      hierarchyConfig: {
+        sort: (a, b) => b.depth - a.depth,
+      },
+      pattern: {
+        type: 'line',
+      },
+    });
+    plot.render();
+
+    const geometry = plot.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+
+    plot.update({
+      pattern: false,
+    });
+
+    expect(plot.chart.geometries[0].elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(false);
+
+    plot.destroy();
+  });
+
+  it('pattern: callback', () => {
+    const plot = new CirclePacking(div, {
+      padding: 0,
+      data: DATA,
+      hierarchyConfig: {
+        sort: (a, b) => b.depth - a.depth,
+      },
+      pattern: ({ depth }) => {
+        if (depth === 0) {
+          return { type: 'line' };
+        }
+      },
+    });
+    plot.render();
+
+    const geometry = plot.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(false);
+
+    plot.update({
+      pattern: ({ depth }) => {
+        if (depth === 1) {
+          return { type: 'square' };
+        }
+      },
+    });
+
+    expect(plot.chart.geometries[0].elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(false);
+    expect(plot.chart.geometries[0].elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+
+    plot.destroy();
+  });
+});
diff --git a/__tests__/unit/plots/column/pattern-spec.ts b/__tests__/unit/plots/column/pattern-spec.ts
@@ -0,0 +1,73 @@
+import { Column } from '../../../../src';
+import { salesByArea } from '../../../data/sales';
+import { createDiv } from '../../../utils/dom';
+
+describe('column', () => {
+  it('pattern: obj', () => {
+    const column = new Column(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      pattern: {
+        type: 'line',
+      },
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(elements[2].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+
+    column.update({
+      pattern: {
+        type: 'dot',
+      },
+    });
+
+    expect(column.chart.geometries[0].elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(column.chart.geometries[0].elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(column.chart.geometries[0].elements[2].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+
+    column.destroy();
+  });
+
+  it('pattern: function', () => {
+    const column = new Column(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      pattern: ({ area }) => {
+        if (area === '华北') {
+          return { type: 'dot' };
+        }
+      },
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[3].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(false);
+
+    column.update({
+      pattern: ({ area }) => {
+        if (area === '中南') {
+          return { type: 'line' };
+        }
+      },
+    });
+
+    expect(column.chart.geometries[0].elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(column.chart.geometries[0].elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(false);
+
+    column.destroy();
+  });
+});
diff --git a/__tests__/unit/plots/heatmap/pattern-spec.ts b/__tests__/unit/plots/heatmap/pattern-spec.ts
@@ -0,0 +1,67 @@
+import { Heatmap } from '../../../../src';
+import { semanticBasicHeatmapData } from '../../../data/basic-heatmap';
+import { createDiv } from '../../../utils/dom';
+
+describe('heatmap: pattern', () => {
+  it('pattern: obj', () => {
+    const heatmap = new Heatmap(createDiv('style'), {
+      width: 400,
+      height: 300,
+      data: semanticBasicHeatmapData,
+      xField: 'name',
+      yField: 'day',
+      colorField: 'sales',
+      pattern: {
+        type: 'line',
+      },
+    });
+
+    heatmap.render();
+
+    const geometry = heatmap.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+
+    heatmap.update({
+      pattern: false,
+    });
+
+    expect(heatmap.chart.geometries[0].elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(false);
+
+    heatmap.destroy();
+  });
+
+  it('pattern: callback', () => {
+    const heatmap = new Heatmap(createDiv('style'), {
+      width: 400,
+      height: 300,
+      data: semanticBasicHeatmapData,
+      xField: 'name',
+      yField: 'day',
+      colorField: 'sales',
+      pattern: ({ sales }) => {
+        if (sales === 10) {
+          return { type: 'dot' };
+        }
+      },
+    });
+
+    heatmap.render();
+
+    const geometry = heatmap.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+
+    heatmap.update({
+      pattern: ({ sales }) => {
+        if (sales === 19) {
+          return { type: 'dot' };
+        }
+      },
+    });
+
+    expect(heatmap.chart.geometries[0].elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+
+    heatmap.destroy();
+  });
+});