Radio button

src/Radio/Radio.js

@@ -0,0 +1,26 @@
+import React, {Component, PropTypes} from 'react';
+import classNames from 'classnames/bind';
+import RadioButtonGroup from 'react-radio-button';
+import styles from './Radio.styles.css';
+import Select from 'react-select';
+
+const cx = classNames.bind(styles);
+
+const className = cx({ base: true });
+
+const Radio = ({ listOfItems, selectedItemCallback}) => {
+  return
+    <RadioButtonGroup
+    listOfItems={listOfItems}
+    selectedItemCallback={selectedItemCallback}
+  />
+};
+
+Radio.displayName = 'Radio';
+
+Radio.propTypes = {
+  listOfItems: PropTypes.array.isRequired,
+  selectedItemCallback: PropTypes.func.isRequired,
+}
+
+export default Radio;

src/Radio/Radio.styles.css

@@ -0,0 +1,9 @@
+.base {
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 15px;
+  padding: 3px 10px;
+  margin: 10px;
+}

src/ViewData/ViewData.js

@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+import fetch from 'isomorphic-fetch'; //eslint-disable-line
+// import { whereBy } from 'ramda';
+
+// function makeYearData(data) {
+//   const yearData = [];
+//   data.forEach((month) => {
+//     for (let i = 0; i < month.length; i++) {
+//       yearData.push(month[i]);
+//     }
+//   });
+//   return yearData;
+// }
+
+const splitForYear = date => date.split('-')[0];
+
+const filterByYear  = (transactions) => {
+  const dataByYear = {};
+  transactions.forEach((t) => {
+    const year = splitForYear(t.tran_date);
+    const yearToUpdate = dataByYear[year];
+    if (yearToUpdate) {
+      dataByYear[year].push(t);
+    } else {
+      dataByYear[year] = [t];
+    }
+  });
+  return dataByYear;
+};
+
+
+function reduceData(year, data) {
+  return data[year] && data[year].reduce((acc, item) =>  acc + item.amount, 0);
+}
+
+export default class ViewData extends Component {
+
+  static defaultProps = {}
+
+  static propTypes = {}
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: null,
+      display: null,
+    };
+  }
+
+  componentDidMount() {
+    fetch('http://54.213.83.132/hackoregon/http/current_candidate_transactions_in/5591/')
+      .then((response) => {
+        if (response.ok) {
+          return response.json();
+        }
+        return response;
+      })
+      .then(json => filterByYear(json))
+      .then(data => this.setState({ data }));
+  }
+
+  renderData = data => (
+    <div>
+      <h5>{data.filer}</h5>
+      <p>
+        <span>{data.tran_date}</span> | <span>{data.contributor_payee}</span> | <span>{data.amount}</span>
+      </p>
+    </div>
+)
+
+  renderYear = year => this.setState({ display: this.state.data[year] });
+  getYears = () => Object.keys(this.state.data);
+
+  render() {
+    let mappedData;
+    if (this.state.data) {
+      mappedData = this.getYears().map(year => reduceData(year, this.state.data));
+      // console.log(mappedData);
+    }
+
+    return (
+      <div>
+        <select onChange={this.renderYear} name="years" id="years">
+          {this.state.data && this.getYears().map(item => <option key={item} value={item}>{item}</option>)}
+        </select>
+        <h4 style={{ textAlign: 'center' }}>Totals</h4>
+        <ul style={{ listType: 'none' }}>
+          {mappedData && mappedData.map((total, idx) => <li key={idx}>{total}</li>)}
+        </ul>
+        {this.state.display && (this.renderData(this.state.display) || 'Loading...')}
+      </div>
+    );
+  }
+
+}

src/index.js

@@ -18,6 +18,7 @@ export StamenMap from './StamenMap/StamenMap';
 export Dropdown from './Dropdown/Dropdown';
 export Icon from './Icon/Icon';
 export Scatterplot from './Scatterplot/Scatterplot';
+export Radio from './Radio/Radio';
 
 // export utils as well for broader use
 export isClient from './utils/isClient';

stories/Radio.story.js

@@ -0,0 +1,55 @@
+import React, {Component, PropTypes} from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import { Radio } from '../src';
+import RadioButtonGroup from 'react-radio-button';
+
+const displayName = Radio.displayName || 'Radio';
+const title = 'Simple usage';
+const description = `
+  This is some basic usage with the button with providing a label to show the text.
+  Clicking should trigger an action.`;
+
+const demoCode = () => {
+  class DemoRadio extends React.Component {
+    constructor() {
+      super();
+      this.handleChange = this.handleChange.bind(this);
+      this.state = {
+        selectedValue: undefined,
+        radioOptions: [
+          { value: 'Snoopy', text: 'Snoopy' },
+          { value: 'Charlie Brown', text: 'Charlie Brown'},
+          { value: 'Sally', text: 'Sally'},
+          { value: 'Shroeder', text: 'Shroeder'},
+          { value: 'Lucy', text: 'Lucy'},
+          { value: 'Linus', text: 'Linus'}
+        ]
+      };
+    }
+
+    handleChange(value) {
+      this.setState({selectedValue: value,});
+    }
+
+    render() {
+      return (
+        <RadioButtonGroup
+          selectedItemCallback={ (value) => this.state.handleChange(value)}
+          listOfItems={this.state.radioOptions}
+        />
+      );
+    }
+  }
+
+  return <DemoRadio/>
+};
+
+const propDocs = { inline: true, propTables: [Radio] };
+
+export default () => storiesOf(displayName, module)
+  .addWithInfo(
+    title,
+    description,
+    demoCode,
+    propDocs,
+  );

stories/ViewData.story.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import { ViewData } from '../src';
+
+const displayName = ViewData.displayName || 'ViewData';
+const title = 'Simple usage';
+const description = `
+  This is some basic usage with the button with providing a label to show the text.
+  Clicking should trigger an action.`;
+
+const demoCode = () => (
+  <ViewData />
+);
+
+const propDocs = { inline: true, propTables: [ViewData] };
+
+export default () => storiesOf(displayName, module)
+  .addWithInfo(
+    title,
+    description,
+    demoCode,
+    propDocs,
+  );

stories/index.js

@@ -20,6 +20,7 @@ import dropdownStory from './Dropdown.story';
 import rechartsPie from './RechartsPie.story';
 import heroStory from './Hero.story';
 import scatterplotStory from './Scatterplot.story';
+import radioStory from './Radio.story';
 
 import '../src/global.styles.css';
 import '../assets/leaflet.css';
@@ -50,3 +51,4 @@ leafletMap();
 heroStory();
 StamenMap();
 scatterplotStory();
+radioStory();