Merge pull request #976 from xieliuduo/dev-board

refactor: autoBoard lazyLoad

Author: scottsut

frontend/package.json

@@ -217,4 +217,4 @@
       "path": "cz-conventional-changelog"
     }
   }
-}
+}

frontend/src/app/hooks/useVisibleHidden.ts

@@ -18,7 +18,7 @@
 
 import { useEffect, useState } from 'react';
 
-export const useVisibleHidden = (timeNum: number = 500) => {
+export const useVisibleHidden = (timeNum: number = 0) => {
   const [visible, setVisible] = useState<'visible' | 'hidden'>('hidden');
   useEffect(() => {
     setTimeout(() => {

frontend/src/app/pages/DashBoardPage/components/FreeBoardBackground.tsx

@@ -75,6 +75,5 @@ export default SlideBackground;
 const Warp = styled(StyledBackground)<{ editing: boolean }>`
   position: relative;
   box-shadow: ${p => (p.editing ? '0px 1px 8px 2px #8cb4be;' : '')};
-  transition: all ease-in 200ms;
   transform-origin: 0 0;
 `;

frontend/src/app/pages/DashBoardPage/components/WidgetCore/DataChartWidget/index.tsx

@@ -46,6 +46,7 @@ export const DataChartWidget: React.FC<{}> = memo(() => {
   const { id: widgetId } = widget;
   const { widgetChartClick } = useContext(WidgetMethodContext);
   const { ref, cacheW, cacheH } = useCacheWidthHeight();
+
   const widgetRef = useRef<Widget>(widget);
   useEffect(() => {
     widgetRef.current = widget;
@@ -62,6 +63,7 @@ export const DataChartWidget: React.FC<{}> = memo(() => {
   );
 
   const chart = useMemo(() => {
+    // console.log('_dataChartID', dataChart?.id);
     if (!dataChart) {
       return null;
     }
@@ -115,6 +117,7 @@ export const DataChartWidget: React.FC<{}> = memo(() => {
     }),
     [data],
   );
+
   const chartFrame = useMemo(() => {
     if (!dataChart) {
       return `not found dataChart`;
@@ -166,8 +169,8 @@ export const DataChartWidget: React.FC<{}> = memo(() => {
 });
 const ChartFrameBox = styled.div`
   position: absolute;
-  height: 100%;
   width: 100%;
+  height: 100%;
   overflow: hidden;
 `;
 const Wrap = styled.div`

frontend/src/app/pages/DashBoardPage/components/WidgetToolBar/index.tsx

@@ -109,9 +109,9 @@ const WidgetToolBar: FC = () => {
   return (
     <StyleWrap onClick={ssp} className="widget-tool-bar">
       <Space size={0}>
-        {renderErrorInfo(errInfo)}
-        {renderWaiting()}
         {renderLoading()}
+        {renderWaiting()}
+        {renderErrorInfo(errInfo)}
         {renderLocking()}
         {renderLinkage()}
         {renderWidgetAction()}

frontend/src/app/pages/DashBoardPage/constants.ts

@@ -279,3 +279,9 @@ export const WIDGET_TITLE_ALIGN_OPTIONS = [
   { name: '左', value: TEXT_ALIGN_ENUM.left },
   { name: '中', value: TEXT_ALIGN_ENUM.center },
 ];
+
+export const DefaultWidgetData = {
+  id: '',
+  columns: [],
+  rows: [],
+};

frontend/src/app/pages/DashBoardPage/hooks/useAutoBoardRenderItem.ts

@@ -0,0 +1,102 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useWidgetRowHeight } from 'app/hooks/useWidgetRowHeight';
+import { throttle } from 'echarts';
+import {
+  RefObject,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import { Layout } from 'react-grid-layout';
+import { BoardContext } from '../components/BoardProvider/BoardProvider';
+import { WidgetInfo } from '../pages/Board/slice/types';
+export default function useAutoBoardRenderItem(
+  layoutWidgetInfoMap: Record<string, WidgetInfo>,
+  margin: [number, number],
+) {
+  const { ref, widgetRowHeight } = useWidgetRowHeight();
+
+  const { renderedWidgetById } = useContext(BoardContext);
+
+  const currentLayout = useRef<Layout[]>([]);
+
+  let waitItemInfos = useRef<{ id: string; rendered: boolean }[]>([]);
+
+  const gridWrapRef: RefObject<HTMLDivElement> = useRef(null);
+
+  useEffect(() => {
+    const layoutWaitWidgetInfos = Object.values(layoutWidgetInfoMap).filter(
+      widgetInfo => {
+        return !widgetInfo.rendered;
+      },
+    );
+
+    waitItemInfos.current = layoutWaitWidgetInfos.map(widgetInfo => ({
+      id: widgetInfo.id,
+      rendered: widgetInfo.rendered,
+    }));
+  }, [layoutWidgetInfoMap]);
+
+  const calcItemTop = useCallback(
+    (id: string) => {
+      const curItem = currentLayout.current.find(ele => ele.i === id);
+      if (!curItem) return Infinity;
+      return Math.round((widgetRowHeight + margin[0]) * curItem.y);
+    },
+    [margin, widgetRowHeight],
+  );
+
+  const lazyRender = useCallback(() => {
+    if (!gridWrapRef.current) return;
+    if (!waitItemInfos.current.length) return;
+    const waitingItems = waitItemInfos.current;
+    const { offsetHeight, scrollTop } = gridWrapRef.current! || {};
+    waitingItems.forEach(item => {
+      const itemTop = calcItemTop(item.id);
+      if (itemTop - scrollTop < offsetHeight) {
+        renderedWidgetById(item.id);
+      }
+    });
+  }, [calcItemTop, renderedWidgetById]);
+
+  const ttRender = useMemo(() => throttle(lazyRender, 50), [lazyRender]);
+
+  useEffect(() => {
+    if (gridWrapRef.current) {
+      setImmediate(() => lazyRender());
+      gridWrapRef.current.removeEventListener('scroll', ttRender, false);
+      gridWrapRef.current.addEventListener('scroll', ttRender, false);
+      // issues#339
+      window.addEventListener('resize', ttRender, false);
+    }
+    return () => {
+      gridWrapRef?.current?.removeEventListener('scroll', ttRender, false);
+      window.removeEventListener('resize', ttRender, false);
+    };
+  }, [ttRender, lazyRender]);
+
+  return {
+    ref,
+    gridWrapRef,
+    currentLayout,
+    widgetRowHeight,
+  };
+}

frontend/src/app/pages/DashBoardPage/hooks/useGridLayoutMap.ts

@@ -0,0 +1,54 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useEffect, useState } from 'react';
+import { Layouts } from 'react-grid-layout';
+import { Widget } from '../pages/Board/slice/types';
+export default function useGridLayoutMap(
+  layoutWidgetMap: Record<string, Widget>,
+) {
+  const [layoutMap, setLayoutMap] = useState<Layouts>({});
+  useEffect(() => {
+    const layoutMap: Layouts = {
+      lg: [],
+      xs: [],
+    };
+    Object.values(layoutWidgetMap).forEach(widget => {
+      const lg = widget.config.rect || widget.config.mobileRect || {};
+      const xs = widget.config.mobileRect || widget.config.rect || {};
+      const lock = widget.config.lock;
+      layoutMap.lg.push({
+        i: widget.id,
+        x: lg.x,
+        y: lg.y,
+        w: lg.width,
+        h: lg.height,
+        static: lock,
+      });
+      layoutMap.xs.push({
+        i: widget.id,
+        x: xs.x,
+        y: xs.y,
+        w: xs.width,
+        h: xs.height,
+        static: lock,
+      });
+    });
+    setLayoutMap(layoutMap);
+  }, [layoutWidgetMap]);
+  return layoutMap;
+}