fix(msp): add chart

Author: Zero-Rock

shell/app/common/components/card-list/index.tsx

@@ -19,6 +19,7 @@ import { get } from 'lodash';
 import classnames from 'classnames';
 import EmptyHolder from 'common/components/empty-holder';
 import ErdaIcon from 'common/components/erda-icon';
+import { useInViewPort } from 'common/use-hooks';
 
 interface CardColumnsProps<T> {
   dataIndex: keyof T | string[];
@@ -41,6 +42,7 @@ interface IProps<T = Record<string, any>> {
   rowClassName?: string;
   columns: CardColumnsProps<T>[];
   emptyHolder?: React.ReactNode;
+  onViewChange?: (data: T, flag?: boolean) => void;
 }
 
 const renderChild = <T,>(record: T, columns: CardColumnsProps<T>[], index: number) => {
@@ -64,17 +66,41 @@ const renderChild = <T,>(record: T, columns: CardColumnsProps<T>[], index: numbe
   });
 };
 
+interface IRowProps<T> {
+  rowClass?: string;
+  rowId: string | number;
+  rowClick: () => void;
+  columns: CardColumnsProps<T>[];
+  record: T;
+  index: number;
+  onViewChange?: (data: T, flag?: boolean) => void;
+}
+
+const RowItem = <T,>({ rowClick, rowId, rowClass, record, columns, index, onViewChange }: IRowProps<T>) => {
+  const rowRef = React.useRef();
+  const [isInView] = useInViewPort(rowRef);
+  React.useEffect(() => {
+    onViewChange?.(record, isInView);
+  }, [isInView, record]);
+  return (
+    <Row ref={rowRef} onClick={rowClick} key={rowId} className={rowClass}>
+      {renderChild<T>(record, columns, index)}
+    </Row>
+  );
+};
+
 const CardList = <T,>({
   loading,
   dataSource,
-  rowKey = 'key',
+  rowKey,
   rowClassName,
   columns,
   rowClick,
   slot,
   size = 'default',
   emptyHolder,
   onRefresh,
+  onViewChange
 }: IProps<T>) => {
   return (
     <div className="card-list flex flex-1 flex-col bg-white shadow pb-2">
@@ -114,15 +140,17 @@ const CardList = <T,>({
                   },
                 );
                 return (
-                  <Row
-                    onClick={() => {
+                  <RowItem<T>
+                    rowId={rowId}
+                    rowClass={rowClass}
+                    rowClick={() => {
                       rowClick?.(record);
                     }}
-                    key={rowId}
-                    className={rowClass}
-                  >
-                    {renderChild<T>(record, columns, index)}
-                  </Row>
+                    columns={columns}
+                    index={index}
+                    record={record}
+                    onViewChange={onViewChange}
+                  />
                 );
               })
             : emptyHolder || <EmptyHolder relative />}

shell/app/common/use-hooks.tsx

@@ -932,3 +932,52 @@ export const useFullScreen: IUseFullScreen = (target, options) => {
     },
   ];
 };
+
+type IUseInViewPort = (
+  target: BasicTarget,
+  options?: {
+    rootMargin?: string;
+    threshold?: number | number[];
+    root?: BasicTarget<Element>;
+  },
+) => [boolean | undefined, number | undefined];
+
+export const useInViewPort: IUseInViewPort = (target, options) => {
+  const [state, setState] = React.useState<boolean>();
+  const [ratio, setRatio] = React.useState<number>();
+
+  React.useEffect(
+    () => {
+      const el = getTargetElement(target);
+      if (!el) {
+        return;
+      }
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            setRatio(entry.intersectionRatio);
+            if (entry.isIntersecting) {
+              setState(true);
+            } else {
+              setState(false);
+            }
+          }
+        },
+        {
+          ...options,
+          root: getTargetElement(options?.root),
+        },
+      );
+
+      observer.observe(el);
+
+      return () => {
+        observer.disconnect();
+      };
+    },
+    []
+  );
+
+  return [state, ratio];
+};