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
+      <Container>
-        height='72'
+        <Canvas
-        ref={this.ref('component')}
+          innerRef={this.ref('component')}
-        width='157'
+        />
-      />
+      </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;
+  height: ${remcalc(53)};
-  padding: 8px 12px;
+  padding: ${remcalc(8)} ${remcalc(12)};
-  border-bottom: 1px solid ${colors.seperator};
+  border-bottom: ${remcalc(1)} solid ${colors.seperator};
 `;
 
 const InnerBox = styled.div`
-  width: 136px;
+  width: 100%;
-  height: 36px;
+  height: ${remcalc(36)};
-  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};
 `;
 
 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`
+const Container = styled.div`
-  height: 127px;
+  position: relative;
-  width: 158px;
+  height: 100%;
+  width: 100%;
   background-color: ${colors.miniBackground};
-  border: solid 1px ${colors.borderSecondary};
+  border: solid ${remcalc(1)} ${colors.borderSecondary};
-
-  &::before {
-    position: absolute;
-    z-index: 1;
-    width: 9px;
-    height: 127px;
-    content: '';
-    background-image:
-      linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0));
-  }
 `;
+
+const Shadow = styled.div`
+  position: absolute;
+  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,119 +412,143 @@ storiesOf('Widget', module)
     </Widget>
   ));
 
+const minMetricData = [{
+  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,
+}];
+
 storiesOf('Metrics', module)
   .add('Mini Metric', () => (
-    <MiniMetricView>
+    <Base>
-      <MiniMetricMeta>
+      <Row around>
-        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
+        <Column xs={3}>
-        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
+          <MiniMetricView>
-      </MiniMetricMeta>
+            <MiniMetricMeta>
-      <MiniMetricGraph
+              <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
-        data={[{
+              <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
-          firstQuartile: 15,
+            </MiniMetricMeta>
-          thirdQuartile: 15,
+            <MiniMetricGraph data={minMetricData} />
-          median: 15,
+          </MiniMetricView>
-          max: 15,
+        </Column>
-          min: 15,
+        <Column xs={3}>
-        }, {
+          <MiniMetricView>
-          firstQuartile: 26,
+            <MiniMetricMeta>
-          thirdQuartile: 26,
+              <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
-          median: 26,
+              <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
-          max: 26,
+            </MiniMetricMeta>
-          min: 26,
+            <MiniMetricGraph data={minMetricData} />
-        }, {
+          </MiniMetricView>
-          firstQuartile: 17,
+        </Column>
-          thirdQuartile: 17,
+        <Column xs={3}>
-          median: 17,
+          <MiniMetricView>
-          max: 17,
+            <MiniMetricMeta>
-          min: 17,
+              <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
-        }, {
+              <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
-          firstQuartile: 15,
+            </MiniMetricMeta>
-          thirdQuartile: 25,
+            <MiniMetricGraph data={minMetricData} />
-          median: 19,
+          </MiniMetricView>
-          max: 19,
+        </Column>
-          min: 20,
+      </Row>
-        }, {
+    </Base>
-          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,
-        }]}
-      />
-    </MiniMetricView>
   ));
 
 storiesOf('ListItem', module)