Update styles for MiniMetric's
This commit is contained in:
parent
319552fc20
commit
1e50e4d7aa
1
ui/.storybook/head.html
Normal file
1
ui/.storybook/head.html
Normal file
@ -0,0 +1 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:400,600" rel="stylesheet">
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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'
|
||||
/>
|
||||
));
|
||||
|
Loading…
Reference in New Issue
Block a user