feat: add comparison of g

Aarebecca · Sep 11, 2024 · 93db80a · 93db80a
1 parent 2c73011
commit 93db80a
Show file tree

Hide file tree

Showing 7 changed files with 323 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -9,13 +9,15 @@
   "dependencies": {
     "@antv/g": "6.0.13",
     "@antv/g-canvas": "2.0.12",
+    "@antv/g-canvas-legacy": "npm:@antv/[email protected]",
+    "@antv/g-svg-legacy": "npm:@antv/[email protected]",
     "@antv/g-svg": "2.0.11",
     "@antv/g-webgl": "^2.0.16",
     "cytoscape": "^3.30.2",
     "g6v4": "npm:@antv/[email protected]",
     "g6v5": "npm:@antv/[email protected]",
     "graphology": "^0.25.4",
-    "iperf": "0.1.0-beta.14",
+    "iperf": "^0.1.0-beta.15",
     "sigma": "3.0.0-beta.29",
     "vis-data": "^7.1.9",
     "vis-network": "^9.1.9"

diff --git a/perf/gv4.perf.ts b/perf/gv4.perf.ts
@@ -0,0 +1,55 @@
+import { Canvas } from '@antv/g-canvas-legacy';
+import { mockData } from './utils';
+import type { Test } from 'iperf';
+
+export function GV4CaseFactor(nodes: number, edges: number): Test {
+  return async ({ container, perf }) => {
+    const data = mockData(nodes, edges, { lib: 'g6v4' });
+
+    let resolve: () => void;
+    let promise = new Promise<void>((r) => (resolve = r));
+
+    perf.mark('start init');
+    const canvas = new Canvas({
+      container,
+      width: 500,
+      height: 500,
+      pixelRatio: 2,
+      autoDraw: false,
+      drawFrameCallback: () => {
+        perf.mark('end render');
+        perf.measure('render', 'end init', 'end render');
+        resolve();
+      },
+    });
+
+    perf.mark('end init');
+    perf.measure('init', 'start init', 'end init');
+
+    const group = canvas.addGroup();
+
+    data.nodes.forEach((node) => {
+      const { x, y } = node;
+      group.addShape('circle', {
+        attrs: {
+          x,
+          y,
+          r: 20,
+          fill: '#d3d3d3',
+          stroke: '#000000',
+        },
+      });
+    });
+
+    canvas.draw();
+
+    await promise;
+  };
+}
+
+export const Gv4_Canvas_100000x50000 = GV4CaseFactor(100000, 50000);
+Gv4_Canvas_100000x50000.only = true;
+export const Gv4_Canvas_200000x50000 = GV4CaseFactor(200000, 50000);
+Gv4_Canvas_200000x50000.only = true;
+export const Gv4_Canvas_500000x100000 = GV4CaseFactor(500000, 100000);
+Gv4_Canvas_500000x100000.only = true;
diff --git a/perf/gv6.perf.ts b/perf/gv6.perf.ts
@@ -5,7 +5,7 @@ import { Renderer as CanvasRenderer } from '@antv/g-canvas';
 import { Renderer as WebGLRenderer } from '@antv/g-webgl';
 import { mockData } from './utils';
 
-function GV6CaseFactor(
+function Gv6CaseFactor(
   nodes: number,
   edges: number,
   renderer: 'canvas' | 'svg' | 'webgl' = 'canvas'
@@ -52,25 +52,15 @@ function GV6CaseFactor(
   };
 }
 
-export const G_Canvas_100x100 = GV6CaseFactor(100, 100);
-export const G_Canvas_1000x0 = GV6CaseFactor(1000, 0);
-export const G_Canvas_1000x1000 = GV6CaseFactor(1000, 1000);
-export const G_Canvas_5000x1000 = GV6CaseFactor(5000, 1000);
-export const G_Canvas_10000x5000 = GV6CaseFactor(10000, 5000);
-export const G_Canvas_100000x50000 = GV6CaseFactor(100000, 50000);
-export const G_Canvas_200000x50000 = GV6CaseFactor(200000, 50000);
+export const Gv6_Canvas_100000x50000 = Gv6CaseFactor(100000, 50000);
+Gv6_Canvas_100000x50000.only = true;
+export const Gv6_Canvas_200000x50000 = Gv6CaseFactor(200000, 50000);
+Gv6_Canvas_200000x50000.only = true;
+export const Gv6_Canvas_500000x100000 = Gv6CaseFactor(500000, 100000);
+Gv6_Canvas_500000x100000.only = true;
 
-export const G_SVG_100x100 = GV6CaseFactor(100, 100, 'svg');
-export const G_SVG_1000x0 = GV6CaseFactor(1000, 0, 'svg');
-export const G_SVG_1000x1000 = GV6CaseFactor(1000, 1000, 'svg');
-export const G_SVG_5000x1000 = GV6CaseFactor(5000, 1000, 'svg');
-export const G_SVG_10000x5000 = GV6CaseFactor(10000, 5000, 'svg');
-export const G_SVG_100000x50000 = GV6CaseFactor(100000, 50000, 'svg');
-export const G_SVG_200000x50000 = GV6CaseFactor(200000, 50000, 'svg');
+export const G_SVG_100000x50000 = Gv6CaseFactor(100000, 50000, 'svg');
+export const G_SVG_200000x50000 = Gv6CaseFactor(200000, 50000, 'svg');
 
-export const G_WebGL_100x100 = GV6CaseFactor(100, 100, 'webgl');
-export const G_WebGL_1000x0 = GV6CaseFactor(1000, 0, 'webgl');
-export const G_WebGL_1000x1000 = GV6CaseFactor(1000, 1000, 'webgl');
-export const G_WebGL_5000x1000 = GV6CaseFactor(5000, 1000, 'webgl');
-export const G_WebGL_10000x5000 = GV6CaseFactor(10000, 5000, 'webgl');
-export const G_WebGL_100000x50000 = GV6CaseFactor(100000, 50000, 'webgl');
+export const G_WebGL_10000x5000 = Gv6CaseFactor(10000, 5000, 'webgl');
+export const G_WebGL_100000x50000 = Gv6CaseFactor(100000, 50000, 'webgl');
diff --git a/perf/utils/data.ts b/perf/utils/data.ts
@@ -1,14 +1,14 @@
 interface MockDataOptions {
-  lib: 'g6v5' | 'g6v4' | 'g' | 'cytoscape' | 'vis-network';
+  lib?: 'g6v5' | 'g6v4' | 'g' | 'cytoscape' | 'vis-network';
   size?: [number, number];
 }
 
 export function mockData<T extends Record<string, any>>(
   nodes: number,
   edges: number,
-  options: MockDataOptions
+  options?: MockDataOptions
 ): T {
-  const { lib, size: [width, height] = [500, 500] } = options;
+  const { lib, size: [width, height] = [500, 500] } = options || {};
   const data = {
     nodes: Array.from({ length: nodes }, (_, i) => {
       const datum = { id: `node-${i}` };
@@ -22,6 +22,7 @@ export function mockData<T extends Record<string, any>>(
         Object.assign(datum, position);
       else if (lib === 'cytoscape')
         Object.assign(datum, { position, data: { id: datum.id, ...position } });
+      else Object.assign(datum, position);
 
       return datum;
     }),

diff --git a/reports/13849761_2024-09-06_10-49-38.json → reports/graph-engine.json b/reports/13849761_2024-09-06_10-49-38.json → reports/graph-engine.json
diff --git a/reports/main.ts b/reports/main.ts
@@ -1,58 +1,84 @@
 import { Chart } from '@antv/g2';
-import data from './13849761_2024-09-06_10-49-38.json';
-
-const reports = data.reports;
-
-const x = [
-  '100x100',
-  '1000x0',
-  '1000x1000',
-  '5000x1000',
-  '10000x5000',
-  '100000x50000',
-  '200000x50000',
-];
-
-const value = Object.entries(reports)
-  .reduce((acc, [key, values]) => {
-    const [, lib, renderer, scale] = key.match(/([\S]+)_([\S]+)_([\S]+)/) || [];
-    values.time.forEach(({ key, avg }) => {
-      if (key === 'render') acc.push({ lib, renderer, scale, key, avg });
-    });
-    return acc;
-  }, [] as Record<string, any>)
-  .sort((a, b) => x.indexOf(a.scale) - x.indexOf(b.scale));
-
-const chart = new Chart({
-  container: 'container',
-  autoFit: true,
-  paddingLeft: 60,
-  paddingBottom: 40,
-});
-
-const facetRect = chart.facetRect().data(value).encode('y', 'renderer');
-
-facetRect
-  .interval()
-  .encode('x', 'scale')
-  .encode('y', 'avg')
-  .encode('color', 'lib')
-  .scale('y', {
-    type: 'sqrt',
-    nice: true,
-  })
-  .axis('x', {
-    title: '图规模(节点数x边数)',
-  })
-  .axis('y', {
-    title: '平均渲染耗时/ms',
-  })
-  .transform({
-    type: 'dodgeX',
-  })
-  .interaction('tooltip', {
-    shared: true,
-  })
-  .interaction('elementHighlight', { background: true });
-
-chart.render();
+import graphEngine from './graph-engine.json';
+import renderEngine from './render-engine.json';
+
+const dataset = {
+  'render-engine': renderEngine,
+  'graph-engine': graphEngine,
+} as const;
+
+function renderSelect() {
+  const select = document.createElement('select');
+  Object.keys(dataset).forEach((key) => {
+    const option = document.createElement('option');
+    option.value = key;
+    option.textContent = key;
+    select.appendChild(option);
+  });
+  document.body.prepend(select);
+
+  select.onchange = () => renderChart(dataset[select.value]);
+  renderChart(dataset['graph-engine']);
+}
+
+function renderChart(data: (typeof dataset)[keyof typeof dataset]) {
+  const reports = data.reports;
+
+  const x = [
+    '100x100',
+    '1000x0',
+    '1000x1000',
+    '5000x1000',
+    '10000x5000',
+    '100000x50000',
+    '200000x50000',
+    '500000x100000',
+  ];
+
+  const value = Object.entries(reports)
+    .reduce((acc, [key, values]) => {
+      const [, lib, renderer, scale] =
+        key.match(/([\S]+)_([\S]+)_([\S]+)/) || [];
+      values.time.forEach(({ key, avg }) => {
+        if (key === 'render') acc.push({ lib, renderer, scale, key, avg });
+      });
+      return acc;
+    }, [] as Record<string, any>)
+    .sort((a, b) => x.indexOf(a.scale) - x.indexOf(b.scale));
+
+  const chart = new Chart({
+    container: 'container',
+    autoFit: true,
+    paddingLeft: 60,
+    paddingBottom: 40,
+  });
+
+  const facetRect = chart.facetRect().data(value).encode('y', 'renderer');
+
+  facetRect
+    .interval()
+    .encode('x', 'scale')
+    .encode('y', 'avg')
+    .encode('color', 'lib')
+    .scale('y', {
+      type: 'sqrt',
+      nice: true,
+    })
+    .axis('x', {
+      title: '图规模(节点数x边数)',
+    })
+    .axis('y', {
+      title: '平均渲染耗时/ms',
+    })
+    .transform({
+      type: 'dodgeX',
+    })
+    .interaction('tooltip', {
+      shared: true,
+    })
+    .interaction('elementHighlight', { background: true });
+
+  chart.render();
+}
+
+renderSelect();