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');
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 (
<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 = {
MiniMetricGraph: require('./graph'),
MiniMetricMeta: require('./meta'),
MiniMetricTitle: require('./title'),
MiniMetricSubtitle: require('./subtitle'),
MiniMetricView: require('./view')
};
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,
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
datasets={[{
backgroundColor: colors['perc'],
altBackgroundColor: colors['alt'],
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>
<MiniMetricMeta>
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
</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,
}]}
/>
</MiniMetricView>
));
storiesOf('ListItem', module)