<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { withFauxDOM } from 'react-faux-dom';
import * as d3 from 'd3';
import styled, { css } from 'styled-components';
import { ActionButton } from 'office-ui-fabric-react/lib/Button';

import { REPORT } from 'containers/Spa/constants';
import theme from 'utils/theme';


export const Wrapper = styled.div`
  flex: 1 0 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin: 5px;
  background: ${theme.white};
  box-shadow: 0 0 3px ${theme.neutralLight};
`;


export const Chart = styled.div`
  path {
    stroke: ${theme.themeDarker};
    stroke-width: 1px;
  }

  path:hover {
    fill-opacity: 0.15;
    cursor: pointer;
  }
`;


export const Legend = styled.div`
  margin: 5px;
`;


export const Item = styled(ActionButton) `
  display:flex;
  padding: 5px;
  ${(props) => props.checked && css`
    box-shadow: 0 0 3px ${theme.secondary};
  `}
`;


export const Color = styled.div`
  display: inline-block;
  margin-right: 5px;
  width: 15px;
  height: 15px;
  background: ${(props) => props.color};
  border: 1px solid ${theme.themeDarker};
`;<commit_msg>report legend item color<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { withFauxDOM } from 'react-faux-dom';
import * as d3 from 'd3';
import styled, { css } from 'styled-components';
import { ActionButton } from 'office-ui-fabric-react/lib/Button';

import { REPORT } from 'containers/Spa/constants';
import theme from 'utils/theme';


export const Wrapper = styled.div`
  flex: 1 0 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin: 5px;
  background: ${theme.white};
  box-shadow: 0 0 3px ${theme.neutralLight};
`;


export const Chart = styled.div`
  path {
    stroke: ${theme.themeDarker};
    stroke-width: 1px;
  }

  path:hover {
    fill-opacity: 0.15;
    cursor: pointer;
  }
`;


export const Legend = styled.div`
  margin: 5px;
`;


export const Item = styled(ActionButton) `
  display:flex;
  padding: 5px;
  ${(props) => props.checked && css`
    box-shadow: 0 0 5px ${theme.themeDarker};
  `}
`;


export const Color = styled.div`
  display: inline-block;
  margin-right: 5px;
  width: 15px;
  height: 15px;
  background: ${(props) => props.color};
  border: 1px solid ${theme.themeDarker};
`;
{'fraction_non_alphanumeric': 0.14490380679492426, 'fraction_numerical': 0.01882930822758903, 'mean_word_length': 3.718146718146718, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, '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': '6703115', 'n_tokens_mistral': 904, 'n_tokens_neox': 850, 'n_words': 235}