localhots
/
empact
1
0
Fork 0
Code Releases Activity

Rebuilt selectors

This commit is contained in:
Gregory Eremin 2015-03-16 15:36:15 +07:00
parent ad20021e61
commit 65f890838d
5 changed files with 35 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/scripts/src/charts/bar_chart.jsx
View File

@ -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> 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>
<div className="filters"> <div className="filters">
<Selector thing="item"
items={this.props.items}
value={this.state.item}
onChange={this.handleFilter.bind(this, 'item')} />
<Selector thing="sort" <Selector thing="sort"
title="Show"
items={this.sorts} items={this.sorts}
value={this.state.sort} value={this.state.sort}
onChange={this.handleFilter.bind(this, '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> </div>
<svg ref="svg" className="barchart" key="barchart-svg" <svg ref="svg" className="barchart" key="barchart-svg"
width="100%" height={this.height()} width="100%" height={this.height()}

5
app/scripts/src/charts/selector.jsx
View File

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

8
app/scripts/src/charts/stacked_area_chart.jsx
View File

@ -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> 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>
<div className="filters"> <div className="filters">
<Selector thing="sort"
title="Show"
items={['commits']}
value={'commits'} />
<Selector thing="item" <Selector thing="item"
title="Grouped by"
items={this.props.items} items={this.props.items}
value={this.state.item} value={this.state.item}
onChange={this.handleFilter.bind(this, 'item')} /> onChange={this.handleFilter.bind(this, 'item')} />
<Selector thing="sort"
items={['commits']}
value={'commits'} />
</div> </div>
<svg ref="svg" className="sachart" key="sachart-svg" <svg ref="svg" className="sachart" key="sachart-svg"
width="100%" height={maxHeight} width="100%" height={maxHeight}

2
app/styles/app.css
View File

@ -29,7 +29,7 @@
background-position: center; background-position: center;
background-size: 100% auto; background-size: 100% auto;
margin-right: 10px; margin-right: 10px;
border-radius: 3px; border-radius: 2px;
} }
.info-block h1 { .info-block h1 {

36
app/styles/charts.css
View File

@ -54,39 +54,37 @@
margin: 10px 15px 0 0; margin: 10px 15px 0 0;
} }
.filters { .selector {
width: 100%; width: 100%;
height: 22px;
font-size: 16px;
line-height: 21px;
margin-bottom: 8px;
} }
.filters .item { .selector .title {
margin: 0; width: auto;
padding: 0;
float: left; float: left;
font-weight: 400;
margin-right: 8px;
} }
.filters .item li { .selector .items {
margin-right: 10px; display: block;
} float: left;
.filters .sort li {
margin-left: 10px;
}
.filters .sort {
margin: 0; margin: 0;
padding: 0; padding: 0;
float: right;
} }
.filters li { .selector li {
display: inline-block; display: inline-block;
font-size: 18px;
line-height: 32px;
font-weight: 300; font-weight: 300;
color: #aaa; color: #aaa;
cursor: pointer; cursor: pointer;
text-decoration: underline; margin-right: 8px;
} }
.filters li.active { .selector li.active {
font-weight: 400; font-weight: 400;
color: #222; color: #222;
cursor: default; cursor: default;
text-decoration: none; border-bottom: #222 1px solid;
} }
.whatsgoingon { .whatsgoingon {
@ -103,5 +101,5 @@
margin: 3px 0 0; margin: 3px 0 0;
padding: 3px 6px; padding: 3px 6px;
background-color: #eaeaea; background-color: #eaeaea;
border-radius: 4px; border-radius: 2px;
} }