Skip to content

Commit 603d4df

Browse files
matthiasnmatthiasn
committed
configurable trend indicators
1 parent 3fa5fe4 commit 603d4df

File tree

3 files changed

+52
-13
lines changed

3 files changed

+52
-13
lines changed

‎app/views/react_js.scala.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
<a>
7979
<select class="form-control" id="page-size">
8080
<option value="5">5</option>
81-
<option value="10" selected="selected">10</option>
81+
<option value="10" selected>10</option>
8282
<option value="25">25</option>
8383
<option value="50">50</option>
8484
<option value="100">100</option>
@@ -137,6 +137,7 @@
137137
<hr />
138138
<h5>word frequency</h5>
139139
<div id="react-bar-chart" class="barchart" ></div>
140+
<hr />
140141
</div>
141142

142143
</div>

‎public/react-js/birdwatch.js

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -505,12 +505,12 @@ var BirdWatch = BirdWatch || {};
505505
return {ratioHist: [], posHist: [], lastUpdate: now(), posArrDir: "RIGHT", ratioArrDir: "RIGHT-UP"}
506506
},
507507
componentWillReceiveProps: function(props) {
508-
this.setState({ratioHist: _.last(this.state.ratioHist.concat(props.val / props.count), 100)});
508+
this.setState({ratioHist: _.last(this.state.ratioHist.concat(props.val / props.count), this.props.ratioChangeTweets)});
509509
this.setState({posHist: _.last(this.state.posHist.concat(props.idx+1), 2)});
510510

511511
// slope of the fitted position change function
512512
var posSlope = regression('linear', regressionData(this.state.posHist)).equation[0];
513-
if (posSlope === 0 && now() - this.state.lastUpdate > 60000) { this.setState({posArrDir: "RIGHT"}); }
513+
if (posSlope === 0 && now() - this.state.lastUpdate > this.props.posChangeDur) { this.setState({posArrDir: "RIGHT"}); }
514514
if (posSlope > 0) { this.setState({posArrDir: "UP", lastUpdate: now()}); }
515515
if (posSlope < 0) { this.setState({posArrDir: "DOWN", lastUpdate: now()}); }
516516

@@ -539,14 +539,17 @@ var BirdWatch = BirdWatch || {};
539539
}
540540
});
541541

542-
/** BarChart component, renders all bar items */
542+
/** BarChart component, renders all bar items.
543+
* Also renders interactive legend where the trend indicator durations can be configured */
543544
var BarChart = React.createClass({displayName: 'BarChart',
544545
render: function() {
545546
var bars = this.props.words.map(function (bar, i, arr) {
546547
if (!bar) return "";
547548
var y = i * 15;
548549
var w = bar.value / arr[0].value * (barChartElem.width() - 190);
549-
return Bar( {t:bar.key, y:y, w:w, key:bar.key, idx:i, val:bar.value, count:this.props.count} );
550+
return Bar( {t:bar.key, y:y, w:w, key:bar.key, idx:i, val:bar.value, count:this.props.count,
551+
posChangeDur:this.refs.posChangeDur.getDOMNode().value,
552+
ratioChangeTweets:this.refs.ratioChangeTweets.getDOMNode().value} );
550553
}.bind(this));
551554
return React.DOM.div(null,
552555
React.DOM.svg( {width:"750", height:"380"},
@@ -555,8 +558,24 @@ var BirdWatch = BirdWatch || {};
555558
React.DOM.line( {transform:"translate(168, 0)", y:"0", y2:"375", stroke:"#000000"})
556559
)
557560
),
558-
React.DOM.p( {className:"legend"}, React.DOM.strong(null, "1st trend indicator:"), " position changes in last minute"),
559-
React.DOM.p( {className:"legend"}, React.DOM.strong(null, "2nd trend indicator:"), " ratio change termCount / totalTermsCounted over last 100 tweets")
561+
React.DOM.p( {className:"legend"}, React.DOM.strong(null, "1st trend indicator:"), " position changes in last  ",
562+
React.DOM.select( {defaultValue:"60000", ref:"posChangeDur"},
563+
React.DOM.option( {value:"10000"}, "10 seconds"),
564+
React.DOM.option( {value:"30000"}, "30 seconds"),
565+
React.DOM.option( {value:"60000"}, "minute"),
566+
React.DOM.option( {value:"300000"}, "5 minutes"),
567+
React.DOM.option( {value:"600000"}, "10 minutes")
568+
)
569+
),
570+
React.DOM.p( {className:"legend"}, React.DOM.strong(null, "2nd trend indicator:"),
571+
"ratio change termCount / totalTermsCounted over last  ",
572+
React.DOM.select( {defaultValue:"100", ref:"ratioChangeTweets"},
573+
React.DOM.option( {value:"10"}, "10 tweets"),
574+
React.DOM.option( {value:"100"}, "100 tweets"),
575+
React.DOM.option( {value:"500"}, "500 tweets"),
576+
React.DOM.option( {value:"1000"}, "1000 tweets")
577+
)
578+
)
560579
)
561580
}
562581
});

‎react-js/jsx/barchart.js

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,12 @@ var BirdWatch = BirdWatch || {};
4242
return {ratioHist: [], posHist: [], lastUpdate: now(), posArrDir: "RIGHT", ratioArrDir: "RIGHT-UP"}
4343
},
4444
componentWillReceiveProps: function(props) {
45-
this.setState({ratioHist: _.last(this.state.ratioHist.concat(props.val / props.count), 100)});
45+
this.setState({ratioHist: _.last(this.state.ratioHist.concat(props.val / props.count), this.props.ratioChangeTweets)});
4646
this.setState({posHist: _.last(this.state.posHist.concat(props.idx+1), 2)});
4747

4848
// slope of the fitted position change function
4949
var posSlope = regression('linear', regressionData(this.state.posHist)).equation[0];
50-
if (posSlope === 0 && now() - this.state.lastUpdate > 60000) { this.setState({posArrDir: "RIGHT"}); }
50+
if (posSlope === 0 && now() - this.state.lastUpdate > this.props.posChangeDur) { this.setState({posArrDir: "RIGHT"}); }
5151
if (posSlope > 0) { this.setState({posArrDir: "UP", lastUpdate: now()}); }
5252
if (posSlope < 0) { this.setState({posArrDir: "DOWN", lastUpdate: now()}); }
5353

@@ -76,14 +76,17 @@ var BirdWatch = BirdWatch || {};
7676
}
7777
});
7878

79-
/** BarChart component, renders all bar items */
79+
/** BarChart component, renders all bar items.
80+
* Also renders interactive legend where the trend indicator durations can be configured */
8081
var BarChart = React.createClass({
8182
render: function() {
8283
var bars = this.props.words.map(function (bar, i, arr) {
8384
if (!bar) return "";
8485
var y = i * 15;
8586
var w = bar.value / arr[0].value * (barChartElem.width() - 190);
86-
return <Bar t={bar.key} y={y} w={w} key={bar.key} idx={i} val={bar.value} count={this.props.count} />;
87+
return <Bar t={bar.key} y={y} w={w} key={bar.key} idx={i} val={bar.value} count={this.props.count}
88+
posChangeDur={this.refs.posChangeDur.getDOMNode().value}
89+
ratioChangeTweets={this.refs.ratioChangeTweets.getDOMNode().value} />;
8790
}.bind(this));
8891
return <div>
8992
<svg width="750" height="380">
@@ -92,8 +95,24 @@ var BirdWatch = BirdWatch || {};
9295
<line transform="translate(168, 0)" y="0" y2="375" stroke="#000000"></line>
9396
</g>
9497
</svg>
95-
<p className="legend"><strong>1st trend indicator:</strong> position changes in last minute</p>
96-
<p className="legend"><strong>2nd trend indicator:</strong> ratio change termCount / totalTermsCounted over last 100 tweets</p>
98+
<p className="legend"><strong>1st trend indicator:</strong> position changes in last &nbsp;
99+
<select defaultValue="60000" ref="posChangeDur">
100+
<option value="10000">10 seconds</option>
101+
<option value="30000">30 seconds</option>
102+
<option value="60000">minute</option>
103+
<option value="300000">5 minutes</option>
104+
<option value="600000">10 minutes</option>
105+
</select>
106+
</p>
107+
<p className="legend"><strong>2nd trend indicator:</strong>
108+
ratio change termCount / totalTermsCounted over last &nbsp;
109+
<select defaultValue="100" ref="ratioChangeTweets">
110+
<option value="10">10 tweets</option>
111+
<option value="100">100 tweets</option>
112+
<option value="500">500 tweets</option>
113+
<option value="1000">1000 tweets</option>
114+
</select>
115+
</p>
97116
</div>
98117
}
99118
});

0 commit comments

Comments
 (0)