barchart label

matthiasn · matthiasn · commit 3e45c120357e · 2014-03-30T12:24:22.000+02:00
diff --git a/public/react-js/birdwatch.js b/public/react-js/birdwatch.js
@@ -519,13 +519,16 @@ var BirdWatch = BirdWatch || {};
             var percSlope = regression('linear', regressionData(this.state.percHist)).equation[0];
             var percArrDir = "RIGHT-UP";
             if (percSlope < 0) { percArrDir = "RIGHT-DOWN"; }
+            var textX = w+135;
+            var style = {fontWeight: 500, fill: "#EEE", textAnchor: "end"};
+            if (w < 70) { style.fill="#999"; textX+=20; style.textAnchor="start"}
 
             return  React.DOM.g(null, 
-                      React.DOM.text( {y:y +12, x:"117", stroke:"none", fill:"black", dy:".35em", textAnchor:"end"}, t),
+                      React.DOM.text( {y:y+12, x:"117", stroke:"none", fill:"black", dy:".35em", textAnchor:"end"}, t),
                       Arrow( {dir:posArrDir, y:y, x:126} ),
                       Arrow( {dir:percArrDir, y:y, x:140} ),
                       React.DOM.rect( {y:y, x:"148", height:"15", width:w, stroke:"white", fill:"#428bca"}),
-                      React.DOM.text( {y:y +12, x:w+154, stroke:"none", fill:"black", dy:".35em", textAnchor:"start"}, val)
+                      React.DOM.text( {y:y+12, x:textX, stroke:"none", style:style, dy:".35em"} , val)
                     )
              }
     });
@@ -536,7 +539,7 @@ var BirdWatch = BirdWatch || {};
             var bars = this.props.words.map(function (bar, i, arr) {
                 if (!bar) return "";
                 var y = i * 15;
-                var w = bar.value / arr[0].value * (barChartElem.width() - 216);
+                var w = bar.value / arr[0].value * (barChartElem.width() - 170);
                 return Bar( {t:bar.key, y:y, w:w, key:bar.key, idx:i, val:bar.value, count:this.props.count} );
             }.bind(this));
             return React.DOM.svg( {width:"750", height:"6000"}, 
diff --git a/react-js/jsx/barchart.js b/react-js/jsx/barchart.js
@@ -56,13 +56,16 @@ var BirdWatch = BirdWatch || {};
             var percSlope = regression('linear', regressionData(this.state.percHist)).equation[0];
             var percArrDir = "RIGHT-UP";
             if (percSlope < 0) { percArrDir = "RIGHT-DOWN"; }
+            var textX = w+135;
+            var style = {fontWeight: 500, fill: "#EEE", textAnchor: "end"};
+            if (w < 70) { style.fill="#999"; textX+=20; style.textAnchor="start"}
 
             return  <g>
-                      <text y={y +12} x="117" stroke="none" fill="black" dy=".35em" textAnchor="end">{t}</text>
+                      <text y={y+12} x="117" stroke="none" fill="black" dy=".35em" textAnchor="end">{t}</text>
                       <Arrow dir={posArrDir} y={y} x={126} />
                       <Arrow dir={percArrDir} y={y} x={140} />
                       <rect y={y} x="148" height="15" width={w} stroke="white" fill="#428bca"></rect>
-                      <text y={y +12} x={w+154} stroke="none" fill="black" dy=".35em" textAnchor="start">{val}</text>
+                      <text y={y+12} x={textX} stroke="none" style={style} dy=".35em" >{val}</text>
                     </g>
              }
     });
@@ -73,7 +76,7 @@ var BirdWatch = BirdWatch || {};
             var bars = this.props.words.map(function (bar, i, arr) {
                 if (!bar) return "";
                 var y = i * 15;
-                var w = bar.value / arr[0].value * (barChartElem.width() - 216);
+                var w = bar.value / arr[0].value * (barChartElem.width() - 170);
                 return <Bar t={bar.key} y={y} w={w} key={bar.key} idx={i} val={bar.value} count={this.props.count} />;
             }.bind(this));
             return <svg width="750" height="6000">
