make MiniMetrics almost responsive

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

@@ -1,10 +1,31 @@
 const buildArray = require('build-array');
 const Chart = require('chart.js');
+const fns = require('../../shared/functions');
 const React = require('react');
+const Styled = require('styled-components');
 const whisker = require('chartjs-chart-box-plot');
 
 whisker(Chart);
 
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const Container = styled.div`
+  position: relative;
+  height: ${remcalc(72)};
+  width: 100%;
+`;
+
+const Canvas = styled.canvas`
+  position: absolute;
+  bottom: 0;
+`;
+
 class Graph extends React.Component {
   componentDidMount() {
     const {
@@ -75,11 +96,11 @@ class Graph extends React.Component {
   }
   render() {
     return (
-      <canvas
-        height='72'
-        ref={this.ref('component')}
-        width='157'
+      <Container>
+        <Canvas
+          innerRef={this.ref('component')}
         />
+      </Container>
     );
   }
 }

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

@@ -1,4 +1,5 @@
 const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
 const React = require('react');
 const Styled = require('styled-components');
 
@@ -6,27 +7,23 @@ const {
   colors
 } = constants;
 
+const {
+  remcalc
+} = fns;
+
 const {
   default: styled
 } = Styled;
 
 const OuterBox = styled.div`
-  height: 38px;
-  padding: 8px 12px;
-  border-bottom: 1px solid ${colors.seperator};
+  height: ${remcalc(53)};
+  padding: ${remcalc(8)} ${remcalc(12)};
+  border-bottom: ${remcalc(1)} solid ${colors.seperator};
 `;
 
 const InnerBox = 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};
+  width: 100%;
+  height: ${remcalc(36)};
 `;
 
 const Meta = (props) => (

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

@@ -1,9 +1,26 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
 const Styled = require('styled-components');
 
+const {
+  remcalc
+} = fns;
+
+const {
+  colors
+} = constants;
+
 const {
   default: styled
 } = Styled;
 
 module.exports = styled.p`
   margin: 0;
+  text-align: right;
+  font-size: ${remcalc(12)};
+  line-height: ${remcalc(18)};
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  color: ${colors.regular};
 `;

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

@@ -1,18 +1,26 @@
 const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
 const Styled = require('styled-components');
 
 const {
   colors
 } = constants;
 
+const {
+  remcalc
+} = fns;
+
 const {
   default: styled
 } = Styled;
 
 module.exports = styled.h3`
   margin: 0;
-  font-size: 14px;
+  text-align: right;
+  font-size: ${remcalc(14)};
   font-weight: 600;
+  font-style: normal;
   line-height: 1.29;
   color: ${colors.semibold};
+  margin-bottom: ${remcalc(3)} !important;
 `;

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

@@ -1,27 +1,47 @@
 const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const React = require('react');
 const Styled = require('styled-components');
 
 const {
   colors
 } = constants;
 
+const {
+  remcalc
+} = fns;
+
 const {
   default: styled
 } = Styled;
 
-module.exports = styled.div`
-  height: 127px;
-  width: 158px;
+const Container = styled.div`
+  position: relative;
+  height: 100%;
+  width: 100%;
   background-color: ${colors.miniBackground};
-  border: solid 1px ${colors.borderSecondary};
+  border: solid ${remcalc(1)} ${colors.borderSecondary};
+`;
 
-  &::before {
+const Shadow = styled.div`
   position: absolute;
-    z-index: 1;
-    width: 9px;
-    height: 127px;
-    content: '';
+  height: 100%;
+  width: ${remcalc(9)};
+  left: 0;
+  top: 0;
   background-image:
     linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0));
-  }
 `;
+
+const View = (props) => (
+  <Container {...props}>
+    <Shadow />
+    {props.children}
+  </Container>
+);
+
+View.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = View;

ui/stories/index.js

@@ -412,15 +412,7 @@ storiesOf('Widget', module)
     </Widget>
   ));
 
-storiesOf('Metrics', module)
-  .add('Mini Metric', () => (
-    <MiniMetricView>
-      <MiniMetricMeta>
-        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
-        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
-      </MiniMetricMeta>
-      <MiniMetricGraph
-        data={[{
+const minMetricData = [{
   firstQuartile: 15,
   thirdQuartile: 15,
   median: 15,
@@ -522,9 +514,41 @@ storiesOf('Metrics', module)
   median: 30,
   max: 49,
   min: 30,
-        }]}
-      />
+}];
+
+storiesOf('Metrics', module)
+  .add('Mini Metric', () => (
+    <Base>
+      <Row around>
+        <Column xs={3}>
+          <MiniMetricView>
+            <MiniMetricMeta>
+              <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+              <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+            </MiniMetricMeta>
+            <MiniMetricGraph data={minMetricData} />
           </MiniMetricView>
+        </Column>
+        <Column xs={3}>
+          <MiniMetricView>
+            <MiniMetricMeta>
+              <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+              <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+            </MiniMetricMeta>
+            <MiniMetricGraph data={minMetricData} />
+          </MiniMetricView>
+        </Column>
+        <Column xs={3}>
+          <MiniMetricView>
+            <MiniMetricMeta>
+              <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+              <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+            </MiniMetricMeta>
+            <MiniMetricGraph data={minMetricData} />
+          </MiniMetricView>
+        </Column>
+      </Row>
+    </Base>
   ));
 
 storiesOf('ListItem', module)