All files / answers-chart/components/AnswersChart 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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
1x
 
 
 
 
 
1x
 
 
 
 
 
 
1x
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
1x
1x
1x
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
1x
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import {
  ChartStateLoading as Loading,
  ChartStateNoData as NoData,
  ChartCard,
  ChartHeader,
} from '@bufferapp/analyze-shared-components';
import AddReport from '@bufferapp/add-report';
import { Text } from '@bufferapp/components';
import Title from '../Title';
import Chart from '../Chart';
import Answers from '../../Answers';
 
const GridContainer = styled.div`
  position: relative;
  padding: 0.75rem 1.5rem 1rem;
`;
 
const Section = styled.section`
  display: flex;
  min-height: 14.5rem;
  align-items: center;
`;
 
const TopResult = styled.section`
  display: flex;
  flex-direction: column;
  min-width: 19rem;
  margin-right: 2rem;
`;
 
const Best = styled.span`
  font-size: 2.5rem;
  font-family: Roboto, sans-serif;
  font-weight: bold;
  color: black;
`;
 
export const Content = ({ metricType, ...props }) => {
  const best = props[metricType].best;
  const answer = Answers.forType(metricType);
 
  return (
    <Section>
      <TopResult>
        <Best>{answer.getTitle(best)}</Best>
        <Text weight="medium" color="black">{answer.getDescription()}</Text>
      </TopResult>
      <Chart answers={props} metricType={metricType} />
    </Section>
  );
};
 
const AnswersChart = ({
  loading,
  ...props
}) => {
  let content = null;
  Eif (loading) {
    content = <Loading active noBorder />;
  } else if (props.answers[props.metricType].best === null) {
    content = <NoData />;
  } else {
    content = <Content metricType={props.metricType} {...props.answers} />;
  }
 
  return (
    <ChartCard>
      <ChartHeader>
        <Title metricType={props.metricType} />
        <AddReport chart="answers-chart" state={{ metricType: props.metricType }} />
      </ChartHeader>
      <GridContainer id={`js-dom-to-png-answers-chart-${props.metricType}`}>
        {content}
      </GridContainer>
    </ChartCard>
  );
};
 
AnswersChart.defaultProps = {
  loading: false,
};
 
AnswersChart.propTypes = {
  loading: PropTypes.bool,
};
 
export default AnswersChart;