<commit_before>// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP

import React, { Component } from 'react';
import Meter from 'grommet/components/Meter';
import Box from 'grommet/components/Box';
import Value from 'grommet/components/Value';
import Label from 'grommet/components/Label';
import Example from '../../../Example';

const SERIES = [
  {label: 'Gen 7', value: 40},
  {label: 'Gen 8', value: 20},
  {label: 'Gen 9', value: 10},
  {label: 'Gen 10', value: 30}
];

export default class Meter21 extends Component {

  constructor () {
    super();
    this.state = {};
  }

  render () {
    const { index } = this.state;

    let value, label;
    if (index >= 0) {
      value = SERIES[index].value;
      label = SERIES[index].label;
    } else {
      value = 0;
      SERIES.forEach(serie => value += serie.value);
      label = 'Total';
    }

    return (
      <Example align="center" code={
        <Box direction="row" pad={{ between: 'small' }}>
          <Meter type="arc" vertical={true} stacked={true} series={SERIES}
            label={false} max={100} threshold={90}
            onActive={(index) => this.setState({ index: index })} />
          <Box justify="between" align="start">
            <Label size="small">100 GB</Label>
            <Value value={value} units="GB" align="start" label={label} />
            <Label size="small">0 GB</Label>
          </Box>
        </Box>
      } />
    );
  }

};<commit_msg>Added more support for sizing Meter examples.<commit_after>// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP

import React, { Component, PropTypes } from 'react';
import Meter from 'grommet/components/Meter';
import Box from 'grommet/components/Box';
import Value from 'grommet/components/Value';
import Label from 'grommet/components/Label';
import Example from '../../../Example';

const SERIES = [
  {label: 'Gen 7', value: 40},
  {label: 'Gen 8', value: 20},
  {label: 'Gen 9', value: 10},
  {label: 'Gen 10', value: 30}
];

export default class Meter21 extends Component {

  constructor () {
    super();
    this.state = {};
  }

  render () {
    const { size } = this.props;
    const { index } = this.state;

    let value, label;
    if (index >= 0) {
      value = SERIES[index].value;
      label = SERIES[index].label;
    } else {
      value = 0;
      SERIES.forEach(serie => value += serie.value);
      label = 'Total';
    }

    return (
      <Example align="center" code={
        <Box direction="row" pad={{ between: 'small' }}>
          <Meter type="arc" vertical={true} stacked={true} series={SERIES}
            label={false} max={100} threshold={90} size={size}
            onActive={(index) => this.setState({ index: index })} />
          <Box justify="between" align="start">
            <Label size="small">100 GB</Label>
            <Value value={value} units="GB" align="start" label={label}
              size={size} />
            <Label size="small">0 GB</Label>
          </Box>
        </Box>
      } />
    );
  }

};

Meter21.propTypes = {
  size: PropTypes.string
};
{'fraction_non_alphanumeric': 0.16628922678744743, 'fraction_numerical': 0.022646392753154318, 'mean_word_length': 2.6248534583821805, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1878664', 'n_tokens_mistral': 1007, 'n_tokens_neox': 958, 'n_words': 263}