import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import MetricGraph from '../../MetricGraph';
import { geyser } from '@bufferapp/components/style/color';
const Container = styled.div`
width: 100%;
padding: 1rem 1rem 0 0;
box-sizing: border-box;
border-top: 1px dotted ${geyser};
display: flex;
flex-direction: row;
`;
const Metrics = ({ metrics }) => {
if (metrics.length === 0) {
return null;
}
return (
<Container>
{metrics.map(metric => <MetricGraph key={metric.key} metric={metric} />)}
</Container>
);
};
Metrics.propTypes = {
metrics: PropTypes.arrayOf(PropTypes.object).isRequired,
};
export default Metrics;
|