Skip to content
This repository has been archived by the owner on Sep 17, 2021. It is now read-only.

added pie animation #227

Merged
merged 3 commits into from
Feb 19, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Logs
logs
*.log
.history

# Runtime data
pids
Expand Down
6 changes: 6 additions & 0 deletions example/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import SideMenu from 'react-native-side-menu'
import BarChartColumnBasic from './bar/BarChartColumnBasic'

import PieChartBasic from './pie/PieChartBasic'
import PieChartBasicAnimation from './pie/PieChartBasicAnimation'

import StockLineChartBasic from './stockline/StockLineChartBasic'
import StockLineChartStaticTickLabels from './stockline/StockLineChartStaticTickLabels'
Expand Down Expand Up @@ -71,6 +72,10 @@ class HomeScreen extends React.Component {
onPress={() => navigate('PieChartBasic')}
title="Pie - Basic"
/>
<Button
onPress={() => navigate('PieChartBasicAnimation')}
title="Pie - Basic Animation"
/>
<Button
onPress={() => navigate('StockLineChartBasic')}
title="StockLine - Basic"
Expand Down Expand Up @@ -124,6 +129,7 @@ const App = StackNavigator({
Home: { screen: HomeScreen },
BarChartColumnBasic: { screen: BarChartColumnBasic },
PieChartBasic: { screen: PieChartBasic },
PieChartBasicAnimation: { screen: PieChartBasicAnimation },
StockLineChartBasic: { screen: StockLineChartBasic },
StockLineChartStaticTickLabels: { screen: StockLineChartStaticTickLabels },
StockLineChartDynamicTickLabels: { screen: StockLineChartDynamicTickLabels },
Expand Down
118 changes: 118 additions & 0 deletions example/src/pie/PieChartBasicAnimation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
/*
Copyright 2016 Capital One Services, LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations under the License.

SPDX-Copyright: Copyright (c) Capital One Services, LLC
SPDX-License-Identifier: Apache-2.0
*/

'use strict'

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

import { Pie } from 'react-native-pathjs-charts'

const styles = StyleSheet.create({
container: {

flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f7f7f7',
},
});

class PieChartBasicAnimation extends Component {
static navigationOptions = ({ navigation }) => ({
title: `Pie - Basic - Animation`,
});
render() {
let data = [{
"name": "Washington",
"population": 7694980
},
{
"name": "Oregon",
"population": 2584160
}, {
"name": "Minnesota",
"population": 6590667,
"color": {'r':223,'g':154,'b':20}
}, {
"name": "Alaska",
"population": 7284698
}
]

let options = {
margin: {
top: 20,
left: 20,
right: 20,
bottom: 20
},
width: 350,
height: 350,
color: '#2980B9',
r: 50,
R: 150,
legendPosition: 'topLeft',
animate: {
enabled: true,
type: 'oneByOne',
duration: 200,
fillTransition: 3
},
label: {
fontFamily: 'Arial',
fontSize: 8,
fontWeight: true,
color: '#ECF0F1'
}
}

return (
<View style={styles.container}>
<Pie data={data}

options={options}
accessorKey="population"
margin={{ top: 20, left: 20, right: 20, bottom: 20 }}
color="#2980B9"
pallete={
[
{ 'r': 25, 'g': 99, 'b': 201 },
{ 'r': 24, 'g': 175, 'b': 35 },
{ 'r': 190, 'g': 31, 'b': 69 },
{ 'r': 100, 'g': 36, 'b': 199 },
{ 'r': 214, 'g': 207, 'b': 32 },
{ 'r': 198, 'g': 84, 'b': 45 }
]
}
r={50}
R={150}
legendPosition="topLeft"
label={{
fontFamily: 'Arial',
fontSize: 8,
fontWeight: true,
color: '#ECF0F1'
}}
/>
</View>
)
}
}

export default PieChartBasicAnimation;
Loading