refactor: add test for g custom element shape

Aarebecca · Sep 13, 2024 · 39ff395 · 39ff395
1 parent 08c541a
commit 39ff395
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 12 deletions.
diff --git a/perf/gv6.perf.ts b/perf/gv6.perf.ts
@@ -1,10 +1,10 @@
-import { Canvas, Circle, Rect, Line, Path, Polygon, Polyline, Group, Ellipse } from '@antv/g';
-import type { Test } from 'iperf';
-import { Renderer as SVGRenderer } from '@antv/g-svg';
+import { Canvas } from '@antv/g';
 import { Renderer as CanvasRenderer } from '@antv/g-canvas';
+import { Renderer as SVGRenderer } from '@antv/g-svg';
 import { Renderer as WebGLRenderer } from '@antv/g-webgl';
-import { mockData, getShapeCtor, getShapeStyleProps } from './utils';
+import type { Test } from 'iperf';
 import type { ShapeType } from './utils';
+import { getShapeCtor, getShapeStyleProps, mockData } from './utils';
 
 function createShape(type: ShapeType, data: Record<string, any>) {
   const { x, y } = data;
@@ -58,6 +58,8 @@ function Gv6CaseFactor(nodes: number, edges: number, type: ShapeType, renderer:
   // timeout
   if (nodes === 500) test.iteration = 5;
   if (type === 'text') test.iteration = 5;
+  // too slow
+  if (type === 'custom') test.iteration = 3;
   test.after = async (canvas: Canvas) => {
     canvas.destroy();
   };
@@ -100,8 +102,12 @@ export const Gv6_Canvas_100000x50000_Text = Gv6CaseFactor(100, 50, 'text');
 export const Gv6_Canvas_200000x50000_Text = Gv6CaseFactor(200, 50, 'text');
 export const Gv6_Canvas_500000x100000_Text = Gv6CaseFactor(500, 100, 'text');
 
-export const G_SVG_100000x50000_Circle = Gv6CaseFactor(100, 50, "circle", "svg");
-export const G_SVG_200000x50000_Circle = Gv6CaseFactor(200, 50, "circle", "svg");
+export const Gv6_Canvas_100000x50000_Custom = Gv6CaseFactor(100, 50, 'custom');
+export const Gv6_Canvas_200000x50000_Custom = Gv6CaseFactor(200, 50, 'custom');
+export const Gv6_Canvas_500000x100000_Custom = Gv6CaseFactor(500, 100, 'custom');
+
+export const G_SVG_100000x50000_Circle = Gv6CaseFactor(100, 50, 'circle', 'svg');
+export const G_SVG_200000x50000_Circle = Gv6CaseFactor(200, 50, 'circle', 'svg');
 
-export const G_WebGL_10000x5000_Circle = Gv6CaseFactor(10, 5, "circle", "webgl");
-export const G_WebGL_100000x50000_Circle = Gv6CaseFactor(100, 50, "circle", "webgl");
+export const G_WebGL_10000x5000_Circle = Gv6CaseFactor(10, 5, 'circle', 'webgl');
+export const G_WebGL_100000x50000_Circle = Gv6CaseFactor(100, 50, 'circle', 'webgl');
diff --git a/perf/utils/g.ts b/perf/utils/g.ts
@@ -1,7 +1,7 @@
 import type { DisplayObject } from '@antv/g';
-import { Circle, Rect, Line, Path, Polygon, Polyline, Group, Ellipse, Text } from '@antv/g';
+import { Circle, Rect, Line, Path, Polygon, Polyline, Group, Ellipse, Text, CustomElement } from '@antv/g';
 
-export type ShapeType = 'circle' | 'rect' | 'line' | 'path' | 'polygon' | 'polyline' | 'group' | 'text' | 'ellipse';
+export type ShapeType = 'circle' | 'rect' | 'line' | 'path' | 'polygon' | 'polyline' | 'group' | 'text' | 'ellipse' | 'custom';
 
 export function getShapeStyleProps(type: ShapeType, position: { x: number; y: number }, version: 4 | 6): Record<string, any> {
   const commonStyle = {
@@ -64,6 +64,7 @@ export function getShapeStyleProps(type: ShapeType, position: { x: number; y: nu
           [x, y + 20],
         ],
       };
+    case 'custom':
     case 'group':
       return version === 6
         ? {
@@ -111,5 +112,7 @@ export function getShapeCtor(type: ShapeType): new (...args) => DisplayObject {
       return Text;
     case 'ellipse':
       return Ellipse;
+    case 'custom':
+      return class extends CustomElement<any> {};
   }
 }
diff --git a/reports/main.ts b/reports/main.ts
@@ -1,8 +1,7 @@
 import { Chart } from '@antv/g2';
 import graphEngine from './graph-engine.json';
-import renderEngine from './render-engine.json';
 import renderEngineShapes from './render-engine-shapes.json';
-import { data } from 'vis-network';
+import renderEngine from './render-engine.json';
 
 const dataset = {
   'render-engine': renderEngine,

diff --git a/reports/render-engine-shapes.json b/reports/render-engine-shapes.json
@@ -853,6 +853,29 @@
       ],
       "status": "passed"
     },
+    "Gv6_Canvas_100000x50000_Custom": {
+      "time": [
+        {
+          "min": 0.9000000059604645,
+          "max": 4.300000011920929,
+          "median": 1,
+          "avg": 1,
+          "variance": 0,
+          "reliable": false,
+          "key": "init"
+        },
+        {
+          "min": 3326.300000011921,
+          "max": 3389.399999976158,
+          "median": 3367.699999988079,
+          "avg": 3367.699999988079,
+          "variance": 0,
+          "reliable": true,
+          "key": "render"
+        }
+      ],
+      "status": "passed"
+    },
     "Gv6_Canvas_200000x50000_Circle": {
       "time": [
         {
@@ -1060,6 +1083,29 @@
       ],
       "status": "passed"
     },
+    "Gv6_Canvas_200000x50000_Custom": {
+      "time": [
+        {
+          "min": 0.800000011920929,
+          "max": 19.600000023841858,
+          "median": 1.0999999940395355,
+          "avg": 1.0999999940395355,
+          "variance": 0,
+          "reliable": false,
+          "key": "init"
+        },
+        {
+          "min": 6644.299999982119,
+          "max": 7077.799999982119,
+          "median": 6813.9000000059605,
+          "avg": 6813.9000000059605,
+          "variance": 0,
+          "reliable": true,
+          "key": "render"
+        }
+      ],
+      "status": "passed"
+    },
     "Gv6_Canvas_500000x100000_Circle": {
       "time": [
         {
@@ -1266,6 +1312,29 @@
         }
       ],
       "status": "passed"
+    },
+    "Gv6_Canvas_500000x100000_Custom": {
+      "time": [
+        {
+          "min": 0.7999999821186066,
+          "max": 4.4000000059604645,
+          "median": 0.9000000059604645,
+          "avg": 0.9000000059604645,
+          "variance": 0,
+          "reliable": false,
+          "key": "init"
+        },
+        {
+          "min": 17097.90000000596,
+          "max": 17646.5,
+          "median": 17627.29999998212,
+          "avg": 17627.29999998212,
+          "variance": 0,
+          "reliable": true,
+          "key": "render"
+        }
+      ],
+      "status": "passed"
     }
   }
 }