@wavemaker/react-native-echarts 1.0.0-dev.3 → 1.0.0-dev.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +331 -0
- package/package.json +7 -4
package/README.md
CHANGED
|
@@ -1,7 +1,324 @@
|
|
|
1
1
|
# @wavemaker/react-native-echarts
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@wavemaker/react-native-echarts)
|
|
4
|
+
[](https://github.com/wavemaker/wm-react-native-echarts/blob/main/LICENSE)
|
|
5
|
+
|
|
6
|
+
[](https://www.npmjs.com/package/@wavemaker/react-native-echarts)
|
|
7
|
+
[](https://github.com/wavemaker/wm-react-native-echarts)
|
|
8
|
+
[](https://wavemaker.github.io/wm-react-native-echarts)
|
|
9
|
+
|
|
3
10
|
React Native chart components built with ECharts (via `@wuba/react-native-echarts`) and Skia. Works with Expo and bare React Native. Visit storybook at https://wavemaker.github.io/wm-react-native-echarts for more details on how to use and examples.
|
|
4
11
|
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
Install the package from npm:
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @wavemaker/react-native-echarts
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
The library declares peer dependencies. Add any your app does not already include (align versions with your React Native or Expo SDK):
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install @shopify/react-native-skia @wuba/react-native-echarts echarts zrender react-native-svg
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
`react` and `react-native` are also peers; they should already be present in your app.
|
|
27
|
+
|
|
28
|
+
## Chart gallery
|
|
29
|
+
|
|
30
|
+
Preview thumbnails for the chart examples in `assets/images/charts`. Each image uses the same width and height (200×200) so the layout stays even; `object-fit: contain` keeps aspect ratios readable.
|
|
31
|
+
|
|
32
|
+
### Area
|
|
33
|
+
|
|
34
|
+
<table>
|
|
35
|
+
<tbody>
|
|
36
|
+
<tr>
|
|
37
|
+
<td align="center">
|
|
38
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-area--axes-area" target="_blank">
|
|
39
|
+
<img src="assets/images/charts/area/default.png" width="200" height="200" alt="Default" style="object-fit: contain;" />
|
|
40
|
+
<br />
|
|
41
|
+
<sub>Default</sub>
|
|
42
|
+
</a>
|
|
43
|
+
</td>
|
|
44
|
+
<td align="center">
|
|
45
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-area--area-without-axes" target="_blank">
|
|
46
|
+
<img src="assets/images/charts/area/without-axes.png" width="200" height="200" alt="Witout axes" style="object-fit: contain;" /><br /><sub>Witout axes</sub>
|
|
47
|
+
</a>
|
|
48
|
+
</td>
|
|
49
|
+
<td align="center">
|
|
50
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-area--gradient-area" target="_blank">
|
|
51
|
+
<img src="assets/images/charts/area/with-gradient-bg.png" width="200" height="200" alt="With Gradient Bg" style="object-fit: contain;" /><br /><sub>With Gradient Bg</sub>
|
|
52
|
+
</a>
|
|
53
|
+
</td>
|
|
54
|
+
</tr>
|
|
55
|
+
</tbody>
|
|
56
|
+
</table>
|
|
57
|
+
|
|
58
|
+
### Bar
|
|
59
|
+
|
|
60
|
+
<table>
|
|
61
|
+
<tbody>
|
|
62
|
+
<tr>
|
|
63
|
+
<td align="center">
|
|
64
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-bar--horizontal-bar" target="_blank">
|
|
65
|
+
<img src="assets/images/charts/bar/horizontal-bar.png" width="200" height="200" alt="Horizontal bar chart" style="object-fit: contain;" /><br /><sub>horizontal-bar</sub>
|
|
66
|
+
</a>
|
|
67
|
+
</td>
|
|
68
|
+
<td align="center">
|
|
69
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-bar--custom-label-bar">
|
|
70
|
+
<img src="assets/images/charts/bar/labeled-bar.png" width="200" height="200" alt="Labeled bar chart" style="object-fit: contain;" /><br /><sub>labeled-bar</sub>
|
|
71
|
+
</a>
|
|
72
|
+
</td>
|
|
73
|
+
<td align="center">
|
|
74
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-bar--mixed-bar" target="_blank">
|
|
75
|
+
<img src="assets/images/charts/bar/mixed-bar.png" width="200" height="200" alt="Mixed bar chart" style="object-fit: contain;" /><br /><sub>mixed-bar</sub>
|
|
76
|
+
</a>
|
|
77
|
+
</td>
|
|
78
|
+
</tr>
|
|
79
|
+
</tbody>
|
|
80
|
+
</table>
|
|
81
|
+
|
|
82
|
+
### Bubble
|
|
83
|
+
|
|
84
|
+
<table>
|
|
85
|
+
<tbody>
|
|
86
|
+
<tr>
|
|
87
|
+
<td align="center">
|
|
88
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-bubble--default" target="_blank">
|
|
89
|
+
<img src="assets/images/charts/bubble/default.png" width="200" height="200" alt="Bubble chart default" style="object-fit: contain;" /><br /><sub>default</sub>
|
|
90
|
+
</a>
|
|
91
|
+
</td>
|
|
92
|
+
<td align="center">
|
|
93
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-bubble--show-legend">
|
|
94
|
+
<img src="assets/images/charts/bubble/multi-bubble.png" width="200" height="200" alt="Multi bubble chart" style="object-fit: contain;" /><br /><sub>multi-bubble</sub>
|
|
95
|
+
</a>
|
|
96
|
+
</td>
|
|
97
|
+
<td align="center">
|
|
98
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-bubble-symbol--pin" target="_blank">
|
|
99
|
+
<img src="assets/images/charts/bubble/pin-bublbe.png" width="200" height="200" alt="Bubble chart with pin" style="object-fit: contain;" /><br /><sub>pin-bublbe</sub>
|
|
100
|
+
</a>
|
|
101
|
+
</td>
|
|
102
|
+
</tr>
|
|
103
|
+
</tbody>
|
|
104
|
+
</table>
|
|
105
|
+
|
|
106
|
+
### Candlestick
|
|
107
|
+
|
|
108
|
+
<table>
|
|
109
|
+
<tbody>
|
|
110
|
+
<tr>
|
|
111
|
+
<td align="center">
|
|
112
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-candlestick--default" target="_blank">
|
|
113
|
+
<img src="assets/images/charts/candle-stick/default.png" width="200" height="200" alt="Candlestick default" style="object-fit: contain;" /><br /><sub>default</sub>
|
|
114
|
+
</a>
|
|
115
|
+
</td>
|
|
116
|
+
<td align="center">
|
|
117
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-candlestick--with-moving-average" target="_blank">
|
|
118
|
+
<img src="assets/images/charts/candle-stick/with-ma.png" width="200" height="200" alt="Candlestick with moving average" style="object-fit: contain;" /><br /><sub>with-ma</sub>
|
|
119
|
+
</a>
|
|
120
|
+
</td>
|
|
121
|
+
<td align="center">
|
|
122
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-candlestick--with-volume">
|
|
123
|
+
<img src="assets/images/charts/candle-stick/with-volume.png" width="200" height="200" alt="Candlestick with volume" style="object-fit: contain;" /><br /><sub>with-volume</sub>
|
|
124
|
+
</a>
|
|
125
|
+
</td>
|
|
126
|
+
</tr>
|
|
127
|
+
</tbody>
|
|
128
|
+
</table>
|
|
129
|
+
|
|
130
|
+
### Column
|
|
131
|
+
|
|
132
|
+
<table>
|
|
133
|
+
<tbody>
|
|
134
|
+
<tr>
|
|
135
|
+
<td align="center">
|
|
136
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-column--active-column">
|
|
137
|
+
<img src="assets/images/charts/column/active-column.png" width="200" height="200" alt="Active column chart" style="object-fit: contain;" /><br /><sub>active-column</sub>
|
|
138
|
+
</a>
|
|
139
|
+
</td>
|
|
140
|
+
<td align="center">
|
|
141
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-column--multiple-series">
|
|
142
|
+
<img src="assets/images/charts/column/multi-series.png" width="200" height="200" alt="Multi-series column chart" style="object-fit: contain;" /><br /><sub>multi-series</sub>
|
|
143
|
+
</a>
|
|
144
|
+
</td>
|
|
145
|
+
<td align="center">
|
|
146
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-column--standard-column">
|
|
147
|
+
<img src="assets/images/charts/column/standard.png" width="200" height="200" alt="Standard column chart" style="object-fit: contain;" /><br /><sub>standard</sub>
|
|
148
|
+
</a>
|
|
149
|
+
</td>
|
|
150
|
+
</tr>
|
|
151
|
+
</tbody>
|
|
152
|
+
</table>
|
|
153
|
+
|
|
154
|
+
### Geo
|
|
155
|
+
|
|
156
|
+
<table>
|
|
157
|
+
<tbody>
|
|
158
|
+
<tr>
|
|
159
|
+
<td align="center">
|
|
160
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-geo-colors--custom-colors" target="_blank">
|
|
161
|
+
<img src="assets/images/charts/geo/colors.png" width="200" height="200" alt="Geo chart colors" style="object-fit: contain;" /><br /><sub>colors</sub>
|
|
162
|
+
</a>
|
|
163
|
+
</td>
|
|
164
|
+
<td align="center">
|
|
165
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-geo--default" target="_blank">
|
|
166
|
+
<img src="assets/images/charts/geo/default.png" width="200" height="200" alt="Geo chart default" style="object-fit: contain;" /><br /><sub>default</sub>
|
|
167
|
+
</a>
|
|
168
|
+
</td>
|
|
169
|
+
<td align="center">
|
|
170
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-geo-map--presidential-results" target="_blank">
|
|
171
|
+
<img src="assets/images/charts/geo/us-map.png" width="200" height="200" alt="US map geo chart" style="object-fit: contain;" /><br /><sub>us-map</sub>
|
|
172
|
+
</a>
|
|
173
|
+
</td>
|
|
174
|
+
</tr>
|
|
175
|
+
</tbody>
|
|
176
|
+
</table>
|
|
177
|
+
|
|
178
|
+
### Gauge
|
|
179
|
+
|
|
180
|
+
<table>
|
|
181
|
+
<tbody>
|
|
182
|
+
<tr>
|
|
183
|
+
<td align="center">
|
|
184
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-gauge-digital--default" target="_blank">
|
|
185
|
+
<img src="assets/images/charts/guage/digital.png" width="200" height="200" alt="Digital gauge" style="object-fit: contain;" /><br /><sub>digital</sub>
|
|
186
|
+
</a>
|
|
187
|
+
</td>
|
|
188
|
+
<td align="center">
|
|
189
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-gauge-radial--custom-scale" target="_blank">
|
|
190
|
+
<img src="assets/images/charts/guage/radial.png" width="200" height="200" alt="Radial gauge" style="object-fit: contain;" /><br /><sub>radial</sub>
|
|
191
|
+
</a>
|
|
192
|
+
</td>
|
|
193
|
+
<td align="center">
|
|
194
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-gauge-simple--default" target="_blank">
|
|
195
|
+
<img src="assets/images/charts/guage/simple.png" width="200" height="200" alt="Simple gauge" style="object-fit: contain;" /><br /><sub>simple</sub>
|
|
196
|
+
</a>
|
|
197
|
+
</td>
|
|
198
|
+
</tr>
|
|
199
|
+
</tbody>
|
|
200
|
+
</table>
|
|
201
|
+
|
|
202
|
+
### Line
|
|
203
|
+
|
|
204
|
+
<table>
|
|
205
|
+
<tbody>
|
|
206
|
+
<tr>
|
|
207
|
+
<td align="center">
|
|
208
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-line--multiple-series" target="_blank">
|
|
209
|
+
<img src="assets/images/charts/line/multi-line.png" width="200" height="200" alt="Multi-line chart" style="object-fit: contain;" /><br /><sub>multi-line</sub>
|
|
210
|
+
</a>
|
|
211
|
+
</td>
|
|
212
|
+
<td align="center">
|
|
213
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-line--axes-line" target="_blank">
|
|
214
|
+
<img src="assets/images/charts/line/standard-line.png" width="200" height="200" alt="Standard line chart" style="object-fit: contain;" /><br /><sub>standard-line</sub>
|
|
215
|
+
</a>
|
|
216
|
+
</td>
|
|
217
|
+
<td align="center">
|
|
218
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/examples-line--default-line" target="_blank">
|
|
219
|
+
<img src="assets/images/charts/line/trend-line.png" width="200" height="200" alt="Trend line chart" style="object-fit: contain;" /><br /><sub>trend-line</sub>
|
|
220
|
+
</a>
|
|
221
|
+
</td>
|
|
222
|
+
</tr>
|
|
223
|
+
</tbody>
|
|
224
|
+
</table>
|
|
225
|
+
|
|
226
|
+
### Pie
|
|
227
|
+
|
|
228
|
+
<table>
|
|
229
|
+
<tbody>
|
|
230
|
+
<tr>
|
|
231
|
+
<td align="center">
|
|
232
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-pie-concentric--two-rings" target="_blank">
|
|
233
|
+
<img src="assets/images/charts/pie/concentric.png" width="200" height="200" alt="Concentric pie chart" style="object-fit: contain;" /><br /><sub>concentric</sub>
|
|
234
|
+
</a>
|
|
235
|
+
</td>
|
|
236
|
+
<td align="center">
|
|
237
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-pie-donut--donut" target="_blank">
|
|
238
|
+
<img src="assets/images/charts/pie/donut.png" width="200" height="200" alt="Donut chart" style="object-fit: contain;" /><br /><sub>donut</sub>
|
|
239
|
+
</a>
|
|
240
|
+
</td>
|
|
241
|
+
<td align="center">
|
|
242
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-pie--default" target="_blank">
|
|
243
|
+
<img src="assets/images/charts/pie/pie.png" width="200" height="200" alt="Pie chart" style="object-fit: contain;" /><br /><sub>pie</sub>
|
|
244
|
+
</a>
|
|
245
|
+
</td>
|
|
246
|
+
</tr>
|
|
247
|
+
</tbody>
|
|
248
|
+
</table>
|
|
249
|
+
|
|
250
|
+
### Radar
|
|
251
|
+
|
|
252
|
+
<table>
|
|
253
|
+
<tbody>
|
|
254
|
+
<tr>
|
|
255
|
+
<td align="center">
|
|
256
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-radar--default" target="_blank">
|
|
257
|
+
<img src="assets/images/charts/radar/default.png" width="200" height="200" alt="Radar chart default" style="object-fit: contain;" /><br /><sub>default</sub>
|
|
258
|
+
</a>
|
|
259
|
+
</td>
|
|
260
|
+
<td align="center">
|
|
261
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-radar-multiple--default" target="_blank">
|
|
262
|
+
<img src="assets/images/charts/radar/multiple.png" width="200" height="200" alt="Multiple radar chart" style="object-fit: contain;" /><br /><sub>multiple</sub>
|
|
263
|
+
</a>
|
|
264
|
+
</td>
|
|
265
|
+
<td align="center">
|
|
266
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-radar-symbol--circle" target="_blank">
|
|
267
|
+
<img src="assets/images/charts/radar/with-symbol.png" width="200" height="200" alt="Radar chart with symbol" style="object-fit: contain;" /><br /><sub>with-symbol</sub>
|
|
268
|
+
</a>
|
|
269
|
+
</td>
|
|
270
|
+
</tr>
|
|
271
|
+
</tbody>
|
|
272
|
+
</table>
|
|
273
|
+
|
|
274
|
+
### Radial
|
|
275
|
+
|
|
276
|
+
<table>
|
|
277
|
+
<tbody>
|
|
278
|
+
<tr>
|
|
279
|
+
<td align="center">
|
|
280
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-radial-colors--custom-colors" target="_blank">
|
|
281
|
+
<img src="assets/images/charts/radial/custom-colors.png" width="200" height="200" alt="Radial chart custom colors" style="object-fit: contain;" /><br /><sub>custom-colors</sub>
|
|
282
|
+
</a>
|
|
283
|
+
</td>
|
|
284
|
+
<td align="center">
|
|
285
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-radial--default" target="_blank">
|
|
286
|
+
<img src="assets/images/charts/radial/default.png" width="200" height="200" alt="Radial chart default" style="object-fit: contain;" /><br /><sub>default</sub>
|
|
287
|
+
</a>
|
|
288
|
+
</td>
|
|
289
|
+
<td align="center">
|
|
290
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-radial-colors--background" target="_blank">
|
|
291
|
+
<img src="assets/images/charts/radial/with-bg.png" width="200" height="200" alt="Radial chart with background" style="object-fit: contain;" /><br /><sub>with-bg</sub>
|
|
292
|
+
</a>
|
|
293
|
+
</td>
|
|
294
|
+
</tr>
|
|
295
|
+
</tbody>
|
|
296
|
+
</table>
|
|
297
|
+
|
|
298
|
+
### Scatter
|
|
299
|
+
|
|
300
|
+
<table>
|
|
301
|
+
<tbody>
|
|
302
|
+
<tr>
|
|
303
|
+
<td align="center">
|
|
304
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-scatter--default" target="_blank">
|
|
305
|
+
<img src="assets/images/charts/scatter/default.png" width="200" height="200" alt="Scatter chart default" style="object-fit: contain;" /><br /><sub>default</sub>
|
|
306
|
+
</a>
|
|
307
|
+
</td>
|
|
308
|
+
<td align="center">
|
|
309
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-scatter-colors--multiple-series-colors" target="_blank">
|
|
310
|
+
<img src="assets/images/charts/scatter/multi.png" width="200" height="200" alt="Multi scatter chart" style="object-fit: contain;" /><br /><sub>multi</sub>
|
|
311
|
+
</a>
|
|
312
|
+
</td>
|
|
313
|
+
<td align="center">
|
|
314
|
+
<a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-scatter-symbol--triangle" target="_blank">
|
|
315
|
+
<img src="assets/images/charts/scatter/with-symbol.png" width="200" height="200" alt="Scatter chart with symbol" style="object-fit: contain;" /><br /><sub>with-symbol</sub>
|
|
316
|
+
</a>
|
|
317
|
+
</td>
|
|
318
|
+
</tr>
|
|
319
|
+
</tbody>
|
|
320
|
+
</table>
|
|
321
|
+
|
|
5
322
|
---
|
|
6
323
|
|
|
7
324
|
## Building the library (maintainers)
|
|
@@ -32,6 +349,20 @@ npm run storybook # to checout the component stories
|
|
|
32
349
|
|
|
33
350
|
This package is maintained by [WaveMaker](https://www.wavemaker.com/). The source repository is [wavemaker/wm-react-native-echarts](https://github.com/wavemaker/wm-react-native-echarts). Use [GitHub Issues](https://github.com/wavemaker/wm-react-native-echarts/issues) for bug reports and feature requests.
|
|
34
351
|
|
|
352
|
+
### Contributors
|
|
353
|
+
|
|
354
|
+
<table>
|
|
355
|
+
<tbody>
|
|
356
|
+
<tr>
|
|
357
|
+
<td align="center" width="96">
|
|
358
|
+
<a href="https://github.com/sboyina"><img src="https://avatars.githubusercontent.com/u/2254369?s=96&v=4" width="72" height="72" alt="sboyina" style="border-radius: 50%;" /><br /><sub><b>sboyina</b></sub></a>
|
|
359
|
+
</td>
|
|
360
|
+
</tr>
|
|
361
|
+
</tbody>
|
|
362
|
+
</table>
|
|
363
|
+
|
|
364
|
+
|
|
365
|
+
|
|
35
366
|
---
|
|
36
367
|
|
|
37
368
|
## License
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wavemaker/react-native-echarts",
|
|
3
|
-
"version": "1.0.0-dev.
|
|
3
|
+
"version": "1.0.0-dev.5",
|
|
4
4
|
"description": "React Native chart components built on using e-charts library.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -33,11 +33,14 @@
|
|
|
33
33
|
"react": "*",
|
|
34
34
|
"react-native": "*",
|
|
35
35
|
"@shopify/react-native-skia": "*",
|
|
36
|
-
"@wuba/react-native-echarts": "
|
|
37
|
-
"echarts": "
|
|
36
|
+
"@wuba/react-native-echarts": "^3.0.1",
|
|
37
|
+
"echarts": "^6.0.0",
|
|
38
38
|
"zrender": "*",
|
|
39
39
|
"react-native-svg": "*"
|
|
40
40
|
},
|
|
41
|
-
"dependencies": {
|
|
41
|
+
"dependencies": {
|
|
42
|
+
"@wuba/react-native-echarts": "^3.0.1",
|
|
43
|
+
"echarts": "^6.0.0"
|
|
44
|
+
},
|
|
42
45
|
"private": false
|
|
43
46
|
}
|