mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-11-11 05:40:11 +02:00
Code Issues Releases Wiki Activity

make MiniMetrics almost responsive

Browse Source
This commit is contained in:
Sérgio Ramos 2017-01-10 19:12:50 +00:00
parent afdef33aff
commit 8cb26623f8
6 changed files with 231 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ui/src/components/mini-metric/graph.js
View File

@ -1,10 +1,31 @@
const buildArray = require('build-array');
const Chart = require('chart.js');
const fns = require('../../shared/functions');
const React = require('react');
const Styled = require('styled-components');
const whisker = require('chartjs-chart-box-plot');
whisker(Chart);
const {
remcalc
} = fns;
const {
default: styled
} = Styled;
const Container = styled.div`
position: relative;
height: ${remcalc(72)};
width: 100%;
`;
const Canvas = styled.canvas`
position: absolute;
bottom: 0;
`;
class Graph extends React.Component {
componentDidMount() {
const {
@ -75,11 +96,11 @@ class Graph extends React.Component {
}
render() {
return (
<canvas
height='72'
ref={this.ref('component')}
width='157'
<Container>
<Canvas
innerRef={this.ref('component')}
/>
</Container>
);
}
}

23
ui/src/components/mini-metric/meta.js
View File

@ -1,4 +1,5 @@
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const React = require('react');
const Styled = require('styled-components');
@ -6,27 +7,23 @@ const {
colors
} = constants;
const {
remcalc
} = fns;
const {
default: styled
} = Styled;
const OuterBox = styled.div`
height: 38px;
padding: 8px 12px;
border-bottom: 1px solid ${colors.seperator};
height: ${remcalc(53)};
padding: ${remcalc(8)} ${remcalc(12)};
border-bottom: ${remcalc(1)} 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};
width: 100%;
height: ${remcalc(36)};
`;
const Meta = (props) => (

17
ui/src/components/mini-metric/subtitle.js
View File

@ -1,9 +1,26 @@
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const Styled = require('styled-components');
const {
remcalc
} = fns;
const {
colors
} = constants;
const {
default: styled
} = Styled;
module.exports = styled.p`
margin: 0;
text-align: right;
font-size: ${remcalc(12)};
line-height: ${remcalc(18)};
font-weight: normal;
font-style: normal;
font-stretch: normal;
color: ${colors.regular};
`;

10
ui/src/components/mini-metric/title.js
View File

@ -1,18 +1,26 @@
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const Styled = require('styled-components');
const {
colors
} = constants;
const {
remcalc
} = fns;
const {
default: styled
} = Styled;
module.exports = styled.h3`
margin: 0;
font-size: 14px;
text-align: right;
font-size: ${remcalc(14)};
font-weight: 600;
font-style: normal;
line-height: 1.29;
color: ${colors.semibold};
margin-bottom: ${remcalc(3)} !important;
`;

40
ui/src/components/mini-metric/view.js
View File

@ -1,27 +1,47 @@
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const React = require('react');
const Styled = require('styled-components');
const {
colors
} = constants;
const {
remcalc
} = fns;
const {
default: styled
} = Styled;
module.exports = styled.div`
height: 127px;
width: 158px;
const Container = styled.div`
position: relative;
height: 100%;
width: 100%;
background-color: ${colors.miniBackground};
border: solid 1px ${colors.borderSecondary};
border: solid ${remcalc(1)} ${colors.borderSecondary};
`;
&::before {
const Shadow = styled.div`
position: absolute;
z-index: 1;
width: 9px;
height: 127px;
content: '';
height: 100%;
width: ${remcalc(9)};
left: 0;
top: 0;
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0));
}
`;
const View = (props) => (
<Container {...props}>
<Shadow />
{props.children}
</Container>
);
View.propTypes = {
children: React.PropTypes.node
};
module.exports = View;

46
ui/stories/index.js
View File

@ -412,15 +412,7 @@ storiesOf('Widget', module)
</Widget>
));
storiesOf('Metrics', module)
.add('Mini Metric', () => (
<MiniMetricView>
<MiniMetricMeta>
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
</MiniMetricMeta>
<MiniMetricGraph
data={[{
const minMetricData = [{
firstQuartile: 15,
thirdQuartile: 15,
median: 15,
@ -522,9 +514,41 @@ storiesOf('Metrics', module)
median: 30,
max: 49,
min: 30,
}]}
/>
}];
storiesOf('Metrics', module)
.add('Mini Metric', () => (
<Base>
<Row around>
<Column xs={3}>
<MiniMetricView>
<MiniMetricMeta>
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
</MiniMetricMeta>
<MiniMetricGraph data={minMetricData} />
</MiniMetricView>
</Column>
<Column xs={3}>
<MiniMetricView>
<MiniMetricMeta>
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
</MiniMetricMeta>
<MiniMetricGraph data={minMetricData} />
</MiniMetricView>
</Column>
<Column xs={3}>
<MiniMetricView>
<MiniMetricMeta>
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
</MiniMetricMeta>
<MiniMetricGraph data={minMetricData} />
</MiniMetricView>
</Column>
</Row>
</Base>
));
storiesOf('ListItem', module)