Update styles for MiniMetric's

ui/.storybook/head.html

@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:400,600" rel="stylesheet">

ui/src/components/mini-metric/index.js

@@ -1,4 +1,14 @@
 const React = require('react');
+const Styled = require('styled-components');
+const constants = require('../../shared/constants');
+
+const {
+  colors
+} = constants;
+
+const {
+  default: styled
+} = Styled;
 
 const buildArray = require('build-array');
 const Chart = require('chart.js');
@@ -6,6 +16,62 @@ const whisker = require('chartjs-chart-box-plot');
 
 whisker(Chart);
 
+const StyledDiv = styled.div`
+  height: 127px;
+  width: 158px;
+  background-color: ${colors.miniBackground};
+  border: solid 1px ${colors.borderSecondary};
+
+  &::before {
+    position: absolute;
+    z-index: 1;
+    width: 9px;
+    height: 127px;
+    background-image:
+      linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0));
+    content: '';
+  }
+`;
+
+const Devider = styled.div`
+  width: 158px;
+  height: 1px;
+  background-color: ${colors.seperator}
+`;
+
+const TextMetric = styled.div`
+  height: 38px;
+  padding: 8px 12px;
+`;
+
+const InnerTextBox = styled.div`
+  width: 136px;
+  height: 36px;
+  font-family: 'Libre Franklin', sans-serif;
+  font-size: 12px;
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 18px;
+  text-align: right;
+  color: ${colors.regular};
+
+  & p {
+    margin: 0;
+  }
+
+  & h3 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.29;
+    color: ${colors.semibold};
+  }
+`;
+
+const StyledCanvas = styled.canvas`
+`;
+
 class MiniMetric extends React.Component {
   componentDidMount() {
     const {
@@ -22,13 +88,16 @@ class MiniMetric extends React.Component {
     this._chart = new Chart(this._refs.component, {
       type: 'whisker',
       responsive: true,
+      maintainAspectRatio: true,
       options: {
         scales: {
           xAxes: [{
+            display: false,
             barPercentage: 1.0,
             categoryPercentage: 1.0
           }],
           yAxes: [{
+            display: false,
             ticks: {
               min: min,
               max: max
@@ -36,7 +105,7 @@ class MiniMetric extends React.Component {
           }]
         },
         legend: {
-          display: true
+          display: false
         }
       },
       data: {
@@ -63,12 +132,25 @@ class MiniMetric extends React.Component {
     };
   }
   render() {
+    const {
+      name,
+    } = this.props;
+
     return (
-      <canvas
-        height='400'
-        ref={this.ref('component')}
-        width='400'
-      />
+      <StyledDiv>
+        <TextMetric>
+          <InnerTextBox>
+            <h3>{name}: 54%</h3>
+            <p>(1280/3000 MB)</p>
+          </InnerTextBox>
+        </TextMetric>
+        <Devider />
+        <StyledCanvas
+          height='72'
+          innerRef={this.ref('component')}
+          width='157'
+        />
+      </StyledDiv>
     );
   }
 }
@@ -78,6 +160,7 @@ MiniMetric.propTypes = {
   labels: React.PropTypes.number,
   max: React.PropTypes.number,
   min: React.PropTypes.number,
+  name: React.PropTypes.string,
 };
 
 module.exports = MiniMetric;

ui/src/shared/constants/colors.js

@@ -1,3 +1,8 @@
+const fonts = {
+  semibold: '#464646',
+  regular: '#646464'
+};
+
 const brandPrimary = {
   brandPrimary: '#3B46CC',
   brandPrimaryDark: '#1838C0',
@@ -32,11 +37,18 @@ const notifications = {
   warningLight: '#FFFAED',
 };
 
+const metrics = {
+  miniBackground: '#F3F4F9',
+  seperator: '#D9DEF3'
+};
+
 const colors = {
   ...brandPrimary,
   ...brandSecondary,
   ...brandInactive,
-  ...notifications
+  ...notifications,
+  ...metrics,
+  ...fonts
 };
 
 module.exports = colors;

ui/stories/index.js

@@ -306,7 +306,139 @@ storiesOf('Widget', module)
     </Widget>
   ));
 
+const colors = {
+  perc: 'rgba(54, 74, 205, 0.2)',
+  alt: 'rgba(245, 93, 93, 0.2)'
+};
 storiesOf('Metrics', module)
   .add('mini', () => (
-    <MiniMetric />
+    <MiniMetric
+      datasets={[{
+        backgroundColor: colors['perc'],
+        altBackgroundColor: colors['alt'],
+        data: [
+          {
+            firstQuartile: 15,
+            thirdQuartile: 15,
+            median: 15,
+            max: 15,
+            min: 15,
+          },
+          {
+            firstQuartile: 26,
+            thirdQuartile: 26,
+            median: 26,
+            max: 26,
+            min: 26,
+          },
+          {
+            firstQuartile: 17,
+            thirdQuartile: 17,
+            median: 17,
+            max: 17,
+            min: 17,
+          },
+          {
+            firstQuartile: 15,
+            thirdQuartile: 25,
+            median: 19,
+            max: 19,
+            min: 20,
+          },
+          {
+            firstQuartile: 19,
+            thirdQuartile: 25,
+            median: 21,
+            max: 20,
+            min: 25,
+          },
+          {
+            firstQuartile: 24,
+            thirdQuartile: 30,
+            median: 25,
+            max: 26,
+            min: 27,
+          },
+          {
+            firstQuartile: 28,
+            thirdQuartile: 34,
+            median: 30,
+            max: 30,
+            min: 30,
+          },
+          {
+            firstQuartile: 30,
+            thirdQuartile: 45,
+            median: 35,
+            max: 40,
+            min: 40,
+          },
+          {
+            firstQuartile: 20,
+            thirdQuartile: 55,
+            median: 45,
+            max: 44,
+            min: 44,
+          },
+          {
+            firstQuartile: 55,
+            thirdQuartile: 55,
+            median: 55,
+            max: 55,
+            min: 55,
+          },
+          {
+            firstQuartile: 57,
+            thirdQuartile: 56,
+            median: 57,
+            max: 58,
+            min: 57,
+          },
+          {
+            firstQuartile: 57,
+            thirdQuartile: 56,
+            median: 56,
+            max: 56,
+            min: 56,
+          },
+          {
+            firstQuartile: 60,
+            thirdQuartile: 56,
+            median: 60,
+            max: 60,
+            min: 60,
+          },
+          {
+            firstQuartile: 57,
+            thirdQuartile: 57,
+            median: 57,
+            max: 57,
+            min: 57,
+          },
+          {
+            firstQuartile: 57,
+            thirdQuartile: 55,
+            median: 55,
+            max: 55,
+            min: 55,
+          },
+          {
+            firstQuartile: 20,
+            thirdQuartile: 45,
+            median: 45,
+            max: 45,
+            min: 45,
+          },
+          {
+            firstQuartile: 15,
+            thirdQuartile: 40,
+            median: 30,
+            max: 49,
+            min: 30,
+          },
+        ]
+      }]}
+      labels={17}
+      name='Memory'
+    />
   ));