mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
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 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;
|
||||||
|
@ -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;
|
||||||
|
@ -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'
|
||||||
|
/>
|
||||||
));
|
));
|
||||||
|
Loading…
Reference in New Issue
Block a user