@wavemaker/react-native-echarts 1.0.0-dev.3 → 1.0.0-dev.4

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 +185 -0
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,7 +1,178 @@
1
1
  # @wavemaker/react-native-echarts
2
2
 
3
+ [![npm package](https://img.shields.io/npm/v/%40wavemaker%2Freact-native-echarts)](https://www.npmjs.com/package/@wavemaker/react-native-echarts)
4
+ [![MIT License](https://img.shields.io/github/license/wavemaker/wm-react-native-echarts)](https://github.com/wavemaker/wm-react-native-echarts/blob/main/LICENSE)
5
+
6
+ [![npm downloads](https://img.shields.io/npm/dm/%40wavemaker%2Freact-native-echarts)](https://www.npmjs.com/package/@wavemaker/react-native-echarts)
7
+ [![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)](https://github.com/wavemaker/wm-react-native-echarts)
8
+ [![Storybook](https://img.shields.io/badge/Storybook-FF4785?logo=storybook&logoColor=white)](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"><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>
40
+ </tr>
41
+ </tbody>
42
+ </table>
43
+
44
+ ### Bar
45
+
46
+ <table>
47
+ <tbody>
48
+ <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>
52
+ </tr>
53
+ </tbody>
54
+ </table>
55
+
56
+ ### Bubble
57
+
58
+ <table>
59
+ <tbody>
60
+ <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>
64
+ </tr>
65
+ </tbody>
66
+ </table>
67
+
68
+ ### Candlestick
69
+
70
+ <table>
71
+ <tbody>
72
+ <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>
76
+ </tr>
77
+ </tbody>
78
+ </table>
79
+
80
+ ### Column
81
+
82
+ <table>
83
+ <tbody>
84
+ <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>
88
+ </tr>
89
+ </tbody>
90
+ </table>
91
+
92
+ ### Geo
93
+
94
+ <table>
95
+ <tbody>
96
+ <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>
100
+ </tr>
101
+ </tbody>
102
+ </table>
103
+
104
+ ### Gauge
105
+
106
+ <table>
107
+ <tbody>
108
+ <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>
112
+ </tr>
113
+ </tbody>
114
+ </table>
115
+
116
+ ### Line
117
+
118
+ <table>
119
+ <tbody>
120
+ <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>
124
+ </tr>
125
+ </tbody>
126
+ </table>
127
+
128
+ ### Pie
129
+
130
+ <table>
131
+ <tbody>
132
+ <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>
136
+ </tr>
137
+ </tbody>
138
+ </table>
139
+
140
+ ### Radar
141
+
142
+ <table>
143
+ <tbody>
144
+ <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>
148
+ </tr>
149
+ </tbody>
150
+ </table>
151
+
152
+ ### Radial
153
+
154
+ <table>
155
+ <tbody>
156
+ <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>
160
+ </tr>
161
+ </tbody>
162
+ </table>
163
+
164
+ ### Scatter
165
+
166
+ <table>
167
+ <tbody>
168
+ <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>
172
+ </tr>
173
+ </tbody>
174
+ </table>
175
+
5
176
  ---
6
177
 
7
178
  ## Building the library (maintainers)
@@ -32,6 +203,20 @@ npm run storybook # to checout the component stories
32
203
 
33
204
  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
205
 
206
+ ### Contributors
207
+
208
+ <table>
209
+ <tbody>
210
+ <tr>
211
+ <td align="center" width="96">
212
+ <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>
213
+ </td>
214
+ </tr>
215
+ </tbody>
216
+ </table>
217
+
218
+
219
+
35
220
  ---
36
221
 
37
222
  ## 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",
3
+ "version": "1.0.0-dev.4",
4
4
  "description": "React Native chart components built on using e-charts library.",
5
5
  "license": "MIT",
6
6
  "repository": {