feat: add venn chart demo, tests (#5129)

* docs: add venn demo, tests

* chore: build success

* fix: sort data for occlusion

__tests__/plots/static/index.ts

@@ -236,3 +236,5 @@ export { HeatmapHeatmapBasic } from './heatmap-heatmap-basic';
 export { DiamondHeatmapDensity } from './diamond-heatmap-density';
 export { basicLineNullLabel } from './basic-line-null-label';
 export { alphabetIntervalViewStyle } from './alphabet-interval-view-style';
+export { vennBasic } from './venn-basic';
+export { vennHollow } from './venn-hollow';

__tests__/plots/static/venn-basic.ts

@@ -0,0 +1,50 @@
+import { G2Spec } from '../../../src';
+
+export function vennBasic(): G2Spec {
+  return {
+    type: 'view',
+    width: 640,
+    height: 480,
+    children: [
+      {
+        type: 'path',
+        data: {
+          type: 'inline',
+          value: [
+            { sets: ['A'], value: 12, label: 'A' },
+            { sets: ['B'], value: 12, label: 'B' },
+            { sets: ['C'], value: 12, label: 'C' },
+            { sets: ['A', 'B'], value: 2, label: 'A&B' },
+            { sets: ['A', 'C'], value: 2, label: 'A&C' },
+            { sets: ['B', 'C'], value: 2, label: 'B&C' },
+            { sets: ['A', 'B', 'C'], value: 1 },
+          ],
+          transform: [
+            {
+              type: 'venn',
+              size: 'value',
+            },
+          ],
+        },
+        encode: {
+          d: 'path',
+          color: 'key',
+        },
+        style: {
+          fillOpacity: 0.8,
+        },
+        labels: [
+          {
+            text: 'key',
+            position: 'inside',
+            style: {
+              formatter: (_, datum) => `${datum.key}: ${datum.size}`,
+            },
+          },
+        ],
+      },
+    ],
+  };
+}
+
+vennBasic.maxError = 100;

__tests__/plots/static/venn-hollow.ts

@@ -0,0 +1,54 @@
+import { G2Spec } from '../../../src';
+
+export function vennHollow(): G2Spec {
+  return {
+    type: 'view',
+    width: 640,
+    height: 480,
+    children: [
+      {
+        type: 'path',
+        data: {
+          type: 'inline',
+          value: [
+            { sets: ['A'], value: 12, label: 'A' },
+            { sets: ['B'], value: 12, label: 'B' },
+            { sets: ['C'], value: 12, label: 'C' },
+            { sets: ['A', 'B'], value: 2, label: 'A&B' },
+            { sets: ['A', 'C'], value: 2, label: 'A&C' },
+            { sets: ['B', 'C'], value: 2, label: 'B&C' },
+            { sets: ['A', 'B', 'C'], value: 1 },
+          ],
+          transform: [
+            {
+              type: 'venn',
+              size: 'value',
+              padding: 10,
+            },
+          ],
+        },
+        encode: {
+          d: 'path',
+          color: 'key',
+          shape: 'hollow',
+        },
+        style: {
+          fillOpacity: 0.8,
+          lineWidth: 6,
+        },
+        labels: [
+          {
+            text: 'key',
+            position: 'inside',
+            style: {
+              formatter: (_, datum) => `${datum.key}: ${datum.size}`,
+              fill: '#000',
+            },
+          },
+        ],
+      },
+    ],
+  };
+}
+
+vennHollow.maxError = 100;

__tests__/unit/data/venn.spec.ts

@@ -0,0 +1,24 @@
+import { Venn } from '../../../src/data/venn';
+
+describe('Venn', () => {
+  it('Venn({...}) returns function return layout venn data', async () => {
+    const data = [
+      { sets: ['A'], size: 102, 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 },
+    ];
+    const v = Venn({
+      sets: 'sets',
+      size: 'size',
+      as: ['_key', '_path'],
+    });
+    const layout = await v(data);
+    expect(layout.length).toBe(7);
+    expect(layout[0]._path).toBeInstanceOf(Function);
+    expect(layout[6]._key).toBe('A&B&C');
+  });
+});

__tests__/unit/stdlib/index.spec.ts

@@ -258,6 +258,7 @@ import {
   WordCloud,
   Join,
   KDE,
+  Venn,
 } from '../../../src/data';
 import {
   OverflowHide,
@@ -288,6 +289,7 @@ describe('stdlib', () => {
       'data.wordCloud': WordCloud,
       'data.join': Join,
       'data.kde': KDE,
+      'data.venn': Venn,
       'transform.maybeZeroY1': MaybeZeroY1,
       'transform.maybeZeroX': MaybeZeroX,
       'transform.maybeStackY': MaybeStackY,

package.json

@@ -66,6 +66,7 @@
     "d3-shape": "^3.1.0",
     "d3-voronoi": "^1.1.4",
     "flru": "^1.0.2",
+    "fmin": "^0.0.2",
     "pdfast": "^0.2.0"
   },
   "devDependencies": {

site/examples/general/venn/demo/meta.json

@@ -0,0 +1,24 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "venn.ts",
+      "title": {
+        "zh": "韦恩图",
+        "en": "Venn Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*IZT9TJ3eVpwAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "venn-hollow.ts",
+      "title": {
+        "zh": "空心韦恩图",
+        "en": "Hollow Venn"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*5XyrQppBM9YAAAAAAAAAAAAADmJ7AQ/original"
+    }
+  ]
+}

site/examples/general/venn/demo/venn-hollow.ts

@@ -0,0 +1,42 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  autoFit: true,
+});
+
+chart
+  .path()
+  .data({
+    type: 'inline',
+    value: [
+      { sets: ['A'], size: 15, label: 'A' },
+      { sets: ['B'], size: 12, label: 'B' },
+      { sets: ['C'], size: 10, label: 'C' },
+      { sets: ['A', 'B'], size: 2, label: 'A&B' },
+      { sets: ['A', 'C'], size: 2, label: 'A&C' },
+      { sets: ['B', 'C'], size: 1, label: 'B&C' },
+      { sets: ['A', 'B', 'C'], size: 1 },
+    ],
+    transform: [
+      {
+        type: 'venn',
+      },
+    ],
+  })
+  .encode('d', 'path')
+  .encode('color', 'key')
+  .encode('shape', 'hollow')
+  .label({
+    position: 'inside',
+    text: (d) => d.label || '',
+    style: {
+      fill: '#000',
+    },
+  })
+  .style('opacity', 0.6)
+  .style('lineWidth', 8)
+  .tooltip(false);
+
+chart.render();

site/examples/general/venn/demo/venn.ts

@@ -0,0 +1,42 @@
+/**
+ * A recreation of this demo: http://benfred.github.io/venn.js/examples/intersection_tooltip.html
+ */
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  autoFit: true,
+  paddingLeft: 50,
+  paddingRight: 50,
+});
+
+chart
+  .path()
+  .data({
+    type: 'fetch',
+    value: 'https://assets.antv.antgroup.com/g2/lastfm.json',
+    transform: [
+      {
+        type: 'venn',
+        padding: 8,
+        sets: 'sets',
+        size: 'size',
+        as: ['key', 'path'],
+      },
+    ],
+  })
+  .encode('d', 'path')
+  .encode('color', 'key')
+  .label({
+    position: 'inside',
+    text: (d) => d.label || '',
+    transform: [{ type: 'contrastReverse' }],
+  })
+  .style('opacity', (d) => (d.sets.length > 1 ? 0.001 : 0.5))
+  .state('inactive', { opacity: 0.2 })
+  .state('active', { opacity: 0.8 })
+  .interaction('elementHighlight', true)
+  .legend(false);
+
+chart.render();

site/examples/general/venn/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Venn
+order: 21
+---

site/examples/general/venn/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 韦恩图
+order: 21
+---

src/api/mark/index.ts

@@ -23,6 +23,7 @@ import {
   Boxplot,
   Density,
   Heatmap,
+  Path,
   Shape,
   Pack,
   ForceGraph,
@@ -57,6 +58,7 @@ export interface Mark {
   boxplot(): Boxplot;
   density(): Density;
   heatmap(): Heatmap;
+  path(): Path;
   shape(): Shape;
   pack(): Pack;
   forceGraph(): ForceGraph;
@@ -92,6 +94,7 @@ export const mark = {
   boxplot: Boxplot,
   density: Density,
   heatmap: Heatmap,
+  path: Path,
   shape: Shape,
   pack: Pack,
   forceGraph: ForceGraph,

src/api/mark/mark.ts

@@ -21,6 +21,7 @@ import {
   BoxPlotMark,
   DensityMark,
   HeatmapMark,
+  PathMark,
   ShapeMark,
   TreemapMark,
   ForceGraphMark,
@@ -123,6 +124,10 @@ export interface Heatmap extends API<Concrete<HeatmapMark>, Heatmap> {
   type: 'heatmap';
 }
 
+export interface Path extends API<Concrete<PathMark>, Path> {
+  type: 'path';
+}
+
 export interface Shape extends API<Concrete<ShapeMark>, Shape> {
   type: 'shape';
 }
@@ -347,6 +352,13 @@ export class Heatmap extends MarkNode<HeatmapMark> {
   }
 }
 
+@defineProps(props)
+export class Path extends MarkNode<PathMark> {
+  constructor() {
+    super({}, 'path');
+  }
+}
+
 @defineProps([...props, { name: 'layout', type: 'value' }])
 export class Pack extends MarkNode<PackMark> {
   constructor() {

src/data/index.ts

@@ -16,6 +16,7 @@ export { WordCloud } from './wordCloud';
 export { Join } from './join';
 export { Slice } from './slice';
 export { KDE } from './kde';
+export { Venn } from './venn';
 
 export type { FetchOptions } from './fetch';
 export type { FoldOptions } from './fold';
@@ -35,3 +36,4 @@ export type { WordCloudOptions } from './wordCloud';
 export type { JoinOptions } from './join';
 export type { SliceOptions } from './slice';
 export type { KDEOptions } from './kde';
+export type { VennOptions } from './venn';