add history chart tooltip

ios/Podfile.lock

@@ -99,6 +99,8 @@ PODS:
     - React
   - RNGestureHandler (1.3.0):
     - React
+  - RNReanimated (1.2.0):
+    - React
   - RNSVG (9.7.1):
     - React
   - RNVectorIcons (6.6.0):
@@ -133,6 +135,7 @@ DEPENDENCIES:
   - ReactNativePermissions (from `../node_modules/react-native-permissions`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -196,6 +199,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/async-storage"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   RNSVG:
     :path: "../node_modules/react-native-svg"
   RNVectorIcons:
@@ -232,10 +237,11 @@ SPEC CHECKSUMS:
   ReactNativePermissions: f3beb8871251594a8ea2c6b19a3f8252d5c7379d
   RNCAsyncStorage: 2e2e3feb9bdadc752a026703d8c4065ca912e75a
   RNGestureHandler: 5329a942fce3d41c68b84c2c2276ce06a696d8b0
+  RNReanimated: 1b52415c4302f198cb581282a0166690bad62c43
   RNSVG: aac12785382e8fd4f28d072fe640612e34914631
   RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4
   yoga: c2c050f6ae6e222534760cc82f559b89214b67e2
 
-PODFILE CHECKSUM: e8ce6043399e756605611d98d30fc70891513c05
+PODFILE CHECKSUM: a33fee21df34dd31d58466891181bde1d617c1ce
 
 COCOAPODS: 1.7.4

screens/Private/HistoryScreen/HistoryScreen.js

@@ -4,9 +4,12 @@ import { TouchableOpacity, View, StyleSheet } from 'react-native';
 import { ScrollView, FlatList } from 'react-native-gesture-handler';
 import { theme, color } from '../../../constants/Styles';
 import { isIphoneX } from '../../../utils/isPhoneX';
-import { StackedAreaChart, BarChart, YAxis, XAxis } from 'react-native-svg-charts';
+import { StackedAreaChart, BarChart, YAxis, XAxis, AreaChart, Grid } from 'react-native-svg-charts';
 import * as shape from 'd3-shape';
-import { format } from 'date-fns';
+import { format, parse } from 'date-fns';
+import { Circle } from 'react-native-svg';
+import Tooltip from './Tooltip';
+import moment from 'moment';
 
 // mock data
 const data = require('./history.json');
@@ -27,6 +30,9 @@ export default class HistoryScreen extends React.Component {
 		isfilterVisible: false,
 		data: [],
 		data2: [],
+		tooltipX: null,
+		tooltipY: null,
+		tooltipIndex: null,
 	};
 	componentDidMount() {
 		this.sortAscen();
@@ -42,9 +48,27 @@ export default class HistoryScreen extends React.Component {
 		});
 	}
 	render() {
-		const { graphType, data, data2 } = this.state;
+		const { graphType, data, data2, tooltipX, tooltipY, tooltipIndex } = this.state;
+
+		const ChartPoints = ({ x, y, color }) =>
+			data.map((item, index) => (
+				<Circle
+					key={index}
+					cx={graphType === 'bar' ? x(index) + 6 : x(index)}
+					cy={y(item.data)}
+					r={7}
+					stroke="#ee5454"
+					fill="#fff"
+					onPress={() =>
+						this.setState({
+							tooltipX: index,
+							tooltipY: item.data,
+							tooltipIndex: index,
+						})
+					}
+				/>
+			));
 
-		const colors = ['#f49898', '#ee5454', '#f17676', '#f8baba'];
 		const keys = ['data'];
 		return (
 			<ScrollView style={[theme.container, theme.containerWithPadding]}>
@@ -81,17 +105,40 @@ export default class HistoryScreen extends React.Component {
 							contentInset={{ top: 10, bottom: 10 }}
 							data={data.map(x => x.data)}
 							svg={{ fill: '#f49898' }}
-						></BarChart>
+							spacingInner={0.75}
+						>
+							<ChartPoints />
+							{tooltipIndex && (
+								<Tooltip
+									tooltipX={tooltipX}
+									tooltipY={tooltipY}
+									index={tooltipIndex}
+									dataLength={data.length}
+								/>
+							)}
+
+							<Grid />
+						</BarChart>
 					)}
 					{graphType === 'area' && (
-						<StackedAreaChart
+						<AreaChart
 							style={{ flex: 1, marginLeft: 25 }}
 							contentInset={{ top: 10, bottom: 10 }}
 							data={data}
-							keys={keys}
-							colors={colors}
+							yAccessor={({ item, index }) => item.data}
+							xAccessor={({ item, index }) => index}
+							svg={{ fill: '#f49898' }}
 							curve={shape.curveMonotoneX}
-						></StackedAreaChart>
+						>
+							<ChartPoints />
+							<Tooltip
+								tooltipX={tooltipX}
+								tooltipY={tooltipY}
+								color="#003F5A"
+								index={tooltipIndex}
+								dataLength={data.length}
+							/>
+						</AreaChart>
 					)}
 
 					<YAxis

screens/Private/HistoryScreen/Tooltip.js

+import React from 'react';
+import { G, Rect, Text } from 'react-native-svg';
+
+import moment from 'moment';
+
+const Tooltip = ({ x, y, tooltipX, tooltipY, index, dataLength }) => {
+	let xAxis = 4;
+	if (dataLength > 4) {
+		if (index < 2) {
+			xAxis = 35;
+		} else if (index > dataLength - 2) {
+			xAxis = -20;
+		} else {
+			xAxis = 4;
+		}
+	}
+
+	return (
+		<G x={x(tooltipX) - 40} y={y(tooltipY)}>
+			<G y={tooltipY > 7 ? 20 : -29} x={xAxis}>
+				<Rect x={-2} y={0} height={22} width={80} fill="#ee5454" ry={10} rx={10}></Rect>
+				<Text x={6} y={14} stroke="white">
+					{tooltipY} KWh
+				</Text>
+			</G>
+		</G>
+	);
+};
+
+export default Tooltip;