feat: 增加benchMark&修改father配置使用ts编译代码兼容

antvis · Aug 25, 2023 · d1f7246 · d1f7246
1 parent 6ad8677
commit d1f7246
Show file tree

Hide file tree

Showing 45 changed files with 141,415 additions and 39,399 deletions.
diff --git a/packages/f2/.fatherrc.js b/packages/f2/.fatherrc.js
@@ -20,5 +20,12 @@ export default process.env.CI && process.env.CI === 'true'
         //   umd: { name: 'F2JSXRuntime', file: 'jsx-runtime' },
         // },
       },
+      typescriptOpts: {
+        tsconfigOverride: {
+          compilerOptions: {
+            target: 'es5',
+          },
+        },
+      },
       extraRollupPlugins: [...(isBundleVis ? [visualizer()] : [])],
     };
diff --git a/site/.dumi/components/FirstRender.tsx b/site/.dumi/components/FirstRender.tsx
@@ -0,0 +1,69 @@
+import React, { useEffect, useRef } from 'react';
+import Stats from 'stats.js';
+import data from './data.json';
+
+// @ts-ignore
+const stats = new Stats();
+stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+// const $stats = stats.dom;
+// $stats.style.position = 'relative';
+// $stats.style.left = '0px';
+// $stats.style.top = '0px';
+
+document.body.insertBefore(stats.dom, document.body.firstChild);
+
+function renderChart(F2, canvasEl) {
+  const { Axis, Canvas, Chart, Line } = F2;
+  // 清空画布
+  // canvasEl.width = 0;
+  // canvasEl.height = 0;
+
+  function getProps(data) {
+    const vNode = (
+      // @ts-ignore
+      <Canvas
+        context={canvasEl.getContext('2d')}
+        pixelRatio={window.devicePixelRatio}
+        animate={false}
+      >
+        <Chart data={data}>
+          <Axis field="rate" />
+          <Axis field="reportDate" type="timeCat" tickCount={5} />
+          <Line x="reportDate" y="rate" color="codeType" />
+        </Chart>
+      </Canvas>
+    );
+
+    return vNode.props;
+  }
+
+  const props = getProps(data.data);
+  // @ts-ignore
+  const canvas = new Canvas(props);
+  canvas.render();
+  stats.update();
+
+  window.requestAnimationFrame(() => renderChart(F2, canvasEl));
+}
+
+export default (props) => {
+  const { F2 } = props;
+
+  if (!F2) return null;
+
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvasEl = canvasRef.current;
+    if (!canvasEl) return;
+
+    renderChart(F2, canvasEl);
+  }, []);
+
+  return (
+    <div style={{ paddingTop: '50px' }}>
+      <h2>首次渲染</h2>
+      <canvas ref={canvasRef} style={{ width: '100%', height: '260px' }} />
+    </div>
+  );
+};
diff --git a/site/.dumi/pages/benchmark/5/index.tsx → site/.dumi/components/MultiRender.tsx b/site/.dumi/pages/benchmark/5/index.tsx → site/.dumi/components/MultiRender.tsx
@@ -1,10 +1,9 @@
-import React, { useRef, useState } from 'react';
-import Stats from 'stats.js';
-import { Canvas, Chart, Axis, Line } from '@antv/f2';
 import { Renderer as CanvasRenderer } from '@antv/g-mobile-canvas';
 import { Renderer as SVGRenderer } from '@antv/g-mobile-svg';
 import { Renderer as WebGLRenderer } from '@antv/g-mobile-webgl';
-import data from '../data.json';
+import React, { useRef, useState } from 'react';
+import Stats from 'stats.js';
+import data from './data.json';
 
 // @ts-ignore
 const stats = new Stats();
@@ -16,7 +15,8 @@ stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
 
 document.body.insertBefore(stats.dom, document.body.firstChild);
 
-function renderChart(options) {
+function renderChart(F2, options) {
+  const { Canvas, Chart, Axis, Line } = F2;
   function getProps(data) {
     const { props } = (
       // @ts-ignore
@@ -49,8 +49,10 @@ function renderChart(options) {
   return canvas;
 }
 
-export default () => {
-  const [canvasInstance, setCanvas] = useState<Canvas | null>(null);
+export default ({ F2 }) => {
+  if (!F2) return null;
+  const { Canvas } = F2;
+  const [canvasInstance, setCanvas] = useState<typeof Canvas | null>(null);
 
   const containerRef = useRef<HTMLDivElement>(null);
   const selectRef = useRef<HTMLSelectElement>(null);
@@ -65,14 +67,17 @@ export default () => {
       canvasEl.style.height = '100%';
       container.appendChild(canvasEl);
       const canvasRenderer = new CanvasRenderer();
-      const canvas = renderChart({ renderer: canvasRenderer, context: canvasEl.getContext('2d') });
+      const canvas = renderChart(F2, {
+        renderer: canvasRenderer,
+        context: canvasEl.getContext('2d'),
+      });
       setCanvas(canvas);
       return;
     }
     if (value === 'svg') {
       const svgRenderer = new SVGRenderer();
       const { width, height } = container.getBoundingClientRect();
-      const canvas = renderChart({ renderer: svgRenderer, container, width, height });
+      const canvas = renderChart(F2, { renderer: svgRenderer, container, width, height });
       setCanvas(canvas);
       return;
     }
@@ -82,7 +87,7 @@ export default () => {
       canvasEl.style.width = '100%';
       canvasEl.style.height = '100%';
       container.appendChild(canvasEl);
-      const canvas = renderChart({
+      const canvas = renderChart(F2, {
         renderer: webglRenderer,
         context: canvasEl.getContext('webgl'),
       });
@@ -103,7 +108,7 @@ export default () => {
 
   return (
     <div style={{ paddingTop: '50px' }}>
-      <h2>F2 5.x</h2>
+      <h2>二次渲染</h2>
       <select ref={selectRef} onChange={onSelectChange}>
         <option value="canvas">canvas 2d</option>
         <option value="svg">svg</option>
@@ -113,7 +118,6 @@ export default () => {
       <button onClick={onRender} style={{ marginRight: '10px' }}>
         render
       </button>
-      <button style={{ marginRight: '10px' }}>pinch</button>
     </div>
   );
 };
diff --git a/...i/pages/benchmark/5-gesture/index_old.tsx → site/.dumi/components/Pan.tsx b/...i/pages/benchmark/5-gesture/index_old.tsx → site/.dumi/components/Pan.tsx
@@ -1,9 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import Stats from 'stats.js';
-import data from '../data.json';
-import { Axis, Canvas, Chart, Line, Tooltip } from './f2_no_opt';
-// import { Axis, Canvas, Chart, Line, Tooltip } from '@antv/f2';
-import { delay, gestureSimulator, isTouchEvent } from '../utils';
+import { gestureSimulator, isTouchEvent } from '../utils';
+import data from './data.json';
 
 // @ts-ignore
 const stats = new Stats();
@@ -15,7 +13,9 @@ stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
 
 document.body.insertBefore(stats.dom, document.body.firstChild);
 
-function renderChart(canvasEl: HTMLCanvasElement) {
+function renderChart(F2, canvasEl: HTMLCanvasElement) {
+  const { Axis, Canvas, Chart, Line, ScrollBar } = F2;
+
   // 清空画布
   canvasEl.width = 0;
   canvasEl.height = 0;
@@ -32,7 +32,7 @@ function renderChart(canvasEl: HTMLCanvasElement) {
           <Axis field="rate" />
           <Axis field="reportDate" type="timeCat" tickCount={5} />
           <Line x="reportDate" y="rate" color="codeType" />
-          <Tooltip showCrosshairs crosshairsType="xy"></Tooltip>
+          <ScrollBar mode="x" range={[0, 0.2]} />
         </Chart>
       </Canvas>
     );
@@ -59,31 +59,31 @@ function renderChart(canvasEl: HTMLCanvasElement) {
       x: i,
       y: 35,
     });
-    if (i >= canvasEl.width - 400) i = 0;
+    if (i >= canvasEl.width / 2) i = 0;
     window.requestAnimationFrame(loopTouchmove);
   };
 
   setTimeout(async () => {
-    gestureSimulator(canvasEl, 'touchstart', { x: 60, y: 170 });
-    await delay(450);
+    gestureSimulator(canvasEl, 'touchstart', { x: 350, y: 35 });
     loopTouchmove();
   });
 
   return canvas;
 }
-export default () => {
+
+export default ({ F2 }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
     const canvasEl = canvasRef.current;
     if (!canvasEl) return;
 
-    renderChart(canvasEl);
+    renderChart(F2, canvasEl);
   }, []);
 
   return (
     <div style={{ paddingTop: '50px' }}>
-      <h2>每个元素绑定事件</h2>
+      <h2>Pan</h2>
       <canvas ref={canvasRef} style={{ width: '100%', height: '260px' }} />
     </div>
   );

diff --git a/....dumi/pages/benchmark/5-gesture/index.tsx → site/.dumi/components/Pinch.tsx b/....dumi/pages/benchmark/5-gesture/index.tsx → site/.dumi/components/Pinch.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import Stats from 'stats.js';
-import data from '../data.json';
-import { delay, gestureSimulator, isTouchEvent } from '../utils';
-import { Axis, Canvas, Chart, Line, Tooltip } from './f2_opt';
+import { gestureSimulator, isTouchEvent } from '../utils';
+import data from './data.json';
 
 // @ts-ignore
 const stats = new Stats();
@@ -11,15 +10,12 @@ stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
 // $stats.style.position = 'relative';
 // $stats.style.left = '0px';
 // $stats.style.top = '0px';
-const isTouch = (eventType) => {
-  if (eventType.indexOf('touch') !== -1) return true;
-  if (eventType.indexOf('press') !== -1) return true;
-  return false;
-};
 
 document.body.insertBefore(stats.dom, document.body.firstChild);
 
-function renderChart(canvasEl: HTMLCanvasElement) {
+function renderChart(F2, canvasEl: HTMLCanvasElement) {
+  const { Axis, Canvas, Chart, Line, ScrollBar } = F2;
+
   // 清空画布
   canvasEl.width = 0;
   canvasEl.height = 0;
@@ -36,7 +32,8 @@ function renderChart(canvasEl: HTMLCanvasElement) {
           <Axis field="rate" />
           <Axis field="reportDate" type="timeCat" tickCount={5} />
           <Line x="reportDate" y="rate" color="codeType" />
-          <Tooltip showCrosshairs crosshairsType="xy"></Tooltip>
+          <ScrollBar mode="x" range={[0, 0.7]} />
+          <ScrollBar mode="y" range={[0, 0.7]} />
         </Chart>
       </Canvas>
     );
@@ -56,39 +53,47 @@ function renderChart(canvasEl: HTMLCanvasElement) {
     stats.update();
   });
 
-  let i = 0;
+  let flag = false;
   const loopTouchmove = () => {
-    i++;
-    gestureSimulator(canvasEl, 'touchmove', {
-      x: i,
-      y: 35,
-    });
-    if (i >= canvasEl.width - 400) i = 0;
+    if (flag) {
+      gestureSimulator(canvasEl, 'touchmove', [
+        { x: 114, y: 114 },
+        { x: 186, y: 186 },
+      ]);
+    } else {
+      gestureSimulator(canvasEl, 'touchmove', [
+        { x: 50, y: 50 },
+        { x: 260, y: 260 },
+      ]);
+    }
+    flag = !flag;
     window.requestAnimationFrame(loopTouchmove);
   };
 
   setTimeout(async () => {
-    gestureSimulator(canvasEl, 'touchstart', { x: 60, y: 35 });
-    await delay(450);
+    gestureSimulator(canvasEl, 'touchstart', [
+      { x: 50, y: 50 },
+      { x: 260, y: 260 },
+    ]);
     loopTouchmove();
   });
 
   return canvas;
 }
 
-export default () => {
+export default ({ F2 }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
     const canvasEl = canvasRef.current;
     if (!canvasEl) return;
 
-    renderChart(canvasEl);
+    renderChart(F2, canvasEl);
   }, []);
 
   return (
     <div style={{ paddingTop: '50px' }}>
-      <h2>F2 latest</h2>
+      <h2>Pinch</h2>
       <canvas ref={canvasRef} style={{ width: '100%', height: '260px' }} />
     </div>
   );

diff --git a/...i/pages/benchmark/5-gesture/index_wcc.tsx → site/.dumi/components/Tooltip.tsx b/...i/pages/benchmark/5-gesture/index_wcc.tsx → site/.dumi/components/Tooltip.tsx
@@ -1,11 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import Stats from 'stats.js';
-import data from '../data.json';
 import { delay, gestureSimulator, isTouchEvent } from '../utils';
-import * as WCC from './wcc';
-
-const { F2 } = WCC;
-const { Axis, Canvas, Chart, Line, Tooltip } = F2;
+import data from './data.json';
 
 // @ts-ignore
 const stats = new Stats();
@@ -17,7 +13,9 @@ stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
 
 document.body.insertBefore(stats.dom, document.body.firstChild);
 
-function renderChart(canvasEl: HTMLCanvasElement) {
+function renderChart(F2, canvasEl: HTMLCanvasElement) {
+  const { Axis, Canvas, Chart, Line, Tooltip } = F2;
+
   // 清空画布
   canvasEl.width = 0;
   canvasEl.height = 0;
@@ -74,19 +72,19 @@ function renderChart(canvasEl: HTMLCanvasElement) {
   return canvas;
 }
 
-export default () => {
+export default ({ F2 }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
     const canvasEl = canvasRef.current;
     if (!canvasEl) return;
 
-    renderChart(canvasEl);
+    renderChart(F2, canvasEl);
   }, []);
 
   return (
     <div style={{ paddingTop: '50px' }}>
-      <h2>F2 latest</h2>
+      <h2>Tooltip</h2>
       <canvas ref={canvasRef} style={{ width: '100%', height: '260px' }} />
     </div>
   );