split mini-metrics into multiple components

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

@@ -0,0 +1,94 @@
+const buildArray = require('build-array');
+const Chart = require('chart.js');
+const React = require('react');
+const whisker = require('chartjs-chart-box-plot');
+
+whisker(Chart);
+
+class Graph extends React.Component {
+  componentDidMount() {
+    const {
+      data = [],
+      labels = 0,
+      max = 100,
+      min = 0
+    } = this.props;
+
+    const _labels = !Array.isArray(labels)
+      ? buildArray(labels || data.length).map((v, i) => '')
+      : labels;
+
+    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
+            }
+          }]
+        },
+        legend: {
+          display: false
+        }
+      },
+      data: {
+        labels: _labels,
+        datasets: [{
+          data
+        }]
+      }
+    });
+  }
+  componentWillReceiveProps(nextProps) {
+    const {
+      data = [],
+      labels = 0
+    } = this.props;
+
+    const _labels = !Array.isArray(labels)
+      ? buildArray(labels || data.length).map((v, i) => '')
+      : labels;
+
+    this._chart.data.datasets = [{
+      data
+    }];
+
+    this._chart.data.labels = _labels;
+    this._chart.update(0);
+  }
+  ref(name) {
+    this._refs = this._refs || {};
+
+    return (el) => {
+      this._refs[name] = el;
+    };
+  }
+  render() {
+    return (
+      <canvas
+        height='72'
+        ref={this.ref('component')}
+        width='157'
+      />
+    );
+  }
+}
+
+Graph.propTypes = {
+  data: React.PropTypes.array,
+  labels: React.PropTypes.number,
+  max: React.PropTypes.number,
+  min: React.PropTypes.number
+};
+
+module.exports = Graph;

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

@@ -1,166 +1,7 @@
-const React = require('react');
+module.exports = {
-const Styled = require('styled-components');
+  MiniMetricGraph: require('./graph'),
-const constants = require('../../shared/constants');
+  MiniMetricMeta: require('./meta'),
-
+  MiniMetricTitle: require('./title'),
-const {
+  MiniMetricSubtitle: require('./subtitle'),
-  colors
+  MiniMetricView: require('./view')
-} = constants;
-
-const {
-  default: styled
-} = Styled;
-
-const buildArray = require('build-array');
-const Chart = require('chart.js');
-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 {
-      datasets = [],
-      labels = 0,
-      max = 100,
-      min = 0
-    } = this.props;
-
-    const _labels = !Array.isArray(labels)
-      ? buildArray(labels).map((v, i) => '')
-      : labels;
-
-    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
-            }
-          }]
-        },
-        legend: {
-          display: false
-        }
-      },
-      data: {
-        labels: _labels,
-        datasets: datasets
-      }
-    });
-  }
-  componentWillReceiveProps(nextProps) {
-    const {
-      datasets = [],
-      labels = 0
-    } = this.props;
-
-    this._chart.data.datasets = datasets;
-    this._chart.data.labels = buildArray(labels).map((v, i) => '');
-    this._chart.update(0);
-  }
-  ref(name) {
-    this._refs = this._refs || {};
-
-    return (el) => {
-      this._refs[name] = el;
-    };
-  }
-  render() {
-    const {
-      name,
-    } = this.props;
-
-    return (
-      <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>
-    );
-  }
-}
-
-MiniMetric.propTypes = {
-  datasets: React.PropTypes.array,
-  labels: React.PropTypes.number,
-  max: React.PropTypes.number,
-  min: React.PropTypes.number,
-  name: React.PropTypes.string,
 };
-
-module.exports = MiniMetric;

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

@@ -0,0 +1,44 @@
+const constants = require('../../shared/constants');
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  default: styled
+} = Styled;
+
+const OuterBox = styled.div`
+  height: 38px;
+  padding: 8px 12px;
+  border-bottom: 1px 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};
+`;
+
+const Meta = (props) => (
+  <OuterBox {...props}>
+    <InnerBox>
+      {props.children}
+    </InnerBox>
+  </OuterBox>
+);
+
+Meta.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = Meta;

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

@@ -0,0 +1,9 @@
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
+
+module.exports = styled.p`
+  margin: 0;
+`;

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

@@ -0,0 +1,18 @@
+const constants = require('../../shared/constants');
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  default: styled
+} = Styled;
+
+module.exports = styled.h3`
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.29;
+  color: ${colors.semibold};
+`;

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

@@ -0,0 +1,27 @@
+const constants = require('../../shared/constants');
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  default: styled
+} = Styled;
+
+module.exports = 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;
+    content: '';
+    background-image:
+      linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0));
+  }
+`;

ui/stories/index.js

@@ -27,7 +27,13 @@ const {
     ListItemView,
     ListItemGroupView
   },
-  MiniMetric,
+  MiniMetric: {
+    MiniMetricGraph,
+    MiniMetricMeta,
+    MiniMetricTitle,
+    MiniMetricSubtitle,
+    MiniMetricView
+  },
   Modal,
   Notificaton,
   Pagination,
@@ -406,141 +412,119 @@ 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 Metric', () => (
-    <MiniMetric
+    <MiniMetricView>
-      datasets={[{
+      <MiniMetricMeta>
-        backgroundColor: colors['perc'],
+        <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
-        altBackgroundColor: colors['alt'],
+        <MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
-        data: [
+      </MiniMetricMeta>
-          {
+      <MiniMetricGraph
+        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'
       />
+    </MiniMetricView>
   ));
 
 storiesOf('ListItem', module)