mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
831 lines
38 KiB
TypeScript
831 lines
38 KiB
TypeScript
import {
|
|
LineChart,
|
|
ChartSelectEvent,
|
|
BarChart,
|
|
BubbleChart,
|
|
CandleStickChart,
|
|
HorizontalBarChart,
|
|
CombinedChart,
|
|
PieChart,
|
|
} from 'react-native-charts-wrapper';
|
|
import * as React from 'react';
|
|
import { View, processColor, StyleSheet } from 'react-native';
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#F5FCFF',
|
|
},
|
|
chart: {
|
|
flex: 1,
|
|
},
|
|
});
|
|
|
|
const COLOR_PURPLE = processColor('#697dfb');
|
|
|
|
function _randomYValues(range: number, size: number) {
|
|
const nextValueMaxDiff = 0.2;
|
|
const lastValue = range / 2;
|
|
|
|
return Array.from({ length: size })
|
|
.fill(0)
|
|
.map(() => {
|
|
const min = lastValue * (1 - nextValueMaxDiff);
|
|
const max = lastValue * (1 + nextValueMaxDiff);
|
|
return { y: Math.random() * (max - min) + min };
|
|
});
|
|
}
|
|
|
|
class AxisLineChartScreen extends React.Component {
|
|
handleSelect(event: ChartSelectEvent) {
|
|
console.log(event.nativeEvent);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<View>
|
|
<LineChart
|
|
data={{
|
|
dataSets: [
|
|
{
|
|
values: _randomYValues(100, 30),
|
|
label: '',
|
|
config: {
|
|
lineWidth: 1.5,
|
|
drawCircles: false,
|
|
drawCubicIntensity: 0.3,
|
|
drawHighlightIndicators: false,
|
|
color: COLOR_PURPLE,
|
|
drawFilled: true,
|
|
fillColor: COLOR_PURPLE,
|
|
fillAlpha: 90,
|
|
},
|
|
},
|
|
],
|
|
}}
|
|
chartDescription={{ text: '' }}
|
|
xAxis={{
|
|
textColor: processColor('red'),
|
|
textSize: 16,
|
|
gridColor: processColor('red'),
|
|
gridLineWidth: 1,
|
|
axisLineColor: processColor('darkgray'),
|
|
axisLineWidth: 1.5,
|
|
gridDashedLine: {
|
|
lineLength: 10,
|
|
spaceLength: 10,
|
|
},
|
|
avoidFirstLastClipping: true,
|
|
position: 'BOTTOM',
|
|
}}
|
|
yAxis={{
|
|
left: {
|
|
drawGridLines: false,
|
|
},
|
|
right: {
|
|
enabled: false,
|
|
},
|
|
}}
|
|
legend={{ enabled: false }}
|
|
onSelect={this.handleSelect.bind(this)}
|
|
onChange={event => console.log(event.nativeEvent)}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartScreen extends React.Component {
|
|
handleSelect(event: ChartSelectEvent) {
|
|
console.log(event.nativeEvent);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<View>
|
|
<BarChart
|
|
data={{
|
|
dataSets: [
|
|
{
|
|
values: [
|
|
{ y: 100 },
|
|
{ y: 105 },
|
|
{ y: 102 },
|
|
{ y: 110 },
|
|
{ y: 114 },
|
|
{ y: 109 },
|
|
{ y: 105 },
|
|
{ y: 99 },
|
|
{ y: 95 },
|
|
],
|
|
label: 'Bar dataSet',
|
|
config: {
|
|
color: processColor('teal'),
|
|
barShadowColor: processColor('lightgrey'),
|
|
highlightAlpha: 90,
|
|
highlightColor: processColor('red'),
|
|
},
|
|
},
|
|
],
|
|
|
|
config: {
|
|
barWidth: 0.7,
|
|
},
|
|
}}
|
|
xAxis={{
|
|
valueFormatter: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
|
|
granularityEnabled: true,
|
|
granularity: 1,
|
|
}}
|
|
animation={{ durationX: 2000 }}
|
|
legend={{
|
|
enabled: true,
|
|
textSize: 14,
|
|
form: 'SQUARE',
|
|
formSize: 14,
|
|
xEntrySpace: 10,
|
|
yEntrySpace: 5,
|
|
formToTextSpace: 5,
|
|
wordWrapEnabled: true,
|
|
maxSizePercent: 0.5,
|
|
}}
|
|
gridBackgroundColor={processColor('#ffffff')}
|
|
visibleRange={{ x: { min: 5, max: 5 } }}
|
|
drawBarShadow={false}
|
|
drawValueAboveBar={true}
|
|
onSelect={this.handleSelect.bind(this)}
|
|
highlights={[{ x: 3 }, { x: 6 }]}
|
|
onChange={event => console.log(event.nativeEvent)}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
function _randomYSizeValues(range: number, size: number) {
|
|
return Array.from({ length: size })
|
|
.fill(0)
|
|
.map(() => {
|
|
return {
|
|
y: Math.random() * range,
|
|
size: Math.random() * range,
|
|
};
|
|
});
|
|
}
|
|
|
|
class BubbleChartScreen extends React.Component {
|
|
handleSelect(event: ChartSelectEvent) {
|
|
console.log(event.nativeEvent);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<View>
|
|
<BubbleChart
|
|
data={{
|
|
dataSets: [
|
|
{
|
|
values: _randomYSizeValues(20, 10),
|
|
label: 'DS 1',
|
|
config: {
|
|
color: processColor('#C0FF8C'),
|
|
highlightCircleWidth: 2,
|
|
},
|
|
},
|
|
{
|
|
values: _randomYSizeValues(20, 10),
|
|
label: 'DS 2',
|
|
config: {
|
|
color: processColor('#FFF78C'),
|
|
},
|
|
},
|
|
{
|
|
values: _randomYSizeValues(20, 10),
|
|
label: 'DS 3',
|
|
config: {
|
|
color: processColor('#FFD08C'),
|
|
},
|
|
},
|
|
],
|
|
}}
|
|
legend={{
|
|
enabled: true,
|
|
textSize: 14,
|
|
form: 'CIRCLE',
|
|
wordWrapEnabled: true,
|
|
}}
|
|
animation={{
|
|
durationX: 1500,
|
|
durationY: 1500,
|
|
easingX: 'EaseInCirc',
|
|
}}
|
|
onSelect={this.handleSelect.bind(this)}
|
|
onChange={event => console.log(event.nativeEvent)}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
class CandleStickChartScreen extends React.Component {
|
|
handleSelect(event: ChartSelectEvent) {
|
|
console.log(event.nativeEvent);
|
|
}
|
|
render() {
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<View>
|
|
<CandleStickChart
|
|
data={{
|
|
dataSets: [
|
|
{
|
|
values: [
|
|
{ shadowH: 101.76, shadowL: 100.4, open: 100.78, close: 101.03 },
|
|
{ shadowH: 101.58, shadowL: 100.27, open: 101.31, close: 101.12 },
|
|
{ shadowH: 102.24, shadowL: 100.15, open: 101.41, close: 101.17 },
|
|
{ shadowH: 102.28, shadowL: 101.5, open: 102.24, close: 102.23 },
|
|
{ shadowH: 102.91, shadowL: 101.78, open: 101.91, close: 102.52 },
|
|
{ shadowH: 105.18, shadowL: 103.85, open: 103.96, close: 104.58 },
|
|
{ shadowH: 106.31, shadowL: 104.59, open: 104.61, close: 105.97 },
|
|
{ shadowH: 106.47, shadowL: 104.96, open: 105.52, close: 105.8 },
|
|
{ shadowH: 106.5, shadowL: 105.19, open: 106.34, close: 105.92 },
|
|
{ shadowH: 107.65, shadowL: 105.1401, open: 105.93, close: 105.91 },
|
|
{ shadowH: 107.29, shadowL: 105.21, open: 105.25, close: 106.72 },
|
|
{ shadowH: 107.07, shadowL: 105.9, open: 106.48, close: 106.13 },
|
|
{ shadowH: 106.25, shadowL: 104.89, open: 105.47, close: 105.67 },
|
|
{ shadowH: 106.19, shadowL: 105.06, open: 106, close: 105.19 },
|
|
{ shadowH: 107.79, shadowL: 104.88, open: 104.89, close: 107.7 },
|
|
{ shadowH: 110.42, shadowL: 108.6, open: 108.65, close: 109.56 },
|
|
{ shadowH: 109.9, shadowL: 108.88, open: 109.72, close: 108.99 },
|
|
{ shadowH: 110, shadowL: 108.2, open: 108.78, close: 109.99 },
|
|
{ shadowH: 112.19, shadowL: 110.27, open: 110.42, close: 111.08 },
|
|
{ shadowH: 110.73, shadowL: 109.42, open: 109.51, close: 109.81 },
|
|
{ shadowH: 110.98, shadowL: 109.2, open: 110.23, close: 110.96 },
|
|
{ shadowH: 110.42, shadowL: 108.121, open: 109.95, close: 108.54 },
|
|
{ shadowH: 109.77, shadowL: 108.17, open: 108.91, close: 108.66 },
|
|
{ shadowH: 110.61, shadowL: 108.83, open: 108.97, close: 109.04 },
|
|
{ shadowH: 110.5, shadowL: 108.66, open: 109.34, close: 110.44 },
|
|
{ shadowH: 112.34, shadowL: 110.8, open: 110.8, close: 112.0192 },
|
|
{ shadowH: 112.39, shadowL: 111.33, open: 111.62, close: 112.1 },
|
|
{ shadowH: 112.3, shadowL: 109.73, open: 112.11, close: 109.85 },
|
|
{ shadowH: 108.95, shadowL: 106.94, open: 108.89, close: 107.48 },
|
|
{ shadowH: 108, shadowL: 106.23, open: 107.88, close: 106.91 },
|
|
{ shadowH: 108.09, shadowL: 106.06, open: 106.64, close: 107.13 },
|
|
{ shadowH: 106.93, shadowL: 105.52, open: 106.93, close: 105.97 },
|
|
{ shadowH: 106.48, shadowL: 104.62, open: 105.01, close: 105.68 },
|
|
{ shadowH: 105.65, shadowL: 104.51, open: 105, close: 105.08 },
|
|
{ shadowH: 105.3, shadowL: 103.91, open: 103.91, close: 104.35 },
|
|
{ shadowH: 98.71, shadowL: 95.68, open: 96, close: 97.82 },
|
|
{ shadowH: 97.88, shadowL: 94.25, open: 97.61, close: 94.8075 },
|
|
{ shadowH: 94.72, shadowL: 92.51, open: 93.99, close: 93.75 },
|
|
{ shadowH: 94.08, shadowL: 92.4, open: 93.965, close: 93.65 },
|
|
{ shadowH: 95.74, shadowL: 93.68, open: 94.2, close: 95.18 },
|
|
{ shadowH: 95.9, shadowL: 93.82, open: 95.2, close: 94.19 },
|
|
{ shadowH: 94.07, shadowL: 92.68, open: 94, close: 93.24 },
|
|
{ shadowH: 93.45, shadowL: 91.85, open: 93.37, close: 92.72 },
|
|
{ shadowH: 93.77, shadowL: 92.59, open: 93, close: 92.82 },
|
|
{ shadowH: 93.57, shadowL: 92.11, open: 93.33, close: 93.39 },
|
|
{ shadowH: 93.57, shadowL: 92.46, open: 93.48, close: 92.51 },
|
|
{ shadowH: 92.78, shadowL: 89.47, open: 92.72, close: 90.32 },
|
|
{ shadowH: 91.67, shadowL: 90, open: 90, close: 90.52 },
|
|
],
|
|
label: 'AAPL',
|
|
config: {
|
|
highlightColor: processColor('darkgray'),
|
|
|
|
shadowColor: processColor('black'),
|
|
shadowWidth: 1,
|
|
shadowColorSameAsCandle: true,
|
|
increasingColor: processColor('#71BD6A'),
|
|
increasingPaintStyle: 'FILL',
|
|
decreasingColor: processColor('#D14B5A'),
|
|
},
|
|
},
|
|
],
|
|
}}
|
|
marker={{
|
|
enabled: true,
|
|
markerColor: processColor('#2c3e50'),
|
|
textColor: processColor('white'),
|
|
}}
|
|
chartDescription={{ text: 'CandleStick' }}
|
|
legend={{
|
|
enabled: true,
|
|
textSize: 14,
|
|
form: 'CIRCLE',
|
|
wordWrapEnabled: true,
|
|
}}
|
|
xAxis={{
|
|
drawLabels: true,
|
|
drawGridLines: true,
|
|
position: 'BOTTOM',
|
|
yOffset: 5,
|
|
|
|
limitLines: Array.from({ length: 47 / 5 })
|
|
.fill(0)
|
|
.map((_, i) => {
|
|
return {
|
|
limit: 5 * (i + 1) + 0.5,
|
|
lineColor: processColor('darkgray'),
|
|
lineWidth: 1,
|
|
label: (i + 1).toString(),
|
|
};
|
|
}),
|
|
}}
|
|
yAxis={{
|
|
left: {
|
|
valueFormatter: '$ #',
|
|
limitLines: [
|
|
{
|
|
limit: 112.4,
|
|
lineColor: processColor('red'),
|
|
lineDashPhase: 2,
|
|
lineDashLengths: [10, 20],
|
|
},
|
|
{
|
|
limit: 89.47,
|
|
lineColor: processColor('red'),
|
|
lineDashPhase: 2,
|
|
lineDashLengths: [10, 20],
|
|
},
|
|
],
|
|
},
|
|
right: {
|
|
enabled: false,
|
|
},
|
|
}}
|
|
maxVisibleValueCount={16}
|
|
autoScaleMinMaxEnabled={true}
|
|
// zoom={{scaleX: 2, scaleY: 1, xValue: 400000, yValue: 1}}
|
|
zoom={{ scaleX: 15.41, scaleY: 1, xValue: 40, yValue: 916, axisDependency: 'LEFT' }}
|
|
onSelect={this.handleSelect.bind(this)}
|
|
ref="chart"
|
|
onChange={event => console.log(event.nativeEvent)}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
class StackedBarChartScreen extends React.Component {
|
|
handleSelect(event: ChartSelectEvent) {
|
|
console.log(event.nativeEvent);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<View>
|
|
<BarChart
|
|
xAxis={{
|
|
valueFormatter: ['1990', '1991', '1992', '1993', '1994'],
|
|
granularityEnabled: true,
|
|
granularity: 1,
|
|
axisMaximum: 5,
|
|
axisMinimum: 0,
|
|
centerAxisLabels: true,
|
|
}}
|
|
data={{
|
|
dataSets: [
|
|
{
|
|
values: [5, 40, 77, 81, 43],
|
|
label: 'Company A',
|
|
config: {
|
|
drawValues: false,
|
|
colors: [processColor('red')],
|
|
},
|
|
},
|
|
{
|
|
values: [40, 5, 50, 23, 79],
|
|
label: 'Company B',
|
|
config: {
|
|
drawValues: false,
|
|
colors: [processColor('blue')],
|
|
},
|
|
},
|
|
{
|
|
values: [10, 55, 35, 90, 82],
|
|
label: 'Company C',
|
|
config: {
|
|
drawValues: false,
|
|
colors: [processColor('green')],
|
|
},
|
|
},
|
|
],
|
|
config: {
|
|
barWidth: 0.2,
|
|
group: {
|
|
fromX: 0,
|
|
groupSpace: 0.1,
|
|
barSpace: 0.1,
|
|
},
|
|
},
|
|
}}
|
|
legend={{
|
|
enabled: true,
|
|
textSize: 14,
|
|
form: 'SQUARE',
|
|
formSize: 14,
|
|
xEntrySpace: 10,
|
|
yEntrySpace: 5,
|
|
wordWrapEnabled: true,
|
|
}}
|
|
drawValueAboveBar={false}
|
|
onSelect={this.handleSelect.bind(this)}
|
|
onChange={event => console.log(event.nativeEvent)}
|
|
highlights={[
|
|
{ x: 1, y: 40 },
|
|
{ x: 2, y: 50 },
|
|
]}
|
|
marker={{
|
|
enabled: true,
|
|
markerColor: processColor('#F0C0FF8C'),
|
|
textColor: processColor('white'),
|
|
textSize: 14,
|
|
}}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
class HorizontalBarChartScreen extends React.Component {
|
|
handleSelect(event: ChartSelectEvent) {
|
|
console.log(event.nativeEvent);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<View style={styles.container}>
|
|
<HorizontalBarChart
|
|
style={styles.chart}
|
|
data={{
|
|
dataSets: [
|
|
{
|
|
values: [
|
|
{ y: 100 },
|
|
{ y: 105 },
|
|
{ y: 102 },
|
|
{ y: 110 },
|
|
{ y: 114 },
|
|
{ y: 109 },
|
|
{ y: 105 },
|
|
{ y: 99 },
|
|
{ y: 95 },
|
|
],
|
|
label: 'Bar dataSet',
|
|
config: {
|
|
color: processColor('teal'),
|
|
barShadowColor: processColor('lightgrey'),
|
|
highlightAlpha: 90,
|
|
highlightColor: processColor('red'),
|
|
},
|
|
},
|
|
],
|
|
}}
|
|
xAxis={{
|
|
valueFormatter: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
|
|
position: 'BOTTOM',
|
|
granularityEnabled: true,
|
|
granularity: 1,
|
|
labelCount: 10,
|
|
}}
|
|
yAxis={{ left: { axisMinimum: 0 } }}
|
|
animation={{ durationX: 2000 }}
|
|
legend={{
|
|
enabled: true,
|
|
textSize: 14,
|
|
form: 'SQUARE',
|
|
formSize: 14,
|
|
xEntrySpace: 10,
|
|
yEntrySpace: 5,
|
|
formToTextSpace: 5,
|
|
wordWrapEnabled: true,
|
|
maxSizePercent: 0.5,
|
|
}}
|
|
gridBackgroundColor={processColor('#ffffff')}
|
|
drawBarShadow={false}
|
|
drawValueAboveBar={true}
|
|
onSelect={this.handleSelect.bind(this)}
|
|
onChange={event => console.log(event.nativeEvent)}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
class Combined extends React.Component {
|
|
static displayName = 'Combined';
|
|
|
|
handleSelect(event: ChartSelectEvent) {
|
|
console.log(event.nativeEvent);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<View style={styles.container}>
|
|
<CombinedChart
|
|
data={{
|
|
barData: {
|
|
dataSets: [
|
|
{
|
|
values: [
|
|
{ y: [40, 30, 20], marker: ['row1', 'row2', 'row3'] },
|
|
{ y: [10, 20, 10], marker: 'second' },
|
|
{ y: [30, 20, 50], marker: ['hello', 'world', 'third'] },
|
|
{ y: [30, 50, 10], marker: 'fourth' },
|
|
],
|
|
label: 'Stacked Bar dataset',
|
|
config: {
|
|
colors: [
|
|
processColor('#C0FF8C'),
|
|
processColor('#FFF78C'),
|
|
processColor('#FFD08C'),
|
|
],
|
|
stackLabels: ['Engineering', 'Sales', 'Marketing'],
|
|
},
|
|
},
|
|
],
|
|
},
|
|
lineData: {
|
|
dataSets: [
|
|
{
|
|
values: [50, 100, 50, 100, 50],
|
|
label: 'Sine function',
|
|
|
|
config: {
|
|
drawValues: false,
|
|
colors: [processColor('green')],
|
|
mode: 'CUBIC_BEZIER',
|
|
drawCircles: false,
|
|
lineWidth: 2,
|
|
axisDependency: 'RIGHT',
|
|
},
|
|
},
|
|
{
|
|
values: [100, 50, 100, 50, 100],
|
|
label: 'Cosine function',
|
|
|
|
config: {
|
|
drawValues: false,
|
|
colors: [processColor('blue')],
|
|
mode: 'CUBIC_BEZIER',
|
|
drawCircles: false,
|
|
lineWidth: 2,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
bubbleData: {
|
|
dataSets: [
|
|
{
|
|
values: [
|
|
{
|
|
size: 2.3,
|
|
y: 180,
|
|
marker: 'marker 1',
|
|
},
|
|
{
|
|
size: 1.4,
|
|
y: 150,
|
|
marker: 'marker 2',
|
|
},
|
|
{
|
|
size: 2.0,
|
|
y: 106,
|
|
marker: 'marker 3',
|
|
},
|
|
{
|
|
size: 5.0,
|
|
y: 100,
|
|
},
|
|
{
|
|
size: 4.1,
|
|
y: 65,
|
|
},
|
|
],
|
|
label: 'Company A',
|
|
config: {
|
|
drawValues: false,
|
|
colors: [processColor('pink')],
|
|
axisDependency: 'RIGHT',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
candleData: {
|
|
dataSets: [
|
|
{
|
|
values: [
|
|
{
|
|
shadowH: 20,
|
|
shadowL: 5,
|
|
open: 15,
|
|
close: 10,
|
|
marker: 'marker 1',
|
|
},
|
|
{
|
|
shadowH: 30,
|
|
shadowL: 10,
|
|
open: 25,
|
|
close: 15,
|
|
marker: 'marker 1',
|
|
},
|
|
{
|
|
shadowH: 10,
|
|
shadowL: 5,
|
|
open: 15,
|
|
close: 10,
|
|
marker: 'marker 1',
|
|
},
|
|
{
|
|
shadowH: 50,
|
|
shadowL: 5,
|
|
open: 15,
|
|
close: 25,
|
|
},
|
|
],
|
|
label: 'Company A',
|
|
|
|
config: {
|
|
drawValues: false,
|
|
axisDependency: 'RIGHT',
|
|
highlightColor: processColor('darkgray'),
|
|
|
|
shadowColor: processColor('black'),
|
|
shadowWidth: 1,
|
|
shadowColorSameAsCandle: true,
|
|
increasingColor: processColor('yellow'),
|
|
increasingPaintStyle: 'FILL',
|
|
decreasingColor: processColor('green'),
|
|
},
|
|
},
|
|
],
|
|
},
|
|
scatterData: {
|
|
dataSets: [
|
|
{
|
|
values: [15, 40, 77, 81, 43],
|
|
label: 'Company A',
|
|
|
|
config: {
|
|
colors: [processColor('purple')],
|
|
drawValues: false,
|
|
scatterShape: 'SQUARE',
|
|
},
|
|
},
|
|
{
|
|
values: [40, 5, 50, 23, 79],
|
|
label: 'Company B',
|
|
|
|
config: {
|
|
drawValues: false,
|
|
colors: [processColor('grey')],
|
|
scatterShape: 'CIRCLE',
|
|
},
|
|
},
|
|
{
|
|
values: [10, 55, 35, 90, 82],
|
|
label: 'Company C',
|
|
|
|
config: {
|
|
drawValues: false,
|
|
axisDependency: 'RIGHT',
|
|
colors: [processColor('brown')],
|
|
scatterShape: 'TRIANGLE',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
}}
|
|
xAxis={{
|
|
valueFormatter: ['1990', '1991', '1992', '1993', '1994'],
|
|
granularityEnabled: true,
|
|
granularity: 1,
|
|
}}
|
|
yAxis={{
|
|
left: {
|
|
granularityEnabled: true,
|
|
granularity: 10,
|
|
},
|
|
right: {
|
|
granularityEnabled: true,
|
|
granularity: 100,
|
|
},
|
|
}}
|
|
onSelect={this.handleSelect.bind(this)}
|
|
onChange={event => console.log(event.nativeEvent)}
|
|
marker={{
|
|
enabled: true,
|
|
markerColor: processColor('#F0C0FF8C'),
|
|
textColor: processColor('white'),
|
|
textSize: 14,
|
|
}}
|
|
highlights={[
|
|
{ x: 1, y: 150, dataIndex: 4 },
|
|
{ x: 2, y: 106, dataIndex: 4 },
|
|
]}
|
|
highlightFullBarEnabled={false}
|
|
drawOrder={['SCATTER', 'LINE', 'BAR']}
|
|
style={styles.container}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
class PieChartScreen extends React.Component {
|
|
handleSelect(event: ChartSelectEvent) {
|
|
console.log(event.nativeEvent);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<View style={styles.container}>
|
|
<PieChart
|
|
style={styles.chart}
|
|
logEnabled={true}
|
|
chartBackgroundColor={processColor('pink')}
|
|
chartDescription={{
|
|
text: 'This is Pie chart description',
|
|
textSize: 15,
|
|
textColor: processColor('darkgray'),
|
|
}}
|
|
data={{
|
|
dataSets: [
|
|
{
|
|
values: [
|
|
{ value: 45, label: 'Sandwiches' },
|
|
{ value: 21, label: 'Salads' },
|
|
{ value: 15, label: 'Soup' },
|
|
{ value: 9, label: 'Beverages' },
|
|
{ value: 15, label: 'Desserts' },
|
|
],
|
|
label: 'Pie dataset',
|
|
config: {
|
|
colors: [
|
|
processColor('#C0FF8C'),
|
|
processColor('#FFF78C'),
|
|
processColor('#FFD08C'),
|
|
processColor('#8CEAFF'),
|
|
processColor('#FF8C9D'),
|
|
],
|
|
valueTextSize: 20,
|
|
valueTextColor: processColor('green'),
|
|
sliceSpace: 5,
|
|
selectionShift: 13,
|
|
xValuePosition: "OUTSIDE_SLICE",
|
|
yValuePosition: "OUTSIDE_SLICE",
|
|
valueFormatter: "#.#'%'",
|
|
valueLineColor: processColor('green'),
|
|
valueLinePart1Length: 0.5,
|
|
},
|
|
},
|
|
],
|
|
}}
|
|
legend={{
|
|
enabled: true,
|
|
textSize: 15,
|
|
form: 'CIRCLE',
|
|
|
|
horizontalAlignment: 'RIGHT',
|
|
verticalAlignment: 'CENTER',
|
|
orientation: 'VERTICAL',
|
|
wordWrapEnabled: true,
|
|
}}
|
|
highlights={[{ x: 2 }]}
|
|
entryLabelColor={processColor('green')}
|
|
entryLabelTextSize={20}
|
|
drawEntryLabels={true}
|
|
rotationEnabled={true}
|
|
rotationAngle={45}
|
|
usePercentValues={true}
|
|
styledCenterText={{ text: 'Pie center text!', color: processColor('pink'), size: 20 }}
|
|
centerTextRadiusPercent={100}
|
|
holeRadius={40}
|
|
holeColor={processColor('#f0f0f0')}
|
|
transparentCircleRadius={45}
|
|
transparentCircleColor={processColor('#f0f0f088')}
|
|
maxAngle={350}
|
|
onSelect={this.handleSelect.bind(this)}
|
|
onChange={event => console.log(event.nativeEvent)}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|