<commit_before>import PropTypes from 'prop-types';
import React from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
import { Row, Col } from 'react-flexbox-grid/lib';
import DataCard from '../../common/DataCard';
import StorySentencePreview from '../../common/StorySentencePreview';
import OrderedWordCloud from '../../vis/OrderedWordCloud';

const localMessages = {
  attention: { id: 'explorer.results.attention.title', defaultMessage: 'Attention' },
  language: { id: 'explorer.results.language.title', defaultMessage: 'Language' },
  people: { id: 'explorer.results.people.title', defaultMessage: 'People & Places' },
  details: { id: 'explorer.attention.drillDown.details', defaultMessage: 'Details about {date}' },
  sampleStories: { id: 'explorer.attention.drillDown.sampleStories', defaultMessage: 'Sample Stories from {date}' },
  topWords: { id: 'explorer.attention.drillDown.topWords', defaultMessage: 'Top Words for {date}' },
};

const QueryAttentionOverTimeDrillDownDataCard = (props) => {
  const { stories, words, info } = props;
  const date = info ? info.start_date : '';
  const color = info ? info.color : '';
  const hexToRGBArray = clr => clr.match(/[A-Za-z0-9]{2}/g).map(v => parseInt(v, 16));
  const rgbColor = color ? hexToRGBArray(color) : '#000000';
  return (
    <DataCard>
      <Row>
        <Col lg={12}>
          <h2><FormattedMessage {...localMessages.details} values={{ date }} /></h2>
        </Col>
      </Row>
      <Row>
        <Col lg={6}>
          <h3 style={{ color }} ><FormattedMessage {...localMessages.sampleStories} values={{ date }} /></h3>
          <StorySentencePreview stories={stories !== null && stories !== undefined ? Object.values(stories.slice(0, 8)) : []} />
        </Col>
        <Col lg={6}>
          <h3 style={{ color }} ><FormattedMessage {...localMessages.topWords} values={{ date }} /></h3>
          <OrderedWordCloud words={words} textColor={`rgb(${rgbColor[0]}, ${rgbColor[1]}, ${rgbColor[2]})`} />
        </Col>
      </Row>
    </DataCard>
  );
};

QueryAttentionOverTimeDrillDownDataCard.propTypes = {
  // from parent
  stories: PropTypes.array,
  words: PropTypes.array,
  info: PropTypes.object,
  queries: PropTypes.array,
  // from compositional chain
  intl: PropTypes.object.isRequired,
};

export default
  injectIntl(
    QueryAttentionOverTimeDrillDownDataCard
  );<commit_msg>#1027 format Explorer Drilldown with date range<commit_after>import PropTypes from 'prop-types';
import React from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
import { Row, Col } from 'react-flexbox-grid/lib';
import DataCard from '../../common/DataCard';
import StorySentencePreview from '../../common/StorySentencePreview';
import OrderedWordCloud from '../../vis/OrderedWordCloud';

const localMessages = {
  attention: { id: 'explorer.results.attention.title', defaultMessage: 'Attention' },
  language: { id: 'explorer.results.language.title', defaultMessage: 'Language' },
  people: { id: 'explorer.results.people.title', defaultMessage: 'People & Places' },
  details: { id: 'explorer.attention.drillDown.details', defaultMessage: 'Details for {date1} to {date2}' },
  sampleStories: { id: 'explorer.attention.drillDown.sampleStories', defaultMessage: 'Sample Stories from {date}' },
  topWords: { id: 'explorer.attention.drillDown.topWords', defaultMessage: 'Top Words for {date}' },
};

const QueryAttentionOverTimeDrillDownDataCard = (props) => {
  const { stories, words, info } = props;
  const date1 = info ? info.start_date : '';
  const date2 = info ? info.end_date : '';
  const color = info ? info.color : '';
  const hexToRGBArray = clr => clr.match(/[A-Za-z0-9]{2}/g).map(v => parseInt(v, 16));
  const rgbColor = color ? hexToRGBArray(color) : '#000000';
  return (
    <DataCard>
      <Row>
        <Col lg={12}>
          <h2><FormattedMessage {...localMessages.details} values={{ date1, date2 }} /></h2>
        </Col>
      </Row>
      <Row>
        <Col lg={6}>
          <h3 style={{ color }} ><FormattedMessage {...localMessages.sampleStories} values={{ date1 }} /></h3>
          <StorySentencePreview stories={stories !== null && stories !== undefined ? Object.values(stories.slice(0, 8)) : []} />
        </Col>
        <Col lg={6}>
          <h3 style={{ color }} ><FormattedMessage {...localMessages.topWords} values={{ date1 }} /></h3>
          <OrderedWordCloud words={words} textColor={`rgb(${rgbColor[0]}, ${rgbColor[1]}, ${rgbColor[2]})`} />
        </Col>
      </Row>
    </DataCard>
  );
};

QueryAttentionOverTimeDrillDownDataCard.propTypes = {
  // from parent
  stories: PropTypes.array,
  words: PropTypes.array,
  info: PropTypes.object,
  queries: PropTypes.array,
  // from compositional chain
  intl: PropTypes.object.isRequired,
};

export default
  injectIntl(
    QueryAttentionOverTimeDrillDownDataCard
  );
{'fraction_non_alphanumeric': 0.16803446860894541, 'fraction_numerical': 0.013130898645876077, 'mean_word_length': 3.7560975609756095, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 55, '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': '1567622', 'n_tokens_mistral': 1573, 'n_tokens_neox': 1553, 'n_words': 347}