feat(guide): 增加 PolylineGuide (#1960)

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

@@ -7,6 +7,7 @@ import RectGuideView from './views/Rect';
 import ImageGuideView from './views/Image';
 import TagGuideView from './views/Tag';
 import LottieGuideView from './views/Lottie';
+import PolylineGuideView from './views/Polyline';
 
 const DefaultGuideView = () => null;
 const TextGuide = withGuide(TextGuideView);
@@ -17,6 +18,7 @@ const RectGuide = withGuide(RectGuideView);
 const ImageGuide = withGuide(ImageGuideView);
 const TagGuide = withGuide(TagGuideView);
 const LottieGuide = withGuide(LottieGuideView);
+const PolylineGuide = withGuide(PolylineGuideView);
 
 export { GuideProps };
 
@@ -32,4 +34,5 @@ export {
   ImageGuide,
   TagGuide,
   LottieGuide,
+  PolylineGuide,
 };

packages/f2/src/components/guide/views/Polyline.tsx

@@ -0,0 +1,36 @@
+import { jsx, PolygonStyleProps } from '@antv/f-engine';
+import { GuideProps } from '../withGuide';
+import { deepMix } from '@antv/util';
+
+export interface LineGuideProps extends GuideProps {
+  points?: { x: number; y: number }[] | null;
+  style?: Partial<PolygonStyleProps> | ((record?) => Partial<PolygonStyleProps>);
+  offsetX?: number | string | (number | string)[];
+  offsetY?: number | string | (number | string)[];
+  theme?: any;
+}
+
+export default (props: LineGuideProps, context) => {
+  const { theme = {} } = props;
+  const { points, style, offsetX, offsetY, animation } = deepMix({ ...theme.polyline }, props);
+
+  const checkNaN = points.some((d) => isNaN(d.x) || isNaN(d.y));
+  if (checkNaN) return;
+
+  const offsetXNum = context.px2hd(offsetX);
+  const offsetYNum = context.px2hd(offsetY);
+
+  return (
+    <group>
+      <polyline
+        style={{
+          points: points.map((point) => {
+            return [point.x + offsetXNum, point.y + offsetYNum];
+          }),
+          ...style,
+        }}
+        animation={animation}
+      />
+    </group>
+  );
+};

packages/f2/src/components/index.ts

@@ -17,6 +17,7 @@ export {
   ImageGuide,
   TagGuide,
   LottieGuide,
+  PolylineGuide,
 } from './guide';
 export { default as Tooltip, TooltipProps, withTooltip, TooltipView } from './tooltip';
 export { default as Treemap, TreemapProps, withTreemap, TreemapView } from './treemap';

packages/f2/src/theme.ts

@@ -82,6 +82,15 @@ const guide = {
       stroke: '#1890ff',
     },
   },
+  polyline: {
+    style: {
+      lineWidth: '4px',
+      lineJoin: 'round',
+      lineCap: 'round',
+    },
+    offsetX: 0,
+    offsetY: 0,
+  },
 };
 
 const chart = {

packages/f2/test/components/guide/polyline.test.tsx

@@ -0,0 +1,61 @@
+import { jsx, Canvas, Chart } from '../../../src';
+import { Line, PolylineGuide } from '../../../src/components';
+import { createContext, delay } from '../../util';
+
+const data = [
+  { genre: 'Sports', sold: 275, type: 'a' },
+  { genre: 'Strategy', sold: 115, type: 'a' },
+  { genre: 'Action', sold: 120, type: 'a' },
+  { genre: 'Shooter', sold: 350, type: 'a' },
+  { genre: 'Other', sold: 150, type: 'a' },
+];
+
+describe('PolylineGuide ', () => {
+  it('default', async () => {
+    const context = createContext();
+    const { props } = (
+      <Canvas context={context} pixelRatio={1} animate={false}>
+        <Chart data={data}>
+          <Line x="genre" y="sold" />
+          <PolylineGuide
+            records={data.slice(1, 4)}
+            style={{
+              stroke: 'red',
+            }}
+          />
+        </Chart>
+      </Canvas>
+    );
+
+    const chart = new Canvas(props);
+    await chart.render();
+
+    await delay(300);
+    expect(context).toMatchImageSnapshot();
+  });
+
+  it('offset', async () => {
+    const context = createContext();
+    const { props } = (
+      <Canvas context={context} pixelRatio={1} animate={false}>
+        <Chart data={data}>
+          <Line x="genre" y="sold" />
+          <PolylineGuide
+            records={data.slice(1, 4)}
+            offsetX="10px"
+            offsetY="10px"
+            style={{
+              stroke: '#000',
+            }}
+          />
+        </Chart>
+      </Canvas>
+    );
+
+    const chart = new Canvas(props);
+    await chart.render();
+
+    await delay(300);
+    expect(context).toMatchImageSnapshot();
+  });
+});