Duration.tsx 5.59 KB
Newer Older
Lijiao's avatar
Lijiao committed
1
2
import * as React from 'react';
import ReactEcharts from 'echarts-for-react';
3
import { TableObj } from 'src/static/interface';
4
import { filterDuration } from 'src/static/function';
Lijiao's avatar
Lijiao committed
5
6
7
8
9
10
11
12
13
require('echarts/lib/chart/bar');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

interface Runtrial {
    trialId: Array<string>;
    trialTime: Array<number>;
}

14
15
interface DurationProps {
    source: Array<TableObj>;
16
    whichGraph: string;
17
18
}

Lijiao's avatar
Lijiao committed
19
20
21
22
interface DurationState {
    durationSource: {};
}

23
class Duration extends React.Component<DurationProps, DurationState> {
Lijiao's avatar
Lijiao committed
24
25
26

    public _isMounted = false;

27
    constructor(props: DurationProps) {
Lijiao's avatar
Lijiao committed
28

29
        super(props);
Lijiao's avatar
Lijiao committed
30
        this.state = {
31
            durationSource: this.initDuration(this.props.source),
Lijiao's avatar
Lijiao committed
32
33
34
35
        };

    }

36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
    initDuration = (source: Array<TableObj>) => {
        const trialId: Array<string> = [];
        const trialTime: Array<number> = [];
        const trialJobs = source.filter(filterDuration);
        Object.keys(trialJobs).map(item => {
            const temp = trialJobs[item];
            trialId.push(temp.sequenceId);
            trialTime.push(temp.duration);
        });
        return {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                bottom: '3%',
                containLabel: true,
                left: '1%',
                right: '4%'
            },

            dataZoom: [{
                type: 'slider',
                name: 'trial',
                filterMode: 'filter',
                yAxisIndex: 0,
                orient: 'vertical'
            }, {
                type: 'slider',
                name: 'trial',
                filterMode: 'filter',
                xAxisIndex: 0
            }],
            xAxis: {
                name: 'Time',
                type: 'value',
            },
            yAxis: {
                name: 'Trial',
                type: 'category',
                data: trialId
            },
            series: [{
                type: 'bar',
                data: trialTime
            }]
        };
    }

Lijiao's avatar
Lijiao committed
87
    getOption = (dataObj: Runtrial) => {
88
        return {
Lijiao's avatar
Lijiao committed
89
90
91
92
93
94
95
96
97
98
99
100
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                bottom: '3%',
                containLabel: true,
                left: '1%',
                right: '4%'
            },
101

Lijiao's avatar
Lijiao committed
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
            dataZoom: [{
                type: 'slider',
                name: 'trial',
                filterMode: 'filter',
                yAxisIndex: 0,
                orient: 'vertical'
            }, {
                type: 'slider',
                name: 'trial',
                filterMode: 'filter',
                xAxisIndex: 0
            }],
            xAxis: {
                name: 'Time',
                type: 'value',
            },
            yAxis: {
                name: 'Trial',
                type: 'category',
121
                data: dataObj.trialId
Lijiao's avatar
Lijiao committed
122
123
124
            },
            series: [{
                type: 'bar',
125
                data: dataObj.trialTime
Lijiao's avatar
Lijiao committed
126
127
128
129
            }]
        };
    }

130
131
    drawDurationGraph = (source: Array<TableObj>) => {
        // why this function run two times when props changed?
132
133
134
        const trialId: Array<string> = [];
        const trialTime: Array<number> = [];
        const trialRun: Array<Runtrial> = [];
135
        const trialJobs = source.filter(filterDuration);
136
137
        Object.keys(trialJobs).map(item => {
            const temp = trialJobs[item];
138
139
            trialId.push(temp.sequenceId);
            trialTime.push(temp.duration);
140
141
142
143
144
145
146
147
        });
        trialRun.push({
            trialId: trialId,
            trialTime: trialTime
        });
        if (this._isMounted) {
            this.setState({
                durationSource: this.getOption(trialRun[0])
Lijiao's avatar
Lijiao committed
148
            });
149
        }
Lijiao's avatar
Lijiao committed
150
151
    }

152
    componentDidMount() {
Lijiao's avatar
Lijiao committed
153
        this._isMounted = true;
154
        const { source } = this.props;
155
        this.drawDurationGraph(source);
Lijiao's avatar
Lijiao committed
156
157
    }

158
159
160
161
162
163
164
165
    componentWillReceiveProps(nextProps: DurationProps) {
        const { whichGraph, source } = nextProps;
        if (whichGraph === '3') {
            this.drawDurationGraph(source);
        }
    }

    shouldComponentUpdate(nextProps: DurationProps, nextState: DurationState) {
166

167
        const { whichGraph, source } = nextProps;
168
        if (whichGraph === '3') {
169
170
171
172
173
174
175
176
177
            const beforeSource = this.props.source;
            if (whichGraph !== this.props.whichGraph) {
                return true;
            }

            if (source.length !== beforeSource.length) {
                return true;
            }

178
179
180
181
182
183
184
            if (beforeSource[beforeSource.length - 1] !== undefined) {
                if (source[source.length - 1].duration !== beforeSource[beforeSource.length - 1].duration) {
                    return true;
                }
                if (source[source.length - 1].status !== beforeSource[beforeSource.length - 1].status) {
                    return true;
                }
185
186
187
188
189
            }
        }
        return false;
    }

Lijiao's avatar
Lijiao committed
190
191
192
193
194
195
196
197
198
199
    componentWillUnmount() {
        this._isMounted = false;
    }

    render() {
        const { durationSource } = this.state;
        return (
            <div>
                <ReactEcharts
                    option={durationSource}
200
                    style={{ width: '95%', height: 412, margin: '0 auto' }}
Lijiao's avatar
Lijiao committed
201
                    theme="my_theme"
202
                    notMerge={true} // update now
Lijiao's avatar
Lijiao committed
203
204
205
206
207
208
209
                />
            </div>
        );
    }
}

export default Duration;