Merge pull request #377 from Rostlab/d5bar

Got donut chart working :)
Rostlab · Apr 10, 2016 · 8306cd5 · 8306cd5
2 parents 4ee820f + 663cf6a
commit 8306cd5
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 4 deletions.
diff --git a/app/actions/TwitterSentimentsActions.js b/app/actions/TwitterSentimentsActions.js
@@ -36,7 +36,7 @@ var TwitterSentimentsActions = {
     },
     loadCharacterSentiment: function(characterId) {
         Api
-            .get('d4/character', {id: characterId})
+            .get('d4/character/' + characterId)
             .then(function (sentiments) {
                 AppDispatcher.handleServerAction({
                     actionType: Constants.RECEIVE_TWITTER_CHARACTER_SENTIMENT,

diff --git a/app/components/public/Characters/Characters.jsx b/app/components/public/Characters/Characters.jsx
@@ -5,11 +5,14 @@ let {Component} = React;
 import $ from 'jquery';
 import './Characters.css';
 import { Row, Col, Image, ProgressBar, Glyphicon } from 'react-bootstrap';
+import {Chart} from 'react-google-charts';
 
 import MapComp from '../../common/MapComp/MapComp.jsx';
 import Store from '../../../stores/CharactersStore';
 import Actions from '../../../actions/CharactersActions';
 import CharacterDetails from '../../common/CharacterDetails/CharacterDetails.jsx';
+import SentimentStore from '../../../stores/TwitterSentimentsStore';
+import SentimentActions from '../../../actions/TwitterSentimentsActions';
 import tombstone from './rip_tombstone.png';
 
 export default class Character extends Component {
@@ -20,7 +23,11 @@ export default class Character extends Component {
             character: Store.getCharacter(),
             plod: 0,
             plodArff: '0',
-            plodText: ''
+            plodText: '',
+            sentiment: {
+                positive: 0,
+                negative: 0
+            }
         };
         this._onChange = this._onChange.bind(this);
     }
@@ -31,6 +38,7 @@ export default class Character extends Component {
 
     componentDidMount() {
         Actions.loadCharacter(decodeURIComponent(this.props.params.id));
+        SentimentActions.loadCharacterSentiment(decodeURIComponent(this.props.params.id));
     }
 
     componentWillUnmount(){
@@ -40,7 +48,8 @@ export default class Character extends Component {
     _onChange() {
         const character = Store.getCharacter();
         this.setState({
-            character: character
+            character: character,
+            sentiment: SentimentStore.getCharacterSentiment()
         });
 
         const check = !character.dateOfDeath && character.gotplod && character.gotarffplod;
@@ -108,7 +117,48 @@ export default class Character extends Component {
                     <Col md={8} mdOffset={2}>
                         <h2>People on Twitter say</h2>
                         <svg id="chart" width="100%" height="400"></svg>
-                    </Col>  
+
+                    </Col>
+                </Row>
+                <Row>
+                    <Col  md={8} mdOffset={2}>
+                        <Chart
+                          chartType="PieChart"
+                          height={"400px"}
+                          width={"100%"}
+                          options = {{
+                                    title: 'Total tweets',
+                                    pieHole: 0.4,
+                                    backgroundColor: {
+                                        fill: 'transparent',
+                                        stroke: 'transparent',
+                                        strokeWidth: '0'
+                                    },
+                                    colors: ['#6AAA1F','rgb(198, 61, 23)'],
+                                    legend: {
+                                        textStyle: { color: 'white'}
+                                    },
+                                    titleTextStyle: {
+                                        color: 'white'
+                                    },
+                                    chartArea: {
+                                        backgroundColor: {
+                                            stroke: 'transparent',
+                                            strokeWidth: '0'
+                                        },
+                                        width: '80%',
+                                        height: '80%',
+                                        left: '10px'
+                                    },
+                                    pieSliceBorderColor: 'transparent'
+                                   }}
+                          data={ [
+                                      ['Task', 'Hours per Day'],
+                                      ['Positive sentiments',     this.state.sentiment.positive || 0],
+                                      ['Negative sentiments',      this.state.sentiment.negative || 0]
+                                  ]}
+                        />
+                    </Col>
                 </Row>
 
                 </div>

diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
     "react": "^0.14.7",
     "react-bootstrap": "^0.28.3",
     "react-dom": "^0.14.7",
+    "react-google-charts": "^0.2.1",
     "react-router": "^2.0.0",
     "react-router-bootstrap": "^0.20.1",
     "react-transform-hmr": "^1.0.2",