@quillsql/react 1.1.8 → 1.1.9
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/example/package-lock.json +754 -1643
- package/example/src/App.tsx +2 -1
- package/lib/BarList.d.ts +1 -0
- package/lib/BarList.js +129 -37
- package/lib/BarList.js.map +1 -1
- package/lib/Chart.d.ts +3 -3
- package/lib/Chart.js +66 -30
- package/lib/Chart.js.map +1 -1
- package/lib/Context.d.ts +1 -1
- package/lib/Dashboard.d.ts +1 -1
- package/lib/Dashboard.js +0 -4
- package/lib/Dashboard.js.map +1 -1
- package/lib/DateRangePicker/Calendar.d.ts +1 -1
- package/lib/DateRangePicker/Calendar.js +122 -23
- package/lib/DateRangePicker/Calendar.js.map +1 -1
- package/lib/DateRangePicker/DateRangePicker.js +5 -6
- package/lib/DateRangePicker/DateRangePicker.js.map +1 -1
- package/lib/DateRangePicker/DateRangePickerButton.d.ts +1 -1
- package/lib/DateRangePicker/DateRangePickerButton.js +101 -17
- package/lib/DateRangePicker/DateRangePickerButton.js.map +1 -1
- package/lib/DateRangePicker/dateRangePickerUtils.d.ts +1 -2
- package/lib/DateRangePicker/dateRangePickerUtils.js +113 -79
- package/lib/DateRangePicker/dateRangePickerUtils.js.map +1 -1
- package/lib/PieChart.d.ts +3 -3
- package/lib/PieChart.js +51 -28
- package/lib/PieChart.js.map +1 -1
- package/lib/QuillProvider.d.ts +1 -2
- package/lib/assets/ArrowDownHeadIcon.d.ts +1 -2
- package/lib/assets/ArrowDownIcon.d.ts +1 -2
- package/lib/assets/ArrowDownRightIcon.d.ts +1 -2
- package/lib/assets/ArrowLeftHeadIcon.d.ts +1 -2
- package/lib/assets/ArrowRightHeadIcon.d.ts +1 -2
- package/lib/assets/ArrowRightIcon.d.ts +1 -2
- package/lib/assets/ArrowUpHeadIcon.d.ts +1 -2
- package/lib/assets/ArrowUpIcon.d.ts +1 -2
- package/lib/assets/ArrowUpRightIcon.d.ts +1 -2
- package/lib/assets/CalendarIcon.d.ts +1 -2
- package/lib/assets/DoubleArrowLeftHeadIcon.d.ts +1 -2
- package/lib/assets/DoubleArrowRightHeadIcon.d.ts +1 -2
- package/lib/assets/ExclamationFilledIcon.d.ts +1 -2
- package/lib/assets/LoadingSpinner.d.ts +1 -2
- package/lib/assets/SearchIcon.d.ts +1 -2
- package/lib/assets/XCircleIcon.d.ts +1 -2
- package/lib/components/Dropdown/Dropdown.js +45 -14
- package/lib/components/Dropdown/Dropdown.js.map +1 -1
- package/lib/components/Dropdown/DropdownItem.d.ts +1 -0
- package/lib/components/Dropdown/DropdownItem.js +21 -29
- package/lib/components/Dropdown/DropdownItem.js.map +1 -1
- package/lib/components/Modal/Modal.d.ts +1 -0
- package/lib/components/Modal/Modal.js +47 -9
- package/lib/components/Modal/Modal.js.map +1 -1
- package/lib/components/selectUtils.d.ts +1 -1
- package/lib/components/selectUtils.js +18 -12
- package/lib/components/selectUtils.js.map +1 -1
- package/package.json +1 -8
- package/src/BarList.tsx +193 -96
- package/src/Chart.tsx +108 -48
- package/src/Dashboard.tsx +10 -10
- package/src/DateRangePicker/Calendar.tsx +149 -163
- package/src/DateRangePicker/DateRangePicker.tsx +11 -11
- package/src/DateRangePicker/DateRangePickerButton.tsx +129 -84
- package/src/DateRangePicker/dateRangePickerUtils.tsx +137 -111
- package/src/PieChart.tsx +87 -34
- package/src/components/Dropdown/Dropdown.tsx +50 -69
- package/src/components/Dropdown/DropdownItem.tsx +15 -50
- package/src/components/Modal/Modal.tsx +50 -31
- package/src/components/selectUtils.ts +19 -18
- package/src/styles.css +0 -5
- package/postcss.config.js +0 -6
- package/tailwind.config.js +0 -23
package/src/BarList.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* eslint-disable react/display-name */
|
|
2
2
|
// @ts-nocheck
|
|
3
3
|
import React, { useState } from 'react';
|
|
4
|
-
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
// import { twMerge } from 'tailwind-merge';
|
|
5
5
|
import {
|
|
6
6
|
Area,
|
|
7
7
|
CartesianGrid,
|
|
@@ -96,7 +96,7 @@ const valueFormatter = (number: number) => {
|
|
|
96
96
|
return number.toFixed(0);
|
|
97
97
|
};
|
|
98
98
|
|
|
99
|
-
function hexToRgbaWith10PercentAlpha(hex) {
|
|
99
|
+
export function hexToRgbaWith10PercentAlpha(hex) {
|
|
100
100
|
// Convert the hex color to RGB
|
|
101
101
|
const r = parseInt(hex.slice(1, 3), 16);
|
|
102
102
|
const g = parseInt(hex.slice(3, 5), 16);
|
|
@@ -137,27 +137,34 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
137
137
|
<div
|
|
138
138
|
ref={ref}
|
|
139
139
|
style={{
|
|
140
|
-
width: '100%',
|
|
140
|
+
// width: '100%',
|
|
141
141
|
height: '100%',
|
|
142
142
|
marginLeft: 25,
|
|
143
143
|
// background: 'red',
|
|
144
144
|
marginTop: 20,
|
|
145
|
-
paddingRight: 25,
|
|
145
|
+
// paddingRight: 25,
|
|
146
146
|
overflow: 'hidden',
|
|
147
147
|
boxSizing: 'content-box',
|
|
148
|
+
display: 'flex',
|
|
149
|
+
justifyContent: 'space-between',
|
|
150
|
+
marginLeft: '1.5rem',
|
|
148
151
|
}}
|
|
149
|
-
className={twMerge(
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
)}
|
|
152
|
+
// className={twMerge(
|
|
153
|
+
// // makeBarListClassName('root'),
|
|
154
|
+
// 'qq-space-x-6',
|
|
155
|
+
// className
|
|
156
|
+
// )}
|
|
155
157
|
{...other}
|
|
156
158
|
>
|
|
157
159
|
<div
|
|
158
160
|
// className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
|
|
159
|
-
className="qq-relative-w-full"
|
|
160
|
-
style={{
|
|
161
|
+
// className="qq-relative-w-full"
|
|
162
|
+
style={{
|
|
163
|
+
// width: '100%',
|
|
164
|
+
height: '100%',
|
|
165
|
+
position: 'relative',
|
|
166
|
+
boxSizing: 'content-box',
|
|
167
|
+
}}
|
|
161
168
|
>
|
|
162
169
|
{data.slice(0, Math.floor(NUM_TO_SHOW / 2)).map((item, idx) => {
|
|
163
170
|
// const Icon = item.icon;
|
|
@@ -165,9 +172,14 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
165
172
|
|
|
166
173
|
return (
|
|
167
174
|
<div
|
|
168
|
-
className="qq-flex qq-flex-row qq-items-center"
|
|
175
|
+
// className="qq-flex qq-flex-row qq-items-center"
|
|
169
176
|
key={item[xAxisField] + idx}
|
|
170
|
-
style={{
|
|
177
|
+
style={{
|
|
178
|
+
boxSizing: 'content-box',
|
|
179
|
+
display: 'flex',
|
|
180
|
+
flexDirection: 'row',
|
|
181
|
+
alignItems: 'center',
|
|
182
|
+
}}
|
|
171
183
|
>
|
|
172
184
|
<div
|
|
173
185
|
title={item[xAxisField]}
|
|
@@ -182,14 +194,18 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
182
194
|
style={{
|
|
183
195
|
color: theme?.chartLabelColor,
|
|
184
196
|
boxSizing: 'content-box',
|
|
197
|
+
whiteSpace: 'nowrap',
|
|
198
|
+
overflow: 'hidden',
|
|
199
|
+
textOverflow: 'ellipsis',
|
|
185
200
|
fontFamily:
|
|
186
201
|
theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
202
|
+
fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
187
203
|
}}
|
|
188
|
-
className={twMerge(
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
)}
|
|
204
|
+
// className={twMerge(
|
|
205
|
+
// makeBarListClassName('barText'),
|
|
206
|
+
// 'qq-whitespace-nowrap truncate',
|
|
207
|
+
// 'qq-text-sm'
|
|
208
|
+
// )}
|
|
193
209
|
>
|
|
194
210
|
{item[xAxisField]}
|
|
195
211
|
</p>
|
|
@@ -199,12 +215,19 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
199
215
|
width: '100%',
|
|
200
216
|
height: '100%',
|
|
201
217
|
boxSizing: 'content-box',
|
|
218
|
+
display: 'flex',
|
|
219
|
+
flexDirection: 'column',
|
|
202
220
|
}}
|
|
203
|
-
className="qq-flex qq-flex-col"
|
|
221
|
+
// className="qq-flex qq-flex-col"
|
|
204
222
|
>
|
|
205
223
|
<div
|
|
206
|
-
className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
|
|
224
|
+
// className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
|
|
207
225
|
style={{
|
|
226
|
+
display: 'flex',
|
|
227
|
+
alignItems: 'center',
|
|
228
|
+
height: '2.25rem',
|
|
229
|
+
borderRadius: '0.25rem',
|
|
230
|
+
marginBottom: '0.5rem',
|
|
208
231
|
width: `${widths[idx]}%`,
|
|
209
232
|
transition: showAnimation ? 'all 2s' : '',
|
|
210
233
|
backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
|
|
@@ -212,10 +235,16 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
212
235
|
}}
|
|
213
236
|
>
|
|
214
237
|
<div
|
|
215
|
-
|
|
216
|
-
'
|
|
217
|
-
'
|
|
218
|
-
|
|
238
|
+
style={{
|
|
239
|
+
position: 'absolute',
|
|
240
|
+
display: 'flex',
|
|
241
|
+
maxWidth: '100%',
|
|
242
|
+
boxSizing: 'content-box',
|
|
243
|
+
}}
|
|
244
|
+
// className={twMerge(
|
|
245
|
+
// 'qq-absolute qq-max-w-full qq-flex',
|
|
246
|
+
// 'qq-ml-2'
|
|
247
|
+
// )}
|
|
219
248
|
>
|
|
220
249
|
<p
|
|
221
250
|
style={{
|
|
@@ -223,20 +252,29 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
223
252
|
fontFamily:
|
|
224
253
|
theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
225
254
|
boxSizing: 'content-box',
|
|
255
|
+
whiteSpace: 'nowrap',
|
|
256
|
+
overflow: 'hidden',
|
|
257
|
+
textOverflow: 'ellipsis',
|
|
258
|
+
fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
226
259
|
}}
|
|
227
|
-
className={twMerge(
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
)}
|
|
260
|
+
// className={twMerge(
|
|
261
|
+
// makeBarListClassName('barText'),
|
|
262
|
+
// 'qq-whitespace-nowrap truncate',
|
|
263
|
+
// 'qq-text-sm'
|
|
264
|
+
// )}
|
|
232
265
|
>
|
|
233
266
|
{yAxisFields[0].label}
|
|
234
267
|
</p>
|
|
235
268
|
</div>
|
|
236
269
|
</div>
|
|
237
270
|
<div
|
|
238
|
-
className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
|
|
271
|
+
// className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
|
|
239
272
|
style={{
|
|
273
|
+
display: 'flex',
|
|
274
|
+
alignItems: 'center',
|
|
275
|
+
height: '2.25rem',
|
|
276
|
+
borderRadius: '0.25rem',
|
|
277
|
+
marginBottom: '0.5rem',
|
|
240
278
|
width: `${widths2[idx]}%`,
|
|
241
279
|
transition: showAnimation ? 'all 2s' : '',
|
|
242
280
|
backgroundColor: hexToRgbaWith10PercentAlpha(colors[1]),
|
|
@@ -244,24 +282,34 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
244
282
|
}}
|
|
245
283
|
>
|
|
246
284
|
<div
|
|
247
|
-
style={{
|
|
248
|
-
|
|
249
|
-
'
|
|
250
|
-
'
|
|
251
|
-
|
|
285
|
+
style={{
|
|
286
|
+
boxSizing: 'content-box',
|
|
287
|
+
position: 'absolute',
|
|
288
|
+
maxWidth: '100%',
|
|
289
|
+
display: 'flex',
|
|
290
|
+
marginLeft: '0.5rem',
|
|
291
|
+
}}
|
|
292
|
+
// className={twMerge(
|
|
293
|
+
// 'qq-absolute qq-max-w-full qq-flex',
|
|
294
|
+
// 'qq-ml-2'
|
|
295
|
+
// )}
|
|
252
296
|
>
|
|
253
297
|
<p
|
|
254
298
|
style={{
|
|
255
299
|
color: theme?.chartLabelColor,
|
|
256
300
|
boxSizing: 'content-box',
|
|
301
|
+
whiteSpace: 'nowrap',
|
|
302
|
+
overflow: 'hidden',
|
|
303
|
+
textOverflow: 'ellipsis',
|
|
257
304
|
fontFamily:
|
|
258
305
|
theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
306
|
+
fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
259
307
|
}}
|
|
260
|
-
className={twMerge(
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
)}
|
|
308
|
+
// className={twMerge(
|
|
309
|
+
// makeBarListClassName('barText'),
|
|
310
|
+
// 'qq-whitespace-nowrap truncate',
|
|
311
|
+
// 'qq-text-sm'
|
|
312
|
+
// )}
|
|
265
313
|
>
|
|
266
314
|
{yAxisFields[1].label}
|
|
267
315
|
{/* {item[xAxisField]} */}
|
|
@@ -279,7 +327,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
279
327
|
boxSizing: 'content-box',
|
|
280
328
|
fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
281
329
|
}}
|
|
282
|
-
className="qq-text-sm"
|
|
330
|
+
// className="qq-text-sm"
|
|
283
331
|
>
|
|
284
332
|
...{data.length - NUM_TO_SHOW} more
|
|
285
333
|
</div>
|
|
@@ -287,33 +335,48 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
287
335
|
</div>
|
|
288
336
|
{/* eslint-disable prettier/prettier */}
|
|
289
337
|
<div
|
|
290
|
-
style={{
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
338
|
+
style={{
|
|
339
|
+
boxSizing: 'content-box',
|
|
340
|
+
minWidth: 'min-content',
|
|
341
|
+
textAlign: 'right',
|
|
342
|
+
}}
|
|
343
|
+
// className={
|
|
344
|
+
// (makeBarListClassName('labels'), 'qq-text-right qq-min-w-min')
|
|
345
|
+
// }
|
|
294
346
|
>
|
|
295
347
|
{data.slice(0, NUM_TO_SHOW).map((item, idx) => (
|
|
296
348
|
<div
|
|
297
349
|
key={item[xAxisField] + 'label' + idx}
|
|
298
|
-
style={{
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
'
|
|
302
|
-
'
|
|
303
|
-
idx === data.length - 1 ?
|
|
304
|
-
|
|
350
|
+
style={{
|
|
351
|
+
boxSizing: 'content-box',
|
|
352
|
+
display: 'flex',
|
|
353
|
+
justifyContent: 'flex-end',
|
|
354
|
+
alignItems: 'center',
|
|
355
|
+
marginBottom: idx === data.length - 1 ? 0 : '0.5rem',
|
|
356
|
+
height: '2.25rem',
|
|
357
|
+
}}
|
|
358
|
+
// className={twMerge(
|
|
359
|
+
// makeBarListClassName('labelWrapper'),
|
|
360
|
+
// 'qq-flex qq-justify-end qq-items-center',
|
|
361
|
+
// 'qq-h-9',
|
|
362
|
+
// idx === data.length - 1 ? 'qq-mb-0' : 'qq-mb-2'
|
|
363
|
+
// )}
|
|
305
364
|
>
|
|
306
365
|
<p
|
|
307
366
|
style={{
|
|
308
367
|
color: theme?.chartLabelColor,
|
|
309
368
|
boxSizing: 'content-box',
|
|
310
369
|
fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
370
|
+
whiteSpace: 'nowrap',
|
|
371
|
+
overflow: 'hidden',
|
|
372
|
+
textOverflow: 'ellipsis',
|
|
373
|
+
fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
311
374
|
}}
|
|
312
|
-
className={twMerge(
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
)}
|
|
375
|
+
// className={twMerge(
|
|
376
|
+
// makeBarListClassName('labelText'),
|
|
377
|
+
// 'qq-whitespace-nowrap truncate',
|
|
378
|
+
// 'qq-text-sm'
|
|
379
|
+
// )}
|
|
317
380
|
>
|
|
318
381
|
{valueFormatter(item[yAxisFields[0].field])}
|
|
319
382
|
</p>
|
|
@@ -328,32 +391,36 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
328
391
|
<div
|
|
329
392
|
ref={ref}
|
|
330
393
|
style={{
|
|
331
|
-
width: '100%',
|
|
394
|
+
// width: '100%',
|
|
332
395
|
boxSizing: 'content-box',
|
|
333
396
|
height: '100%',
|
|
334
397
|
// height: hei
|
|
335
398
|
// marginLeft: 25,
|
|
336
399
|
// background: 'red',
|
|
337
400
|
marginTop: 20,
|
|
338
|
-
paddingRight: 25,
|
|
401
|
+
// paddingRight: 25,
|
|
339
402
|
overflow: 'hidden',
|
|
403
|
+
display: 'flex',
|
|
404
|
+
marginLeft: '1.5rem',
|
|
405
|
+
justifyContent: 'space-between',
|
|
340
406
|
}}
|
|
341
|
-
className={twMerge(
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
)}
|
|
407
|
+
// className={twMerge(
|
|
408
|
+
// makeBarListClassName('root'),
|
|
409
|
+
// 'qq-flex qq-justify-between qq-h-full qq-w-full',
|
|
410
|
+
// 'qq-space-x-6',
|
|
411
|
+
// className
|
|
412
|
+
// )}
|
|
347
413
|
{...other}
|
|
348
414
|
>
|
|
349
415
|
<div
|
|
350
416
|
// className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
|
|
351
|
-
className="qq-relative-w-full"
|
|
417
|
+
// className="qq-relative-w-full"
|
|
352
418
|
style={{
|
|
353
419
|
width: 'calc(100%)',
|
|
354
420
|
boxSizing: 'content-box',
|
|
355
421
|
height: '100%',
|
|
356
|
-
|
|
422
|
+
paddingRight: 25,
|
|
423
|
+
position: 'relative',
|
|
357
424
|
}}
|
|
358
425
|
>
|
|
359
426
|
{data.slice(0, NUM_TO_SHOW).map((item, idx) => {
|
|
@@ -363,33 +430,48 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
363
430
|
return (
|
|
364
431
|
<div
|
|
365
432
|
key={item[xAxisField] + 'label' + idx}
|
|
366
|
-
className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
|
|
433
|
+
// className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
|
|
367
434
|
style={{
|
|
368
435
|
width: `${widths[idx]}%`,
|
|
369
436
|
transition: showAnimation ? 'all 2s' : '',
|
|
370
437
|
boxSizing: 'content-box',
|
|
371
438
|
backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
|
|
439
|
+
display: 'flex',
|
|
440
|
+
alignItems: 'center',
|
|
441
|
+
height: '2.25rem',
|
|
442
|
+
marginBottom: '0.5rem',
|
|
443
|
+
borderRadius: '0.25rem',
|
|
372
444
|
}}
|
|
373
445
|
>
|
|
374
446
|
<div
|
|
375
|
-
style={{
|
|
376
|
-
|
|
377
|
-
'
|
|
378
|
-
'
|
|
379
|
-
|
|
447
|
+
style={{
|
|
448
|
+
boxSizing: 'content-box',
|
|
449
|
+
position: 'absolute',
|
|
450
|
+
maxWidth: '100%',
|
|
451
|
+
display: 'flex',
|
|
452
|
+
marginLeft: '0.5rem',
|
|
453
|
+
}}
|
|
454
|
+
// className={twMerge(
|
|
455
|
+
// 'qq-absolute qq-max-w-full qq-flex',
|
|
456
|
+
// 'qq-ml-2'
|
|
457
|
+
// )}
|
|
380
458
|
>
|
|
381
459
|
<p
|
|
382
460
|
style={{
|
|
383
461
|
color: theme?.chartLabelColor,
|
|
384
462
|
boxSizing: 'content-box',
|
|
463
|
+
whiteSpace: 'nowrap',
|
|
464
|
+
overflow: 'hidden',
|
|
465
|
+
textOverflow: 'ellipsis',
|
|
385
466
|
fontFamily:
|
|
386
467
|
theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
468
|
+
fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
387
469
|
}}
|
|
388
|
-
className={twMerge(
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
)}
|
|
470
|
+
// className={twMerge(
|
|
471
|
+
// makeBarListClassName('barText'),
|
|
472
|
+
// 'qq-whitespace-nowrap truncate',
|
|
473
|
+
// 'qq-text-sm'
|
|
474
|
+
// )}
|
|
393
475
|
>
|
|
394
476
|
{item[xAxisField]}
|
|
395
477
|
</p>
|
|
@@ -404,7 +486,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
404
486
|
boxSizing: 'content-box',
|
|
405
487
|
fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
406
488
|
}}
|
|
407
|
-
className="qq-text-sm"
|
|
489
|
+
// className="qq-text-sm"
|
|
408
490
|
>
|
|
409
491
|
...{data.length - NUM_TO_SHOW} more
|
|
410
492
|
</div>
|
|
@@ -412,33 +494,48 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
412
494
|
</div>
|
|
413
495
|
{/* eslint-disable prettier/prettier */}
|
|
414
496
|
<div
|
|
415
|
-
style={{
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
497
|
+
style={{
|
|
498
|
+
boxSizing: 'content-box',
|
|
499
|
+
textAlign: 'right',
|
|
500
|
+
minWidth: 'min-content',
|
|
501
|
+
}}
|
|
502
|
+
// className={
|
|
503
|
+
// (makeBarListClassName('labels'), 'qq-text-right qq-min-w-min')
|
|
504
|
+
// }
|
|
419
505
|
>
|
|
420
506
|
{data.slice(0, NUM_TO_SHOW).map((item, idx) => (
|
|
421
507
|
<div
|
|
422
508
|
key={item[xAxisField] + 'value' + idx}
|
|
423
|
-
style={{
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
'
|
|
427
|
-
'
|
|
428
|
-
idx === data.length - 1 ?
|
|
429
|
-
|
|
509
|
+
style={{
|
|
510
|
+
boxSizing: 'content-box',
|
|
511
|
+
display: 'flex',
|
|
512
|
+
alignItems: 'center',
|
|
513
|
+
justifyContent: 'flex-end',
|
|
514
|
+
marginBottom: idx === data.length - 1 ? 0 : '0.5rem',
|
|
515
|
+
height: '2.25rem',
|
|
516
|
+
}}
|
|
517
|
+
// className={twMerge(
|
|
518
|
+
// makeBarListClassName('labelWrapper'),
|
|
519
|
+
// 'qq-flex qq-justify-end qq-items-center',
|
|
520
|
+
// 'qq-h-9',
|
|
521
|
+
// idx === data.length - 1 ? 'qq-mb-0' : 'qq-mb-2'
|
|
522
|
+
// )}
|
|
430
523
|
>
|
|
431
524
|
<p
|
|
432
525
|
style={{
|
|
433
526
|
color: theme?.chartLabelColor,
|
|
434
527
|
boxSizing: 'content-box',
|
|
435
528
|
fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
529
|
+
whiteSpace: 'nowrap',
|
|
530
|
+
overflow: 'hidden',
|
|
531
|
+
textOverflow: 'ellipsis',
|
|
532
|
+
fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
436
533
|
}}
|
|
437
|
-
className={twMerge(
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
)}
|
|
534
|
+
// className={twMerge(
|
|
535
|
+
// makeBarListClassName('labelText'),
|
|
536
|
+
// 'qq-whitespace-nowrap qq-truncate',
|
|
537
|
+
// 'qq-text-sm'
|
|
538
|
+
// )}
|
|
442
539
|
>
|
|
443
540
|
{valueFormatter(item[yAxisFields[0].field])}
|
|
444
541
|
</p>
|