Rebuilt selectors

app/scripts/src/charts/bar_chart.jsx

@@ -123,14 +123,16 @@ var BarChart = React.createClass({
                     This bar chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} from <em>W11, Mar 9</em> to <em>W18, Apr 27</em>
                 </div>
                 <div className="filters">
-                    <Selector thing="item"
-                        items={this.props.items}
-                        value={this.state.item}
-                        onChange={this.handleFilter.bind(this, 'item')} />
                     <Selector thing="sort"
+                        title="Show"
                         items={this.sorts}
                         value={this.state.sort}
                         onChange={this.handleFilter.bind(this, 'sort')} />
+                    <Selector thing="item"
+                        title="Grouped by"
+                        items={this.props.items}
+                        value={this.state.item}
+                        onChange={this.handleFilter.bind(this, 'item')} />
                 </div>
                 <svg ref="svg" className="barchart" key="barchart-svg"
                     width="100%" height={this.height()}

app/scripts/src/charts/selector.jsx

@@ -20,9 +20,12 @@ var Selector = React.createClass({
 
     render: function() {
         return (
-            <ul className={this.props.thing}>
-                {this.props.items.map(this.renderItem)}
-            </ul>
+            <div className="selector">
+                <div className="title">{this.props.title}</div>
+                <ul className="items">
+                    {this.props.items.map(this.renderItem)}
+                </ul>
+            </div>
         );
     }
 });

app/scripts/src/charts/stacked_area_chart.jsx

@@ -199,13 +199,15 @@ var StackedAreaChart = React.createClass({
                     This stacked area chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} from <em>W11, Mar 9</em> to <em>W18, Apr 27</em>
                 </div>
                 <div className="filters">
+                    <Selector thing="sort"
+                        title="Show"
+                        items={['commits']}
+                        value={'commits'} />
                     <Selector thing="item"
+                        title="Grouped by"
                         items={this.props.items}
                         value={this.state.item}
                         onChange={this.handleFilter.bind(this, 'item')} />
-                    <Selector thing="sort"
-                        items={['commits']}
-                        value={'commits'} />
                 </div>
                 <svg ref="svg" className="sachart" key="sachart-svg"
                     width="100%" height={maxHeight}