split mini-metrics into multiple components
This commit is contained in:
Sérgio Ramos
parent
0cba80f4e9
commit
afdef33aff
94
ui/src/components/mini-metric/graph.js
Normal file
94
ui/src/components/mini-metric/graph.js
Normal file
@ -0,0 +1,94 @@
|
||||
const buildArray = require('build-array');
|
||||
const Chart = require('chart.js');
|
||||
const React = require('react');
|
||||
const whisker = require('chartjs-chart-box-plot');
|
||||
|
||||
whisker(Chart);
|
||||
|
||||
class Graph extends React.Component {
|
||||
componentDidMount() {
|
||||
const {
|
||||
data = [],
|
||||
labels = 0,
|
||||
max = 100,
|
||||
min = 0
|
||||
} = this.props;
|
||||
|
||||
const _labels = !Array.isArray(labels)
|
||||
? buildArray(labels || data.length).map((v, i) => '')
|
||||
: labels;
|
||||
|
||||
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
|
||||
}
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
data: {
|
||||
labels: _labels,
|
||||
datasets: [{
|
||||
data
|
||||
}]
|
||||
}
|
||||
});
|
||||
}
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const {
|
||||
data = [],
|
||||
labels = 0
|
||||
} = this.props;
|
||||
|
||||
const _labels = !Array.isArray(labels)
|
||||
? buildArray(labels || data.length).map((v, i) => '')
|
||||
: labels;
|
||||
|
||||
this._chart.data.datasets = [{
|
||||
data
|
||||
}];
|
||||
|
||||
this._chart.data.labels = _labels;
|
||||
this._chart.update(0);
|
||||
}
|
||||
ref(name) {
|
||||
this._refs = this._refs || {};
|
||||
|
||||
return (el) => {
|
||||
this._refs[name] = el;
|
||||
};
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<canvas
|
||||
height='72'
|
||||
ref={this.ref('component')}
|
||||
width='157'
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Graph.propTypes = {
|
||||
data: React.PropTypes.array,
|
||||
labels: React.PropTypes.number,
|
||||
max: React.PropTypes.number,
|
||||
min: React.PropTypes.number
|
||||
};
|
||||
|
||||
module.exports = Graph;
|
||||
@ -1,166 +1,7 @@
|
||||
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');
|
||||
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 {
|
||||
datasets = [],
|
||||
labels = 0,
|
||||
max = 100,
|
||||
min = 0
|
||||
} = this.props;
|
||||
|
||||
const _labels = !Array.isArray(labels)
|
||||
? buildArray(labels).map((v, i) => '')
|
||||
: labels;
|
||||
|
||||
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
|
||||
}
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
data: {
|
||||
labels: _labels,
|
||||
datasets: datasets
|
||||
}
|
||||
});
|
||||
}
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const {
|
||||
datasets = [],
|
||||
labels = 0
|
||||
} = this.props;
|
||||
|
||||
this._chart.data.datasets = datasets;
|
||||
this._chart.data.labels = buildArray(labels).map((v, i) => '');
|
||||
this._chart.update(0);
|
||||
}
|
||||
ref(name) {
|
||||
this._refs = this._refs || {};
|
||||
|
||||
return (el) => {
|
||||
this._refs[name] = el;
|
||||
module.exports = {
|
||||
MiniMetricGraph: require('./graph'),
|
||||
MiniMetricMeta: require('./meta'),
|
||||
MiniMetricTitle: require('./title'),
|
||||
MiniMetricSubtitle: require('./subtitle'),
|
||||
MiniMetricView: require('./view')
|
||||
};
|
||||
}
|
||||
render() {
|
||||
const {
|
||||
name,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
MiniMetric.propTypes = {
|
||||
datasets: React.PropTypes.array,
|
||||
labels: React.PropTypes.number,
|
||||
max: React.PropTypes.number,
|
||||
min: React.PropTypes.number,
|
||||
name: React.PropTypes.string,
|
||||
};
|
||||
|
||||
module.exports = MiniMetric;
|
||||
|
||||
44
ui/src/components/mini-metric/meta.js
Normal file
44
ui/src/components/mini-metric/meta.js
Normal file
@ -0,0 +1,44 @@
|
||||
const constants = require('../../shared/constants');
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const OuterBox = styled.div`
|
||||
height: 38px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px 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};
|
||||
`;
|
||||
|
||||
const Meta = (props) => (
|
||||
<OuterBox {...props}>
|
||||
<InnerBox>
|
||||
{props.children}
|
||||
</InnerBox>
|
||||
</OuterBox>
|
||||
);
|
||||
|
||||
Meta.propTypes = {
|
||||
children: React.PropTypes.node
|
||||
};
|
||||
|
||||
module.exports = Meta;
|
||||
9
ui/src/components/mini-metric/subtitle.js
Normal file
9
ui/src/components/mini-metric/subtitle.js
Normal file
@ -0,0 +1,9 @@
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
module.exports = styled.p`
|
||||
margin: 0;
|
||||
`;
|
||||
18
ui/src/components/mini-metric/title.js
Normal file
18
ui/src/components/mini-metric/title.js
Normal file
@ -0,0 +1,18 @@
|
||||
const constants = require('../../shared/constants');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
module.exports = styled.h3`
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.29;
|
||||
color: ${colors.semibold};
|
||||
`;
|
||||
27
ui/src/components/mini-metric/view.js
Normal file
27
ui/src/components/mini-metric/view.js
Normal file
@ -0,0 +1,27 @@
|
||||
const constants = require('../../shared/constants');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
module.exports = 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;
|
||||
content: '';
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0));
|
||||
}
|
||||
`;
|
||||
@ -27,7 +27,13 @@ const {
|
||||
ListItemView,
|
||||
ListItemGroupView
|
||||
},
|
||||
MiniMetric,
|
||||
MiniMetric: {
|
||||
MiniMetricGraph,
|
||||
MiniMetricMeta,
|
||||
MiniMetricTitle,
|
||||
MiniMetricSubtitle,
|
||||
MiniMetricView
|
||||
},
|
||||
Modal,
|
||||
Notificaton,
|
||||
Pagination,
|
||||
@ -406,141 +412,119 @@ 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 Metric', () => (
|
||||
<MiniMetric
|
||||
datasets={[{
|
||||
backgroundColor: colors['perc'],
|
||||
altBackgroundColor: colors['alt'],
|
||||
data: [
|
||||
{
|
||||
<MiniMetricView>
|
||||
<MiniMetricMeta>
|
||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||
</MiniMetricMeta>
|
||||
<MiniMetricGraph
|
||||
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'
|
||||
/>
|
||||
</MiniMetricView>
|
||||
));
|
||||
|
||||
storiesOf('ListItem', module)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user