@quillsql/react 1.3.5 → 1.3.7
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/lib/BarList.js +7 -0
- package/lib/BarList.js.map +1 -1
- package/lib/Chart.js +7 -4
- package/lib/Chart.js.map +1 -1
- package/lib/TableChart.d.ts +0 -6
- package/lib/TableChart.js +245 -96
- package/lib/TableChart.js.map +1 -1
- package/package.json +1 -1
- package/src/BarList.tsx +7 -0
- package/src/Chart.tsx +9 -3
- package/src/TableChart.tsx +277 -172
package/lib/TableChart.js
CHANGED
|
@@ -23,7 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
23
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
24
|
/* eslint-disable react/display-name */
|
|
25
25
|
// @ts-nocheck
|
|
26
|
-
import React from 'react';
|
|
26
|
+
import React, { useMemo } from 'react';
|
|
27
|
+
import { valueFormatter } from './Chart';
|
|
27
28
|
var getWidthsFromValues = function (dataValues) {
|
|
28
29
|
var maxValue = -Infinity;
|
|
29
30
|
dataValues.forEach(function (value) {
|
|
@@ -35,15 +36,6 @@ var getWidthsFromValues = function (dataValues) {
|
|
|
35
36
|
return Math.max((value / maxValue) * 100, 1);
|
|
36
37
|
});
|
|
37
38
|
};
|
|
38
|
-
function makeBarListClassName(componentName) {
|
|
39
|
-
return function (className) {
|
|
40
|
-
return "BarList-".concat(componentName, "-").concat(className, ";");
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
var valueFormatter = function (number) {
|
|
44
|
-
// return '$ ' + Intl.NumberFormat('us').format(number).toString();
|
|
45
|
-
return number.toFixed(0);
|
|
46
|
-
};
|
|
47
39
|
export function hexToRgbaWith10PercentAlpha(hex) {
|
|
48
40
|
// Convert the hex color to RGB
|
|
49
41
|
var r = parseInt(hex.slice(1, 3), 16);
|
|
@@ -54,17 +46,70 @@ export function hexToRgbaWith10PercentAlpha(hex) {
|
|
|
54
46
|
// Return the color as an rgba string
|
|
55
47
|
return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
|
|
56
48
|
}
|
|
49
|
+
function Columns(_a) {
|
|
50
|
+
var columns = _a.columns, data = _a.data, theme = _a.theme;
|
|
51
|
+
return (_jsx("div", __assign({ style: {
|
|
52
|
+
display: 'flex',
|
|
53
|
+
flexDirection: 'row',
|
|
54
|
+
// overflowX: 'scroll',
|
|
55
|
+
// overflowY: 'hidden',
|
|
56
|
+
overflow: 'scroll',
|
|
57
|
+
height: '100%',
|
|
58
|
+
} }, { children: columns.map(function (elem) { return (_jsx(Column, { column: elem, data: data, theme: theme }, elem.field)); }) })));
|
|
59
|
+
}
|
|
60
|
+
function Column(_a) {
|
|
61
|
+
var column = _a.column, data = _a.data, theme = _a.theme;
|
|
62
|
+
return (_jsxs("div", __assign({ style: {
|
|
63
|
+
paddingLeft: 20,
|
|
64
|
+
paddingRight: 20,
|
|
65
|
+
// width: 'max-content',
|
|
66
|
+
display: 'inline-flex',
|
|
67
|
+
flexDirection: 'column',
|
|
68
|
+
whiteSpace: 'nowrap',
|
|
69
|
+
} }, { children: [_jsx("div", __assign({ style: {
|
|
70
|
+
height: 40,
|
|
71
|
+
minHeight: 40,
|
|
72
|
+
color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
|
|
73
|
+
boxSizing: 'content-box',
|
|
74
|
+
fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
|
|
75
|
+
fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
|
|
76
|
+
fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
|
|
77
|
+
} }, { children: column.label })), data.map(function (elem) { return (_jsx(Cell, { item: elem[column.field], theme: theme })); })] })));
|
|
78
|
+
}
|
|
79
|
+
function Cell(_a) {
|
|
80
|
+
var item = _a.item, theme = _a.theme;
|
|
81
|
+
return (_jsx("div", __assign({ style: {
|
|
82
|
+
height: 40,
|
|
83
|
+
minHeight: 40,
|
|
84
|
+
whiteSpace: 'nowrap',
|
|
85
|
+
width: '100%',
|
|
86
|
+
fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
|
|
87
|
+
fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
|
|
88
|
+
color: theme === null || theme === void 0 ? void 0 : theme.chartLabelColor,
|
|
89
|
+
} }, { children: item })));
|
|
90
|
+
}
|
|
57
91
|
var TableChart = React.forwardRef(function (props, ref) {
|
|
58
|
-
var _a = props.data, data = _a === void 0 ? [] : _a, yAxisFields = props.yAxisFields,
|
|
59
|
-
// valueFormatter = (value: any) => value,valueFormatter
|
|
60
|
-
_b = props.showAnimation,
|
|
61
|
-
// valueFormatter = (value: any) => value,valueFormatter
|
|
62
|
-
showAnimation = _b === void 0 ? true : _b, className = props.className, containerStyle = props.containerStyle, theme = props.theme, other = __rest(props, ["data", "yAxisFields", "xAxisField", "colors", "showAnimation", "className", "containerStyle", "theme"]);
|
|
92
|
+
var _a = props.data, data = _a === void 0 ? [] : _a, yAxisFields = props.yAxisFields, containerStyle = props.containerStyle, theme = props.theme, other = __rest(props, ["data", "yAxisFields", "containerStyle", "theme"]);
|
|
63
93
|
// const widths = getWidthsFromValues(
|
|
64
94
|
// data.map(item => item[yAxisFields[0].field])
|
|
65
95
|
// );
|
|
66
96
|
var NUM_TO_SHOW = Math.floor((containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) / 40) - 1 || 6;
|
|
67
|
-
|
|
97
|
+
var memoizedData = useMemo(function () {
|
|
98
|
+
return data.slice(0, NUM_TO_SHOW).map(function (item) {
|
|
99
|
+
var fieldsWithFormattedValues = {};
|
|
100
|
+
for (var _i = 0, yAxisFields_1 = yAxisFields; _i < yAxisFields_1.length; _i++) {
|
|
101
|
+
var field = yAxisFields_1[_i];
|
|
102
|
+
var value = item[field.field];
|
|
103
|
+
fieldsWithFormattedValues[field.field] = valueFormatter({
|
|
104
|
+
value: value,
|
|
105
|
+
field: field.field,
|
|
106
|
+
fields: yAxisFields,
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
return fieldsWithFormattedValues;
|
|
110
|
+
});
|
|
111
|
+
}, [data, NUM_TO_SHOW]);
|
|
112
|
+
if (!memoizedData.length) {
|
|
68
113
|
return (_jsx("div", __assign({ ref: ref, style: {
|
|
69
114
|
// width: '100%',
|
|
70
115
|
boxSizing: 'content-box',
|
|
@@ -80,89 +125,193 @@ var TableChart = React.forwardRef(function (props, ref) {
|
|
|
80
125
|
justifyContent: 'space-between',
|
|
81
126
|
} }, other)));
|
|
82
127
|
}
|
|
83
|
-
return (
|
|
84
|
-
// width: '100%',
|
|
128
|
+
return (_jsxs("div", __assign({ style: {
|
|
85
129
|
boxSizing: 'content-box',
|
|
86
|
-
height: '100%',
|
|
87
|
-
// height: hei
|
|
88
|
-
// marginLeft: 25,
|
|
89
|
-
// background: 'red',
|
|
130
|
+
height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) || '100%',
|
|
90
131
|
marginTop: 20,
|
|
91
|
-
//
|
|
92
|
-
overflow: 'hidden',
|
|
132
|
+
// overflow: 'hidden',
|
|
93
133
|
display: 'flex',
|
|
94
|
-
marginLeft: '
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
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
|
-
|
|
134
|
+
marginLeft: '1rem',
|
|
135
|
+
flexDirection: 'column',
|
|
136
|
+
// justifyContent: 'space-between',
|
|
137
|
+
} }, { children: [_jsx(Columns, { columns: yAxisFields, data: memoizedData, theme: theme }), data.length > NUM_TO_SHOW && (_jsxs("div", __assign({ style: {
|
|
138
|
+
color: theme === null || theme === void 0 ? void 0 : theme.chartLabelColor,
|
|
139
|
+
boxSizing: 'content-box',
|
|
140
|
+
fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
|
|
141
|
+
fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
|
|
142
|
+
marginLeft: 12,
|
|
143
|
+
marginTop: 8,
|
|
144
|
+
} }, { children: ["...", data.length - NUM_TO_SHOW, " more"] })))] })));
|
|
145
|
+
// return (
|
|
146
|
+
// <div
|
|
147
|
+
// ref={ref}
|
|
148
|
+
// style={{
|
|
149
|
+
// // width: '100%',
|
|
150
|
+
// boxSizing: 'content-box',
|
|
151
|
+
// height: '100%',
|
|
152
|
+
// // height: hei
|
|
153
|
+
// // marginLeft: 25,
|
|
154
|
+
// // background: 'red',
|
|
155
|
+
// marginTop: 20,
|
|
156
|
+
// // paddingRight: 25,
|
|
157
|
+
// overflow: 'hidden',
|
|
158
|
+
// display: 'flex',
|
|
159
|
+
// marginLeft: '1.5rem',
|
|
160
|
+
// justifyContent: 'space-between',
|
|
161
|
+
// }}
|
|
162
|
+
// // className={twMerge(
|
|
163
|
+
// // makeBarListClassName('root'),
|
|
164
|
+
// // 'qq-flex qq-justify-between qq-h-full qq-w-full',
|
|
165
|
+
// // 'qq-space-x-6',
|
|
166
|
+
// // className
|
|
167
|
+
// // )}
|
|
168
|
+
// {...other}
|
|
169
|
+
// >
|
|
170
|
+
// <div
|
|
171
|
+
// // className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
|
|
172
|
+
// // className="qq-relative-w-full"
|
|
173
|
+
// style={{
|
|
174
|
+
// width: 'calc(100%)',
|
|
175
|
+
// boxSizing: 'content-box',
|
|
176
|
+
// height: '100%',
|
|
177
|
+
// paddingRight: 25,
|
|
178
|
+
// position: 'relative',
|
|
179
|
+
// }}
|
|
180
|
+
// >
|
|
181
|
+
// <div
|
|
182
|
+
// style={{
|
|
183
|
+
// display: 'flex',
|
|
184
|
+
// flexDirection: 'row',
|
|
185
|
+
// alignItems: 'center',
|
|
186
|
+
// boxSizing: 'content-box',
|
|
187
|
+
// }}
|
|
188
|
+
// >
|
|
189
|
+
// {yAxisFields.map((elem, index) => (
|
|
190
|
+
// <div
|
|
191
|
+
// key={index}
|
|
192
|
+
// style={{
|
|
193
|
+
// color: theme?.primaryTextColor,
|
|
194
|
+
// width: 98,
|
|
195
|
+
// maxWidth: 98,
|
|
196
|
+
// boxSizing: 'content-box',
|
|
197
|
+
// whiteSpace: 'nowrap',
|
|
198
|
+
// overflow: 'hidden',
|
|
199
|
+
// textOverflow: 'ellipsis',
|
|
200
|
+
// fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
201
|
+
// fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
202
|
+
// fontWeight: theme?.fontWeightMedium || '500',
|
|
203
|
+
// }}
|
|
204
|
+
// // className={twMerge(
|
|
205
|
+
// // makeBarListClassName('barText'),
|
|
206
|
+
// // 'qq-whitespace-nowrap truncate',
|
|
207
|
+
// // 'qq-text-sm'
|
|
208
|
+
// // )}
|
|
209
|
+
// >
|
|
210
|
+
// {elem.label}
|
|
211
|
+
// </div>
|
|
212
|
+
// ))}
|
|
213
|
+
// </div>
|
|
214
|
+
// {data.slice(0, NUM_TO_SHOW).map((item, idx) => {
|
|
215
|
+
// // const Icon = item.icon;
|
|
216
|
+
// const Icon = null;
|
|
217
|
+
// return (
|
|
218
|
+
// <div
|
|
219
|
+
// key={'label' + idx}
|
|
220
|
+
// // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
|
|
221
|
+
// style={{
|
|
222
|
+
// // width: `${widths[idx]}%`,
|
|
223
|
+
// width: '100%',
|
|
224
|
+
// transition: showAnimation ? 'all 2s' : '',
|
|
225
|
+
// boxSizing: 'content-box',
|
|
226
|
+
// // backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
|
|
227
|
+
// display: 'flex',
|
|
228
|
+
// alignItems: 'center',
|
|
229
|
+
// height: '2.25rem',
|
|
230
|
+
// // marginBottom: '0.5rem',
|
|
231
|
+
// borderRadius: '0.25rem',
|
|
232
|
+
// }}
|
|
233
|
+
// >
|
|
234
|
+
// <div
|
|
235
|
+
// style={{
|
|
236
|
+
// boxSizing: 'content-box',
|
|
237
|
+
// position: 'absolute',
|
|
238
|
+
// maxWidth: '100%',
|
|
239
|
+
// display: 'flex',
|
|
240
|
+
// // height: 40,
|
|
241
|
+
// // minHeight: 40,
|
|
242
|
+
// // marginLeft: '0.5rem',
|
|
243
|
+
// }}
|
|
244
|
+
// // className={twMerge(
|
|
245
|
+
// // 'qq-absolute qq-max-w-full qq-flex',
|
|
246
|
+
// // 'qq-ml-2'
|
|
247
|
+
// // )}
|
|
248
|
+
// >
|
|
249
|
+
// <div
|
|
250
|
+
// style={{
|
|
251
|
+
// display: 'flex',
|
|
252
|
+
// flexDirection: 'row',
|
|
253
|
+
// alignItems: 'center',
|
|
254
|
+
// boxSizing: 'content-box',
|
|
255
|
+
// height: 40,
|
|
256
|
+
// minHeight: 40,
|
|
257
|
+
// }}
|
|
258
|
+
// >
|
|
259
|
+
// {yAxisFields.map((elem, index) => (
|
|
260
|
+
// <div
|
|
261
|
+
// key={index}
|
|
262
|
+
// style={{
|
|
263
|
+
// width: 98,
|
|
264
|
+
// maxWidth: 98,
|
|
265
|
+
// color: theme?.chartLabelColor,
|
|
266
|
+
// boxSizing: 'content-box',
|
|
267
|
+
// paddingRight: 10,
|
|
268
|
+
// height: 40,
|
|
269
|
+
// minHeight: 40,
|
|
270
|
+
// whiteSpace: 'nowrap',
|
|
271
|
+
// overflow: 'hidden',
|
|
272
|
+
// textOverflow: 'ellipsis',
|
|
273
|
+
// fontFamily:
|
|
274
|
+
// theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
275
|
+
// fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
276
|
+
// borderBottomColor: theme?.borderColor,
|
|
277
|
+
// borderBottomWidth: 1,
|
|
278
|
+
// borderBottomStyle: 'solid',
|
|
279
|
+
// }}
|
|
280
|
+
// // className={twMerge(
|
|
281
|
+
// // makeBarListClassName('barText'),
|
|
282
|
+
// // 'qq-whitespace-nowrap truncate',
|
|
283
|
+
// // 'qq-text-sm'
|
|
284
|
+
// // )}
|
|
285
|
+
// >
|
|
286
|
+
// {valueFormatter({
|
|
287
|
+
// value: item[elem.field],
|
|
288
|
+
// field: elem.field,
|
|
289
|
+
// fields: yAxisFields,
|
|
290
|
+
// })}
|
|
291
|
+
// </div>
|
|
292
|
+
// ))}
|
|
293
|
+
// </div>
|
|
294
|
+
// </div>
|
|
295
|
+
// </div>
|
|
296
|
+
// );
|
|
297
|
+
// })}
|
|
298
|
+
// {data.length > NUM_TO_SHOW && (
|
|
299
|
+
// <div
|
|
300
|
+
// style={{
|
|
301
|
+
// color: theme?.chartLabelColor,
|
|
302
|
+
// boxSizing: 'content-box',
|
|
303
|
+
// fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
304
|
+
// fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
305
|
+
// }}
|
|
306
|
+
// // className="qq-text-sm"
|
|
307
|
+
// >
|
|
308
|
+
// ...{data.length - NUM_TO_SHOW} more
|
|
309
|
+
// </div>
|
|
310
|
+
// )}
|
|
311
|
+
// </div>
|
|
312
|
+
// {/* eslint-disable prettier/prettier */}
|
|
313
|
+
// </div>
|
|
314
|
+
// );
|
|
166
315
|
});
|
|
167
316
|
export default TableChart;
|
|
168
317
|
//# sourceMappingURL=TableChart.js.map
|
package/lib/TableChart.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableChart.js","sourceRoot":"","sources":["../src/TableChart.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,uCAAuC;AACvC,cAAc;AACd,OAAO,
|
|
1
|
+
{"version":3,"file":"TableChart.js","sourceRoot":"","sources":["../src/TableChart.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/BarList.tsx
CHANGED
|
@@ -151,6 +151,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
151
151
|
display: 'flex',
|
|
152
152
|
justifyContent: 'space-between',
|
|
153
153
|
marginLeft: '1.5rem',
|
|
154
|
+
width: 'calc(100% - 1.5rem)',
|
|
154
155
|
}}
|
|
155
156
|
// className={twMerge(
|
|
156
157
|
// // makeBarListClassName('root'),
|
|
@@ -167,6 +168,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
167
168
|
height: '100%',
|
|
168
169
|
position: 'relative',
|
|
169
170
|
boxSizing: 'content-box',
|
|
171
|
+
width: '100%',
|
|
170
172
|
}}
|
|
171
173
|
>
|
|
172
174
|
{data.slice(0, Math.floor(NUM_TO_SHOW / 2)).map((item, idx) => {
|
|
@@ -182,6 +184,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
182
184
|
display: 'flex',
|
|
183
185
|
flexDirection: 'row',
|
|
184
186
|
alignItems: 'center',
|
|
187
|
+
width: '100%',
|
|
185
188
|
}}
|
|
186
189
|
>
|
|
187
190
|
<div
|
|
@@ -191,6 +194,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
191
194
|
boxSizing: 'content-box',
|
|
192
195
|
minWidth: 130,
|
|
193
196
|
overflow: 'hidden',
|
|
197
|
+
width: '100%',
|
|
194
198
|
}}
|
|
195
199
|
>
|
|
196
200
|
<p
|
|
@@ -248,6 +252,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
248
252
|
display: 'flex',
|
|
249
253
|
maxWidth: '100%',
|
|
250
254
|
boxSizing: 'content-box',
|
|
255
|
+
marginLeft: '0.5rem',
|
|
251
256
|
}}
|
|
252
257
|
// className={twMerge(
|
|
253
258
|
// 'qq-absolute qq-max-w-full qq-flex',
|
|
@@ -348,6 +353,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
348
353
|
boxSizing: 'content-box',
|
|
349
354
|
minWidth: 'min-content',
|
|
350
355
|
textAlign: 'right',
|
|
356
|
+
paddingLeft: 10,
|
|
351
357
|
}}
|
|
352
358
|
// className={
|
|
353
359
|
// (makeBarListClassName('labels'), 'qq-text-right qq-min-w-min')
|
|
@@ -517,6 +523,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
517
523
|
boxSizing: 'content-box',
|
|
518
524
|
textAlign: 'right',
|
|
519
525
|
minWidth: 'min-content',
|
|
526
|
+
paddingLeft: 10,
|
|
520
527
|
}}
|
|
521
528
|
// className={
|
|
522
529
|
// (makeBarListClassName('labels'), 'qq-text-right qq-min-w-min')
|
package/src/Chart.tsx
CHANGED
|
@@ -158,7 +158,12 @@ const data = [
|
|
|
158
158
|
];
|
|
159
159
|
|
|
160
160
|
export const valueFormatter = ({ value, field, fields }) => {
|
|
161
|
-
if (
|
|
161
|
+
if (
|
|
162
|
+
value === undefined ||
|
|
163
|
+
value === null ||
|
|
164
|
+
field === undefined ||
|
|
165
|
+
field === null
|
|
166
|
+
) {
|
|
162
167
|
return '';
|
|
163
168
|
}
|
|
164
169
|
|
|
@@ -174,9 +179,9 @@ export const valueFormatter = ({ value, field, fields }) => {
|
|
|
174
179
|
|
|
175
180
|
if (formatType === 'percent') {
|
|
176
181
|
if (absNumber < 1) {
|
|
177
|
-
return (absNumber * 100).toFixed(
|
|
182
|
+
return (absNumber * 100).toFixed(0) + '%';
|
|
178
183
|
} else {
|
|
179
|
-
return absNumber.toFixed(
|
|
184
|
+
return absNumber.toFixed(0) + '%';
|
|
180
185
|
}
|
|
181
186
|
}
|
|
182
187
|
|
|
@@ -749,6 +754,7 @@ const ChartUpdater: React.FC<ChartProps> = ({
|
|
|
749
754
|
return (
|
|
750
755
|
<TableChart
|
|
751
756
|
data={chartConfig.rows}
|
|
757
|
+
yAxisFields={chartConfig.yAxisFields}
|
|
752
758
|
theme={theme}
|
|
753
759
|
containerStyle={containerStyle}
|
|
754
760
|
/>
|