Merge b5cf740 into e483c1a

src/components/SentimentAnalysisGraph.js

@@ -1,44 +1,53 @@
 import React, {Component} from 'react';
 import {VictoryAxis, VictoryBar, VictoryChart} from 'victory';
 
-const width = 30;
-const barFontSize = 7;
-const axisFontSize = 25;
+const totalValue = 100;
+const durationValue = 2000;
 export default class SentimentAnalysisGraph extends Component {
 	static displayName = 'SentimentAnalysisGraph';
 
 	static propTypes = {
 		posValue: React.PropTypes.number,
-		negValue: React.PropTypes.number,
-		barHeight: React.PropTypes.number
+		width: React.PropTypes.number,
+		isAnimated: React.PropTypes.bool
 	};
 
 	static defaultProps = {
-		posValue: 90,
-		negValue: 10,
-		barHeight: 250
+		posValue: 68,
+		width: 30,
+		isAnimated: false
 	};
 
 	render() {
+		const message = `Feedback is ${this.props.posValue}% positive.`;
 		return (
-			<VictoryChart domain={{y: [0, 100]}} height={this.props.barHeight}>
+			<VictoryChart domain={{y: [0, 100]}}>
 				<VictoryAxis
-					style={{axisLabel: {fontSize: axisFontSize}}}
-					tickValues={[' ', '', 'Positive', 'Negative', '', '']}
-					label = "Sentiment Anaylysis Report"/>
-
+					label={message}
+					style={{
+						axis: {stroke: 'none'},
+						tickLabels: {fill: 'none'},
+						axisLabel: {fontSize: 10, padding: 15}
+					}}/>
+				<VictoryBar
+					horizontal
+					style={{
+						data: {width: this.props.width}
+					}}
+					data={[
+						{x: 1, y: totalValue, fill: 'darkred'}
+					]}/>
 				<VictoryBar
-					animate={{velocity: 0.01}}
-					labels={[this.props.posValue + '%', this.props.negValue + '%']}
+					animate={{velocity: 0.1,
+						onLoad:{duration: this.props.isAnimated ? durationValue : 0}}}
+					horizontal
 					style={{
-						data: {width: width},
-						labels: {fontSize: barFontSize}
+						data: {width: this.props.width}
 					}}
 					data={[
-						{x: 3, y: this.props.posValue},
-						{x: 4, y: this.props.negValue}
+						{x: 1, y: this.props.posValue, fill: 'green'}
 					]}/>
 			</VictoryChart>
-		);
+		)
 	}
 }

src/components/__tests__/SentimentAnalysisGraph.test.js

@@ -3,30 +3,45 @@ import SentimentAnalysisGraph from './../SentimentAnalysisGraph';
 import {shallow} from 'enzyme';
 
 describe('<SentimentAnalysisGraph />', () => {
-	it('Sum of positive value and negative value should be 100 with provided props', () => {
-		const wrapper = shallow(<SentimentAnalysisGraph posValue={60} negValue={40}/>);
-		const posValue = wrapper.node.props.children[1].props.data[0].y;
-		const negValue = wrapper.node.props.children[1].props.data[1].y;
-		expect(posValue + negValue).toEqual(100);
+	it('should have a positive value of 68 by default', () => {
+		const wrapper = shallow(<SentimentAnalysisGraph />);
+		const posValue = wrapper.node.props.children[2].props.data[0].y;
+		expect(posValue).toEqual(68);
 	});
 
-	it('Default positive value and negative value shoule be 90 and 10 respectively', () => {
-		const wrapper = shallow(<SentimentAnalysisGraph />);
-		const posValue = wrapper.node.props.children[1].props.data[0].y;
-		const negValue = wrapper.node.props.children[1].props.data[1].y;
+	it('should have a positive value of 90 with provided props', () => {
+		const wrapper = shallow(<SentimentAnalysisGraph posValue={90}/>);
+		const posValue = wrapper.node.props.children[2].props.data[0].y;
 		expect(posValue).toEqual(90);
-		expect(negValue).toEqual(10);
 	});
 
-	it('Default bar height should be 250', () => {
+	it('should always have a total value of 100', () => {
+		const wrapper = shallow(<SentimentAnalysisGraph />);
+		const totalValue = wrapper.node.props.children[1].props.data[0].y;
+		expect(totalValue).toEqual(100);
+	});
+
+	it('should have a bar width of 30 by default', () => {
+		const wrapper = shallow(<SentimentAnalysisGraph />);
+		const width = wrapper.node.props.children[2].props.style.data.width;
+		expect(width).toEqual(30);
+	});
+
+	it('should have a bar width of 70 with provided props', () => {
+		const wrapper = shallow(<SentimentAnalysisGraph width={70} />);
+		const width = wrapper.node.props.children[2].props.style.data.width;
+		expect(width).toEqual(70);
+	});
+
+	it('should not add any animation to the bar by default', () => {
 		const wrapper = shallow(<SentimentAnalysisGraph />);
-		const barHeight = wrapper.node.props.height;
-		expect(barHeight).toEqual(250);
+		const durationValue = wrapper.node.props.children[2].props.animate.onLoad.duration;
+		expect(durationValue).toEqual(0);
 	});
 
-	it('Bar height should be 350 with provided prop barHeight = 350', () => {
-		const wrapper = shallow(<SentimentAnalysisGraph barHeight={350}/>);
-		const barHeight = wrapper.node.props.height;
-		expect(barHeight).toEqual(350);
+	it('should add animation to the bar with duration of 2000', () => {
+		const wrapper = shallow(<SentimentAnalysisGraph isAnimated={true} />);
+		const durationValue = wrapper.node.props.children[2].props.animate.onLoad.duration;
+		expect(durationValue).toEqual(2000);
 	});
 });