Minor

Author: andreaferretti

js/components/bar.jsx

@@ -1,8 +1,9 @@
 define([
   'react',
   'animate',
-  'paths/bar'],
-  function(React, Animate, Bar){
+  'palette/colors',
+  'paths/bar'
+], function(React, Animate, Colors, Bar){
     return React.createClass({
 
       mixins: [Animate.Mixin],
@@ -36,8 +37,15 @@ define([
           width: 420,
           height: 350,
           gutter: 10,
-          palette: ["LightCoral", "NavajoWhite", "LemonChiffon",
-                    "PaleGreen", "CornflowerBlue", "Thistle", "Lavender"]
+          palette: Colors.mix({
+              r: 130,
+              g: 140,
+              b: 210
+            }, {
+              r: 180,
+              g: 205,
+              b: 150
+            })
         };
       },
 
@@ -51,16 +59,16 @@ define([
           height: this.props.height,
           accessor: this.props.accessor,
           compute: {
-            color: function(i){
-              return self.props.palette[i % self.props.palette.length];
+            color: function(i) {
+              return Colors.string(self.props.palette[i % self.props.palette.length]);
             }
           },
           gutter: this.props.gutter,
         });
 
         var curves = bar.curves.map(function(curve){
           return <path d={curve.line.path.print()} fill={curve.color}
-          onMouseOver={function(event){self.handleMouseOver(curve.index);}}
+          onMouseOver={function(event){self.handleMouseOver(curve.index)}}
           onMouseLeave={self.handleMouseLeave}/>;
         });
 

js/components/stack.jsx

@@ -1,96 +1,85 @@
 define([
   'react',
+  'animate',
+  'palette/colors',
   'paths/stack'
-], function(React, Stack) {
+], function(React, Animate, Colors, Stack) {
   return React.createClass({
 
-    cardinal: function(num) {
-      if(num == 1)
-        return "st";
-      else if(num == 2)
-        return "nd";
-      else if(num == 3)
-        return "rd";
-      else
-        return "th";
-    },
+    mixins: [Animate.Mixin],
 
     cyclic: function(array, i) {
       return array[i % array.length];
     },
 
-    handleMouseOver: function(barX, curves) {
-      var ifCentroidX = function(curve){
-        return curve.line.centroid[0] === barX;
-      };
-      var toTextInfo = function(curve){
-        return {
-          x: barX,
-          y: curve.line.centroid[1],
-          value: curve.item,
-          index: curve.index
-        }
-      };
-      this.setState({text: curves.filter(ifCentroidX).map(toTextInfo)});
+    scaledByIndex: function(index, scale, matrix) {
+      if (index===undefined)
+        return matrix;
+      var scale = scale || 0;
+      var matrix = matrix || this.props.data;
+      return matrix.map(function(array, i){
+        return array.map(function(value){
+          return (i==index) ? value : value*scale;
+        });
+      });
+    },
+
+    handleMouseOver: function(index){
+      this.animateState({data: this.scaledByIndex(index, 0.1)});
+    },
+
+    handleMouseLeave: function(){
+      this.animateState({data: this.props.data});
     },
 
-    handleMouseLeave: function(event) {
-      this.setState({text: []});
+    getInitialState: function(){
+      return {data: this.props.data};
     },
 
     getDefaultProps: function() {
       return {
         width: 420,
         height: 350,
-        palette: ["LightCoral", "NavajoWhite", "LemonChiffon",
-                  "PaleGreen", "CornflowerBlue", "Thistle", "Lavender"]
+        palette: Colors.mix({
+            r: 130,
+            g: 140,
+            b: 210
+          }, {
+            r: 180,
+            g: 205,
+            b: 150
+          })
       };
     },
 
-    getInitialState: function() {
-      return {text: []};
-    },
-
     render: function() {
 
       var self = this;
 
       var stack = Stack({
-        data: this.props.data,
+        data: this.state.data,
         accessor: this.props.accessor,
         width: this.props.width,
         height:this.props.height,
         gutter: this.props.gutter,
         compute: {
           color: function(index, item, group){
-            return self.cyclic(self.props.palette, group);
+            return Colors.string(self.cyclic(self.props.palette, group));
           }
         }
       });
 
       var curves = stack.curves.map(function(curve){
         return <path d={curve.line.path.print()} fill={curve.color}
-                onMouseOver={function(event){
-                  self.handleMouseOver(curve.line.centroid[0], stack.curves)}
-                }
+                onMouseOver={function(event){self.handleMouseOver(curve.group)}}
                 onMouseLeave={self.handleMouseLeave}/>;
         });
 
-      var text = this.state.text.map(function(textInfo){
-        //sembra che React non supporti l'attributo alignmentBaseline
-        return <text x={textInfo.x} y={textInfo.y} alignmentBaseline="middle"
-                fontFamily="Serif" textAnchor="middle"
-                fontSize={self.props.fontSize || self.props.height / 20}>
-                { (textInfo.index+1) + self.cardinal(textInfo.index+1) +
-                " serie: " + textInfo.value }</text>;
-        });
-
       return (
         <div id="stack">
           <svg width="500" height="380">
             <g transform="translate(40, 10)">
             {curves}
-            {text}
             </g>
           </svg>
         </div>