amazing-react-charts 0.4.14 → 0.5.0
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/.nvmrc +1 -0
- package/dist/core/StackedBarChart.d.ts +2 -1
- package/dist/core/StackedBarChart.js +29 -7
- package/dist/core/types.d.ts +5 -1
- package/package.json +1 -1
- package/src/core/StackedBarChart.tsx +50 -4
- package/src/core/types.ts +7 -6
- package/src/docz/StackedBarChart.mdx +125 -41
package/.nvmrc
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
v16.17.1
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { IDefaultChartProps, EntryDataNTuples, ColorNTuples } from './types';
|
|
2
|
+
import { IDefaultChartProps, EntryDataNTuples, ColorNTuples, Tooltip } from './types';
|
|
3
3
|
interface IProps extends Omit<IDefaultChartProps, 'data'> {
|
|
4
4
|
data: EntryDataNTuples;
|
|
5
5
|
tooltipExtra?: string;
|
|
@@ -8,6 +8,7 @@ interface IProps extends Omit<IDefaultChartProps, 'data'> {
|
|
|
8
8
|
legendType?: 'scroll' | 'none';
|
|
9
9
|
legendScrollGap?: number;
|
|
10
10
|
secondYAxisType?: 'percent' | string;
|
|
11
|
+
additionalResults?: Tooltip[];
|
|
11
12
|
}
|
|
12
13
|
declare const StackedBarChart: (props: IProps) => JSX.Element;
|
|
13
14
|
export default StackedBarChart;
|
|
@@ -9,9 +9,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
});
|
|
10
10
|
exports.default = void 0;
|
|
11
11
|
|
|
12
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
+
|
|
12
14
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
13
15
|
|
|
14
|
-
var
|
|
16
|
+
var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
|
|
15
17
|
|
|
16
18
|
var React = _interopRequireWildcard(require("react"));
|
|
17
19
|
|
|
@@ -55,7 +57,8 @@ var StackedBarChart = function StackedBarChart(props) {
|
|
|
55
57
|
tooltipExtra = props.tooltipExtra,
|
|
56
58
|
legendType = props.legendType,
|
|
57
59
|
legendScrollGap = props.legendScrollGap,
|
|
58
|
-
showBarLabel = props.showBarLabel
|
|
60
|
+
showBarLabel = props.showBarLabel,
|
|
61
|
+
additionalResults = props.additionalResults;
|
|
59
62
|
var label = tooltipProps.label,
|
|
60
63
|
bottomResult = tooltipProps.bottomResult,
|
|
61
64
|
topResult = tooltipProps.topResult,
|
|
@@ -64,14 +67,15 @@ var StackedBarChart = function StackedBarChart(props) {
|
|
|
64
67
|
auxResult = tooltipProps.auxResult,
|
|
65
68
|
complement = tooltipProps.complement;
|
|
66
69
|
|
|
67
|
-
var _data = (0,
|
|
70
|
+
var _data = (0, _toArray2.default)(data),
|
|
68
71
|
bottomData = _data[0],
|
|
69
72
|
topData = _data[1],
|
|
70
73
|
_data$ = _data[2],
|
|
71
74
|
lineData = _data$ === void 0 ? [] : _data$,
|
|
72
75
|
extraData = _data[3],
|
|
73
76
|
_data$2 = _data[4],
|
|
74
|
-
auxData = _data$2 === void 0 ? [] : _data$2
|
|
77
|
+
auxData = _data$2 === void 0 ? [] : _data$2,
|
|
78
|
+
additionalData = _data.slice(5);
|
|
75
79
|
|
|
76
80
|
var yBottomData = bottomData.map(verifyStyleProps);
|
|
77
81
|
var yTopData = topData.map(verifyStyleProps);
|
|
@@ -204,14 +208,32 @@ var StackedBarChart = function StackedBarChart(props) {
|
|
|
204
208
|
data: yExtraData,
|
|
205
209
|
stack: 'stacked'
|
|
206
210
|
};
|
|
211
|
+
var additionalResultsMap = additionalResults ? additionalResults.map(function (it) {
|
|
212
|
+
return it.name;
|
|
213
|
+
}) : [];
|
|
214
|
+
var additionalSeries = additionalData ? additionalData.map(function (it, i) {
|
|
215
|
+
return additionalResults[i].type === 'bar' ? {
|
|
216
|
+
barWidth: barWidth,
|
|
217
|
+
yAxisIndex: 0,
|
|
218
|
+
name: additionalResults[i].name,
|
|
219
|
+
type: 'bar',
|
|
220
|
+
data: it.map(verifyStyleProps),
|
|
221
|
+
stack: 'stacked'
|
|
222
|
+
} : {
|
|
223
|
+
yAxisIndex: secondYAxisType === 'percent' ? 1 : 0,
|
|
224
|
+
name: additionalResults[i].name,
|
|
225
|
+
type: 'line',
|
|
226
|
+
data: it.map(verifyStyleProps)
|
|
227
|
+
};
|
|
228
|
+
}) : [];
|
|
207
229
|
var legendProps = legendType === 'scroll' ? {
|
|
208
|
-
data: [topResult, bottomResult, extraResult, lineResult],
|
|
230
|
+
data: [topResult, bottomResult, extraResult, lineResult].concat((0, _toConsumableArray2.default)(additionalResultsMap)),
|
|
209
231
|
top: 270,
|
|
210
232
|
type: legendType,
|
|
211
233
|
itemGap: legendScrollGap || 60
|
|
212
234
|
} : {
|
|
213
235
|
top: 30,
|
|
214
|
-
data: [topResult, bottomResult, extraResult, lineResult],
|
|
236
|
+
data: [topResult, bottomResult, extraResult, lineResult].concat((0, _toConsumableArray2.default)(additionalResultsMap)),
|
|
215
237
|
itemGap: 30
|
|
216
238
|
};
|
|
217
239
|
var options = {
|
|
@@ -244,7 +266,7 @@ var StackedBarChart = function StackedBarChart(props) {
|
|
|
244
266
|
name: lineResult,
|
|
245
267
|
type: 'line',
|
|
246
268
|
data: yLineData
|
|
247
|
-
}],
|
|
269
|
+
}].concat((0, _toConsumableArray2.default)(additionalSeries)),
|
|
248
270
|
xAxis: {
|
|
249
271
|
data: xData,
|
|
250
272
|
type: 'category',
|
package/dist/core/types.d.ts
CHANGED
|
@@ -71,7 +71,7 @@ export declare type PictorialEntryData = {
|
|
|
71
71
|
value: number;
|
|
72
72
|
symbol: string;
|
|
73
73
|
};
|
|
74
|
-
export declare type EntryDataNTuples =
|
|
74
|
+
export declare type EntryDataNTuples = Array<EntryData[]>;
|
|
75
75
|
export declare type Series = {
|
|
76
76
|
stillShowZeroSum?: boolean;
|
|
77
77
|
name?: string;
|
|
@@ -345,4 +345,8 @@ export declare type ConnectedDataURL = {
|
|
|
345
345
|
connectedBackgroundColor?: string;
|
|
346
346
|
excludeComponents?: string[];
|
|
347
347
|
};
|
|
348
|
+
export declare type Tooltip = {
|
|
349
|
+
type: 'line' | 'bar';
|
|
350
|
+
name: string;
|
|
351
|
+
};
|
|
348
352
|
export {};
|
package/package.json
CHANGED
|
@@ -10,7 +10,8 @@ import {
|
|
|
10
10
|
ZoomProps,
|
|
11
11
|
ParamsTooltip,
|
|
12
12
|
ColorNTuples,
|
|
13
|
-
Complement
|
|
13
|
+
Complement,
|
|
14
|
+
Tooltip
|
|
14
15
|
} from './types'
|
|
15
16
|
import {
|
|
16
17
|
formatTime,
|
|
@@ -42,6 +43,7 @@ interface IProps extends Omit<IDefaultChartProps, 'data'> {
|
|
|
42
43
|
legendType?: 'scroll' | 'none'
|
|
43
44
|
legendScrollGap?: number
|
|
44
45
|
secondYAxisType?: 'percent' | string
|
|
46
|
+
additionalResults?: Tooltip[]
|
|
45
47
|
}
|
|
46
48
|
|
|
47
49
|
const verifyStyleProps = (data: EntryData) =>
|
|
@@ -66,6 +68,7 @@ const StackedBarChart = (props: IProps) => {
|
|
|
66
68
|
legendType,
|
|
67
69
|
legendScrollGap,
|
|
68
70
|
showBarLabel,
|
|
71
|
+
additionalResults
|
|
69
72
|
} = props
|
|
70
73
|
|
|
71
74
|
const {
|
|
@@ -78,7 +81,14 @@ const StackedBarChart = (props: IProps) => {
|
|
|
78
81
|
complement
|
|
79
82
|
} = tooltipProps
|
|
80
83
|
|
|
81
|
-
const [
|
|
84
|
+
const [
|
|
85
|
+
bottomData,
|
|
86
|
+
topData,
|
|
87
|
+
lineData = [],
|
|
88
|
+
extraData,
|
|
89
|
+
auxData = [],
|
|
90
|
+
...additionalData
|
|
91
|
+
] = data
|
|
82
92
|
const yBottomData = bottomData.map(verifyStyleProps)
|
|
83
93
|
const yTopData = topData.map(verifyStyleProps)
|
|
84
94
|
const yExtraData =
|
|
@@ -256,17 +266,52 @@ const StackedBarChart = (props: IProps) => {
|
|
|
256
266
|
stack: 'stacked'
|
|
257
267
|
}
|
|
258
268
|
|
|
269
|
+
const additionalResultsMap = additionalResults
|
|
270
|
+
? additionalResults.map(it => it.name)
|
|
271
|
+
: []
|
|
272
|
+
|
|
273
|
+
const additionalSeries = additionalData
|
|
274
|
+
? additionalData.map((it, i) => additionalResults[i].type === 'bar'
|
|
275
|
+
? ({
|
|
276
|
+
barWidth,
|
|
277
|
+
yAxisIndex: 0,
|
|
278
|
+
name: additionalResults[i].name,
|
|
279
|
+
type: 'bar',
|
|
280
|
+
data: it.map(verifyStyleProps),
|
|
281
|
+
stack: 'stacked'
|
|
282
|
+
})
|
|
283
|
+
: ({
|
|
284
|
+
yAxisIndex: secondYAxisType === 'percent' ? 1 : 0,
|
|
285
|
+
name: additionalResults[i].name,
|
|
286
|
+
type: 'line',
|
|
287
|
+
data: it.map(verifyStyleProps)
|
|
288
|
+
})
|
|
289
|
+
)
|
|
290
|
+
: []
|
|
291
|
+
|
|
259
292
|
const legendProps =
|
|
260
293
|
legendType === 'scroll'
|
|
261
294
|
? {
|
|
262
|
-
data: [
|
|
295
|
+
data: [
|
|
296
|
+
topResult,
|
|
297
|
+
bottomResult,
|
|
298
|
+
extraResult,
|
|
299
|
+
lineResult,
|
|
300
|
+
...additionalResultsMap
|
|
301
|
+
],
|
|
263
302
|
top: 270,
|
|
264
303
|
type: legendType,
|
|
265
304
|
itemGap: legendScrollGap || 60
|
|
266
305
|
}
|
|
267
306
|
: {
|
|
268
307
|
top: 30,
|
|
269
|
-
data: [
|
|
308
|
+
data: [
|
|
309
|
+
topResult,
|
|
310
|
+
bottomResult,
|
|
311
|
+
extraResult,
|
|
312
|
+
lineResult,
|
|
313
|
+
...additionalResultsMap
|
|
314
|
+
],
|
|
270
315
|
itemGap: 30
|
|
271
316
|
}
|
|
272
317
|
|
|
@@ -305,6 +350,7 @@ const StackedBarChart = (props: IProps) => {
|
|
|
305
350
|
type: 'line',
|
|
306
351
|
data: yLineData
|
|
307
352
|
},
|
|
353
|
+
...additionalSeries
|
|
308
354
|
],
|
|
309
355
|
xAxis: {
|
|
310
356
|
data: xData as string[],
|
package/src/core/types.ts
CHANGED
|
@@ -86,11 +86,7 @@ export type PictorialEntryData = {
|
|
|
86
86
|
symbol: string
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
export type EntryDataNTuples =
|
|
90
|
-
| [EntryData[], EntryData[]]
|
|
91
|
-
| [EntryData[], EntryData[], EntryData[]]
|
|
92
|
-
| [EntryData[], EntryData[], EntryData[], EntryData[]]
|
|
93
|
-
| [EntryData[], EntryData[], EntryData[], EntryData[], EntryData[]]
|
|
89
|
+
export type EntryDataNTuples = Array<EntryData[]>
|
|
94
90
|
|
|
95
91
|
export type Series = {
|
|
96
92
|
stillShowZeroSum?: boolean
|
|
@@ -432,4 +428,9 @@ export type ConnectedDataURL = {
|
|
|
432
428
|
backgroundColor?: string
|
|
433
429
|
connectedBackgroundColor?: string
|
|
434
430
|
excludeComponents?: string[]
|
|
435
|
-
}
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
export type Tooltip = {
|
|
434
|
+
type: 'line' | 'bar',
|
|
435
|
+
name: string
|
|
436
|
+
}
|
|
@@ -125,46 +125,46 @@ import { Playground } from 'docz'
|
|
|
125
125
|
} }
|
|
126
126
|
data={
|
|
127
127
|
[
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
128
|
+
[
|
|
129
|
+
{ label: '2019-01-01', result: 1 },
|
|
130
|
+
{ label: '2019-02-01', result: 2 },
|
|
131
|
+
{ label: '2019-03-01', result: 4 },
|
|
132
|
+
{ label: '2019-04-01', result: 5 },
|
|
133
|
+
{ label: '2019-05-01', result: 6 },
|
|
134
|
+
{ label: '2019-06-01', result: 7 }
|
|
135
|
+
],
|
|
136
|
+
[
|
|
137
|
+
{ label: '2019-01-01', result: 10 },
|
|
138
|
+
{ label: '2019-02-01', result: 40 },
|
|
139
|
+
{ label: '2019-03-01', result: 30 },
|
|
140
|
+
{ label: '2019-04-01', result: 20 },
|
|
141
|
+
{ label: '2019-05-01', result: 40 },
|
|
142
|
+
{ label: '2019-06-01', result: 50 },
|
|
143
|
+
],
|
|
144
|
+
[
|
|
145
|
+
{ label: '2019-01-01', result: 16 },
|
|
146
|
+
{ label: '2019-02-01', result: 46 },
|
|
147
|
+
{ label: '2019-03-01', result: 38 },
|
|
148
|
+
{ label: '2019-04-01', result: 60 },
|
|
149
|
+
{ label: '2019-05-01', result: 70 },
|
|
150
|
+
{ label: '2019-06-01', result: 94 }
|
|
151
|
+
],
|
|
152
|
+
[
|
|
153
|
+
{ label: '2019-01-01', result: 5 },
|
|
154
|
+
{ label: '2019-02-01', result: 4 },
|
|
155
|
+
{ label: '2019-03-01', result: 4 },
|
|
156
|
+
{ label: '2019-04-01', result: 5 },
|
|
157
|
+
{ label: '2019-05-01', result: 6 },
|
|
158
|
+
{ label: '2019-06-01', result: 7 }
|
|
159
|
+
],
|
|
160
|
+
[
|
|
161
|
+
{ label: '2019-01-01', result: 0 },
|
|
162
|
+
{ label: '2019-02-01', result: 76 },
|
|
163
|
+
{ label: '2019-03-01', result: 558 },
|
|
164
|
+
{ label: '2019-04-01', result: 10 },
|
|
165
|
+
{ label: '2019-05-01', result: 80 },
|
|
166
|
+
{ label: '2019-06-01', result: 94 }
|
|
167
|
+
],
|
|
168
168
|
]
|
|
169
169
|
}
|
|
170
170
|
/>
|
|
@@ -268,7 +268,7 @@ import { Playground } from 'docz'
|
|
|
268
268
|
</Playground>
|
|
269
269
|
|
|
270
270
|
|
|
271
|
-
## Chart
|
|
271
|
+
## Chart with 2 bars stacked
|
|
272
272
|
<Playground>
|
|
273
273
|
<StackedBarChart
|
|
274
274
|
sumDataValues
|
|
@@ -298,3 +298,87 @@ import { Playground } from 'docz'
|
|
|
298
298
|
]}
|
|
299
299
|
/>
|
|
300
300
|
</Playground>
|
|
301
|
+
|
|
302
|
+
## Chart with more than 3 bars stacked and 1 line
|
|
303
|
+
|
|
304
|
+
<Playground>
|
|
305
|
+
<StackedBarChart
|
|
306
|
+
xType='time'
|
|
307
|
+
yComplement={value => `R$ ${value},00`}
|
|
308
|
+
title='Custo por manutenção'
|
|
309
|
+
toolboxTooltip={{ saveAsImage: 'save' }}
|
|
310
|
+
colors={ ['#30D2D6', '#9F88FB', '#C5F3C2', '#F09B1B', '#A9A9A9', '#0F528A'] }
|
|
311
|
+
tooltip={ {
|
|
312
|
+
label: 'Período',
|
|
313
|
+
topResult: 'Preventivas',
|
|
314
|
+
bottomResult: 'Corretivas',
|
|
315
|
+
extraResult: 'Melhorias',
|
|
316
|
+
auxResult: 'Total real',
|
|
317
|
+
lineResult: 'Total'
|
|
318
|
+
} }
|
|
319
|
+
additionalResults={[
|
|
320
|
+
{ name: 'Barra adicional', type: 'bar' },
|
|
321
|
+
{ name: 'Linha adicional', type: 'line' }
|
|
322
|
+
]}
|
|
323
|
+
data={
|
|
324
|
+
[
|
|
325
|
+
[
|
|
326
|
+
{ label: '2019-01-01', result: 1 },
|
|
327
|
+
{ label: '2019-02-01', result: 2 },
|
|
328
|
+
{ label: '2019-03-01', result: 4 },
|
|
329
|
+
{ label: '2019-04-01', result: 5 },
|
|
330
|
+
{ label: '2019-05-01', result: 6 },
|
|
331
|
+
{ label: '2019-06-01', result: 7 }
|
|
332
|
+
],
|
|
333
|
+
[
|
|
334
|
+
{ label: '2019-01-01', result: 10 },
|
|
335
|
+
{ label: '2019-02-01', result: 40 },
|
|
336
|
+
{ label: '2019-03-01', result: 30 },
|
|
337
|
+
{ label: '2019-04-01', result: 20 },
|
|
338
|
+
{ label: '2019-05-01', result: 40 },
|
|
339
|
+
{ label: '2019-06-01', result: 50 },
|
|
340
|
+
],
|
|
341
|
+
[
|
|
342
|
+
{ label: '2019-01-01', result: 16 },
|
|
343
|
+
{ label: '2019-02-01', result: 46 },
|
|
344
|
+
{ label: '2019-03-01', result: 38 },
|
|
345
|
+
{ label: '2019-04-01', result: 60 },
|
|
346
|
+
{ label: '2019-05-01', result: 70 },
|
|
347
|
+
{ label: '2019-06-01', result: 94 }
|
|
348
|
+
],
|
|
349
|
+
[
|
|
350
|
+
{ label: '2019-01-01', result: 5 },
|
|
351
|
+
{ label: '2019-02-01', result: 4 },
|
|
352
|
+
{ label: '2019-03-01', result: 4 },
|
|
353
|
+
{ label: '2019-04-01', result: 5 },
|
|
354
|
+
{ label: '2019-05-01', result: 6 },
|
|
355
|
+
{ label: '2019-06-01', result: 7 }
|
|
356
|
+
],
|
|
357
|
+
[
|
|
358
|
+
{ label: '2019-01-01', result: 0 },
|
|
359
|
+
{ label: '2019-02-01', result: 76 },
|
|
360
|
+
{ label: '2019-03-01', result: 558 },
|
|
361
|
+
{ label: '2019-04-01', result: 10 },
|
|
362
|
+
{ label: '2019-05-01', result: 80 },
|
|
363
|
+
{ label: '2019-06-01', result: 94 }
|
|
364
|
+
],
|
|
365
|
+
[
|
|
366
|
+
{ label: '2019-01-01', result: 10 },
|
|
367
|
+
{ label: '2019-02-01', result: 20 },
|
|
368
|
+
{ label: '2019-03-01', result: 30 },
|
|
369
|
+
{ label: '2019-04-01', result: 40 },
|
|
370
|
+
{ label: '2019-05-01', result: 50 },
|
|
371
|
+
{ label: '2019-06-01', result: 60 }
|
|
372
|
+
],
|
|
373
|
+
[
|
|
374
|
+
{ label: '2019-01-01', result: 26 },
|
|
375
|
+
{ label: '2019-02-01', result: 66 },
|
|
376
|
+
{ label: '2019-03-01', result: 68 },
|
|
377
|
+
{ label: '2019-04-01', result: 70 },
|
|
378
|
+
{ label: '2019-05-01', result: 102 },
|
|
379
|
+
{ label: '2019-06-01', result: 124 }
|
|
380
|
+
],
|
|
381
|
+
]
|
|
382
|
+
}
|
|
383
|
+
/>
|
|
384
|
+
</Playground>
|