below is my api response which i will get in props
"chartDataValue":[
{
"totalAmtN":105,
"transDt":"09/07/2024 19:06:54"
},
{
"totalAmtN":10,
"transDt":"22/07/2024 19:06:54"
},
{
"totalAmtN":100,
"transDt":"08/07/2024 19:06:54"
},
{
"totalAmtN":100,
"transDt":"09/07/2024 19:06:54"
},
{
"totalAmtN":100,
"transDt":"08/07/2024 19:06:54"
},
{
"totalAmtN":1008,
"transDt":"01/07/2024 19:06:54"
},
{
"totalAmtN":180,
"transDt":"02/07/2024 19:06:54"
},
{
"totalAmtN":1,
"transDt":"04/07/2024 19:06:54"
}
]
Below is my full component where i will receive above response .
Now I have to make my Linechart dynamic , for example if
“transDt”:”09/07/2024 19:06:54″ then “totalAmtN”:100 and “totalAmtN”:105, should push to Todays same like if “transDt”:”01/07/2024 19:06:54″ and “transDt”:”02/07/2024 19:06:54″ then “totalAmtN”:1008 and “totalAmtN”:180, should push to This Month and if “transDt”:”08/07/2024 19:06:54″ then “totalAmtN”:100, should push to the This week.
This value will get change month to month according to date and time, and then Linechart should also behave like dynamic
import React, { Component } from 'react';
import { ScrollView, ImageBackground, TouchableOpacity, View, Text, Dimensions, Image, StatusBar, StyleSheet, Platform } from 'react-native';
import _ from 'lodash';
import { RegularText } from './ui/text';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import { BG } from '../images';
import LinearGradient from 'react-native-linear-gradient';
import HeaderComponent from './ui/header';
import parentStyle from '../themes/parent.style';
import { IconCustom, IconBig } from './ui/icons';
import Ripple from 'react-native-material-ripple';
import { getData } from './services/services';
import { SvgCss } from 'react-native-svg';
import { VIEW_MORE } from '../images';
import { LineChart } from "react-native-chart-kit";
import Modal from 'react-native-modal';
import Icon from 'react-native-vector-icons/Feather';
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
const USER_FULL_NAME = 'userFullName';
class BMobileDashboard extends Component {
constructor(props) {
super(props);
this.state = {
permission: {},
title: this.props.title || '',
userFullName: '',
filteredArray: [],
selectedFilter: "Today",
totalValue: 0,
avgSale: 0,
avgItemsPerSale: 0,
chartData: {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{
data: [],
color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`,
strokeWidth: 2
}
],
legend: ["Sales Data"],
},
isModalVisible: false,
items: [
{ label: 'Today', value: 'Today' },
{ label: 'This Week', value: 'This Week' },
{ label: 'This Month', value: 'This Month' }
]
};
}
async componentDidMount() {
this.updateChartData(this.state.selectedFilter);
this.setState({
userFullName: await getData(USER_FULL_NAME)
})
StatusBar.setBarStyle('light-content');
}
componentDidUpdate(prevProps) {
if (prevProps.isFocused !== this.props.isFocused) {
StatusBar.setBarStyle('light-content');
}
}
navigateTo = (data) => {
let title = data.code;
const { bMobileData } = this.props;
const SalesDataa = {
salesData: bMobileData.slice(3)
}
if (title === 'sale') {
this.props.navigation.navigate('SalesContainer')
} else if (title === 'viewSale') {
this.props.navigation.navigate('ViewSalesContainer')
} else if (title === 'viewExchangeReturn') {
this.props.navigation.navigate('ExchangeReturnContainer')
} else if (title === 'more') {
this.props.navigation.navigate('MoreServices', SalesDataa);
} else if (title === 'dealerSale') {
this.props.navigation.navigate('DealerSaleContainer');
} else if (title === 'dealerRequisition') {
this.props.navigation.navigate('CreateRequisitionContainer');
} else if (title === 'viewSaleCancel') {
this.props.navigation.navigate('ViewSalesCancelContainer');
}
}
updateTitleState = async (objData) => {
this.setState({
title: objData,
});
}
updateChartData = (filter) => {
const dataByFilter = {
Today: {
labels: ["00:00", "06:00", "12:00", "18:00", "24:00"],
datasets: [
{
data: [],
color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`,
strokeWidth: 2
}
]
},
"This Week": {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{
data: [],
color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`,
strokeWidth: 2
}
]
},
"This Month": {
labels: ["Week 1", "Week 2", "Week 3", "Week 4"],
datasets: [
{
data: [],
color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`,
strokeWidth: 2
}
]
}
};
const selectedData = dataByFilter[filter];
const totalValue = selectedData.datasets[0].data.reduce((acc, value) => acc + value, 0);
const avgSale = totalValue / selectedData.datasets[0].data.length;
const avgItemsPerSale = selectedData.datasets[0].data.length;
selectedData.legend = [`${filter}'s Sales: PGK ${totalValue}`];
this.setState({
chartData: selectedData,
totalValue,
avgSale,
avgItemsPerSale
});
};
handleFilterChange = (value) => {
this.setState({ selectedFilter: value, isModalVisible: false }, () => {
this.updateChartData(value);
});
};
toggleModal = () => {
this.setState({ isModalVisible: !this.state.isModalVisible });
};
render() {
let { navigation, appliedTheme, appliedMode, bMobileData, defaultlocationInx, locationLists } = this.props;
const themeGradientBackgroundStyle = [
parentStyle[appliedTheme] ? parentStyle[appliedTheme][appliedMode].signatureStartColor : null,
parentStyle[appliedTheme] ? parentStyle[appliedTheme][appliedMode].signatureEndColor : null
];
const enableHeaderIcons = {
search: false,
cart: false,
location: true
}
let salesData = [];
let final = bMobileData;
let data = [];
let obj = {};
if (final.length <= 4) {
if (final.title == 'Sale') { }
salesData = final;
} else {
data = final.slice(0, 3);
obj['title'] = 'More';
obj['code'] = 'more';
obj['svg'] = VIEW_MORE;
data.push(obj);
salesData = data;
}
const locations = {
locationLists: this.props.locationLists,
updateTitleState: (objData) => this.updateTitleState(objData)
}
const { selectedFilter, chartData, isModalVisible, items,avgSale, avgItemsPerSale, } = this.state;
const chartConfig = {
backgroundGradientFrom: "#FFFFFF",
backgroundGradientFromOpacity: 0,
backgroundGradientTo: "#FFFFFF",
backgroundGradientToOpacity: 0.5,
color: (opacity = 1) => `rgba(10, 10, 230, ${opacity})`,
strokeWidth: 2,
barPercentage: 0.5,
useShadowColorFromDataset: false
};
return (
<View style={{}}>
<ScrollView showsVerticalScrollIndicator={false}>
<View style={{ flex: 1 }}>
<LinearGradient colors={themeGradientBackgroundStyle} start={{ x: 0.0, y: 1.25 }} end={{ x: 1, y: 0.25 }} style={{ height: hp('40%'), width: deviceWidth, borderBottomLeftRadius: 20, borderBottomRightRadius: 20 }}>
<ImageBackground source={BG} style={{ height: hp('30%'), width: deviceWidth }} resizeMode="cover">
<View>
<HeaderComponent navigation={navigation}
flag={'header_left_with_locationicon'}
disableNavigation={true}
searchComponent={'OfferSearchContainer'}
title={this.state.title}
titleColor={'#FFFFFF'}
locationLists={locations}
icons={enableHeaderIcons} />
</View>
<View>
<View style={{ paddingLeft: 15, paddingTop: 8, paddingBottom: 4 }}>
<RegularText text={`Hello`} textColor='#FFFFFF' style={{ fontSize: hp('4%'), fontWeight: 'bold' }} />
</View>
{<View style={{ paddingLeft: 15, paddingRight: 15, justifyContent: 'space-between', paddingBottom: 25, flexDirection: 'row' }}>
<RegularText text={this.state.userFullName} textColor='#FFFFFF' style={{ fontSize: hp('2.5%') }} />
</View>}
</View>
</ImageBackground>
</LinearGradient>
<View style={{ top: -hp('15%'), paddingLeft: 20, paddingRight: 20 }}>
<View style={{
height: hp('25%'), width: wp('100%') - 40, borderRadius: hp('2%'), backgroundColor: '#fff',
flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', ...Platform.select({
ios: {
shadowOpacity: 0.25,
shadowRadius: 8,
shadowColor: '#000000',
shadowOffset: { height: 12, width: 0 }
},
android: {
elevation: 10
}
})
}}>
{salesData.map(
(data, index) => {
return (
<View style={{ flexDirection: 'column', justifyContent: 'space-evenly', alignItems: 'center' }} key={index}>
<Ripple rippleContainerBorderRadius={hp('4%')} onPress={() => this.navigateTo(data)} key={index}
style={{
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
width: hp('8%'),
height: hp('8%'),
borderRadius: hp('4%'),
borderWidth: 1,
borderColor: '#808080'
}} >
<View style={{
justifyContent: 'center', alignItems: 'center',
}}>
{!_.has(data, 'svg') && <IconCustom
size={hp('4.5%')}
icon={data.icon}
type={data.type}
style={{ color: '#231F20', opacity: 0.6 }}
/>}
{_.has(data, 'svg') &&
<SvgCss xml={data.svg} width={hp('5%')} height={hp('5%')} />
}
</View>
</Ripple>
<View style={{ marginTop: 5, alignItems: 'center' }}>
<RegularText text={data.title} textColor='#231F20' style={{ fontSize: hp('1.5%'), }} />
<RegularText text={data.subTitle} textColor='#231F20' style={{ fontSize: hp('1.5%'), }} />
</View>
</View>
)
}
)}
</View>
<View style={{
marginTop: '5%',
height: hp('40%'), width: wp('100%') - 40, borderRadius: hp('2%'), backgroundColor: '#fff',
flexDirection: "column", justifyContent: 'space-around', alignItems: 'center', ...Platform.select({
ios: {
shadowOpacity: 0.25,
shadowRadius: 8,
shadowColor: '#000000',
shadowOffset: { height: 12, width: 0 }
},
android: {
elevation: 10
}
})
}}>
<TouchableOpacity style={styles.filterButton} onPress={this.toggleModal}>
<Icon name="calendar" size={24} color="black" />
<Text style={styles.filterText}>{selectedFilter}</Text>
<Icon name="chevron-down" size={24} color="black" />
</TouchableOpacity>
<LineChart
data={chartData}
width={350}
height={200}
chartConfig={chartConfig}
withInnerLines={true}
withOuterLines={true}
/>
<View style={{ flexDirection: 'column',marginBottom:'5%' }}>
<Text style={{ fontSize:Platform.OS!=='ios'?wp('3.5%'):'5%',color:'#0a0ae6' }}>Average Sales Value: PGK {avgSale}</Text>
<Text style={{ fontSize:Platform.OS!=='ios'?wp('3.5%'):'5%',color:'#0a0ae6' }}>Average Iteams Per Sale: {avgItemsPerSale}</Text>
</View>
</View>
</View>
</View>
</ScrollView>
<Modal
isVisible={isModalVisible}
onBackdropPress={this.toggleModal}
style={styles.modal}
>
<View style={styles.modalContent}>
{items.map((item, index) => (
<TouchableOpacity key={index} style={styles.modalItem} onPress={() => this.handleFilterChange(item.value)}>
<Text style={styles.modalItemText}>{item.label}</Text>
</TouchableOpacity>
))}
</View>
</Modal>
</View>
)
}
}
const styles = StyleSheet.create({
filterButton: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#fafafa',
padding: 10,
borderRadius: 5,
width: '60%',
justifyContent: 'space-between',
marginTop:'3%'
},
filterText: {
fontSize: 16,
marginLeft: 10,
},
modal: {
justifyContent: 'flex-end',
margin: 0,
},
modalContent: {
backgroundColor: 'white',
padding: 20,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
modalItem: {
paddingVertical: 15,
borderBottomWidth: 1,
borderBottomColor: '#ddd',
},
modalItemText: {
fontSize: 18,
},
});
export default BMobileDashboard;
Please help Thanks