css

src/pages/dashboard/analysis/components/Charts/Bar/index.tsx

@@ -1,8 +1,8 @@
 import { Axis, Chart, Geom, Tooltip } from 'bizcharts';
-import React, { Component } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Debounce from 'lodash.debounce';
-import autoHeight from '../autoHeight';
 import useStyles from '../index.style';
+
 export type BarProps = {
   title: React.ReactNode;
   color?: string;
@@ -16,123 +16,107 @@ export type BarProps = {
   autoLabel?: boolean;
   style?: React.CSSProperties;
 };
-class Bar extends Component<
+const Bar: React.FC<BarProps> = ({
-  BarProps,
+  height = 1,
-  {
+  title,
-    autoHideXLabels: boolean;
+  forceFit = true,
-  }
+  data,
-> {
+  color = 'rgba(24, 144, 255, 0.85)',
-  state = {
+  padding,
-    autoHideXLabels: false,
+  autoLabel = true,
-  };
+}) => {
-  root: HTMLDivElement | undefined = undefined;
+  const { styles } = useStyles();
-  node: HTMLDivElement | undefined = undefined;
+  const [autoHideXLabels, setAutoHideXLabels] = useState(false);
-  resize = Debounce(() => {
+  const rootRef = useRef<HTMLDivElement | null>(null);
-    if (!this.node || !this.node.parentNode) {
+  const nodeRef = useRef<HTMLDivElement | null>(null);
-      return;
+
-    }
+  const resize = useCallback(
-    const canvasWidth = (this.node.parentNode as HTMLDivElement).clientWidth;
+    Debounce(() => {
-    const { data = [], autoLabel = true } = this.props;
+      if (!nodeRef.current || !nodeRef.current.parentNode) {
-    if (!autoLabel) {
+        return;
-      return;
+      }
-    }
+      const canvasWidth = nodeRef.current.parentNode?.clientWidth || 0;
-    const minWidth = data.length * 30;
+      if (!autoLabel) {
-    const { autoHideXLabels } = this.state;
+        return;
-    if (canvasWidth <= minWidth) {
-      if (!autoHideXLabels) {
-        this.setState({
-          autoHideXLabels: true,
-        });
       }
-    } else if (autoHideXLabels) {
+      const minWidth = data?.length * 30;
-      this.setState({
+      if (canvasWidth <= minWidth) {
-        autoHideXLabels: false,
+        if (!autoHideXLabels) {
-      });
+          setAutoHideXLabels(true);
-    }
+        }
-  }, 500);
+      } else if (autoHideXLabels) {
-  componentDidMount() {
+        setAutoHideXLabels(false);
-    window.addEventListener('resize', this.resize, {
+      }
+    }, 500),
+    [autoHideXLabels, autoLabel, data?.length],
+  );
+
+  useEffect(() => {
+    window.addEventListener('resize', resize, {
       passive: true,
     });
-  }
+    return () => {
-  componentWillUnmount() {
+      window.removeEventListener('resize', resize);
-    window.removeEventListener('resize', this.resize);
-  }
-  handleRoot = (n: HTMLDivElement) => {
-    this.root = n;
-  };
-  handleRef = (n: HTMLDivElement) => {
-    this.node = n;
-  };
-  render() {
-    const {
-      height = 1,
-      title,
-      forceFit = true,
-      data,
-      color = 'rgba(24, 144, 255, 0.85)',
-      padding,
-    } = this.props;
-    const { autoHideXLabels } = this.state;
-    const scale = {
-      x: {
-        type: 'cat',
-      },
-      y: {
-        min: 0,
-      },
     };
-    const tooltip: [
+  }, [resize]);
-      string,
+
-      (...args: any[]) => {
+  const handleRoot = useCallback((n: HTMLDivElement) => {
-        name?: string;
+    rootRef.current = n;
-        value: string;
+  }, []);
-      },
+
-    ] = [
+  const handleRef = useCallback((n: HTMLDivElement) => {
-      'x*y',
+    nodeRef.current = n;
-      (x: string, y: string) => ({
+  }, []);
-        name: x,
+
-        value: y,
+  const scale = {
-      }),
+    x: {
-    ];
+      type: 'cat',
-    return (
+    },
-      <div
+    y: {
-        className={styles.chart}
+      min: 0,
-        style={{
+    },
-          height,
+  };
-        }}
+
-        ref={this.handleRoot}
+  const tooltip = [
-      >
+    'x*y',
-        <div ref={this.handleRef}>
+    (x: string, y: string) => ({
-          {title && (
+      name: x,
-            <h4
+      value: y,
-              style={{
+    }),
-                marginBottom: 20,
+  ];
-              }}
+
-            >
+  return (
-              {title}
+    <div className={styles.chart} style={{ height }} ref={handleRoot}>
-            </h4>
+      <div ref={handleRef}>
-          )}
+        {title && (
-          <Chart
+          <h4
-            scale={scale}
+            style={{
-            height={title ? height - 41 : height}
+              marginBottom: 20,
-            forceFit={forceFit}
+            }}
-            data={data}
-            padding={padding || 'auto'}
           >
-            <Axis
+            {title}
-              name="x"
+          </h4>
-              title={false}
+        )}
-              label={autoHideXLabels ? undefined : {}}
+        <Chart
-              tickLine={autoHideXLabels ? undefined : {}}
+          scale={scale}
-            />
+          height={title ? height - 41 : height}
-            <Axis name="y" min={0} />
+          forceFit={forceFit}
-            <Tooltip showTitle={false} crosshairs={false} />
+          data={data}
-            <Geom type="interval" position="x*y" color={color} tooltip={tooltip} />
+          padding={padding || 'auto'}
-          </Chart>
+        >
-        </div>
+          <Axis
+            name="x"
+            title={false}
+            label={autoHideXLabels ? undefined : {}}
+            tickLine={autoHideXLabels ? undefined : {}}
+          />
+          <Axis name="y" min={0} />
+          <Tooltip showTitle={false} crosshairs={false} />
+          <Geom type="interval" position="x*y" color={color} tooltip={tooltip} />
+        </Chart>
       </div>
-    );
+    </div>
-  }
+  );
-}
+};
-export default autoHeight()(Bar);
+
+export default Bar;

src/pages/dashboard/analysis/components/Charts/autoHeight.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-
-export type IReactComponent<P = any> = React.ComponentClass<P> | React.ClassicComponentClass<P>;
-
-function computeHeight(node: HTMLDivElement) {
-  const { style } = node;
-  style.height = '100%';
-  const totalHeight = parseInt(`${getComputedStyle(node).height}`, 10);
-  const padding =
-    parseInt(`${getComputedStyle(node).paddingTop}`, 10) +
-    parseInt(`${getComputedStyle(node).paddingBottom}`, 10);
-  return totalHeight - padding;
-}
-
-function getAutoHeight(n: HTMLDivElement | undefined) {
-  if (!n) {
-    return 0;
-  }
-
-  const node = n;
-
-  let height = computeHeight(node);
-  const parentNode = node.parentNode as HTMLDivElement;
-  if (parentNode) {
-    height = computeHeight(parentNode);
-  }
-
-  return height;
-}
-
-type AutoHeightProps = {
-  height?: number;
-};
-
-function autoHeight() {
-  return <P extends AutoHeightProps>(
-    WrappedComponent: React.ComponentClass<P> | React.FC<P>,
-  ): React.ComponentClass<P> => {
-    class AutoHeightComponent extends React.Component<P & AutoHeightProps> {
-      state = {
-        computedHeight: 0,
-      };
-
-      root: HTMLDivElement | undefined = undefined;
-
-      componentDidMount() {
-        const { height } = this.props;
-        if (!height) {
-          let h = getAutoHeight(this.root);
-          this.setState({ computedHeight: h });
-          if (h < 1) {
-            h = getAutoHeight(this.root);
-            this.setState({ computedHeight: h });
-          }
-        }
-      }
-
-      handleRoot = (node: HTMLDivElement) => {
-        this.root = node;
-      };
-
-      render() {
-        const { height } = this.props;
-        const { computedHeight } = this.state;
-        const h = height || computedHeight;
-        return (
-          <div ref={this.handleRoot}>
-            {h > 0 && <WrappedComponent {...this.props} height={h} />}
-          </div>
-        );
-      }
-    }
-    return AutoHeightComponent;
-  };
-}
-export default autoHeight;

src/pages/dashboard/analysis/utils/utils.less

@@ -1,50 +0,0 @@
-.textOverflow() {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  word-break: break-all;
-}
-
-.textOverflowMulti(@line: 3, @bg: #fff) {
-  position: relative;
-  max-height: @line * 1.5em;
-  margin-right: -1em;
-  padding-right: 1em;
-  overflow: hidden;
-  line-height: 1.5em;
-  text-align: justify;
-  &::before {
-    position: absolute;
-    right: 14px;
-    bottom: 0;
-    padding: 0 1px;
-    background: @bg;
-    content: '...';
-  }
-  &::after {
-    position: absolute;
-    right: 14px;
-    width: 1em;
-    height: 1em;
-    margin-top: 0.2em;
-    background: white;
-    content: '';
-  }
-}
-
-// mixins for clearfix
-// ------------------------
-.clearfix() {
-  zoom: 1;
-  &::before,
-  &::after {
-    display: table;
-    content: ' ';
-  }
-  &::after {
-    clear: both;
-    height: 0;
-    font-size: 0;
-    visibility: hidden;
-  }
-}

src/pages/dashboard/analysis/utils/utils.style.ts

@@ -1,6 +0,0 @@
-import { createStyles } from 'antd-style';
-
-const useStyles = createStyles(() => {
-  return {};
-});
-export default useStyles;

src/pages/dashboard/monitor/index.tsx

@@ -114,14 +114,6 @@ const Monitor: FC = () => {
               >
                 <Col span={8}>
                   <RingProgress forceFit height={128} percent={0.28} />
-                  {/* <Pie
-                    animate={false}
-                    percent={28}
-                    title="中式快餐"
-                    total="28%"
-                    height={128}
-                    lineWidth={2}
-                   /> */}
                 </Col>
                 <Col span={8}>
                   <RingProgress color="#5DDECF" forceFit height={128} percent={0.22} />

src/pages/dashboard/workplace/components/Radar/autoHeight.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-
-export type IReactComponent<P = any> = React.ComponentClass<P> | React.ClassicComponentClass<P>;
-
-function computeHeight(node: HTMLDivElement) {
-  const { style } = node;
-  style.height = '100%';
-  const totalHeight = parseInt(`${getComputedStyle(node).height}`, 10);
-  const padding =
-    parseInt(`${getComputedStyle(node).paddingTop}`, 10) +
-    parseInt(`${getComputedStyle(node).paddingBottom}`, 10);
-  return totalHeight - padding;
-}
-
-function getAutoHeight(n: HTMLDivElement | undefined) {
-  if (!n) {
-    return 0;
-  }
-
-  const node = n;
-
-  let height = computeHeight(node);
-  const parentNode = node.parentNode as HTMLDivElement;
-  if (parentNode) {
-    height = computeHeight(parentNode);
-  }
-
-  return height;
-}
-
-type AutoHeightProps = {
-  height?: number;
-};
-
-function autoHeight() {
-  return <P extends AutoHeightProps>(
-    WrappedComponent: React.ComponentClass<P> | React.FC<P>,
-  ): React.ComponentClass<P> => {
-    class AutoHeightComponent extends React.Component<P & AutoHeightProps> {
-      state = {
-        computedHeight: 0,
-      };
-
-      root: HTMLDivElement | undefined = undefined;
-
-      componentDidMount() {
-        const { height } = this.props;
-        if (!height) {
-          let h = getAutoHeight(this.root);
-          this.setState({ computedHeight: h });
-          if (h < 1) {
-            h = getAutoHeight(this.root);
-            this.setState({ computedHeight: h });
-          }
-        }
-      }
-
-      handleRoot = (node: HTMLDivElement) => {
-        this.root = node;
-      };
-
-      render() {
-        const { height } = this.props;
-        const { computedHeight } = this.state;
-        const h = height || computedHeight;
-        return (
-          <div ref={this.handleRoot}>
-            {h > 0 && <WrappedComponent {...this.props} height={h} />}
-          </div>
-        );
-      }
-    }
-    return AutoHeightComponent;
-  };
-}
-export default autoHeight;

src/pages/dashboard/workplace/components/Radar/index.tsx

@@ -1,7 +1,6 @@
 import { Axis, Chart, Coord, Geom, Tooltip } from 'bizcharts';
 import { Col, Row } from 'antd';
 import React, { useEffect, useRef, useState } from 'react';
-import autoHeight from './autoHeight';
 
 export type RadarProps = {
   title?: React.ReactNode;
@@ -172,4 +171,4 @@ const Radar: React.FC<RadarProps> = (props) => {
   );
 };
 
-export default autoHeight()(Radar);
+export default Radar;

src/pages/dashboard/workplace/index.tsx

@@ -10,6 +10,7 @@ import type { ActivitiesType, CurrentUser } from './data.d';
 import { queryProjectNotice, queryActivities, fakeChartData } from './service';
 import relativeTime from 'dayjs/plugin/relativeTime';
 dayjs.extend(relativeTime);
+
 const links = [
   {
     title: '操作一',
@@ -223,7 +224,7 @@ const Workplace: FC = () => {
             title="XX 指数"
             loading={data?.radarData?.length === 0}
           >
-            <div className={styles.chart}>
+            <div>
               <Radar
                 height={343}
                 data={data?.radarData || []}

src/pages/dashboard/workplace/style.style.ts

@@ -69,7 +69,7 @@ const useStyles = createStyles(({ token }) => {
       flex: '1 1 0',
       color: token.colorTextSecondary,
       position: 'relative',
-      maxHeight: token.line * 1.5,
+      maxHeight: '4.5em',
       marginRight: '-1em',
       paddingRight: '1em',
       overflow: 'hidden',
@@ -80,7 +80,7 @@ const useStyles = createStyles(({ token }) => {
         right: '14px',
         bottom: '0',
         padding: '0 1px',
-        background: token.bg,
+        background: token.colorBgContainer,
         content: "'...'",
       },
       '&::after': {
@@ -123,7 +123,7 @@ const useStyles = createStyles(({ token }) => {
       fontSize: '12px',
       lineHeight: '1.5em',
       position: 'relative',
-      maxHeight: token.line * 1.5,
+      maxHeight: '4.5em',
       marginRight: '-1em',
       paddingRight: '1em',
       textAlign: 'justify',
@@ -132,7 +132,7 @@ const useStyles = createStyles(({ token }) => {
         right: '14px',
         bottom: '0',
         padding: '0 1px',
-        background: token.bg,
+        background: token.colorBgContainer,
         content: "'...'",
       },
       '&::after': {