localhots
/
empact
1
0
Fork 0
Code Releases Activity

SAC interaction

This commit is contained in:
Gregory Eremin 2015-03-16 19:47:39 +07:00
parent 0be36128cd
commit 2495b3e539
2 changed files with 78 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,6 +68,16 @@ var StackedAreaChart = React.createClass({
this.transitionTo(this.state.item, params);
},
handleFocusIn: function(i) {
var node = this.refs.container.getDOMNode();
node.className = 'sachart-container focused item-'+ i;
},
handleFocusOut: function(i) {
var node = this.refs.container.getDOMNode();
node.className = 'sachart-container';
},
handleNewData: function() {
// Group commits by items
var weeksList = _.chain(this.state.rawData)
@ -190,9 +200,11 @@ var StackedAreaChart = React.createClass({
}
return (
<StackedArea key={'area-'+ i}
item={item}
item={item} i={i}
d={roundPathCorners(this.buildPathD(path), 3)}
color={Colors[i]} />
color={Colors[i]}
onMouseOver={this.handleFocusIn.bind(this, i)}
onMouseOut={this.handleFocusOut.bind(this, i)} />
);
}.bind(this));
@ -207,7 +219,7 @@ var StackedAreaChart = React.createClass({
lastY = dot[1];
return (
<Dot key={'dot-'+ i +'-'+ j}
item={item}
item={item} i={i}
value={100}
x={dot[0]}
y={dot[1]} />
@ -224,8 +236,20 @@ var StackedAreaChart = React.createClass({
params.splice(params.indexOf('org'), 1);
var subject = params[0];
var renderLegend = function(pair, i){
return (
<div className="sachart-container">
<li key={'legend-'+ pair[0]}
className={'label label-'+ i}
onMouseOver={this.handleFocusIn.bind(this, i)}
onMouseOut={this.handleFocusOut.bind(this, i)}>
<div className="color-dot" style={{backgroundColor: pair[1]}}></div>
{pair[0]}
</li>
);
}.bind(this);
return (
<div ref="container" className="sachart-container">
<div className="whatsgoingon">
This stacked area chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} <WeekIntervalSelector />
</div>
@ -247,14 +271,7 @@ var StackedAreaChart = React.createClass({
<g ref="dots">{dots}</g>
</svg>
<ul className="legend">
{_.pairs(colors).map(function(pair){
return (
<li key={'legend-'+ pair[0]}>
<div className="color-dot" style={{backgroundColor: pair[1]}}></div>
{pair[0]}
</li>
);
})}
{_.pairs(colors).map(renderLegend)}
</ul>
</div>
);
@ -282,8 +299,11 @@ var StackedArea = React.createClass({
render: function() {
return (
<path ref="path"
className={'path path-'+ this.props.i}
d={this.state.lastd || this.props.d}
fill={this.props.color}
onMouseOver={this.props.onMouseOver}
onMouseOut={this.props.onMouseOut}
shapeRendering="optimizeQuality" />
);
}
@ -292,7 +312,7 @@ var StackedArea = React.createClass({
var Dot = React.createClass({
mixins: [ChartAnimationMixin],
radius: 3,
radius: 12,
getInitialState: function() {
return {};
@ -311,20 +331,17 @@ var Dot = React.createClass({
render: function() {
return (
<g>
<g className={'dot dot-'+ this.props.i}>
<circle ref="dot"
cx={this.props.x}
cy={this.state.lastY || this.props.y}
r={this.radius}
fill="rgba(255, 255, 255, .8)"
stroke="rgba(200, 200, 200, .5)"
strokeWidth="1" />
<circle ref="trigger"
cx={this.props.x}
cy={this.state.lastY || this.props.y}
r={3*this.radius}
fill="transparent"
onMouseOver={function(){console.log("over dot")}} />
fill="rgba(255, 255, 255, .9)" />
<text ref="value"
x={this.props.x-8}
y={(this.state.lastY || this.props.y)+4}>
{this.props.value}
</text>
</g>
);
}

39
app/styles/charts.css
View File

@ -35,6 +35,12 @@
float: left;
padding: 0 20px 20px 0;
}
.sachart-container .dot {
display: none;
}
.sachart-container .dot text {
font-size: 10px;
}
.sachart-container .legend {
display: block;
margin: 0;
@ -51,9 +57,40 @@
}
.sachart-container .legend li {
display: inline-block;
margin: 10px 15px 0 0;
padding: 10px 15px 0 0;
cursor: default;
}
.sachart-container.focused .path {
opacity: 0.03;
}
.sachart-container.focused .label {
opacity: 0.3;
}
.sachart-container.item-0 .path-0, .sachart-container.item-0 .label-0 { opacity: 1; }
.sachart-container.item-1 .path-1, .sachart-container.item-1 .label-1 { opacity: 1; }
.sachart-container.item-2 .path-2, .sachart-container.item-2 .label-2 { opacity: 1; }
.sachart-container.item-3 .path-3, .sachart-container.item-3 .label-3 { opacity: 1; }
.sachart-container.item-4 .path-4, .sachart-container.item-4 .label-4 { opacity: 1; }
.sachart-container.item-5 .path-5, .sachart-container.item-5 .label-5 { opacity: 1; }
.sachart-container.item-6 .path-6, .sachart-container.item-6 .label-6 { opacity: 1; }
.sachart-container.item-7 .path-7, .sachart-container.item-7 .label-7 { opacity: 1; }
.sachart-container.item-8 .path-8, .sachart-container.item-8 .label-8 { opacity: 1; }
.sachart-container.item-9 .path-9, .sachart-container.item-9 .label-9 { opacity: 1; }
.sachart-container.item-0 .dot-0 { display: inline; }
.sachart-container.item-1 .dot-1 { display: inline; }
.sachart-container.item-2 .dot-2 { display: inline; }
.sachart-container.item-3 .dot-3 { display: inline; }
.sachart-container.item-4 .dot-4 { display: inline; }
.sachart-container.item-5 .dot-5 { display: inline; }
.sachart-container.item-6 .dot-6 { display: inline; }
.sachart-container.item-7 .dot-7 { display: inline; }
.sachart-container.item-8 .dot-8 { display: inline; }
.sachart-container.item-9 .dot-9 { display: inline; }
.selector {
width: 100%;
height: 22px;