1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00
This commit is contained in:
JUDIT GRESKOVITS 2017-01-11 10:15:19 +00:00
commit df66179b5d
25 changed files with 676 additions and 405 deletions

View File

@ -1,12 +1,13 @@
const React = require('react');
// const ReactRouter = require('react-router');
const ReactRouter = require('react-router');
const Anchor = require('@ui/components/anchor');
const List = require('@ui/components/list');
const PropTypes = require('@root/prop-types');
// const {
// Link
// } = ReactRouter;
const {
Link
} = ReactRouter;
const {
ListItem,
@ -21,15 +22,16 @@ const {
ListItemHeader
} = List;
const Service = ({
const ServiceItem = ({
org = '',
project = '',
service = {}
}) => {
// const to = `/${org}/projects/${project}/services/${service.id}`;
const to = `/${org}/projects/${project}/services/${service.id}`;
const childs = service.services.map((service) => (
<ListItem
collapsed={service.collapsed}
flat
key={service.uuid}
stacked={service.instances > 1}
@ -62,10 +64,21 @@ const Service = ({
);
return (
<ListItem headed>
<ListItem
collapsed={service.collapsed}
headed
>
<ListItemHeader>
<ListItemMeta>
<ListItemTitle>{service.name}</ListItemTitle>
<ListItemTitle>
<Link to={to}>
{Anchor.fn(
<Anchor secondary>
{service.name}
</Anchor>
)}
</Link>
</ListItemTitle>
<ListItemSubTitle>{service.instances} instance</ListItemSubTitle>
</ListItemMeta>
<ListItemOptions></ListItemOptions>
@ -75,10 +88,10 @@ const Service = ({
);
};
Service.propTypes = {
ServiceItem.propTypes = {
org: React.PropTypes.string,
project: React.PropTypes.string,
service: PropTypes.service
};
module.exports = Service;
module.exports = ServiceItem;

View File

@ -3,7 +3,7 @@ const ReactRedux = require('react-redux');
const EmptyServices = require('@components/empty/services');
const PropTypes = require('@root/prop-types');
const Service = require('./service');
const ServiceItem = require('@components/service-item');
const selectors = require('@state/selectors');
const {
@ -26,7 +26,7 @@ const Services = ({
);
const serviceList = services.map((service) => (
<Service
<ServiceItem
key={service.uuid}
org={org.id}
project={project.id}

View File

@ -160,6 +160,7 @@
},
"services": {
"ui": {
"collapsed": [],
"sections": [
"summary",
"instances",

View File

@ -10,5 +10,6 @@ const APP = constantCase(process.env['APP_NAME']);
module.exports = {
...require('@state/thunks'),
updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`),
toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`)
toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`),
toggleServiceCollapsed: createAction(`${APP}/APP/TOGGLE_SERVICE_COLLAPSED`)
};

View File

@ -1,9 +1,23 @@
const ReduxActions = require('redux-actions');
const actions = require('@state/actions');
const {
handleActions
} = ReduxActions;
const {
toggleServiceCollapsed
} = actions;
module.exports = handleActions({
'x': (state) => state // somehow handleActions needs at least one reducer
[toggleServiceCollapsed.toString()]: (state, action) => ({
...state,
ui: {
...state.ui,
collapsed: state.ui.collapsed.indexOf(action.payload) >= 0
? state.ui.collapsed.filter((uuid) => uuid !== action.payload)
: [...state.ui.collapsed, action.payload]
}
})
}, {});

View File

@ -15,6 +15,7 @@ const serviceUiSections = (state) => get(state, 'services.ui.sections', []);
const orgs = (state) => get(state, 'orgs.data', []);
const projects = (state) => get(state, 'projects.data', []);
const services = (state) => get(state, 'services.data', []);
const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
const instances = (state) => get(state, 'instances.data', []);
const projectById = (projectId) => createSelector(
@ -45,19 +46,28 @@ const orgSections = (orgId) => createSelector(
);
const servicesByProjectId = (projectId) => createSelector(
[services, projectById(projectId)],
(services, project) =>
[services, projectById(projectId), collapsedServices],
(services, project, collapsed) =>
services.filter((s) => s.project === project.uuid)
.map((service) => ({
...service,
services: services.filter((s) => s.parent === service.uuid)
}))
.filter((s) => !s.parent)
.map((service) => ({
...service,
collapsed: collapsed.indexOf(service.uuid) >= 0,
services: service.services.map((service) => ({
...service,
collapsed: collapsed.indexOf(service.uuid) >= 0
}))
}))
);
const instancesByServiceId = (serviceId) => createSelector(
[instances, serviceById(serviceId)],
(instances, service) => instances.filter((i) => i.service === service.uuid)
(instances, service) =>
instances.filter((i) => i.service === service.uuid)
);

View File

@ -0,0 +1,26 @@
const constants = require('../../shared/constants');
const React = require('react');
const Styled = require('styled-components');
const {
colors
} = constants;
const {
default: styled
} = Styled;
const color = (props) => props.secondary
? colors.brandSecondaryLink
: colors.brandPrimaryLink;
const Anchor = styled.a`
color: ${color} !important;
`;
module.exports = Anchor;
module.exports.fn = (element) => (props) => React.cloneElement(element, {
...element.props,
...props
}, element.props.children);

View File

@ -5,9 +5,9 @@ const Styled = require('styled-components');
const {
forms,
links,
tables,
typography
typography,
colors
} = constants;
const {
@ -31,12 +31,12 @@ const fontFilenames = [
module.exports = styled.div`
${generateFonts(fontFamilies, fontFilenames)};
font-family: 'LibreFranklin', -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #373A3C;
color: ${colors.fonts.regular};
background-color: #FFFFFF;
/**************************************************************************
@ -343,13 +343,12 @@ module.exports = styled.div`
*/
& a {
color: ${links.color};
text-decoration: ${links.decoration};
color: ${colors.brandPrimaryLink};
text-decoration: underline;
&:focus,
&:hover {
color: ${links.hoverColor};
text-decoration: ${links.hoverDecoration};
text-decoration: none;
}
&:focus {
@ -364,8 +363,7 @@ module.exports = styled.div`
&:focus,
&:hover {
color: ${links.hoverColor};
text-decoration: ${links.hoverDecoration};
text-decoration: none;
}
&:focus {

View File

@ -0,0 +1,39 @@
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const composers = require('../../shared/composers');
const React = require('react');
const Styled = require('styled-components');
const closeIcon = require('../../shared/assets/close');
const {
colors
} = constants;
const {
remcalc
} = fns;
const {
default: styled
} = Styled;
const Close = ({
style,
onClick
}) => {
return (
<StyledButton
style={style}
onClick={onClick}
>
<img src={closeIcon} alt="Close"/>
</StyledButton>
);
};
Close.propTypes = {
style: React.PropTypes.object,
onClick: React.PropTypes.func
};
module.exports = Close;

View File

@ -0,0 +1,65 @@
# `<Notification>`
## demo
```embed
const React = require('react');
const ReactDOM = require('react-dom/server');
const Base = require('../base');
const Container = require('../container');
const Row = require('../row');
const Column = require('../column');
const Notificaton = require('./index.js');
const styles = require('./style.css');
const style = {
marginBottom: 0
}
nmodule.exports = ReactDOM.renderToString(
<Base>
<Row>
<Column>
<Notificaton type='warning' icon='exclamation'>
<p style={style}>This is the warning content</p>
</Notificaton>
</Column>
</Row>
<Row>
<Column>
<Notificaton type='warning' icon='question'>
<p style={style}>This is the question content</p>
</Notificaton>
</Column>
</Row>
<Row>
<Column>
<Notificaton type='alert' icon='exclamation'>
<p style={style}>This is the alert content</p>
</Notificaton>
</Column>
</Row>
</Base>
);
```
## usage
```js
const React = require('react');
const Notificaton = require('ui/avatar');
module.exports = () => {
return (
<Notificaton type='warning' icon='question'>
<p>This is the warning content</p>
</Notificaton>
<Notificaton type='warning' icon='question'>
<p>This is the question content</p>
</Notificaton>
<Notificaton type='alert' icon='exclamation'>
<p>This is the alert content</p>
</Notificaton>
);
}
```

View File

@ -16,26 +16,28 @@ const paddingTop = (props) => props.headed && !props.fromHeader
? remcalc(47)
: remcalc(0);
const display = (props) => props.headed && !props.fromHeader && props.collapsed
? 'none'
: 'flex';
const StyledView = styled(Row)`
flex: 1;
margin: 0;
height: 100%;
padding-top: ${paddingTop};
display: ${display};
`;
const View = (props) => (
<StyledView name='list-item-view' {...props}>
{props.children}
</StyledView>
);
const View = (props) => {
const hide = props.headed && !props.fromHeader && props.collapsed;
return hide ? null : (
<StyledView name='list-item-view' {...props}>
{props.children}
</StyledView>
);
};
View.propTypes = {
children: React.PropTypes.node
children: React.PropTypes.node,
collapsed: React.PropTypes.bool,
fromHeader: React.PropTypes.bool,
headed: React.PropTypes.bool
};
module.exports = transferProps([

View File

@ -0,0 +1,115 @@
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 {
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 (
<Container>
<Canvas
innerRef={this.ref('component')}
/>
</Container>
);
}
}
Graph.propTypes = {
data: React.PropTypes.array,
labels: React.PropTypes.number,
max: React.PropTypes.number,
min: React.PropTypes.number
};
module.exports = Graph;

View File

@ -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;
};
}
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 = {
MiniMetricGraph: require('./graph'),
MiniMetricMeta: require('./meta'),
MiniMetricTitle: require('./title'),
MiniMetricSubtitle: require('./subtitle'),
MiniMetricView: require('./view')
};
module.exports = MiniMetric;

View File

@ -0,0 +1,41 @@
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;
const OuterBox = styled.div`
height: ${remcalc(53)};
padding: ${remcalc(8)} ${remcalc(12)};
border-bottom: ${remcalc(1)} solid ${colors.seperator};
`;
const InnerBox = styled.div`
width: 100%;
height: ${remcalc(36)};
`;
const Meta = (props) => (
<OuterBox {...props}>
<InnerBox>
{props.children}
</InnerBox>
</OuterBox>
);
Meta.propTypes = {
children: React.PropTypes.node
};
module.exports = Meta;

View File

@ -0,0 +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};
`;

View File

@ -0,0 +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;
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;
`;

View File

@ -0,0 +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;
const Container = styled.div`
position: relative;
height: 100%;
width: 100%;
background-color: ${colors.miniBackground};
border: solid ${remcalc(1)} ${colors.borderSecondary};
`;
const Shadow = styled.div`
position: absolute;
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;

View File

@ -1,6 +1,6 @@
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const match = require('../../shared/match');
const composers = require('../../shared/composers');
const React = require('react');
const Styled = require('styled-components');
@ -12,44 +12,46 @@ const {
remcalc
} = fns;
const {
prop: matchProp
} = match;
const {
default: styled
} = Styled;
const background = matchProp({
warning: colors.warningLight,
alert: colors.alertLight,
}, 'transparent');
const {
baseBox,
pseudoEl
} = composers;
const border = matchProp({
warning: colors.warning,
alert: 'red',
}, 'none');
const decorationWidth = remcalc(108);
const StyledNotification = styled.div`
border-radius: 4px;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
display: inline-block;
height: 100%;
min-height: 100%;
position: relative;
width: 100%;
background-color: ${background('type')};
border: ${border('type')};
${baseBox(0)}
&::before {
background-color: ${props => colors[props.type] || colors.brandPrimary}
width: ${decorationWidth};
height: 100%;
${pseudoEl()}
}
`;
const StyledContent = styled.div`
float: left;
padding: ${remcalc(20)};
padding: ${remcalc(18)} 20% ${remcalc(18)} ${remcalc(18)};
margin-left: ${decorationWidth};
width: 100%;
`;
const Notificaton = ({
children,
className,
style,
type = ''
type
}) => {
return (
<StyledNotification
@ -68,7 +70,7 @@ Notificaton.propTypes = {
children: React.PropTypes.object,
className: React.PropTypes.str,
style: React.PropTypes.object,
type: React.PropTypes.str
type: React.PropTypes.string
};
module.exports = Notificaton;

View File

@ -1,6 +1,7 @@
module.exports = {
Base: require('./components/base'),
AddMetric: require('./components/add-metric'),
Anchor: require('./components/anchor'),
Avatar: require('./components/avatar'),
Button: require('./components/button'),
Checkbox: require('./components/checkbox'),

View File

@ -10,7 +10,8 @@ const brandPrimary = {
borderPrimary: '#2531BC',
borderPrimaryDark: '#2531BC',
borderPrimaryDarkest: '#062BA0',
brandPrimaryColor: '#FFFFFF'
brandPrimaryColor: '#FFFFFF',
brandPrimaryLink: '#364acd'
};
const brandSecondary = {
@ -20,7 +21,8 @@ const brandSecondary = {
borderSecondary: '#D8D8D8',
borderSecondaryDark: '#D8D8D8',
borderSecondaryDarkest: '#D8D8D8',
brandSecondaryColor: '#464646'
brandSecondaryColor: '#464646',
brandSecondaryLink: '#ffffff'
};
const brandInactive = {
@ -33,6 +35,7 @@ const notifications = {
alert: '#DA4B42',
alertLight: '#FFC7C7',
confirmation: '#00AF66',
success: '#00AF66',
warning: '#E4A800',
warningLight: '#FFFAED',
};
@ -48,7 +51,7 @@ const colors = {
...brandInactive,
...notifications,
...metrics,
...fonts
fonts
};
module.exports = colors;

View File

@ -6,7 +6,6 @@ const boxes = require('./boxes');
const typography = require('./typography');
const sizes = require('./sizes');
const breakpoints = require('./breakpoints');
const links = require('./links');
const tables = {
bg: 'transparent',
@ -21,7 +20,6 @@ const constants = traverse({
colors,
boxes,
forms,
links,
sizes,
tables,
typography

View File

@ -1,14 +0,0 @@
const Color = require('color');
const links = {
color: '#364ACD',
decoration: 'none',
hoverColor: ({
color
}) => {
return Color(color).darken(0.15).hex();
},
hoverDecoration: 'underline'
};
module.exports = links;

View File

@ -1,8 +1,6 @@
const colors = require('./colors');
const typography = {
fontPrimary: 'sans serif',
dtFontWeight: 'bold',
abbrBorderColor: colors.brandSecondary,
textMuted: colors.brandSecondary
};

View File

@ -22,16 +22,16 @@ const generateFonts = (fontFamilies, fontFilenames) => {
fontCSS += `
@font-face {
font-family: ${fontFamily};
src: url(${pathToFont}${fontFilenames[i]}.eot);
src: url(${pathToFont}${fontFilenames[i]}.eot?#iefix)
src: url(${pathToFont + fontFilenames[i]}.eot);
src: url(${pathToFont + fontFilenames[i]}.eot?#iefix)
format('embedded-opentype');
src: url(${pathToFont}${fontFilenames[i]}.woff)
src: url(${pathToFont + fontFilenames[i]}.woff)
format('woff');
src: url(${pathToFont}${fontFilenames[i]}.woff2)
src: url(${pathToFont + fontFilenames[i]}.woff2)
format('woff2');
src: url(${pathToFont}${fontFilenames[i]}.ttf)
src: url(${pathToFont + fontFilenames[i]}.ttf)
format('truetype');
src: url(${pathToFont}${fontFilenames[i]}.svg#${fontFamily})
src: url(${pathToFont + fontFilenames[i]}.svg#${fontFamily})
format('svg');
font-weight: normal;
font-style: normal;

View File

@ -33,7 +33,13 @@ const {
ListItemView,
ListItemGroupView
},
MiniMetric,
MiniMetric: {
MiniMetricGraph,
MiniMetricMeta,
MiniMetricTitle,
MiniMetricSubtitle,
MiniMetricView
},
Modal,
Notificaton,
Pagination,
@ -72,7 +78,7 @@ const styles = {
storiesOf('Grid', module)
.add('Row and Column', () => (
<Base data-id="base">
<Base>
<Container fluid>
<Row>
<Column
@ -220,16 +226,20 @@ storiesOf('Radio', module)
storiesOf('Input', module)
.add('Default', () => (
<Input placeholder="I am the placeholder" />
<Base>
<Input placeholder="I am the placeholder" />
</Base>
))
.add('type=email', () => (
<Input
label='Email Address'
placeholder='Enter email'
type='email'
>
<small>We&apos;ll never share your email with anyone else.</small>
</Input>
<Base>
<Input
label='Email Address'
placeholder='Enter email'
type='email'
>
<small>We&apos;ll never share your email with anyone else.</small>
</Input>
</Base>
));
storiesOf('Modal', module)
@ -241,19 +251,25 @@ storiesOf('Modal', module)
storiesOf('Notificaton', module)
.add('Default', () => (
<Notificaton>
<span>This is the default content</span>
</Notificaton>
<Base>
<Notificaton>
<span>This is the default content</span>
</Notificaton>
</Base>
))
.add('warning', () => (
<Notificaton type='warning'>
<span>This is the warning content</span>
</Notificaton>
.add('Success', () => (
<Base>
<Notificaton type="success">
<span>This is the success content</span>
</Notificaton>
</Base>
))
.add('alert', () => (
<Notificaton type='alert'>
<span>This is the alert content</span>
</Notificaton>
.add('Alert', () => (
<Base>
<Notificaton type="alert">
<span>This is the alert content</span>
</Notificaton>
</Base>
));
storiesOf('Pagination', module)
@ -399,141 +415,143 @@ storiesOf('Widget', module)
</Widget>
));
const colors = {
perc: 'rgba(54, 74, 205, 0.2)',
alt: 'rgba(245, 93, 93, 0.2)'
};
const minMetricData = [{
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,
}];
storiesOf('Metrics', module)
.add('Mini Metric', () => (
<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'
/>
<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)