<commit_before>
import React from 'react';

import {dateFormats, valueWithUnits} from './../../utils/displayFormats';
import Tooltip from './../tooltip/tooltip';

try {require('./mobile.css');} catch(e) {}


const CountValue = ({value, units}) => {
  if (!value) {
    return (
      <div className="D_CTW_M_countContainer">
        <span className="D_CTW_M_countNodata">No data</span>
      </div>
    )
  }

  if (units === '$') {
    return (
      <div className="D_CTW_M_countContainer">
        <span className="D_CTW_M_countValue">
          <span className="D_CTW_M_countUnits" style={{paddingRight: '4px'}}>{units}</span>
          {value}</span>
      </div>
    )
  } else if (units === '%') {
    return (
      <div className="D_CTW_M_countContainer">
        <span className="D_CTW_M_countValue">{value}
          <span className="D_CTW_M_countUnits" style={{paddingLeft: '4px'}}>{units}</span>
        </span>
      </div>
    )
  } else {
    return (
      <div className="D_CTW_M_countContainer">
        <span className="D_CTW_M_countValue">{value}</span>
      </div>
    )
  }
};


const TrendValue = ({value, date, units}) => {
  let valStr = valueWithUnits(value, units);

  return (
    <div className="D_CTW_M_trendContainer">
      {value && <div>
        <strong className="D_CTW_M_trendValue">
          {Number(value) > 0 ?
            <span>{valStr} <i className="fa fa-arrow-up" /></span> :
            Number(value) < 0 ?
              <span>{valStr} <i className="fa fa-arrow-down" /></span> :
              <span>Unchanged <i className="fa fa-minus" /></span>}
        </strong>
        <span className="D_CTW_M_trendDate">since {dateFormats.monthYear(date)}</span>
      </div>}
    </div>
  )
};


/**
 * Mobile adaption of Count with Trend Widget.
 *
 */
const MobileCountWithTrendWidget = (props) => {

  const {
    title,
    units,
    tooltipAnchorTo,
    value,
    trendValue,
    trendDate,
    color,
  } = props;

  return (
    <article className="D_CTW_M_root" role="article">
      <div>
        <div className="D_CTW_M_layoutContainer">

          <div className="D_CTW_M_layoutLeft">
            <div className="D_CTW_M_header">
              <h1>{title} {tooltipAnchorTo && <Tooltip anchorTo={tooltipAnchorTo} iconOnly={true} infoText="" />}</h1><commit_msg>change infoText attribute to text (#187)<commit_after>
import React from 'react';

import {dateFormats, valueWithUnits} from './../../utils/displayFormats';
import Tooltip from './../tooltip/tooltip';

try {require('./mobile.css');} catch(e) {}


const CountValue = ({value, units}) => {
  if (!value) {
    return (
      <div className="D_CTW_M_countContainer">
        <span className="D_CTW_M_countNodata">No data</span>
      </div>
    )
  }

  if (units === '$') {
    return (
      <div className="D_CTW_M_countContainer">
        <span className="D_CTW_M_countValue">
          <span className="D_CTW_M_countUnits" style={{paddingRight: '4px'}}>{units}</span>
          {value}</span>
      </div>
    )
  } else if (units === '%') {
    return (
      <div className="D_CTW_M_countContainer">
        <span className="D_CTW_M_countValue">{value}
          <span className="D_CTW_M_countUnits" style={{paddingLeft: '4px'}}>{units}</span>
        </span>
      </div>
    )
  } else {
    return (
      <div className="D_CTW_M_countContainer">
        <span className="D_CTW_M_countValue">{value}</span>
      </div>
    )
  }
};


const TrendValue = ({value, date, units}) => {
  let valStr = valueWithUnits(value, units);

  return (
    <div className="D_CTW_M_trendContainer">
      {value && <div>
        <strong className="D_CTW_M_trendValue">
          {Number(value) > 0 ?
            <span>{valStr} <i className="fa fa-arrow-up" /></span> :
            Number(value) < 0 ?
              <span>{valStr} <i className="fa fa-arrow-down" /></span> :
              <span>Unchanged <i className="fa fa-minus" /></span>}
        </strong>
        <span className="D_CTW_M_trendDate">since {dateFormats.monthYear(date)}</span>
      </div>}
    </div>
  )
};


/**
 * Mobile adaption of Count with Trend Widget.
 *
 */
const MobileCountWithTrendWidget = (props) => {

  const {
    title,
    units,
    tooltipAnchorTo,
    value,
    trendValue,
    trendDate,
    color,
  } = props;

  return (
    <article className="D_CTW_M_root" role="article">
      <div>
        <div className="D_CTW_M_layoutContainer">

          <div className="D_CTW_M_layoutLeft">
            <div className="D_CTW_M_header">
              <h1>{title} {tooltipAnchorTo && <Tooltip anchorTo={tooltipAnchorTo} iconOnly={true} text="" />}</h1>
{'fraction_non_alphanumeric': 0.16469321851453175, 'fraction_numerical': 0.0032292787944025836, 'mean_word_length': 2.734726688102894, 'pattern_counts': {'":': 0, '<': 95, '<?xml version=': 0, '>': 101, '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': '6610607', 'n_tokens_mistral': 1596, 'n_tokens_neox': 1583, 'n_words': 288}