@quillsql/react 2.8.6 → 2.8.8
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 +181 -146
- package/dist/BarList.js +44 -36
- package/dist/Chart.js +132 -99
- package/dist/ChartBuilder.js +89 -80
- package/dist/ChartEditor.js +21 -14
- package/dist/Context.js +57 -52
- package/dist/Dashboard.js +213 -180
- package/dist/Dashboard.js.map +1 -1
- package/dist/DateRangePicker/Calendar.js +46 -41
- package/dist/DateRangePicker/DateRangePicker.js +61 -32
- package/dist/DateRangePicker/DateRangePickerButton.js +17 -14
- package/dist/DateRangePicker/dateRangePickerUtils.js +90 -76
- package/dist/DateRangePicker/dateRangePickerUtils.js.map +1 -1
- package/dist/DateRangePicker/index.js +9 -1
- package/dist/PieChart.js +70 -35
- package/dist/QuillProvider.js +7 -4
- package/dist/ReportBuilder.js +129 -120
- package/dist/SQLEditor.js +65 -56
- package/dist/Table.d.ts.map +1 -1
- package/dist/Table.js +71 -60
- package/dist/Table.js.map +1 -1
- package/dist/TableChart.js +45 -17
- package/dist/assets/ArrowDownHeadIcon.js +6 -3
- package/dist/assets/ArrowDownIcon.js +6 -3
- package/dist/assets/ArrowDownRightIcon.js +6 -3
- package/dist/assets/ArrowLeftHeadIcon.js +6 -3
- package/dist/assets/ArrowRightHeadIcon.js +6 -3
- package/dist/assets/ArrowRightIcon.js +6 -3
- package/dist/assets/ArrowUpHeadIcon.js +6 -3
- package/dist/assets/ArrowUpIcon.js +6 -3
- package/dist/assets/ArrowUpRightIcon.js +6 -3
- package/dist/assets/CalendarIcon.js +6 -3
- package/dist/assets/CalendarNormalIcon.js +6 -3
- package/dist/assets/DoubleArrowLeftHeadIcon.js +6 -3
- package/dist/assets/DoubleArrowRightHeadIcon.js +6 -3
- package/dist/assets/ExclamationFilledIcon.js +6 -3
- package/dist/assets/FilterIcon.js +6 -3
- package/dist/assets/LoadingSpinner.js +6 -3
- package/dist/assets/RefreshIcon.js +6 -3
- package/dist/assets/SearchIcon.js +6 -3
- package/dist/assets/UpLeftArrowsIcon.js +6 -3
- package/dist/assets/XCircleIcon.js +6 -3
- package/dist/assets/XIcon.js +6 -3
- package/dist/assets/index.js +49 -21
- package/dist/components/BigModal/BigModal.js +39 -13
- package/dist/components/Dropdown/Dropdown.js +53 -24
- package/dist/components/Dropdown/DropdownItem.js +35 -9
- package/dist/components/Dropdown/index.js +11 -2
- package/dist/components/Modal/Modal.js +39 -13
- package/dist/components/Modal/index.js +9 -1
- package/dist/components/QuillCard.js +13 -8
- package/dist/components/SqlTextEditor.js +11 -4
- package/dist/components/SqlTextEditor.js.map +1 -0
- package/dist/components/UiComponents.js +51 -37
- package/dist/components/selectUtils.js +17 -6
- package/dist/contexts/BaseColorContext.js +6 -3
- package/dist/contexts/HoveredValueContext.js +6 -3
- package/dist/contexts/RootStylesContext.js +6 -3
- package/dist/contexts/SelectedValueContext.js +6 -3
- package/dist/contexts/index.js +15 -4
- package/dist/hooks/index.js +15 -4
- package/dist/hooks/useDashboard.js +17 -11
- package/dist/hooks/useDashboard.js.map +1 -0
- package/dist/hooks/useInternalState.js +6 -3
- package/dist/hooks/useOnClickOutside.js +6 -3
- package/dist/hooks/useOnWindowResize.js +7 -4
- package/dist/hooks/useQuill.js +16 -11
- package/dist/hooks/useSelectOnKeyDown.js +7 -4
- package/dist/index.js +33 -13
- package/dist/index.js.map +1 -1
- package/dist/internals/ReportBuilder/PivotList.js +20 -14
- package/dist/internals/ReportBuilder/PivotModal.js +92 -84
- package/dist/internals/ReportBuilder/PivotModal.spec.js +73 -70
- package/dist/lib/font.js +6 -2
- package/dist/lib/index.js +20 -3
- package/dist/lib/inputTypes.js +3 -1
- package/dist/lib/utils.js +19 -8
- package/dist/utils/aggregate.js +35 -28
- package/dist/utils/colorToHex.js +5 -1
- package/dist/utils/dataFetcher.js +8 -2
- package/dist/utils/downloadCSV.js +6 -1
- package/package.json +2 -1
package/dist/ReportBuilder.js
CHANGED
|
@@ -1,33 +1,39 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.getPostgresBasicType = void 0;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
2
8
|
// @ts-nocheck
|
|
3
|
-
|
|
9
|
+
const react_1 = require("react");
|
|
4
10
|
// import './nightOwlLight.css';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const [data, setData] = useState([]);
|
|
17
|
-
const [client, setClient] = useContext(ClientContext);
|
|
18
|
-
const [schema, setSchema] = useContext(SchemaContext);
|
|
19
|
-
const [theme] = useContext(ThemeContext);
|
|
20
|
-
const [columns, setColumns] = useState([]);
|
|
21
|
-
const [fields, setFields] = useState([]);
|
|
22
|
-
const [loading, setLoading] = useState(false);
|
|
23
|
-
const [selectedPivot, setSelectedPivot] = useState(null);
|
|
11
|
+
const Context_1 = require("./Context");
|
|
12
|
+
const SQLEditor_1 = require("./SQLEditor");
|
|
13
|
+
const date_fns_1 = require("date-fns");
|
|
14
|
+
const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
|
|
15
|
+
const dataFetcher_1 = require("./utils/dataFetcher");
|
|
16
|
+
const Dashboard_1 = require("./Dashboard");
|
|
17
|
+
const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
|
|
18
|
+
const Table_1 = __importDefault(require("./Table"));
|
|
19
|
+
const ChartBuilder_1 = __importDefault(require("./ChartBuilder"));
|
|
20
|
+
const UiComponents_1 = require("./components/UiComponents");
|
|
21
|
+
function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeLoading, onChangePivot, onDateFilterChange, onChangeFields, onError, TextInput = UiComponents_1.MemoizedTextInput, containerStyle, Select = UiComponents_1.MemoizedSelect, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, Header = UiComponents_1.MemoizedHeader, Label = UiComponents_1.MemoizedLabel, DeleteButton = UiComponents_1.MemoizedDeleteButton, Text = UiComponents_1.MemoizedText, Modal = UiComponents_1.MemoizedModal, Popover = UiComponents_1.MemoizedPopover, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, tagStyle, tableName, dateColumn, selectedTagBorderColor, chartBuilderEnabled = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, editSQLEnabled, navigateToSQLEditor, }) {
|
|
22
|
+
const [data, setData] = (0, react_1.useState)([]);
|
|
23
|
+
const [client, setClient] = (0, react_1.useContext)(Context_1.ClientContext);
|
|
24
|
+
const [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
|
|
25
|
+
const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
|
|
26
|
+
const [columns, setColumns] = (0, react_1.useState)([]);
|
|
27
|
+
const [fields, setFields] = (0, react_1.useState)([]);
|
|
28
|
+
const [loading, setLoading] = (0, react_1.useState)(false);
|
|
29
|
+
const [selectedPivot, setSelectedPivot] = (0, react_1.useState)(null);
|
|
24
30
|
const defaultDateRange = [null, null, null];
|
|
25
|
-
const [dateRange, setDateRange] = useState(defaultDateRange);
|
|
26
|
-
useEffect(() => {
|
|
31
|
+
const [dateRange, setDateRange] = (0, react_1.useState)(defaultDateRange);
|
|
32
|
+
(0, react_1.useEffect)(() => {
|
|
27
33
|
let isSubscribed = true;
|
|
28
34
|
async function getClient() {
|
|
29
35
|
try {
|
|
30
|
-
const resp = await getDataFromCloud(client, `client/${client.publicKey}/`, null, 'GET');
|
|
36
|
+
const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `client/${client.publicKey}/`, null, 'GET');
|
|
31
37
|
if (resp) {
|
|
32
38
|
setClient({ ...client, ...resp.client });
|
|
33
39
|
}
|
|
@@ -43,10 +49,10 @@ export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeCol
|
|
|
43
49
|
isSubscribed = false;
|
|
44
50
|
};
|
|
45
51
|
}, []);
|
|
46
|
-
useEffect(() => {
|
|
52
|
+
(0, react_1.useEffect)(() => {
|
|
47
53
|
let isSubscribed = true;
|
|
48
54
|
async function getSchema() {
|
|
49
|
-
const resp = await getDataFromCloud(client, `schema2/${client.publicKey}/`, null, 'GET');
|
|
55
|
+
const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `schema2/${client.publicKey}/`, null, 'GET');
|
|
50
56
|
if (isSubscribed) {
|
|
51
57
|
setSchema(resp.tables);
|
|
52
58
|
}
|
|
@@ -58,17 +64,17 @@ export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeCol
|
|
|
58
64
|
isSubscribed = false;
|
|
59
65
|
};
|
|
60
66
|
}, []);
|
|
61
|
-
useEffect(() => {
|
|
67
|
+
(0, react_1.useEffect)(() => {
|
|
62
68
|
if (onDateFilterChange) {
|
|
63
69
|
onDateFilterChange(dateRange);
|
|
64
70
|
}
|
|
65
71
|
}, [dateRange]);
|
|
66
|
-
useEffect(() => {
|
|
72
|
+
(0, react_1.useEffect)(() => {
|
|
67
73
|
if (onDateFilterChange) {
|
|
68
74
|
onDateFilterChange(defaultDateRange);
|
|
69
75
|
}
|
|
70
76
|
}, []);
|
|
71
|
-
useEffect(() => {
|
|
77
|
+
(0, react_1.useEffect)(() => {
|
|
72
78
|
setColumns([]);
|
|
73
79
|
}, [tableName]);
|
|
74
80
|
const runQuery = async (query) => {
|
|
@@ -79,7 +85,7 @@ export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeCol
|
|
|
79
85
|
: { query, task: 'query' },
|
|
80
86
|
};
|
|
81
87
|
const cloudBody = { query };
|
|
82
|
-
const resp = await getData(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
|
|
88
|
+
const resp = await (0, dataFetcher_1.getData)(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
|
|
83
89
|
if (resp && resp.errorMessage) {
|
|
84
90
|
onError(resp.errorMessage);
|
|
85
91
|
setData([]);
|
|
@@ -94,9 +100,9 @@ export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeCol
|
|
|
94
100
|
return;
|
|
95
101
|
}
|
|
96
102
|
setData(resp.rows);
|
|
97
|
-
setColumns(resp.fields.map(elem => convertPostgresColumn(elem)));
|
|
103
|
+
setColumns(resp.fields.map(elem => (0, SQLEditor_1.convertPostgresColumn)(elem)));
|
|
98
104
|
if (selectedPivot) {
|
|
99
|
-
const { rows, columns } = generatePivotTable(selectedPivot, resp.rows, dateRange);
|
|
105
|
+
const { rows, columns } = (0, PivotModal_1.generatePivotTable)(selectedPivot, resp.rows, dateRange);
|
|
100
106
|
if (onChangePivot) {
|
|
101
107
|
onChangePivot(selectedPivot, columns, rows);
|
|
102
108
|
}
|
|
@@ -106,7 +112,7 @@ export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeCol
|
|
|
106
112
|
onChangeData(resp.rows);
|
|
107
113
|
}
|
|
108
114
|
if (onChangeColumns) {
|
|
109
|
-
onChangeColumns(resp.fields.map(elem => convertPostgresColumn(elem)));
|
|
115
|
+
onChangeColumns(resp.fields.map(elem => (0, SQLEditor_1.convertPostgresColumn)(elem)));
|
|
110
116
|
}
|
|
111
117
|
}
|
|
112
118
|
setFields(resp.fields);
|
|
@@ -115,7 +121,7 @@ export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeCol
|
|
|
115
121
|
}
|
|
116
122
|
setLoading(false);
|
|
117
123
|
};
|
|
118
|
-
useEffect(() => {
|
|
124
|
+
(0, react_1.useEffect)(() => {
|
|
119
125
|
if (onChangeLoading) {
|
|
120
126
|
onChangeLoading(loading);
|
|
121
127
|
}
|
|
@@ -123,17 +129,18 @@ export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeCol
|
|
|
123
129
|
if (!schema || !schema.length || !tableName) {
|
|
124
130
|
return null;
|
|
125
131
|
}
|
|
126
|
-
return (
|
|
132
|
+
return ((0, jsx_runtime_1.jsx)(ReportingTool, { containerStyle: containerStyle, destinationDashboard: destinationDashboard, client: client, editSQLEnabled: editSQLEnabled, navigateToSQLEditor: navigateToSQLEditor, theme: theme, data: data, columns: columns, fields: fields, chartBuilderTitle: chartBuilderTitle, chartBuilderButtonLabel: chartBuilderButtonLabel, onChangeData: onChangeData, onChangeColumns: onChangeColumns, onChangePivot: onChangePivot, selectedPivot: selectedPivot, setSelectedPivot: pivot => {
|
|
127
133
|
setSelectedPivot(pivot);
|
|
128
134
|
if (onChangePivot) {
|
|
129
135
|
const table = pivot
|
|
130
|
-
? generatePivotTable(pivot, data, dateRange)
|
|
136
|
+
? (0, PivotModal_1.generatePivotTable)(pivot, data, dateRange)
|
|
131
137
|
: { rows: null, columns: null };
|
|
132
138
|
onChangePivot(pivot, table.columns, table.rows);
|
|
133
139
|
}
|
|
134
140
|
}, schema: schema, tableName: tableName, dateColumn: dateColumn, selectedTagBorderColor: selectedTagBorderColor, onChangeQuery: onChangeQuery, runQuery: runQuery, dateRange: dateRange, setDateRange: setDateRange, defaultDateRange: defaultDateRange, chartBuilderEnabled: chartBuilderEnabled, HeaderComponent: Header, LabelComponent: Label, SelectComponent: Select, TextComponent: Text, ButtonComponent: Button, SecondaryButtonComponent: SecondaryButton, ModalComponent: Modal, PopoverComponent: Popover, TextInputComponent: TextInput, tagStyle: tagStyle, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions }));
|
|
135
141
|
}
|
|
136
|
-
|
|
142
|
+
exports.default = ReportBuilder;
|
|
143
|
+
function getPostgresBasicType(column) {
|
|
137
144
|
let format;
|
|
138
145
|
// first check if column.dataTypeID exists
|
|
139
146
|
if (column.dataTypeID) {
|
|
@@ -181,6 +188,7 @@ export function getPostgresBasicType(column) {
|
|
|
181
188
|
}
|
|
182
189
|
return format;
|
|
183
190
|
}
|
|
191
|
+
exports.getPostgresBasicType = getPostgresBasicType;
|
|
184
192
|
const newDateWhereAST = (column, dateRange, databaseType) => {
|
|
185
193
|
// all time means no filter
|
|
186
194
|
if (dateRange[2] === 'at') {
|
|
@@ -188,7 +196,7 @@ const newDateWhereAST = (column, dateRange, databaseType) => {
|
|
|
188
196
|
}
|
|
189
197
|
// if using preset
|
|
190
198
|
if (dateRange[2]) {
|
|
191
|
-
const timeInterval = reportBuilderOptions.find(elem => elem.value === dateRange[2])?.dayInterval;
|
|
199
|
+
const timeInterval = dateRangePickerUtils_1.reportBuilderOptions.find(elem => elem.value === dateRange[2])?.dayInterval;
|
|
192
200
|
switch (databaseType) {
|
|
193
201
|
case 'BigQuery': {
|
|
194
202
|
return {
|
|
@@ -320,11 +328,11 @@ const newDateWhereAST = (column, dateRange, databaseType) => {
|
|
|
320
328
|
value: [
|
|
321
329
|
{
|
|
322
330
|
type: 'single_quote_string',
|
|
323
|
-
value: format(new Date(dateRange[0]), 'MM/dd/yyyy'),
|
|
331
|
+
value: (0, date_fns_1.format)(new Date(dateRange[0]), 'MM/dd/yyyy'),
|
|
324
332
|
},
|
|
325
333
|
{
|
|
326
334
|
type: 'single_quote_string',
|
|
327
|
-
value: format(new Date(dateRange[1]), 'MM/dd/yyyy'),
|
|
335
|
+
value: (0, date_fns_1.format)(new Date(dateRange[1]), 'MM/dd/yyyy'),
|
|
328
336
|
},
|
|
329
337
|
],
|
|
330
338
|
},
|
|
@@ -332,11 +340,11 @@ const newDateWhereAST = (column, dateRange, databaseType) => {
|
|
|
332
340
|
}
|
|
333
341
|
};
|
|
334
342
|
function ReportingTool({ schema, data, columns, runQuery, SelectComponent, ButtonComponent, SecondaryButtonComponent, editSQLEnabled, navigateToSQLEditor, onChangeQuery, onChangePivot, selectedPivot, setSelectedPivot, theme, ModalComponent, HeaderComponent, PopoverComponent, TextComponent, TextInputComponent, LabelComponent, tagStyle, tableName, dateColumn, selectedTagBorderColor, dateRange, setDateRange, defaultDateRange, chartBuilderEnabled, fields, containerStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, client, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, }) {
|
|
335
|
-
const selectedTable = useMemo(() => schema.find(t => t.displayName === tableName), [schema, tableName]);
|
|
336
|
-
const [selectedColumn, setSelectedColumn] = useState(schema[0].columns.find(elem => elem.name !== 'id'));
|
|
337
|
-
const parentRef = useRef();
|
|
338
|
-
const [filters, setFilters] = useState([]);
|
|
339
|
-
const [AST, setAST] = useState({
|
|
343
|
+
const selectedTable = (0, react_1.useMemo)(() => schema.find(t => t.displayName === tableName), [schema, tableName]);
|
|
344
|
+
const [selectedColumn, setSelectedColumn] = (0, react_1.useState)(schema[0].columns.find(elem => elem.name !== 'id'));
|
|
345
|
+
const parentRef = (0, react_1.useRef)();
|
|
346
|
+
const [filters, setFilters] = (0, react_1.useState)([]);
|
|
347
|
+
const [AST, setAST] = (0, react_1.useState)({
|
|
340
348
|
with: null,
|
|
341
349
|
type: 'select',
|
|
342
350
|
options: null,
|
|
@@ -352,32 +360,32 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
352
360
|
limit: { seperator: '', value: [] },
|
|
353
361
|
window: null,
|
|
354
362
|
});
|
|
355
|
-
const [ASTNoDateColumn, setASTNoDateColumn] = useState(AST);
|
|
356
|
-
const [numberStart, setNumberStart] = useState(0);
|
|
357
|
-
const [numberEnd, setNumberEnd] = useState(0);
|
|
358
|
-
const [filterDateRange, setFilterDateRange] = useState(getRangeFromPreset('90d'));
|
|
359
|
-
const [computedColumns, setComputedColumns] = useState({});
|
|
360
|
-
const [stringFilterValues, setStringFilterValues] = useState([]);
|
|
361
|
-
const [columnType, setColumnType] = useState(getPostgresBasicType(schema[0].columns[0]));
|
|
362
|
-
const [sqlQuery, setSqlQuery] = useState('');
|
|
363
|
-
const [sqlQueryNoDateColumn, setSqlQueryNoDateColumn] = useState('');
|
|
364
|
-
const [indexBeingEdited, setIndexBeingEdited] = useState(-1);
|
|
365
|
-
const [isAddFilterModalOpen, setIsAddFilterModalOpen] = useState(false);
|
|
366
|
-
const [isEdittingPivot, setIsEdittingPivot] = useState(false);
|
|
367
|
-
const [isPivotModalOpen, setIsPivotModalOpen] = useState(false);
|
|
368
|
-
const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
|
|
369
|
-
const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
|
|
370
|
-
const [createdPivots, setCreatedPivots] = useState([]);
|
|
371
|
-
const [recommendedPivots, setRecommendedPivots] = useState([]);
|
|
372
|
-
const [pivotRowField, setPivotRowField] = useState(undefined);
|
|
373
|
-
const [pivotColumnField, setPivotColumnField] = useState(undefined);
|
|
374
|
-
const [pivotValueField, setPivotValueField] = useState(undefined);
|
|
375
|
-
const [pivotAggregation, setPivotAggregation] = useState(undefined);
|
|
376
|
-
const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add Pivot');
|
|
377
|
-
useEffect(() => {
|
|
363
|
+
const [ASTNoDateColumn, setASTNoDateColumn] = (0, react_1.useState)(AST);
|
|
364
|
+
const [numberStart, setNumberStart] = (0, react_1.useState)(0);
|
|
365
|
+
const [numberEnd, setNumberEnd] = (0, react_1.useState)(0);
|
|
366
|
+
const [filterDateRange, setFilterDateRange] = (0, react_1.useState)((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
|
|
367
|
+
const [computedColumns, setComputedColumns] = (0, react_1.useState)({});
|
|
368
|
+
const [stringFilterValues, setStringFilterValues] = (0, react_1.useState)([]);
|
|
369
|
+
const [columnType, setColumnType] = (0, react_1.useState)(getPostgresBasicType(schema[0].columns[0]));
|
|
370
|
+
const [sqlQuery, setSqlQuery] = (0, react_1.useState)('');
|
|
371
|
+
const [sqlQueryNoDateColumn, setSqlQueryNoDateColumn] = (0, react_1.useState)('');
|
|
372
|
+
const [indexBeingEdited, setIndexBeingEdited] = (0, react_1.useState)(-1);
|
|
373
|
+
const [isAddFilterModalOpen, setIsAddFilterModalOpen] = (0, react_1.useState)(false);
|
|
374
|
+
const [isEdittingPivot, setIsEdittingPivot] = (0, react_1.useState)(false);
|
|
375
|
+
const [isPivotModalOpen, setIsPivotModalOpen] = (0, react_1.useState)(false);
|
|
376
|
+
const [isChartBuilderOpen, setIsChartBuilderOpen] = (0, react_1.useState)(false);
|
|
377
|
+
const [selectedPivotIndex, setSelectedPivotIndex] = (0, react_1.useState)(-1);
|
|
378
|
+
const [createdPivots, setCreatedPivots] = (0, react_1.useState)([]);
|
|
379
|
+
const [recommendedPivots, setRecommendedPivots] = (0, react_1.useState)([]);
|
|
380
|
+
const [pivotRowField, setPivotRowField] = (0, react_1.useState)(undefined);
|
|
381
|
+
const [pivotColumnField, setPivotColumnField] = (0, react_1.useState)(undefined);
|
|
382
|
+
const [pivotValueField, setPivotValueField] = (0, react_1.useState)(undefined);
|
|
383
|
+
const [pivotAggregation, setPivotAggregation] = (0, react_1.useState)(undefined);
|
|
384
|
+
const [pivotPopUpTitle, setPivotPopUpTitle] = (0, react_1.useState)('Add Pivot');
|
|
385
|
+
(0, react_1.useEffect)(() => {
|
|
378
386
|
setColumnType(getPostgresBasicType(selectedColumn));
|
|
379
387
|
}, [selectedColumn]);
|
|
380
|
-
useEffect(() => {
|
|
388
|
+
(0, react_1.useEffect)(() => {
|
|
381
389
|
removePivot();
|
|
382
390
|
setCreatedPivots([]);
|
|
383
391
|
setRecommendedPivots([]);
|
|
@@ -390,7 +398,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
390
398
|
setStringFilterValues([]);
|
|
391
399
|
setNumberStart(0);
|
|
392
400
|
setNumberEnd(0);
|
|
393
|
-
setFilterDateRange(getRangeFromPreset('90d'));
|
|
401
|
+
setFilterDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
|
|
394
402
|
return;
|
|
395
403
|
}
|
|
396
404
|
setSelectedColumn(matchingColumn);
|
|
@@ -408,9 +416,9 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
408
416
|
setIndexBeingEdited(index);
|
|
409
417
|
}
|
|
410
418
|
};
|
|
411
|
-
const selectedPivotTable = useMemo(() => {
|
|
419
|
+
const selectedPivotTable = (0, react_1.useMemo)(() => {
|
|
412
420
|
if (selectedPivot && data) {
|
|
413
|
-
return generatePivotTable(selectedPivot, data, dateRange);
|
|
421
|
+
return (0, PivotModal_1.generatePivotTable)(selectedPivot, data, dateRange);
|
|
414
422
|
}
|
|
415
423
|
else {
|
|
416
424
|
return {};
|
|
@@ -426,7 +434,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
426
434
|
const selectPivot = (pivot, index) => {
|
|
427
435
|
setSelectedPivotIndex(index);
|
|
428
436
|
setSelectedPivot(pivot);
|
|
429
|
-
const pivotTable = generatePivotTable(pivot, data, dateRange);
|
|
437
|
+
const pivotTable = (0, PivotModal_1.generatePivotTable)(pivot, data, dateRange);
|
|
430
438
|
if (onChangePivot) {
|
|
431
439
|
onChangePivot(pivot, pivotTable.columns, pivotTable.rows);
|
|
432
440
|
}
|
|
@@ -460,9 +468,9 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
460
468
|
}
|
|
461
469
|
else if (columnType === 'date') {
|
|
462
470
|
const label = filterDateRange[2]
|
|
463
|
-
? reportBuilderOptions.find(elem => elem.value === filterDateRange[2])
|
|
471
|
+
? dateRangePickerUtils_1.reportBuilderOptions.find(elem => elem.value === filterDateRange[2])
|
|
464
472
|
?.text
|
|
465
|
-
: `${format(new Date(filterDateRange[0]), 'MMM dd')} - ${format(new Date(filterDateRange[1]), 'MMM dd')}`;
|
|
473
|
+
: `${(0, date_fns_1.format)(new Date(filterDateRange[0]), 'MMM dd')} - ${(0, date_fns_1.format)(new Date(filterDateRange[1]), 'MMM dd')}`;
|
|
466
474
|
setFilters(filters => {
|
|
467
475
|
const newFilters = [...filters];
|
|
468
476
|
newFilters[index] = {
|
|
@@ -477,7 +485,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
477
485
|
setStringFilterValues([]);
|
|
478
486
|
setNumberStart(0);
|
|
479
487
|
setNumberEnd(0);
|
|
480
|
-
setFilterDateRange(getRangeFromPreset('90d'));
|
|
488
|
+
setFilterDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
|
|
481
489
|
setIndexBeingEdited(-1);
|
|
482
490
|
return;
|
|
483
491
|
}
|
|
@@ -502,7 +510,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
502
510
|
setStringFilterValues([]);
|
|
503
511
|
setNumberStart(0);
|
|
504
512
|
setNumberEnd(0);
|
|
505
|
-
setFilterDateRange(getRangeFromPreset('90d'));
|
|
513
|
+
setFilterDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
|
|
506
514
|
return;
|
|
507
515
|
}
|
|
508
516
|
else if (columnType === 'number') {
|
|
@@ -521,14 +529,14 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
521
529
|
setStringFilterValues([]);
|
|
522
530
|
setNumberStart(0);
|
|
523
531
|
setNumberEnd(0);
|
|
524
|
-
setFilterDateRange(getRangeFromPreset('90d'));
|
|
532
|
+
setFilterDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
|
|
525
533
|
return;
|
|
526
534
|
}
|
|
527
535
|
else if (columnType === 'date') {
|
|
528
536
|
const label = filterDateRange[2]
|
|
529
|
-
? reportBuilderOptions.find(elem => elem.value === filterDateRange[2])
|
|
537
|
+
? dateRangePickerUtils_1.reportBuilderOptions.find(elem => elem.value === filterDateRange[2])
|
|
530
538
|
?.text
|
|
531
|
-
: `${format(new Date(filterDateRange[0]), 'MMM dd')} - ${format(new Date(filterDateRange[1]), 'MMM dd')}`;
|
|
539
|
+
: `${(0, date_fns_1.format)(new Date(filterDateRange[0]), 'MMM dd')} - ${(0, date_fns_1.format)(new Date(filterDateRange[1]), 'MMM dd')}`;
|
|
532
540
|
setFilters(filters => {
|
|
533
541
|
return [
|
|
534
542
|
...filters,
|
|
@@ -543,7 +551,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
543
551
|
setStringFilterValues([]);
|
|
544
552
|
setNumberStart(0);
|
|
545
553
|
setNumberEnd(0);
|
|
546
|
-
setFilterDateRange(getRangeFromPreset('90d'));
|
|
554
|
+
setFilterDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
|
|
547
555
|
}
|
|
548
556
|
}
|
|
549
557
|
};
|
|
@@ -553,7 +561,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
553
561
|
runQuery(queryToUse);
|
|
554
562
|
}
|
|
555
563
|
};
|
|
556
|
-
useEffect(() => {
|
|
564
|
+
(0, react_1.useEffect)(() => {
|
|
557
565
|
// if selected table changes, clear everything
|
|
558
566
|
if (selectedTable.displayName !== AST.from.table) {
|
|
559
567
|
setSelectedColumn(selectedTable.columns.find(elem => elem.name !== 'id'));
|
|
@@ -661,7 +669,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
661
669
|
}
|
|
662
670
|
};
|
|
663
671
|
// USE EFFECT HOOK THAT TRANSFORMS "FILTERS ARRAY INTO AST"
|
|
664
|
-
useEffect(() => {
|
|
672
|
+
(0, react_1.useEffect)(() => {
|
|
665
673
|
if (filters.length || dateRange) {
|
|
666
674
|
setAST(generateNewAST(true));
|
|
667
675
|
setASTNoDateColumn(generateNewAST(false));
|
|
@@ -675,7 +683,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
675
683
|
});
|
|
676
684
|
setIndexBeingEdited(-1);
|
|
677
685
|
};
|
|
678
|
-
const computeStats = useCallback(column => {
|
|
686
|
+
const computeStats = (0, react_1.useCallback)(column => {
|
|
679
687
|
if ((!computedColumns[column.name] ||
|
|
680
688
|
computedColumns[column.name].length === 0) &&
|
|
681
689
|
data) {
|
|
@@ -713,7 +721,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
713
721
|
}
|
|
714
722
|
}, [data, computedColumns]);
|
|
715
723
|
// Call this function whenever the selected column changes
|
|
716
|
-
useEffect(() => {
|
|
724
|
+
(0, react_1.useEffect)(() => {
|
|
717
725
|
computeStats(selectedColumn);
|
|
718
726
|
}, [selectedColumn, data]);
|
|
719
727
|
// Use the results directly in your component
|
|
@@ -728,11 +736,11 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
728
736
|
// }
|
|
729
737
|
// }
|
|
730
738
|
// }, [AST]);
|
|
731
|
-
useEffect(() => {
|
|
739
|
+
(0, react_1.useEffect)(() => {
|
|
732
740
|
const getSqlQueryFromAST = async () => {
|
|
733
741
|
try {
|
|
734
742
|
if (AST && AST.from[0].table) {
|
|
735
|
-
const resp = await getDataFromCloud(client, 'sqlify', {
|
|
743
|
+
const resp = await (0, dataFetcher_1.getDataFromCloud)(client, 'sqlify', {
|
|
736
744
|
ast: AST,
|
|
737
745
|
});
|
|
738
746
|
const newSqlQuery = resp.query; // assuming the response contains the SQL query
|
|
@@ -749,11 +757,11 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
749
757
|
};
|
|
750
758
|
getSqlQueryFromAST();
|
|
751
759
|
}, [AST]);
|
|
752
|
-
useEffect(() => {
|
|
760
|
+
(0, react_1.useEffect)(() => {
|
|
753
761
|
const getSqlQueryFromAST = async () => {
|
|
754
762
|
try {
|
|
755
763
|
if (ASTNoDateColumn && ASTNoDateColumn.from[0].table) {
|
|
756
|
-
const resp = await getDataFromCloud(client, 'sqlify', {
|
|
764
|
+
const resp = await (0, dataFetcher_1.getDataFromCloud)(client, 'sqlify', {
|
|
757
765
|
ast: ASTNoDateColumn,
|
|
758
766
|
});
|
|
759
767
|
const newSqlQuery = resp.query; // assuming the response contains the SQL query
|
|
@@ -771,19 +779,19 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
771
779
|
if (!schema || !schema.length) {
|
|
772
780
|
return null;
|
|
773
781
|
}
|
|
774
|
-
return (
|
|
782
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: { fontFamily: theme?.fontFamily, ...containerStyle }, ref: parentRef, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
775
783
|
display: 'flex',
|
|
776
784
|
// marginLeft: '25px',
|
|
777
785
|
// marginRight: '25px',
|
|
778
786
|
justifyContent: 'end',
|
|
779
|
-
}, children:
|
|
787
|
+
}, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: '12px' }, children: [editSQLEnabled && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
|
|
780
788
|
if (navigateToSQLEditor) {
|
|
781
789
|
navigateToSQLEditor(sqlQuery);
|
|
782
790
|
}
|
|
783
|
-
}, label: "Edit Query" })),
|
|
791
|
+
}, label: "Edit Query" })), (0, jsx_runtime_1.jsx)(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, setDateRange: setFilterDateRange, dateRange: filterDateRange, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, parentRef: parentRef, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextInputComponent: TextInputComponent, LabelComponent: LabelComponent, tagStyle: tagStyle, theme: theme, setIsOpen: setIsAddFilterModalOpen, isOpen: isAddFilterModalOpen, selectedTagBorderColor: selectedTagBorderColor }), (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, TextComponent: TextComponent, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, theme: theme, data: data, parentRef: parentRef, columns: columns, setIsOpen: setIsPivotModalOpen, isOpen: isPivotModalOpen, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: removePivot, selectPivot: selectPivot, dateRange: dateRange, rightAlign: true })] }) }), (0, jsx_runtime_1.jsx)(Table_1.default, { rows: selectedPivotTable?.rows || data, columns: selectedPivotTable?.columns || columns, containerStyle: {
|
|
784
792
|
height: 400,
|
|
785
793
|
marginTop: 10,
|
|
786
|
-
} }), chartBuilderEnabled && columns.length > 0 && (
|
|
794
|
+
} }), chartBuilderEnabled && columns.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
787
795
|
display: 'flex',
|
|
788
796
|
flexDirection: 'row',
|
|
789
797
|
alignItems: 'center',
|
|
@@ -791,7 +799,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
|
|
|
791
799
|
width: '100%',
|
|
792
800
|
height: '70px',
|
|
793
801
|
gap: '8px',
|
|
794
|
-
}, children:
|
|
802
|
+
}, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: "Add to dashboard" }) }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.default, { rows: data, columns: columns, fields: fields, query: sqlQuery, queryNoDateColumn: sqlQueryNoDateColumn, pivot: selectedPivot, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, dateRange: dateRange, recommendedPivots: recommendedPivots, destinationDashboard: destinationDashboard, dateColumn: dateColumn })] }))] }));
|
|
795
803
|
}
|
|
796
804
|
function FilterTag({ Label, id, label, removeFilter, isSelected, index, setIsOpen, selectFilter, theme, tagStyle, selectedTagBorderColor, }) {
|
|
797
805
|
const handleRemoveFilter = () => {
|
|
@@ -825,11 +833,11 @@ function FilterTag({ Label, id, label, removeFilter, isSelected, index, setIsOpe
|
|
|
825
833
|
? selectedTagBorderColor || '#B3B4BD'
|
|
826
834
|
: styles.borderColor || '#EFF0FC',
|
|
827
835
|
};
|
|
828
|
-
return (
|
|
836
|
+
return ((0, jsx_runtime_1.jsxs)("div", { id: id, onClick: handleSelectFilter, style: { ...styles, ...borderColor }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
829
837
|
textOverflow: 'ellipsis',
|
|
830
838
|
whiteSpace: 'nowrap',
|
|
831
839
|
overflow: 'hidden',
|
|
832
|
-
}, children: label }),
|
|
840
|
+
}, children: label }), (0, jsx_runtime_1.jsx)("div", {
|
|
833
841
|
// onClick={handleRemoveFilter}
|
|
834
842
|
onClick: e => {
|
|
835
843
|
e.stopPropagation(); // Prevents the event from bubbling up to the parent
|
|
@@ -840,19 +848,19 @@ function FilterTag({ Label, id, label, removeFilter, isSelected, index, setIsOpe
|
|
|
840
848
|
alignItems: 'center',
|
|
841
849
|
cursor: 'pointer',
|
|
842
850
|
paddingLeft: '6px',
|
|
843
|
-
}, children:
|
|
851
|
+
}, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: tagStyle?.color || theme?.primaryTextColor, height: "20", width: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }));
|
|
844
852
|
}
|
|
845
853
|
const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, setDateRange, dateRange, columnStats, stringFilterValues, setStringFilterValues, addFilter, setSelectedColumn, setNumberStart, setNumberEnd, selectedTable, columnType, removeFilter, selectFilter, indexBeingEdited, updateFilter, SelectComponent, ButtonComponent, PopoverComponent, LabelComponent, theme, TextInputComponent, tagStyle, selectedTagBorderColor, parentRef, }) => {
|
|
846
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
847
|
-
return (
|
|
854
|
+
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
855
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
|
|
848
856
|
position: 'relative',
|
|
849
857
|
display: 'inline-block',
|
|
850
858
|
textAlign: 'left',
|
|
851
|
-
}, children: [
|
|
859
|
+
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
852
860
|
display: 'flex',
|
|
853
861
|
flexDirection: 'row',
|
|
854
862
|
alignItems: 'center',
|
|
855
|
-
}, children: filters.length > 0 && (
|
|
863
|
+
}, children: filters.length > 0 && ((0, jsx_runtime_1.jsx)("span", { style: {
|
|
856
864
|
height: 10,
|
|
857
865
|
width: 10,
|
|
858
866
|
backgroundColor: theme.primaryButtonColor,
|
|
@@ -860,11 +868,11 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, setD
|
|
|
860
868
|
position: 'absolute',
|
|
861
869
|
top: -2,
|
|
862
870
|
right: -2,
|
|
863
|
-
} })) }),
|
|
871
|
+
} })) }), (0, jsx_runtime_1.jsx)(PopoverComponent, { parentRef: parentRef, label: "Add filter", style: { right: 0, minWidth: 400, overflow: 'visible' }, isOpen: isOpen, onClose: () => setIsOpen(false), title: "Add filter", setIsOpen: setIsOpen, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
864
872
|
backgroundColor: 'rgb(255, 255, 255)',
|
|
865
873
|
display: 'flex',
|
|
866
874
|
flexDirection: 'column',
|
|
867
|
-
}, children: [filters.length > 0 && (
|
|
875
|
+
}, children: [filters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: 20 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
868
876
|
overflowY: 'scroll',
|
|
869
877
|
maxHeight: '300px',
|
|
870
878
|
display: 'flex',
|
|
@@ -872,38 +880,38 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, setD
|
|
|
872
880
|
flexDirection: 'row',
|
|
873
881
|
flexWrap: 'wrap',
|
|
874
882
|
alignItems: 'center',
|
|
875
|
-
}, children: filters.map((elem, index) => (
|
|
883
|
+
}, children: filters.map((elem, index) => ((0, jsx_runtime_1.jsx)(FilterTag, { id: "filter-tag", Label: LabelComponent, label: elem.tag, removeFilter: removeFilter, selectFilter: selectFilter, isSelected: index === indexBeingEdited, index: index, theme: theme, setIsOpen: setIsOpen, tagStyle: tagStyle, selectedTagBorderColor: selectedTagBorderColor }, 'filter' + index))) }) })), (0, jsx_runtime_1.jsx)(LabelComponent, { children: "Column" }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: 'Column', id: "custom-select", value: selectedColumn.name, onChange: e => {
|
|
876
884
|
const column = selectedTable.columns.find(c => c.name === e);
|
|
877
885
|
setSelectedColumn(column);
|
|
878
886
|
}, options: selectedTable.columns
|
|
879
887
|
.filter(elem => !(elem.name === 'id' || elem.name.endsWith('_id')))
|
|
880
888
|
.map(elem => {
|
|
881
889
|
return { label: elem.name, value: elem.name };
|
|
882
|
-
}) }), columnType === 'number' && (
|
|
890
|
+
}) }), columnType === 'number' && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
883
891
|
display: 'flex',
|
|
884
892
|
flexDirection: 'row',
|
|
885
893
|
alignItems: 'center',
|
|
886
894
|
justifyContent: 'space-between',
|
|
887
|
-
}, children: [
|
|
895
|
+
}, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
|
|
888
896
|
display: 'flex',
|
|
889
897
|
flexDirection: 'column',
|
|
890
898
|
marginTop: '20px',
|
|
891
|
-
}, children: [
|
|
899
|
+
}, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Minimum" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "min-input", value: numberStart, placeholder: "Minimum", onChange: value => setNumberStart(value) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 16 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
892
900
|
display: 'flex',
|
|
893
901
|
flexDirection: 'column',
|
|
894
902
|
marginTop: '20px',
|
|
895
|
-
}, children: [
|
|
903
|
+
}, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Maximum" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "max-input", placeholder: "Maximum", value: numberEnd, onChange: value => setNumberEnd(value) })] })] }) })), columnType === 'date' && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
896
904
|
display: 'flex',
|
|
897
905
|
flexDirection: 'row',
|
|
898
906
|
justifyContent: 'space-between',
|
|
899
907
|
marginTop: 20,
|
|
900
|
-
}, children:
|
|
908
|
+
}, children: (0, jsx_runtime_1.jsx)(Dashboard_1.QuillDateRangePicker, { dateRange: dateRange ? [dateRange[0], dateRange[1]] : [null, null], label: '', onChangeDateRange: dateRange => {
|
|
901
909
|
setDateRange([dateRange[0], dateRange[1], null]);
|
|
902
910
|
}, preset: dateRange && dateRange.length === 3 && dateRange[2] !== null
|
|
903
911
|
? dateRange[2]
|
|
904
912
|
: '', onChangePreset: preset => {
|
|
905
913
|
if (typeof preset === 'string') {
|
|
906
|
-
setDateRange(getRangeFromPreset(preset));
|
|
914
|
+
setDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)(preset));
|
|
907
915
|
return;
|
|
908
916
|
}
|
|
909
917
|
setDateRange([
|
|
@@ -911,28 +919,28 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, setD
|
|
|
911
919
|
new Date(),
|
|
912
920
|
preset?.value || '',
|
|
913
921
|
]);
|
|
914
|
-
}, presetOptions: reportBuilderOptions }) })), columnType === 'string' &&
|
|
922
|
+
}, presetOptions: dateRangePickerUtils_1.reportBuilderOptions }) })), columnType === 'string' &&
|
|
915
923
|
columnStats &&
|
|
916
|
-
columnStats.length > 0 && (
|
|
924
|
+
columnStats.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
917
925
|
flex: 'flex',
|
|
918
926
|
flexDirection: 'column',
|
|
919
927
|
marginTop: '14px',
|
|
920
928
|
overflow: 'hidden',
|
|
921
|
-
}, children: columnStats.map(value => (
|
|
929
|
+
}, children: columnStats.map(value => ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
922
930
|
display: 'flex',
|
|
923
931
|
flexDirection: 'row',
|
|
924
932
|
alignItems: 'center',
|
|
925
|
-
}, children:
|
|
933
|
+
}, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
926
934
|
display: 'flex',
|
|
927
935
|
flexDirection: 'row',
|
|
928
936
|
alignItems: 'center',
|
|
929
937
|
paddingTop: 6,
|
|
930
938
|
paddingBottom: 6,
|
|
931
|
-
}, children: [
|
|
939
|
+
}, children: [(0, jsx_runtime_1.jsx)(DivCheckbox, { theme: theme, checked: stringFilterValues.includes(value), onChange: () => {
|
|
932
940
|
setStringFilterValues(prev => prev.includes(value)
|
|
933
941
|
? prev.filter(v => v !== value)
|
|
934
942
|
: [...prev, value]);
|
|
935
|
-
} }),
|
|
943
|
+
} }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
936
944
|
marginLeft: 6,
|
|
937
945
|
display: 'block',
|
|
938
946
|
overflow: 'hidden',
|
|
@@ -940,7 +948,7 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, setD
|
|
|
940
948
|
whiteSpace: 'nowrap',
|
|
941
949
|
color: theme?.primaryTextColor,
|
|
942
950
|
fontFamily: theme?.fontFamily,
|
|
943
|
-
}, children: value })] }, value) }, value))) })),
|
|
951
|
+
}, children: value })] }, value) }, value))) })), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
|
|
944
952
|
if (columnType === 'date' && !dateRange) {
|
|
945
953
|
return;
|
|
946
954
|
}
|
|
@@ -949,7 +957,7 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, setD
|
|
|
949
957
|
return;
|
|
950
958
|
}
|
|
951
959
|
addFilter();
|
|
952
|
-
}, label: indexBeingEdited > -1 ? 'Edit filter' : 'Add filter' }) })] }) })] }),
|
|
960
|
+
}, label: indexBeingEdited > -1 ? 'Edit filter' : 'Add filter' }) })] }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: '12px' } })] }));
|
|
953
961
|
};
|
|
954
962
|
const DivCheckbox = ({ onChange, checked, theme }) => {
|
|
955
963
|
const toggleCheckbox = () => {
|
|
@@ -973,7 +981,7 @@ const DivCheckbox = ({ onChange, checked, theme }) => {
|
|
|
973
981
|
alignItems: 'center',
|
|
974
982
|
justifyContent: 'center',
|
|
975
983
|
};
|
|
976
|
-
return (
|
|
984
|
+
return ((0, jsx_runtime_1.jsx)("div", { style: style, onClick: toggleCheckbox, "aria-checked": checked,
|
|
977
985
|
// className="shadow-sm"
|
|
978
986
|
role: "checkbox", children: checked && (
|
|
979
987
|
// <CheckIcon
|
|
@@ -981,5 +989,6 @@ const DivCheckbox = ({ onChange, checked, theme }) => {
|
|
|
981
989
|
// className="text-white"
|
|
982
990
|
// aria-hidden="true"
|
|
983
991
|
// />
|
|
984
|
-
|
|
992
|
+
(0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme?.backgroundColor, height: "16", width: "16", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z", clipRule: "evenodd" }) })) }));
|
|
985
993
|
};
|
|
994
|
+
//# sourceMappingURL=ReportBuilder.js.map
|