parent
3c792c4150
commit
ebcc19e8dd
@ -5,6 +5,9 @@ import remcalc from 'remcalc';
|
||||
|
||||
import View from '../layout/view-container';
|
||||
|
||||
/**
|
||||
* @example ./usage.md
|
||||
*/
|
||||
export default ({ children, ...rest }) => (
|
||||
<div {...rest}>
|
||||
<View>
|
||||
|
@ -5,6 +5,7 @@ import remcalc from 'remcalc';
|
||||
|
||||
import typography from '../typography';
|
||||
import { H2 } from '../text/headings';
|
||||
import Chevron from '../icons/chevron';
|
||||
|
||||
const LinkChild = styled(Link)`
|
||||
text-decoration: none;
|
||||
@ -20,21 +21,15 @@ const Name = H2.extend`
|
||||
|
||||
color: ${props => props.theme.primary};
|
||||
margin: ${remcalc(20)} 0 ${remcalc(18)} 0;
|
||||
display: inline-block;
|
||||
`;
|
||||
|
||||
const Arrow = styled.div`
|
||||
border: solid ${props => props.theme.text};
|
||||
border-width: 0 ${remcalc(2)} ${remcalc(2)} 0;
|
||||
display: inline-block;
|
||||
padding: ${remcalc(2)};
|
||||
transform: rotate(-45deg);
|
||||
margin: ${remcalc(3)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)};
|
||||
const Arrow = styled(Chevron)`
|
||||
margin: ${remcalc(7)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)};
|
||||
`;
|
||||
|
||||
const Container = styled.div`
|
||||
/* trick prettier */
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export default ({ to, children, ...rest }) => {
|
||||
|
@ -1,11 +1,11 @@
|
||||
```
|
||||
const Breadcrumb = require('./index.js').default;
|
||||
const Item = require('./item.js').default;
|
||||
const BreadcrumbItem = require('./item.js').default;
|
||||
|
||||
<Breadcrumb>
|
||||
<Item>Home</Item>
|
||||
<Item>Warp Records Blog</Item>
|
||||
<Item>Services</Item>
|
||||
<Item>Nginx</Item>
|
||||
<BreadcrumbItem>Home</BreadcrumbItem>
|
||||
<BreadcrumbItem>Warp Records Blog</BreadcrumbItem>
|
||||
<BreadcrumbItem>Services</BreadcrumbItem>
|
||||
<BreadcrumbItem>Nginx</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
```
|
||||
|
@ -220,17 +220,32 @@ Button.propTypes = {
|
||||
*/
|
||||
children: PropTypes.node,
|
||||
/**
|
||||
* When used, it will render an `<a>` with the givern href
|
||||
* When used, it will render an `<a>` with the given href
|
||||
*/
|
||||
href: PropTypes.string,
|
||||
/**
|
||||
* When used, it will render a `<Link>` with the givern to
|
||||
* When used, it will render a `<Link>` with the given to
|
||||
*/
|
||||
to: PropTypes.string,
|
||||
/**
|
||||
* Is it primary ?
|
||||
*/
|
||||
primary: PropTypes.bool,
|
||||
/**
|
||||
* Is it secondary ?
|
||||
*/
|
||||
secondary: PropTypes.bool,
|
||||
/**
|
||||
* Is it tertiary ?
|
||||
*/
|
||||
tertiary: PropTypes.bool,
|
||||
/**
|
||||
* When set to true a smaller version of the button will show
|
||||
*/
|
||||
small: PropTypes.bool,
|
||||
/**
|
||||
* Set to true to show loading animation
|
||||
*/
|
||||
loading: PropTypes.bool,
|
||||
/**
|
||||
* When used, will give button an active state (Only for tertiary for now)
|
||||
@ -239,7 +254,12 @@ Button.propTypes = {
|
||||
};
|
||||
|
||||
Button.defaultProps = {
|
||||
primary: true
|
||||
primary: true,
|
||||
secondary: false,
|
||||
tertiary: false,
|
||||
small: false,
|
||||
loading: false,
|
||||
selected: false,
|
||||
};
|
||||
|
||||
export default Baseline(Button);
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { Broadcast, Subscriber } from 'joy-react-broadcast';
|
||||
import Baseline from '../baseline';
|
||||
import paperEffect from '../paper-effect';
|
||||
import paperEffect from './paper-effect';
|
||||
import { bottomShadow, bottomShadowDarker } from '../boxes';
|
||||
import remcalc from 'remcalc';
|
||||
import is, { isNot } from 'styled-is';
|
||||
@ -122,12 +122,43 @@ const Card = ({
|
||||
};
|
||||
|
||||
Card.propTypes = {
|
||||
/**
|
||||
* Contents of the Card
|
||||
*/
|
||||
children: PropTypes.node,
|
||||
/**
|
||||
* Is it collapsed ?
|
||||
*/
|
||||
collapsed: PropTypes.bool,
|
||||
/**
|
||||
* Does it have a header
|
||||
*/
|
||||
headed: PropTypes.bool,
|
||||
/**
|
||||
* Setting this to true will remove the box shadow
|
||||
*/
|
||||
flat: PropTypes.bool,
|
||||
/**
|
||||
* If set to true a paper effect will be added
|
||||
*/
|
||||
stacked: PropTypes.bool,
|
||||
transparent: PropTypes.bool
|
||||
/**
|
||||
* Transparent will set the card as secondary
|
||||
*/
|
||||
transparent: PropTypes.bool,
|
||||
/**
|
||||
* When set to false or using disabled you will see the disabled card
|
||||
*/
|
||||
active: PropTypes.bool
|
||||
};
|
||||
|
||||
Card.defaultProps = {
|
||||
collapsed: false,
|
||||
headed: false,
|
||||
flat: false,
|
||||
stacked: false,
|
||||
transparent: false,
|
||||
active: true
|
||||
};
|
||||
|
||||
export default Baseline(Card);
|
||||
|
@ -20,6 +20,11 @@ const StyledCard = Card.extend`
|
||||
background-color: ${props => props.theme.disabled};
|
||||
border-color: ${props => props.theme.grey};
|
||||
`};
|
||||
|
||||
button {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const Header = ({ children, ...rest }) => {
|
||||
|
@ -13,14 +13,19 @@ const StyledNav = Nav.extend`
|
||||
border-left: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
box-sizing: border-box;
|
||||
|
||||
${isOr('disabled', 'active')`
|
||||
border-left-color: ${props => props.theme.grey};
|
||||
`};
|
||||
button {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
${is('fromHeader') &&
|
||||
isNot('disabled')`
|
||||
border-left-color: ${props => props.theme.primary};
|
||||
`};
|
||||
|
||||
${isOr('disabled', 'active')`
|
||||
border-left-color: ${props => props.theme.grey};
|
||||
`};
|
||||
`;
|
||||
|
||||
const StyledButton = Button.extend`
|
||||
|
@ -126,73 +126,6 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
|
||||
</Card>;
|
||||
```
|
||||
|
||||
#### Card > Metrics
|
||||
|
||||
```jsx
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardMeta,
|
||||
CardOptions,
|
||||
CardOutlet,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardInfo,
|
||||
CardInfoLabel,
|
||||
CardInfoIconContainer
|
||||
} = require('./');
|
||||
|
||||
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
|
||||
const { Row } = require('react-styled-flexboxgrid');
|
||||
const metrics = require('./metrics.json');
|
||||
const { InstancesIconLight, HealthyIcon } = require('../icons');
|
||||
|
||||
<Card headed>
|
||||
<CardHeader>
|
||||
<CardMeta>
|
||||
<CardTitle>Nginx</CardTitle>
|
||||
<CardDescription>
|
||||
<CardInfo>
|
||||
<CardInfoIconContainer>
|
||||
<InstancesIconLight />
|
||||
</CardInfoIconContainer>
|
||||
<CardInfoLabel left light>4 of 4 instances</CardInfoLabel>
|
||||
</CardInfo>
|
||||
</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOptions />
|
||||
</CardHeader>
|
||||
<CardView>
|
||||
<CardDescription>
|
||||
<span>Scaling from 1 to 4: finished</span>
|
||||
<CardInfo>
|
||||
<CardInfoIconContainer>
|
||||
<HealthyIcon />
|
||||
</CardInfoIconContainer>
|
||||
<CardInfoLabel left>Healthy</CardInfoLabel>
|
||||
</CardInfo>
|
||||
</CardDescription>
|
||||
<CardDescription>
|
||||
<Row>
|
||||
<GraphContainer xs={4}>
|
||||
<GraphTitle>Memory usage</GraphTitle>
|
||||
<MetricGraph metricsData={metrics} graphDurationSeconds={90} />
|
||||
</GraphContainer>
|
||||
<GraphContainer xs={4}>
|
||||
<GraphTitle>CPU usage</GraphTitle>
|
||||
<MetricGraph metricsData={metrics} graphDurationSeconds={90} />
|
||||
</GraphContainer>
|
||||
<GraphContainer xs={4}>
|
||||
<GraphTitle>CPU wait time</GraphTitle>
|
||||
<MetricGraph metricsData={metrics} graphDurationSeconds={90} />
|
||||
</GraphContainer>
|
||||
</Row>
|
||||
</CardDescription>
|
||||
</CardView>
|
||||
</Card>;
|
||||
```
|
||||
|
||||
#### Card > Provisioning
|
||||
|
||||
```jsx
|
||||
@ -241,7 +174,6 @@ const {
|
||||
CardInfoIconContainer
|
||||
} = require('./');
|
||||
|
||||
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
|
||||
const StatusLoader = require('../status-loader').default;
|
||||
const { InstancesIconLight, HealthyIcon } = require('../icons');
|
||||
|
||||
@ -262,7 +194,7 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
|
||||
</CardHeader>
|
||||
<CardView>
|
||||
<CardDescription>
|
||||
<StatusLoader row msg="Provisioning 3 instances" />
|
||||
<StatusLoader inline row msg="Provisioning 3 instances" />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
@ -333,9 +265,7 @@ const {
|
||||
CardInfoIconContainer
|
||||
} = require('./');
|
||||
|
||||
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
|
||||
const { Row } = require('react-styled-flexboxgrid');
|
||||
const metrics = require('./metrics.json');
|
||||
const { InstancesIconLight, HealthyIcon } = require('../icons');
|
||||
|
||||
<Card>
|
||||
@ -366,7 +296,6 @@ const {
|
||||
CardInfoIconContainer
|
||||
} = require('./');
|
||||
|
||||
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
|
||||
const { Row } = require('react-styled-flexboxgrid');
|
||||
const { InstancesIconLight, HealthyIcon } = require('../icons');
|
||||
|
||||
@ -399,7 +328,6 @@ const {
|
||||
CardInfoIconContainer
|
||||
} = require('./');
|
||||
|
||||
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
|
||||
const { Row } = require('react-styled-flexboxgrid');
|
||||
const { InstancesIconLight, HealthyIcon } = require('../icons');
|
||||
|
||||
|
@ -1,5 +1,6 @@
|
||||
import styled from 'styled-components';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import typography from '../typography';
|
||||
import BaseInput from './base/input';
|
||||
@ -25,7 +26,7 @@ const Ul = styled.ul`
|
||||
|
||||
const CheckboxItem = BaseInput(({ children }) => <Li>{children}</Li>);
|
||||
|
||||
const Checkbox = Baseline(
|
||||
const CheckboxStyled = Baseline(
|
||||
BaseInput(
|
||||
BaseToggle({
|
||||
container: CheckboxItem,
|
||||
@ -37,8 +38,26 @@ const Checkbox = Baseline(
|
||||
/**
|
||||
* @example ./usage-checkbox.md
|
||||
*/
|
||||
export default ({ children, ...rest }) => (
|
||||
<Checkbox {...rest}>{children}</Checkbox>
|
||||
const Checkbox = ({ children, ...rest }) => (
|
||||
<CheckboxStyled {...rest}>{children}</CheckboxStyled>
|
||||
);
|
||||
|
||||
export const CheckboxList = Baseline(Ul);
|
||||
|
||||
export default Checkbox;
|
||||
|
||||
Checkbox.propTypes = {
|
||||
/**
|
||||
* Is the checkbox checked ?
|
||||
*/
|
||||
checked: PropTypes.bool,
|
||||
/**
|
||||
* Is the checkbox disabled ?
|
||||
*/
|
||||
disabled: PropTypes.bool
|
||||
};
|
||||
|
||||
Checkbox.defaultProps = {
|
||||
checked: false,
|
||||
disabled: false
|
||||
};
|
||||
|
@ -1,11 +1,35 @@
|
||||
import React from 'react';
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import BaseInput, { Stylable } from './base/input';
|
||||
import Baseline from '../baseline';
|
||||
|
||||
const Input = Baseline(BaseInput(Stylable('input')));
|
||||
const InputStyled = Baseline(BaseInput(Stylable('input')));
|
||||
|
||||
/**
|
||||
* @example ./usage-input.md
|
||||
*/
|
||||
export default ({ children, ...rest }) => <Input {...rest}>{children}</Input>;
|
||||
const Input = ({ children, ...rest }) => (
|
||||
<InputStyled {...rest}>{children}</InputStyled>
|
||||
);
|
||||
|
||||
export default Input;
|
||||
|
||||
Input.propTypes = {
|
||||
/**
|
||||
* Input type
|
||||
*/
|
||||
type: PropTypes.string,
|
||||
/**
|
||||
* Is the checkbox disabled ?
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* Placeholder text for the Input
|
||||
*/
|
||||
placeholder: PropTypes.string
|
||||
};
|
||||
|
||||
Input.defaultProps = {
|
||||
type: 'text',
|
||||
disabled: false
|
||||
};
|
||||
|
@ -1,6 +1,7 @@
|
||||
import styled from 'styled-components';
|
||||
import React from 'react';
|
||||
import remcalc from 'remcalc';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import BaseToggle from './base/toggle';
|
||||
import Baseline from '../baseline';
|
||||
@ -33,7 +34,7 @@ const RadioItem = BaseInput(({ children, id, ...rest }) => (
|
||||
<Li {...rest}>{children}</Li>
|
||||
));
|
||||
|
||||
const Radio = Baseline(
|
||||
const RadioStyled = Baseline(
|
||||
BaseToggle({
|
||||
container: RadioItem,
|
||||
type: 'radio'
|
||||
@ -43,6 +44,23 @@ const Radio = Baseline(
|
||||
/**
|
||||
* @example ./usage-radio.md
|
||||
*/
|
||||
export default ({ children, ...rest }) => <Radio {...rest}>{children}</Radio>;
|
||||
const Radio = ({ children, ...rest }) => <RadioStyled {...rest}>{children}</RadioStyled>;
|
||||
|
||||
export const RadioList = Baseline(Ul);
|
||||
export default Radio;
|
||||
|
||||
Radio.propTypes = {
|
||||
/**
|
||||
* Is the Radio checked ?
|
||||
*/
|
||||
checked: PropTypes.bool,
|
||||
/**
|
||||
* Is the Radio disabled ?
|
||||
*/
|
||||
disabled: PropTypes.bool
|
||||
};
|
||||
|
||||
Radio.defaultProps = {
|
||||
checked: false,
|
||||
disabled: false
|
||||
};
|
||||
|
@ -2,6 +2,7 @@ import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import is, { isNot } from 'styled-is';
|
||||
import remcalc from 'remcalc';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Baseline from '../baseline';
|
||||
import BaseInput, { Stylable } from './base/input';
|
||||
@ -12,13 +13,10 @@ const chevron =
|
||||
const chevronDisabled =
|
||||
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpbGw9IiNEOEQ4RDgiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==';
|
||||
|
||||
const Select = Baseline(BaseInput(Stylable('select')));
|
||||
|
||||
const SelectWrapper = styled.div`
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
|
||||
|
||||
${isNot('fluid')`
|
||||
min-width: ${remcalc(200)};
|
||||
`};
|
||||
@ -42,7 +40,9 @@ const SelectWrapper = styled.div`
|
||||
`};
|
||||
`;
|
||||
|
||||
const StyledSelect = Select.extend`
|
||||
const select = Baseline(BaseInput(Stylable('select')));
|
||||
const StyledSelect = select.extend`
|
||||
position: relative;
|
||||
${is('disabled')`
|
||||
border-color: ${props => props.theme.grey};
|
||||
color: ${props => props.theme.grey};
|
||||
@ -52,10 +52,23 @@ const StyledSelect = Select.extend`
|
||||
/**
|
||||
* @example ./usage-select.md
|
||||
*/
|
||||
export default ({ children, fluid, ...rest }) => (
|
||||
const Select = ({ children, fluid, ...rest }) => (
|
||||
<SelectWrapper fluid={fluid}>
|
||||
<StyledSelect {...rest} fluid={fluid}>
|
||||
{children}
|
||||
</StyledSelect>
|
||||
</SelectWrapper>
|
||||
);
|
||||
|
||||
export default Select;
|
||||
|
||||
Select.propTypes = {
|
||||
/**
|
||||
* Is the Select disabled ?
|
||||
*/
|
||||
disabled: PropTypes.bool
|
||||
};
|
||||
|
||||
Select.defaultProps = {
|
||||
disabled: false
|
||||
};
|
||||
|
@ -154,6 +154,6 @@ const Toggle = ({ children, ...rest }) => (
|
||||
<BaseToggle {...rest}>{children}</BaseToggle>
|
||||
);
|
||||
|
||||
export default Baseline(Toggle);
|
||||
export default Toggle;
|
||||
|
||||
export const ToggleList = Baseline(Ul);
|
||||
|
@ -2,7 +2,7 @@
|
||||
const FormGroup = require('./group').default;
|
||||
const Label = require('./label').default;
|
||||
|
||||
<FormGroup>
|
||||
<FormGroup name="test">
|
||||
<Checkbox checked>
|
||||
<Label>Detailed explanations</Label>
|
||||
</Checkbox>
|
||||
|
@ -1,10 +1,10 @@
|
||||
```
|
||||
const Brand = require('./brand.js').default;
|
||||
const Item = require('./item.js').default;
|
||||
const HeaderBrand = require('./brand.js').default;
|
||||
const HeaderItem = require('./item.js').default;
|
||||
|
||||
<Header>
|
||||
<Brand>Triton</Brand>
|
||||
<Item>eu-east-1</Item>
|
||||
<Item>Nicola</Item>
|
||||
<HeaderBrand>Triton</HeaderBrand>
|
||||
<HeaderItem>eu-east-1</HeaderItem>
|
||||
<HeaderItem>Nicola</HeaderItem>
|
||||
</Header>
|
||||
```
|
||||
|
@ -59,10 +59,29 @@ export const Title = ({ children }) => <H4>{children}</H4>;
|
||||
export const Description = ({ children }) => <P>{children}</P>;
|
||||
|
||||
Message.propTypes = {
|
||||
/**
|
||||
* Function to call when the close button is clicked
|
||||
*/
|
||||
onCloseClick: PropTypes.func,
|
||||
/**
|
||||
* Is it an error message ?
|
||||
*/
|
||||
error: PropTypes.bool,
|
||||
/**
|
||||
* Is it an warning message ?
|
||||
*/
|
||||
warning: PropTypes.bool,
|
||||
/**
|
||||
* Is it an success message ?
|
||||
*/
|
||||
success: PropTypes.bool
|
||||
};
|
||||
|
||||
Message.defaultProps = {
|
||||
onCloseClick: () => {},
|
||||
error: false,
|
||||
warning: false,
|
||||
success: true
|
||||
};
|
||||
|
||||
export default Message;
|
||||
|
@ -1,9 +0,0 @@
|
||||
import { Col } from 'react-styled-flexboxgrid';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
export default styled(Col)`
|
||||
position: relative;
|
||||
border-left: ${remcalc(1)} solid #d8d8d8;
|
||||
padding-top: ${remcalc(20)};
|
||||
`;
|
@ -1,137 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Chart from 'chart.js';
|
||||
import moment from 'moment';
|
||||
|
||||
// colours to come from theme
|
||||
// AJ to supply friendly colours - these were nicked from chartjs utils
|
||||
const chartColors = [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(255, 159, 64)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(153, 102, 255)',
|
||||
'rgb(201, 203, 207)'
|
||||
];
|
||||
|
||||
// TODO DISPLAY TIMES SHOULD NOT BE UTC
|
||||
class MetricGraph extends Component {
|
||||
componentDidMount() {
|
||||
const { xMin, xMax, datasets } = this.processProps(this.props);
|
||||
const { displayX = false, displayY = false } = this.props;
|
||||
|
||||
const config = {
|
||||
type: 'line',
|
||||
data: { datasets },
|
||||
options: {
|
||||
responsive: true, // this needs to be played with
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
display: false // this config doesn't seem to work???
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
display: displayX, // config for mini should be false
|
||||
type: 'time',
|
||||
distribution: 'linear',
|
||||
time: {
|
||||
unit: 'minute', // this also needs to be played with
|
||||
min: xMin,
|
||||
max: xMax
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: displayY // needs min / max and measurement
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const ctx = this._refs.chart.getContext('2d');
|
||||
this._chart = new Chart(ctx, config);
|
||||
}
|
||||
|
||||
processProps(props) {
|
||||
const { metricsData, graphDurationSeconds } = props;
|
||||
|
||||
const xMax = metricsData[0].end;
|
||||
const xMin = moment
|
||||
.utc(xMax)
|
||||
.subtract(graphDurationSeconds, 'seconds')
|
||||
.utc()
|
||||
.format();
|
||||
|
||||
const datasets = metricsData.map((data, i) => ({
|
||||
fill: false,
|
||||
borderColor: chartColors[i],
|
||||
data: this.truncateAndConvertMetrics(data.metrics, xMin, xMax)
|
||||
}));
|
||||
|
||||
return {
|
||||
xMax,
|
||||
xMin,
|
||||
datasets
|
||||
};
|
||||
}
|
||||
|
||||
truncateAndConvertMetrics(metrics, xMin, xMax) {
|
||||
const xMinMoment = moment.utc(xMin);
|
||||
|
||||
return metrics.reduce((metrics, metric) => {
|
||||
const diff = moment.utc(metric.time).diff(xMinMoment);
|
||||
if (diff > -10000) {
|
||||
// diff comparison is less than zero - otherwise no data for beginning of chart - bug or charjs weirdness?
|
||||
metrics.push({
|
||||
x: metric.time,
|
||||
y: metric.value // value should be converted here to a readable format
|
||||
});
|
||||
}
|
||||
return metrics;
|
||||
}, []);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const { xMin, xMax, datasets } = this.processProps(nextProps);
|
||||
|
||||
this._chart.data.datasets = datasets;
|
||||
// these need to be set, but don't seem to truncate the data that's displayed
|
||||
this._chart.options.scales.xAxes[0].time.max = xMax;
|
||||
this._chart.options.scales.xAxes[0].time.min = xMin;
|
||||
this._chart.update(0);
|
||||
}
|
||||
|
||||
// should not rerender ever, we update only the canvas via chartjs
|
||||
shouldComponentUpdate() {
|
||||
return false;
|
||||
}
|
||||
|
||||
ref(name) {
|
||||
this._refs = this._refs || {};
|
||||
|
||||
return el => {
|
||||
this._refs[name] = el;
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { width, height } = this.props;
|
||||
|
||||
return <canvas ref={this.ref('chart')} width={width} height={height} />;
|
||||
}
|
||||
}
|
||||
|
||||
MetricGraph.propTypes = {
|
||||
metricsData: PropTypes.object.isRequired,
|
||||
width: PropTypes.number.isRequired,
|
||||
height: PropTypes.number.isRequired,
|
||||
graphDurationSeconds: PropTypes.number.isRequired // 'width' of graph, i.e. total duration of time it'll display and truncate data to
|
||||
};
|
||||
|
||||
export default MetricGraph;
|
@ -1,3 +0,0 @@
|
||||
export { default as MetricGraph } from './graph';
|
||||
export { default as GraphContainer } from './container';
|
||||
export { default as GraphTitle } from './title';
|
@ -1,16 +0,0 @@
|
||||
import remcalc from 'remcalc';
|
||||
import Small from '../text/small';
|
||||
|
||||
export default Small.extend`
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: ${remcalc(20)};
|
||||
border-bottom: ${remcalc(1)} solid #d8d8d8;
|
||||
|
||||
font-size: ${remcalc(13)};
|
||||
text-align: center;
|
||||
color: #494949;
|
||||
`;
|
@ -17,6 +17,7 @@ const StyledButton = styled(Button)`
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
cursor: default;
|
||||
|
||||
&:focus {
|
||||
|
@ -14,10 +14,6 @@ module.exports = {
|
||||
'rsg-components/Wrapper': path.join(__dirname, 'src/styleguide/wrapper')
|
||||
})
|
||||
}),
|
||||
plugins:[
|
||||
new UglifyJSPlugin(),
|
||||
new LodashModuleReplacementPlugin()
|
||||
],
|
||||
module: Object.assign(webpackConfig.module, {
|
||||
rules: [
|
||||
{
|
||||
|
359
yarn.lock
359
yarn.lock
@ -1624,6 +1624,10 @@ babel-plugin-transform-react-jsx@6.24.1, babel-plugin-transform-react-jsx@^6.24.
|
||||
babel-plugin-syntax-jsx "^6.8.0"
|
||||
babel-runtime "^6.22.0"
|
||||
|
||||
babel-plugin-transform-react-remove-prop-types@^0.4.10:
|
||||
version "0.4.10"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.10.tgz#3c7f3a03ad8aa6bb8c00e93fd13a433910444545"
|
||||
|
||||
babel-plugin-transform-regenerator@6.24.1:
|
||||
version "6.24.1"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.24.1.tgz#b8da305ad43c3c99b4848e4fe4037b770d23c418"
|
||||
@ -1766,7 +1770,7 @@ babel-preset-jest@^21.2.0:
|
||||
babel-plugin-jest-hoist "^21.2.0"
|
||||
babel-plugin-syntax-object-rest-spread "^6.13.0"
|
||||
|
||||
babel-preset-joyent-portal@^3.3.3:
|
||||
babel-preset-joyent-portal@^3.1.0, babel-preset-joyent-portal@^3.3.3:
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/babel-preset-joyent-portal/-/babel-preset-joyent-portal-3.3.3.tgz#4f2f55499fff42822d0d1ad4c77ab4884a5039f6"
|
||||
dependencies:
|
||||
@ -2833,14 +2837,14 @@ command-join@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/command-join/-/command-join-2.0.0.tgz#52e8b984f4872d952ff1bdc8b98397d27c7144cf"
|
||||
|
||||
commander@2, commander@2.11.x, commander@^2.11.0, commander@^2.9.0, commander@~2.11.0:
|
||||
version "2.11.0"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
|
||||
|
||||
commander@2.1.x, commander@~2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.1.0.tgz#d121bbae860d9992a3d517ba96f56588e47c6781"
|
||||
|
||||
commander@2.11.x, commander@^2.11.0, commander@^2.9.0, commander@~2.11.0:
|
||||
version "2.11.0"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
|
||||
|
||||
commitizen@^2.9.6:
|
||||
version "2.9.6"
|
||||
resolved "https://registry.yarnpkg.com/commitizen/-/commitizen-2.9.6.tgz#c0d00535ef264da7f63737edfda4228983fa2291"
|
||||
@ -3410,6 +3414,10 @@ css-to-react-native@^2.0.3:
|
||||
fbjs "^0.8.5"
|
||||
postcss-value-parser "^3.3.0"
|
||||
|
||||
css-unit-converter@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
|
||||
|
||||
css-what@2.1:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
|
||||
@ -3514,6 +3522,222 @@ cz-conventional-changelog@1.2.0:
|
||||
right-pad "^1.0.1"
|
||||
word-wrap "^1.0.3"
|
||||
|
||||
d3-array@1, d3-array@1.2.1, d3-array@^1.2.0:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.1.tgz#d1ca33de2f6ac31efadb8e050a021d7e2396d5dc"
|
||||
|
||||
d3-axis@1.0.8:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-1.0.8.tgz#31a705a0b535e65759de14173a31933137f18efa"
|
||||
|
||||
d3-brush@1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-1.0.4.tgz#00c2f238019f24f6c0a194a26d41a1530ffe7bc4"
|
||||
dependencies:
|
||||
d3-dispatch "1"
|
||||
d3-drag "1"
|
||||
d3-interpolate "1"
|
||||
d3-selection "1"
|
||||
d3-transition "1"
|
||||
|
||||
d3-chord@1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-1.0.4.tgz#7dec4f0ba886f713fe111c45f763414f6f74ca2c"
|
||||
dependencies:
|
||||
d3-array "1"
|
||||
d3-path "1"
|
||||
|
||||
d3-collection@1, d3-collection@1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.4.tgz#342dfd12837c90974f33f1cc0a785aea570dcdc2"
|
||||
|
||||
d3-color@1, d3-color@1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.0.3.tgz#bc7643fca8e53a8347e2fbdaffa236796b58509b"
|
||||
|
||||
d3-dispatch@1, d3-dispatch@1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.3.tgz#46e1491eaa9b58c358fce5be4e8bed626e7871f8"
|
||||
|
||||
d3-drag@1, d3-drag@1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.2.1.tgz#df8dd4c502fb490fc7462046a8ad98a5c479282d"
|
||||
dependencies:
|
||||
d3-dispatch "1"
|
||||
d3-selection "1"
|
||||
|
||||
d3-dsv@1, d3-dsv@1.0.7:
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-1.0.7.tgz#137076663f398428fc3d031ae65370522492b78f"
|
||||
dependencies:
|
||||
commander "2"
|
||||
iconv-lite "0.4"
|
||||
rw "1"
|
||||
|
||||
d3-ease@1, d3-ease@1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.3.tgz#68bfbc349338a380c44d8acc4fbc3304aa2d8c0e"
|
||||
|
||||
d3-force@1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.1.0.tgz#cebf3c694f1078fcc3d4daf8e567b2fbd70d4ea3"
|
||||
dependencies:
|
||||
d3-collection "1"
|
||||
d3-dispatch "1"
|
||||
d3-quadtree "1"
|
||||
d3-timer "1"
|
||||
|
||||
d3-format@1, d3-format@1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.2.0.tgz#6b480baa886885d4651dc248a8f4ac9da16db07a"
|
||||
|
||||
d3-geo@1.8.1:
|
||||
version "1.8.1"
|
||||
resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.8.1.tgz#50615c33454487e350db71059f84f71cda2dd983"
|
||||
dependencies:
|
||||
d3-array "1"
|
||||
|
||||
d3-hierarchy@1.1.5:
|
||||
version "1.1.5"
|
||||
resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.5.tgz#a1c845c42f84a206bcf1c01c01098ea4ddaa7a26"
|
||||
|
||||
d3-interpolate@1, d3-interpolate@1.1.5:
|
||||
version "1.1.5"
|
||||
resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.1.5.tgz#69e099ff39214716e563c9aec3ea9d1ea4b8a79f"
|
||||
dependencies:
|
||||
d3-color "1"
|
||||
|
||||
d3-path@1, d3-path@1.0.5:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.5.tgz#241eb1849bd9e9e8021c0d0a799f8a0e8e441764"
|
||||
|
||||
d3-polygon@1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-1.0.3.tgz#16888e9026460933f2b179652ad378224d382c62"
|
||||
|
||||
d3-quadtree@1, d3-quadtree@1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.3.tgz#ac7987e3e23fe805a990f28e1b50d38fcb822438"
|
||||
|
||||
d3-queue@3.0.7:
|
||||
version "3.0.7"
|
||||
resolved "https://registry.yarnpkg.com/d3-queue/-/d3-queue-3.0.7.tgz#c93a2e54b417c0959129d7d73f6cf7d4292e7618"
|
||||
|
||||
d3-random@1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-1.1.0.tgz#6642e506c6fa3a648595d2b2469788a8d12529d3"
|
||||
|
||||
d3-request@1.0.6:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/d3-request/-/d3-request-1.0.6.tgz#a1044a9ef4ec28c824171c9379fae6d79474b19f"
|
||||
dependencies:
|
||||
d3-collection "1"
|
||||
d3-dispatch "1"
|
||||
d3-dsv "1"
|
||||
xmlhttprequest "1"
|
||||
|
||||
d3-scale@1.0.6:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.6.tgz#bce19da80d3a0cf422c9543ae3322086220b34ed"
|
||||
dependencies:
|
||||
d3-array "^1.2.0"
|
||||
d3-collection "1"
|
||||
d3-color "1"
|
||||
d3-format "1"
|
||||
d3-interpolate "1"
|
||||
d3-time "1"
|
||||
d3-time-format "2"
|
||||
|
||||
d3-selection@1, d3-selection@1.1.0, d3-selection@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.1.0.tgz#1998684896488f839ca0372123da34f1d318809c"
|
||||
|
||||
d3-shape@1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.2.0.tgz#45d01538f064bafd05ea3d6d2cb748fd8c41f777"
|
||||
dependencies:
|
||||
d3-path "1"
|
||||
|
||||
d3-time-format@2:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.1.0.tgz#a1d9540a1dc498817d44066b121b19a4a83e3531"
|
||||
dependencies:
|
||||
d3-time "1"
|
||||
|
||||
d3-time-format@2.0.5:
|
||||
version "2.0.5"
|
||||
resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.0.5.tgz#9d7780204f7c9119c9170b1a56db4de9a8af972e"
|
||||
dependencies:
|
||||
d3-time "1"
|
||||
|
||||
d3-time@1, d3-time@1.0.7:
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.7.tgz#94caf6edbb7879bb809d0d1f7572bc48482f7270"
|
||||
|
||||
d3-timer@1, d3-timer@1.0.7:
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.7.tgz#df9650ca587f6c96607ff4e60cc38229e8dd8531"
|
||||
|
||||
d3-transition@1, d3-transition@1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.1.0.tgz#cfc85c74e5239324290546623572990560c3966f"
|
||||
dependencies:
|
||||
d3-color "1"
|
||||
d3-dispatch "1"
|
||||
d3-ease "1"
|
||||
d3-interpolate "1"
|
||||
d3-selection "^1.1.0"
|
||||
d3-timer "1"
|
||||
|
||||
d3-voronoi@1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.2.tgz#1687667e8f13a2d158c80c1480c5a29cb0d8973c"
|
||||
|
||||
d3-zoom@1.6.0:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-1.6.0.tgz#eb645b07fd0c37acc8b36b88476b781ed277b40e"
|
||||
dependencies:
|
||||
d3-dispatch "1"
|
||||
d3-drag "1"
|
||||
d3-interpolate "1"
|
||||
d3-selection "1"
|
||||
d3-transition "1"
|
||||
|
||||
d3@^4.11.0:
|
||||
version "4.11.0"
|
||||
resolved "https://registry.yarnpkg.com/d3/-/d3-4.11.0.tgz#15ce99ec33e6941718cfd8fb826071b4fb7c48cb"
|
||||
dependencies:
|
||||
d3-array "1.2.1"
|
||||
d3-axis "1.0.8"
|
||||
d3-brush "1.0.4"
|
||||
d3-chord "1.0.4"
|
||||
d3-collection "1.0.4"
|
||||
d3-color "1.0.3"
|
||||
d3-dispatch "1.0.3"
|
||||
d3-drag "1.2.1"
|
||||
d3-dsv "1.0.7"
|
||||
d3-ease "1.0.3"
|
||||
d3-force "1.1.0"
|
||||
d3-format "1.2.0"
|
||||
d3-geo "1.8.1"
|
||||
d3-hierarchy "1.1.5"
|
||||
d3-interpolate "1.1.5"
|
||||
d3-path "1.0.5"
|
||||
d3-polygon "1.0.3"
|
||||
d3-quadtree "1.0.3"
|
||||
d3-queue "3.0.7"
|
||||
d3-random "1.1.0"
|
||||
d3-request "1.0.6"
|
||||
d3-scale "1.0.6"
|
||||
d3-selection "1.1.0"
|
||||
d3-shape "1.2.0"
|
||||
d3-time "1.0.7"
|
||||
d3-time-format "2.0.5"
|
||||
d3-timer "1.0.7"
|
||||
d3-transition "1.1.0"
|
||||
d3-voronoi "1.1.2"
|
||||
d3-zoom "1.6.0"
|
||||
|
||||
d@1:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
|
||||
@ -3554,6 +3778,10 @@ dashdash@1.10.1:
|
||||
dependencies:
|
||||
assert-plus "^1.0.0"
|
||||
|
||||
date-fns@^1.29.0:
|
||||
version "1.29.0"
|
||||
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
|
||||
|
||||
date-now@^0.1.4:
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
|
||||
@ -5060,6 +5288,10 @@ fs.realpath@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
|
||||
|
||||
fs@^0.0.1-security:
|
||||
version "0.0.1-security"
|
||||
resolved "https://registry.yarnpkg.com/fs/-/fs-0.0.1-security.tgz#8a7bd37186b6dddf3813f23858b57ecaaf5e41d4"
|
||||
|
||||
fsevents@1.1.2, fsevents@^1.0.0, fsevents@^1.1.1:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
|
||||
@ -6025,14 +6257,14 @@ hyphenate-style-name@^1.0.0:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
|
||||
|
||||
iconv-lite@0.4, iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@^0.4.8, iconv-lite@~0.4.13:
|
||||
version "0.4.19"
|
||||
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
|
||||
|
||||
iconv-lite@0.4.13:
|
||||
version "0.4.13"
|
||||
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
|
||||
|
||||
iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@^0.4.8, iconv-lite@~0.4.13:
|
||||
version "0.4.19"
|
||||
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
|
||||
|
||||
icss-replace-symbols@1.1.0, icss-replace-symbols@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
|
||||
@ -7262,6 +7494,50 @@ joyent-react-scripts@^2.2.1, joyent-react-scripts@^2.3.0:
|
||||
mz "^2.7.0"
|
||||
react-scripts "^1.0.14"
|
||||
|
||||
joyent-ui-toolkit@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/joyent-ui-toolkit/-/joyent-ui-toolkit-2.1.0.tgz#9ab87c95054c5b8dfcd95eb79703d8c7da784744"
|
||||
dependencies:
|
||||
babel-cli "^6.26.0"
|
||||
babel-generator "^6.26.0"
|
||||
babel-helpers "^6.24.1"
|
||||
babel-loader "^7.1.2"
|
||||
babel-plugin-inline-react-svg "^0.4.0"
|
||||
babel-plugin-styled-components "^1.2.1"
|
||||
babel-preset-joyent-portal "^3.1.0"
|
||||
babel-template "^6.26.0"
|
||||
camel-case "^3.0.0"
|
||||
cross-env "^5.0.5"
|
||||
d3 "^4.11.0"
|
||||
disable-scroll "^0.3.0"
|
||||
file-loader "^1.1.5"
|
||||
fontfaceobserver "^2.0.13"
|
||||
joy-react-broadcast "^0.6.9"
|
||||
joyent-manifest-editor "^1.4.0"
|
||||
lodash.difference "^4.5.0"
|
||||
lodash.differenceby "^4.8.0"
|
||||
lodash.isequal "^4.5.0"
|
||||
lodash.isequalwith "^4.4.0"
|
||||
lodash.isstring "^4.0.1"
|
||||
moment "^2.19.0"
|
||||
normalized-styled-components "^1.0.17"
|
||||
pascal-case "^2.0.1"
|
||||
polished "^1.8.0"
|
||||
prop-types "^15.6.0"
|
||||
react-bundle "^1.0.4"
|
||||
react-input-range "^1.2.1"
|
||||
react-responsive "^2.0.0"
|
||||
react-styled-flexboxgrid "^2.0.3"
|
||||
redrun "^5.9.18"
|
||||
reduce-css-calc "^2.1.0"
|
||||
remcalc "^1.0.9"
|
||||
rnd-id "^1.1.1"
|
||||
styled-components "^2.2.1"
|
||||
styled-is "^1.1.0"
|
||||
svg-inline-loader "^0.8.0"
|
||||
unitcalc "^1.1.1"
|
||||
url-loader "^0.6.2"
|
||||
|
||||
jpeg-js@0.1.2, jpeg-js@^0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.1.2.tgz#135b992c0575c985cfa0f494a3227ed238583ece"
|
||||
@ -7752,6 +8028,10 @@ lodash.difference@^4.4.0, lodash.difference@^4.5.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.difference/-/lodash.difference-4.5.0.tgz#9ccb4e505d486b91651345772885a2df27fd017c"
|
||||
|
||||
lodash.differenceby@^4.8.0:
|
||||
version "4.8.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.differenceby/-/lodash.differenceby-4.8.0.tgz#cfd59e94353af5de51da5d302ca4ebff33faac57"
|
||||
|
||||
lodash.find@^4.6.0:
|
||||
version "4.6.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.find/-/lodash.find-4.6.0.tgz#cb0704d47ab71789ffa0de8b97dd926fb88b13b1"
|
||||
@ -7788,6 +8068,10 @@ lodash.isequal@^4.5.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
|
||||
|
||||
lodash.isequalwith@^4.4.0:
|
||||
version "4.4.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz#266726ddd528f854f21f4ea98a065606e0fbc6b0"
|
||||
|
||||
lodash.isfinite@^3.3.2:
|
||||
version "3.3.2"
|
||||
resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz#fb89b65a9a80281833f0b7478b3a5104f898ebb3"
|
||||
@ -8100,6 +8384,36 @@ methods@~1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
|
||||
|
||||
metrics-yall@0.1.3:
|
||||
version "0.1.3"
|
||||
resolved "https://registry.yarnpkg.com/metrics-yall/-/metrics-yall-0.1.3.tgz#7b46b2e06b58fe97e00b4697967f4ce77d811134"
|
||||
dependencies:
|
||||
babel-plugin-transform-react-remove-prop-types "^0.4.10"
|
||||
chart.js "^2.7.0"
|
||||
d3 "^4.11.0"
|
||||
date-fns "^1.29.0"
|
||||
force-array "^3.1.0"
|
||||
fs "^0.0.1-security"
|
||||
joyent-ui-toolkit "^2.1.0"
|
||||
lodash.difference "^4.5.0"
|
||||
lodash.differenceby "^4.8.0"
|
||||
normalized-styled-components "^1.0.17"
|
||||
polished "^1.8.1"
|
||||
prop-types "^15.5.10"
|
||||
react "^16.0.0"
|
||||
react-dom "^16.0.0"
|
||||
react-redux "^5.0.6"
|
||||
react-router-dom "^4.2.2"
|
||||
react-scripts "^1.0.14"
|
||||
react-styled-flexboxgrid "^2.1.0"
|
||||
reduce-css-calc "^2.1.1"
|
||||
redux "^3.7.2"
|
||||
redux-form "^7.1.1"
|
||||
remcalc "^1.0.9"
|
||||
styled-components "^2.2.1"
|
||||
styled-is "^1.1.0"
|
||||
uglifyjs-webpack-plugin "^1.0.0-beta.3"
|
||||
|
||||
micro-compress@1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/micro-compress/-/micro-compress-1.0.0.tgz#53f5a80b4ad0320ca165a559b6e3df145d4f704f"
|
||||
@ -9101,6 +9415,10 @@ podium@^1.3.0:
|
||||
items "2.x.x"
|
||||
joi "10.x.x"
|
||||
|
||||
polished@^1.8.0, polished@^1.8.1:
|
||||
version "1.8.1"
|
||||
resolved "https://registry.yarnpkg.com/polished/-/polished-1.8.1.tgz#e50b9f789d37d98da64912f1be2bf759d8bfae6c"
|
||||
|
||||
portfinder@^1.0.13, portfinder@^1.0.9:
|
||||
version "1.0.13"
|
||||
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
|
||||
@ -9995,6 +10313,14 @@ react-redux@^5.0.5, react-redux@^5.0.6:
|
||||
loose-envify "^1.1.0"
|
||||
prop-types "^15.5.10"
|
||||
|
||||
react-responsive@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-2.0.0.tgz#4019fd493b6619c12cf0b06911ed543c2d94e504"
|
||||
dependencies:
|
||||
hyphenate-style-name "^1.0.0"
|
||||
matchmediaquery "^0.2.1"
|
||||
prop-types "^15.5.7"
|
||||
|
||||
react-responsive@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-3.0.0.tgz#26e895dbdf748d4473c76cf46d29cb9d824e02ec"
|
||||
@ -10395,6 +10721,13 @@ reduce-css-calc@^1.2.6:
|
||||
math-expression-evaluator "^1.2.14"
|
||||
reduce-function-call "^1.0.1"
|
||||
|
||||
reduce-css-calc@^2.1.0, reduce-css-calc@^2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.1.tgz#f4ecd7a00ec3e5683773f208067ad7da117b9db0"
|
||||
dependencies:
|
||||
css-unit-converter "^1.1.1"
|
||||
postcss-value-parser "^3.3.0"
|
||||
|
||||
reduce-function-call@^1.0.1:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.2.tgz#5a200bf92e0e37751752fe45b0ab330fd4b6be99"
|
||||
@ -11007,6 +11340,10 @@ run-queue@^1.0.0, run-queue@^1.0.3:
|
||||
dependencies:
|
||||
aproba "^1.1.1"
|
||||
|
||||
rw@1:
|
||||
version "1.3.3"
|
||||
resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
|
||||
|
||||
rx-lite-aggregates@^4.0.8:
|
||||
version "4.0.8"
|
||||
resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
|
||||
@ -13344,6 +13681,10 @@ xml@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/xml/-/xml-1.0.1.tgz#78ba72020029c5bc87b8a81a3cfcd74b4a2fc1e5"
|
||||
|
||||
xmlhttprequest@1:
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc"
|
||||
|
||||
xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
|
||||
version "4.0.1"
|
||||
resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
|
||||
|
Loading…
Reference in New Issue
Block a user