feat: 增加支持层叠（堆叠）直方图 (#1356)

* feat: 新增基本直方图 * test: 增加测试用例 1. 增加测试用例 2. 调整引入结构 3. merge了v2最新代码 * feat: 增加基本直方图 1. 引入dataset处理数据 2. 增加更多test测试 * feat: 增加支持层叠直方图 1. 增加层叠（堆叠直方图） 2 .增加测试用例 * feat(v2): 新增层叠直方图和配置 1. 调整之前color的问题 2. 完善直方图 3 .新增test测试用例
antvis · Jul 30, 2020 · 29cc777 · 29cc777
1 parent a4618c0
commit 29cc777
Show file tree

Hide file tree

Showing 9 changed files with 376 additions and 42 deletions.
diff --git a/__tests__/data/histogram-data.ts b/__tests__/data/histogram-data.ts
@@ -54,3 +54,24 @@ export const histogramData = [
   { value: 21 },
   { value: 23.4 },
 ];
+
+export const histogramStackData = [
+  { value: 50, type: '数学' },
+  { value: 50.1, type: '数学' },
+  { value: 50.1, type: '语文' },
+  { value: 51.2, type: '语文' },
+  { value: 61.3, type: '数学' },
+  { value: 61.4, type: '语文' },
+  { value: 74, type: '语文' },
+  { value: 74, type: '数学' },
+  { value: 78, type: '数学' },
+  { value: 81.5, type: '数学' },
+  { value: 82.3, type: '语文' },
+  { value: 85.3, type: '语文' },
+  { value: 84.3, type: '数学' },
+  { value: 86.3, type: '数学' },
+  { value: 90.3, type: '数学' },
+  { value: 93.3, type: '语文' },
+  { value: 94.3, type: '语文' },
+  { value: 94.3, type: '数学' },
+];
diff --git a/__tests__/unit/plots/histogram/axis-spec.ts b/__tests__/unit/plots/histogram/axis-spec.ts
@@ -0,0 +1,64 @@
+import { Histogram } from '../../../../src';
+import { histogramData } from '../../../data/histogram-data';
+import { createDiv } from '../../../utils/dom';
+
+describe('Histogram: axis', () => {
+  it('xAxis', () => {
+    const histogram = new Histogram(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: histogramData,
+      binField: 'value',
+      binWidth: 2,
+      meta: {
+        count: {
+          min: 0,
+          max: 20,
+        },
+      },
+      xAxis: {
+        label: {
+          style: {
+            fill: 'red',
+          },
+        },
+      },
+    });
+    histogram.render();
+
+    const geometry = histogram.chart.geometries[0];
+
+    expect(geometry.scales.count.min).toBe(0);
+    expect(geometry.scales.count.max).toBe(20);
+
+    // @ts-ignore
+    expect(histogram.chart.options.axes.range.label.style.fill).toBe('red');
+  });
+
+  it('yAxis', () => {
+    const histogram = new Histogram(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: histogramData,
+      binField: 'value',
+      binWidth: 2,
+      yAxis: {
+        nice: true,
+        label: {
+          style: {
+            fill: 'red',
+          },
+        },
+      },
+    });
+
+    histogram.render();
+
+    // @ts-ignore
+    expect(histogram.chart.options.axes.count.nice).toBe(true);
+    // @ts-ignore
+    expect(histogram.chart.options.axes.count.label.style.fill).toBe('red');
+  });
+});
diff --git a/__tests__/unit/plots/histogram/index-spec.ts b/__tests__/unit/plots/histogram/index-spec.ts
@@ -1,5 +1,5 @@
 import { Histogram } from '../../../../src';
-import { histogramData } from '../../../data/histogram-data';
+import { histogramData, histogramStackData } from '../../../data/histogram-data';
 import { createDiv } from '../../../utils/dom';
 
 describe('histogram', () => {
@@ -39,7 +39,7 @@ describe('histogram', () => {
   });
 
   /**
-   * 这个测试dataset处理方式有问题
+   * 这个测试 dataset 处理方式有问题
    * issue已经提过去了 https://github.com/antvis/data-set/issues/90
    */
   it('automatic calculate binNumber', () => {
@@ -57,7 +57,7 @@ describe('histogram', () => {
     const shapeOrigin = geometry.getShapes()[0].get('origin').data;
 
     /**
-     * 结合dataset的写法是binWidth = histogramData（最大值-最小值）/ 默认值30
+     * 结合 dataset 的写法是 binWidth = histogramData（最大值-最小值）/ 默认值30
      * https://github.com/antvis/data-set/blob/master/src/transform/bin/histogram.ts#L45
      */
     const binWidth = (23.4 - 1.2) / 30;
@@ -73,7 +73,7 @@ describe('histogram', () => {
       data: histogramData,
       binField: 'value',
       binWidth: 2,
-      color: 'red',
+      color: () => 'red',
     });
 
     histogram.render();
@@ -85,4 +85,51 @@ describe('histogram', () => {
     expect(shapeOrigin.range[1] - shapeOrigin.range[0]).toBe(2);
     expect(elements[0].getModel().color).toBe('red');
   });
+
+  it('stackField: 层叠直方图', () => {
+    const histogram = new Histogram(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: histogramStackData,
+      binField: 'value',
+      binWidth: 4,
+      stackField: 'type',
+    });
+
+    histogram.render();
+
+    const geometry = histogram.chart.geometries[0];
+
+    // 如果没有 stackField 是没有adjustNames这个数组
+    expect(geometry.getAdjust('stack')).toMatchObject({
+      xField: 'range',
+      yField: 'count',
+    });
+  });
+
+  it('stackField with color', () => {
+    const colors = ['red', 'blue'];
+    const histogram = new Histogram(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: histogramStackData,
+      binField: 'value',
+      binWidth: 4,
+      stackField: 'type',
+      color: colors,
+    });
+
+    histogram.render();
+
+    const geometry = histogram.chart.geometries[0];
+    const colorAttribute = geometry.getAttribute('color');
+
+    expect(colorAttribute.values).toEqual(colors);
+    expect(geometry.getAdjust('stack')).toMatchObject({
+      xField: 'range',
+      yField: 'count',
+    });
+  });
 });
diff --git a/__tests__/unit/plots/histogram/interaction-spec.ts b/__tests__/unit/plots/histogram/interaction-spec.ts
@@ -17,25 +17,25 @@ describe('Histogram - G2内置interaction', () => {
   it('交互: active-region', () => {
     histogram.update({
       ...histogram.options,
-      interaction: 'active-region',
+      interactions: [{ name: 'active-region' }],
     });
 
     expect(histogram.chart.interactions['active-region']).toBeDefined();
   });
 
-  it('交互:element-highlight', () => {
+  it('交互: element-highlight', () => {
     histogram.update({
       ...histogram.options,
-      interaction: 'element-highlight',
+      interactions: [{ name: 'element-highlight' }],
     });
 
     expect(histogram.chart.interactions['element-highlight']).toBeDefined();
   });
 
-  it('交互:element-active', () => {
+  it('交互: element-active', () => {
     histogram.update({
       ...histogram.options,
-      interaction: 'element-active',
+      interactions: [{ name: 'element-active' }],
     });
 
     expect(histogram.chart.interactions['element-active']).toBeDefined();

diff --git a/__tests__/unit/plots/histogram/label-spec.ts b/__tests__/unit/plots/histogram/label-spec.ts
@@ -0,0 +1,61 @@
+import { Histogram } from '../../../../src';
+import { histogramData } from '../../../data/histogram-data';
+import { createDiv } from '../../../utils/dom';
+
+describe('Histogram: label', () => {
+  const histogram = new Histogram(createDiv(), {
+    width: 400,
+    height: 300,
+    appendPadding: 10,
+    data: histogramData,
+    binField: 'value',
+    binWidth: 2,
+  });
+
+  histogram.render();
+
+  it('position: top', () => {
+    histogram.update({
+      ...histogram.options,
+      label: {
+        position: 'top',
+      },
+    });
+    const geometry = histogram.chart.geometries[0];
+
+    // @ts-ignore
+    expect(geometry.labelOption.cfg).toEqual({
+      position: 'top',
+    });
+  });
+
+  it('position: middle', () => {
+    histogram.update({
+      ...histogram.options,
+      label: {
+        position: 'middle',
+      },
+    });
+    const geometry = histogram.chart.geometries[0];
+
+    // @ts-ignore
+    expect(geometry.labelOption.cfg).toEqual({
+      position: 'middle',
+    });
+  });
+
+  it('position: bottom', () => {
+    histogram.update({
+      ...histogram.options,
+      label: {
+        position: 'bottom',
+      },
+    });
+    const geometry = histogram.chart.geometries[0];
+
+    // @ts-ignore
+    expect(geometry.labelOption.cfg).toEqual({
+      position: 'bottom',
+    });
+  });
+});
diff --git a/__tests__/unit/plots/histogram/style-spec.ts b/__tests__/unit/plots/histogram/style-spec.ts
@@ -0,0 +1,50 @@
+import { Histogram } from '../../../../src';
+import { histogramData } from '../../../data/histogram-data';
+import { createDiv } from '../../../utils/dom';
+
+describe('Histogram: style', () => {
+  it('style', () => {
+    const histogram = new Histogram(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: histogramData,
+      binField: 'value',
+      binWidth: 2,
+      columnStyle: {
+        stroke: 'black',
+        lineWidth: 2,
+      },
+    });
+    histogram.render();
+
+    const geometry = histogram.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[0].shape.attr('stroke')).toBe('black');
+    expect(elements[0].shape.attr('lineWidth')).toBe(2);
+  });
+
+  it('style callback', () => {
+    const histogram = new Histogram(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: histogramData,
+      binField: 'value',
+      binWidth: 2,
+      columnStyle: (x, y) => {
+        return {
+          stroke: 'black',
+          lineWidth: 2,
+        };
+      },
+    });
+
+    histogram.render();
+
+    const geometry = histogram.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[0].shape.attr('stroke')).toBe('black');
+    expect(elements[0].shape.attr('lineWidth')).toBe(2);
+  });
+});
diff --git a/__tests__/unit/plots/histogram/tooltip-spec.ts b/__tests__/unit/plots/histogram/tooltip-spec.ts
@@ -0,0 +1,31 @@
+import { Histogram } from '../../../../src';
+import { histogramData } from '../../../data/histogram-data';
+import { createDiv } from '../../../utils/dom';
+
+describe('Histogram:tooltip', () => {
+  const histogram = new Histogram(createDiv(), {
+    width: 400,
+    height: 300,
+    appendPadding: 10,
+    data: histogramData,
+    binField: 'value',
+    binWidth: 2,
+    tooltip: {
+      title: 'hello wold!',
+    },
+  });
+
+  histogram.render();
+
+  it('tooltip', () => {
+    // @ts-ignore
+    expect(histogram.chart.options.tooltip.title).toBe('hello wold!');
+    histogram.update({
+      ...histogram.options,
+      tooltip: false,
+    });
+    // @ts-ignore
+    expect(histogram.chart.options.tooltip).toBe(false);
+    expect(histogram.chart.getComponents().find((co) => co.type === 'tooltip')).toBe(undefined);
+  });
+});