blob: 6ee6a3b92c053955d59d5940b8ca0571bd475d27 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
import React from 'react'
import { SIM_HIGH_COLOR, SIM_LOW_COLOR, SIM_MID_HIGH_COLOR, SIM_MID_LOW_COLOR } from '../../../../util/colors'
import { LOAD_NAME_MAP } from '../../../../util/simulation-load'
const LoadMetricComponent = ({ loadMetric }) => (
<div>
<div>
Colors represent <strong>{LOAD_NAME_MAP[loadMetric]}</strong>
</div>
<div className="btn-group mb-2" style={{ display: 'flex' }}>
<span
className="btn btn-secondary"
style={{ backgroundColor: SIM_LOW_COLOR, flex: 1 }}
title="0-25%"
/>
<span
className="btn btn-secondary"
style={{ backgroundColor: SIM_MID_LOW_COLOR, flex: 1 }}
title="25-50%"
/>
<span
className="btn btn-secondary"
style={{ backgroundColor: SIM_MID_HIGH_COLOR, flex: 1 }}
title="50-75%"
/>
<span
className="btn btn-secondary"
style={{ backgroundColor: SIM_HIGH_COLOR, flex: 1 }}
title="75-100%"
/>
</div>
</div>
)
export default LoadMetricComponent
|
