@quillsql/react 1.7.5 → 1.7.6
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/ReportBuilder.js +1 -0
- package/lib/ReportBuilder.js.map +1 -1
- package/lib/SQLEditor.js +3 -3
- package/lib/SQLEditor.js.map +1 -1
- package/lib/Table.js +1 -1
- package/lib/Table.js.map +1 -1
- package/lib/components/BigModal/BigModal.js +1 -0
- package/lib/components/BigModal/BigModal.js.map +1 -1
- package/lib/components/Modal/Modal.js +1 -0
- package/lib/components/Modal/Modal.js.map +1 -1
- package/lib/hooks/useQuill.js +1 -0
- package/lib/hooks/useQuill.js.map +1 -1
- package/package.json +11 -4
- package/.eslintrc.json +0 -19
- package/.prettierrc +0 -11
- package/.vscode/settings.json +0 -10
- package/src/AddToDashboardModal.tsx +0 -1220
- package/src/BarList.tsx +0 -580
- package/src/Chart.tsx +0 -1337
- package/src/Context.tsx +0 -252
- package/src/Dashboard.tsx +0 -820
- package/src/DateRangePicker/Calendar.tsx +0 -442
- package/src/DateRangePicker/DateRangePicker.tsx +0 -261
- package/src/DateRangePicker/DateRangePickerButton.tsx +0 -250
- package/src/DateRangePicker/dateRangePickerUtils.tsx +0 -480
- package/src/DateRangePicker/index.ts +0 -4
- package/src/PieChart.tsx +0 -845
- package/src/QuillProvider.tsx +0 -81
- package/src/ReportBuilder.tsx +0 -2208
- package/src/SQLEditor.tsx +0 -1093
- package/src/Table.tsx +0 -1074
- package/src/TableChart.tsx +0 -428
- package/src/assets/ArrowDownHeadIcon.tsx +0 -11
- package/src/assets/ArrowDownIcon.tsx +0 -14
- package/src/assets/ArrowDownRightIcon.tsx +0 -14
- package/src/assets/ArrowLeftHeadIcon.tsx +0 -11
- package/src/assets/ArrowRightHeadIcon.tsx +0 -11
- package/src/assets/ArrowRightIcon.tsx +0 -14
- package/src/assets/ArrowUpHeadIcon.tsx +0 -11
- package/src/assets/ArrowUpIcon.tsx +0 -14
- package/src/assets/ArrowUpRightIcon.tsx +0 -14
- package/src/assets/CalendarIcon.tsx +0 -14
- package/src/assets/DoubleArrowLeftHeadIcon.tsx +0 -18
- package/src/assets/DoubleArrowRightHeadIcon.tsx +0 -20
- package/src/assets/ExclamationFilledIcon.tsx +0 -14
- package/src/assets/LoadingSpinner.tsx +0 -11
- package/src/assets/SearchIcon.tsx +0 -14
- package/src/assets/XCircleIcon.tsx +0 -14
- package/src/assets/index.ts +0 -16
- package/src/components/BigModal/BigModal.tsx +0 -108
- package/src/components/Dropdown/Dropdown.tsx +0 -169
- package/src/components/Dropdown/DropdownItem.tsx +0 -68
- package/src/components/Dropdown/index.ts +0 -2
- package/src/components/Modal/Modal.tsx +0 -132
- package/src/components/Modal/index.ts +0 -1
- package/src/components/selectUtils.ts +0 -60
- package/src/contexts/BaseColorContext.tsx +0 -5
- package/src/contexts/HoveredValueContext.tsx +0 -12
- package/src/contexts/RootStylesContext.tsx +0 -5
- package/src/contexts/SelectedValueContext.tsx +0 -13
- package/src/contexts/index.ts +0 -4
- package/src/hooks/index.ts +0 -4
- package/src/hooks/useInternalState.tsx +0 -18
- package/src/hooks/useOnClickOutside.tsx +0 -23
- package/src/hooks/useOnWindowResize.tsx +0 -17
- package/src/hooks/useQuill.ts +0 -138
- package/src/hooks/useSelectOnKeyDown.tsx +0 -80
- package/src/index.ts +0 -9
- package/src/lib/font.ts +0 -14
- package/src/lib/index.ts +0 -3
- package/src/lib/inputTypes.ts +0 -81
- package/src/lib/utils.tsx +0 -46
- package/tsconfig.json +0 -22
package/src/TableChart.tsx
DELETED
|
@@ -1,428 +0,0 @@
|
|
|
1
|
-
/* eslint-disable react/display-name */
|
|
2
|
-
// @ts-nocheck
|
|
3
|
-
import React, { useMemo, useState } from 'react';
|
|
4
|
-
// import { twMerge } from 'tailwind-merge';
|
|
5
|
-
import {
|
|
6
|
-
Area,
|
|
7
|
-
CartesianGrid,
|
|
8
|
-
Legend,
|
|
9
|
-
ComposedChart as ReChartsAreaChart,
|
|
10
|
-
ResponsiveContainer,
|
|
11
|
-
Tooltip,
|
|
12
|
-
XAxis,
|
|
13
|
-
YAxis,
|
|
14
|
-
} from 'recharts';
|
|
15
|
-
import { format } from 'date-fns';
|
|
16
|
-
import { valueFormatter } from './Chart';
|
|
17
|
-
|
|
18
|
-
// const data = [
|
|
19
|
-
// { name: 'Pool and Spa', median_days: 56.5104166666667 },
|
|
20
|
-
// { name: 'Fencing & Gates', median_days: 56.1202719907407 },
|
|
21
|
-
// { name: 'Fireplace & Chimney', median_days: 51.5482581018519 },
|
|
22
|
-
// { name: 'Concrete, Driveway & Masonry', median_days: 49.6866608796296 },
|
|
23
|
-
// { name: 'Painting', median_days: 37.3942939814815 },
|
|
24
|
-
// { name: 'Roofing', median_days: 35.6859027777778 },
|
|
25
|
-
// { name: 'Flooring', median_days: 34.6166956018519 },
|
|
26
|
-
// { name: 'Irrigation, Landscaping & Trees', median_days: 27.4079456018519 },
|
|
27
|
-
// { name: 'Glass & Windows', median_days: 27.1180613425926 },
|
|
28
|
-
// { name: 'Remodeling Interior/Exterior', median_days: 24.9670775462963 },
|
|
29
|
-
// { name: 'Pests, Extermination & Wildlife', median_days: 20.7024537037037 },
|
|
30
|
-
// { name: 'Appliance', median_days: 18.7326157407407 },
|
|
31
|
-
// { name: 'Garage Doors', median_days: 18.0982175925926 },
|
|
32
|
-
// { name: 'Electrical', median_days: 16.1240740740741 },
|
|
33
|
-
// {
|
|
34
|
-
// name: '(HVAC) Heating, Ventilation & Air Conditioning',
|
|
35
|
-
// median_days: 16.0118576388889,
|
|
36
|
-
// },
|
|
37
|
-
// { name: 'Simple Maintenance Skills', median_days: 15.153130787037 },
|
|
38
|
-
// { name: 'Utilities', median_days: 13.4653240740741 },
|
|
39
|
-
// { name: 'Carpentry, Framing, Doors', median_days: 12.3884664351852 },
|
|
40
|
-
// {
|
|
41
|
-
// name: 'Cleaning, Sanitation & Restoration Services',
|
|
42
|
-
// median_days: 11.6931886574074,
|
|
43
|
-
// },
|
|
44
|
-
// { name: 'Awning & Sunshades', median_days: 10.3050983796296 },
|
|
45
|
-
// { name: 'Plumbing', median_days: 10.2094328703704 },
|
|
46
|
-
// { name: 'Carpet & Floor Cleaning', median_days: 8.9691087962963 },
|
|
47
|
-
// { name: 'Junk Removal & Hauling', median_days: 8.57038194444444 },
|
|
48
|
-
// { name: 'Locksmith', median_days: 4.49019097222222 },
|
|
49
|
-
// ];
|
|
50
|
-
|
|
51
|
-
type Bar = {
|
|
52
|
-
key?: string;
|
|
53
|
-
value: number;
|
|
54
|
-
name: string;
|
|
55
|
-
icon?: React.JSXElementConstructor<any>;
|
|
56
|
-
href?: string;
|
|
57
|
-
target?: string;
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
const getWidthsFromValues = (dataValues: number[]) => {
|
|
61
|
-
let maxValue = -Infinity;
|
|
62
|
-
dataValues.forEach(value => {
|
|
63
|
-
maxValue = Math.max(maxValue, value);
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
return dataValues.map(value => {
|
|
67
|
-
if (value === 0) return 0;
|
|
68
|
-
return Math.max((value / maxValue) * 100, 1);
|
|
69
|
-
});
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
interface YAxisField {
|
|
73
|
-
label: string;
|
|
74
|
-
field: string;
|
|
75
|
-
chartType?: string;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
export interface BarListProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
79
|
-
data: object[];
|
|
80
|
-
yAxisFields: YAxisField[];
|
|
81
|
-
colors: string[];
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
export function hexToRgbaWith10PercentAlpha(hex) {
|
|
85
|
-
// Convert the hex color to RGB
|
|
86
|
-
const r = parseInt(hex.slice(1, 3), 16);
|
|
87
|
-
const g = parseInt(hex.slice(3, 5), 16);
|
|
88
|
-
const b = parseInt(hex.slice(5, 7), 16);
|
|
89
|
-
|
|
90
|
-
// Set the alpha value to 10%
|
|
91
|
-
const alpha = 0.1;
|
|
92
|
-
|
|
93
|
-
// Return the color as an rgba string
|
|
94
|
-
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
function Columns({ columns, data, theme }) {
|
|
98
|
-
return (
|
|
99
|
-
<div
|
|
100
|
-
style={{
|
|
101
|
-
display: 'flex',
|
|
102
|
-
flexDirection: 'row',
|
|
103
|
-
// overflowX: 'scroll',
|
|
104
|
-
// overflowY: 'hidden',
|
|
105
|
-
overflow: 'scroll',
|
|
106
|
-
height: '100%',
|
|
107
|
-
}}
|
|
108
|
-
>
|
|
109
|
-
{columns.map(elem => (
|
|
110
|
-
<Column key={elem.field} column={elem} data={data} theme={theme} />
|
|
111
|
-
))}
|
|
112
|
-
</div>
|
|
113
|
-
);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
function Column({ column, data, theme }) {
|
|
117
|
-
return (
|
|
118
|
-
<div
|
|
119
|
-
style={{
|
|
120
|
-
paddingLeft: 20,
|
|
121
|
-
paddingRight: 20,
|
|
122
|
-
// width: 'max-content',
|
|
123
|
-
display: 'inline-flex',
|
|
124
|
-
flexDirection: 'column',
|
|
125
|
-
whiteSpace: 'nowrap',
|
|
126
|
-
}}
|
|
127
|
-
>
|
|
128
|
-
<div
|
|
129
|
-
style={{
|
|
130
|
-
height: 40,
|
|
131
|
-
minHeight: 40,
|
|
132
|
-
color: theme?.primaryTextColor,
|
|
133
|
-
boxSizing: 'content-box',
|
|
134
|
-
fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
135
|
-
fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
136
|
-
fontWeight: theme?.fontWeightMedium || '500',
|
|
137
|
-
}}
|
|
138
|
-
>
|
|
139
|
-
{column.label}
|
|
140
|
-
</div>
|
|
141
|
-
{data.map(elem => (
|
|
142
|
-
<Cell item={elem[column.field]} theme={theme} />
|
|
143
|
-
))}
|
|
144
|
-
</div>
|
|
145
|
-
);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
function Cell({ item, theme }) {
|
|
149
|
-
return (
|
|
150
|
-
<div
|
|
151
|
-
style={{
|
|
152
|
-
height: 40,
|
|
153
|
-
minHeight: 40,
|
|
154
|
-
whiteSpace: 'nowrap',
|
|
155
|
-
width: '100%',
|
|
156
|
-
fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
157
|
-
fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
158
|
-
color: theme?.chartLabelColor,
|
|
159
|
-
}}
|
|
160
|
-
>
|
|
161
|
-
{item}
|
|
162
|
-
</div>
|
|
163
|
-
);
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
const TableChart = React.forwardRef<HTMLDivElement, BarListProps>(
|
|
167
|
-
(props, ref) => {
|
|
168
|
-
const { data = [], yAxisFields, containerStyle, theme, ...other } = props;
|
|
169
|
-
|
|
170
|
-
// const widths = getWidthsFromValues(
|
|
171
|
-
// data.map(item => item[yAxisFields[0].field])
|
|
172
|
-
// );
|
|
173
|
-
|
|
174
|
-
const NUM_TO_SHOW = Math.floor(containerStyle?.height / 40) - 1 || 6;
|
|
175
|
-
|
|
176
|
-
const memoizedData = useMemo(() => {
|
|
177
|
-
return data.slice(0, NUM_TO_SHOW).map(item => {
|
|
178
|
-
const fieldsWithFormattedValues = {};
|
|
179
|
-
|
|
180
|
-
for (const field of yAxisFields) {
|
|
181
|
-
const value = item[field.field];
|
|
182
|
-
fieldsWithFormattedValues[field.field] = valueFormatter({
|
|
183
|
-
value,
|
|
184
|
-
field: field.field,
|
|
185
|
-
fields: yAxisFields,
|
|
186
|
-
});
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
return fieldsWithFormattedValues;
|
|
190
|
-
});
|
|
191
|
-
}, [data, NUM_TO_SHOW]);
|
|
192
|
-
|
|
193
|
-
if (!memoizedData.length) {
|
|
194
|
-
return (
|
|
195
|
-
<div
|
|
196
|
-
ref={ref}
|
|
197
|
-
style={{
|
|
198
|
-
// width: '100%',
|
|
199
|
-
boxSizing: 'content-box',
|
|
200
|
-
height: '100%',
|
|
201
|
-
// height: hei
|
|
202
|
-
// marginLeft: 25,
|
|
203
|
-
// background: 'red',
|
|
204
|
-
marginTop: 20,
|
|
205
|
-
// paddingRight: 25,
|
|
206
|
-
overflow: 'hidden',
|
|
207
|
-
display: 'flex',
|
|
208
|
-
marginLeft: '1.5rem',
|
|
209
|
-
justifyContent: 'space-between',
|
|
210
|
-
}}
|
|
211
|
-
// className={twMerge(
|
|
212
|
-
// makeBarListClassName('root'),
|
|
213
|
-
// 'qq-flex qq-justify-between qq-h-full qq-w-full',
|
|
214
|
-
// 'qq-space-x-6',
|
|
215
|
-
// className
|
|
216
|
-
// )}
|
|
217
|
-
{...other}
|
|
218
|
-
></div>
|
|
219
|
-
);
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
return (
|
|
223
|
-
<div
|
|
224
|
-
style={{
|
|
225
|
-
boxSizing: 'content-box',
|
|
226
|
-
height: containerStyle?.height || '100%',
|
|
227
|
-
marginTop: 20,
|
|
228
|
-
// overflow: 'hidden',
|
|
229
|
-
display: 'flex',
|
|
230
|
-
marginLeft: '1rem',
|
|
231
|
-
flexDirection: 'column',
|
|
232
|
-
// justifyContent: 'space-between',
|
|
233
|
-
}}
|
|
234
|
-
>
|
|
235
|
-
<Columns columns={yAxisFields} data={memoizedData} theme={theme} />
|
|
236
|
-
{data.length > NUM_TO_SHOW && (
|
|
237
|
-
<div
|
|
238
|
-
style={{
|
|
239
|
-
color: theme?.chartLabelColor,
|
|
240
|
-
boxSizing: 'content-box',
|
|
241
|
-
fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
242
|
-
fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
243
|
-
marginLeft: 12,
|
|
244
|
-
marginTop: 8,
|
|
245
|
-
}}
|
|
246
|
-
// className="qq-text-sm"
|
|
247
|
-
>
|
|
248
|
-
...{data.length - NUM_TO_SHOW} more
|
|
249
|
-
</div>
|
|
250
|
-
)}
|
|
251
|
-
</div>
|
|
252
|
-
);
|
|
253
|
-
|
|
254
|
-
// return (
|
|
255
|
-
// <div
|
|
256
|
-
// ref={ref}
|
|
257
|
-
// style={{
|
|
258
|
-
// // width: '100%',
|
|
259
|
-
// boxSizing: 'content-box',
|
|
260
|
-
// height: '100%',
|
|
261
|
-
// // height: hei
|
|
262
|
-
// // marginLeft: 25,
|
|
263
|
-
// // background: 'red',
|
|
264
|
-
// marginTop: 20,
|
|
265
|
-
// // paddingRight: 25,
|
|
266
|
-
// overflow: 'hidden',
|
|
267
|
-
// display: 'flex',
|
|
268
|
-
// marginLeft: '1.5rem',
|
|
269
|
-
// justifyContent: 'space-between',
|
|
270
|
-
// }}
|
|
271
|
-
// // className={twMerge(
|
|
272
|
-
// // makeBarListClassName('root'),
|
|
273
|
-
// // 'qq-flex qq-justify-between qq-h-full qq-w-full',
|
|
274
|
-
// // 'qq-space-x-6',
|
|
275
|
-
// // className
|
|
276
|
-
// // )}
|
|
277
|
-
// {...other}
|
|
278
|
-
// >
|
|
279
|
-
// <div
|
|
280
|
-
// // className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
|
|
281
|
-
// // className="qq-relative-w-full"
|
|
282
|
-
// style={{
|
|
283
|
-
// width: 'calc(100%)',
|
|
284
|
-
// boxSizing: 'content-box',
|
|
285
|
-
// height: '100%',
|
|
286
|
-
// paddingRight: 25,
|
|
287
|
-
// position: 'relative',
|
|
288
|
-
// }}
|
|
289
|
-
// >
|
|
290
|
-
// <div
|
|
291
|
-
// style={{
|
|
292
|
-
// display: 'flex',
|
|
293
|
-
// flexDirection: 'row',
|
|
294
|
-
// alignItems: 'center',
|
|
295
|
-
// boxSizing: 'content-box',
|
|
296
|
-
// }}
|
|
297
|
-
// >
|
|
298
|
-
// {yAxisFields.map((elem, index) => (
|
|
299
|
-
// <div
|
|
300
|
-
// key={index}
|
|
301
|
-
// style={{
|
|
302
|
-
// color: theme?.primaryTextColor,
|
|
303
|
-
// width: 98,
|
|
304
|
-
// maxWidth: 98,
|
|
305
|
-
// boxSizing: 'content-box',
|
|
306
|
-
// whiteSpace: 'nowrap',
|
|
307
|
-
// overflow: 'hidden',
|
|
308
|
-
// textOverflow: 'ellipsis',
|
|
309
|
-
// fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
310
|
-
// fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
311
|
-
// fontWeight: theme?.fontWeightMedium || '500',
|
|
312
|
-
// }}
|
|
313
|
-
// // className={twMerge(
|
|
314
|
-
// // makeBarListClassName('barText'),
|
|
315
|
-
// // 'qq-whitespace-nowrap truncate',
|
|
316
|
-
// // 'qq-text-sm'
|
|
317
|
-
// // )}
|
|
318
|
-
// >
|
|
319
|
-
// {elem.label}
|
|
320
|
-
// </div>
|
|
321
|
-
// ))}
|
|
322
|
-
// </div>
|
|
323
|
-
// {data.slice(0, NUM_TO_SHOW).map((item, idx) => {
|
|
324
|
-
// // const Icon = item.icon;
|
|
325
|
-
// const Icon = null;
|
|
326
|
-
|
|
327
|
-
// return (
|
|
328
|
-
// <div
|
|
329
|
-
// key={'label' + idx}
|
|
330
|
-
// // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
|
|
331
|
-
// style={{
|
|
332
|
-
// // width: `${widths[idx]}%`,
|
|
333
|
-
// width: '100%',
|
|
334
|
-
// transition: showAnimation ? 'all 2s' : '',
|
|
335
|
-
// boxSizing: 'content-box',
|
|
336
|
-
// // backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
|
|
337
|
-
// display: 'flex',
|
|
338
|
-
// alignItems: 'center',
|
|
339
|
-
// height: '2.25rem',
|
|
340
|
-
// // marginBottom: '0.5rem',
|
|
341
|
-
// borderRadius: '0.25rem',
|
|
342
|
-
// }}
|
|
343
|
-
// >
|
|
344
|
-
// <div
|
|
345
|
-
// style={{
|
|
346
|
-
// boxSizing: 'content-box',
|
|
347
|
-
// position: 'absolute',
|
|
348
|
-
// maxWidth: '100%',
|
|
349
|
-
// display: 'flex',
|
|
350
|
-
// // height: 40,
|
|
351
|
-
// // minHeight: 40,
|
|
352
|
-
// // marginLeft: '0.5rem',
|
|
353
|
-
// }}
|
|
354
|
-
// // className={twMerge(
|
|
355
|
-
// // 'qq-absolute qq-max-w-full qq-flex',
|
|
356
|
-
// // 'qq-ml-2'
|
|
357
|
-
// // )}
|
|
358
|
-
// >
|
|
359
|
-
// <div
|
|
360
|
-
// style={{
|
|
361
|
-
// display: 'flex',
|
|
362
|
-
// flexDirection: 'row',
|
|
363
|
-
// alignItems: 'center',
|
|
364
|
-
// boxSizing: 'content-box',
|
|
365
|
-
// height: 40,
|
|
366
|
-
// minHeight: 40,
|
|
367
|
-
// }}
|
|
368
|
-
// >
|
|
369
|
-
// {yAxisFields.map((elem, index) => (
|
|
370
|
-
// <div
|
|
371
|
-
// key={index}
|
|
372
|
-
// style={{
|
|
373
|
-
// width: 98,
|
|
374
|
-
// maxWidth: 98,
|
|
375
|
-
// color: theme?.chartLabelColor,
|
|
376
|
-
// boxSizing: 'content-box',
|
|
377
|
-
// paddingRight: 10,
|
|
378
|
-
// height: 40,
|
|
379
|
-
// minHeight: 40,
|
|
380
|
-
// whiteSpace: 'nowrap',
|
|
381
|
-
// overflow: 'hidden',
|
|
382
|
-
// textOverflow: 'ellipsis',
|
|
383
|
-
// fontFamily:
|
|
384
|
-
// theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
385
|
-
// fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
386
|
-
// borderBottomColor: theme?.borderColor,
|
|
387
|
-
// borderBottomWidth: 1,
|
|
388
|
-
// borderBottomStyle: 'solid',
|
|
389
|
-
// }}
|
|
390
|
-
// // className={twMerge(
|
|
391
|
-
// // makeBarListClassName('barText'),
|
|
392
|
-
// // 'qq-whitespace-nowrap truncate',
|
|
393
|
-
// // 'qq-text-sm'
|
|
394
|
-
// // )}
|
|
395
|
-
// >
|
|
396
|
-
// {valueFormatter({
|
|
397
|
-
// value: item[elem.field],
|
|
398
|
-
// field: elem.field,
|
|
399
|
-
// fields: yAxisFields,
|
|
400
|
-
// })}
|
|
401
|
-
// </div>
|
|
402
|
-
// ))}
|
|
403
|
-
// </div>
|
|
404
|
-
// </div>
|
|
405
|
-
// </div>
|
|
406
|
-
// );
|
|
407
|
-
// })}
|
|
408
|
-
// {data.length > NUM_TO_SHOW && (
|
|
409
|
-
// <div
|
|
410
|
-
// style={{
|
|
411
|
-
// color: theme?.chartLabelColor,
|
|
412
|
-
// boxSizing: 'content-box',
|
|
413
|
-
// fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
414
|
-
// fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
415
|
-
// }}
|
|
416
|
-
// // className="qq-text-sm"
|
|
417
|
-
// >
|
|
418
|
-
// ...{data.length - NUM_TO_SHOW} more
|
|
419
|
-
// </div>
|
|
420
|
-
// )}
|
|
421
|
-
// </div>
|
|
422
|
-
// {/* eslint-disable prettier/prettier */}
|
|
423
|
-
// </div>
|
|
424
|
-
// );
|
|
425
|
-
}
|
|
426
|
-
);
|
|
427
|
-
|
|
428
|
-
export default TableChart;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
const ArrowDownHeadIcon = ({ ...props }) => (
|
|
5
|
-
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
|
6
|
-
<path fill="none" d="M0 0h24v24H0z" />
|
|
7
|
-
<path fill="currentColor" d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
|
|
8
|
-
</svg>
|
|
9
|
-
);
|
|
10
|
-
|
|
11
|
-
export default ArrowDownHeadIcon;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
const ArrowDownIcon = ({ ...props }) => (
|
|
5
|
-
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
|
6
|
-
<path fill="none" d="M0 0h24v24H0z" />
|
|
7
|
-
<path
|
|
8
|
-
fill="currentColor"
|
|
9
|
-
d="M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11 16.172V4h2v12.172z"
|
|
10
|
-
/>
|
|
11
|
-
</svg>
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
export default ArrowDownIcon;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
const ArrowDownRightIcon = ({ ...props }) => (
|
|
5
|
-
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
|
6
|
-
<path fill="none" d="M0 0h24v24H0z" />
|
|
7
|
-
<path
|
|
8
|
-
fill="currentColor"
|
|
9
|
-
d="M14.59 16.004L5.982 7.397l1.414-1.414 8.607 8.606V7.004h2v11h-11v-2z"
|
|
10
|
-
/>
|
|
11
|
-
</svg>
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
export default ArrowDownRightIcon;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
const ArrowLeftHeadIcon = ({ ...props }) => (
|
|
5
|
-
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
6
|
-
<path fill="none" d="M0 0h24v24H0z" />
|
|
7
|
-
<path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z" />
|
|
8
|
-
</svg>
|
|
9
|
-
);
|
|
10
|
-
|
|
11
|
-
export default ArrowLeftHeadIcon;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
const ArrowRightHeadIcon = ({ ...props }) => (
|
|
5
|
-
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
6
|
-
<path fill="none" d="M0 0h24v24H0z" />
|
|
7
|
-
<path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" />
|
|
8
|
-
</svg>
|
|
9
|
-
);
|
|
10
|
-
|
|
11
|
-
export default ArrowRightHeadIcon;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
const ArrowRightIcon = ({ ...props }) => (
|
|
5
|
-
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
|
6
|
-
<path fill="none" d="M0 0h24v24H0z" />
|
|
7
|
-
<path
|
|
8
|
-
fill="currentColor"
|
|
9
|
-
d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"
|
|
10
|
-
/>
|
|
11
|
-
</svg>
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
export default ArrowRightIcon;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
const ArrowUpHeadIcon = ({ ...props }) => (
|
|
5
|
-
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
|
6
|
-
<path fill="none" d="M0 0h24v24H0z" />
|
|
7
|
-
<path fill="currentColor" d="M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z" />
|
|
8
|
-
</svg>
|
|
9
|
-
);
|
|
10
|
-
|
|
11
|
-
export default ArrowUpHeadIcon;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
const ArrowUpIcon = ({ ...props }) => (
|
|
5
|
-
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
|
6
|
-
<path fill="none" d="M0 0h24v24H0z" />
|
|
7
|
-
<path
|
|
8
|
-
fill="currentColor"
|
|
9
|
-
d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"
|
|
10
|
-
/>
|
|
11
|
-
</svg>
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
export default ArrowUpIcon;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
const ArrowUpRightIcon = ({ ...props }) => (
|
|
5
|
-
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
|
6
|
-
<path fill="none" d="M0 0h24v24H0z" />
|
|
7
|
-
<path
|
|
8
|
-
fill="currentColor"
|
|
9
|
-
d="M16.004 9.414l-8.607 8.607-1.414-1.414L14.589 8H7.004V6h11v11h-2V9.414z"
|
|
10
|
-
/>
|
|
11
|
-
</svg>
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
export default ArrowUpRightIcon;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
const CalendarIcon = ({ ...props }) => (
|
|
5
|
-
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
|
6
|
-
<path
|
|
7
|
-
fillRule="evenodd"
|
|
8
|
-
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
|
|
9
|
-
clipRule="evenodd"
|
|
10
|
-
/>
|
|
11
|
-
</svg>
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
export default CalendarIcon;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
const DoubleArrowLeftHeadIcon = ({ ...props }) => (
|
|
5
|
-
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
6
|
-
<path id="svg_1" d="m0,0l24,0l0,24l-24,0l0,-24z" fill="none" />
|
|
7
|
-
<path
|
|
8
|
-
id="svg_2"
|
|
9
|
-
d="m14.1247,12l4.95,4.95l-1.414,1.414l-6.364,-6.364l6.364,-6.364l1.414,1.414l-4.95,4.95z"
|
|
10
|
-
/>
|
|
11
|
-
<path
|
|
12
|
-
id="svg_3"
|
|
13
|
-
d="m7.31152,12l4.95,4.95l-1.414,1.414l-6.364,-6.364l6.364,-6.364l1.414,1.414l-4.95,4.95z"
|
|
14
|
-
/>
|
|
15
|
-
</svg>
|
|
16
|
-
);
|
|
17
|
-
|
|
18
|
-
export default DoubleArrowLeftHeadIcon;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
const DoubleArrowRightHeadIcon = ({ ...props }) => (
|
|
5
|
-
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
6
|
-
<path id="svg_1" d="m0,0l24,0l0,24l-24,0l0,-24z" fill="none" />
|
|
7
|
-
<path
|
|
8
|
-
transform="rotate(180 15.1857 12)"
|
|
9
|
-
id="svg_2"
|
|
10
|
-
d="m14.1247,12l4.95,4.95l-1.414,1.414l-6.364,-6.364l6.364,-6.364l1.414,1.414l-4.95,4.95z"
|
|
11
|
-
/>
|
|
12
|
-
<path
|
|
13
|
-
transform="rotate(180 8.37252 12)"
|
|
14
|
-
id="svg_3"
|
|
15
|
-
d="m7.31152,12l4.95,4.95l-1.414,1.414l-6.364,-6.364l6.364,-6.364l1.414,1.414l-4.95,4.95z"
|
|
16
|
-
/>
|
|
17
|
-
</svg>
|
|
18
|
-
);
|
|
19
|
-
|
|
20
|
-
export default DoubleArrowRightHeadIcon;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
const ExclamationFilledIcon = ({ ...props }) => (
|
|
5
|
-
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
6
|
-
<path
|
|
7
|
-
fillRule="evenodd"
|
|
8
|
-
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
|
|
9
|
-
clipRule="evenodd"
|
|
10
|
-
/>
|
|
11
|
-
</svg>
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
export default ExclamationFilledIcon;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
const LoadingSpinner = ({ ...props }) => (
|
|
5
|
-
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
6
|
-
<path fill="none" d="M0 0h24v24H0z" />
|
|
7
|
-
<path d="M18.364 5.636L16.95 7.05A7 7 0 1 0 19 12h2a9 9 0 1 1-2.636-6.364z" />
|
|
8
|
-
</svg>
|
|
9
|
-
);
|
|
10
|
-
|
|
11
|
-
export default LoadingSpinner;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
const SearchIcon = ({ ...props }) => (
|
|
5
|
-
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
|
6
|
-
<path
|
|
7
|
-
fillRule="evenodd"
|
|
8
|
-
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
|
9
|
-
clipRule="evenodd"
|
|
10
|
-
/>
|
|
11
|
-
</svg>
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
export default SearchIcon;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
const XCircleIcon = ({ ...props }) => (
|
|
5
|
-
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
|
6
|
-
<path
|
|
7
|
-
fillRule="evenodd"
|
|
8
|
-
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
|
9
|
-
clipRule="evenodd"
|
|
10
|
-
/>
|
|
11
|
-
</svg>
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
export default XCircleIcon;
|