src/components/app/sidebars/simulation/LoadMetricComponent.js


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
36
37
38
39
40

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;