@quillsql/react 2.11.7 → 2.11.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/cjs/BarList.d.ts +1 -0
- package/dist/cjs/BarList.d.ts.map +1 -1
- package/dist/cjs/BarList.js +55 -46
- package/dist/cjs/Chart.d.ts +4 -0
- package/dist/cjs/Chart.d.ts.map +1 -1
- package/dist/cjs/Chart.js +25 -19
- package/dist/cjs/ChartBuilder.d.ts +5 -3
- package/dist/cjs/ChartBuilder.d.ts.map +1 -1
- package/dist/cjs/ChartBuilder.js +236 -196
- package/dist/cjs/ChartEditor.d.ts +3 -1
- package/dist/cjs/ChartEditor.d.ts.map +1 -1
- package/dist/cjs/ChartEditor.js +17 -2
- package/dist/cjs/Dashboard.d.ts +2 -1
- package/dist/cjs/Dashboard.d.ts.map +1 -1
- package/dist/cjs/Dashboard.js +4 -4
- package/dist/cjs/PieChart.d.ts +1 -1
- package/dist/cjs/PieChart.d.ts.map +1 -1
- package/dist/cjs/PieChart.js +95 -357
- package/dist/cjs/ReportBuilder.d.ts +11 -3
- package/dist/cjs/ReportBuilder.d.ts.map +1 -1
- package/dist/cjs/ReportBuilder.js +224 -99
- package/dist/cjs/SQLEditor.d.ts +4 -2
- package/dist/cjs/SQLEditor.d.ts.map +1 -1
- package/dist/cjs/SQLEditor.js +9 -6
- package/dist/cjs/components/Chart/BarChart.d.ts +2 -1
- package/dist/cjs/components/Chart/BarChart.d.ts.map +1 -1
- package/dist/cjs/components/Chart/BarChart.js +9 -5
- package/dist/cjs/components/Chart/ChartError.js +1 -1
- package/dist/cjs/components/Chart/ChartSkeleton.js +2 -2
- package/dist/cjs/components/Chart/LineChart.d.ts +2 -1
- package/dist/cjs/components/Chart/LineChart.d.ts.map +1 -1
- package/dist/cjs/components/Chart/LineChart.js +10 -3
- package/dist/cjs/components/Dashboard/TableComponent.d.ts +1 -1
- package/dist/cjs/components/Dashboard/TableComponent.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/TableComponent.js +1 -1
- package/dist/cjs/components/QuillTable.js +1 -1
- package/dist/cjs/components/ReportBuilder/AddColumnPopover.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/AddColumnPopover.js +2 -2
- package/dist/cjs/components/ReportBuilder/AddSortPopover.d.ts +3 -0
- package/dist/cjs/components/ReportBuilder/AddSortPopover.d.ts.map +1 -0
- package/dist/cjs/components/ReportBuilder/AddSortPopover.js +62 -0
- package/dist/cjs/components/ReportBuilder/convert.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/convert.js +3 -2
- package/dist/cjs/components/ReportBuilder/ui.d.ts +1 -0
- package/dist/cjs/components/ReportBuilder/ui.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/ui.js +11 -3
- package/dist/cjs/components/UiComponents.d.ts +12 -2
- package/dist/cjs/components/UiComponents.d.ts.map +1 -1
- package/dist/cjs/components/UiComponents.js +7 -6
- package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts +2 -1
- package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
- package/dist/cjs/internals/ReportBuilder/PivotModal.js +47 -56
- package/dist/cjs/utils/aggregate.js +2 -2
- package/dist/cjs/utils/color.d.ts +25 -0
- package/dist/cjs/utils/color.d.ts.map +1 -1
- package/dist/cjs/utils/color.js +164 -1
- package/dist/esm/BarList.d.ts +1 -0
- package/dist/esm/BarList.d.ts.map +1 -1
- package/dist/esm/BarList.js +55 -46
- package/dist/esm/Chart.d.ts +4 -0
- package/dist/esm/Chart.d.ts.map +1 -1
- package/dist/esm/Chart.js +25 -19
- package/dist/esm/ChartBuilder.d.ts +5 -3
- package/dist/esm/ChartBuilder.d.ts.map +1 -1
- package/dist/esm/ChartBuilder.js +234 -195
- package/dist/esm/ChartEditor.d.ts +3 -1
- package/dist/esm/ChartEditor.d.ts.map +1 -1
- package/dist/esm/ChartEditor.js +19 -4
- package/dist/esm/Dashboard.d.ts +2 -1
- package/dist/esm/Dashboard.d.ts.map +1 -1
- package/dist/esm/Dashboard.js +4 -4
- package/dist/esm/PieChart.d.ts +1 -1
- package/dist/esm/PieChart.d.ts.map +1 -1
- package/dist/esm/PieChart.js +93 -334
- package/dist/esm/ReportBuilder.d.ts +11 -3
- package/dist/esm/ReportBuilder.d.ts.map +1 -1
- package/dist/esm/ReportBuilder.js +229 -104
- package/dist/esm/SQLEditor.d.ts +4 -2
- package/dist/esm/SQLEditor.d.ts.map +1 -1
- package/dist/esm/SQLEditor.js +9 -6
- package/dist/esm/components/Chart/BarChart.d.ts +2 -1
- package/dist/esm/components/Chart/BarChart.d.ts.map +1 -1
- package/dist/esm/components/Chart/BarChart.js +9 -5
- package/dist/esm/components/Chart/ChartError.js +1 -1
- package/dist/esm/components/Chart/ChartSkeleton.js +2 -2
- package/dist/esm/components/Chart/LineChart.d.ts +2 -1
- package/dist/esm/components/Chart/LineChart.d.ts.map +1 -1
- package/dist/esm/components/Chart/LineChart.js +10 -3
- package/dist/esm/components/Dashboard/TableComponent.d.ts +1 -1
- package/dist/esm/components/Dashboard/TableComponent.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/TableComponent.js +1 -1
- package/dist/esm/components/QuillTable.js +1 -1
- package/dist/esm/components/ReportBuilder/AddColumnPopover.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/AddColumnPopover.js +2 -2
- package/dist/esm/components/ReportBuilder/AddSortPopover.d.ts +3 -0
- package/dist/esm/components/ReportBuilder/AddSortPopover.d.ts.map +1 -0
- package/dist/esm/components/ReportBuilder/AddSortPopover.js +57 -0
- package/dist/esm/components/ReportBuilder/convert.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/convert.js +3 -2
- package/dist/esm/components/ReportBuilder/ui.d.ts +1 -0
- package/dist/esm/components/ReportBuilder/ui.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/ui.js +10 -3
- package/dist/esm/components/UiComponents.d.ts +12 -2
- package/dist/esm/components/UiComponents.d.ts.map +1 -1
- package/dist/esm/components/UiComponents.js +7 -6
- package/dist/esm/internals/ReportBuilder/PivotModal.d.ts +2 -1
- package/dist/esm/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
- package/dist/esm/internals/ReportBuilder/PivotModal.js +47 -56
- package/dist/esm/utils/aggregate.js +2 -2
- package/dist/esm/utils/color.d.ts +25 -0
- package/dist/esm/utils/color.d.ts.map +1 -1
- package/dist/esm/utils/color.js +160 -0
- package/package.json +1 -1
|
@@ -12,7 +12,7 @@ const utilities_1 = require("@dnd-kit/utilities");
|
|
|
12
12
|
const date_fns_1 = require("date-fns");
|
|
13
13
|
const Context_1 = require("./Context");
|
|
14
14
|
const ast_1 = require("./components/ReportBuilder/ast");
|
|
15
|
-
const ChartBuilder_1 =
|
|
15
|
+
const ChartBuilder_1 = require("./ChartBuilder");
|
|
16
16
|
const ui_1 = require("./components/ReportBuilder/ui");
|
|
17
17
|
const postgres_1 = require("./components/ReportBuilder/postgres");
|
|
18
18
|
const convert_1 = require("./components/ReportBuilder/convert");
|
|
@@ -21,6 +21,10 @@ const operators_1 = require("./components/ReportBuilder/operators");
|
|
|
21
21
|
const crypto_1 = require("./utils/crypto");
|
|
22
22
|
const constants_1 = require("./components/ReportBuilder/constants");
|
|
23
23
|
const AddColumnPopover_1 = __importDefault(require("./components/ReportBuilder/AddColumnPopover"));
|
|
24
|
+
const AddSortPopover_1 = require("./components/ReportBuilder/AddSortPopover");
|
|
25
|
+
const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
|
|
26
|
+
const PivotList_1 = require("./internals/ReportBuilder/PivotList");
|
|
27
|
+
const QuillTable_1 = __importDefault(require("./components/QuillTable"));
|
|
24
28
|
/**
|
|
25
29
|
* Quill Report Builder
|
|
26
30
|
*
|
|
@@ -29,7 +33,7 @@ const AddColumnPopover_1 = __importDefault(require("./components/ReportBuilder/A
|
|
|
29
33
|
* they can click a button and add that report to their dashboard or export it
|
|
30
34
|
* as a CSV.
|
|
31
35
|
*/
|
|
32
|
-
function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () => void null, destinationDashboard = undefined, organizationName = '', Button =
|
|
36
|
+
function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () => void null, destinationDashboard = undefined, organizationName = '', Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, TextInput = ui_1.QuillTextInput, Select = ui_1.QuillSelect, Table = QuillTable_1.default, Popover = ui_1.QuillPopover, Tabs = ui_1.QuillTabs, Checkbox = UiComponents_1.MemoizedCheckbox, Sidebar = ui_1.QuillSidebar, Container = ui_1.CustomContainer, HandleButton = ui_1.QuillHandleButton, SelectColumn = ui_1.QuillSelectColumn, DraggableColumn = ui_1.QuillDraggableColumn, ButtonLoadingState = ui_1.QuillButtonLoadingState, TableLoadingState = ui_1.QuillTableLoadingState, SidebarHeading = ui_1.QuillSidebarHeading, SidebarSubHeading = ui_1.QuillSidebarSubHeading, FilterPopover = ui_1.QuillFilterPopover, SortPopover = ui_1.QuillSortPopover, Label = UiComponents_1.MemoizedLabel, Header = UiComponents_1.MemoizedHeader, Text = UiComponents_1.MemoizedText, PivotPopover = UiComponents_1.MemoizedPopover, admin = false, hideAi = false, }) {
|
|
33
37
|
const [aiPrompt, setAiPrompt] = (0, react_1.useState)('');
|
|
34
38
|
const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
|
|
35
39
|
const [baseAst, setBaseAst] = (0, react_1.useState)(null);
|
|
@@ -52,6 +56,18 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
52
56
|
const [uniqueValues, setUniqueValues] = (0, react_1.useState)({});
|
|
53
57
|
const [pivot, setPivot] = (0, react_1.useState)(null);
|
|
54
58
|
const [pivotData, setPivotData] = (0, react_1.useState)(null);
|
|
59
|
+
const [createdPivots, setCreatedPivots] = (0, react_1.useState)([]);
|
|
60
|
+
const [recommendedPivots, setRecommendedPivots] = (0, react_1.useState)([]);
|
|
61
|
+
const [pivotPopUpTitle, setPivotPopUpTitle] = (0, react_1.useState)('Add Pivot');
|
|
62
|
+
const [showPivotPopover, setShowPivotPopover] = (0, react_1.useState)(false);
|
|
63
|
+
const [isEdittingPivot, setIsEdittingPivot] = (0, react_1.useState)(false);
|
|
64
|
+
const [selectedPivotIndex, setSelectedPivotIndex] = (0, react_1.useState)(-1);
|
|
65
|
+
const parentRef = (0, react_1.useRef)(null);
|
|
66
|
+
const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
|
|
67
|
+
const [pivotRowField, setPivotRowField] = (0, react_1.useState)(undefined);
|
|
68
|
+
const [pivotColumnField, setPivotColumnField] = (0, react_1.useState)(undefined);
|
|
69
|
+
const [pivotValueField, setPivotValueField] = (0, react_1.useState)(undefined);
|
|
70
|
+
const [pivotAggregation, setPivotAggregation] = (0, react_1.useState)(undefined);
|
|
55
71
|
// eslint-disable-next-line no-unused-vars
|
|
56
72
|
const [client, _setClient] = (0, react_1.useContext)(Context_1.ClientContext);
|
|
57
73
|
const enforceOrderOnColumns = (columnNames) => {
|
|
@@ -1130,7 +1146,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
1130
1146
|
]) }, `input_${index}`));
|
|
1131
1147
|
}
|
|
1132
1148
|
return renderNode(elem, keyPrefix + `value.${index}.`);
|
|
1133
|
-
}), len > 1 && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => handleDeleteVariant(keyPrefix + 'value')
|
|
1149
|
+
}), len > 1 && ((0, jsx_runtime_1.jsx)(SecondaryButton, { label: '-', onClick: () => handleDeleteVariant(keyPrefix + 'value') })), (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => handleInsertVariant(keyPrefix + 'value'), label: '+' })] }, keyPrefix));
|
|
1134
1150
|
}
|
|
1135
1151
|
case 'double_quote_string':
|
|
1136
1152
|
case 'single_quote_string':
|
|
@@ -1396,7 +1412,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
1396
1412
|
flexDirection: 'row',
|
|
1397
1413
|
gap: 8,
|
|
1398
1414
|
justifyContent: 'end',
|
|
1399
|
-
}, children: (0, jsx_runtime_1.jsx)(Button, {
|
|
1415
|
+
}, children: (0, jsx_runtime_1.jsx)(Button, { onClick: onSave, label: 'Add condition' }) })] }));
|
|
1400
1416
|
};
|
|
1401
1417
|
const fetchUponChange = async () => {
|
|
1402
1418
|
if ((formData || baseAst) && !loading) {
|
|
@@ -1425,7 +1441,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
1425
1441
|
return acc;
|
|
1426
1442
|
}, {});
|
|
1427
1443
|
uniqueFormatted[pivot.columnField] = uniqueRecords;
|
|
1428
|
-
const pivotedData = (0,
|
|
1444
|
+
const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, data2.rows, [null, null, null], false);
|
|
1429
1445
|
console.info(`%c[Pivot]: ${JSON.stringify(pivot)}`, 'color: dimgray');
|
|
1430
1446
|
setPivotData(pivotedData);
|
|
1431
1447
|
}
|
|
@@ -1440,6 +1456,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
1440
1456
|
else {
|
|
1441
1457
|
setRows([]);
|
|
1442
1458
|
setFields([]);
|
|
1459
|
+
setPivotData(null);
|
|
1443
1460
|
}
|
|
1444
1461
|
}
|
|
1445
1462
|
catch (e) {
|
|
@@ -1619,7 +1636,12 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
1619
1636
|
}
|
|
1620
1637
|
return `${table}.${column.expr.value}`;
|
|
1621
1638
|
}));
|
|
1622
|
-
|
|
1639
|
+
if (groupByPivot) {
|
|
1640
|
+
setBaseAst((0, util_1.deepCopy)({ ...newAst, orderby: null }));
|
|
1641
|
+
}
|
|
1642
|
+
else {
|
|
1643
|
+
setBaseAst((0, util_1.deepCopy)({ ...newAst }));
|
|
1644
|
+
}
|
|
1623
1645
|
setFormData((0, util_1.deepCopy)(newAst.where));
|
|
1624
1646
|
setTopLevelBinaryOperator(
|
|
1625
1647
|
// @ts-ignore
|
|
@@ -1643,7 +1665,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
1643
1665
|
const tables = (0, ast_1.getTableNames)(newAst);
|
|
1644
1666
|
const table = tables.length >= 1 ? tables[0] : initialTableName;
|
|
1645
1667
|
if (groupByPivot) {
|
|
1646
|
-
const pivotedData = (0,
|
|
1668
|
+
const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, data2.rows, [null, null, null], false);
|
|
1647
1669
|
console.info(`%c[Pivot]: ${JSON.stringify(groupByPivot)}`, 'color: dimgray');
|
|
1648
1670
|
setPivotData(pivotedData);
|
|
1649
1671
|
}
|
|
@@ -1783,11 +1805,11 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
1783
1805
|
value: column.name,
|
|
1784
1806
|
}));
|
|
1785
1807
|
if (loading) {
|
|
1786
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', height: '100%' }, children: [(0, jsx_runtime_1.jsxs)(Sidebar, { children: [(0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Columns" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), (0, jsx_runtime_1.jsx)(DraggableColumns, {}), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddColumnPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
|
|
1808
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', height: '100%' }, ref: parentRef, children: [(0, jsx_runtime_1.jsxs)(Sidebar, { children: [(0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Columns" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), (0, jsx_runtime_1.jsx)(DraggableColumns, {}), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddColumnPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
|
|
1787
1809
|
if (!openPopover) {
|
|
1788
1810
|
setOpenPopover('AddColumnPopover');
|
|
1789
1811
|
}
|
|
1790
|
-
},
|
|
1812
|
+
}, label: 'Select columns' }), title: "Select columns", onClose: () => {
|
|
1791
1813
|
setIsPending(false);
|
|
1792
1814
|
setActiveEditItem(null);
|
|
1793
1815
|
setActivePath(null);
|
|
@@ -1825,7 +1847,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
1825
1847
|
setActivePath('');
|
|
1826
1848
|
setIsPending(true);
|
|
1827
1849
|
}
|
|
1828
|
-
},
|
|
1850
|
+
}, label: 'Add filter' }), onClose: () => {
|
|
1829
1851
|
setIsPending(false);
|
|
1830
1852
|
setActivePath(null);
|
|
1831
1853
|
setOpenPopover(null);
|
|
@@ -1862,7 +1884,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
1862
1884
|
setActivePath('');
|
|
1863
1885
|
setIsPending(true);
|
|
1864
1886
|
}
|
|
1865
|
-
},
|
|
1887
|
+
}, label: 'Add condition' }), onClose: () => {
|
|
1866
1888
|
setIsPending(false);
|
|
1867
1889
|
setTimeout(() => {
|
|
1868
1890
|
setActiveEditItem(null);
|
|
@@ -1890,35 +1912,96 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
1890
1912
|
setOpenPopover(null);
|
|
1891
1913
|
clearCheckboxes();
|
|
1892
1914
|
}
|
|
1893
|
-
} }) }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Pivot" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }),
|
|
1915
|
+
} }) }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Pivot" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), (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, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: Select, ButtonComponent: Button, PopoverComponent: PivotPopover, TextComponent: Text, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
|
|
1916
|
+
setPivot(null);
|
|
1917
|
+
setPivotData(null);
|
|
1918
|
+
}, selectPivot: (pivot) => {
|
|
1919
|
+
if (!pivot)
|
|
1920
|
+
return;
|
|
1921
|
+
const newAst = { ...baseAst };
|
|
1922
|
+
newAst.orderby = null;
|
|
1923
|
+
setBaseAst(newAst); // trigger refetch
|
|
1924
|
+
setPivot(pivot);
|
|
1925
|
+
}, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: Label, HeaderComponent: Header, dateRange: [null, null, null], recommendPivotCount: 3 }), pivot && ((0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
|
|
1926
|
+
pivot: pivot,
|
|
1927
|
+
rows: pivotData?.rows || [],
|
|
1928
|
+
columns: pivotData?.columns || [],
|
|
1929
|
+
}, theme: theme, index: 0, onSelectPivot: () => {
|
|
1930
|
+
setIsEdittingPivot(true);
|
|
1931
|
+
setShowPivotPopover(true);
|
|
1932
|
+
setPivotRowField(pivot?.rowField);
|
|
1933
|
+
setPivotColumnField(pivot?.columnField);
|
|
1934
|
+
setPivotValueField(pivot?.valueField);
|
|
1935
|
+
setPivotAggregation(pivot?.aggregationType);
|
|
1936
|
+
setPivotPopUpTitle('Edit Pivot');
|
|
1937
|
+
}, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: Button, HeaderComponent: Header, showEdit: false, onClose: () => {
|
|
1938
|
+
setPivot(null);
|
|
1939
|
+
setPivotData(null);
|
|
1940
|
+
setBaseAst((0, util_1.deepCopy)(baseAst)); // trigger refetch
|
|
1941
|
+
}, minHeight: 180, LabelComponent: Label, TextComponent: Text })), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Sort" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), pivot && pivot.sort && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
1894
1942
|
display: 'flex',
|
|
1895
1943
|
flexDirection: 'column',
|
|
1896
|
-
gap:
|
|
1944
|
+
gap: 8,
|
|
1897
1945
|
marginBottom: 12,
|
|
1898
|
-
}, children:
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1946
|
+
}, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortData: {
|
|
1947
|
+
type: pivot.sortDirection,
|
|
1948
|
+
expr: { type: 'column_ref', column: pivot.rowField },
|
|
1949
|
+
}, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setOpenPopover: setOpenPopover, SortPopover: SortPopover, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
|
|
1950
|
+
setPivot({ ...pivot, sort: false });
|
|
1951
|
+
setBaseAst((0, util_1.deepCopy)(baseAst));
|
|
1952
|
+
}, onSave: (column, direction) => {
|
|
1953
|
+
setPivot({ ...pivot, sort: true, sortDirection: direction });
|
|
1954
|
+
setOpenPopover(null);
|
|
1955
|
+
setBaseAst((0, util_1.deepCopy)(baseAst));
|
|
1956
|
+
} }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
1957
|
+
display: 'flex',
|
|
1958
|
+
flexDirection: 'column',
|
|
1959
|
+
gap: 8,
|
|
1960
|
+
marginBottom: 12,
|
|
1961
|
+
}, children: baseAst.orderby.map((sortData, id) => ((0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortData: sortData, columns: selectedColumns, onSave: (column, direction) => {
|
|
1962
|
+
setIsPending(false);
|
|
1963
|
+
setActiveEditItem(null);
|
|
1964
|
+
setOpenPopover(null);
|
|
1965
|
+
if (column === '')
|
|
1966
|
+
return;
|
|
1967
|
+
const newAst = { ...baseAst };
|
|
1968
|
+
newAst.orderby[id] = {
|
|
1969
|
+
expr: {
|
|
1970
|
+
type: 'column_ref',
|
|
1971
|
+
table: null,
|
|
1972
|
+
column: column,
|
|
1973
|
+
},
|
|
1974
|
+
type: direction,
|
|
1975
|
+
};
|
|
1976
|
+
// look through the columns
|
|
1977
|
+
setActivePath(null);
|
|
1978
|
+
setOpenPopover(null);
|
|
1979
|
+
setBaseAst((0, util_1.deepCopy)(newAst));
|
|
1980
|
+
}, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setOpenPopover: setOpenPopover, SortPopover: SortPopover, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
|
|
1981
|
+
const newAst = { ...baseAst };
|
|
1982
|
+
newAst.orderby.splice(id, 1);
|
|
1983
|
+
setBaseAst((0, util_1.deepCopy)(newAst));
|
|
1984
|
+
} }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddSortPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
|
|
1985
|
+
if (!openPopover) {
|
|
1986
|
+
setOpenPopover('AddSortPopover');
|
|
1987
|
+
}
|
|
1988
|
+
}, label: 'Add sort' }), title: "Sort By", onClose: () => {
|
|
1989
|
+
setIsPending(false);
|
|
1990
|
+
setActiveEditItem(null);
|
|
1991
|
+
setActivePath(null);
|
|
1992
|
+
setOpenPopover(null);
|
|
1993
|
+
}, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.AddSortPopover, { columns: selectedColumns, Select: Select, Button: Button, onSave: () => { } }) })] }), (0, jsx_runtime_1.jsxs)(Container, { children: [(0, jsx_runtime_1.jsxs)("form", { style: {
|
|
1911
1994
|
display: 'flex',
|
|
1912
1995
|
flexDirection: 'row',
|
|
1913
1996
|
gap: 12,
|
|
1914
1997
|
padding: 1,
|
|
1915
|
-
}, children: [(0, jsx_runtime_1.jsx)(TextInput, { placeholder: "Ask a question...", type: "text", style: { width: '100%', fontSize: 14 }, value: aiPrompt }), (0, jsx_runtime_1.jsx)(ButtonLoadingState, {}), baseAst && ((0, jsx_runtime_1.jsx)(SecondaryButton, {
|
|
1998
|
+
}, children: [(0, jsx_runtime_1.jsx)(TextInput, { placeholder: "Ask a question...", type: "text", style: { width: '100%', fontSize: 14 }, value: aiPrompt }), (0, jsx_runtime_1.jsx)(ButtonLoadingState, {}), baseAst && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: clearAllState, label: "New report" }))] }), baseAst && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableLoadingState, {}), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
1916
1999
|
display: 'flex',
|
|
1917
2000
|
flexDirection: 'row',
|
|
1918
2001
|
gap: '12px',
|
|
1919
|
-
}, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } }), (0, jsx_runtime_1.jsx)(SecondaryButton, {
|
|
2002
|
+
}, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } }), (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => copyToClipboard(activeQuery), label: isCopying ? '✅ Copied' : 'Copy SQL' }), (0, jsx_runtime_1.jsx)(Button, { label: 'Add to dashboard', onClick: () => { } })] })] }))] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` })] }));
|
|
1920
2003
|
}
|
|
1921
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
2004
|
+
return ((0, jsx_runtime_1.jsxs)("div", { ref: parentRef, style: {
|
|
1922
2005
|
display: 'flex',
|
|
1923
2006
|
flexDirection: 'row',
|
|
1924
2007
|
height: '100%',
|
|
@@ -1927,7 +2010,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
1927
2010
|
if (!openPopover) {
|
|
1928
2011
|
setOpenPopover('AddColumnPopover');
|
|
1929
2012
|
}
|
|
1930
|
-
},
|
|
2013
|
+
}, label: 'Select columns' }), onClose: () => {
|
|
1931
2014
|
// delay onClose callback so onClick no-ops
|
|
1932
2015
|
setTimeout(() => {
|
|
1933
2016
|
setIsPending(false);
|
|
@@ -1949,7 +2032,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
1949
2032
|
flexDirection: 'column',
|
|
1950
2033
|
gap: 2.5,
|
|
1951
2034
|
alignItems: 'flex-start',
|
|
1952
|
-
}, children: [(0, jsx_runtime_1.jsx)(Popover, { title: 'Add filter', isOpen: openPopover === 'AddFilterPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: (
|
|
2035
|
+
}, children: [(0, jsx_runtime_1.jsx)(Popover, { title: 'Add filter', isOpen: openPopover === 'AddFilterPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
|
|
1953
2036
|
if (!openPopover) {
|
|
1954
2037
|
const value = orderedColumnNames[0];
|
|
1955
2038
|
const [_table, column] = value.split('.');
|
|
@@ -1968,7 +2051,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
1968
2051
|
setActivePath('');
|
|
1969
2052
|
setIsPending(true);
|
|
1970
2053
|
}
|
|
1971
|
-
},
|
|
2054
|
+
}, label: 'Add filter' }), onClose: () => {
|
|
1972
2055
|
// delay onClose callback so onClick no-ops
|
|
1973
2056
|
setTimeout(() => {
|
|
1974
2057
|
setIsPending(false);
|
|
@@ -2006,7 +2089,7 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
2006
2089
|
setActivePath('');
|
|
2007
2090
|
setIsPending(true);
|
|
2008
2091
|
}
|
|
2009
|
-
},
|
|
2092
|
+
}, label: 'Add condition' }), onClose: () => {
|
|
2010
2093
|
// delay onClose callback so onClick no-ops
|
|
2011
2094
|
setTimeout(() => {
|
|
2012
2095
|
setIsPending(false);
|
|
@@ -2035,87 +2118,129 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
2035
2118
|
setOpenPopover(null);
|
|
2036
2119
|
clearCheckboxes();
|
|
2037
2120
|
}
|
|
2038
|
-
} }) }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Pivot" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }),
|
|
2121
|
+
} }) }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Pivot" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), (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, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: Select, ButtonComponent: Button, PopoverComponent: PivotPopover, TextComponent: Text, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
|
|
2122
|
+
setPivot(null);
|
|
2123
|
+
setPivotData(null);
|
|
2124
|
+
}, selectPivot: (pivot) => {
|
|
2125
|
+
if (!pivot)
|
|
2126
|
+
return;
|
|
2127
|
+
const newAst = { ...baseAst };
|
|
2128
|
+
newAst.orderby = null;
|
|
2129
|
+
setBaseAst(newAst); // trigger refetch
|
|
2130
|
+
setPivot(pivot);
|
|
2131
|
+
}, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: Label, HeaderComponent: Header, dateRange: [null, null, null], recommendPivotCount: 3 }), pivot && ((0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
|
|
2132
|
+
pivot: pivot,
|
|
2133
|
+
rows: pivotData?.rows || [],
|
|
2134
|
+
columns: pivotData?.columns || [],
|
|
2135
|
+
}, theme: theme, index: 0, onSelectPivot: () => {
|
|
2136
|
+
setIsEdittingPivot(true);
|
|
2137
|
+
setShowPivotPopover(true);
|
|
2138
|
+
setPivotRowField(pivot?.rowField);
|
|
2139
|
+
setPivotColumnField(pivot?.columnField);
|
|
2140
|
+
setPivotValueField(pivot?.valueField);
|
|
2141
|
+
setPivotAggregation(pivot?.aggregationType);
|
|
2142
|
+
setPivotPopUpTitle('Edit Pivot');
|
|
2143
|
+
}, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: Button, HeaderComponent: Header, showEdit: false, onClose: () => {
|
|
2144
|
+
setPivot(null);
|
|
2145
|
+
setPivotData(null);
|
|
2146
|
+
setBaseAst((0, util_1.deepCopy)(baseAst)); // trigger refetch
|
|
2147
|
+
}, minHeight: 180, LabelComponent: Label, TextComponent: Text })), (0, jsx_runtime_1.jsx)("div", { style: { height: 28, width: '100%' } }), (0, jsx_runtime_1.jsx)(SidebarHeading, { label: "Sort" }), (0, jsx_runtime_1.jsx)("div", { style: { height: 4, width: '100%' } }), pivot && pivot.sort && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
2039
2148
|
display: 'flex',
|
|
2040
2149
|
flexDirection: 'column',
|
|
2041
|
-
gap:
|
|
2150
|
+
gap: 8,
|
|
2042
2151
|
marginBottom: 12,
|
|
2043
|
-
}, children:
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
{ label: 'avg', value: 'avg' },
|
|
2049
|
-
{ label: 'min', value: 'min' },
|
|
2050
|
-
{ label: 'max', value: 'max' },
|
|
2051
|
-
{ label: 'count', value: 'count' },
|
|
2052
|
-
] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SidebarSubHeading, { label: "Value field" }), (0, jsx_runtime_1.jsx)(Select, { value: pivot.valueField, onChange: (value) => {
|
|
2053
|
-
setBaseAst((0, util_1.deepCopy)(baseAst)); // trigger refetch
|
|
2054
|
-
setPivot({ ...pivot, valueField: value });
|
|
2055
|
-
}, options: [{ label: 'Select', value: '' }, ...allNumericColumns] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SidebarSubHeading, { label: "Group rows by" }), (0, jsx_runtime_1.jsx)(Select, { value: pivot.rowField ?? '', onChange: (value) => {
|
|
2056
|
-
setBaseAst((0, util_1.deepCopy)(baseAst)); // trigger refetch
|
|
2057
|
-
setPivot({
|
|
2058
|
-
...pivot,
|
|
2059
|
-
rowField: value === '' ? undefined : value,
|
|
2060
|
-
});
|
|
2061
|
-
}, options: [
|
|
2062
|
-
{ label: 'Select', value: '' },
|
|
2063
|
-
...allNonNumericColumns,
|
|
2064
|
-
] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SidebarSubHeading, { label: "Group columns by" }), (0, jsx_runtime_1.jsx)(Select, { value: pivot.columnField ?? '', onChange: (value) => {
|
|
2065
|
-
setBaseAst((0, util_1.deepCopy)(baseAst)); // trigger refetch
|
|
2066
|
-
setPivot({
|
|
2067
|
-
...pivot,
|
|
2068
|
-
columnField: value === '' ? undefined : value,
|
|
2069
|
-
});
|
|
2070
|
-
}, options: [
|
|
2071
|
-
{ label: 'Select', value: '' },
|
|
2072
|
-
...allStringColumns,
|
|
2073
|
-
].filter((option) => option.value !== pivot.rowField) })] })] })), (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
|
|
2074
|
-
if (pivot) {
|
|
2152
|
+
}, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortData: {
|
|
2153
|
+
type: pivot.sortDirection,
|
|
2154
|
+
expr: { type: 'column_ref', column: pivot.rowField },
|
|
2155
|
+
}, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setOpenPopover: setOpenPopover, SortPopover: SortPopover, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
|
|
2156
|
+
setPivot({ ...pivot, sort: false });
|
|
2075
2157
|
setBaseAst((0, util_1.deepCopy)(baseAst));
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2158
|
+
}, onSave: (column, direction) => {
|
|
2159
|
+
setPivot({ ...pivot, sort: true, sortDirection: direction });
|
|
2160
|
+
setOpenPopover(null);
|
|
2161
|
+
setBaseAst((0, util_1.deepCopy)(baseAst));
|
|
2162
|
+
} }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
2163
|
+
display: 'flex',
|
|
2164
|
+
flexDirection: 'column',
|
|
2165
|
+
gap: 8,
|
|
2166
|
+
marginBottom: 12,
|
|
2167
|
+
}, children: baseAst.orderby.map((sortData, id) => ((0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortData: sortData, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setOpenPopover: setOpenPopover, SortPopover: SortPopover, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
|
|
2168
|
+
if (pivot) {
|
|
2169
|
+
setPivot({ ...pivot, sort: false });
|
|
2082
2170
|
return;
|
|
2083
2171
|
}
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
}),
|
|
2094
|
-
from: [{ ...constants_1.defaultTable, table: initialTableName }],
|
|
2095
|
-
where: null,
|
|
2172
|
+
const newAst = { ...baseAst };
|
|
2173
|
+
newAst.orderby.splice(id, 1);
|
|
2174
|
+
setBaseAst((0, util_1.deepCopy)(newAst));
|
|
2175
|
+
}, onSave: (column, direction) => {
|
|
2176
|
+
if (pivot) {
|
|
2177
|
+
setPivot({
|
|
2178
|
+
...pivot,
|
|
2179
|
+
sort: true,
|
|
2180
|
+
sortDirection: direction,
|
|
2096
2181
|
});
|
|
2097
|
-
|
|
2098
|
-
setBaseAst(ast);
|
|
2182
|
+
return;
|
|
2099
2183
|
}
|
|
2100
|
-
|
|
2184
|
+
setIsPending(false);
|
|
2185
|
+
setActiveEditItem(null);
|
|
2186
|
+
setOpenPopover(null);
|
|
2187
|
+
if (column === '')
|
|
2188
|
+
return;
|
|
2189
|
+
const newAst = { ...baseAst };
|
|
2190
|
+
newAst.orderby[id] = {
|
|
2191
|
+
expr: {
|
|
2192
|
+
type: 'column_ref',
|
|
2193
|
+
table: null,
|
|
2194
|
+
column: column,
|
|
2195
|
+
},
|
|
2196
|
+
type: direction,
|
|
2197
|
+
};
|
|
2198
|
+
// look through the columns
|
|
2199
|
+
setActivePath(null);
|
|
2200
|
+
setOpenPopover(null);
|
|
2201
|
+
setBaseAst((0, util_1.deepCopy)(newAst));
|
|
2202
|
+
} }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(Popover, { isOpen: openPopover === 'AddSortPopover', trigger: (0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => {
|
|
2203
|
+
if (!openPopover) {
|
|
2204
|
+
setOpenPopover('AddSortPopover');
|
|
2205
|
+
}
|
|
2206
|
+
}, label: 'Add sort' }), title: "Sort by", onClose: () => {
|
|
2207
|
+
setIsPending(false);
|
|
2208
|
+
setActiveEditItem(null);
|
|
2209
|
+
setActivePath(null);
|
|
2210
|
+
setOpenPopover(null);
|
|
2211
|
+
}, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.AddSortPopover, { columns: pivot ? [`.${pivot.rowField}`] : selectedColumns, Select: Select, Button: Button, onSave: (column, direction) => {
|
|
2212
|
+
if (column === '')
|
|
2213
|
+
return;
|
|
2214
|
+
if (pivot) {
|
|
2215
|
+
setPivot({ ...pivot, sort: true, sortDirection: direction });
|
|
2216
|
+
setActivePath(null);
|
|
2217
|
+
setOpenPopover(null);
|
|
2101
2218
|
setBaseAst((0, util_1.deepCopy)(baseAst));
|
|
2219
|
+
return;
|
|
2102
2220
|
}
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2221
|
+
const newAst = { ...baseAst };
|
|
2222
|
+
if (!newAst.orderby)
|
|
2223
|
+
newAst.orderby = [];
|
|
2224
|
+
newAst.orderby.push({
|
|
2225
|
+
expr: { type: 'column_ref', column },
|
|
2226
|
+
type: direction,
|
|
2108
2227
|
});
|
|
2109
|
-
|
|
2110
|
-
|
|
2228
|
+
// look through the columns
|
|
2229
|
+
setActivePath(null);
|
|
2230
|
+
setOpenPopover(null);
|
|
2231
|
+
setBaseAst((0, util_1.deepCopy)(newAst));
|
|
2232
|
+
} }) })] }), (0, jsx_runtime_1.jsxs)(Container, { children: [!hideAi && ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleAsk, style: {
|
|
2111
2233
|
display: 'flex',
|
|
2112
2234
|
flexDirection: 'row',
|
|
2113
2235
|
gap: 12,
|
|
2114
2236
|
padding: 1,
|
|
2115
|
-
}, children: [(0, jsx_runtime_1.jsx)(TextInput, { type: "text", value: aiPrompt, style: { width: '100%', fontSize: 14 }, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...' }), (0, jsx_runtime_1.jsx)(Button, {
|
|
2237
|
+
}, children: [(0, jsx_runtime_1.jsx)(TextInput, { type: "text", value: aiPrompt, style: { width: '100%', fontSize: 14 }, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...' }), (0, jsx_runtime_1.jsx)(Button, { onClick: handleAsk, label: 'Ask AI' }), baseAst && ((0, jsx_runtime_1.jsx)(SecondaryButton, { label: 'New report', onClick: clearAllState }))] })), baseAst && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [loading && errorMessage.length === 0 ? ((0, jsx_runtime_1.jsx)(TableLoadingState, {})) : ((0, jsx_runtime_1.jsx)(Table, { rows: applyFormatting({
|
|
2116
2238
|
rows: pivotData?.rows || rows,
|
|
2117
2239
|
fields: pivotData?.fields || fields,
|
|
2118
|
-
}, baseAst?.columns ?? []), columns:
|
|
2240
|
+
}, baseAst?.columns ?? []), columns: pivotData?.columns ||
|
|
2241
|
+
enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
|
|
2242
|
+
return { label: c, field: c };
|
|
2243
|
+
}), error: errorMessage, rowsPerPage: 20 })), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
2119
2244
|
display: 'flex',
|
|
2120
2245
|
flexDirection: 'row',
|
|
2121
2246
|
gap: '12px',
|
|
@@ -2124,8 +2249,8 @@ function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () =>
|
|
|
2124
2249
|
fontSize: 14,
|
|
2125
2250
|
padding: '12px',
|
|
2126
2251
|
whiteSpace: 'nowrap',
|
|
2127
|
-
}, children: errorMessage })), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } }), (0, jsx_runtime_1.jsx)(SecondaryButton, {
|
|
2252
|
+
}, children: errorMessage })), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } }), (0, jsx_runtime_1.jsx)(SecondaryButton, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), (0, jsx_runtime_1.jsx)(Button, { onClick: () => {
|
|
2128
2253
|
setIsChartBuilderOpen(true);
|
|
2129
|
-
},
|
|
2254
|
+
}, label: 'Add to dashboard' })] })] }))] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { rows: applyFormatting({ rows, fields }, baseAst?.columns ?? []), columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: admin ? true : false, showDateFieldOptions: admin ? true : false, showAccessControlOptions: admin ? true : false, title: "Add to dashboard", isEditMode: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, destinationDashboard: destinationDashboard, organizationName: organizationName })] }));
|
|
2130
2255
|
}
|
|
2131
2256
|
exports.default = ReportBuilder;
|
package/dist/cjs/SQLEditor.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { TableComponentProps } from './components/UiComponents';
|
|
2
|
+
import { ModalComponentProps, TableComponentProps } from './components/UiComponents';
|
|
3
3
|
export declare function convertPostgresColumn(column: any): {
|
|
4
4
|
label: any;
|
|
5
5
|
field: any;
|
|
@@ -17,6 +17,7 @@ interface SQLEditorProps {
|
|
|
17
17
|
TextInputComponent?: (props: TextInputComponentProps) => JSX.Element;
|
|
18
18
|
TableComponent?: (props: TableComponentProps) => JSX.Element;
|
|
19
19
|
LoadingComponent?: () => JSX.Element;
|
|
20
|
+
ModalComponent?: (_props: ModalComponentProps) => JSX.Element;
|
|
20
21
|
onChangeQuery?: (query: string) => void;
|
|
21
22
|
onChangeData?: (data: object[]) => void;
|
|
22
23
|
onChangeColumns?: (columns: object[]) => void;
|
|
@@ -35,6 +36,7 @@ interface SQLEditorProps {
|
|
|
35
36
|
addToDashboardButtonLabel?: string;
|
|
36
37
|
onAddToDashboardComplete?: () => void;
|
|
37
38
|
organizationName?: string;
|
|
39
|
+
chartBuilderHorizontalView?: boolean;
|
|
38
40
|
}
|
|
39
41
|
interface TextInputComponentProps {
|
|
40
42
|
onChange: (e: any) => void;
|
|
@@ -42,7 +44,7 @@ interface TextInputComponentProps {
|
|
|
42
44
|
id: string;
|
|
43
45
|
placeholder?: string;
|
|
44
46
|
}
|
|
45
|
-
export default function QueryEditor({ containerStyle, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, newQueryEnabled, LoadingComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode, chartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, dashboardItem, organizationName, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
|
|
47
|
+
export default function QueryEditor({ containerStyle, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, newQueryEnabled, LoadingComponent, ModalComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode, chartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, dashboardItem, organizationName, chartBuilderHorizontalView, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
|
|
46
48
|
export declare const SchemaListComponent: ({ schema, theme, loading, LoadingComponent, width, }: {
|
|
47
49
|
schema: any;
|
|
48
50
|
theme: any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAQxE,OAAO,
|
|
1
|
+
{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAQxE,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,2BAA2B,CAAC;AAGnC,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;AA2BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;AAQD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAkFD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAe,EACf,wBAAwB,EACxB,kBAAkB,EAClB,cAA2B,EAC3B,eAAuB,EACvB,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAkB,EAClB,mBAA2B,EAC3B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,EACzB,gBAA4B,EAC5B,0BAAkC,GACnC,EAAE,cAAc,2CA2VhB;AA8LD,eAAO,MAAM,mBAAmB;;;;;;6CAqG/B,CAAC"}
|