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

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">

View File

@ -1,4 +1,14 @@
const React = require('react'); 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 buildArray = require('build-array');
const Chart = require('chart.js'); const Chart = require('chart.js');
@ -6,6 +16,62 @@ const whisker = require('chartjs-chart-box-plot');
whisker(Chart); 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 { class MiniMetric extends React.Component {
componentDidMount() { componentDidMount() {
const { const {
@ -22,13 +88,16 @@ class MiniMetric extends React.Component {
this._chart = new Chart(this._refs.component, { this._chart = new Chart(this._refs.component, {
type: 'whisker', type: 'whisker',
responsive: true, responsive: true,
maintainAspectRatio: true,
options: { options: {
scales: { scales: {
xAxes: [{ xAxes: [{
display: false,
barPercentage: 1.0, barPercentage: 1.0,
categoryPercentage: 1.0 categoryPercentage: 1.0
}], }],
yAxes: [{ yAxes: [{
display: false,
ticks: { ticks: {
min: min, min: min,
max: max max: max
@ -36,7 +105,7 @@ class MiniMetric extends React.Component {
}] }]
}, },
legend: { legend: {
display: true display: false
} }
}, },
data: { data: {
@ -63,12 +132,25 @@ class MiniMetric extends React.Component {
}; };
} }
render() { render() {
const {
name,
} = this.props;
return ( return (
<canvas <StyledDiv>
height='400' <TextMetric>
ref={this.ref('component')} <InnerTextBox>
width='400' <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, labels: React.PropTypes.number,
max: React.PropTypes.number, max: React.PropTypes.number,
min: React.PropTypes.number, min: React.PropTypes.number,
name: React.PropTypes.string,
}; };
module.exports = MiniMetric; module.exports = MiniMetric;

View File

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

View File

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