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

Update styles for MiniMetric's

This commit is contained in:
Tom Gallacher 2017-01-06 11:06:02 +00:00
parent 319552fc20
commit 1e50e4d7aa
4 changed files with 236 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/.storybook/head.html Normal file
View File

@ -0,0 +1 @@
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:400,600" rel="stylesheet">

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

@ -1,4 +1,14 @@
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');
@ -6,6 +16,62 @@ 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 {
@ -22,13 +88,16 @@ class MiniMetric extends React.Component {
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
@ -36,7 +105,7 @@ class MiniMetric extends React.Component {
}]
},
legend: {
display: true
display: false
}
},
data: {
@ -63,12 +132,25 @@ class MiniMetric extends React.Component {
};
}
render() {
const {
name,
} = this.props;
return (
<canvas
height='400'
ref={this.ref('component')}
width='400'
/>
<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>
);
}
}
@ -78,6 +160,7 @@ MiniMetric.propTypes = {
labels: React.PropTypes.number,
max: React.PropTypes.number,
min: React.PropTypes.number,
name: React.PropTypes.string,
};
module.exports = MiniMetric;

14
ui/src/shared/constants/colors.js
View File

@ -1,3 +1,8 @@
const fonts = {
semibold: '#464646',
regular: '#646464'
};
const brandPrimary = {
brandPrimary: '#3B46CC',
brandPrimaryDark: '#1838C0',
@ -32,11 +37,18 @@ const notifications = {
warningLight: '#FFFAED',
};
const metrics = {
miniBackground: '#F3F4F9',
seperator: '#D9DEF3'
};
const colors = {
...brandPrimary,
...brandSecondary,
...brandInactive,
...notifications
...notifications,
...metrics,
...fonts
};
module.exports = colors;

134
ui/stories/index.js
View File

@ -306,7 +306,139 @@ 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', () => (
<MiniMetric />
<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'
/>
));