<commit_before>// @flow

// Vendor
import React, { PropTypes } from 'react';
import { compose, withState } from 'recompose';
import withSize from 'react-sizeme';

// Custom
import PieChart from '@ncigdc/components/Charts/PieChart';
import { Row, Column } from '@ncigdc/uikit/Flex';
import Card from '@ncigdc/uikit/Card';
import styled from '@ncigdc/theme/styled';
import { center } from '@ncigdc/theme/mixins';
import EntityPageHorizontalTable from './EntityPageHorizontalTable';

/*----------------------------------------------------------------------------*/

const Header = styled(Row, {
  padding: '1rem',
  color: ({ theme }) => theme.greyScale7 || 'silver',
});

const Footer = styled(Row, {
  padding: '1rem',
  ...center,
});

const SummaryCard = compose(
  withState('showTable', 'setShowTable', true),
  withSize({ monitorHeight: true })
)(({
  data,
  title,
  pieChartTitle,
  tableTitle,
  style = {},
  footer,
  path,
  showTable,
  setShowTable,
  headings,
  size,
}) => (
  <Card style={style}>
    <Column>
      <Header>
        <span style={{ flexGrow: 1, fontSize: '1.7rem' }}>
          {(showTable ? tableTitle : pieChartTitle) || title}
        </span>
        <span onClick={() => setShowTable(!showTable)}>
          <i
            style={{ color: '#000' }}
            className={`fa ${showTable ? 'fa-pie-chart' : 'fa-table'}`}
          />
        </span>
      </Header>

      { showTable &&
        <EntityPageHorizontalTable
          headings={headings}
          data={data}
          style={{ overflow: 'hidden', borderLeft: 0, borderTop: 0 }}
        />
      }
      {!showTable &&
        [
          <PieChart key="chart" data={data} path={path} height={Math.min(size.width, size.height - 100)} width={Math.min(size.width, size.height - 100)} />,
          footer && <Footer key={footer}>{footer}</Footer>,
        ]
      }
    </Column>
  </Card>
));

SummaryCard.propTypes = {
  style: PropTypes.object,
  title: PropTypes.string,
  data: PropTypes.array,
  footer: PropTypes.node,
  path: PropTypes.string,
  table: PropTypes.object,
};

/*----------------------------------------------------------------------------*/

export default SummaryCard;<commit_msg>🐛 prevent pie chart from repeatedly shrinking (#1455)<commit_after>// @flow

// Vendor
import React, { PropTypes } from 'react';
import { compose, withState, withPropsOnChange } from 'recompose';
import withSize from 'react-sizeme';

// Custom
import PieChart from '@ncigdc/components/Charts/PieChart';
import { Row, Column } from '@ncigdc/uikit/Flex';
import Card from '@ncigdc/uikit/Card';
import styled from '@ncigdc/theme/styled';
import { center } from '@ncigdc/theme/mixins';
import EntityPageHorizontalTable from './EntityPageHorizontalTable';

/*----------------------------------------------------------------------------*/

const Header = styled(Row, {
  padding: '1rem',
  color: ({ theme }) => theme.greyScale7 || 'silver',
});

const Footer = styled(Row, {
  padding: '1rem',
  ...center,
});

const SummaryCard = compose(
  withState('showTable', 'setShowTable', true),
  withSize({ monitorHeight: true }),
  withPropsOnChange(['size'], ({ size }) => ({
    pieDiameter: Math.max(Math.min(size.width, size.height - 100), 120),
  }))
)(({
  data,
  title,
  pieChartTitle,
  tableTitle,
  style = {},
  footer,
  path,
  showTable,
  setShowTable,
  headings,
  pieDiameter,
}) => (
  <Card style={style}>
    <Column>
      <Header>
        <span style={{ flexGrow: 1, fontSize: '1.7rem' }}>
          {(showTable ? tableTitle : pieChartTitle) || title}
        </span>
        <span onClick={() => setShowTable(!showTable)}>
          <i
            style={{ color: '#000' }}
            className={`fa ${showTable ? 'fa-pie-chart' : 'fa-table'}`}
          />
        </span>
      </Header>

      { showTable &&
        <EntityPageHorizontalTable
          headings={headings}
          data={data}
          style={{ overflow: 'hidden', borderLeft: 0, borderTop: 0 }}
        />
      }
      {!showTable &&
        [
          <PieChart key="chart" data={data} path={path} height={pieDiameter} width={pieDiameter} />,
          footer && <Footer key={footer}>{footer}</Footer>,
        ]
      }
    </Column>
  </Card>
));

SummaryCard.propTypes = {
  style: PropTypes.object,
  title: PropTypes.string,
  data: PropTypes.array,
  footer: PropTypes.node,
  path: PropTypes.string,
  table: PropTypes.object,
};

/*----------------------------------------------------------------------------*/

export default SummaryCard;
{'fraction_non_alphanumeric': 0.22300417857928304, 'fraction_numerical': 0.008357158566087531, 'mean_word_length': 2.2742980561555077, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 40, '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': '4551058', 'n_tokens_mistral': 1421, 'n_tokens_neox': 1389, 'n_words': 308}