Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

split mini-metrics into multiple components

Browse Source
This commit is contained in:
Sérgio Ramos 2017-01-10 18:06:01 +00:00
parent 0cba80f4e9
commit afdef33aff
7 changed files with 316 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
ui/src/components/mini-metric/graph.js Normal file
View File

@ -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;

171
ui/src/components/mini-metric/index.js
View File

@ -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;

44
ui/src/components/mini-metric/meta.js Normal file
View File

@ -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;

9
ui/src/components/mini-metric/subtitle.js Normal file
View File

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

18
ui/src/components/mini-metric/title.js Normal file
View File

@ -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};
`;

27
ui/src/components/mini-metric/view.js Normal file
View File

@ -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));
}
`;

252
ui/stories/index.js
View File

@ -27,7 +27,13 @@ const {
ListItemView, ListItemView,
ListItemGroupView ListItemGroupView
}, },
MiniMetric, MiniMetric: {
MiniMetricGraph,
MiniMetricMeta,
MiniMetricTitle,
MiniMetricSubtitle,
MiniMetricView
},
Modal, Modal,
Notificaton, Notificaton,
Pagination, Pagination,
@ -406,141 +412,119 @@ storiesOf('Widget', module)
</Widget> </Widget>
)); ));
const colors = {
perc: 'rgba(54, 74, 205, 0.2)',
alt: 'rgba(245, 93, 93, 0.2)'
};
storiesOf('Metrics', module) storiesOf('Metrics', module)
.add('Mini Metric', () => ( .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
firstQuartile: 15, data={[{
thirdQuartile: 15, firstQuartile: 15,
median: 15, thirdQuartile: 15,
max: 15, median: 15,
min: 15, max: 15,
}, min: 15,
{ }, {
firstQuartile: 26, firstQuartile: 26,
thirdQuartile: 26, thirdQuartile: 26,
median: 26, median: 26,
max: 26, max: 26,
min: 26, min: 26,
}, }, {
{ firstQuartile: 17,
firstQuartile: 17, thirdQuartile: 17,
thirdQuartile: 17, median: 17,
median: 17, max: 17,
max: 17, min: 17,
min: 17, }, {
}, firstQuartile: 15,
{ thirdQuartile: 25,
firstQuartile: 15, median: 19,
thirdQuartile: 25, max: 19,
median: 19, min: 20,
max: 19, }, {
min: 20, firstQuartile: 19,
}, thirdQuartile: 25,
{ median: 21,
firstQuartile: 19, max: 20,
thirdQuartile: 25, min: 25,
median: 21, }, {
max: 20, firstQuartile: 24,
min: 25, thirdQuartile: 30,
}, median: 25,
{ max: 26,
firstQuartile: 24, min: 27,
thirdQuartile: 30, }, {
median: 25, firstQuartile: 28,
max: 26, thirdQuartile: 34,
min: 27, median: 30,
}, max: 30,
{ min: 30,
firstQuartile: 28, }, {
thirdQuartile: 34, firstQuartile: 30,
median: 30, thirdQuartile: 45,
max: 30, median: 35,
min: 30, max: 40,
}, min: 40,
{ }, {
firstQuartile: 30, firstQuartile: 20,
thirdQuartile: 45, thirdQuartile: 55,
median: 35, median: 45,
max: 40, max: 44,
min: 40, min: 44,
}, }, {
{ firstQuartile: 55,
firstQuartile: 20, thirdQuartile: 55,
thirdQuartile: 55, median: 55,
median: 45, max: 55,
max: 44, min: 55,
min: 44, }, {
}, firstQuartile: 57,
{ thirdQuartile: 56,
firstQuartile: 55, median: 57,
thirdQuartile: 55, max: 58,
median: 55, min: 57,
max: 55, }, {
min: 55, firstQuartile: 57,
}, thirdQuartile: 56,
{ median: 56,
firstQuartile: 57, max: 56,
thirdQuartile: 56, min: 56,
median: 57, }, {
max: 58, firstQuartile: 60,
min: 57, thirdQuartile: 56,
}, median: 60,
{ max: 60,
firstQuartile: 57, min: 60,
thirdQuartile: 56, }, {
median: 56, firstQuartile: 57,
max: 56, thirdQuartile: 57,
min: 56, median: 57,
}, max: 57,
{ min: 57,
firstQuartile: 60, }, {
thirdQuartile: 56, firstQuartile: 57,
median: 60, thirdQuartile: 55,
max: 60, median: 55,
min: 60, max: 55,
}, min: 55,
{ }, {
firstQuartile: 57, firstQuartile: 20,
thirdQuartile: 57, thirdQuartile: 45,
median: 57, median: 45,
max: 57, max: 45,
min: 57, min: 45,
}, }, {
{ firstQuartile: 15,
firstQuartile: 57, thirdQuartile: 40,
thirdQuartile: 55, median: 30,
median: 55, max: 49,
max: 55, min: 30,
min: 55, }]}
}, />
{ </MiniMetricView>
firstQuartile: 20,
thirdQuartile: 45,
median: 45,
max: 45,
min: 45,
},
{
firstQuartile: 15,
thirdQuartile: 40,
median: 30,
max: 49,
min: 30,
},
]
}]}
labels={17}
name='Memory'
/>
)); ));
storiesOf('ListItem', module) storiesOf('ListItem', module)