amazing-react-charts 0.7.1 → 0.7.3

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 (6) hide show
  1. package/dist/core/ForecastAreaChart.js +1 -1
  2. package/dist/core/VerticalBarChart.js +2 -1
  3. package/package.json +1 -1
  4. package/src/core/ForecastAreaChart.tsx +4 -4
  5. package/src/core/VerticalBarChart.tsx +4 -1
  6. package/src/docz/VerticalBarChart.mdx +223 -191
package/dist/core/ForecastAreaChart.js CHANGED
@@ -238,7 +238,7 @@ var ForecastAreaChart = function ForecastAreaChart(props) {
238
238
  axisLabel: {
239
239
  margin: yType === 'time' ? 16 : 14,
240
240
  formatter: function formatter(item) {
241
- return yType === 'time' ? (0, _auxiliarFunctions.timeConvert)(Number(data)) : (0, _auxiliarFunctions.takeLabelComplement)(Number(item.toFixed(2)), yComplement);
241
+ return yType === 'time' ? (0, _auxiliarFunctions.timeConvert)(Number(item)) : (0, _auxiliarFunctions.takeLabelComplement)(Number(item.toFixed(2)), yComplement);
242
242
  },
243
243
  fontSize: fontLabelSize || 11.5
244
244
  }
package/dist/core/VerticalBarChart.js CHANGED
@@ -209,7 +209,8 @@ var VerticalBarChart = function VerticalBarChart(props) {
209
209
 
210
210
  var formatLabel = function formatLabel(chartValues) {
211
211
  var value = chartValues.value;
212
- return (0, _auxiliarFunctions.takeLabelComplement)(Number(value), yComplement);
212
+ var isTimeType = yType === 'time';
213
+ return isTimeType ? (0, _auxiliarFunctions.timeConvert)(Number(value)) + yComplement : (0, _auxiliarFunctions.takeLabelComplement)(Number(value), yComplement);
213
214
  };
214
215
 
215
216
  var toolbox = toolboxTooltip && {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "amazing-react-charts",
3
- "version": "0.7.1",
3
+ "version": "0.7.3",
4
4
  "description": "An amazing react charts package based in echarts",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
package/src/core/ForecastAreaChart.tsx CHANGED
@@ -135,7 +135,7 @@ const ForecastAreaChart = (props: IProps) => {
135
135
  }
136
136
  }
137
137
  }
138
-
138
+
139
139
  const scrollable: ZoomProps[] =
140
140
  xData.length > 5
141
141
  ? [
@@ -165,7 +165,7 @@ const ForecastAreaChart = (props: IProps) => {
165
165
  name: forecastChartLegends ? forecastChartLegends.forecast : '',
166
166
  data: yData,
167
167
  label: {
168
- formatter:
168
+ formatter:
169
169
  typeof yComplement === 'function' ? yComplement : formatLabel,
170
170
  show: true,
171
171
  position: 'top',
@@ -216,7 +216,7 @@ const ForecastAreaChart = (props: IProps) => {
216
216
  name: forecastChartLegends.current || '',
217
217
  data: take(lineMarkValue, yData),
218
218
  label: {
219
- formatter:
219
+ formatter:
220
220
  typeof yComplement === 'function' ? yComplement : formatLabel,
221
221
  show: false,
222
222
  position: 'top',
@@ -268,7 +268,7 @@ const ForecastAreaChart = (props: IProps) => {
268
268
  margin: yType === 'time' ? 16 : 14,
269
269
  formatter: (item: number) =>
270
270
  yType === 'time'
271
- ? timeConvert(Number(data))
271
+ ? timeConvert(Number(item))
272
272
  : takeLabelComplement(Number(item.toFixed(2)), yComplement),
273
273
  fontSize: fontLabelSize || 11.5
274
274
  }
package/src/core/VerticalBarChart.tsx CHANGED
@@ -193,8 +193,11 @@ const VerticalBarChart = (props: IProps) => {
193
193
 
194
194
  const formatLabel = (chartValues: DataTooltip) => {
195
195
  const { value } = chartValues
196
+ const isTimeType = yType === 'time'
196
197
 
197
- return takeLabelComplement(Number(value), yComplement)
198
+ return isTimeType
199
+ ? timeConvert(Number(value)) + yComplement
200
+ : takeLabelComplement(Number(value), yComplement)
198
201
  }
199
202
 
200
203
  const toolbox = toolboxTooltip && {
package/src/docz/VerticalBarChart.mdx CHANGED
@@ -3,208 +3,240 @@ name: Vertical bar charts
3
3
  route: /vertical-bar-chart
4
4
  ---
5
5
 
6
- import VerticalBarChart from '../core/VerticalBarChart'
7
- import { Playground } from 'docz'
6
+ import VerticalBarChart from "../core/VerticalBarChart";
7
+ import { Playground } from "docz";
8
8
 
9
9
  # Vertical bar chart example
10
+
10
11
  <Playground>
11
- <VerticalBarChart
12
- showBarLabel
13
- yComplement='%'
14
- xType='category'
15
- yType='value'
16
- color='green'
17
- title='Bar Chart example'
18
- toolboxTooltip={{ saveAsImage: 'save' }}
19
- tooltip={ { label: 'Equipamento', result: 'Disponibilidade' } }
20
- data={ [
21
- {
22
- label: 'NG209131231',
23
- result: '100',
24
- itemId: 1
25
- },
26
- {
27
- label: 'NG21021313',
28
- result: '10',
29
- itemId: 1
30
- },
31
- {
32
- label: 'NG211131231',
33
- result: '100',
34
- itemId: 1
35
- },
36
- {
37
- label: 'NG21221312313',
38
- result: '100',
39
- itemId: 1
40
- },
41
- {
42
- label: 'NG213133123',
43
- result: '100',
44
- itemId: 1
45
- },
46
- {
47
- label: 'NG2142232313',
48
- result: '100',
49
- itemId: 1
50
- },
51
- {
52
- label: 'NG2151111',
53
- result: '10',
54
- itemId: 1
55
- },
56
- {
57
- label: 'NG216444533',
58
- result: '100',
59
- itemId: 1
60
- },
61
- {
62
- label: 'NG2172222',
63
- result: '100',
64
- itemId: 1
65
- },
66
- {
67
- label: 'NG21822222',
68
- result: '100',
69
- itemId: 1
70
- },
71
- {
72
- label: 'NG2192222222222',
73
- result: '10',
74
- itemId: 1
75
- },
76
- {
77
- label: 'NG22022222222222',
78
- result: '100',
79
- itemId: 1
80
- },
81
- {
82
- label: 'NG22122222222',
83
- result: '100',
84
- itemId: 1
85
- },
86
- {
87
- label: 'NG2222222222222',
88
- result: '100',
89
- itemId: 1
90
- },
91
- {
92
- label: '31',
93
- result: '100',
94
- itemId: 1,
95
- },
96
- {
97
- label: '3',
98
- result: '10',
99
- itemId: 1,
100
- },
101
- {
102
- label: '31',
103
- result: '100',
104
- itemId: 1,
105
- },
106
- {
107
- label: '2313',
108
- result: '100',
109
- itemId: 1,
110
- },
111
- {
112
- label: '23',
113
- result: '100',
114
- itemId: 1,
115
- },
116
- {
117
- label: '313',
118
- result: '100',
119
- itemId: 1,
120
- },
121
- {
122
- label: '45',
123
- result: '10',
124
- itemId: 1,
125
- },
126
- {
127
- label: '33',
128
- result: '100',
129
- itemId: 1,
130
- },
131
- {
132
- label: '89',
133
- result: '100',
134
- itemId: 1,
135
- },
136
- {
137
- label: '299',
138
- result: '100',
139
- itemId: 1,
140
- },
141
- {
142
- label: '222222',
143
- result: '10',
144
- itemId: 1,
145
- },
146
- {
147
- label: '222484842222',
148
- result: '100',
149
- itemId: 1,
150
- },
151
- {
152
- label: '2222',
153
- result: '100',
154
- itemId: 1,
155
- },
156
- {
157
- label: '22222552',
158
- result: '100',
159
- itemId: 1,
160
- },
161
- ] }
12
+ <VerticalBarChart
13
+ showBarLabel
14
+ yComplement="%"
15
+ xType="category"
16
+ yType="value"
17
+ color="green"
18
+ title="Bar Chart example"
19
+ toolboxTooltip={{ saveAsImage: "save" }}
20
+ tooltip={{ label: "Equipamento", result: "Disponibilidade" }}
21
+ data={[
22
+ {
23
+ label: "NG209131231",
24
+ result: "100",
25
+ itemId: 1,
26
+ },
27
+ {
28
+ label: "NG21021313",
29
+ result: "10",
30
+ itemId: 1,
31
+ },
32
+ {
33
+ label: "NG211131231",
34
+ result: "100",
35
+ itemId: 1,
36
+ },
37
+ {
38
+ label: "NG21221312313",
39
+ result: "100",
40
+ itemId: 1,
41
+ },
42
+ {
43
+ label: "NG213133123",
44
+ result: "100",
45
+ itemId: 1,
46
+ },
47
+ {
48
+ label: "NG2142232313",
49
+ result: "100",
50
+ itemId: 1,
51
+ },
52
+ {
53
+ label: "NG2151111",
54
+ result: "10",
55
+ itemId: 1,
56
+ },
57
+ {
58
+ label: "NG216444533",
59
+ result: "100",
60
+ itemId: 1,
61
+ },
62
+ {
63
+ label: "NG2172222",
64
+ result: "100",
65
+ itemId: 1,
66
+ },
67
+ {
68
+ label: "NG21822222",
69
+ result: "100",
70
+ itemId: 1,
71
+ },
72
+ {
73
+ label: "NG2192222222222",
74
+ result: "10",
75
+ itemId: 1,
76
+ },
77
+ {
78
+ label: "NG22022222222222",
79
+ result: "100",
80
+ itemId: 1,
81
+ },
82
+ {
83
+ label: "NG22122222222",
84
+ result: "100",
85
+ itemId: 1,
86
+ },
87
+ {
88
+ label: "NG2222222222222",
89
+ result: "100",
90
+ itemId: 1,
91
+ },
92
+ {
93
+ label: "31",
94
+ result: "100",
95
+ itemId: 1,
96
+ },
97
+ {
98
+ label: "3",
99
+ result: "10",
100
+ itemId: 1,
101
+ },
102
+ {
103
+ label: "31",
104
+ result: "100",
105
+ itemId: 1,
106
+ },
107
+ {
108
+ label: "2313",
109
+ result: "100",
110
+ itemId: 1,
111
+ },
112
+ {
113
+ label: "23",
114
+ result: "100",
115
+ itemId: 1,
116
+ },
117
+ {
118
+ label: "313",
119
+ result: "100",
120
+ itemId: 1,
121
+ },
122
+ {
123
+ label: "45",
124
+ result: "10",
125
+ itemId: 1,
126
+ },
127
+ {
128
+ label: "33",
129
+ result: "100",
130
+ itemId: 1,
131
+ },
132
+ {
133
+ label: "89",
134
+ result: "100",
135
+ itemId: 1,
136
+ },
137
+ {
138
+ label: "299",
139
+ result: "100",
140
+ itemId: 1,
141
+ },
142
+ {
143
+ label: "222222",
144
+ result: "10",
145
+ itemId: 1,
146
+ },
147
+ {
148
+ label: "222484842222",
149
+ result: "100",
150
+ itemId: 1,
151
+ },
152
+ {
153
+ label: "2222",
154
+ result: "100",
155
+ itemId: 1,
156
+ },
157
+ {
158
+ label: "22222552",
159
+ result: "100",
160
+ itemId: 1,
161
+ },
162
+ ]}
162
163
  />
163
164
  </Playground>
164
165
 
165
-
166
166
  # Vertical bar chart example with customMaxDomain
167
+
167
168
  <Playground>
168
- <VerticalBarChart
169
- showBarLabel
170
- yComplement={value => `R$ ${value},00`}
171
- xType='category'
172
- yType='value'
173
- color='blue'
174
- title='Bar Chart example'
175
- customMaxDomain={ 3000 }
176
- toolboxTooltip={{ saveAsImage: 'save' }}
177
- tooltip={ { label: 'Equipamento', result: 'Disponibilidade' } }
178
- data={ [
179
- {
180
- label: 'NG209131231',
181
- result: '2057',
182
- },
183
- {
184
- label: 'NG21021313',
185
- result: '20',
186
- },
187
- ] }
169
+ <VerticalBarChart
170
+ showBarLabel
171
+ yComplement={(value) => `R$ ${value},00`}
172
+ xType="category"
173
+ yType="value"
174
+ color="blue"
175
+ title="Bar Chart example"
176
+ customMaxDomain={3000}
177
+ toolboxTooltip={{ saveAsImage: "save" }}
178
+ tooltip={{ label: "Equipamento", result: "Disponibilidade" }}
179
+ data={[
180
+ {
181
+ label: "NG209131231",
182
+ result: "2057",
183
+ },
184
+ {
185
+ label: "NG21021313",
186
+ result: "20",
187
+ },
188
+ ]}
188
189
  />
189
190
  </Playground>
190
191
 
191
192
  # Vertical bar chart with dateFormat
193
+
194
+ <Playground>
195
+ <VerticalBarChart
196
+ showBarLabel
197
+ title="Bar Chart example"
198
+ xType="time"
199
+ yComplement="%"
200
+ dateFormat="yyyy-MM"
201
+ color="blue"
202
+ customMaxDomain={100}
203
+ toolboxTooltip={{ saveAsImage: "save as image" }}
204
+ tooltip={{ label: "Date", result: "Disp" }}
205
+ data={[
206
+ {
207
+ label: "2020-01",
208
+ result: "50",
209
+ },
210
+ ]}
211
+ />
212
+ </Playground>
213
+
214
+ # Vertical bar chart with time format
215
+
192
216
  <Playground>
193
- <VerticalBarChart
194
- showBarLabel
195
- title="Bar Chart example"
196
- xType="time"
197
- yComplement="%"
198
- dateFormat="yyyy-MM"
199
- color="blue"
200
- customMaxDomain={100}
201
- toolboxTooltip={{ saveAsImage: 'save as image' }}
202
- tooltip={{ label: 'Date', result: 'Disp' }}
203
- data={[
204
- {
205
- label: '2020-01',
206
- result: '50',
207
- }
208
- ]}
209
- />
217
+ <VerticalBarChart
218
+ showBarLabel
219
+ title="Bar Chart with hours"
220
+ xType="category"
221
+ yType="time"
222
+ yComplement="h"
223
+ color="orange"
224
+ customMaxDomain={240}
225
+ toolboxTooltip={{ saveAsImage: "save as image" }}
226
+ tooltip={{ label: "Grupo", result: "MTTR" }}
227
+ data={[
228
+ {
229
+ label: "A",
230
+ result: "238.62",
231
+ },
232
+ {
233
+ label: "B",
234
+ result: "28.80",
235
+ },
236
+ {
237
+ label: "C",
238
+ result: "62.30",
239
+ },
240
+ ]}
241
+ />
210
242
  </Playground>