fix: 修复折线的默认宽度和官网demo的报错

packages/f2/src/components/tooltip/tooltipView.tsx

@@ -151,10 +151,13 @@ export default class TooltipView extends Component {
     // 中心点
     const { x } = record;
     const { left: coordLeft, width: coordWidth } = coord;
-    const { y, width, height } = group.get('attrs');
+    const { y, width, height, radius } = group.get('attrs');
     const halfWidth = width / 2;
     // 让 tooltip 限制在 coord 的显示范围内
-    const offsetX = Math.min(Math.max(x - coordLeft - halfWidth, 0), coordWidth - width);
+    const offsetX = Math.min(
+      Math.max(x - coordLeft - halfWidth, -arrowWidth - radius),
+      coordWidth - width + arrowWidth + radius
+    );
 
     // 因为默认是从 coord 的范围内显示的，所以要往上移，移出 coord，避免挡住 geometry
     const offset = Math.min(y, height + arrowWidth); // 因为不能超出 canvas 画布区域，所以最大只能是 y

packages/f2/src/theme.ts

@@ -98,7 +98,7 @@ const Theme = {
   shape: {
     line: {
       default: {
-        lineWidth: '2px',
+        lineWidth: '4px',
         lineJoin: 'round',
         lineCap: 'round',
       },

packages/f2/test/components/geometry/attr.test.tsx

@@ -633,7 +633,7 @@ describe('Geometry - Attr', () => {
     expect(geometryRef.current.records[0].children[0].shape).toEqual({
       lineCap: 'round',
       lineJoin: 'round',
-      lineWidth: 1,
+      lineWidth: 2,
     });
   });
   it('shape = {shape}', () => {
@@ -657,7 +657,7 @@ describe('Geometry - Attr', () => {
     expect(geometryRef.current.records[0].children[0].shape).toEqual({
       lineCap: 'round',
       lineJoin: 'round',
-      lineWidth: 1,
+      lineWidth: 2,
       smooth: true,
     });
   });
@@ -682,12 +682,12 @@ describe('Geometry - Attr', () => {
     expect(geometryRef.current.records[0].children[0].shape).toEqual({
       lineCap: 'round',
       lineJoin: 'round',
-      lineWidth: 1,
+      lineWidth: 2,
     });
     expect(geometryRef.current.records[1].children[0].shape).toEqual({
       lineCap: 'round',
       lineJoin: 'round',
-      lineWidth: 1,
+      lineWidth: 2,
       lineDash: [2, 2],
     });
   });
@@ -722,13 +722,13 @@ describe('Geometry - Attr', () => {
     expect(geometryRef.current.records[0].children[0].shape).toEqual({
       lineCap: 'round',
       lineJoin: 'round',
-      lineWidth: 1,
+      lineWidth: 2,
       lineDash: [2, 2],
     });
     expect(geometryRef.current.records[1].children[0].shape).toEqual({
       lineCap: 'round',
       lineJoin: 'round',
-      lineWidth: 1,
+      lineWidth: 2,
       smooth: true,
     });
   });
@@ -760,13 +760,13 @@ describe('Geometry - Attr', () => {
     expect(geometryRef.current.records[0].children[0].shape).toEqual({
       lineCap: 'round',
       lineJoin: 'round',
-      lineWidth: 1,
+      lineWidth: 2,
       smooth: true,
     });
     expect(geometryRef.current.records[1].children[0].shape).toEqual({
       lineCap: 'round',
       lineJoin: 'round',
-      lineWidth: 1,
+      lineWidth: 2,
       lineDash: [2, 2],
     });
   });
@@ -806,12 +806,12 @@ describe('Geometry - Attr', () => {
     expect(geometryRef.current.records[0].children[0].shape).toEqual({
       lineCap: 'round',
       lineJoin: 'round',
-      lineWidth: 1,
+      lineWidth: 2,
     });
     expect(geometryRef.current.records[1].children[0].shape).toEqual({
       lineCap: 'round',
       lineJoin: 'round',
-      lineWidth: 1,
+      lineWidth: 2,
       lineDash: [2, 2],
     });
   });

packages/site/examples/line/dynamic/demo/dynamic.jsx

@@ -0,0 +1,62 @@
+import { jsx, Component, Canvas, Chart, Line, Axis } from '@antv/f2';
+
+const context = document.getElementById('container').getContext('2d');
+
+const data = [
+  {
+    time: new Date().getTime(),
+    value: 12,
+  },
+];
+
+// 添加数据，模拟数据，可以指定当前时间的偏移的秒
+function getRecord() {
+  return {
+    time: new Date().getTime(),
+    value: Math.random() * 2 + 10,
+  };
+}
+
+class DynamicLine extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data,
+    };
+  }
+
+  didMount() {
+    setInterval(() => {
+      const { data } = this.state;
+      const newData = [].concat(data);
+      newData.push(getRecord());
+      this.setState({ data: newData });
+    }, 1000);
+  }
+
+  render() {
+    const { data } = this.state;
+    return (
+      <Chart
+        data={data}
+        scale={{
+          value: {
+            min: 0,
+          },
+        }}
+      >
+        <Axis field="value" />
+        <Axis field="time" type="timeCat" tickCount={5} mask="mm:ss" />
+        <Line x="time" y="value" />
+      </Chart>
+    );
+  }
+}
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <DynamicLine />
+  </Canvas>
+);
+
+const canvas = new Canvas(props);
+canvas.render();