@quillsql/react 2.8.5 → 2.8.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/dist/AddToDashboardModal.js +146 -180
- package/dist/BarList.js +36 -43
- package/dist/Chart.js +99 -131
- package/dist/ChartBuilder.js +80 -88
- package/dist/ChartEditor.js +14 -20
- package/dist/Context.js +52 -56
- package/dist/Dashboard.d.ts.map +1 -1
- package/dist/Dashboard.js +246 -305
- package/dist/DateRangePicker/Calendar.js +41 -45
- package/dist/DateRangePicker/DateRangePicker.js +32 -60
- package/dist/DateRangePicker/DateRangePickerButton.js +14 -16
- package/dist/DateRangePicker/dateRangePickerUtils.d.ts +6 -0
- package/dist/DateRangePicker/dateRangePickerUtils.d.ts.map +1 -1
- package/dist/DateRangePicker/dateRangePickerUtils.js +89 -89
- package/dist/DateRangePicker/index.js +1 -8
- package/dist/PieChart.js +35 -69
- package/dist/QuillProvider.js +4 -6
- package/dist/ReportBuilder.js +120 -128
- package/dist/SQLEditor.js +56 -64
- package/dist/Table.d.ts +2 -1
- package/dist/Table.d.ts.map +1 -1
- package/dist/Table.js +64 -68
- package/dist/TableChart.js +17 -44
- package/dist/assets/ArrowDownHeadIcon.js +3 -5
- package/dist/assets/ArrowDownIcon.js +3 -5
- package/dist/assets/ArrowDownRightIcon.js +3 -5
- package/dist/assets/ArrowLeftHeadIcon.js +3 -5
- package/dist/assets/ArrowRightHeadIcon.js +3 -5
- package/dist/assets/ArrowRightIcon.js +3 -5
- package/dist/assets/ArrowUpHeadIcon.js +3 -5
- package/dist/assets/ArrowUpIcon.js +3 -5
- package/dist/assets/ArrowUpRightIcon.js +3 -5
- package/dist/assets/CalendarIcon.js +3 -5
- package/dist/assets/CalendarNormalIcon.js +3 -5
- package/dist/assets/DoubleArrowLeftHeadIcon.js +3 -5
- package/dist/assets/DoubleArrowRightHeadIcon.js +3 -5
- package/dist/assets/ExclamationFilledIcon.js +3 -5
- package/dist/assets/FilterIcon.js +3 -5
- package/dist/assets/LoadingSpinner.js +3 -5
- package/dist/assets/RefreshIcon.js +3 -5
- package/dist/assets/SearchIcon.js +3 -5
- package/dist/assets/UpLeftArrowsIcon.js +3 -5
- package/dist/assets/XCircleIcon.js +3 -5
- package/dist/assets/XIcon.js +3 -5
- package/dist/assets/index.js +21 -48
- package/dist/components/BigModal/BigModal.js +13 -38
- package/dist/components/Dropdown/Dropdown.js +24 -52
- package/dist/components/Dropdown/DropdownItem.js +9 -34
- package/dist/components/Dropdown/index.js +2 -10
- package/dist/components/Modal/Modal.js +13 -38
- package/dist/components/Modal/index.js +1 -8
- package/dist/components/QuillCard.js +8 -12
- package/dist/components/SqlTextEditor.d.ts +7 -0
- package/dist/components/SqlTextEditor.d.ts.map +1 -0
- package/dist/components/SqlTextEditor.js +14 -0
- package/dist/components/UiComponents.js +37 -50
- package/dist/components/selectUtils.js +6 -16
- package/dist/contexts/BaseColorContext.js +3 -5
- package/dist/contexts/HoveredValueContext.js +3 -5
- package/dist/contexts/RootStylesContext.js +3 -5
- package/dist/contexts/SelectedValueContext.js +3 -5
- package/dist/contexts/index.js +4 -14
- package/dist/hooks/index.js +4 -14
- package/dist/hooks/useDashboard.d.ts +7 -0
- package/dist/hooks/useDashboard.d.ts.map +1 -0
- package/dist/hooks/useDashboard.js +48 -0
- package/dist/hooks/useInternalState.js +3 -5
- package/dist/hooks/useOnClickOutside.js +3 -5
- package/dist/hooks/useOnWindowResize.js +4 -6
- package/dist/hooks/useQuill.js +11 -15
- package/dist/hooks/useSelectOnKeyDown.js +4 -6
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +13 -28
- package/dist/internals/ReportBuilder/PivotList.js +14 -19
- package/dist/internals/ReportBuilder/PivotModal.js +84 -91
- package/dist/internals/ReportBuilder/PivotModal.spec.js +70 -72
- package/dist/lib/font.js +2 -5
- package/dist/lib/index.js +3 -19
- package/dist/lib/inputTypes.js +1 -2
- package/dist/lib/utils.js +8 -18
- package/dist/utils/aggregate.js +28 -34
- package/dist/utils/colorToHex.js +1 -4
- package/dist/utils/dataFetcher.js +2 -7
- package/dist/utils/downloadCSV.js +1 -5
- package/package.json +2 -1
package/dist/Table.js
CHANGED
|
@@ -1,18 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.SpecialTable = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
2
|
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
6
3
|
// @ts-nocheck
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
import { useContext, useEffect, useState } from 'react';
|
|
5
|
+
import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, } from './Context';
|
|
6
|
+
import { valueFormatter } from './Chart';
|
|
7
|
+
import { getData } from './utils/dataFetcher';
|
|
11
8
|
const Table = ({ chartId, columns, rows, containerStyle, csvFilename, showDownloadCsvButton, LoadingComponent, }) => {
|
|
12
|
-
const { dispatch, dashboard } =
|
|
13
|
-
const { dashboardFilters } =
|
|
14
|
-
const [client, _] =
|
|
15
|
-
const [theme] =
|
|
9
|
+
const { dispatch, dashboard } = useContext(DashboardContext);
|
|
10
|
+
const { dashboardFilters } = useContext(DashboardFiltersContext);
|
|
11
|
+
const [client, _] = useContext(ClientContext);
|
|
12
|
+
const [theme] = useContext(ThemeContext);
|
|
16
13
|
const downloadCSV = (rows, name) => {
|
|
17
14
|
// report.rows
|
|
18
15
|
if (!rows.length) {
|
|
@@ -41,9 +38,9 @@ const Table = ({ chartId, columns, rows, containerStyle, csvFilename, showDownlo
|
|
|
41
38
|
document.body.removeChild(downloadLink);
|
|
42
39
|
};
|
|
43
40
|
if (!chartId && rows && columns) {
|
|
44
|
-
return ((
|
|
41
|
+
return (_jsx(SpecialTable, { showDownloadCsvButton: showDownloadCsvButton, csvFilename: csvFilename || 'table', columns: columns, rows: rows, height: containerStyle?.height || '100%', theme: theme, containerStyle: containerStyle, LoadingComponent: LoadingComponent }));
|
|
45
42
|
}
|
|
46
|
-
return ((
|
|
43
|
+
return (_jsx(ChartUpdater, { showDownloadCsvButton: showDownloadCsvButton, dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, dashboardFilters: dashboardFilters, client: client, theme: theme, downloadCSV: downloadCSV, csvFilename: csvFilename, LoadingComponent: LoadingComponent }));
|
|
47
44
|
};
|
|
48
45
|
const compareValues = (a, b, column) => {
|
|
49
46
|
const valueA = a[column];
|
|
@@ -62,13 +59,13 @@ const compareValues = (a, b, column) => {
|
|
|
62
59
|
// For strings
|
|
63
60
|
return valueA.localeCompare(valueB);
|
|
64
61
|
};
|
|
65
|
-
function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingComponent, theme, showDownloadCsvButton = true, csvFilename, DownloadCSVButtonComponent, AddToDashboardButtonComponent, isTableChart = false, name, }) {
|
|
66
|
-
const [activeRows, setActiveRows] =
|
|
67
|
-
const [page, setPage] =
|
|
68
|
-
const [maxPage, setMaxPage] =
|
|
69
|
-
const [sortColumn, setSortColumn] =
|
|
70
|
-
const [sortDirection, setSortDirection] =
|
|
71
|
-
|
|
62
|
+
export function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingComponent, theme, showDownloadCsvButton = true, csvFilename, DownloadCSVButtonComponent, AddToDashboardButtonComponent, isTableChart = false, name, }) {
|
|
63
|
+
const [activeRows, setActiveRows] = useState([]);
|
|
64
|
+
const [page, setPage] = useState(1);
|
|
65
|
+
const [maxPage, setMaxPage] = useState(1);
|
|
66
|
+
const [sortColumn, setSortColumn] = useState(null);
|
|
67
|
+
const [sortDirection, setSortDirection] = useState('desc');
|
|
68
|
+
useEffect(() => {
|
|
72
69
|
const sortedRows = [...rows];
|
|
73
70
|
if (sortColumn) {
|
|
74
71
|
sortedRows.sort((a, b) => {
|
|
@@ -114,7 +111,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
|
|
|
114
111
|
const newRows = [];
|
|
115
112
|
for (let i = 0; i < rows.length; i++) {
|
|
116
113
|
const newRow = {};
|
|
117
|
-
Object.keys(rows[i]).forEach((field) => (newRow[field] =
|
|
114
|
+
Object.keys(rows[i]).forEach((field) => (newRow[field] = valueFormatter({
|
|
118
115
|
value: rows[i][field],
|
|
119
116
|
field: field,
|
|
120
117
|
fields: columns,
|
|
@@ -166,7 +163,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
|
|
|
166
163
|
document.body.removeChild(downloadLink);
|
|
167
164
|
};
|
|
168
165
|
if (loading) {
|
|
169
|
-
return ((
|
|
166
|
+
return (_jsx("div", { style: {
|
|
170
167
|
...containerStyle,
|
|
171
168
|
// paddingLeft: 25,
|
|
172
169
|
// paddingRight: 25,
|
|
@@ -178,7 +175,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
|
|
|
178
175
|
// overflow: 'hidden',
|
|
179
176
|
// @ts-ignore
|
|
180
177
|
// boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
|
|
181
|
-
}, children: (
|
|
178
|
+
}, children: _jsxs("div", { style: {
|
|
182
179
|
height: '100%',
|
|
183
180
|
overflow: 'scroll',
|
|
184
181
|
borderRadius: 6,
|
|
@@ -193,7 +190,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
|
|
|
193
190
|
justifyContent: 'center',
|
|
194
191
|
alignItems: 'center',
|
|
195
192
|
// maxHeight: 600,
|
|
196
|
-
}, children: [LoadingComponent && (
|
|
193
|
+
}, children: [LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsxs("svg", { width: "24", height: "24", children: [_jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }))] }) }));
|
|
197
194
|
}
|
|
198
195
|
if (!columns || !columns.length || !activeRows) {
|
|
199
196
|
return null;
|
|
@@ -213,7 +210,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
|
|
|
213
210
|
return null;
|
|
214
211
|
}
|
|
215
212
|
}
|
|
216
|
-
return ((
|
|
213
|
+
return (_jsxs("div", { style: {
|
|
217
214
|
...containerStyle,
|
|
218
215
|
// paddingLeft: 25,
|
|
219
216
|
// paddingRight: 25,
|
|
@@ -226,7 +223,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
|
|
|
226
223
|
// overflow: 'hidden',
|
|
227
224
|
// @ts-ignore
|
|
228
225
|
// boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
|
|
229
|
-
}, children: [(
|
|
226
|
+
}, children: [_jsx("div", { style: {
|
|
230
227
|
height: '100%',
|
|
231
228
|
overflow: 'auto',
|
|
232
229
|
borderRadius: 6,
|
|
@@ -237,12 +234,12 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
|
|
|
237
234
|
boxSizing: 'border-box',
|
|
238
235
|
outline: 'none',
|
|
239
236
|
// maxHeight: 600,
|
|
240
|
-
}, children: (
|
|
237
|
+
}, children: _jsxs("div", { role: "table", className: "table", style: { minWidth: '0px', width: '100%', height: '100%' }, children: [_jsx("div", { className: "thead", children: _jsx("div", { role: "row", className: "tr", style: {
|
|
241
238
|
display: 'flex',
|
|
242
239
|
flex: '1 0 auto',
|
|
243
240
|
minWidth: '100px',
|
|
244
241
|
boxSizing: 'border-box',
|
|
245
|
-
}, children: columns.map((column, index) => ((
|
|
242
|
+
}, children: columns.map((column, index) => (_jsxs("div", { onClick: () => toggleSort(column),
|
|
246
243
|
// @ts-ignore
|
|
247
244
|
style: {
|
|
248
245
|
boxSizing: 'border-box',
|
|
@@ -268,7 +265,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
|
|
|
268
265
|
display: 'flex',
|
|
269
266
|
flexDirection: 'row',
|
|
270
267
|
justifyContent: 'space-between',
|
|
271
|
-
}, children: [(
|
|
268
|
+
}, children: [_jsx("div", { "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown",
|
|
272
269
|
// @ts-ignore
|
|
273
270
|
style: {
|
|
274
271
|
// fontFamily:
|
|
@@ -284,16 +281,16 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
|
|
|
284
281
|
textOverflow: 'ellipsis',
|
|
285
282
|
whiteSpace: 'nowrap',
|
|
286
283
|
overflow: 'hidden',
|
|
287
|
-
}, children: column.label || column.field }), column.field === sortColumn && ((
|
|
284
|
+
}, children: column.label || column.field }), column.field === sortColumn && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.primaryTextColor, height: "14px", width: "14px", style: {
|
|
288
285
|
transform: sortDirection === 'desc'
|
|
289
286
|
? 'rotate(180deg)'
|
|
290
287
|
: undefined,
|
|
291
|
-
}, children: (
|
|
288
|
+
}, children: _jsx("path", { fillRule: "evenodd", d: "M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z", clipRule: "evenodd" }) }))] }, 'sqlcol' + index))) }) }), _jsx("div", { role: "rowgroup", className: "tbody", children: activeRows.map((row, rowIndex) => (_jsx("div", { role: "row", className: "tr", style: {
|
|
292
289
|
display: 'flex',
|
|
293
290
|
flex: '1 0 auto',
|
|
294
291
|
minWidth: '100px',
|
|
295
292
|
boxSizing: 'border-box',
|
|
296
|
-
}, children: columns.map((column, columnIndex) => ((
|
|
293
|
+
}, children: columns.map((column, columnIndex) => (_jsx("div", { role: "cell", style: {
|
|
297
294
|
boxSizing: 'border-box',
|
|
298
295
|
flex: '150 0 auto',
|
|
299
296
|
minWidth: '50px',
|
|
@@ -313,14 +310,14 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
|
|
|
313
310
|
? '1px solid rgb(229, 231, 235)'
|
|
314
311
|
: undefined,
|
|
315
312
|
userSelect: 'none',
|
|
316
|
-
}, children: (
|
|
313
|
+
}, children: _jsx("div", { style: {
|
|
317
314
|
lineHeight: '24px',
|
|
318
315
|
width: '100%',
|
|
319
316
|
display: 'flex',
|
|
320
317
|
cursor: 'default',
|
|
321
318
|
position: 'relative',
|
|
322
319
|
userSelect: 'none',
|
|
323
|
-
}, "data-testid": "static-cell", children: (
|
|
320
|
+
}, "data-testid": "static-cell", children: _jsx("div", { "aria-haspopup": "dialog", "aria-expanded": "false", style: {
|
|
324
321
|
fontFamily: theme?.fontFamily ||
|
|
325
322
|
'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
|
|
326
323
|
WebkitTapHighlightColor: 'transparent',
|
|
@@ -336,7 +333,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
|
|
|
336
333
|
padding: '8px 16px',
|
|
337
334
|
userSelect: 'none',
|
|
338
335
|
}, children: column.format
|
|
339
|
-
?
|
|
336
|
+
? valueFormatter({
|
|
340
337
|
value: row[column.field],
|
|
341
338
|
field: column.field,
|
|
342
339
|
fields: columns,
|
|
@@ -347,7 +344,7 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
|
|
|
347
344
|
: JSON.stringify(row[column.field])
|
|
348
345
|
: row[column.field].length > 55
|
|
349
346
|
? row[column.field].substring(0, 52) + '...'
|
|
350
|
-
: row[column.field] }) }) }, 'sqlcell' + columnIndex))) }, 'sqlrow' + rowIndex))) }), activeRows.length === 0 && ((
|
|
347
|
+
: row[column.field] }) }) }, 'sqlcell' + columnIndex))) }, 'sqlrow' + rowIndex))) }), activeRows.length === 0 && (_jsx("div", { style: {
|
|
351
348
|
paddingTop: '60px',
|
|
352
349
|
display: 'flex',
|
|
353
350
|
flex: '1 0 auto',
|
|
@@ -355,8 +352,8 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
|
|
|
355
352
|
justifyContent: 'center',
|
|
356
353
|
alignItems: 'center',
|
|
357
354
|
fontSize: 13,
|
|
358
|
-
color: theme
|
|
359
|
-
}, children: "No results found for specified time period." }))] }) }), (
|
|
355
|
+
color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
|
|
356
|
+
}, children: "No results found for specified time period." }))] }) }), _jsx("div", { style: { position: 'relative' }, children: _jsx("div", { style: {
|
|
360
357
|
display: 'flex',
|
|
361
358
|
flex: '1 0 auto',
|
|
362
359
|
minWidth: '100px',
|
|
@@ -374,44 +371,43 @@ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingC
|
|
|
374
371
|
borderBottomRightRadius: 6,
|
|
375
372
|
borderBottomLeftRadius: 6,
|
|
376
373
|
width: '100%',
|
|
377
|
-
}, children: (
|
|
374
|
+
}, children: _jsxs("div", { style: {
|
|
378
375
|
display: 'flex',
|
|
379
376
|
flexDirection: 'row',
|
|
380
377
|
alignItems: 'center',
|
|
381
378
|
justifyContent: 'space-between',
|
|
382
379
|
width: '100%',
|
|
383
|
-
}, children: [(
|
|
380
|
+
}, children: [_jsx("button", { onClick: showDownloadCsvButton ? downloadCSV : undefined, style: {
|
|
384
381
|
fontSize: 14,
|
|
385
382
|
paddingLeft: 12,
|
|
386
|
-
fontFamily: theme
|
|
387
|
-
color: theme
|
|
383
|
+
fontFamily: theme?.fontFamily,
|
|
384
|
+
color: theme?.primaryTextColor,
|
|
388
385
|
background: 'transparent',
|
|
389
386
|
fontWeight: 500,
|
|
390
387
|
cursor: 'pointer',
|
|
391
388
|
border: 'none',
|
|
392
|
-
}, children: showDownloadCsvButton ? 'Download CSV' : '' }), (
|
|
389
|
+
}, children: showDownloadCsvButton ? 'Download CSV' : '' }), _jsxs("div", { style: {
|
|
393
390
|
display: 'flex',
|
|
394
391
|
flexDirection: 'row',
|
|
395
392
|
alignItems: 'center',
|
|
396
|
-
}, children: [(
|
|
393
|
+
}, children: [_jsxs("div", { style: {
|
|
397
394
|
fontSize: 12,
|
|
398
|
-
fontFamily: theme
|
|
399
|
-
color: theme
|
|
400
|
-
}, children: [page, ' of ', maxPage] }), (
|
|
395
|
+
fontFamily: theme?.fontFamily,
|
|
396
|
+
color: theme?.primaryTextColor,
|
|
397
|
+
}, children: [page, ' of ', maxPage] }), _jsx("div", { style: { width: 8 } }), _jsx("button", { onClick: decreasePage, style: {
|
|
401
398
|
cursor: 'pointer',
|
|
402
399
|
border: 'none',
|
|
403
400
|
background: 'transparent',
|
|
404
|
-
}, children: (
|
|
401
|
+
}, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: _jsx("path", { fillRule: "evenodd", d: "M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z", clipRule: "evenodd" }) }) }), _jsx("button", { onClick: increasePage, style: {
|
|
405
402
|
cursor: 'pointer',
|
|
406
403
|
border: 'none',
|
|
407
404
|
background: 'transparent',
|
|
408
|
-
}, children: (
|
|
405
|
+
}, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: _jsx("path", { fillRule: "evenodd", d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z", clipRule: "evenodd" }) }) }), _jsx("div", { style: { width: 12 } })] })] }) }) })] }));
|
|
409
406
|
}
|
|
410
|
-
exports.SpecialTable = SpecialTable;
|
|
411
407
|
const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, dashboardFilters, theme, downloadCSV, csvFilename, showDownloadCsvButton = true, LoadingComponent, }) => {
|
|
412
|
-
const [chartConfig, setChartConfig] =
|
|
413
|
-
const [loading, setLoading] =
|
|
414
|
-
|
|
408
|
+
const [chartConfig, setChartConfig] = useState(null);
|
|
409
|
+
const [loading, setLoading] = useState(true);
|
|
410
|
+
useEffect(() => {
|
|
415
411
|
let isSubscribed = true;
|
|
416
412
|
async function getChartOptions() {
|
|
417
413
|
if (isSubscribed) {
|
|
@@ -437,7 +433,7 @@ const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, da
|
|
|
437
433
|
id: chartId,
|
|
438
434
|
filters: [...Object.values(dashboardFilters)],
|
|
439
435
|
};
|
|
440
|
-
const resp = await
|
|
436
|
+
const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
|
|
441
437
|
if (resp) {
|
|
442
438
|
setLoading(false);
|
|
443
439
|
dispatch({
|
|
@@ -480,7 +476,7 @@ const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, da
|
|
|
480
476
|
// : null;
|
|
481
477
|
// }, [dashboard, chartId, dateFilter]);
|
|
482
478
|
if (!dashboard[chartId] || loading) {
|
|
483
|
-
return ((
|
|
479
|
+
return (_jsx("div", {
|
|
484
480
|
// className="flex flex-col flex-1 h-[100%]"
|
|
485
481
|
style: {
|
|
486
482
|
...containerStyle,
|
|
@@ -491,36 +487,36 @@ const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, da
|
|
|
491
487
|
display: 'flex',
|
|
492
488
|
flexDirection: 'column',
|
|
493
489
|
flex: 1,
|
|
494
|
-
}, children: (
|
|
490
|
+
}, children: _jsx("div", { style: {
|
|
495
491
|
height: containerStyle?.height || 300,
|
|
496
492
|
width: '100%',
|
|
497
493
|
boxSizing: 'content-box',
|
|
498
|
-
}, children: (
|
|
494
|
+
}, children: _jsxs("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [_jsx("rect", { width: "100%", height: "100%", fill: "#F9F9FA" }), _jsx("defs", { fill: "#F9F9FA", children: _jsxs("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "10%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }), _jsx("stop", { offset: "50%", stopColor: "#FEFEFE" }), _jsx("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }), _jsx("animate", { attributeName: "x1", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }), _jsx("animate", { attributeName: "x2", from: "-50%", to: "150%", dur: "2s", repeatCount: "indefinite" })] }) }), _jsx("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: _jsx("animate", { attributeName: "x", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }) })] }) }) }));
|
|
499
495
|
}
|
|
500
|
-
return ((
|
|
496
|
+
return (_jsx(SpecialTable, { showDownloadCsvButton: showDownloadCsvButton, csvFilename: csvFilename || dashboard[chartId].name, columns: dashboard[chartId].columns, rows: dashboard[chartId].rows, height: containerStyle?.height || '100%', theme: theme, containerStyle: containerStyle, LoadingComponent: LoadingComponent }));
|
|
501
497
|
};
|
|
502
498
|
function Columns({ columns, data, theme, handleDownloadCSV, numToShow }) {
|
|
503
|
-
return ((
|
|
499
|
+
return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsx("div", { style: {
|
|
504
500
|
display: 'flex',
|
|
505
501
|
flexDirection: 'row',
|
|
506
502
|
// overflowX: 'scroll',
|
|
507
503
|
// overflowY: 'hidden',
|
|
508
504
|
overflow: 'scroll',
|
|
509
505
|
height: '100%',
|
|
510
|
-
}, children: columns.map((elem) => ((
|
|
506
|
+
}, children: columns.map((elem) => (_jsx(Column, { column: elem, data: data, theme: theme }, elem.field))) }), _jsxs("div", { style: {
|
|
511
507
|
display: 'flex',
|
|
512
508
|
flexDirection: 'row',
|
|
513
509
|
alignItems: 'center',
|
|
514
510
|
justifyContent: 'space-between',
|
|
515
511
|
// background: 'black',
|
|
516
|
-
}, children: [data.length > numToShow && ((
|
|
512
|
+
}, children: [data.length > numToShow && (_jsxs("div", { style: {
|
|
517
513
|
color: theme?.chartLabelColor,
|
|
518
514
|
boxSizing: 'content-box',
|
|
519
515
|
fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
520
516
|
fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
521
517
|
marginLeft: 12,
|
|
522
518
|
marginTop: 8,
|
|
523
|
-
}, children: ["...", data.length - numToShow, " more"] })), (
|
|
519
|
+
}, children: ["...", data.length - numToShow, " more"] })), _jsx("div", { onClick: handleDownloadCSV, style: {
|
|
524
520
|
height: 40,
|
|
525
521
|
minHeight: 40,
|
|
526
522
|
color: theme?.primaryTextColor,
|
|
@@ -534,14 +530,14 @@ function Columns({ columns, data, theme, handleDownloadCSV, numToShow }) {
|
|
|
534
530
|
}, children: "Download CSV" })] })] }));
|
|
535
531
|
}
|
|
536
532
|
function Column({ column, data, theme }) {
|
|
537
|
-
return ((
|
|
533
|
+
return (_jsxs("div", { style: {
|
|
538
534
|
paddingLeft: 20,
|
|
539
535
|
paddingRight: 20,
|
|
540
536
|
// width: 'max-content',
|
|
541
537
|
display: 'inline-flex',
|
|
542
538
|
flexDirection: 'column',
|
|
543
539
|
whiteSpace: 'nowrap',
|
|
544
|
-
}, children: [(
|
|
540
|
+
}, children: [_jsx("div", { style: {
|
|
545
541
|
height: 40,
|
|
546
542
|
minHeight: 40,
|
|
547
543
|
color: theme?.primaryTextColor,
|
|
@@ -549,10 +545,10 @@ function Column({ column, data, theme }) {
|
|
|
549
545
|
fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
550
546
|
fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
551
547
|
fontWeight: theme?.fontWeightMedium || '500',
|
|
552
|
-
}, children: column.label || column.field }), data.map((elem) => ((
|
|
548
|
+
}, children: column.label || column.field }), data.map((elem) => (_jsx(Cell, { item: elem[column.field], theme: theme })))] }));
|
|
553
549
|
}
|
|
554
550
|
function Cell({ item, theme }) {
|
|
555
|
-
return ((
|
|
551
|
+
return (_jsx("div", { style: {
|
|
556
552
|
height: 40,
|
|
557
553
|
minHeight: 40,
|
|
558
554
|
whiteSpace: 'nowrap',
|
|
@@ -562,4 +558,4 @@ function Cell({ item, theme }) {
|
|
|
562
558
|
color: theme?.chartLabelColor,
|
|
563
559
|
}, children: item }));
|
|
564
560
|
}
|
|
565
|
-
|
|
561
|
+
export default Table;
|
package/dist/TableChart.js
CHANGED
|
@@ -1,34 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.hexToRgbaWith10PercentAlpha = void 0;
|
|
27
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
28
2
|
/* eslint-disable react/display-name */
|
|
29
3
|
// @ts-nocheck
|
|
30
|
-
|
|
31
|
-
|
|
4
|
+
import React, { useMemo } from 'react';
|
|
5
|
+
import { valueFormatter } from './Chart';
|
|
32
6
|
const getWidthsFromValues = (dataValues) => {
|
|
33
7
|
let maxValue = -Infinity;
|
|
34
8
|
dataValues.forEach((value) => {
|
|
@@ -40,7 +14,7 @@ const getWidthsFromValues = (dataValues) => {
|
|
|
40
14
|
return Math.max((value / maxValue) * 100, 1);
|
|
41
15
|
});
|
|
42
16
|
};
|
|
43
|
-
function hexToRgbaWith10PercentAlpha(hex) {
|
|
17
|
+
export function hexToRgbaWith10PercentAlpha(hex) {
|
|
44
18
|
// Convert the hex color to RGB
|
|
45
19
|
const r = parseInt(hex.slice(1, 3), 16);
|
|
46
20
|
const g = parseInt(hex.slice(3, 5), 16);
|
|
@@ -50,26 +24,25 @@ function hexToRgbaWith10PercentAlpha(hex) {
|
|
|
50
24
|
// Return the color as an rgba string
|
|
51
25
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
52
26
|
}
|
|
53
|
-
exports.hexToRgbaWith10PercentAlpha = hexToRgbaWith10PercentAlpha;
|
|
54
27
|
function Columns({ columns, data, theme }) {
|
|
55
|
-
return ((
|
|
28
|
+
return (_jsx("div", { style: {
|
|
56
29
|
display: 'flex',
|
|
57
30
|
flexDirection: 'row',
|
|
58
31
|
// overflowX: 'scroll',
|
|
59
32
|
// overflowY: 'hidden',
|
|
60
33
|
overflow: 'scroll',
|
|
61
34
|
height: '100%',
|
|
62
|
-
}, children: columns.map((elem) => ((
|
|
35
|
+
}, children: columns.map((elem) => (_jsx(Column, { column: elem, data: data, theme: theme }, elem.field))) }));
|
|
63
36
|
}
|
|
64
37
|
function Column({ column, data, theme }) {
|
|
65
|
-
return ((
|
|
38
|
+
return (_jsxs("div", { style: {
|
|
66
39
|
paddingLeft: 20,
|
|
67
40
|
paddingRight: 20,
|
|
68
41
|
// width: 'max-content',
|
|
69
42
|
display: 'inline-flex',
|
|
70
43
|
flexDirection: 'column',
|
|
71
44
|
whiteSpace: 'nowrap',
|
|
72
|
-
}, children: [(
|
|
45
|
+
}, children: [_jsx("div", { style: {
|
|
73
46
|
height: 40,
|
|
74
47
|
minHeight: 40,
|
|
75
48
|
color: theme?.primaryTextColor,
|
|
@@ -77,10 +50,10 @@ function Column({ column, data, theme }) {
|
|
|
77
50
|
fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
78
51
|
fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
79
52
|
fontWeight: theme?.fontWeightMedium || '500',
|
|
80
|
-
}, children: column.label }), data.map((elem) => ((
|
|
53
|
+
}, children: column.label }), data.map((elem) => (_jsx(Cell, { item: elem[column.field], theme: theme })))] }));
|
|
81
54
|
}
|
|
82
55
|
function Cell({ item, theme }) {
|
|
83
|
-
return ((
|
|
56
|
+
return (_jsx("div", { style: {
|
|
84
57
|
height: 40,
|
|
85
58
|
minHeight: 40,
|
|
86
59
|
whiteSpace: 'nowrap',
|
|
@@ -90,18 +63,18 @@ function Cell({ item, theme }) {
|
|
|
90
63
|
color: theme?.chartLabelColor,
|
|
91
64
|
}, children: item }));
|
|
92
65
|
}
|
|
93
|
-
const TableChart =
|
|
66
|
+
const TableChart = React.forwardRef((props, ref) => {
|
|
94
67
|
const { data = [], yAxisFields, containerStyle, theme, ...other } = props;
|
|
95
68
|
// const widths = getWidthsFromValues(
|
|
96
69
|
// data.map(item => item[yAxisFields[0].field])
|
|
97
70
|
// );
|
|
98
71
|
const NUM_TO_SHOW = Math.floor(containerStyle?.height / 40) - 1 || 6;
|
|
99
|
-
const memoizedData =
|
|
72
|
+
const memoizedData = useMemo(() => {
|
|
100
73
|
return data.slice(0, NUM_TO_SHOW).map((item) => {
|
|
101
74
|
const fieldsWithFormattedValues = {};
|
|
102
75
|
for (const field of yAxisFields) {
|
|
103
76
|
const value = item[field.field];
|
|
104
|
-
fieldsWithFormattedValues[field.field] =
|
|
77
|
+
fieldsWithFormattedValues[field.field] = valueFormatter({
|
|
105
78
|
value,
|
|
106
79
|
field: field.field,
|
|
107
80
|
fields: yAxisFields,
|
|
@@ -111,7 +84,7 @@ const TableChart = react_1.default.forwardRef((props, ref) => {
|
|
|
111
84
|
});
|
|
112
85
|
}, [data, NUM_TO_SHOW]);
|
|
113
86
|
if (!memoizedData.length) {
|
|
114
|
-
return ((
|
|
87
|
+
return (_jsx("div", { ref: ref, style: {
|
|
115
88
|
// width: '100%',
|
|
116
89
|
boxSizing: 'content-box',
|
|
117
90
|
height: '100%',
|
|
@@ -126,7 +99,7 @@ const TableChart = react_1.default.forwardRef((props, ref) => {
|
|
|
126
99
|
justifyContent: 'space-between',
|
|
127
100
|
}, ...other }));
|
|
128
101
|
}
|
|
129
|
-
return ((
|
|
102
|
+
return (_jsxs("div", { style: {
|
|
130
103
|
boxSizing: 'content-box',
|
|
131
104
|
height: containerStyle?.height || '100%',
|
|
132
105
|
marginTop: 20,
|
|
@@ -135,7 +108,7 @@ const TableChart = react_1.default.forwardRef((props, ref) => {
|
|
|
135
108
|
marginLeft: '1rem',
|
|
136
109
|
flexDirection: 'column',
|
|
137
110
|
// justifyContent: 'space-between',
|
|
138
|
-
}, children: [(
|
|
111
|
+
}, children: [_jsx(Columns, { columns: yAxisFields, data: memoizedData, theme: theme }), data.length > NUM_TO_SHOW && (_jsxs("div", { style: {
|
|
139
112
|
color: theme?.chartLabelColor,
|
|
140
113
|
boxSizing: 'content-box',
|
|
141
114
|
fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
@@ -314,4 +287,4 @@ const TableChart = react_1.default.forwardRef((props, ref) => {
|
|
|
314
287
|
// </div>
|
|
315
288
|
// );
|
|
316
289
|
});
|
|
317
|
-
|
|
290
|
+
export default TableChart;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const ArrowDownHeadIcon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" })] }));
|
|
5
|
-
exports.default = ArrowDownHeadIcon;
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
const ArrowDownHeadIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" })] }));
|
|
3
|
+
export default ArrowDownHeadIcon;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const ArrowDownIcon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11 16.172V4h2v12.172z" })] }));
|
|
5
|
-
exports.default = ArrowDownIcon;
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
const ArrowDownIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11 16.172V4h2v12.172z" })] }));
|
|
3
|
+
export default ArrowDownIcon;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const ArrowDownRightIcon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M14.59 16.004L5.982 7.397l1.414-1.414 8.607 8.606V7.004h2v11h-11v-2z" })] }));
|
|
5
|
-
exports.default = ArrowDownRightIcon;
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
const ArrowDownRightIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M14.59 16.004L5.982 7.397l1.414-1.414 8.607 8.606V7.004h2v11h-11v-2z" })] }));
|
|
3
|
+
export default ArrowDownRightIcon;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const ArrowLeftHeadIcon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z" })] }));
|
|
5
|
-
exports.default = ArrowLeftHeadIcon;
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
const ArrowLeftHeadIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { d: "M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z" })] }));
|
|
3
|
+
export default ArrowLeftHeadIcon;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const ArrowRightHeadIcon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" })] }));
|
|
5
|
-
exports.default = ArrowRightHeadIcon;
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
const ArrowRightHeadIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { d: "M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" })] }));
|
|
3
|
+
export default ArrowRightHeadIcon;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const ArrowRightIcon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" })] }));
|
|
5
|
-
exports.default = ArrowRightIcon;
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
const ArrowRightIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" })] }));
|
|
3
|
+
export default ArrowRightIcon;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const ArrowUpHeadIcon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z" })] }));
|
|
5
|
-
exports.default = ArrowUpHeadIcon;
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
const ArrowUpHeadIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z" })] }));
|
|
3
|
+
export default ArrowUpHeadIcon;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const ArrowUpIcon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z" })] }));
|
|
5
|
-
exports.default = ArrowUpIcon;
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
const ArrowUpIcon = ({ ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z" })] }));
|
|
3
|
+
export default ArrowUpIcon;
|