Skip to content

S
safetcut-app
Commit b2b7dfee by Tonk
Options

add history chart tooltip

parent 93413610
Showing with 93 additions and 10 deletions
ios/Podfile.lock
...@@ -99,6 +99,8 @@ PODS: ...@@ -99,6 +99,8 @@ PODS:
- React - React
- RNGestureHandler (1.3.0): - RNGestureHandler (1.3.0):
- React - React
- RNReanimated (1.2.0):
- React
- RNSVG (9.7.1): - RNSVG (9.7.1):
- React - React
- RNVectorIcons (6.6.0): - RNVectorIcons (6.6.0):
...@@ -133,6 +135,7 @@ DEPENDENCIES: ...@@ -133,6 +135,7 @@ DEPENDENCIES:
- ReactNativePermissions (from `../node_modules/react-native-permissions`) - ReactNativePermissions (from `../node_modules/react-native-permissions`)
- "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)" - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
- RNGestureHandler (from `../node_modules/react-native-gesture-handler`) - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
- RNReanimated (from `../node_modules/react-native-reanimated`)
- RNSVG (from `../node_modules/react-native-svg`) - RNSVG (from `../node_modules/react-native-svg`)
- RNVectorIcons (from `../node_modules/react-native-vector-icons`) - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
- yoga (from `../node_modules/react-native/ReactCommon/yoga`) - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
...@@ -196,6 +199,8 @@ EXTERNAL SOURCES: ...@@ -196,6 +199,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/@react-native-community/async-storage" :path: "../node_modules/@react-native-community/async-storage"
RNGestureHandler: RNGestureHandler:
:path: "../node_modules/react-native-gesture-handler" :path: "../node_modules/react-native-gesture-handler"
RNReanimated:
:path: "../node_modules/react-native-reanimated"
RNSVG: RNSVG:
:path: "../node_modules/react-native-svg" :path: "../node_modules/react-native-svg"
RNVectorIcons: RNVectorIcons:
...@@ -232,10 +237,11 @@ SPEC CHECKSUMS: ...@@ -232,10 +237,11 @@ SPEC CHECKSUMS:
ReactNativePermissions: f3beb8871251594a8ea2c6b19a3f8252d5c7379d ReactNativePermissions: f3beb8871251594a8ea2c6b19a3f8252d5c7379d
RNCAsyncStorage: 2e2e3feb9bdadc752a026703d8c4065ca912e75a RNCAsyncStorage: 2e2e3feb9bdadc752a026703d8c4065ca912e75a
RNGestureHandler: 5329a942fce3d41c68b84c2c2276ce06a696d8b0 RNGestureHandler: 5329a942fce3d41c68b84c2c2276ce06a696d8b0
RNReanimated: 1b52415c4302f198cb581282a0166690bad62c43
RNSVG: aac12785382e8fd4f28d072fe640612e34914631 RNSVG: aac12785382e8fd4f28d072fe640612e34914631
RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4 RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4
yoga: c2c050f6ae6e222534760cc82f559b89214b67e2 yoga: c2c050f6ae6e222534760cc82f559b89214b67e2
PODFILE CHECKSUM: e8ce6043399e756605611d98d30fc70891513c05 PODFILE CHECKSUM: a33fee21df34dd31d58466891181bde1d617c1ce
COCOAPODS: 1.7.4 COCOAPODS: 1.7.4
screens/Private/HistoryScreen/HistoryScreen.js
...@@ -4,9 +4,12 @@ import { TouchableOpacity, View, StyleSheet } from 'react-native'; ...@@ -4,9 +4,12 @@ import { TouchableOpacity, View, StyleSheet } from 'react-native';
import { ScrollView, FlatList } from 'react-native-gesture-handler'; import { ScrollView, FlatList } from 'react-native-gesture-handler';
import { theme, color } from '../../../constants/Styles'; import { theme, color } from '../../../constants/Styles';
import { isIphoneX } from '../../../utils/isPhoneX'; 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 * 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 // mock data
const data = require('./history.json'); const data = require('./history.json');
...@@ -27,6 +30,9 @@ export default class HistoryScreen extends React.Component { ...@@ -27,6 +30,9 @@ export default class HistoryScreen extends React.Component {
isfilterVisible: false, isfilterVisible: false,
data: [], data: [],
data2: [], data2: [],
tooltipX: null,
tooltipY: null,
tooltipIndex: null,
}; };
componentDidMount() { componentDidMount() {
this.sortAscen(); this.sortAscen();
...@@ -42,9 +48,27 @@ export default class HistoryScreen extends React.Component { ...@@ -42,9 +48,27 @@ export default class HistoryScreen extends React.Component {
}); });
} }
render() { 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']; const keys = ['data'];
return ( return (
<ScrollView style={[theme.container, theme.containerWithPadding]}> <ScrollView style={[theme.container, theme.containerWithPadding]}>
...@@ -81,17 +105,40 @@ export default class HistoryScreen extends React.Component { ...@@ -81,17 +105,40 @@ export default class HistoryScreen extends React.Component {
contentInset={{ top: 10, bottom: 10 }} contentInset={{ top: 10, bottom: 10 }}
data={data.map(x => x.data)} data={data.map(x => x.data)}
svg={{ fill: '#f49898' }} svg={{ fill: '#f49898' }}
></BarChart> spacingInner={0.75}
>
<ChartPoints />
{tooltipIndex && (
<Tooltip
tooltipX={tooltipX}
tooltipY={tooltipY}
index={tooltipIndex}
dataLength={data.length}
/>
)}
<Grid />
</BarChart>
)} )}
{graphType === 'area' && ( {graphType === 'area' && (
<StackedAreaChart <AreaChart
style={{ flex: 1, marginLeft: 25 }} style={{ flex: 1, marginLeft: 25 }}
contentInset={{ top: 10, bottom: 10 }} contentInset={{ top: 10, bottom: 10 }}
data={data} data={data}
keys={keys} yAccessor={({ item, index }) => item.data}
colors={colors} xAccessor={({ item, index }) => index}
svg={{ fill: '#f49898' }}
curve={shape.curveMonotoneX} curve={shape.curveMonotoneX}
></StackedAreaChart> >
<ChartPoints />
<Tooltip
tooltipX={tooltipX}
tooltipY={tooltipY}
color="#003F5A"
index={tooltipIndex}
dataLength={data.length}
/>
</AreaChart>
)} )}
<YAxis <YAxis
......
screens/Private/HistoryScreen/Tooltip.js 0 → 100644
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;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment