add line chart dot and gesture handler.

Author: Obooman

.dockerignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+.DS_Store

charts/Bar.js

@@ -45,7 +45,7 @@ export default class Bar extends Component{
 	  getTooltipBac.apply(this);
 
 	  this.state = {
-	  	highlight:-1,
+	  	active:-1,
 	  	crossHair:{}
 	  };
 	}
@@ -119,7 +119,6 @@ export default class Bar extends Component{
 					{ this.getBars() }
 					{ this.getCoords() }
 					{ this.getTitle() }
-					{ this.getSubtitle() }
 					{ this.getCrossHair() }
 					{ this.getTooltips() }
 				</Surface>
@@ -140,17 +139,17 @@ export default class Bar extends Component{
 					key = { index }
 					d={ this.getBarD(data,index) }
 					fill={
-						this.state.highlight == index ?
+						this.state.active == index ?
 						data.activeFill : 
 						data.normalFill
 					}
 					stroke={
-						this.state.highlight == index ?
+						this.state.active == index ?
 						data.activeStroke : 
 						data.normalStroke
 					}
 
-					strokeWidth = {2}
+					strokeWidth = {1}
 
 					strokeCap="butt"
 					strokeJoin="miter"
@@ -215,28 +214,28 @@ export default class Bar extends Component{
 			const index = parseInt(relativeX/itemWidth);
 
 			this.setState({
-				highlight:index
+				active:index
 			})
 		}
 	}
 
 	getTooltips(){
 		const {
-			highlight
+			active
 		} = this.state;
 
-		if( highlight < 0 || highlight > this.props.series.length-1){
+		if( active < 0 || active > this.props.series.length-1){
 			return <Shape/>
 		}
 
 		const {
 			xAxis,yAxis
-		} = this.barPos[highlight]
+		} = this.barPos[active]
 
-		const tooltipText = this.props.tooltip.text(highlight,this.props.series[highlight].data);
+		const tooltipText = this.props.tooltip.text(active,this.props.series[active].data);
 		const approximateTextLength = 8 * tooltipText.length;
 
-		const width = approximateTextLength + 10;
+		const width = approximateTextLength;
 		const height = 8 + 10;
 
 		let xMiddle = xAxis+(this.itemWidth*0.3);
@@ -256,7 +255,7 @@ export default class Bar extends Component{
 			y:yMiddle - height/2,
 			width,
 			height,
-			r:12
+			r:5
 		})
 	}
 
@@ -275,7 +274,7 @@ export default class Bar extends Component{
 				x:-100,
 				y:-100,
 			},
-			highlight:-1
+			active:-1
 		})
 	}
 }

charts/Doughnut.js

@@ -111,7 +111,6 @@ export default class Doughnut extends Component{
 				<Surface width={ width } height={ height } visible={true}>
 					{ this.getDoughnut() }
 					{ this.getTitle() }
-					{ this.getSubtitle() }
 					{ this.getTooltips() }
 				</Surface>
 			</GestureAware>

charts/Line.js

@@ -25,27 +25,25 @@ const {
 import {
 	attachTitleHandlers,
 	enableCrosshair,
-	enableCoords
+	enableCoords,
+	getTooltipBac
 } from './subparts'
 
-console.log( {
-	attachTitleHandlers,
-	enableCrosshair,
-	enableCoords
-}  )
-
 export default class Line extends Component{
 	constructor(props) {
 	  super(props);
 
 	  attachTitleHandlers.apply(this);
 	  enableCrosshair.apply(this);
+	  getTooltipBac.apply(this);
 	  enableCoords('cartesian').apply(this);
 
 	  this.state = {
-	  	highlight:-1,
-	  	crossHair:{}
+	  	active:-1
 	  };
+
+	  this.points = [];
+	  this.size = 4;
 	}
 
 	static propTypes = {
@@ -97,9 +95,10 @@ export default class Line extends Component{
 				>
 				<Surface width={this.props.width} height={this.props.height} visible={true}>
 					{ this.getLines() }
+					{ this.getDots() }
 					{ this.getCoords() }
 					{ this.getTitle() }
-					{ this.getSubtitle() }
+					{ this.getTooltips() }
 					{ this.getCrossHair() }
 				</Surface>
 			</GestureAware>
@@ -118,11 +117,11 @@ export default class Line extends Component{
 		return (
 			<Group>
 				<Shape d={this.getLinesD(true)} 
-					stroke="#4d4d4d"
+					stroke={ this.props.series[0].normalStroke }
 				></Shape>
 				<Shape d={this.getLinesD()} 
 					fill={new LinearGradient({
-				    	'.1': 'rgb(12,20,12)',
+				    	'.1': "#4990E2",
 				    	'0.5': 'rgba(255,255,255,0)'
 				  	},
 				  	"0","0","0",(height-bottom)*2
@@ -150,14 +149,15 @@ export default class Line extends Component{
 			const containerWidth = width-left-right;
 			const containerHeight = height-top-bottom;
 
-			// const progress = this.state[`progress${index}`] || 0;
-			// const xAxis = left + index*containerWidth/series.length
-			// const yAxis = containerHeight - (data/yRange)*containerHeight*progress + top
-
+			const progress = this.state[`progress${index}`] || 0;
+			const xAxis = left + index*containerWidth/series.length
+			const yAxis = containerHeight - (data/yRange)*containerHeight*progress + top
 
+			/*
 			const progress = this.state[`progress${series.length - index}`] || 0;
 			const xAxis = left + (index*containerWidth/series.length)*progress
 			const yAxis = containerHeight - (data/yRange)*containerHeight + top
+			*/
 
 			if( index == 0 ){
 				path.moveTo(xAxis,yAxis);
@@ -166,6 +166,11 @@ export default class Line extends Component{
 
 			path.lineTo(xAxis,yAxis);
 
+			this.points[index] = [
+				xAxis,
+				yAxis
+			]
+
 			if( !stroke && index == series.length - 1 ){
 				path.lineTo( xAxis, height - bottom)
 					.lineTo( left, height - bottom)
@@ -176,6 +181,44 @@ export default class Line extends Component{
 		return path;
 	}
 
+	getDots = () => {
+		return (
+			this.points.map(([x,y],index) => {
+				const active = this.state.active == index;
+				const { size } = this;
+				
+				const {
+					normalFill,
+					normalStroke,
+					activeFill,
+					activeStroke
+				} = this.props.series[0];
+
+				// x -= size/2;
+				// y -= size/2;
+
+				return (
+					<Shape d={
+						// new Path()
+						// 	.moveTo(x,y)
+						// 	.lineTo(x+size,y)
+						// 	.lineTo(x+size,y+size)
+						// 	.lineTo(x,y+size)
+						// 	.close()
+
+						new Path()
+							.moveTo(x-size/2,y)
+							.arcTo(x+size/2,y,size/2,size/2)
+							.arcTo(x-size/2,y,size/2,size/2)
+							.close()
+					} 
+					fill={ active ? activeFill : normalFill }
+					key={`dot${index}`}/>
+				)
+			})
+		)
+	}
+
 	onStart = (ev) => {
 		if( !this.props.disableCorssHair ) this.setCrossHair(ev);
 	}
@@ -193,24 +236,39 @@ export default class Line extends Component{
 			}
 		})
 
-		const {
-			series,width,height
-		} = this.props
+		const { size } = this;
 
-		const {
-			left,top,right,bottom
-		} = this.padding
+		this.points.forEach(([x,y],index) => {
+			if( ev.moveX > x - size/2 &&  ev.moveX < x + size/2){
+				this.setState({
+					active:index
+				})
+			}
+		})
+	}
 
-		const itemWidth = (width-left-right)/series.length;
-		const relativeX = ev.moveX - left;
+	getTooltips = () => {
+		const { active } = this.state;
 
-		if( relativeX%itemWidth > itemWidth*0.2 && relativeX%itemWidth < itemWidth*0.8 ){
-			const index = parseInt(relativeX/itemWidth);
+		if( active < 0 ) return <Shape/>;
 
-			this.setState({
-				highlight:index
-			})
-		}
+		const activeData = this.props.series[active].data;
+
+		const tooltipText = this.props.tooltip.text(activeData,active);
+
+		const approximateTextLength = 10 * tooltipText.length;
+
+		const width = approximateTextLength + 2;
+		const height = 10 + 2;
+
+		return this.getTooltipBac({
+			tooltipText,
+			x:this.points[active][0] - width/2,
+			y:this.points[active][1] - 10 - height/2                           ,
+			width,
+			height,
+			r:4
+		})
 	}
 
 	onEnd = () => {
@@ -221,7 +279,7 @@ export default class Line extends Component{
 				x:-100,
 				y:-100,
 			},
-			highlight:-1
+			active:-1
 		})
 	}
 }

charts/Pie.js

@@ -100,7 +100,6 @@ export default class Pie extends Component{
 				<Surface width={this.props.width} height={this.props.height} visible={true}>
 					{ this.getPies() }
 					{ this.getTitle() }
-					{ this.getSubtitle() }
 					{ this.getTooltips() }
 				</Surface>
 			</GestureAware>

charts/subparts/coords/cartesian.js

@@ -46,7 +46,7 @@ export default function enableCoords(){
 			(this.props.title ? 50 : 0) + 
 			( this.props.subtitle ? 50 : 0) + 20,
 		right:20,
-		bottom:50,
+		bottom:20,
 		left:20
 	}
 }