diff --git a/ui/src/components/mini-metric/graph.js b/ui/src/components/mini-metric/graph.js
new file mode 100644
index 00000000..ccf02606
--- /dev/null
+++ b/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 (
+
+ );
+ }
+}
+
+Graph.propTypes = {
+ data: React.PropTypes.array,
+ labels: React.PropTypes.number,
+ max: React.PropTypes.number,
+ min: React.PropTypes.number
+};
+
+module.exports = Graph;
diff --git a/ui/src/components/mini-metric/index.js b/ui/src/components/mini-metric/index.js
index 1ea1ce0d..96d27b77 100644
--- a/ui/src/components/mini-metric/index.js
+++ b/ui/src/components/mini-metric/index.js
@@ -1,166 +1,7 @@
-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');
-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 (
-
-
-
- {name}: 54%
- (1280/3000 MB)
-
-
-
-
-
- );
- }
-}
-
-MiniMetric.propTypes = {
- datasets: React.PropTypes.array,
- labels: React.PropTypes.number,
- max: React.PropTypes.number,
- min: React.PropTypes.number,
- name: React.PropTypes.string,
+module.exports = {
+ MiniMetricGraph: require('./graph'),
+ MiniMetricMeta: require('./meta'),
+ MiniMetricTitle: require('./title'),
+ MiniMetricSubtitle: require('./subtitle'),
+ MiniMetricView: require('./view')
};
-
-module.exports = MiniMetric;
diff --git a/ui/src/components/mini-metric/meta.js b/ui/src/components/mini-metric/meta.js
new file mode 100644
index 00000000..a80fadef
--- /dev/null
+++ b/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) => (
+
+
+ {props.children}
+
+
+);
+
+Meta.propTypes = {
+ children: React.PropTypes.node
+};
+
+module.exports = Meta;
diff --git a/ui/src/components/mini-metric/subtitle.js b/ui/src/components/mini-metric/subtitle.js
new file mode 100644
index 00000000..7acbe708
--- /dev/null
+++ b/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;
+`;
diff --git a/ui/src/components/mini-metric/title.js b/ui/src/components/mini-metric/title.js
new file mode 100644
index 00000000..428d5155
--- /dev/null
+++ b/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};
+`;
diff --git a/ui/src/components/mini-metric/view.js b/ui/src/components/mini-metric/view.js
new file mode 100644
index 00000000..124dc855
--- /dev/null
+++ b/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));
+ }
+`;
diff --git a/ui/stories/index.js b/ui/stories/index.js
index f7f171d5..d831dba0 100644
--- a/ui/stories/index.js
+++ b/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)
));
-const colors = {
- perc: 'rgba(54, 74, 205, 0.2)',
- alt: 'rgba(245, 93, 93, 0.2)'
-};
storiesOf('Metrics', module)
.add('Mini Metric', () => (
-
+
+
+ Memory: 54%
+ (1280/3000 MB)
+
+
+
));
storiesOf('ListItem', module)