All files / posts-table/components/PostsTable/components/MetricGraph index.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
 
 
 
 
 
 
 
1x
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
 
import { TruncatedNumber, Helper } from '@bufferapp/analyze-shared-components';
 
import Text from '@bufferapp/components/Text';
 
const Container = styled.div`
  flex: 1;
  padding: 0 0.5rem 0 0;
`;
 
const MetricGraph = ({ metric }) => {
  const { value, key, label } = metric;
 
  return (
    <Container key={key}>
      <div style={{ marginBottom: 5 }}>
        <Helper label={label}>
          <Text size="mini">{label}</Text>
        </Helper>
      </div>
      <div>
        <Text size="mediun" weight="bold" color="outerSpace">
          <TruncatedNumber showPercentSign={key === 'engagement_rate'}>
            {value}
          </TruncatedNumber>
        </Text>
      </div>
    </Container>
  );
};
 
MetricGraph.propTypes = {
  metric: PropTypes.shape({
    maxValue: PropTypes.number,
    value: PropTypes.number,
    color: PropTypes.String,
    key: PropTypes.String,
    label: PropTypes.String,
  }).isRequired,
};
 
export default MetricGraph;