"DashboardMonitor/src/components/ActiveChart/index.tsx" did not exist on "c1bafe3327b6499b0bb44862560f6d0d0bbcb69d"
index.tsx 2.59 KB
Newer Older
niko's avatar
niko committed
1
import React, { Component } from 'react';
陈帅's avatar
陈帅 committed
2

陈帅's avatar
陈帅 committed
3
import { Statistic } from 'antd';
陈帅's avatar
陈帅 committed
4
import Charts from '../Charts';
nikogu's avatar
nikogu committed
5 6
import styles from './index.less';

7 8
const { MiniArea } = Charts;

陈帅's avatar
陈帅 committed
9
function fixedZero(val: number) {
10 11 12
  return val * 1 < 10 ? `0${val}` : val;
}

nikogu's avatar
nikogu committed
13 14 15 16 17
function getActiveData() {
  const activeData = [];
  for (let i = 0; i < 24; i += 1) {
    activeData.push({
      x: `${fixedZero(i)}:00`,
jim's avatar
jim committed
18
      y: Math.floor(Math.random() * 200) + i * 50,
nikogu's avatar
nikogu committed
19 20 21 22 23
    });
  }
  return activeData;
}

niko's avatar
niko committed
24
export default class ActiveChart extends Component {
nikogu's avatar
nikogu committed
25 26
  state = {
    activeData: getActiveData(),
niko's avatar
niko committed
27
  };
陈帅's avatar
陈帅 committed
28

陈帅's avatar
陈帅 committed
29
  timer: number | undefined;
陈帅's avatar
陈帅 committed
30

陈帅's avatar
陈帅 committed
31
  requestRef: number | undefined;
nikogu's avatar
nikogu committed
32 33

  componentDidMount() {
jim's avatar
jim committed
34
    this.loopData();
nikogu's avatar
nikogu committed
35
  }
陈帅's avatar
陈帅 committed
36

nikogu's avatar
nikogu committed
37
  componentWillUnmount() {
jim's avatar
jim committed
38
    clearTimeout(this.timer);
陈帅's avatar
陈帅 committed
39 40 41
    if (this.requestRef) {
      cancelAnimationFrame(this.requestRef);
    }
nikogu's avatar
nikogu committed
42
  }
陈帅's avatar
陈帅 committed
43

jim's avatar
jim committed
44
  loopData = () => {
陈帅's avatar
陈帅 committed
45
    this.requestRef = requestAnimationFrame(() => {
陈帅's avatar
陈帅 committed
46
      this.timer = window.setTimeout(() => {
陈帅's avatar
陈帅 committed
47 48 49 50 51
        this.setState(
          {
            activeData: getActiveData(),
          },
          () => {
jim's avatar
jim committed
52
            this.loopData();
陈帅's avatar
陈帅 committed
53
          },
陈帅's avatar
陈帅 committed
54 55 56
        );
      }, 1000);
    });
jim's avatar
jim committed
57
  };
陈帅's avatar
陈帅 committed
58

nikogu's avatar
nikogu committed
59 60 61 62 63
  render() {
    const { activeData = [] } = this.state;

    return (
      <div className={styles.activeChart}>
陈帅's avatar
陈帅 committed
64
        <Statistic title="目标评估" value="有望达到预期" />
nikogu's avatar
nikogu committed
65 66 67 68
        <div style={{ marginTop: 32 }}>
          <MiniArea
            animate={false}
            line
niko's avatar
niko committed
69
            borderWidth={2}
nikogu's avatar
nikogu committed
70
            height={84}
niko's avatar
niko committed
71 72 73 74 75
            scale={{
              y: {
                tickCount: 3,
              },
            }}
nikogu's avatar
nikogu committed
76
            yAxis={{
陈帅's avatar
陈帅 committed
77 78 79 80
              tickLine: undefined,
              label: undefined,
              title: undefined,
              line: undefined,
nikogu's avatar
nikogu committed
81 82 83 84
            }}
            data={activeData}
          />
        </div>
niko's avatar
niko committed
85
        {activeData && (
86 87 88 89 90 91 92 93 94 95 96
          <div>
            <div className={styles.activeChartGrid}>
              <p>{[...activeData].sort()[activeData.length - 1].y + 200} 亿元</p>
              <p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元</p>
            </div>
            <div className={styles.dashedLine}>
              <div className={styles.line} />
            </div>
            <div className={styles.dashedLine}>
              <div className={styles.line} />
            </div>
niko's avatar
niko committed
97 98 99 100 101 102 103 104 105
          </div>
        )}
        {activeData && (
          <div className={styles.activeChartLegend}>
            <span>00:00</span>
            <span>{activeData[Math.floor(activeData.length / 2)].x}</span>
            <span>{activeData[activeData.length - 1].x}</span>
          </div>
        )}
nikogu's avatar
nikogu committed
106 107 108 109
      </div>
    );
  }
}