import React, {useState} from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
SafeAreaView,
ScrollView,
} from 'react-native';
import SimpleBlueBars from './BarChart/SimpleBlueBars';
import BarThreeD from './BarChart/BarThreeD';
import SimpleBarAnimated from './BarChart/SimpleBarAnimated';
import RoundStackBar from './BarChart/RoundStackBar';
import CappedBars from './BarChart/CappedBars';
import BarWithGradient from './BarChart/BarWithGradient';
import LineChartTwo from './LineChart/LineChartTwo';
import AnimatedArea from './LineChart/AnimatedArea';
import AreaTwo from './LineChart/AreaTwo';
import ChartWithPointer from './LineChart/ChartWithPointer';
import CaloriesBurnt from './LineChart/CaloriesBurnt';
import SimplePie from './PieChart/SimplePie';
import ProgressPie from './PieChart/ProgressPie';
import SplitPie from './PieChart/SplitPie';
import ThreeDPie from './PieChart/ThreeDPie';
import PieChartFocusOnPress from './PieChart/PieChartFocusOnPress';
const Examples = () => {
const [selectedFooterButton, setSelectedFooterButton] = useState(0);
const Header = () => {
const getTitle = () => {
switch (selectedFooterButton) {
case 0:
return 'Bar and Stacked Bar Charts';
case 1:
return 'Line and Area Charts';
case 2:
return 'Pie and Donut Charts';
}
};
return (
{getTitle()}
);
};
const Separator = () => ;
const BarAndStackCharts = () => {
return (
);
};
const LineAndAreaCharts = () => {
return (
);
};
const PieAndDonutCharts = () => {
return (
);
};
const SelectedIndexCharts = () => {
switch (selectedFooterButton) {
case 0:
return ;
case 1:
return ;
case 2:
return ;
}
};
const Body = () => {
return (
);
};
const Footer = () => {
const footerButtonStyle = index => [
styles.footerButton,
selectedFooterButton === index ? styles.footerButtonSelected : null,
];
return (
{selectedFooterButton === 0 ? (
) : null}
setSelectedFooterButton(0)}>
Bar
Stack
{selectedFooterButton === 1 ? (
) : null}
setSelectedFooterButton(1)}>
Line
Area
{selectedFooterButton === 2 ? (
) : null}
setSelectedFooterButton(2)}>
Pie
Donut
);
};
return (
);
};
const styles = StyleSheet.create({
container: {flex: 1, alignItems: 'center', backgroundColor: '#f5f5ff'},
header: {marginBottom: 20},
body: {
paddingLeft: 10,
width: '100%',
},
footer: {
position: 'absolute',
bottom: 0,
height: 60,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-evenly',
alignItems: 'center',
backgroundColor: '#334',
},
footerButtonContainer: {
alignItems: 'center',
},
connector: {
height: 8,
width: 60,
borderRadius: 0,
backgroundColor: '#f5f5ff',
},
footerButton: {
width: 60,
height: 40,
paddingHorizontal: 8,
borderRadius: 4,
backgroundColor: '#bbc',
justifyContent: 'center',
alignItems: 'center',
},
footerButtonSelected: {
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
backgroundColor: '#f5f5ff',
shadowColor: '#00ffe9',
shadowOffset: {width: 5, height: 5},
shadowOpacity: 0.5,
shadowRadius: 1,
elevation: 4,
},
});
export default Examples;