feat: 修改仪表盘并添加demo

packages/f2/src/components/gauge/gaugeView.tsx

@@ -0,0 +1,64 @@
+import { jsx } from '../../jsx';
+
+export default (props) => {
+  const { center, startAngle, endAngle, r, percent, ticks } = props;
+  const { x, y } = center;
+  const diff = endAngle - startAngle;
+  return (
+    <group>
+      <arc
+        attrs={{
+          x,
+          y,
+          r,
+          startAngle,
+          endAngle,
+          lineWidth: '20px',
+          lineCap: 'round',
+          stroke: '#e7e7e7',
+        }}
+      />
+      <arc
+        attrs={{
+          x,
+          y,
+          r,
+          startAngle,
+          endAngle: startAngle,
+          lineWidth: '40px',
+          lineCap: 'round',
+          stroke: '#0075ff',
+        }}
+        animation={{
+          appear: {
+            easing: 'linear',
+            duration: 500,
+            property: ['endAngle'],
+            start: {
+              endAngle: startAngle,
+            },
+            end: {
+              endAngle: startAngle + diff * percent,
+            },
+          },
+        }}
+      />
+      {ticks.map((tick) => {
+        const { start, end } = tick;
+        return (
+          <line
+            attrs={{
+              x1: start.x,
+              y1: start.y,
+              x2: end.x,
+              y2: end.y,
+              lineWidth: '6px',
+              lineCap: 'round',
+              stroke: '#e7e7e7',
+            }}
+          />
+        );
+      })}
+    </group>
+  );
+};

packages/f2/src/components/gauge/index.tsx

@@ -1,87 +1,5 @@
-import { jsx } from '../../jsx';
-import Component from '../../base/component';
+import withGauge from './withGauge';
+import GaugeView from './gaugeView';
 
-const getPoint = (cener, angle, r) => {
-  const x = cener.x + Math.cos(angle) * r;
-  const y = cener.y + Math.sin(angle) * r;
-  return { x, y };
-};
-
-const getTicks = (start, end, tickCount) => {
-  const ticks = [];
-  const diff = end - start;
-  for (let i = 0; i <= tickCount; i++) {
-    ticks.push(start + (diff * i) / tickCount);
-  }
-  return ticks;
-};
-
-class Guage extends Component {
-  render() {
-    const { center, startAngle, endAngle, r, percent, tickCount } = this.props;
-
-    const diff = endAngle - startAngle;
-    const { x, y } = center;
-    const ticks = getTicks(startAngle, endAngle, tickCount);
-    return (
-      <group>
-        <arc
-          attrs={{
-            x,
-            y,
-            r,
-            startAngle,
-            endAngle,
-            lineWidth: '20px',
-            lineCap: 'round',
-            stroke: '#e7e7e7',
-          }}
-        />
-        <arc
-          attrs={{
-            x,
-            y,
-            r,
-            startAngle,
-            endAngle: startAngle,
-            lineWidth: '40px',
-            lineCap: 'round',
-            stroke: '#0075ff',
-          }}
-          animation={{
-            appear: {
-              easing: 'linear',
-              duration: 500,
-              property: ['endAngle'],
-              start: {
-                endAngle: startAngle,
-              },
-              end: {
-                endAngle: startAngle + diff * percent,
-              },
-            },
-          }}
-        />
-        {ticks.map((tick) => {
-          const start = getPoint(center, tick, 65);
-          const end = getPoint(center, tick, 75);
-          return (
-            <line
-              attrs={{
-                x1: start.x,
-                y1: start.y,
-                x2: end.x,
-                y2: end.y,
-                lineWidth: '6px',
-                lineCap: 'round',
-                stroke: '#e7e7e7',
-              }}
-            />
-          );
-        })}
-      </group>
-    );
-  }
-}
-
-export default Guage;
+export { withGauge, GaugeView };
+export default withGauge(GaugeView);

packages/f2/src/components/gauge/withGauge.tsx

@@ -0,0 +1,52 @@
+import { jsx } from '../../jsx';
+import Component from '../../base/component';
+
+const getPoint = (cener, angle, r) => {
+  const x = cener.x + Math.cos(angle) * r;
+  const y = cener.y + Math.sin(angle) * r;
+  return { x, y };
+};
+
+const getTicks = (
+  start: number,
+  end: number,
+  tickCount: number,
+  center,
+  r: number,
+  tickOffset: number,
+  tickLength: number
+) => {
+  const ticks = [];
+  const diff = end - start;
+  for (let i = 0; i <= tickCount; i++) {
+    const tickValue = start + (diff * i) / tickCount;
+    const startPoint = getPoint(center, tickValue, r + tickOffset - tickLength);
+    const endPoint = getPoint(center, tickValue, r + tickOffset);
+    ticks.push({
+      tickValue,
+      start: startPoint,
+      end: endPoint,
+    });
+  }
+  return ticks;
+};
+
+export default (View) => {
+  return class Guage extends Component {
+    render() {
+      const { props, context } = this;
+      const { startAngle, endAngle, tickCount, center, r, tickOffset, tickLength } = props;
+
+      const ticks = getTicks(
+        startAngle,
+        endAngle,
+        tickCount,
+        center,
+        context.px2hd(r),
+        context.px2hd(tickOffset),
+        context.px2hd(tickLength)
+      );
+      return <View {...props} ticks={ticks} />;
+    }
+  };
+};

packages/f2/test/components/gauge/gauge.test.tsx

@@ -14,6 +14,8 @@ describe('Gauge', () => {
           percent={0.5}
           r="200px"
           tickCount={6}
+          tickOffset="-40px"
+          tickLength="20px"
         />
       </Canvas>
     );

packages/site/examples/other/area/demo/gauge.js

@@ -0,0 +1,21 @@
+import { jsx, Canvas, Gauge } from '@antv/f2';
+
+const context = document.getElementById('container').getContext('2d');
+
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Gauge
+      center={{ x: 150, y: 150 }}
+      startAngle={Math.PI}
+      endAngle={Math.PI * 2}
+      percent={0.5}
+      r="200px"
+      tickCount={6}
+      tickOffset="-40px"
+      tickLength="20px"
+    />
+  </Canvas>
+);
+
+const chart = new Canvas(props);
+chart.render();

packages/site/examples/other/area/demo/meta.json

@@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "gauge.js",
+      "title": "仪表盘",
+      "screenshot": "https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/85e35a0f-177f-4527-8960-f991d2077990.png"
+    }
+  ]
+}

packages/site/examples/other/area/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Basic Gauge
+order: 0
+---

packages/site/examples/other/area/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 仪表盘
+order: 0
+---