All files / answers-chart/components/Chart Tooltip.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
 
 
 
 
 
 
1x
 
 
1x
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import styled from 'styled-components';
import reactDOM from 'react-dom/server';
import Text from '@bufferapp/components/Text';
import Answers from '../../Answers/index';
 
const Tooltip = styled.section`
  padding: 1rem 1rem;
`;
const Spacer = styled.span`
  display: block;
  height: .625rem;
`;
 
const ChartTooltip = ({ value, children }) => (
  <Tooltip>
    <Text size="small" color="white" weight="bold">{children}</Text>
    <Spacer />
    <Text size="small" color="white"><Text size="small" color="white" weight="bold">{Math.round(value * 100) / 100}%</Text> engagement rate</Text>
  </Tooltip>
);
 
export default function tooltipFormatter() {
  const point = this.points[0];
  const answer = Answers.forType(point.series.userOptions.metricType);
 
  return reactDOM.renderToStaticMarkup(
    <ChartTooltip value={point.y}>
      {answer.getTitle(point.key)}
    </ChartTooltip>,
  );
}