<commit_before>import React from 'react'
import PropTypes from 'prop-types'
import {
  BLUE,
  YELLOW,
  GREEN,
  TURQUOISE,
  GRASS_GREEN,
  GREY_2,
} from 'govuk-colours'
import { FONT_WEIGHTS } from '@govuk-react/constants'
import { ResponsivePie } from '@nivo/pie'

const segmentColours = [BLUE, TURQUOISE, GREEN, YELLOW, GRASS_GREEN]

const CentredMetric = ({ dataWithArc, centerX, centerY }) => {
  const total = dataWithArc.reduce(
    (accumulator, datum) => accumulator + datum.value,
    0
  )

  const customY1 = centerY - 20
  const customY2 = centerY + 20
  return (
    <>
      <text
        x={centerX}
        y={customY1}
        textAnchor="middle"
        dominantBaseline="central"
        style={{
          fontSize: '80px',
          fontWeight: FONT_WEIGHTS.bold,
        }}
      >
        {total}
      </text>
      <text
        x={centerX}
        y={customY2}
        textAnchor="middle"
        dominantBaseline="central"
        style={{
          fontSize: '20px',
          fontWeight: FONT_WEIGHTS.bold,
        }}
      >
        Projects
      </text>
    </>
  )
}

const PieChart = ({ data, height }) => (
  <div style={{ height }}>
    <ResponsivePie
      theme={{
        fontSize: '16px',
      }}
      data={data}
      colors={segmentColours}
      margin={{ top: 30, right: 0, bottom: 150, left: 0 }}
      startAngle={-90}
      innerRadius={0.75}
      borderWidth={1}
      borderColor="transparent"
      radialLabelsSkipAngle={10}
      radialLabel={(d) => d.value}
      radialLabelsLinkColor={GREY_2}
      radialLabelsTextColor={GREY_2}
      radialLabelsLinkStrokeWidth={3}
      enableSliceLabels={false}
      layers={['slices', 'radialLabels', CentredMetric, 'legends']}
      legends={[
        {
          anchor: 'bottom-left',
          direction: 'column',
          translateY: 150,
          itemWidth: 100,
          itemHeight: 18,
          itemTextColor: '#999',
          itemsSpacing: 5,
          symbolSize: 18,
          symbolShape: 'square',
        },
      ]}
    />
  </div>
)

PieChart.propTypes = {
  data: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      label: PropTypes.string.isRequired,
      value: PropTypes.number.isRequired,
      link: PropTypes.string,
    })
  ).isRequired,
}

export default PieChart
<commit_msg>Style the PieChart inline with the design<commit_after>import React from 'react'
import PropTypes from 'prop-types'
import {
  BLUE,
  YELLOW,
  GREEN,
  TURQUOISE,
  GRASS_GREEN,
  GREY_2,
} from 'govuk-colours'
import { FONT_WEIGHTS, SPACING } from '@govuk-react/constants'
import { ResponsivePie } from '@nivo/pie'
import styled from 'styled-components'

const segmentColours = [BLUE, TURQUOISE, GREEN, GRASS_GREEN, YELLOW]

const StyledPieContainer = styled('div')`
  padding-top: ${SPACING.SCALE_3};
  ${({ height }) => `height: ${height}px`}
`

const centredText = (text, fontSize, x, y) => (
  <text
    x={x}
    y={y}
    textAnchor="middle"
    dominantBaseline="central"
    style={{
      fontSize: `${fontSize}px`,
      fontWeight: FONT_WEIGHTS.bold,
    }}
  >
    {text}
  </text>
)

const CentredProjectTotal = ({ dataWithArc, centerX, centerY }) => {
  const total = dataWithArc.reduce(
    (accumulator, datum) => accumulator + datum.value,
    0
  )

  return (
    <>
      {centredText(total, 80, centerX, centerY - 20)}
      {centredText('Projects', 20, centerX, centerY + 30)}
    </>
  )
}

const PieChart = ({ data, height }) => (
  <StyledPieContainer height={height} data-test="pie-chart">
    <ResponsivePie
      theme={{
        fontSize: '16px',
      }}
      data={data}
      colors={segmentColours}
      margin={{ top: 20, bottom: 150 }}
      startAngle={-90}
      innerRadius={0.75}
      padAngle={0}
      enableArcLabels={false}
      arcLinkLabel="value"
      arcLinkLabelsSkipAngle={10}
      arcLinkLabelsOffset={3}
      arcLinkLabelsColor={GREY_2}
      arcLinkLabelsTextColor={GREY_2}
      arcLinkLabelsThickness={3}
      arcLinkLabelsDiagonalLength={9}
      arcLinkLabelsStraightLength={12}
      arcLinkLabelsTextOffset={2}
      isInteractive={false}
      layers={['arcs', 'arcLinkLabels', 'legends', CentredProjectTotal]}
      legends={[
        {
          anchor: 'bottom-left',
          direction: 'column',
          translateY: 150,
          itemWidth: 100,
          itemHeight: 18,
          itemTextColor: '#999',
          itemsSpacing: 8,
          symbolSize: 18,
          symbolShape: 'square',
        },
      ]}
    />
  </StyledPieContainer>
)

PieChart.propTypes = {
  data: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      label: PropTypes.string.isRequired,
      value: PropTypes.number.isRequired,
      link: PropTypes.string,
    })
  ).isRequired,
}

export default PieChart

{'fraction_non_alphanumeric': 0.13147574819401445, 'fraction_numerical': 0.019814241486068113, 'mean_word_length': 2.5115942028985505, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 28, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4639833', 'n_tokens_mistral': 1695, 'n_tokens_neox': 1626, 'n_words': 316}