SAC interaction

app/scripts/src/charts/stacked_area_chart.jsx

@@ -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 (
+                <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 className="sachart-container">
+            <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){
+                    {_.pairs(colors).map(renderLegend)}
-                        return (
-                            <li key={'legend-'+ pair[0]}>
-                                <div className="color-dot" style={{backgroundColor: pair[1]}}></div>
-                                {pair[0]}
-                            </li>
-                        );
-                    })}
                 </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)"
+                    fill="rgba(255, 255, 255, .9)" />
-                    stroke="rgba(200, 200, 200, .5)"
+                <text ref="value"
-                    strokeWidth="1" />
+                    x={this.props.x-8}
-                <circle ref="trigger"
+                    y={(this.state.lastY || this.props.y)+4}>
-                    cx={this.props.x}
+                    {this.props.value}
-                    cy={this.state.lastY || this.props.y}
+                </text>
-                    r={3*this.radius}
-                    fill="transparent"
-                    onMouseOver={function(){console.log("over dot")}} />
             </g>
         );
     }

app/styles/charts.css

@@ -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;