mirror of
https://github.com/yldio/copilot.git
synced 2024-11-13 06:40:06 +02:00
split mini-metrics into multiple components
This commit is contained in:
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');
|
module.exports = {
|
||||||
const Styled = require('styled-components');
|
MiniMetricGraph: require('./graph'),
|
||||||
const constants = require('../../shared/constants');
|
MiniMetricMeta: require('./meta'),
|
||||||
|
MiniMetricTitle: require('./title'),
|
||||||
const {
|
MiniMetricSubtitle: require('./subtitle'),
|
||||||
colors
|
MiniMetricView: require('./view')
|
||||||
} = 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;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
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,
|
ListItemView,
|
||||||
ListItemGroupView
|
ListItemGroupView
|
||||||
},
|
},
|
||||||
MiniMetric,
|
MiniMetric: {
|
||||||
|
MiniMetricGraph,
|
||||||
|
MiniMetricMeta,
|
||||||
|
MiniMetricTitle,
|
||||||
|
MiniMetricSubtitle,
|
||||||
|
MiniMetricView
|
||||||
|
},
|
||||||
Modal,
|
Modal,
|
||||||
Notificaton,
|
Notificaton,
|
||||||
Pagination,
|
Pagination,
|
||||||
@ -406,141 +412,119 @@ 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 Metric', () => (
|
.add('Mini Metric', () => (
|
||||||
<MiniMetric
|
<MiniMetricView>
|
||||||
datasets={[{
|
<MiniMetricMeta>
|
||||||
backgroundColor: colors['perc'],
|
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||||
altBackgroundColor: colors['alt'],
|
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||||
data: [
|
</MiniMetricMeta>
|
||||||
{
|
<MiniMetricGraph
|
||||||
firstQuartile: 15,
|
data={[{
|
||||||
thirdQuartile: 15,
|
firstQuartile: 15,
|
||||||
median: 15,
|
thirdQuartile: 15,
|
||||||
max: 15,
|
median: 15,
|
||||||
min: 15,
|
max: 15,
|
||||||
},
|
min: 15,
|
||||||
{
|
}, {
|
||||||
firstQuartile: 26,
|
firstQuartile: 26,
|
||||||
thirdQuartile: 26,
|
thirdQuartile: 26,
|
||||||
median: 26,
|
median: 26,
|
||||||
max: 26,
|
max: 26,
|
||||||
min: 26,
|
min: 26,
|
||||||
},
|
}, {
|
||||||
{
|
firstQuartile: 17,
|
||||||
firstQuartile: 17,
|
thirdQuartile: 17,
|
||||||
thirdQuartile: 17,
|
median: 17,
|
||||||
median: 17,
|
max: 17,
|
||||||
max: 17,
|
min: 17,
|
||||||
min: 17,
|
}, {
|
||||||
},
|
firstQuartile: 15,
|
||||||
{
|
thirdQuartile: 25,
|
||||||
firstQuartile: 15,
|
median: 19,
|
||||||
thirdQuartile: 25,
|
max: 19,
|
||||||
median: 19,
|
min: 20,
|
||||||
max: 19,
|
}, {
|
||||||
min: 20,
|
firstQuartile: 19,
|
||||||
},
|
thirdQuartile: 25,
|
||||||
{
|
median: 21,
|
||||||
firstQuartile: 19,
|
max: 20,
|
||||||
thirdQuartile: 25,
|
min: 25,
|
||||||
median: 21,
|
}, {
|
||||||
max: 20,
|
firstQuartile: 24,
|
||||||
min: 25,
|
thirdQuartile: 30,
|
||||||
},
|
median: 25,
|
||||||
{
|
max: 26,
|
||||||
firstQuartile: 24,
|
min: 27,
|
||||||
thirdQuartile: 30,
|
}, {
|
||||||
median: 25,
|
firstQuartile: 28,
|
||||||
max: 26,
|
thirdQuartile: 34,
|
||||||
min: 27,
|
median: 30,
|
||||||
},
|
max: 30,
|
||||||
{
|
min: 30,
|
||||||
firstQuartile: 28,
|
}, {
|
||||||
thirdQuartile: 34,
|
firstQuartile: 30,
|
||||||
median: 30,
|
thirdQuartile: 45,
|
||||||
max: 30,
|
median: 35,
|
||||||
min: 30,
|
max: 40,
|
||||||
},
|
min: 40,
|
||||||
{
|
}, {
|
||||||
firstQuartile: 30,
|
firstQuartile: 20,
|
||||||
thirdQuartile: 45,
|
thirdQuartile: 55,
|
||||||
median: 35,
|
median: 45,
|
||||||
max: 40,
|
max: 44,
|
||||||
min: 40,
|
min: 44,
|
||||||
},
|
}, {
|
||||||
{
|
firstQuartile: 55,
|
||||||
firstQuartile: 20,
|
thirdQuartile: 55,
|
||||||
thirdQuartile: 55,
|
median: 55,
|
||||||
median: 45,
|
max: 55,
|
||||||
max: 44,
|
min: 55,
|
||||||
min: 44,
|
}, {
|
||||||
},
|
firstQuartile: 57,
|
||||||
{
|
thirdQuartile: 56,
|
||||||
firstQuartile: 55,
|
median: 57,
|
||||||
thirdQuartile: 55,
|
max: 58,
|
||||||
median: 55,
|
min: 57,
|
||||||
max: 55,
|
}, {
|
||||||
min: 55,
|
firstQuartile: 57,
|
||||||
},
|
thirdQuartile: 56,
|
||||||
{
|
median: 56,
|
||||||
firstQuartile: 57,
|
max: 56,
|
||||||
thirdQuartile: 56,
|
min: 56,
|
||||||
median: 57,
|
}, {
|
||||||
max: 58,
|
firstQuartile: 60,
|
||||||
min: 57,
|
thirdQuartile: 56,
|
||||||
},
|
median: 60,
|
||||||
{
|
max: 60,
|
||||||
firstQuartile: 57,
|
min: 60,
|
||||||
thirdQuartile: 56,
|
}, {
|
||||||
median: 56,
|
firstQuartile: 57,
|
||||||
max: 56,
|
thirdQuartile: 57,
|
||||||
min: 56,
|
median: 57,
|
||||||
},
|
max: 57,
|
||||||
{
|
min: 57,
|
||||||
firstQuartile: 60,
|
}, {
|
||||||
thirdQuartile: 56,
|
firstQuartile: 57,
|
||||||
median: 60,
|
thirdQuartile: 55,
|
||||||
max: 60,
|
median: 55,
|
||||||
min: 60,
|
max: 55,
|
||||||
},
|
min: 55,
|
||||||
{
|
}, {
|
||||||
firstQuartile: 57,
|
firstQuartile: 20,
|
||||||
thirdQuartile: 57,
|
thirdQuartile: 45,
|
||||||
median: 57,
|
median: 45,
|
||||||
max: 57,
|
max: 45,
|
||||||
min: 57,
|
min: 45,
|
||||||
},
|
}, {
|
||||||
{
|
firstQuartile: 15,
|
||||||
firstQuartile: 57,
|
thirdQuartile: 40,
|
||||||
thirdQuartile: 55,
|
median: 30,
|
||||||
median: 55,
|
max: 49,
|
||||||
max: 55,
|
min: 30,
|
||||||
min: 55,
|
}]}
|
||||||
},
|
/>
|
||||||
{
|
</MiniMetricView>
|
||||||
firstQuartile: 20,
|
|
||||||
thirdQuartile: 45,
|
|
||||||
median: 45,
|
|
||||||
max: 45,
|
|
||||||
min: 45,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
firstQuartile: 15,
|
|
||||||
thirdQuartile: 40,
|
|
||||||
median: 30,
|
|
||||||
max: 49,
|
|
||||||
min: 30,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}]}
|
|
||||||
labels={17}
|
|
||||||
name='Memory'
|
|
||||||
/>
|
|
||||||
));
|
));
|
||||||
|
|
||||||
storiesOf('ListItem', module)
|
storiesOf('ListItem', module)
|
||||||
|
Loading…
Reference in New Issue
Block a user