/
BasicArea.js
124 lines (115 loc) · 3.8 KB
/
BasicArea.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import React, { Component } from 'react';
import { Container } from '@sencha/ext-modern';
import { Cartesian } from '@sencha/ext-charts';
import ChartToolbar from '../../ChartToolbar';
import createData from './createData';
Ext.require([
'Ext.chart.theme.Midnight',
'Ext.chart.theme.Green',
'Ext.chart.theme.Muted',
'Ext.chart.theme.Purple',
'Ext.chart.theme.Sky',
'Ext.chart.series.Area',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category'
]);
export default class BasicAreaChartExample extends Component {
constructor() {
super();
this.refresh();
}
store = Ext.create('Ext.data.Store', {
fields: ['id', 'g0', 'g1', 'g2', 'g3', 'g4', 'g5', 'g6', 'name'],
});
state = {
theme: 'default'
};
refresh = () => {
this.store.loadData(createData(25));
}
changeTheme = (theme) => {
console.log(theme)
this.setState({ theme })
}
render() {
var { theme } = this.state
return (
<Container padding={!Ext.os.is.Phone && 10} layout="fit">
<ChartToolbar
onThemeChange={this.changeTheme}
onRefreshClick={this.refresh}
theme={theme}
/>
<Cartesian
shadow
downloadServerUrl='http://svg.sencha.io'
store={this.store}
theme={theme}
insetPadding="25 35 0 10"
platformConfig={{
phone: {
insetPadding: '15 5 0 0'
}
}}
legend={{
type: 'sprite',
position: 'bottom'
}}
interactions={[{
type: 'panzoom',
axes: {
left: {
allowPan: false,
allowZoom: false
},
bottom: {
allowPan: true,
allowZoom: true
}
}
}]}
series={[{
type: 'area',
xField: 'name',
yField: ['g1', 'g2', 'g3', 'g4', 'g5'],
title: ['G1', 'G2', 'G3', 'G4', 'G5'],
style: {
stroke: 'black',
lineWidth: 2,
fillOpacity: 0.8
}
}]}
axes={[{
type: 'numeric',
position: 'left',
fields: ['g1', 'g2', 'g3', 'g4', 'g5', 'g6'],
label: {
rotate: {
degrees: -30
}
},
grid: {
odd: {
fill: '#e8e8e8'
}
},
title: {
text: 'Summation of Data',
fontSize: 20
}
}, {
type: 'category',
position: 'bottom',
fields: 'name',
grid: true,
visibleRange: [0, 0.25],
title: {
text: theme,
fontSize: 20
}
}]}
/>
</Container>
)
}
}