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

import React, { Component } from 'react';
import Meter from 'grommet/components/Meter';
import Value from 'grommet/components/Value';
import Box from 'grommet/components/Box';
import Anchor from 'grommet/components/Anchor';
import Button from 'grommet/components/Button';
import DocsArticle from '../../../components/DocsArticle';

export const DESC = (<span>
  Shows a bar, arc, or circular meter graphic.
</span>);

Meter.displayName = 'Meter';

export default class MeterDoc extends Component {

  render () {
    return (
      <DocsArticle title='Meter' action={
        <Button primary={true} path='/docs/meter/examples'
          label='Examples' />
        }>

        <section>
          <p>{DESC}</p>
          <Box direction='row' align='center' pad={{ between: 'medium' }}>
            <Meter value={40} type='circle' label={
                <Value value={40} />
              }/>
            <Box align='end' direction='row'>
              <Meter value={40} vertical={true} label={false} />
              <Value align='start' value={40} />
            </Box>
            <Box align='start' direction='column'>
              <Value value={40} />
              <Meter value={40} label={false} />
            </Box>
            <Box align='center'>
              <Meter value={40} type='arc' label={false} />
              <Value value={40} />
            </Box>
          </Box>
        </section>

        <section>
          <h2>Properties</h2>
          <dl>
            <dt><code>activeIndex {'{number}'}</code></dt>
            <dd>The currently active series value index, if any.</dd>
            <dt><code>colorIndex  {'{category}-{index}'}</code></dt>
            <dd>The color identifier to use for the graphic color.
              For example: <code>'graph-1'</code></dd>
            <dt><code>label       {'{node}'}</code></dt>
            <dd>Callers are encouraged to use <Anchor path='/docs/value'>
              Value</Anchor> to construct the appropriate label.</dd>
            <dt><code>max         {'{number}'}</code></dt>
            <dd>The largest possible value. Defaults to 100.</dd>
            <dt><code>min         {'{number}'}</code></dt>
            <dd>The smallest possible value. Defaults to 0.</dd>
            <dt><code>onActive    {'{function (index)}'}</code></dt>
            <dd>Hover handler. The hovered series index is passed as an
              argument.
              When the user is ceases to hover over the
              component, <code>undefined</code> is passed as an argument.</dd>
            <dt><code>series      {'[{value: , colorIndex: , ' +
              'onClick: }, ...]'}</code></dt>
            <dd>An array of objects describing the data.
              Either this or the <code>value</code> property must be
              provided.</dd>
            <dt><code>size        small|medium|large</code></dt>
            <dd>The size of the Meter. Defaults to <code>medium</code>.
              Currently, the <code>spiral</code> type Meter does not respond
              to this property.</dd><commit_msg>Updated Meter documentation a bit.<commit_after>// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP

import React, { Component } from 'react';
import Meter from 'grommet/components/Meter';
import Value from 'grommet/components/Value';
import Box from 'grommet/components/Box';
import Anchor from 'grommet/components/Anchor';
import Button from 'grommet/components/Button';
import DocsArticle from '../../../components/DocsArticle';

export const DESC = (<span>
  Shows a bar, arc, or circular meter graphic.
</span>);

Meter.displayName = 'Meter';

export default class MeterDoc extends Component {

  render () {
    return (
      <DocsArticle title='Meter' action={
        <Button primary={true} path='/docs/meter/examples'
          label='Examples' />
        }>

        <section>
          <p>{DESC}</p>
          <Box direction='row' align='center' pad={{ between: 'medium' }}>
            <Meter value={40} type='circle' label={
                <Value value={40} />
              }/>
            <Box align='end' direction='row'>
              <Meter value={40} vertical={true} label={false} />
              <Value align='start' value={40} />
            </Box>
            <Box align='start' direction='column'>
              <Value value={40} />
              <Meter value={40} label={false} />
            </Box>
            <Box align='center'>
              <Meter value={40} type='arc' label={false} />
              <Value value={40} />
            </Box>
          </Box>
        </section>

        <section>
          <h2>Properties</h2>
          <dl>
            <dt><code>activeIndex {'{number}'}</code></dt>
            <dd>The currently active series value index, if any.</dd>
            <dt><code>colorIndex  {'{category}-{index}'}</code></dt>
            <dd>The color identifier to use for the graphic color.
              For example: <code>'graph-1'</code></dd>
            <dt><code>label       {'{node}'}</code></dt>
            <dd>Callers are encouraged to use <Anchor path='/docs/value'>
              Value</Anchor> to construct the appropriate label.</dd>
            <dt><code>max         {'{number}'}</code></dt>
            <dd>The largest possible value. Defaults to 100.</dd>
            <dt><code>min         {'{number}'}</code></dt>
            <dd>The smallest possible value. Defaults to 0.</dd>
            <dt><code>onActive    {'{function (index)}'}</code></dt>
            <dd>Hover handler. The hovered series index is passed as an
              argument.
              When the user is ceases to hover over the
              component, <code>undefined</code> is passed as an argument.</dd>
            <dt><code>series      {'[{value: , colorIndex: , ' +
              'onClick: }, ...]'}</code></dt>
            <dd>An array of objects describing the data.
              Either this or the <code>value</code> property must be
              provided. The <code>spiral</code> type Meter also accepts a
              <code>label</code> property for the objects in the series.</dd>
            <dt><code>size        small|medium|large</code></dt>
            <dd>The size of the Meter. Defaults to <code>medium</code>.
              Currently, the <code>spiral</code> type Meter does not respond
              to this property.</dd>
{'fraction_non_alphanumeric': 0.15024783147459728, 'fraction_numerical': 0.009603469640644362, 'mean_word_length': 2.008853681267474, 'pattern_counts': {'":': 0, '<': 183, '<?xml version=': 0, '>': 183, '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': '5200943', 'n_tokens_mistral': 1821, 'n_tokens_neox': 1778, 'n_words': 508}