- Refactor Graph for better performance and into SectionList

.babelrc

@@ -1,13 +1,13 @@
 {
 	"presets" : [
-		"babel-preset-expo"	,
-		"react-native-stage-0/decorator-support"
-	],
-	"env" : {
+		"babel-preset-expo"
+	] ,
+	"env" 		: {
 		"development" : {
-		"plugins" : [
-			"transform-react-jsx-source"
-		]
+			"plugins" 	: [
+				"transform-react-jsx-source"
+			]
+		}
 	}
 }
-}
+  

actions/graphs.js

@@ -66,6 +66,12 @@ export default {
 
 				});
 		}
-	}
+	} ,
 
+	reset () {
+
+		return {
+			type 	: constants.reset
+		};
+	}
 };

app.json

@@ -4,10 +4,10 @@
 		"description" : "The latest Bull on crytpo coins and blockchain tokens.",
 		"slug" : "bullet",
 		"privacy" : "public",
-		"sdkVersion" : "18.0.0",
+		"sdkVersion" : "20.0.0",
 		"version" : "2.0.1",
 		"orientation" : "portrait",
-		"primaryColor" : "#333",
+		"primaryColor" : "#000",
 		"icon" : "./assets/icons/application.png",
 		"notification" : {
 			"icon" : "./assets/icons/notification-icon.png",

components/graphs/tree.js

@@ -1,6 +1,6 @@
 
 import 		React 			from 'react';
-import { 	ListView ,
+import { 	SectionList ,
 			Text 		,
 			View		} 	from 'react-native';
 import { 	scaleLinear } 	from 'd3-scale';
@@ -10,65 +10,64 @@ import { 	max ,
 import 		Error 			from '../errors/ajax';
 import 		Loader 			from '../utilities/loader';
 import 		AxisY 			from './axis-y';
-import 		time 			from '../../constants/time';
 import 		device 			from '../../properties/device';
+import 		colour 			from '../../utilities/colors';
 import 		numbers 		from '../../utilities/numbers';
 import 		analytics 		from '../../utilities/analytics';
 import 		style 			from '../../styles/graphs';
 
 export default class ChartTree extends React.Component {
 
 	constructor ( props ) {
-
-		super ( props );
-
-		this.datasource = new ListView.DataSource ({
-			getSectionData 			: ( data , section 			) => data [ section ] 				,
-			getRowData 				: ( data , section , row 	) => data [ section + ':' + row ] 	,
-			rowHasChanged 			: ( old , update 			) => old !== update 				,
-			sectionHeaderHasChanged : ( old , update 			) => old !== update
-		});
+		super 	( props );
 
 		this.header 	= this.header.bind 		( this 		);
 		this.row 		= this.row.bind 		( this 		);
 		this.section 	= this.section.bind 	( this 		);
 		this.format 	= timeFormat 			( '%B, %Y' 	);
 	}
 
-	data () {
+	sections () {
 
-		let blob 		= {} ,
-			sections 	= [] ,
-			rows 		= [] ;
+		let sections = [];
 
-		this.props.data.forEach (( item , index ) => {
+		this.props.data.reverse ().forEach (( data , index ) => {
 
-			let section;
-
-			if ( index === 0 || item [ 0 ] - blob [ sections [ 0 ]] > time.month ) {
-
-				sections.unshift 	( index );
-				rows.unshift 		([]);
+			const 	scaled 	= parseInt 		( this.scales.height ( data [ 1 ]) , 10 ) 	,
+					title 	= this.format 	( data [ 0 ]) 								,
+					item 	= {
+						key 	: data [ 0 ] + ':' + index ,
+						value 	: scaled 
+					};
+
+			if ( 
+				scaled 
+				&& ( 
+					index === 0 || 
+					sections [ sections.length - 1 ].title !== title
+				)
+			) {
 
-				blob [ index ] 	= item [ 0 	];
-				section 		= index + ':' + index;
+				sections.push ({
+					data 	: [ item ] ,
+					title 	: title
+				});
 			}
 
-			else {
+			else if ( scaled ) {
 
-				section = sections [ 0 ] + ':' + index;
+				sections [ sections.length - 1 ].data.push ( item );
 			}
-			rows [ 0 ].unshift ( index );
-			blob [ section ] = parseInt ( this.scales.height ( item [ 1 ]) , 10 );
 		});
 
-		return this.datasource.cloneWithRowsAndSections ( blob , sections , rows );
+		return sections;
 	}
 
 	header () {
 
 		const 	language 	= this.props.language 	,
 				theme 		= this.props.theme 		;
+
 		let 	data 		= this.props.data 		,
 				values 		= {} 					;
 
@@ -92,53 +91,69 @@ export default class ChartTree extends React.Component {
 		);
 	}
 
-	row ( item , section , row , highlight ) {
+	row ({ 
+		index 	,
+		item 	,
+		section
+	}) {
 
 		const 	theme 		= this.props.theme 	,
-				appearance 	= style ( theme ) 	;
-
+				appearance 	= style ( theme ) 	,
+				climbing 	= section.data [ index + 1 ] 	? item.value >= section.data [ index + 1 ].value 	: true 				,
+				pigment 	= climbing 						? theme.positive 									: theme.negative 	,
+				beginning 	= ! index 							,
+				end 		= index === section.data.length - 1 ,
+				left 		= beginning ? 2 : 1 				,
+				right 		= end 		? 2 : 1 				;
+
 		return ( 
-			<View 	style = { appearance.tree.bar.view }>
+			<View 	style = {{
+				...appearance.tree.bar.view ,
+				...{
+					paddingLeft 	: left ,
+					paddingRight 	: right
+				}
+			}}>
 				<View 
 					style = {{
 						...appearance.tree.bar.highlight , 
 						...{
-							height : item
+							backgroundColor : pigment 							,
+							borderColor 	: colour.shade ( pigment , -0.25 ) 	,
+							paddingTop 		: item.value
 						}
 					}}
 				/>
 			</View>
 		);
 	}
 
-	section ( section ) {
+	section ({ section }) {
 
 		const 	theme 		= this.props.theme 	,
 				appearance 	= style ( theme ) 	;
 
 		return (
-			<View style 	= { appearance.tree.section.view }>
-				<Text style = { appearance.tree.section.text }>
-					{ this.format ( section )}
+			<View 		style = { appearance.tree.section.view 	}>
+				<Text	style = { appearance.tree.section.text 	}>
+					{ section.title }
 				</Text>
 			</View>
 		);
 	}
 
 	setScales () {
 
-		const data = this.props.data;
-
 		this.scales = {
 
 			height : scaleLinear ()
 				.domain ([ 
 					0 ,
-					max ( data , ( item ) => item [ 1 ])
+					max ( this.props.data , ( item ) => item [ 1 ])
 				])
 				.range ([ 
 					0 , 
-					150 
+					device.height / 3
 				])
 		};
 	}
@@ -167,40 +182,33 @@ export default class ChartTree extends React.Component {
 
 			analytics.screen 	( 'graph:' + name + ':500' 	);
 			return 				(
-				<Error 
-					error 	= { this.props.error 				}
-					press 	= { this.props.refresh 				}
-					text 	= { language.errors.ajax 			}
-					theme 	= { theme 							}
-				/>
+				<View style = {{
+					height 	: Math.round ( device.height / 3 ) + 8
+				}}>
+					<Error 
+						error 	= { this.props.error 		}
+						press 	= { this.props.refresh 		}
+						text 	= { language.errors.ajax 	}
+						theme 	= { theme 					}
+					/>
+				</View>
 			);
 		}
 
 		this.setScales 	();
 		return 			(
-
 			<View style = { appearance.tree.view }>
-
 				{ this.header ()}
-
-				<ListView
-					contentOffset 					= {{ x : 1 							}}
-					enableEmptySections 			= { true 							}
-					dataSource 						= { this.data 						()}
+				<SectionList 
 					horizontal 						= { true 							}
 					initialNumToRender 				= { Math.round ( device.width / 5 	)}
-					onChangeVisibleRows 			= {() => {
-
-						analytics.event 			( 'graph' , 'scroll' , name 		);
-					}}
-					renderRow 						= { this.row 						}
-					renderSectionHeader  			= { this.section 					}
+					renderItem 						= { this.row 						}
+					renderSectionHeader 			= { this.section 					}
+					sections 						= { this.sections 					()}	
 					showsHorizontalScrollIndicator 	= { false 							}
 					showsVerticalScrollIndicator 	= { false 							}
 					style 							= { appearance.tree.chart 			}
-					theme 							= { theme 							}
 				/>
-
 			</View>
 		);
 

constants/graphs.js

@@ -6,5 +6,6 @@
 export default {
 	error 	: 'graphs:error' 	, 	
 	get 	: 'graphs:get' 		,
+	reset 	: 'graphs:reset' 	,
 	set 	: 'graphs:set'
 };

package.json

@@ -16,9 +16,9 @@
     "d3-scale": "^1.0.6",
     "d3-time": "^1.0.7",
     "d3-time-format": "^2.0.5",
-    "expo": "^18.0.4",
+    "expo": "^20.0.0",
     "react": "16.0.0-alpha.12",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-18.0.1.tar.gz",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-20.0.0.tar.gz",
     "react-native-modal": "^3.1.0",
     "react-navigation": "^1.0.0-beta.11",
     "react-redux": "^5.0.5",
@@ -27,6 +27,7 @@
     "redux-thunk": "^2.2.0"
   },
   "devDependencies": {
-    "jest-expo": "~18.0.0"
+	"jest-expo": "~20.0.0" ,
+	"sentry-expo" : "~1.6.0"
   }
 }

properties/languages/chinese.js

@@ -130,7 +130,7 @@ export default {
 
 			share 			: {
 				title 		: 'Cryptobullography' ,
-				summary 	: '找到最新的斗牛市场上最大的噪音！'
+				summary 	: '找到最新的斗牛市场上最大的噪音！#Cryptobullography'
 			} ,
 
 			theme 			: {

properties/languages/english.js

@@ -130,7 +130,7 @@ export default {
 
 			share 			: {
 				title 		: 'Cryptobullography' ,
-				summary 	: 'Find the latest bull on the cryptocurrency market making the biggest noise!'
+				summary 	: 'Find the latest bull on the cryptocurrency market making the biggest noise! #Cryptobullography'
 			} ,
 
 			theme 			: {

properties/languages/french.js

@@ -130,7 +130,7 @@ export default {
 
 			share 			: {
 				title 		: 'Cryptobullographie' ,
-				summary 	: 'Trouvez le dernier Bull sur le marché de la cryptocurrence qui fait le plus gros bruit!'
+				summary 	: 'Trouvez le dernier Bull sur le marché de la cryptocurrence qui fait le plus gros bruit! #Cryptobullography'
 			} ,
 
 			theme 			: {

properties/languages/german.js

@@ -130,7 +130,7 @@ export default {
 
 			share 			: {
 				title 		: 'Cryptobullography' ,
-				summary 	: 'Finde den neuesten Stier auf dem Krypto-Markt, der den größten Lärm macht!'
+				summary 	: 'Finde den neuesten Stier auf dem Krypto-Markt, der den größten Lärm macht! #Cryptobullography'
 			} ,
 
 			theme 			: {

properties/languages/malay.js

@@ -130,7 +130,7 @@ export default {
 
 			share 			: {
 				title 		: 'Cryptobullography' ,
-				summary 	: 'Cari lembu terbaru di pasaran cryptocurrency yang membuat bunyi terbesar!'
+				summary 	: 'Cari lembu terbaru di pasaran cryptocurrency yang membuat bunyi terbesar! #Cryptobullography'
 			} ,
 
 			theme 			: {

properties/languages/turkish.js

@@ -130,7 +130,7 @@ export default {
 
 			share 			: {
 				title 		: 'Cryptobullography' ,
-				summary 	: 'En büyük gürültüyü veren kriptokrasi pazarında en son boğayı bulun!'
+				summary 	: 'En büyük gürültüyü veren kriptokrasi pazarında en son boğayı bulun! #Cryptobullography'
 			} ,
 
 			theme 			: {

properties/languages/vietnamese.js

@@ -130,7 +130,7 @@ export default {
 
 			share 			: {
 				title 		: 'Cryptobullography' ,
-				summary 	: 'Tìm con bò mới nhất trên thị trường cryptocurrency làm cho tiếng ồn lớn nhất!'
+				summary 	: 'Tìm con bò mới nhất trên thị trường cryptocurrency làm cho tiếng ồn lớn nhất! #Cryptobullography'
 			} ,
 
 			theme 			: {