Compare (#290)

* feat(graphs): compare multiple reports graph

src/configManager/helpers/validators.js

@@ -15,4 +15,4 @@ module.exports.validateBenchmarkWeights = (req, res, next) => {
         }
     }
     return next();
-};
+};

ui/package.json

@@ -101,7 +101,7 @@
     "react-router-redux": "^5.0.0-alpha.9",
     "react-table": "^6.8.6",
     "react-tooltip": "^3.9.0",
-    "recharts": "^1.5.0",
+    "recharts": "^1.8.5",
     "redux": "^4.0.0",
     "redux-saga": "^0.16.0",
     "reselect": "^4.0.0",

ui/src/components/Checkbox/Checkbox.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import style from './Checkbox.scss'
+import FontAwesome from '../FontAwesome/FontAwesome.export'
+import classnames from 'classnames'
+
+class Checkbox extends Component {
+  render () {
+    const { disabled, checked, indeterminate } = this.props
+    const icon = this.getIcon()
+    return (
+      <div
+        data-checked={checked}
+        className={classnames(icon ? style['checkbox--checked'] : style['checkbox--unchecked'], style.checkbox, { [style.disabled]: disabled })}
+      >
+        {icon && <FontAwesome className={style.icon} icon={icon} />}
+        <input disabled={disabled} checked={checked || indeterminate} type='checkbox' onChange={this.handleOnChange} />
+      </div>
+    )
+  }
+
+  handleOnChange = (e) => {
+    e.stopPropagation()
+    const { onChange, disabled, checked } = this.props
+    if (onChange && !disabled) {
+      onChange(!checked)
+    }
+  }
+
+  getIcon = () => {
+    const { indeterminate, checked } = this.props
+    if (indeterminate) {
+      return 'minus'
+    }
+    return checked && 'check'
+  }
+}
+
+Checkbox.propTypes = {
+  indeterminate: PropTypes.bool,
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func
+}
+Checkbox.defaultProps = {
+  indeterminate: false,
+  checked: false,
+  disabled: false
+}
+
+export default Checkbox

ui/src/components/Checkbox/Checkbox.scss

@@ -0,0 +1,57 @@
+@import 'style/colors';
+@import "../styles/inputs";
+
+$size: 14px;
+$default-border: solid 1px $active-border-color;
+
+@mixin box() {
+  width: $size;
+  height: $size;
+  border-radius: 2px;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+
+.checkbox {
+  @include box();
+  position: relative;
+  cursor: pointer;
+  font-size: 12px;
+
+  input[type='checkbox'] {
+    cursor: inherit;
+    opacity: 0;
+    width: $size;
+    height: $size;
+    margin: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  &.disabled {
+    cursor: default;
+    background-color: $default-border-color;
+  }
+}
+
+.checkbox--checked {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: $active-border-color;
+  color: $white;
+  &.disabled {
+    color: $checkbox-disabled-color;
+  }
+}
+
+.checkbox--unchecked {
+  border: $default-border;
+  background-color: $white;
+
+  &.disabled {
+    border: solid 1px $checkbox-disabled-border;
+  }
+}
+

ui/src/components/Checkbox/style/_colors.scss

@@ -0,0 +1,4 @@
+@import "../../styles/colors";
+
+$checkbox-disabled-color: #c2c2c2;
+$checkbox-disabled-border: #dbdbdb;

ui/src/components/ReactTable/ReactTable.js

@@ -211,7 +211,7 @@ ReactTableComponent.defaultProps = {
   resizable: true,
   tableRowId: 'id',
   rowHeight: null,
-  cellPadding: '12px',
+  cellPadding: '8px',
   colors: {
     background: {
       default: '#fff',

ui/src/components/ReactTable/style/table-style.scss

@@ -54,4 +54,4 @@ $left-spacing: 0.7rem;
   @include header-border;
 }
 
-.tbody { overflow: visible!important;}
+.tbody { overflow: visible!important;}

ui/src/features/components/Box/style.scss

@@ -6,6 +6,8 @@
   background-color: #fafbfc;
   border: 1px solid #e9e9e9;
   margin-left: 6px;
+  margin-top: 1px;
+  margin-bottom: 1px;
 }
 
 .box-title {
@@ -32,4 +34,8 @@
   font-size: 21px;
   font-weight: 300;
   color: #778195;
-}
+  align-items: center;
+  display: flex;
+  justify-content: center;
+
+}