@wavemaker/react-native-echarts 1.0.0-dev.4 → 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.
Files changed (2) hide show
  1. package/README.md +182 -36
  2. package/package.json +7 -4
package/README.md CHANGED
@@ -34,9 +34,23 @@ Preview thumbnails for the chart examples in `assets/images/charts`. Each image
34
34
  <table>
35
35
  <tbody>
36
36
  <tr>
37
- <td align="center"><img src="assets/images/charts/area/default.png" width="200" height="200" alt="Default" style="object-fit: contain;" /><br /><sub>Default</sub></td>
38
- <td align="center"><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></td>
39
- <td align="center"><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></td>
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>
40
54
  </tr>
41
55
  </tbody>
42
56
  </table>
@@ -46,9 +60,21 @@ Preview thumbnails for the chart examples in `assets/images/charts`. Each image
46
60
  <table>
47
61
  <tbody>
48
62
  <tr>
49
- <td align="center"><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></td>
50
- <td align="center"><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></td>
51
- <td align="center"><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></td>
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>
52
78
  </tr>
53
79
  </tbody>
54
80
  </table>
@@ -58,9 +84,21 @@ Preview thumbnails for the chart examples in `assets/images/charts`. Each image
58
84
  <table>
59
85
  <tbody>
60
86
  <tr>
61
- <td align="center"><img src="assets/images/charts/bubble/default.png" width="200" height="200" alt="Bubble chart default" style="object-fit: contain;" /><br /><sub>default</sub></td>
62
- <td align="center"><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></td>
63
- <td align="center"><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></td>
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>
64
102
  </tr>
65
103
  </tbody>
66
104
  </table>
@@ -70,9 +108,21 @@ Preview thumbnails for the chart examples in `assets/images/charts`. Each image
70
108
  <table>
71
109
  <tbody>
72
110
  <tr>
73
- <td align="center"><img src="assets/images/charts/candle-stick/default.png" width="200" height="200" alt="Candlestick default" style="object-fit: contain;" /><br /><sub>default</sub></td>
74
- <td align="center"><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></td>
75
- <td align="center"><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></td>
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>
76
126
  </tr>
77
127
  </tbody>
78
128
  </table>
@@ -82,9 +132,21 @@ Preview thumbnails for the chart examples in `assets/images/charts`. Each image
82
132
  <table>
83
133
  <tbody>
84
134
  <tr>
85
- <td align="center"><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></td>
86
- <td align="center"><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></td>
87
- <td align="center"><img src="assets/images/charts/column/standard.png" width="200" height="200" alt="Standard column chart" style="object-fit: contain;" /><br /><sub>standard</sub></td>
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>
88
150
  </tr>
89
151
  </tbody>
90
152
  </table>
@@ -94,9 +156,21 @@ Preview thumbnails for the chart examples in `assets/images/charts`. Each image
94
156
  <table>
95
157
  <tbody>
96
158
  <tr>
97
- <td align="center"><img src="assets/images/charts/geo/colors.png" width="200" height="200" alt="Geo chart colors" style="object-fit: contain;" /><br /><sub>colors</sub></td>
98
- <td align="center"><img src="assets/images/charts/geo/default.png" width="200" height="200" alt="Geo chart default" style="object-fit: contain;" /><br /><sub>default</sub></td>
99
- <td align="center"><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></td>
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>
100
174
  </tr>
101
175
  </tbody>
102
176
  </table>
@@ -106,9 +180,21 @@ Preview thumbnails for the chart examples in `assets/images/charts`. Each image
106
180
  <table>
107
181
  <tbody>
108
182
  <tr>
109
- <td align="center"><img src="assets/images/charts/guage/digital.png" width="200" height="200" alt="Digital gauge" style="object-fit: contain;" /><br /><sub>digital</sub></td>
110
- <td align="center"><img src="assets/images/charts/guage/radial.png" width="200" height="200" alt="Radial gauge" style="object-fit: contain;" /><br /><sub>radial</sub></td>
111
- <td align="center"><img src="assets/images/charts/guage/simple.png" width="200" height="200" alt="Simple gauge" style="object-fit: contain;" /><br /><sub>simple</sub></td>
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>
112
198
  </tr>
113
199
  </tbody>
114
200
  </table>
@@ -118,9 +204,21 @@ Preview thumbnails for the chart examples in `assets/images/charts`. Each image
118
204
  <table>
119
205
  <tbody>
120
206
  <tr>
121
- <td align="center"><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></td>
122
- <td align="center"><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></td>
123
- <td align="center"><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></td>
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>
124
222
  </tr>
125
223
  </tbody>
126
224
  </table>
@@ -130,9 +228,21 @@ Preview thumbnails for the chart examples in `assets/images/charts`. Each image
130
228
  <table>
131
229
  <tbody>
132
230
  <tr>
133
- <td align="center"><img src="assets/images/charts/pie/concentric.png" width="200" height="200" alt="Concentric pie chart" style="object-fit: contain;" /><br /><sub>concentric</sub></td>
134
- <td align="center"><img src="assets/images/charts/pie/donut.png" width="200" height="200" alt="Donut chart" style="object-fit: contain;" /><br /><sub>donut</sub></td>
135
- <td align="center"><img src="assets/images/charts/pie/pie.png" width="200" height="200" alt="Pie chart" style="object-fit: contain;" /><br /><sub>pie</sub></td>
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>
136
246
  </tr>
137
247
  </tbody>
138
248
  </table>
@@ -142,9 +252,21 @@ Preview thumbnails for the chart examples in `assets/images/charts`. Each image
142
252
  <table>
143
253
  <tbody>
144
254
  <tr>
145
- <td align="center"><img src="assets/images/charts/radar/default.png" width="200" height="200" alt="Radar chart default" style="object-fit: contain;" /><br /><sub>default</sub></td>
146
- <td align="center"><img src="assets/images/charts/radar/multiple.png" width="200" height="200" alt="Multiple radar chart" style="object-fit: contain;" /><br /><sub>multiple</sub></td>
147
- <td align="center"><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></td>
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>
148
270
  </tr>
149
271
  </tbody>
150
272
  </table>
@@ -154,9 +276,21 @@ Preview thumbnails for the chart examples in `assets/images/charts`. Each image
154
276
  <table>
155
277
  <tbody>
156
278
  <tr>
157
- <td align="center"><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></td>
158
- <td align="center"><img src="assets/images/charts/radial/default.png" width="200" height="200" alt="Radial chart default" style="object-fit: contain;" /><br /><sub>default</sub></td>
159
- <td align="center"><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></td>
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>
160
294
  </tr>
161
295
  </tbody>
162
296
  </table>
@@ -166,9 +300,21 @@ Preview thumbnails for the chart examples in `assets/images/charts`. Each image
166
300
  <table>
167
301
  <tbody>
168
302
  <tr>
169
- <td align="center"><img src="assets/images/charts/scatter/default.png" width="200" height="200" alt="Scatter chart default" style="object-fit: contain;" /><br /><sub>default</sub></td>
170
- <td align="center"><img src="assets/images/charts/scatter/multi.png" width="200" height="200" alt="Multi scatter chart" style="object-fit: contain;" /><br /><sub>multi</sub></td>
171
- <td align="center"><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></td>
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>
172
318
  </tr>
173
319
  </tbody>
174
320
  </table>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wavemaker/react-native-echarts",
3
- "version": "1.0.0-dev.4",
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
  }