diff options
Diffstat (limited to 'src/components/app/sidebars/simulation/LoadMetricComponent.js')
| -rw-r--r-- | src/components/app/sidebars/simulation/LoadMetricComponent.js | 59 |
1 files changed, 33 insertions, 26 deletions
diff --git a/src/components/app/sidebars/simulation/LoadMetricComponent.js b/src/components/app/sidebars/simulation/LoadMetricComponent.js index e72e6b67..3e4cf810 100644 --- a/src/components/app/sidebars/simulation/LoadMetricComponent.js +++ b/src/components/app/sidebars/simulation/LoadMetricComponent.js @@ -1,33 +1,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"; +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}) => ( +const LoadMetricComponent = ({ loadMetric }) => ( + <div> <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> + 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; |
