Skip to content

S
safetcut-app
Commit d8dd88a4 by Tonk
Options

add history screen

parent 79bdc121
Showing with 348 additions and 27 deletions
AppNavigation.js
......@@ -27,8 +27,7 @@ import ShareEmailScreen from './screens/Private/SettingScreen/ShareEmailScreen';
// Notification
import NotificationScreen from './screens/Private/NotificationScreen/NotificationScreen';
import PageTwo from './screens/Private/PageTwo';
import PageTree from './screens/Private/PageTree';
import HistoryScreen from './screens/Private/HistoryScreen/HistoryScreen';
import AuthLoadingScreen from './screens/Public/AuthLoadingScreen';
......@@ -106,9 +105,9 @@ const NotificationStack = createStackNavigator(
{ headerLayoutPreset: 'center', defaultNavigationOptions }
);
const SecondStack = createStackNavigator(
const HistoryStack = createStackNavigator(
{
Two: PageTwo,
History: HistoryScreen,
},
{
headerLayoutPreset: 'center',
......@@ -116,15 +115,6 @@ const SecondStack = createStackNavigator(
}
);
const ThirdStack = createStackNavigator(
{
Tree: PageTree,
},
{
headerLayoutPreset: 'center',
defaultNavigationOptions,
}
);
const SettingStack = createStackNavigator(
{
Setting: SettingScreen,
......@@ -218,7 +208,7 @@ const WithBottomTabStack = createBottomTabNavigator(
{
SmartMeter: SmartMeterStack,
Timer: TimerStack,
Two: SecondStack,
History: HistoryStack,
Notification: NotificationStack,
Setting: SettingStack,
},
......
android/app/build.gradle
......@@ -189,6 +189,7 @@ android {
}
dependencies {
implementation project(':react-native-svg')
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.facebook.react:react-native:+" // From node_modules
......
android/app/src/main/java/com/rn_safetcutapp/MainApplication.java
......@@ -7,6 +7,7 @@ import com.facebook.react.PackageList;
import com.facebook.hermes.reactexecutor.HermesExecutorFactory;
import com.facebook.react.bridge.JavaScriptExecutorFactory;
import com.facebook.react.ReactApplication;
import com.horcrux.svg.SvgPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
......
android/settings.gradle
rootProject.name = 'rn_safetcutapp'
include ':react-native-svg'
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
......
ios/Podfile
......@@ -29,6 +29,8 @@ target 'rn_safetcutapp' do
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
pod 'RNSVG', :path => '../node_modules/react-native-svg'
target 'rn_safetcutappTests' do
inherit! :search_paths
# Pods for testing
......
ios/Podfile.lock
PODS:
- boost-for-react-native (1.63.0)
- BVLinearGradient (2.5.4):
- BVLinearGradient (2.5.6):
- React
- DoubleConversion (1.1.6)
- Folly (2018.10.22.00):
......@@ -59,15 +59,15 @@ PODS:
- React-cxxreact (= 0.60.4)
- React-jsi (= 0.60.4)
- React-jsinspector (0.60.4)
- react-native-camera (2.11.1):
- react-native-camera (2.11.2):
- React
- react-native-camera/RCT (= 2.11.1)
- react-native-camera/RN (= 2.11.1)
- react-native-camera/RCT (2.11.1):
- react-native-camera/RCT (= 2.11.2)
- react-native-camera/RN (= 2.11.2)
- react-native-camera/RCT (2.11.2):
- React
- react-native-camera/RN (2.11.1):
- react-native-camera/RN (2.11.2):
- React
- react-native-date-picker (2.5.1):
- react-native-date-picker (2.7.0):
- React
- React-RCTActionSheet (0.60.4):
- React-Core (= 0.60.4)
......@@ -95,10 +95,12 @@ PODS:
- React-fishhook (= 0.60.4)
- ReactNativePermissions (1.2.0):
- React
- RNCAsyncStorage (1.5.1):
- RNCAsyncStorage (1.6.1):
- React
- RNGestureHandler (1.3.0):
- React
- RNSVG (9.7.1):
- React
- RNVectorIcons (6.6.0):
- React
- yoga (0.60.4.React)
......@@ -131,6 +133,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`)
- RNSVG (from `../node_modules/react-native-svg`)
- RNVectorIcons (from `../node_modules/react-native-vector-icons`)
- yoga (from `../node_modules/react-native/ReactCommon/yoga`)
......@@ -193,6 +196,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/@react-native-community/async-storage"
RNGestureHandler:
:path: "../node_modules/react-native-gesture-handler"
RNSVG:
:path: "../node_modules/react-native-svg"
RNVectorIcons:
:path: "../node_modules/react-native-vector-icons"
yoga:
......@@ -200,7 +205,7 @@ EXTERNAL SOURCES:
SPEC CHECKSUMS:
boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
BVLinearGradient: 8cbc5155c978f2e43098818c91d206d07aae6d30
BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
glog: 1f3da668190260b06b429bb211bfbee5cd790c28
......@@ -212,8 +217,8 @@ SPEC CHECKSUMS:
React-jsi: 21d3153b1153fbf6510a92b6b11e33e725cb7432
React-jsiexecutor: 7549641e48bafae7bfee3f3ea19bf4901639c5de
React-jsinspector: 73f24a02fa684ed6a2b828ba116874a2191ded88
react-native-camera: f1fbfc336ba8ca6de5296190341d1b6022c71cff
react-native-date-picker: cda144467ff9d12e606ffcc1d59fa35ab714628e
react-native-camera: b5e6e34586ca6f588b0c736dcabfe0aad5ce2f3e
react-native-date-picker: 648606a44e21d15725a61cc9f28e864f40ae8cdd
React-RCTActionSheet: 9f71d7ae3e8fb10e08d162cbf14c621349dbfab3
React-RCTAnimation: 981d8c95b0e30918a9832ccac32af83562a27fae
React-RCTBlob: 21e73d1020a302a75fed30dbaee9f15287b80baa
......@@ -225,11 +230,12 @@ SPEC CHECKSUMS:
React-RCTVibration: 0bea40cd51bd089bd591a8f74c86e91fdf2666c5
React-RCTWebSocket: 163873f4cdd5f1058a9483443404fc3801581cb6
ReactNativePermissions: f3beb8871251594a8ea2c6b19a3f8252d5c7379d
RNCAsyncStorage: b63d6e83fc629b01df6b624688f17944cea5637f
RNCAsyncStorage: 2e2e3feb9bdadc752a026703d8c4065ca912e75a
RNGestureHandler: 5329a942fce3d41c68b84c2c2276ce06a696d8b0
RNSVG: aac12785382e8fd4f28d072fe640612e34914631
RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4
yoga: c2c050f6ae6e222534760cc82f559b89214b67e2
PODFILE CHECKSUM: 7e601b319dbb30d87e22d97efc1337acd6fd482d
PODFILE CHECKSUM: e8ce6043399e756605611d98d30fc70891513c05
COCOAPODS: 1.7.4
screens/Private/HistoryScreen/HistoryScreen.js 0 → 100644
import React from 'react';
import { Text, Icon, Footer } from 'native-base';
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 * as shape from 'd3-shape';
import { format } from 'date-fns';
// mock data
const data = require('./history.json');
export default class HistoryScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: 'History',
headerLeft: (
<TouchableOpacity onPress={() => navigation.navigate('Home')}>
<View style={{ marginLeft: 17 }}>
<Icon name="home" type="SimpleLineIcons" style={{ color: color.white, fontSize: 16 }} />
</View>
</TouchableOpacity>
),
});
state = {
graphType: 'bar',
isfilterVisible: false,
data: [],
data2: [],
};
componentDidMount() {
this.sortAscen();
}
sortAscen() {
const sortData = data.sort(function(a, b) {
var dateA = new Date(a.time),
dateB = new Date(b.time);
return dateA - dateB;
});
this.setState({
data: sortData,
});
}
render() {
const { graphType, data, data2 } = this.state;
const colors = ['#f49898', '#ee5454', '#f17676', '#f8baba'];
const keys = ['data'];
return (
<ScrollView style={[theme.container, theme.containerWithPadding]}>
{/* Header */}
<View style={[theme.rowContainer, { justifyContent: 'space-between' }]}>
<Text style={[theme.normalText]}>History</Text>
<View style={theme.rowContainer}>
<View style={[theme.rowContainer, styles.segmentContainer]}>
<Icon
name="bar-graph"
type="Entypo"
style={{ fontSize: 10, color: graphType === 'bar' ? color.primary : color.grey }}
onPress={() => this.setState({ graphType: 'bar' })}
/>
<Icon
name="area-graph"
type="Entypo"
style={{ fontSize: 10, color: graphType === 'area' ? color.primary : color.grey }}
onPress={() => this.setState({ graphType: 'area' })}
/>
</View>
<Icon
name="md-funnel"
style={{ color: '#c7cad1', fontSize: 20, marginLeft: 10, marginRight: 5 }}
onPress={() => this.setState({ isfilterVisible: true })}
/>
</View>
</View>
{/* Chart */}
<View style={styles.chartContainer}>
{graphType === 'bar' && (
<BarChart
style={{ flex: 1, marginLeft: 25 }}
contentInset={{ top: 10, bottom: 10 }}
data={data.map(x => x.data)}
svg={{ fill: '#f49898' }}
></BarChart>
)}
{graphType === 'area' && (
<StackedAreaChart
style={{ flex: 1, marginLeft: 25 }}
contentInset={{ top: 10, bottom: 10 }}
data={data}
keys={keys}
colors={colors}
curve={shape.curveMonotoneX}
></StackedAreaChart>
)}
<YAxis
style={{ position: 'absolute', top: 0, bottom: 10 }}
data={StackedAreaChart.extractDataPoints(data, keys)}
contentInset={{ top: 10, bottom: 10 }}
svg={{
fontSize: 8,
fill: color.grey,
alignmentBaseline: 'baseline',
baselineShift: '3',
}}
/>
<XAxis
style={{ marginHorizontal: -10, position: 'absolute', left: 40, right: 15, bottom: 0 }}
data={data}
formatLabel={(value, index) => format(data[index].time * 1000, 'hh:mm')}
contentInset={{ left: 10, right: 10 }}
svg={{ fontSize: 8, fill: color.grey }}
/>
</View>
<View style={{ paddingHorizontal: 10, marginBottom: isIphoneX() ? 120 : 55 }}>
<Text style={theme.normalText}>Info</Text>
<View style={{ backgroundColor: color.white, marginTop: 10, borderRadius: 8 }}>
<FlatList
inverted
data={data}
renderItem={({ item, index }) => (
<View
style={[
theme.rowContainer,
{ justifyContent: 'space-between', padding: 10, paddingVertical: 20 },
]}
>
<Text style={[theme.normalText, theme.textDark]}>
{format(item.time * 1000, 'DD/MM/YYYY')}
</Text>
<Text style={[theme.normalText, theme.textDark]}>{item.data}</Text>
</View>
)}
ItemSeparatorComponent={() => <View style={styles.separator} />}
/>
</View>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
segmentContainer: {
width: 72,
height: 26,
borderRadius: 100,
backgroundColor: '#eeeeee',
justifyContent: 'space-evenly',
},
chartContainer: {
flexDirection: 'row',
height: 200,
paddingBottom: 10,
marginHorizontal: 10,
marginVertical: 20,
},
separator: {
marginHorizontal: 10,
height: StyleSheet.hairlineWidth,
backgroundColor: 'rgba(226, 230, 239, 0.6)',
},
});
screens/Private/HistoryScreen/history.json 0 → 100644
[
{
"time": 1566370057,
"data": 356
},
{
"time": 1564639200,
"data": 345
},
{
"time": 1566371305,
"data": 2356
},
{
"time": 1566374629,
"data": 123
},
{
"time": 1566317460,
"data": 45
},
{
"time": 1566438573,
"data": 457
},
{
"time": 1565863930,
"data": 243
},
{
"time": 1565777530,
"data": 347
},
{
"time": 1566467247,
"data": 467
},
{
"time": 1561975930,
"data": 234
},
{
"time": 1564481530,
"data": 3467
}
]
yarn.lock
......@@ -2273,6 +2273,77 @@ cssstyle@^1.0.0:
dependencies:
cssom "0.3.x"
d3-array@^1.2.0:
version "1.2.4"
resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f"
integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==
d3-collection@1:
version "1.0.7"
resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.7.tgz#349bd2aa9977db071091c13144d5e4f16b5b310e"
integrity sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==
d3-color@1:
version "1.3.0"
resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.3.0.tgz#675818359074215b020dc1d41d518136dcb18fa9"
integrity sha512-NHODMBlj59xPAwl2BDiO2Mog6V+PrGRtBfWKqKRrs9MCqlSkIEb0Z/SfY7jW29ReHTDC/j+vwXhnZcXI3+3fbg==
d3-format@1:
version "1.3.2"
resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.3.2.tgz#6a96b5e31bcb98122a30863f7d92365c00603562"
integrity sha512-Z18Dprj96ExragQ0DeGi+SYPQ7pPfRMtUXtsg/ChVIKNBCzjO8XYJvRTC1usblx52lqge56V5ect+frYTQc8WQ==
d3-interpolate-path@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/d3-interpolate-path/-/d3-interpolate-path-2.0.0.tgz#cb0327314fedb14e6ea1789ab7e095a16c2f8ab2"
integrity sha1-ywMnMU/tsU5uoXiat+CVoWwvirI=
dependencies:
d3-interpolate "^1.1.1"
d3-interpolate@1, d3-interpolate@^1.1.1:
version "1.3.2"
resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.3.2.tgz#417d3ebdeb4bc4efcc8fd4361c55e4040211fd68"
integrity sha512-NlNKGopqaz9qM1PXh9gBF1KSCVh+jSFErrSlD/4hybwoNX/gt1d8CDbDW+3i+5UOHhjC6s6nMvRxcuoMVNgL2w==
dependencies:
d3-color "1"
d3-path@1:
version "1.0.8"
resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.8.tgz#4a0606a794d104513ec4a8af43525f374b278719"
integrity sha512-J6EfUNwcMQ+aM5YPOB8ZbgAZu6wc82f/0WFxrxwV6Ll8wBwLaHLKCqQ5Imub02JriCVVdPjgI+6P3a4EWJCxAg==
d3-scale@^1.0.6:
version "1.0.7"
resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.7.tgz#fa90324b3ea8a776422bd0472afab0b252a0945d"
integrity sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==
dependencies:
d3-array "^1.2.0"
d3-collection "1"
d3-color "1"
d3-format "1"
d3-interpolate "1"
d3-time "1"
d3-time-format "2"
d3-shape@^1.0.6:
version "1.3.5"
resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.5.tgz#e81aea5940f59f0a79cfccac012232a8987c6033"
integrity sha512-VKazVR3phgD+MUCldapHD7P9kcrvPcexeX/PkMJmkUov4JM8IxsSg1DvbYoYich9AtdTsa5nNk2++ImPiDiSxg==
dependencies:
d3-path "1"
d3-time-format@2:
version "2.1.3"
resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.1.3.tgz#ae06f8e0126a9d60d6364eac5b1533ae1bac826b"
integrity sha512-6k0a2rZryzGm5Ihx+aFMuO1GgelgIz+7HhB4PH4OEndD5q2zGn1mDfRdNrulspOfR6JXkb2sThhDK41CSK85QA==
dependencies:
d3-time "1"
d3-time@1:
version "1.0.11"
resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.11.tgz#1d831a3e25cd189eb256c17770a666368762bbce"
integrity sha512-Z3wpvhPLW4vEScGeIMUckDW7+3hWKOQfAWg/U7PlWBnQmeKQ00gCUsTtWSYulrKNA7ta8hJ+xXc6MHrMuITwEw==
dashdash@^1.12.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
......@@ -5640,6 +5711,11 @@ path-type@^3.0.0:
dependencies:
pify "^3.0.0"
paths-js@^0.4.10:
version "0.4.10"
resolved "https://registry.yarnpkg.com/paths-js/-/paths-js-0.4.10.tgz#a3575f409b4a36f8aa795ba4d051989021be58c7"
integrity sha512-JZoqlRSHtx+bc+xKI9o4bropEbqZBF4ZfYImiB1T9RYpHB73h5I8XZ7FfSBbHbBMtdD1c04ujjAPH8wUuu4+Gw==
performance-now@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
......@@ -5704,6 +5780,11 @@ pn@^1.1.0:
resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
point-in-polygon@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/point-in-polygon/-/point-in-polygon-1.0.1.tgz#d59b64e8fee41c49458aac82b56718c5957b2af7"
integrity sha1-1Ztk6P7kHElFiqyCtWcYxZV7Kvc=
posix-character-classes@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
......@@ -5928,6 +6009,15 @@ react-native-camera@^2.11.1:
dependencies:
prop-types "^15.6.2"
react-native-chart-kit@^3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/react-native-chart-kit/-/react-native-chart-kit-3.2.1.tgz#bb316c2466f4cc7ba0d5b900865a76f6faf1f470"
integrity sha512-sEspbbEvOdjttt4ZxgoFOkxIZBhmcDQHJxaYCafsr4oaXEV/tTEcvcWb9cZ427VVOhsb0p6JW82bhrqFuPjFIA==
dependencies:
lodash "^4.17.11"
paths-js "^0.4.10"
point-in-polygon "^1.0.1"
react-native-date-picker@^2.7.0:
version "2.7.0"
resolved "https://registry.yarnpkg.com/react-native-date-picker/-/react-native-date-picker-2.7.0.tgz#91c6cd85c45309763e58982c46fcf3dba2d1da55"
......@@ -6034,6 +6124,22 @@ react-native-status-bar-height@^2.2.0:
resolved "https://registry.yarnpkg.com/react-native-status-bar-height/-/react-native-status-bar-height-2.3.1.tgz#b92ce9112c2367290847ac11284d9d84a6330169"
integrity sha512-m9nGKYfFn6ljF1abafzF5cFaD9JCzXwj7kNE9CuF+g0TgtItH70eY2uHaCV9moENTftqd5XIS3Cx0mf4WfistA==
react-native-svg-charts@^5.3.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/react-native-svg-charts/-/react-native-svg-charts-5.3.0.tgz#00ce3a043594e3c5e283f7496a44ab455c834a51"
integrity sha512-XxKDqMdOl8EhQGhLAzWtmfhhiTuPeeRrLvLQ5+BzaRoCgdBO1CGGKeLvEor8OU8QUi3IXSdbbTi+fVrFq5hqaQ==
dependencies:
d3-array "^1.2.0"
d3-interpolate-path "2.0.0"
d3-scale "^1.0.6"
d3-shape "^1.0.6"
prop-types "^15.6.0"
react-native-svg@^9.7.1:
version "9.7.1"
resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-9.7.1.tgz#a6d270cd51f8f238de7623338211debf4ff9cf5c"
integrity sha512-Yr54SyLPCdovLCJ08V7syJUe1iKrTYG9V5wB08z6lh/9FdC2R9CtBnMyz83GDLKfzUONqqH9nN1l+o61CgD3tg==
react-native-swipe-list-view@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/react-native-swipe-list-view/-/react-native-swipe-list-view-2.0.0.tgz#031db12a52d3441715ff1d1e127a8aaee95c21aa"
......
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