@quillsql/react 1.7.5 → 1.7.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/Chart.d.ts +1 -1
- package/lib/Chart.js +107 -50
- package/lib/Chart.js.map +1 -1
- package/lib/Dashboard.d.ts +36 -1
- package/lib/Dashboard.js +107 -37
- package/lib/Dashboard.js.map +1 -1
- package/lib/ReportBuilder.js +117 -41
- package/lib/ReportBuilder.js.map +1 -1
- package/lib/SQLEditor.js +80 -29
- package/lib/SQLEditor.js.map +1 -1
- package/lib/Table.js +31 -16
- 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 +16 -1
- package/lib/hooks/useQuill.js.map +1 -1
- package/package.json +11 -5
- 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/hooks/useQuill.ts
DELETED
|
@@ -1,138 +0,0 @@
|
|
|
1
|
-
import { useContext, useEffect, useState } from 'react';
|
|
2
|
-
import { ClientContext, DashboardContext } from '../Context';
|
|
3
|
-
import axios from 'axios';
|
|
4
|
-
|
|
5
|
-
interface Column {
|
|
6
|
-
_id: string;
|
|
7
|
-
label: string;
|
|
8
|
-
field: string;
|
|
9
|
-
format: string;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
interface Field {
|
|
13
|
-
name: string;
|
|
14
|
-
tableID: number;
|
|
15
|
-
columnID: number;
|
|
16
|
-
dataTypeID: number;
|
|
17
|
-
dataTypeSize: number;
|
|
18
|
-
dataTypeModifier: number;
|
|
19
|
-
format: string;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
interface YAxisField {
|
|
23
|
-
label: string;
|
|
24
|
-
field: string;
|
|
25
|
-
chartType: string;
|
|
26
|
-
format: string;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
interface Report {
|
|
30
|
-
name: string;
|
|
31
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
32
|
-
rows: any[];
|
|
33
|
-
columns: Array<Column>;
|
|
34
|
-
dashboardName?: string;
|
|
35
|
-
chartType: string;
|
|
36
|
-
filters?: object;
|
|
37
|
-
fields: Array<Field>;
|
|
38
|
-
template?: boolean;
|
|
39
|
-
editEnabled?: boolean;
|
|
40
|
-
xAxisField: string;
|
|
41
|
-
yAxisFields: Array<YAxisField>;
|
|
42
|
-
xAxisLabel: string;
|
|
43
|
-
yAxisLabel: string;
|
|
44
|
-
queryString: string;
|
|
45
|
-
dateField?: object;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
export const useQuill = (
|
|
49
|
-
chartId: string
|
|
50
|
-
): {
|
|
51
|
-
data: Report | null;
|
|
52
|
-
loading: boolean;
|
|
53
|
-
error: string | null;
|
|
54
|
-
} => {
|
|
55
|
-
// @ts-ignore
|
|
56
|
-
const { dashboard, dispatch } = useContext(DashboardContext);
|
|
57
|
-
const [client] = useContext(ClientContext);
|
|
58
|
-
const [data, setData] = useState<Report | null>(null);
|
|
59
|
-
const [loading, setLoading] = useState(true);
|
|
60
|
-
const [error, setError] = useState<string | null>(null);
|
|
61
|
-
|
|
62
|
-
useEffect(() => {
|
|
63
|
-
let isSubscribed = true;
|
|
64
|
-
async function getChartOptions(id: string) {
|
|
65
|
-
if (isSubscribed) {
|
|
66
|
-
if (dashboard[id]) {
|
|
67
|
-
setData(dashboard[id]);
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
// @ts-ignore
|
|
71
|
-
const {
|
|
72
|
-
publicKey,
|
|
73
|
-
customerId,
|
|
74
|
-
environment,
|
|
75
|
-
queryEndpoint,
|
|
76
|
-
queryHeaders,
|
|
77
|
-
withCredentials,
|
|
78
|
-
} = client;
|
|
79
|
-
try {
|
|
80
|
-
if (queryEndpoint) {
|
|
81
|
-
const resp = await axios.post(
|
|
82
|
-
queryEndpoint,
|
|
83
|
-
{ metadata: { id: chartId, task: 'item' } },
|
|
84
|
-
{ headers: queryHeaders, withCredentials }
|
|
85
|
-
);
|
|
86
|
-
setLoading(false);
|
|
87
|
-
setData({
|
|
88
|
-
...resp.data,
|
|
89
|
-
});
|
|
90
|
-
dispatch({ type: 'UPDATE_DASHBOARD_ITEM', id, data: resp.data });
|
|
91
|
-
} else {
|
|
92
|
-
const resp = await axios.get(
|
|
93
|
-
'https://quill-344421.uc.r.appspot.com/item',
|
|
94
|
-
{
|
|
95
|
-
params: {
|
|
96
|
-
id: chartId,
|
|
97
|
-
orgId: customerId,
|
|
98
|
-
publicKey: publicKey,
|
|
99
|
-
},
|
|
100
|
-
headers: {
|
|
101
|
-
environment: environment || undefined,
|
|
102
|
-
},
|
|
103
|
-
}
|
|
104
|
-
);
|
|
105
|
-
setLoading(false);
|
|
106
|
-
setData(resp.data);
|
|
107
|
-
dispatch({ type: 'UPDATE_DASHBOARD_ITEM', id, data: resp.data });
|
|
108
|
-
}
|
|
109
|
-
} catch (e) {
|
|
110
|
-
if (typeof e === 'string' || (typeof e === 'object' && e !== null)) {
|
|
111
|
-
setError(stringifyIfObject(e));
|
|
112
|
-
} else {
|
|
113
|
-
setError('error');
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
if (chartId && !data) {
|
|
119
|
-
getChartOptions(chartId);
|
|
120
|
-
}
|
|
121
|
-
return () => {
|
|
122
|
-
isSubscribed = false;
|
|
123
|
-
};
|
|
124
|
-
}, [chartId, dashboard]);
|
|
125
|
-
|
|
126
|
-
return { data, loading, error };
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
function stringifyIfObject(e: string | object) {
|
|
130
|
-
if (typeof e === 'string') {
|
|
131
|
-
// do nothing if e is a string
|
|
132
|
-
return e;
|
|
133
|
-
} else if (typeof e === 'object' && e !== null) {
|
|
134
|
-
// stringify e if it's an object
|
|
135
|
-
return JSON.stringify(e);
|
|
136
|
-
}
|
|
137
|
-
return e; // returns the input as is for other types
|
|
138
|
-
}
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import { useEffect, useState } from "react";
|
|
2
|
-
|
|
3
|
-
const useSelectOnKeyDown = (
|
|
4
|
-
onValueChange: (value: string) => void,
|
|
5
|
-
optionValues: string[],
|
|
6
|
-
isFocused: boolean,
|
|
7
|
-
handleFocusChange: (isFocused: boolean) => void,
|
|
8
|
-
value?: string,
|
|
9
|
-
): [
|
|
10
|
-
string | null | undefined,
|
|
11
|
-
(e: React.KeyboardEvent<HTMLDivElement | HTMLButtonElement>) => void,
|
|
12
|
-
] => {
|
|
13
|
-
const NO_SELECTION_IDX = -1;
|
|
14
|
-
const [hoveredIdx, setHoveredIdx] = useState(NO_SELECTION_IDX);
|
|
15
|
-
|
|
16
|
-
const getHoveredValue = (hoveredIdx: number, optionValues: string[]) => {
|
|
17
|
-
if (hoveredIdx < 0) return undefined;
|
|
18
|
-
return optionValues[hoveredIdx];
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
useEffect(() => {
|
|
22
|
-
const getIndexOfSelectedValue = () => {
|
|
23
|
-
if (!isFocused) {
|
|
24
|
-
setHoveredIdx(NO_SELECTION_IDX);
|
|
25
|
-
}
|
|
26
|
-
if (!value) return NO_SELECTION_IDX;
|
|
27
|
-
const indexOfValue = optionValues.indexOf(value);
|
|
28
|
-
return indexOfValue === -1 ? NO_SELECTION_IDX : indexOfValue;
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
setHoveredIdx(getIndexOfSelectedValue());
|
|
32
|
-
}, [value, isFocused]);
|
|
33
|
-
|
|
34
|
-
const hoveredValue = getHoveredValue(hoveredIdx, optionValues);
|
|
35
|
-
|
|
36
|
-
const getNextIdx = () => {
|
|
37
|
-
const nextIdx = hoveredIdx + 1;
|
|
38
|
-
return Math.min(nextIdx, optionValues.length - 1);
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
const getPrevIdx = () => {
|
|
42
|
-
const prevIdx = hoveredIdx - 1;
|
|
43
|
-
return Math.max(prevIdx, 0);
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement | HTMLButtonElement>) => {
|
|
47
|
-
if (!isFocused) {
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
switch (e.key) {
|
|
52
|
-
case "ArrowUp": {
|
|
53
|
-
e.preventDefault();
|
|
54
|
-
setHoveredIdx(getPrevIdx());
|
|
55
|
-
break;
|
|
56
|
-
}
|
|
57
|
-
case "ArrowDown": {
|
|
58
|
-
e.preventDefault();
|
|
59
|
-
setHoveredIdx(getNextIdx());
|
|
60
|
-
break;
|
|
61
|
-
}
|
|
62
|
-
case "Enter": {
|
|
63
|
-
e.preventDefault();
|
|
64
|
-
if (hoveredValue) {
|
|
65
|
-
onValueChange(hoveredValue);
|
|
66
|
-
}
|
|
67
|
-
break;
|
|
68
|
-
}
|
|
69
|
-
case "Escape": {
|
|
70
|
-
e.preventDefault();
|
|
71
|
-
handleFocusChange(false);
|
|
72
|
-
setHoveredIdx(NO_SELECTION_IDX);
|
|
73
|
-
break;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
};
|
|
77
|
-
return [hoveredValue, handleKeyDown];
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
export default useSelectOnKeyDown;
|
package/src/index.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
// src/index.ts
|
|
2
|
-
export { default as Dashboard } from './Dashboard';
|
|
3
|
-
export { default as QuillProvider } from './QuillProvider';
|
|
4
|
-
export { default as Chart } from './Chart';
|
|
5
|
-
export { default as Table } from './Table';
|
|
6
|
-
export { default as SQLEditor } from './SQLEditor';
|
|
7
|
-
export { default as ReportBuilder } from './ReportBuilder';
|
|
8
|
-
export { default as AddToDashboardModal } from './AddToDashboardModal';
|
|
9
|
-
export { useQuill } from './hooks/useQuill';
|
package/src/lib/font.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
export const fontSize = {
|
|
2
|
-
xs: 'qq-text-xs',
|
|
3
|
-
sm: 'qq-text-sm',
|
|
4
|
-
md: 'qq-text-base',
|
|
5
|
-
lg: 'qq-text-lg',
|
|
6
|
-
xl: 'qq-text-xl',
|
|
7
|
-
threeXl: 'qq-text-3xl',
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export const fontWeight = {
|
|
11
|
-
sm: 'qq-font-normal',
|
|
12
|
-
md: 'qq-font-medium',
|
|
13
|
-
lg: 'qq-font-semibold',
|
|
14
|
-
};
|
package/src/lib/index.ts
DELETED
package/src/lib/inputTypes.ts
DELETED
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
export type ValueFormatter = {
|
|
2
|
-
(value: number): string;
|
|
3
|
-
};
|
|
4
|
-
|
|
5
|
-
const iconVariantValues = [
|
|
6
|
-
'simple',
|
|
7
|
-
'light',
|
|
8
|
-
'shadow',
|
|
9
|
-
'solid',
|
|
10
|
-
'outlined',
|
|
11
|
-
] as const;
|
|
12
|
-
|
|
13
|
-
export type IconVariant = (typeof iconVariantValues)[number];
|
|
14
|
-
|
|
15
|
-
export type HorizontalPosition = 'left' | 'right';
|
|
16
|
-
|
|
17
|
-
export type VerticalPosition = 'top' | 'bottom';
|
|
18
|
-
|
|
19
|
-
export type ButtonVariant = 'primary' | 'secondary' | 'light';
|
|
20
|
-
|
|
21
|
-
const deltaTypeValues = [
|
|
22
|
-
'increase',
|
|
23
|
-
'moderateIncrease',
|
|
24
|
-
'decrease',
|
|
25
|
-
'moderateDecrease',
|
|
26
|
-
'unchanged',
|
|
27
|
-
] as const;
|
|
28
|
-
|
|
29
|
-
export type DeltaType = (typeof deltaTypeValues)[number];
|
|
30
|
-
|
|
31
|
-
const sizeValues = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
|
|
32
|
-
|
|
33
|
-
export type Size = (typeof sizeValues)[number];
|
|
34
|
-
|
|
35
|
-
const colorValues = [
|
|
36
|
-
'slate',
|
|
37
|
-
'gray',
|
|
38
|
-
'zinc',
|
|
39
|
-
'neutral',
|
|
40
|
-
'stone',
|
|
41
|
-
'red',
|
|
42
|
-
'orange',
|
|
43
|
-
'amber',
|
|
44
|
-
'yellow',
|
|
45
|
-
'lime',
|
|
46
|
-
'green',
|
|
47
|
-
'emerald',
|
|
48
|
-
'teal',
|
|
49
|
-
'cyan',
|
|
50
|
-
'sky',
|
|
51
|
-
'blue',
|
|
52
|
-
'indigo',
|
|
53
|
-
'violet',
|
|
54
|
-
'purple',
|
|
55
|
-
'fuchsia',
|
|
56
|
-
'pink',
|
|
57
|
-
'rose',
|
|
58
|
-
] as const;
|
|
59
|
-
|
|
60
|
-
export type Color = (typeof colorValues)[number];
|
|
61
|
-
|
|
62
|
-
const justifyContentValues = [
|
|
63
|
-
'start',
|
|
64
|
-
'end',
|
|
65
|
-
'center',
|
|
66
|
-
'between',
|
|
67
|
-
'around',
|
|
68
|
-
'evenly',
|
|
69
|
-
] as const;
|
|
70
|
-
export type JustifyContent = (typeof justifyContentValues)[number];
|
|
71
|
-
|
|
72
|
-
const alignItemsValues = [
|
|
73
|
-
'start',
|
|
74
|
-
'end',
|
|
75
|
-
'center',
|
|
76
|
-
'baseline',
|
|
77
|
-
'stretch',
|
|
78
|
-
] as const;
|
|
79
|
-
export type AlignItems = (typeof alignItemsValues)[number];
|
|
80
|
-
|
|
81
|
-
export type FlexDirection = 'row' | 'col' | 'row-reverse' | 'col-reverse';
|
package/src/lib/utils.tsx
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { ValueFormatter } from './inputTypes';
|
|
2
|
-
|
|
3
|
-
export const defaultValueFormatter: ValueFormatter = (value: number) =>
|
|
4
|
-
value.toString();
|
|
5
|
-
|
|
6
|
-
export const sumNumericArray = (arr: number[]) =>
|
|
7
|
-
arr.reduce((prefixSum, num) => prefixSum + num, 0);
|
|
8
|
-
|
|
9
|
-
export const removeValueFromArray = (value: any, array: any[]): any[] => {
|
|
10
|
-
const index = array.indexOf(value);
|
|
11
|
-
if (index > -1) {
|
|
12
|
-
array.splice(index, 1);
|
|
13
|
-
}
|
|
14
|
-
return array;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export const isValueInArray = (value: any, array: any[]): boolean => {
|
|
18
|
-
for (let i = 0; i < array.length; i++) {
|
|
19
|
-
if (array[i] === value) {
|
|
20
|
-
return true;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
return false;
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
export const stringIsNumeric = (str: string | undefined): boolean => {
|
|
27
|
-
return !isNaN(Number(str)) && str !== undefined;
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export const stringEndsWithNumber = (str: string): boolean => {
|
|
31
|
-
return stringIsNumeric(str.split('-').pop());
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
export function mergeRefs<T = any>(
|
|
35
|
-
refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
|
|
36
|
-
): React.RefCallback<T> {
|
|
37
|
-
return value => {
|
|
38
|
-
refs.forEach(ref => {
|
|
39
|
-
if (typeof ref === 'function') {
|
|
40
|
-
ref(value);
|
|
41
|
-
} else if (ref != null) {
|
|
42
|
-
(ref as React.MutableRefObject<T | null>).current = value;
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
};
|
|
46
|
-
}
|
package/tsconfig.json
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "es2022",
|
|
4
|
-
"lib": ["dom", "dom.iterable", "es2022"],
|
|
5
|
-
"allowJs": true,
|
|
6
|
-
"skipLibCheck": true,
|
|
7
|
-
"esModuleInterop": true,
|
|
8
|
-
"allowSyntheticDefaultImports": true,
|
|
9
|
-
"strict": true,
|
|
10
|
-
"forceConsistentCasingInFileNames": true,
|
|
11
|
-
"module": "commonjs",
|
|
12
|
-
"moduleResolution": "node",
|
|
13
|
-
"resolveJsonModule": true,
|
|
14
|
-
"isolatedModules": true,
|
|
15
|
-
"noEmit": false,
|
|
16
|
-
"jsx": "react-jsx",
|
|
17
|
-
"declaration": true,
|
|
18
|
-
"outDir": "lib",
|
|
19
|
-
"sourceMap": true
|
|
20
|
-
},
|
|
21
|
-
"include": ["src"]
|
|
22
|
-
}
|