유희정 / fwiot

Go to a project
Toggle navigation Toggle navigation pinning
이윤영
41e840e0 1 parent 27c92619

Modify rendering

Inline Side-by-side
Showing 7 changed files with 205 additions and 244 deletions
import React, { Component } from 'react';
import { View, Text, StyleSheet,ScrollView, RefreshControl } from 'react-native';
import { BarChart, Grid } from 'react-native-svg-charts'
import HistoryGraph from '../component/HistoryGraph'
import SegmentedControlTab from "react-native-segmented-control-tab";
import {add_data, get_week_data, get_today_data, get_month_data, get_year_data} from'../component/DBhelper.js';
var list1 = get_week_data();
var list2 = get_month_data();
var list3 = get_year_data();
import {add_data, get_week_data, get_month_data, get_year_data, add_temp_data} from'../component/DBhelper.js';
//var today = new Date();
//today.setHours(today.getHours()+9);
var week = ['SUN','MON','TUE', 'WED', 'THU', 'FRI', 'SAT'];
const data1 = [
{ label: week[list1[1][0]], value: list1[0][0] },
{ label: week[list1[1][1]], value: list1[0][1] },
{ label: week[list1[1][2]], value: list1[0][2] },
{ label: week[list1[1][3]], value: list1[0][3] },
{ label: week[list1[1][4]], value: list1[0][4] },
{ label: week[list1[1][5]], value: list1[0][5] },
{ label: week[list1[1][6]], value: list1[0][6] }
]
const data2 = [
{ label: '1', value: list2[0] },
{ label: '7', value: list2[1] },
{ label: '14', value: list2[2]},
{ label: '21', value: list2[3] },
{ label: '28', value: list2[4] }
]
const data3 = [
{ label: 'Jan', value: list3[0] },
{ label: 'Feb', value: list3[1] },
{ label: 'Mar', value: list3[2] },
{ label: 'Apr', value: list3[3] },
{ label: 'May', value: list3[4] },
{ label: 'Jun', value: list3[5] },
{ label: 'Jul', value: list3[6] },
{ label: 'Aug', value: list3[7] },
{ label: 'Sep', value: list3[8] },
{ label: 'Oct', value: list3[9] },
{ label: 'Nov', value: list3[10] },
{ label: 'Dec', value: list3[11] }
]
const data4 = [
{ label: 'C', value: 500 },
{ label: 'H', value: 312 },
{ label: 'A', value: 424 },
{ label: 'N', value: 745 },
{ label: 'G', value: 89 },
{ label: 'E', value: 434 }
]
function total(list){
var total=0;
sum = 0;
for(var i =0; i< list.length; i++)
total += list[i]
return total
sum += list[i].value;
return sum
}
const kg1 = "총 " + total(list1[0]) + "kg"
const kg2 = "총 " + total(list2) + "kg"
const kg3 = "총 " + total(list3) + "kg"
export default class HomeTab extends Component {
constructor(){
super();
this.state = {
selectedIndex: 0,
data: data1,
title: "총 " + total(list1[0]) + "kg",
data: get_week_data(),
title: "총 " + total(get_week_data())/1000 + "kg",
spane: "",
refreshing: false
}
......@@ -76,22 +28,33 @@ export default class HomeTab extends Component {
_onRefresh = () => {
this.setState({refresing: true});
// this.setState({data: data4})
this.get_diff_data();
this.setState({refreshing: false});
}
componentDidMount() {
const { navigation } = this.props;
this.focusListener = navigation.addListener('didFocus', () => {
this.handleIndexChange(this.state.selectedIndex);
});
}
componentWillUnmount() {
// Remove the event listener
this.focusListener.remove();
}
handleIndexChange = index => {
this.setState({selectedIndex: index});
switch(index){
case 0:
this.setState({data: data1, title: kg1});
this.setState({data: get_week_data(), title: "총 " + total(get_week_data())/1000 + "kg"});
break;
case 1:
this.setState({data: data2, title: kg2});
this.setState({data: get_month_data(), title: "총 " + total(get_month_data())/1000 + "kg"});
break;
case 2:
this.setState({data: data3, title: kg3});
this.setState({data: get_year_data(), title: "총 " + total(get_year_data())/1000 + "kg"});
break;
}
};
......@@ -111,24 +74,17 @@ export default class HomeTab extends Component {
.then((response) => response.json())
.then((responseJson)=> {
console.log(responseJson)
add_data(responseJson)
//add_data(responseJson)
add_temp_data();
},function(){
})
.then(()=>{this.handleIndexChange(this.state.selectedIndex)})
.catch((error) => {
console.error(error);
})
}
render() {
// const fill = 'rgb(134, 65, 244)'
// const data = [50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80]
// return (
// <BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}>
// <Grid />
// </BarChart>
// );
return(
<ScrollView style = {style.container}
refreshControl={
......@@ -147,15 +103,18 @@ export default class HomeTab extends Component {
<View style={style.header}>
<Text style={style.tabName}>History </Text>
</View>
<View style={{flex : 8, justifyContent:'center'}}>
<Text style ={style.date_text}>{this.state.title}</Text>
</View>
<SegmentedControlTab
values={["Week", "Month", "Year"]}
selectedIndex={this.state.selectedIndex}
onTabPress={this.handleIndexChange}
/>
<HistoryGraph data={this.state.data} round={100} unit="kg"/>
<View style={{justifyContent:'center', padding: 10}}>
<SegmentedControlTab
values={["Week", "Month", "Year"]}
selectedIndex={this.state.selectedIndex}
onTabPress={this.handleIndexChange}
/>
</View>
<View style={{flex : 8, justifyContent:'center', padding: 10}}>
<Text style ={style.date_text}>{this.state.title}</Text>
</View>
<HistoryGraph data={this.state.data} round={1000} unit="g"/>
</View>
</ScrollView>
)
......
......@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { View, Text, StyleSheet, SafeAreaView, ScrollView, Image } from 'react-native';
import Circle from '../component/circle_component'
import {Table, TableWrapper, Row,Rows} from 'react-native-table-component'
import {get_now_weight, get_today_data, add_data} from'../component/DBhelper.js';
import {get_now_weight, get_today_data, add_data,add_temp_data} from'../component/DBhelper.js';
var date = new Date();
date.setHours(date.getHours()+9);
......@@ -21,6 +21,21 @@ export default class HomeTab extends Component {
table_contents : get_today_data()
}
}
componentDidMount() {
const { navigation } = this.props;
this.focusListener = navigation.addListener('didFocus', () => {
this.setState({
current_weight : get_now_weight(),
table_contents : get_today_data()
});
});
}
componentWillUnmount() {
// Remove the event listener
this.focusListener.remove();
}
get_diff_data(){
return fetch('http://testloadbalancer-1847561458.ap-northeast-2.elb.amazonaws.com/app/get_diff_data/',{
method:'POST',
......@@ -30,19 +45,25 @@ export default class HomeTab extends Component {
},
body:JSON.stringify({
ras_id : "pi1",
date : "1576339901541",
date : "1576648647000",
}),
})
.then((response) => response.json())
.then((responseJson)=> {
console.log(responseJson)
add_data(responseJson);
//add_data(responseJson);
add_temp_data();
},function(){
})
.then(()=>{this.setState({
current_weight : get_now_weight(),
table_contents : get_today_data()
})})
.catch((error) => {
console.error(error);
})
}
render() {
return (
<View style={style.container}>
......
......@@ -40,8 +40,8 @@ export default class SettingTab extends Component {
delete_id(){
this.setState({ID: ''})
//save_app_data()
//delete_all_data()
deleteId()
delete_all_data()
//deleteId()
this.props.navigation.navigate('Login');
}
render() {
......
......@@ -58,8 +58,8 @@ export default class Login extends Component {
/>
<LoginButton
//onPress={()=>{this.getdata}}
onPress={() =>{ this.props.navigation.navigate('MainScreen', { ID: this.state.ID });}}
//onPress={() =>{ this.getdata().then(()=>{this.props.navigation.navigate('MainScreen', { ID: this.state.ID })}) }}
//onPress={() =>{ this.props.navigation.navigate('MainScreen', { ID: this.state.ID });}}
onPress={() =>{ this.getdata().then(()=>{this.props.navigation.navigate('MainScreen', { ID: this.state.ID })}) }}
/>
</View>
</View>
......
......@@ -33,7 +33,7 @@ const AppTabNavigator = createMaterialTopTabNavigator({
}
});
const AppTabContainet = createAppContainer(AppTabNavigator);
const AppTabContainer = createAppContainer(AppTabNavigator);
export default class MainScreen extends Component {
......@@ -44,11 +44,12 @@ export default class MainScreen extends Component {
};
}
static navigationOptions = {
title: 'FW IOT' }
title: 'FW IOT'
}
render() {
registerID(this.state.ID);
return <AppTabContainet/>; // AppTabContainet 컴포넌트를 리턴한다.
return <AppTabContainer/>; // AppTabContainet 컴포넌트를 리턴한다.
}
}
......
......@@ -47,7 +47,7 @@ export function deleteId(){
// Get the default Realm with support for our objects
let realm = new Realm({schema: [Waste, ID]});
export function add_data(responseJson){
for(i = 0; i < responseJson.length; i++){
for(var i = 0; i < responseJson.length; i++){
realm.write(() => {
// responseJson[0].ras_id.S
let myWaste = realm.create('Waste', {
......@@ -62,6 +62,23 @@ export function add_data(responseJson){
return responseJson.length;
}
export function add_temp_data(){
realm.write(() => {
let myWaste = realm.create('Waste', {
weight: parseFloat(747),
diff: parseFloat(257),
date: parseFloat(1576691588000),
});
});
realm.write(() => {
let myWaste = realm.create('Waste', {
weight: parseFloat(1466),
diff: parseFloat(468),
date: parseFloat(1576650859000),
});
});
}
export function get_now_weight(){
let wastes = realm.objects('Waste');
let recent = wastes.max('date');
......@@ -69,7 +86,7 @@ export function get_now_weight(){
var recentWeight = wastes.filtered('date = $0', recent);
console.log("now_weight",recentWeight)
if(recentWeight.length != 0)
return recentWeight[0].weight;
return recentWeight[recentWeight.length-1].weight;
else return 0;
}
......@@ -126,9 +143,11 @@ export function get_week_data(){
daybefore5.setDate(today.getDate()-5);
var daybefore6 = new Date();
daybefore6.setDate(today.getDate()-6);
var day = [daybefore6.getDay(), daybefore5.getDay(),daybefore4.getDay(),
daybefore3.getDay(),daybefore2.getDay(),daybefore1.getDay(), today.getDay()]
today = today.getTime();
daybefore1 = daybefore1.getTime();
daybefore2 = daybefore2.getTime();
daybefore3 = daybefore3.getTime();
......@@ -136,100 +155,83 @@ export function get_week_data(){
daybefore5 = daybefore5.getTime();
daybefore6 = daybefore6.getTime();
let wastes1 = realm.objects('Waste').filtered('date >= $0 && date <$1', daybefore6, daybefore5);
let wastes2 = realm.objects('Waste').filtered('date >= $0 && date <$1', daybefore5, daybefore4);
let wastes3 = realm.objects('Waste').filtered('date >= $0 && date <$1', daybefore4, daybefore3);
let wastes4 = realm.objects('Waste').filtered('date >= $0 && date <$1', daybefore3, daybefore2);
let wastes5 = realm.objects('Waste').filtered('date >= $0 && date <$1', daybefore2, daybefore1);
let wastes6 = realm.objects('Waste').filtered('date >= $0 && date <$1', daybefore1, today);
let wastes7 = realm.objects('Waste').filtered('date >= $0', today);
var list = [];
var total1 =0, total2=0, total3=0, total4=0, total5=0, total6=0, total7 = 0;
let wastes1 = realm.objects('Waste').filtered('date >= $0 && date <$1', daybefore6, daybefore5).sum('diff');
let wastes2 = realm.objects('Waste').filtered('date >= $0 && date <$1', daybefore5, daybefore4).sum('diff');
let wastes3 = realm.objects('Waste').filtered('date >= $0 && date <$1', daybefore4, daybefore3).sum('diff');
let wastes4 = realm.objects('Waste').filtered('date >= $0 && date <$1', daybefore3, daybefore2).sum('diff');
let wastes5 = realm.objects('Waste').filtered('date >= $0 && date <$1', daybefore2, daybefore1).sum('diff');
let wastes6 = realm.objects('Waste').filtered('date >= $0 && date <$1', daybefore1, today).sum('diff');
let wastes7 = realm.objects('Waste').filtered('date >= $0', today).sum('diff');
for(var i = 0; i< wastes1.length; i++){
total1 += wastes1[i].diff;
}
for(var i = 0; i< wastes2.length; i++){
total2 += wastes2[i].diff;
}
for(var i = 0; i< wastes3.length; i++){
total3 += wastes3[i].diff;
}
for(var i = 0; i< wastes4.length; i++){
total4 += wastes4[i].diff;
}
for(var i = 0; i< wastes5.length; i++){
total5 += wastes5[i].diff;
}
for(var i = 0; i< wastes6.length; i++){
total6 += wastes6[i].diff;
}
for(var i = 0; i< wastes7.length; i++){
total7 += wastes7[i].diff;
}
list = [[total1, total2, total3, total4, total5, total6, total7],day]
return list;
var week = ['SUN','MON','TUE', 'WED', 'THU', 'FRI', 'SAT'];
var data1 = [
{ label: week[day[0]], value: wastes1 },
{ label: week[day[1]], value: wastes2 },
{ label: week[day[2]], value: wastes3 },
{ label: week[day[3]], value: wastes4 },
{ label: week[day[4]], value: wastes5 },
{ label: week[day[5]], value: wastes6 },
{ label: week[day[6]], value: wastes7 }
]
console.log(data1)
return data1;
}
function getM_D(time){
console.log("time",time)
var day = new Date(time);
console.log(day.getDate())
return day.getMonth()+1+ "/" +day.getDate();
}
export function get_month_data(){
var day7 = (24*60*60*1000) * 7;
var today = new Date();
var sep1 = new Date(today.getFullYear(), today.getMonth()-1, 1);
var sep2 = new Date(today.getFullYear(), today.getMonth()-1, 7);
var sep3 = new Date(today.getFullYear(), today.getMonth()-1, 14);
var sep4 = new Date(today.getFullYear(), today.getMonth()-1, 21);
var sep5 = new Date(today.getFullYear(), today.getMonth()-1, 28);
var sep6 = new Date(today.getFullYear(), today.getMonth(), 1)
today.setHours(0,0,0,0);
var day = today.getDay();
var diff = today.getDate() - day + (day == 0 ? -6:1);
var sep5 = new Date(today.setDate(diff));
var sep5 = sep5.getTime();
var sep4 = sep5 - day7;
var sep3 = sep4 - day7;
var sep2 = sep3 - day7;
var sep1 = sep2 - day7;
console.log("first day of week: ", sep5, sep4, sep3, sep2, sep1);
sep1 = sep1.getTime();
sep2 = sep2.getTime();
sep3 = sep3.getTime();
sep4 = sep4.getTime();
sep5 = sep5.getTime();
sep6 = sep6.getTime();
let wastes1 = realm.objects('Waste').filtered('date >= $0 && date <$1', sep1, sep2);
let wastes2 = realm.objects('Waste').filtered('date >= $0 && date <$1', sep2, sep3);
let wastes3 = realm.objects('Waste').filtered('date >= $0 && date <$1', sep3, sep4);
let wastes4 = realm.objects('Waste').filtered('date >= $0 && date <$1', sep4, sep5);
let wastes5 = realm.objects('Waste').filtered('date >= $0 && date <$1', sep5, sep6);
let wastes1 = realm.objects('Waste').filtered('date >= $0 && date <$1', sep1, sep2).sum('diff');
let wastes2 = realm.objects('Waste').filtered('date >= $0 && date <$1', sep2, sep3).sum('diff');
let wastes3 = realm.objects('Waste').filtered('date >= $0 && date <$1', sep3, sep4).sum('diff');
let wastes4 = realm.objects('Waste').filtered('date >= $0 && date <$1', sep4, sep5).sum('diff');
let wastes5 = realm.objects('Waste').filtered('date >= $0', sep5).sum('diff');
var list = [];
var total1 =0, total2=0, total3=0, total4=0, total5=0;
for(var i = 0; i< wastes1.length; i++){
total1 += wastes1[i].diff;
}
for(var i = 0; i< wastes2.length; i++){
total2 += wastes2[i].diff;
}
for(var i = 0; i< wastes3.length; i++){
total3 += wastes3[i].diff;
}
for(var i = 0; i< wastes4.length; i++){
total4 += wastes4[i].diff;
}
for(var i = 0; i< wastes5.length; i++){
total5 += wastes5[i].diff;
}
list = [total1, total2, total3, total4, total5]
return list;
var data2 = [
{ label: getM_D(sep1), value: wastes1 },
{ label: getM_D(sep2), value: wastes2 },
{ label: getM_D(sep3), value: wastes3 },
{ label: getM_D(sep4), value: wastes4 },
{ label: getM_D(sep5), value: wastes5 }
]
console.log(data2)
return data2;
}
export function get_year_data(){
var today = new Date();
var mon1 = new Date(today.getFullYear()-1, 0, 1);
var mon2 = new Date(today.getFullYear()-1, 1, 1);
var mon3 = new Date(today.getFullYear()-1, 2, 1);
var mon4 = new Date(today.getFullYear()-1, 3, 1);
var mon5 = new Date(today.getFullYear()-1, 4, 1);
var mon6 = new Date(today.getFullYear()-1, 5, 1);
var mon7 = new Date(today.getFullYear()-1, 6, 1);
var mon8 = new Date(today.getFullYear()-1, 7, 1);
var mon9 = new Date(today.getFullYear()-1, 8, 1);
var mon10 = new Date(today.getFullYear()-1, 9, 1);
var mon11 = new Date(today.getFullYear()-1, 10, 1);
var mon12 = new Date(today.getFullYear()-1, 11, 1);
var nYear = new Date(today.getFullYear(), 0, 1);
var mon1 = new Date(today.getFullYear(), 0, 1);
var mon2 = new Date(today.getFullYear(), 1, 1);
var mon3 = new Date(today.getFullYear(), 2, 1);
var mon4 = new Date(today.getFullYear(), 3, 1);
var mon5 = new Date(today.getFullYear(), 4, 1);
var mon6 = new Date(today.getFullYear(), 5, 1);
var mon7 = new Date(today.getFullYear(), 6, 1);
var mon8 = new Date(today.getFullYear(), 7, 1);
var mon9 = new Date(today.getFullYear(), 8, 1);
var mon10 = new Date(today.getFullYear(), 9, 1);
var mon11 = new Date(today.getFullYear(), 10, 1);
var mon12 = new Date(today.getFullYear(), 11, 1);
var nYear = new Date(today.getFullYear()+1, 0, 1);
mon1 = mon1.getTime();
mon2 = mon2.getTime();
......@@ -246,63 +248,35 @@ export function get_year_data(){
nYear = nYear.getTime();
let wastes1 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon1, mon2);
let wastes2 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon2, mon3);
let wastes3 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon3, mon4);
let wastes4 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon4, mon5);
let wastes5 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon5, mon6);
let wastes6 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon6, mon7);
let wastes7 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon7, mon8);
let wastes8 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon8, mon9);
let wastes9 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon9, mon10);
let wastes10 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon10, mon11);
let wastes11 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon11, mon12);
let wastes12 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon12, nYear);
let wastes1 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon1, mon2).sum('diff');
let wastes2 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon2, mon3).sum('diff');
let wastes3 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon3, mon4).sum('diff');
let wastes4 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon4, mon5).sum('diff');
let wastes5 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon5, mon6).sum('diff');
let wastes6 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon6, mon7).sum('diff');
let wastes7 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon7, mon8).sum('diff');
let wastes8 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon8, mon9).sum('diff');
let wastes9 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon9, mon10).sum('diff');
let wastes10 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon10, mon11).sum('diff');
let wastes11 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon11, mon12).sum('diff');
let wastes12 = realm.objects('Waste').filtered('date >= $0 && date <$1', mon12, nYear).sum('diff');
var list = [];
var total1 =0, total2=0, total3=0, total4=0, total5=0,
total6 =0, total7=0, total8=0, total9=0, total10=0,
total11 =0, total12=0;
for(var i = 0; i< wastes1.length; i++){
total1 += wastes1[i].diff;
}
for(var i = 0; i< wastes2.length; i++){
total2 += wastes2[i].diff;
}
for(var i = 0; i< wastes3.length; i++){
total3 += wastes3[i].diff;
}
for(var i = 0; i< wastes4.length; i++){
total4 += wastes4[i].diff;
}
for(var i = 0; i< wastes5.length; i++){
total5 += wastes5[i].diff;
}
for(var i = 0; i< wastes6.length; i++){
total6 += wastes6[i].diff;
}
for(var i = 0; i< wastes7.length; i++){
total7 += wastes7[i].diff;
}
for(var i = 0; i< wastes8.length; i++){
total8 += wastes8[i].diff;
}
for(var i = 0; i< wastes9.length; i++){
total9 += wastes9[i].diff;
}
for(var i = 0; i< wastes10.length; i++){
total10 += wastes10[i].diff;
}
for(var i = 0; i< wastes11.length; i++){
total11 += wastes11[i].diff;
}
for(var i = 0; i< wastes12.length; i++){
total12 += wastes12[i].diff;
}
list = [total1, total2, total3, total4, total5,total6, total7, total8, total9, total10,total11, total12]
return list;
var data3 = [
{ label: 'Jan', value: wastes1 },
{ label: 'Feb', value: wastes2 },
{ label: 'Mar', value: wastes3 },
{ label: 'Apr', value: wastes4 },
{ label: 'May', value: wastes5 },
{ label: 'Jun', value: wastes6 },
{ label: 'Jul', value: wastes7 },
{ label: 'Aug', value: wastes8 },
{ label: 'Sep', value: wastes9 },
{ label: 'Oct', value: wastes10 },
{ label: 'Nov', value: wastes11 },
{ label: 'Dec', value: wastes12 }
]
console.log(data3)
return data3;
}
export function delete_all_data(today){
......@@ -320,7 +294,8 @@ function get_today_start(){
var mm = today.getMonth();
var yyyy = today. getFullYear();
var togettime = new Date(2019,11,13).getTime();
var togettime = new Date(yyyy,mm,dd).getTime();
console.log(togettime)
return togettime;
}
\ No newline at end of file
}
......
......@@ -3,12 +3,11 @@ import { View, Text, StyleSheet } from 'react-native';
import { Svg, G, Line, Rect } from 'react-native-svg'
import { Text as SvgText } from 'react-native-svg'
import * as d3 from 'd3'
// import Showkg from './ShowKg'
const GRAPH_MARGIN = 20
const GRAPH_BAR_WIDTH = 10
const colors = {
axis: '#E4E4E4',
axis: '#CED4DA',
bars: '#0066cc',
bardefult: '#CED4DA'
}
......@@ -19,23 +18,26 @@ export default class HistoryGraph extends PureComponent {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
kg: this.props.data[this.props.data.length - 1].label,
kg: this.props.data[this.props.data.length - 1].value,
span: this.props.data[this.props.data.length -1].label,
index: this.props.data.length-1
}
}
handleClick = inkg => {
this.setState({kg: inkg});
handleClick = item => {
this.setState({span: item.label, kg: item.value});
}
componentDidUpdate(prevProps, prevState){
if (this.props.data !== prevProps.data) {
this.setState({
...this.state,
kg : this.props.data[this.props.data.length - 1].label,
kg : this.props.data[this.props.data.length - 1].value,
span: this.props.data[this.props.data.length -1].label,
index: this.props.data.length-1
})
} }
}
}
render() {
// Dimensions
......@@ -88,7 +90,7 @@ export default class HistoryGraph extends PureComponent {
y2={y(topValue) * -1}
stroke={colors.axis}
strokeDasharray={[3, 3]}
strokeWidth="0.5"
strokeWidth="1"
/>
{/* middle axis */}
......@@ -99,7 +101,7 @@ export default class HistoryGraph extends PureComponent {
y2={y(middleValue) * -1}
stroke={colors.axis}
strokeDasharray={[3, 3]}
strokeWidth="0.5"
strokeWidth="1"
/>
{/* bottom axis */}
......@@ -109,7 +111,7 @@ export default class HistoryGraph extends PureComponent {
x2={graphWidth}
y2="2"
stroke={colors.axis}
strokeWidth="0.5"
strokeWidth="1"
/>
{/* bars */}
......@@ -121,8 +123,8 @@ export default class HistoryGraph extends PureComponent {
rx={2.5}
width={GRAPH_BAR_WIDTH}
height={y(item.value)}
fill = {this.state.kg == item.label ? colors.bars : colors.bardefult}
onPress={()=>this.handleClick(item.label)}
fill = {this.state.span == item.label ? colors.bars : colors.bardefult}
onPress={()=>this.handleClick(item)}
/>
))}
......@@ -138,7 +140,10 @@ export default class HistoryGraph extends PureComponent {
</G>
</Svg>
<View style={style.container}>
<Text>{this.state.kg}</Text>
<Text>{this.state.span}</Text>
<View>
<Text>{this.state.kg/1000}kg</Text>
</View>
</View>
</View>
)
......