|
| 1 | +/** @jsx React.DOM */ |
| 2 | + |
| 3 | +var BirdWatch = BirdWatch || {}; |
| 4 | + |
| 5 | +(function () { |
| 6 | + |
| 7 | + /** function preparing data for use by regression.js */ |
| 8 | + function regressionData(hist) { return hist.map(function(el, idx, arr) { return [idx, -el]; }); } |
| 9 | + |
| 10 | + /** Arrow component for use in BarChart */ |
| 11 | + var Arrow = React.createClass({displayName: 'Arrow', |
| 12 | + render: function () { |
| 13 | + var y = parseInt(this.props.y); |
| 14 | + var arr = "-600,100 200,100 -200,500 100,500 600,0 100,-500 -200,-500 200,-100 -600,-100 "; |
| 15 | + var arrColor = "#428bca"; |
| 16 | + if (this.props.dir === "UP") { |
| 17 | + arrColor = "#45cc40"; |
| 18 | + arr = "100,600 100,-200 500,200 500,-100 0,-600 -500,-100 -500,200 -100,-200 -100,600"; |
| 19 | + } |
| 20 | + if (this.props.dir === "RIGHT-UP") { |
| 21 | + arrColor = "#45cc40"; |
| 22 | + arr ="400,-400 -200,-400 -350,-250 125,-250 -400,275 -275,400 250,-125 250,350 400,200"; |
| 23 | + } |
| 24 | + if (this.props.dir === "DOWN") { |
| 25 | + arrColor = "#dc322f"; |
| 26 | + arr = "100,-600 100,200 500,-200 500,100 0,600 -500,100 -500,-200 -100,200 -100,-600"; |
| 27 | + } |
| 28 | + if (this.props.dir === "RIGHT-DOWN") { |
| 29 | + arrColor = "#dc322f"; |
| 30 | + arr = "400,400 -200,400 -350,250 125,250 -400,-275 -275,-400 250,125 250,-350 400,-200"; |
| 31 | + } |
| 32 | + var arrowTrans = "translate(" + this.props.x + ", "+ (y + 7) + ") scale(0.01) "; |
| 33 | + |
| 34 | + return ( React.DOM.polygon( {transform:arrowTrans, stroke:"none", fill:arrColor, points:arr}) ); } |
| 35 | + }); |
| 36 | + |
| 37 | + function now () { return new Date().getTime(); } |
| 38 | + |
| 39 | + /** single Bar component for assembling BarChart */ |
| 40 | + var Bar = React.createClass({displayName: 'Bar', |
| 41 | + getInitialState: function() { |
| 42 | + return {ratioHist: [], posHist: [], lastUpdate: now(), posArrDir: "RIGHT", ratioArrDir: "RIGHT-UP"} |
| 43 | + }, |
| 44 | + /** this function gets called right before rendering. component state can be modified here, not in render */ |
| 45 | + componentWillReceiveProps: function(props) { |
| 46 | + this.setState({ratioHist: _.last(this.state.ratioHist.concat(props.val / props.count), this.props.ratioChangeTweets)}); |
| 47 | + this.setState({posHist: _.last(this.state.posHist.concat(props.idx+1), 2)}); |
| 48 | + |
| 49 | + // slope of the fitted position change function |
| 50 | + var posSlope = regression('linear', regressionData(this.state.posHist)).equation[0]; |
| 51 | + if (posSlope === 0 && now() - this.state.lastUpdate > this.props.posChangeDur) { this.setState({posArrDir: "RIGHT"}); } |
| 52 | + if (posSlope > 0) { this.setState({posArrDir: "UP", lastUpdate: now()}); } |
| 53 | + if (posSlope < 0) { this.setState({posArrDir: "DOWN", lastUpdate: now()}); } |
| 54 | + |
| 55 | + // slope of the ratio (value / total value) change |
| 56 | + var ratioSlope = regression('linear', regressionData(this.state.ratioHist)).equation[0]; |
| 57 | + this.setState({ratioArrDir: (ratioSlope > 0) ? "RIGHT-UP" : "RIGHT-DOWN"}); |
| 58 | + }, |
| 59 | + /** adding terms to the search bar when clicking on any of the bars */ |
| 60 | + clickHandler: function(e) { BirdWatch.addSearchTerm(this.props.key); }, |
| 61 | + render: function () { |
| 62 | + var y = parseInt(this.props.y); |
| 63 | + var t = this.props.t; |
| 64 | + var w = parseInt(this.props.w); |
| 65 | + var val = this.props.val; |
| 66 | + |
| 67 | + var textX = w+145; |
| 68 | + var style = {fontWeight: 500, fill: "#DDD", textAnchor: "end"}; |
| 69 | + if (w < 50) { style.fill="#999"; textX+=26; style.textAnchor="start"; style.fontWeight=400} |
| 70 | + |
| 71 | + return React.DOM.g( {onClick:this.clickHandler}, |
| 72 | + React.DOM.text( {y:y+12, x:"137", stroke:"none", fill:"black", dy:".35em", textAnchor:"end"}, t), |
| 73 | + Arrow( {dir:this.state.posArrDir, y:y, x:146} ), |
| 74 | + Arrow( {dir:this.state.ratioArrDir, y:y, x:160} ), |
| 75 | + React.DOM.rect( {y:y, x:"168", height:"15", width:w, stroke:"white", fill:"#428bca"}), |
| 76 | + React.DOM.text( {y:y+12, x:textX, stroke:"none", style:style, dy:".35em"} , val) |
| 77 | + ) |
| 78 | + } |
| 79 | + }); |
| 80 | + |
| 81 | + /** BarChart component, renders all bar items. |
| 82 | + * Also renders interactive legend where the trend indicator durations can be configured */ |
| 83 | + var BarChart = React.createClass({displayName: 'BarChart', |
| 84 | + render: function() { |
| 85 | + var h = this.props.words.length * 15; |
| 86 | + var bars = this.props.words.map(function (bar, i, arr) { |
| 87 | + if (!bar) return ""; |
| 88 | + var y = i * 15; |
| 89 | + var w = bar.value / arr[0].value * (barChartElem.width() - 190); |
| 90 | + return Bar( {t:bar.key, y:y, w:w, key:bar.key, idx:i, val:bar.value, |
| 91 | + posChangeDur:this.refs.posChangeDur.getDOMNode().value, |
| 92 | + ratioChangeTweets:this.refs.ratioChangeTweets.getDOMNode().value} ); |
| 93 | + }.bind(this)); |
| 94 | + return React.DOM.div(null, |
| 95 | + React.DOM.svg( {width:"750", height:h}, |
| 96 | + React.DOM.g(null, |
| 97 | + bars, |
| 98 | + React.DOM.line( {transform:"translate(168, 0)", y:"0", y2:h, stroke:"#000000"}) |
| 99 | + ) |
| 100 | + ), |
| 101 | + React.DOM.p( {className:"legend"}, React.DOM.strong(null, "1st trend indicator:"), " position changes in last ", |
| 102 | + React.DOM.select( {defaultValue:"300000", ref:"posChangeDur"}, |
| 103 | + React.DOM.option( {value:"10000"}, "10 seconds"), |
| 104 | + React.DOM.option( {value:"30000"}, "30 seconds"), |
| 105 | + React.DOM.option( {value:"60000"}, "minute"), |
| 106 | + React.DOM.option( {value:"300000"}, "5 minutes"), |
| 107 | + React.DOM.option( {value:"600000"}, "10 minutes") |
| 108 | + ) |
| 109 | + ), |
| 110 | + React.DOM.p( {className:"legend"}, React.DOM.strong(null, "2nd trend indicator:"), " ratio change termCount / totalTermsCounted over last ", |
| 111 | + React.DOM.select( {defaultValue:"100", ref:"ratioChangeTweets"}, |
| 112 | + React.DOM.option( {value:"10"}, "10 tweets"), |
| 113 | + React.DOM.option( {value:"100"}, "100 tweets"), |
| 114 | + React.DOM.option( {value:"500"}, "500 tweets"), |
| 115 | + React.DOM.option( {value:"1000"}, "1000 tweets") |
| 116 | + ) |
| 117 | + ) |
| 118 | + ) |
| 119 | + } |
| 120 | + }); |
| 121 | + |
| 122 | + var barChartElem = $("#react-bar-chart"); |
| 123 | + var barChart = React.renderComponent(BarChart( {numPages:1, words:[]}), document.getElementById('react-bar-chart')); |
| 124 | + |
| 125 | + BirdWatch.updateBarchart = function (words) { barChart.setProps({words: _.take(words, 25) }); }; |
| 126 | +})(); |
0 commit comments