@quillsql/admin 1.3.1 → 1.3.2
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 → dist}/Admin.d.ts +12 -7
- package/dist/Admin.d.ts.map +1 -0
- package/dist/Admin.js +1384 -0
- package/{lib → dist}/AdminProvider.d.ts +41 -27
- package/dist/AdminProvider.d.ts.map +1 -0
- package/{lib → dist}/AdminProvider.js +105 -89
- package/dist/api/ConnectionClient.d.ts +27 -0
- package/dist/api/ConnectionClient.d.ts.map +1 -0
- package/dist/api/ConnectionClient.js +247 -0
- package/dist/components/Banner/index.d.ts +3 -0
- package/dist/components/Banner/index.d.ts.map +1 -0
- package/dist/components/Banner/index.js +27 -0
- package/dist/components/CardSection.d.ts +3 -0
- package/dist/components/CardSection.d.ts.map +1 -0
- package/dist/components/CardSection.js +9 -0
- package/dist/components/CardTitle.d.ts +3 -0
- package/dist/components/CardTitle.d.ts.map +1 -0
- package/dist/components/CardTitle.js +11 -0
- package/dist/components/DashboardSelectPopover.d.ts +11 -0
- package/dist/components/DashboardSelectPopover.d.ts.map +1 -0
- package/dist/components/DashboardSelectPopover.js +175 -0
- package/dist/components/DatabaseSelector.d.ts +11 -0
- package/dist/components/DatabaseSelector.d.ts.map +1 -0
- package/dist/components/DatabaseSelector.js +22 -0
- package/dist/components/DeleteButton.d.ts +3 -0
- package/dist/components/DeleteButton.d.ts.map +1 -0
- package/dist/components/DeleteButton.js +10 -0
- package/{lib → dist}/components/DropDownMenu.d.ts +1 -0
- package/dist/components/DropDownMenu.d.ts.map +1 -0
- package/dist/components/DropDownMenu.js +39 -0
- package/dist/components/DropDownMenuWithLabel.d.ts +12 -0
- package/dist/components/DropDownMenuWithLabel.d.ts.map +1 -0
- package/dist/components/DropDownMenuWithLabel.js +47 -0
- package/{lib → dist}/components/EnvSelectPopover.d.ts +1 -0
- package/dist/components/EnvSelectPopover.d.ts.map +1 -0
- package/dist/components/EnvSelectPopover.js +205 -0
- package/dist/components/InputLabel.d.ts +3 -0
- package/dist/components/InputLabel.d.ts.map +1 -0
- package/dist/components/InputLabel.js +10 -0
- package/{lib → dist}/components/OrgSelect.d.ts +1 -0
- package/dist/components/OrgSelect.d.ts.map +1 -0
- package/dist/components/OrgSelect.js +193 -0
- package/dist/components/SqlViewTile.d.ts +8 -0
- package/dist/components/SqlViewTile.d.ts.map +1 -0
- package/dist/components/SqlViewTile.js +40 -0
- package/dist/components/StepDisplay.d.ts +10 -0
- package/dist/components/StepDisplay.d.ts.map +1 -0
- package/dist/components/StepDisplay.js +15 -0
- package/dist/components/index.d.ts +6 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/forms/client_onboard/ConnectDatabase.d.ts +11 -0
- package/dist/forms/client_onboard/ConnectDatabase.d.ts.map +1 -0
- package/dist/forms/client_onboard/ConnectDatabase.js +137 -0
- package/dist/forms/client_onboard/ConnectSchema.d.ts +13 -0
- package/dist/forms/client_onboard/ConnectSchema.d.ts.map +1 -0
- package/dist/forms/client_onboard/ConnectSchema.js +171 -0
- package/dist/forms/client_onboard/CreateSqlViews.d.ts +15 -0
- package/dist/forms/client_onboard/CreateSqlViews.d.ts.map +1 -0
- package/dist/forms/client_onboard/CreateSqlViews.js +202 -0
- package/dist/hooks/useItemBeingEdited.d.ts +4 -0
- package/dist/hooks/useItemBeingEdited.d.ts.map +1 -0
- package/dist/hooks/useItemBeingEdited.js +25 -0
- package/{lib → dist}/icons/ArrowDownHeadIcon.d.ts +1 -0
- package/dist/icons/ArrowDownHeadIcon.d.ts.map +1 -0
- package/dist/icons/ArrowDownHeadIcon.js +3 -0
- package/dist/icons/XMarkIcon.d.ts +3 -0
- package/dist/icons/XMarkIcon.d.ts.map +1 -0
- package/dist/icons/XMarkIcon.js +11 -0
- package/dist/icons/index.d.ts +2 -0
- package/dist/icons/index.d.ts.map +1 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.d.ts.map +1 -0
- package/{lib/index.d.ts → dist/index.js} +1 -0
- package/{lib → dist}/modals/EditDashboardsModal.d.ts +1 -0
- package/dist/modals/EditDashboardsModal.d.ts.map +1 -0
- package/dist/modals/EditDashboardsModal.js +91 -0
- package/dist/modals/NewDashboardModal.d.ts +19 -0
- package/dist/modals/NewDashboardModal.d.ts.map +1 -0
- package/dist/modals/NewDashboardModal.js +276 -0
- package/{lib → dist}/modals/PromoteDashModal.d.ts +2 -1
- package/dist/modals/PromoteDashModal.d.ts.map +1 -0
- package/dist/modals/PromoteDashModal.js +123 -0
- package/{lib → dist}/modals/PromoteViewModal.d.ts +1 -0
- package/dist/modals/PromoteViewModal.d.ts.map +1 -0
- package/{lib → dist}/modals/PromoteViewModal.js +13 -16
- package/{lib → dist}/modals/ReorderDashboardModal.d.ts +4 -1
- package/dist/modals/ReorderDashboardModal.d.ts.map +1 -0
- package/{lib → dist}/modals/ReorderDashboardModal.js +53 -55
- package/dist/modals/index.d.ts +5 -0
- package/dist/modals/index.d.ts.map +1 -0
- package/{lib → dist}/primitives/ButtonPrimitive.d.ts +3 -0
- package/dist/primitives/ButtonPrimitive.d.ts.map +1 -0
- package/dist/primitives/ButtonPrimitive.js +47 -0
- package/{lib → dist}/primitives/HeaderPrimitive.d.ts +1 -0
- package/dist/primitives/HeaderPrimitive.d.ts.map +1 -0
- package/dist/primitives/HeaderPrimitive.js +9 -0
- package/{lib → dist}/primitives/ModalPrimitive.d.ts +3 -1
- package/dist/primitives/ModalPrimitive.d.ts.map +1 -0
- package/{lib → dist}/primitives/ModalPrimitive.js +9 -11
- package/{lib → dist}/primitives/SecondaryButtonPrimitive.d.ts +1 -0
- package/dist/primitives/SecondaryButtonPrimitive.d.ts.map +1 -0
- package/{lib → dist}/primitives/SecondaryButtonPrimitive.js +5 -8
- package/{lib → dist}/primitives/SelectPrimitive.d.ts +1 -0
- package/dist/primitives/SelectPrimitive.d.ts.map +1 -0
- package/{lib → dist}/primitives/SelectPrimitive.js +8 -11
- package/{lib → dist}/primitives/TextInputPrimitive.d.ts +2 -0
- package/dist/primitives/TextInputPrimitive.d.ts.map +1 -0
- package/dist/primitives/TextInputPrimitive.js +24 -0
- package/dist/primitives/TogglePrimitive.d.ts +6 -0
- package/dist/primitives/TogglePrimitive.d.ts.map +1 -0
- package/dist/primitives/TogglePrimitive.js +45 -0
- package/dist/primitives/index.d.ts +7 -0
- package/dist/primitives/index.d.ts.map +1 -0
- package/dist/public_components/CreateEnvironment.d.ts +6 -0
- package/dist/public_components/CreateEnvironment.d.ts.map +1 -0
- package/dist/public_components/CreateEnvironment.js +129 -0
- package/{lib → dist}/public_components/DashboardBuilder.d.ts +2 -1
- package/dist/public_components/DashboardBuilder.d.ts.map +1 -0
- package/dist/public_components/DashboardBuilder.js +192 -0
- package/{lib → dist}/public_components/DashboardManager.d.ts +2 -1
- package/dist/public_components/DashboardManager.d.ts.map +1 -0
- package/dist/public_components/DashboardManager.js +308 -0
- package/{lib → dist}/public_components/SQLViewManager.d.ts +2 -1
- package/dist/public_components/SQLViewManager.d.ts.map +1 -0
- package/dist/public_components/SQLViewManager.js +394 -0
- package/dist/utils/constants.d.ts +26 -0
- package/dist/utils/constants.d.ts.map +1 -0
- package/dist/utils/constants.js +13 -0
- package/dist/utils/databases.d.ts +34 -0
- package/dist/utils/databases.d.ts.map +1 -0
- package/dist/utils/databases.js +51 -0
- package/dist/utils/delay.d.ts +2 -0
- package/dist/utils/delay.d.ts.map +1 -0
- package/dist/utils/delay.js +3 -0
- package/dist/utils/schema.d.ts +22 -0
- package/dist/utils/schema.d.ts.map +1 -0
- package/dist/utils/schema.js +1 -0
- package/dist/utils/table.d.ts +9 -0
- package/dist/utils/table.d.ts.map +1 -0
- package/dist/utils/table.js +1 -0
- package/package.json +19 -26
- package/LICENSE +0 -21
- package/README.md +0 -10
- package/lib/Admin.js +0 -1573
- package/lib/Admin.js.map +0 -1
- package/lib/AdminProvider.js.map +0 -1
- package/lib/components/DashboardSelectPopover.d.ts +0 -9
- package/lib/components/DashboardSelectPopover.js +0 -187
- package/lib/components/DashboardSelectPopover.js.map +0 -1
- package/lib/components/DropDownMenu.js +0 -43
- package/lib/components/DropDownMenu.js.map +0 -1
- package/lib/components/EnvSelectPopover.js +0 -190
- package/lib/components/EnvSelectPopover.js.map +0 -1
- package/lib/components/OrgSelect.js +0 -188
- package/lib/components/OrgSelect.js.map +0 -1
- package/lib/components/index.js +0 -17
- package/lib/components/index.js.map +0 -1
- package/lib/icons/ArrowDownHeadIcon.js +0 -6
- package/lib/icons/ArrowDownHeadIcon.js.map +0 -1
- package/lib/icons/index.js +0 -9
- package/lib/icons/index.js.map +0 -1
- package/lib/index.js +0 -17
- package/lib/index.js.map +0 -1
- package/lib/modals/EditDashboardsModal.js +0 -94
- package/lib/modals/EditDashboardsModal.js.map +0 -1
- package/lib/modals/PromoteDashModal.js +0 -126
- package/lib/modals/PromoteDashModal.js.map +0 -1
- package/lib/modals/PromoteViewModal.js.map +0 -1
- package/lib/modals/ReorderDashboardModal.js.map +0 -1
- package/lib/modals/index.js +0 -15
- package/lib/modals/index.js.map +0 -1
- package/lib/primitives/ButtonPrimitive.js +0 -25
- package/lib/primitives/ButtonPrimitive.js.map +0 -1
- package/lib/primitives/HeaderPrimitive.js +0 -12
- package/lib/primitives/HeaderPrimitive.js.map +0 -1
- package/lib/primitives/ModalPrimitive.js.map +0 -1
- package/lib/primitives/SecondaryButtonPrimitive.js.map +0 -1
- package/lib/primitives/SelectPrimitive.js.map +0 -1
- package/lib/primitives/TextInputPrimitive.js +0 -26
- package/lib/primitives/TextInputPrimitive.js.map +0 -1
- package/lib/primitives/index.js +0 -19
- package/lib/primitives/index.js.map +0 -1
- package/lib/public_components/DashboardBuilder.js +0 -166
- package/lib/public_components/DashboardBuilder.js.map +0 -1
- package/lib/public_components/DashboardManager.js +0 -255
- package/lib/public_components/DashboardManager.js.map +0 -1
- package/lib/public_components/SQLViewManager.js +0 -400
- package/lib/public_components/SQLViewManager.js.map +0 -1
- /package/{lib/components/index.d.ts → dist/components/index.js} +0 -0
- /package/{lib/icons/index.d.ts → dist/icons/index.js} +0 -0
- /package/{lib/modals/index.d.ts → dist/modals/index.js} +0 -0
- /package/{lib/primitives/index.d.ts → dist/primitives/index.js} +0 -0
package/lib/Admin.js
DELETED
|
@@ -1,1573 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
-
};
|
|
28
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
exports.ReorderableList = exports.ReportWrapper = exports.formatDateBuckets = exports.isArrayOfValidDates = exports.isValidDate = exports.setEditorTheme = exports.defineEditorTheme = exports.SQLEditorComponent = exports.TableCell = exports.AddDashboardModal = exports.classNames = exports.getPostgresBasicType = exports.convertPostgresColumn = exports.theme = exports.AddFilterModal = exports.EditFiltersModal = void 0;
|
|
30
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
31
|
-
// @ts-nocheck
|
|
32
|
-
const react_1 = require("react");
|
|
33
|
-
const react_2 = require("@quillsql/react");
|
|
34
|
-
const nightOwlLight_1 = __importDefault(require("prism-react-renderer/themes/nightOwlLight"));
|
|
35
|
-
const prism_react_renderer_1 = __importStar(require("prism-react-renderer"));
|
|
36
|
-
const react_3 = __importDefault(require("@monaco-editor/react"));
|
|
37
|
-
const core_1 = require("@dnd-kit/core");
|
|
38
|
-
const sortable_1 = require("@dnd-kit/sortable");
|
|
39
|
-
const utilities_1 = require("@dnd-kit/utilities");
|
|
40
|
-
const components_1 = require("./components");
|
|
41
|
-
const AdminProvider_1 = require("./AdminProvider");
|
|
42
|
-
const primitives_1 = require("./primitives");
|
|
43
|
-
const DashboardBuilder_1 = __importDefault(require("./public_components/DashboardBuilder"));
|
|
44
|
-
const SQLViewManager_1 = __importDefault(require("./public_components/SQLViewManager"));
|
|
45
|
-
const CONTAINER = {
|
|
46
|
-
display: "flex",
|
|
47
|
-
flexDirection: "row",
|
|
48
|
-
height: "800px",
|
|
49
|
-
background: "white",
|
|
50
|
-
marginTop: 32,
|
|
51
|
-
width: "calc(100% - 50px)",
|
|
52
|
-
// borderRadius: 12,
|
|
53
|
-
overflow: "hidden",
|
|
54
|
-
borderRadius: 12,
|
|
55
|
-
// border: "1px solid #EDEDED",
|
|
56
|
-
boxShadow: "0px 1px 24px 0px rgba(0, 0, 0, 0.09)",
|
|
57
|
-
};
|
|
58
|
-
const customStyles = {
|
|
59
|
-
content: {
|
|
60
|
-
top: "50%",
|
|
61
|
-
left: "50%",
|
|
62
|
-
right: "auto",
|
|
63
|
-
bottom: "auto",
|
|
64
|
-
marginRight: "-50%",
|
|
65
|
-
border: "none",
|
|
66
|
-
transform: "translate(-50%, -50%)",
|
|
67
|
-
borderRadius: 6,
|
|
68
|
-
zIndex: 4,
|
|
69
|
-
boxShadow: "0px 2px 24px 0px rgb(63,82,149, 0.09)",
|
|
70
|
-
},
|
|
71
|
-
};
|
|
72
|
-
const THEME = {
|
|
73
|
-
/* Components font family */
|
|
74
|
-
// fontFamily: 'BlinkMacSystemFont',
|
|
75
|
-
fontFamily: "Inter",
|
|
76
|
-
/* Default font size */
|
|
77
|
-
fontSize: 14,
|
|
78
|
-
/* Header font size */
|
|
79
|
-
headerFontSize: 18,
|
|
80
|
-
editorDarkMode: true,
|
|
81
|
-
/* Primary color */
|
|
82
|
-
primaryColor: "#212121",
|
|
83
|
-
buttonUnderlayColor: "#000000",
|
|
84
|
-
/* Secondary color */
|
|
85
|
-
secondaryColor: "white",
|
|
86
|
-
selectedTabColor: "white",
|
|
87
|
-
/* When you select underlay */
|
|
88
|
-
selectUnderlayColor: "#F5F5F5",
|
|
89
|
-
/* Background color */
|
|
90
|
-
backgroundColor: "#FFFFFF",
|
|
91
|
-
editorBackgroundColor: "#FBFBFB",
|
|
92
|
-
elevatedCardColor: "#FFFFFF",
|
|
93
|
-
/* Primary font color */
|
|
94
|
-
fontColor: "#212121",
|
|
95
|
-
/* Secondary font color */
|
|
96
|
-
secondaryFontColor: "#777777",
|
|
97
|
-
selectedFontColor: "#212121",
|
|
98
|
-
unselectedFontColor: "#777777",
|
|
99
|
-
buttonLabelColor: "white",
|
|
100
|
-
buttonFontWeight: "500",
|
|
101
|
-
/* Label font weight */
|
|
102
|
-
labelFontWeight: "500",
|
|
103
|
-
/* Header font weight */
|
|
104
|
-
headerFontWeight: "500",
|
|
105
|
-
/* Selected font weight */
|
|
106
|
-
selectedFontWeight: "700",
|
|
107
|
-
/* Padding for containers */
|
|
108
|
-
padding: 25,
|
|
109
|
-
/* Border radius for selected Quill elements */
|
|
110
|
-
borderRadius: "8px",
|
|
111
|
-
/* Box shadow applied on Quill components */
|
|
112
|
-
boxShadow: "0px 1px 8px 0px rgb(63,82,149, 0.09)",
|
|
113
|
-
shadowColor: "rgba(0, 0, 0, 0.09)",
|
|
114
|
-
primaryButtonColor: "#212121",
|
|
115
|
-
};
|
|
116
|
-
const frontendApi = "clerk.withquill.com";
|
|
117
|
-
const defaultTheme = {
|
|
118
|
-
fontFamily: "Inter; Helvetica",
|
|
119
|
-
backgroundColor: "#FFFFFF",
|
|
120
|
-
primaryTextColor: "#364153",
|
|
121
|
-
secondaryTextColor: "#6C727F",
|
|
122
|
-
chartLabelFontFamily: "Inter; Helvetica",
|
|
123
|
-
chartLabelColor: "#666666",
|
|
124
|
-
chartTickColor: "#CCCCCC",
|
|
125
|
-
// chartColors: ["#6269E9", "#E14F62"],
|
|
126
|
-
borderColor: "#E5E7EB",
|
|
127
|
-
primaryButtonColor: "#364153",
|
|
128
|
-
borderWidth: 1,
|
|
129
|
-
labelFontWeight: "500",
|
|
130
|
-
fontSize: 14,
|
|
131
|
-
};
|
|
132
|
-
function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, setIsOpen, filters, dateFilter, openAddFilterModal, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, selectedEditDashboard, dashNames, setSelectedEditDashboard, SecondaryButtonComponent, }) {
|
|
133
|
-
const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
|
|
134
|
-
const [selectedDashboardName, setSelectedDashboardName] = (0, react_1.useState)("");
|
|
135
|
-
(0, react_1.useEffect)(() => {
|
|
136
|
-
setSelectedDashboardName(selectedDashboard);
|
|
137
|
-
}, [selectedDashboard]);
|
|
138
|
-
const [newFilters, setNewFilters] = (0, react_1.useState)([]);
|
|
139
|
-
const [newDateFilter, setNewDateFilter] = (0, react_1.useState)(null);
|
|
140
|
-
// const [tables, setTables] = useContext<TablesContextType>(TablesContext);
|
|
141
|
-
const [selectedTable, setSelectedTable] = (0, react_1.useState)(null);
|
|
142
|
-
const [field, setField] = (0, react_1.useState)("");
|
|
143
|
-
(0, react_1.useEffect)(() => {
|
|
144
|
-
if (state.tables.length) {
|
|
145
|
-
setSelectedTable(state.tables[0]);
|
|
146
|
-
setField(state.tables[0].columns.map((elem) => elem.name)[0]);
|
|
147
|
-
}
|
|
148
|
-
}, [state.tables]);
|
|
149
|
-
(0, react_1.useEffect)(() => {
|
|
150
|
-
if (dashboardData && dashboardData.filters) {
|
|
151
|
-
setNewFilters(dashboardData.filters);
|
|
152
|
-
}
|
|
153
|
-
if (dashboardData && dashboardData.dateFilter) {
|
|
154
|
-
setNewDateFilter(dashboardData.dateFilter);
|
|
155
|
-
}
|
|
156
|
-
}, [dashboardData]);
|
|
157
|
-
const handleAddFilter = async () => {
|
|
158
|
-
setNewFilters([...newFilters, { label: "", field }]);
|
|
159
|
-
};
|
|
160
|
-
const handleSubmitDashboardChanges = async () => {
|
|
161
|
-
if (!selectedDashboardName ||
|
|
162
|
-
newFilters.some((filter) => !filter.label) ||
|
|
163
|
-
(newDateFilter &&
|
|
164
|
-
Object.keys(newDateFilter).length &&
|
|
165
|
-
!newDateFilter.label)) {
|
|
166
|
-
alert("Empty fields");
|
|
167
|
-
return;
|
|
168
|
-
}
|
|
169
|
-
if (newFilters.filter((elem) => !elem.field).length) {
|
|
170
|
-
alert(`no filter field for: ${newFilters.filter((elem) => !elem.field)[0].label}`);
|
|
171
|
-
return;
|
|
172
|
-
}
|
|
173
|
-
const updatedFilters = newFilters.map((filter) => {
|
|
174
|
-
const filterType = getPostgresBasicType(selectedTable.columns.find((col) => col.name === filter.field));
|
|
175
|
-
return {
|
|
176
|
-
table: selectedTable.name,
|
|
177
|
-
field: filter.field,
|
|
178
|
-
labelField: filter.field,
|
|
179
|
-
label: filter.label,
|
|
180
|
-
filterType,
|
|
181
|
-
};
|
|
182
|
-
});
|
|
183
|
-
if (dashNames &&
|
|
184
|
-
dashNames.length > 0 &&
|
|
185
|
-
dashNames.some((dashName) => dashName.name === selectedDashboardName &&
|
|
186
|
-
selectedDashboardName !== selectedDashboard)) {
|
|
187
|
-
alert("Dashboard name already taken!");
|
|
188
|
-
return;
|
|
189
|
-
}
|
|
190
|
-
const fieldsSet = new Set();
|
|
191
|
-
const hasDuplicateField = updatedFilters.some((filter) => {
|
|
192
|
-
if (fieldsSet.has(filter.field)) {
|
|
193
|
-
return true;
|
|
194
|
-
}
|
|
195
|
-
else {
|
|
196
|
-
fieldsSet.add(filter.field);
|
|
197
|
-
return false;
|
|
198
|
-
}
|
|
199
|
-
});
|
|
200
|
-
if (hasDuplicateField ||
|
|
201
|
-
(Object.keys(newDateFilter).length > 0 &&
|
|
202
|
-
updatedFilters.some((filter) => filter.filterType === "date"))) {
|
|
203
|
-
alert("Maximum of one filter per field");
|
|
204
|
-
return;
|
|
205
|
-
}
|
|
206
|
-
let allValid = true;
|
|
207
|
-
updatedFilters.forEach((filter) => {
|
|
208
|
-
if (filter.filterType !== "string" && filter.filterType !== "date") {
|
|
209
|
-
allValid = false;
|
|
210
|
-
console.error(`Invalid filterType found: ${filter.filterType}`);
|
|
211
|
-
}
|
|
212
|
-
});
|
|
213
|
-
if (!allValid) {
|
|
214
|
-
alert("We only support string and filters.");
|
|
215
|
-
return;
|
|
216
|
-
}
|
|
217
|
-
let responseData;
|
|
218
|
-
const url = `https://quill-344421.uc.r.appspot.com/dashfilter/${client._id}/`;
|
|
219
|
-
const body = {
|
|
220
|
-
newDashboardName: selectedDashboardName,
|
|
221
|
-
filters: updatedFilters,
|
|
222
|
-
dateFilter: newDateFilter,
|
|
223
|
-
name: selectedDashboard,
|
|
224
|
-
};
|
|
225
|
-
const headers = {
|
|
226
|
-
"Content-Type": "application/json",
|
|
227
|
-
Authorization: `Bearer `,
|
|
228
|
-
};
|
|
229
|
-
try {
|
|
230
|
-
const response = await fetch(url, {
|
|
231
|
-
method: "POST",
|
|
232
|
-
headers: headers,
|
|
233
|
-
body: JSON.stringify(body),
|
|
234
|
-
});
|
|
235
|
-
setSelectedEditDashboard(null);
|
|
236
|
-
setIsOpen(false);
|
|
237
|
-
}
|
|
238
|
-
catch (e) {
|
|
239
|
-
console.log("error");
|
|
240
|
-
}
|
|
241
|
-
};
|
|
242
|
-
// const handleDeleteFilter = async () => {
|
|
243
|
-
// const url = `https://quill-344421.uc.r.appspot.com/dashfilterdelete/${client._id}/`;
|
|
244
|
-
// const body = {
|
|
245
|
-
// name: selectedDashboard.name,
|
|
246
|
-
// filterId: "DATE_RANGE", //TODO: Change this?
|
|
247
|
-
// };
|
|
248
|
-
// const headers = {
|
|
249
|
-
// "Content-Type": "application/json",
|
|
250
|
-
// Authorization: `Bearer `,
|
|
251
|
-
// };
|
|
252
|
-
// try {
|
|
253
|
-
// const response = await fetch(url, {
|
|
254
|
-
// method: "POST",
|
|
255
|
-
// headers: headers,
|
|
256
|
-
// body: JSON.stringify(body),
|
|
257
|
-
// });
|
|
258
|
-
// if (!response.ok) {
|
|
259
|
-
// throw new Error(`HTTP error! Status: ${response.status}`);
|
|
260
|
-
// }
|
|
261
|
-
// const responseData = await response.json();
|
|
262
|
-
// if (responseData) {
|
|
263
|
-
// setIsOpen(false);
|
|
264
|
-
// return;
|
|
265
|
-
// }
|
|
266
|
-
// } catch (error) {
|
|
267
|
-
// console.error("There was a problem with the fetch operation:", error);
|
|
268
|
-
// }
|
|
269
|
-
// };
|
|
270
|
-
const handleDeleteFilter = (filter) => {
|
|
271
|
-
setNewFilters(newFilters.filter((f) => f !== filter));
|
|
272
|
-
};
|
|
273
|
-
const handleDeleteDateFilter = async () => {
|
|
274
|
-
// const response2 = await axios.post(
|
|
275
|
-
// `https://quill-344421.uc.r.appspot.com/dashfilterdelete/${client._id}/`,
|
|
276
|
-
// {
|
|
277
|
-
// name: selectedDashboard.name,
|
|
278
|
-
// filterId: "DATE_RANGE",
|
|
279
|
-
// },
|
|
280
|
-
// { headers: { Authorization: `Bearer ` } }
|
|
281
|
-
// );
|
|
282
|
-
// if (response2 && response2.data) {
|
|
283
|
-
// setIsOpen(false);
|
|
284
|
-
// return;
|
|
285
|
-
// }
|
|
286
|
-
setNewDateFilter({});
|
|
287
|
-
};
|
|
288
|
-
return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => {
|
|
289
|
-
setIsOpen(false);
|
|
290
|
-
}, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
291
|
-
display: "flex",
|
|
292
|
-
flexDirection: "column",
|
|
293
|
-
width: "100%",
|
|
294
|
-
// alignItems: "center",
|
|
295
|
-
}, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Edit dashboard" }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
296
|
-
fontFamily: exports.theme.fontFamily,
|
|
297
|
-
color: exports.theme.secondaryTextColor,
|
|
298
|
-
fontSize: 14,
|
|
299
|
-
fontWeight: "600",
|
|
300
|
-
marginBottom: 3,
|
|
301
|
-
marginTop: 8,
|
|
302
|
-
}, children: "Dashboard name" }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { value: selectedDashboardName, onChange: (e) => setSelectedDashboardName(e.target.value) }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 8 } }), (0, jsx_runtime_1.jsxs)("div", { children: [newDateFilter &&
|
|
303
|
-
Object.values(newDateFilter).length > 0 &&
|
|
304
|
-
newDateFilter.label ? ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
305
|
-
display: "flex",
|
|
306
|
-
flexDirection: "column",
|
|
307
|
-
gap: "10px",
|
|
308
|
-
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
309
|
-
fontFamily: exports.theme.fontFamily,
|
|
310
|
-
color: exports.theme.primaryTextColor,
|
|
311
|
-
fontSize: 16,
|
|
312
|
-
fontWeight: "600",
|
|
313
|
-
}, children: "Date filter" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
314
|
-
fontFamily: exports.theme.fontFamily,
|
|
315
|
-
color: exports.theme.secondaryTextColor,
|
|
316
|
-
fontSize: 14,
|
|
317
|
-
fontWeight: "600",
|
|
318
|
-
marginBottom: 3,
|
|
319
|
-
}, children: "Label" }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
320
|
-
display: "flex",
|
|
321
|
-
flexDirection: "row",
|
|
322
|
-
alignItems: "center",
|
|
323
|
-
}, children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { value: newDateFilter.label, onChange: (e) => {
|
|
324
|
-
setNewDateFilter({
|
|
325
|
-
...newDateFilter,
|
|
326
|
-
label: e.target.value,
|
|
327
|
-
});
|
|
328
|
-
} }), (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteDateFilter(), style: {
|
|
329
|
-
height: 38,
|
|
330
|
-
width: 42,
|
|
331
|
-
alignItems: "center",
|
|
332
|
-
justifyContent: "center",
|
|
333
|
-
display: "flex",
|
|
334
|
-
}, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "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" }) }) })] })] })] })) : null, (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
335
|
-
display: "flex",
|
|
336
|
-
flexDirection: "row",
|
|
337
|
-
alignItems: "center",
|
|
338
|
-
justifyContent: "space-between",
|
|
339
|
-
marginTop: 20,
|
|
340
|
-
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
341
|
-
fontFamily: exports.theme.fontFamily,
|
|
342
|
-
color: exports.theme.primaryTextColor,
|
|
343
|
-
fontSize: 17,
|
|
344
|
-
fontWeight: "600",
|
|
345
|
-
}, children: "Filters" }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddFilter, label: "Add filter +" })] }), newFilters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: newFilters.map((filter, index) => {
|
|
346
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
347
|
-
display: "flex",
|
|
348
|
-
flexDirection: "row",
|
|
349
|
-
gap: "10px",
|
|
350
|
-
}, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
|
|
351
|
-
display: "flex",
|
|
352
|
-
flexDirection: "column",
|
|
353
|
-
maxWidth: 300,
|
|
354
|
-
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
355
|
-
fontFamily: exports.theme.fontFamily,
|
|
356
|
-
color: exports.theme.secondaryTextColor,
|
|
357
|
-
fontSize: 14,
|
|
358
|
-
fontWeight: "600",
|
|
359
|
-
marginBottom: 3,
|
|
360
|
-
}, children: "Label" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: filter.label, onChange: (e) => {
|
|
361
|
-
const updatedFilters = newFilters.map((otherFilter, i) => index === i
|
|
362
|
-
? { ...otherFilter, label: e.target.value }
|
|
363
|
-
: otherFilter);
|
|
364
|
-
setNewFilters(updatedFilters);
|
|
365
|
-
} })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
366
|
-
display: "flex",
|
|
367
|
-
flexDirection: "column",
|
|
368
|
-
maxWidth: 300,
|
|
369
|
-
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
370
|
-
fontFamily: exports.theme.fontFamily,
|
|
371
|
-
color: exports.theme.secondaryTextColor,
|
|
372
|
-
fontSize: 14,
|
|
373
|
-
fontWeight: "600",
|
|
374
|
-
marginBottom: 3,
|
|
375
|
-
}, children: "Table" }), (0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: selectedTable ? selectedTable.name : "", onChange: (e) => setSelectedTable(state.tables.find((table) => table.name === e)), options: state.tables.map((table) => {
|
|
376
|
-
return { label: table.name, value: table.name };
|
|
377
|
-
}) })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
378
|
-
display: "flex",
|
|
379
|
-
flexDirection: "column",
|
|
380
|
-
maxWidth: 300,
|
|
381
|
-
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
382
|
-
fontFamily: exports.theme.fontFamily,
|
|
383
|
-
color: exports.theme.secondaryTextColor,
|
|
384
|
-
fontSize: 14,
|
|
385
|
-
fontWeight: "600",
|
|
386
|
-
marginBottom: 3,
|
|
387
|
-
}, children: "Field" }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
388
|
-
display: "flex",
|
|
389
|
-
flexDirection: "column",
|
|
390
|
-
alignItems: "center",
|
|
391
|
-
}, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
392
|
-
display: "flex",
|
|
393
|
-
flexDirection: "row",
|
|
394
|
-
alignItems: "center",
|
|
395
|
-
}, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: filter && filter.field ? filter.field : "", options: selectedTable?.columns.map((column) => {
|
|
396
|
-
return { label: column.name, value: column.name };
|
|
397
|
-
}), onChange: (e) => {
|
|
398
|
-
const updatedFilters = newFilters.map((otherFilter, i) => index === i
|
|
399
|
-
? { ...otherFilter, field: e }
|
|
400
|
-
: otherFilter);
|
|
401
|
-
setNewFilters(updatedFilters);
|
|
402
|
-
} }), (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteFilter(filter), style: {
|
|
403
|
-
height: 38,
|
|
404
|
-
width: 42,
|
|
405
|
-
alignItems: "center",
|
|
406
|
-
justifyContent: "center",
|
|
407
|
-
display: "flex",
|
|
408
|
-
cursor: "pointer",
|
|
409
|
-
}, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "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" }) }) })] }) })] })] }));
|
|
410
|
-
}) }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 24 } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleSubmitDashboardChanges, label: "Save changes" })] }) }));
|
|
411
|
-
}
|
|
412
|
-
exports.EditFiltersModal = EditFiltersModal;
|
|
413
|
-
function AddFilterModal({ isOpen, selectedDashboard, client, setIsOpen, ModalComponent, TextInputComponent, SelectComponent, HeaderComponent, ButtonComponent, openAddDashboardModal, }) {
|
|
414
|
-
const [selectedTable, setSelectedTable] = (0, react_1.useState)(null);
|
|
415
|
-
const [name, setName] = (0, react_1.useState)("");
|
|
416
|
-
const [field, setField] = (0, react_1.useState)("");
|
|
417
|
-
const [filterType, setFilterType] = (0, react_1.useState)("string");
|
|
418
|
-
const [dateRange, setDateRange] = (0, react_1.useState)([new Date(), new Date()]);
|
|
419
|
-
const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
|
|
420
|
-
(0, react_1.useEffect)(() => {
|
|
421
|
-
if (state.tables.length) {
|
|
422
|
-
setSelectedTable(state.tables[0]);
|
|
423
|
-
// setField(tables[0].columns.map((elem) => elem.name));
|
|
424
|
-
setField(state.tables[0].columns[0].name);
|
|
425
|
-
}
|
|
426
|
-
}, [state.tables]);
|
|
427
|
-
const handleAddFilter = async () => {
|
|
428
|
-
if (!selectedTable || !field) {
|
|
429
|
-
return;
|
|
430
|
-
}
|
|
431
|
-
const filterType = getPostgresBasicType(selectedTable.columns.find((col) => col.name === field));
|
|
432
|
-
if (filterType !== "string" && filterType !== "date") {
|
|
433
|
-
alert("We only support string and filters.");
|
|
434
|
-
return;
|
|
435
|
-
}
|
|
436
|
-
let responseData;
|
|
437
|
-
const url = `https://quill-344421.uc.r.appspot.com/dashfilter/${client._id}/`;
|
|
438
|
-
const body = {
|
|
439
|
-
name: selectedDashboard,
|
|
440
|
-
filter: {
|
|
441
|
-
table: selectedTable.name,
|
|
442
|
-
field: field,
|
|
443
|
-
labelField: field,
|
|
444
|
-
label: name,
|
|
445
|
-
filterType,
|
|
446
|
-
},
|
|
447
|
-
};
|
|
448
|
-
const headers = {
|
|
449
|
-
"Content-Type": "application/json",
|
|
450
|
-
Authorization: `Bearer `,
|
|
451
|
-
};
|
|
452
|
-
try {
|
|
453
|
-
const response = await fetch(url, {
|
|
454
|
-
method: "POST",
|
|
455
|
-
headers: headers,
|
|
456
|
-
body: JSON.stringify(body),
|
|
457
|
-
});
|
|
458
|
-
if (!response.ok) {
|
|
459
|
-
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
460
|
-
}
|
|
461
|
-
responseData = await response.json();
|
|
462
|
-
}
|
|
463
|
-
catch (error) {
|
|
464
|
-
console.error("There was a problem with the fetch operation:", error);
|
|
465
|
-
}
|
|
466
|
-
if (responseData) {
|
|
467
|
-
setIsOpen(false);
|
|
468
|
-
setName("");
|
|
469
|
-
setField("");
|
|
470
|
-
return;
|
|
471
|
-
}
|
|
472
|
-
};
|
|
473
|
-
if (!selectedTable) {
|
|
474
|
-
return null;
|
|
475
|
-
}
|
|
476
|
-
return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Add filter" }), (0, jsx_runtime_1.jsx)("div", { children: "Label" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: name, onChange: (e) => setName(e.target.value) }), (0, jsx_runtime_1.jsx)("div", { children: "Table" }), (0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: selectedTable ? selectedTable : "", onChange: (e) => setSelectedTable(e.target.value), options: state.tables.map((table) => {
|
|
477
|
-
return { label: table.name, value: table.name };
|
|
478
|
-
}) }), (0, jsx_runtime_1.jsx)("div", { children: "Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: field ? field : "", options: selectedTable.columns.map((column) => {
|
|
479
|
-
return { label: column.name, value: column.name };
|
|
480
|
-
}), onChange: (e) => {
|
|
481
|
-
setField(e);
|
|
482
|
-
} }), (0, jsx_runtime_1.jsx)(ButtonComponent, { label: "Add filter", onClick: handleAddFilter })] }) }));
|
|
483
|
-
}
|
|
484
|
-
exports.AddFilterModal = AddFilterModal;
|
|
485
|
-
function Portal({ publicKey, queryEndpoint, theme = defaultTheme, queryHeaders, withCredentials, environment, organizationId, TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, UserManagementComponent, HeaderComponent, }) {
|
|
486
|
-
return ((0, jsx_runtime_1.jsx)(AdminProvider_1.AdminProvider, { publicKey: publicKey, children: (0, jsx_runtime_1.jsx)(Navigation, { theme: theme, publicKey: publicKey, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials, TextInputComponent: TextInputComponent || primitives_1.TextInputPrimitive, ButtonComponent: ButtonComponent || primitives_1.ButtonPrimitive, HeaderComponent: HeaderComponent || primitives_1.HeaderPrimitive, SecondaryButtonComponent: SecondaryButtonComponent || primitives_1.SecondaryButtonPrimitive, ModalComponent: ModalComponent || primitives_1.ModalPrimitive, environment: environment, OrganizationSelectComponent: OrganizationSelectComponent, UserManagementComponent: UserManagementComponent, SelectComponent: SelectComponent || primitives_1.SelectPrimitive }) }));
|
|
487
|
-
}
|
|
488
|
-
exports.default = Portal;
|
|
489
|
-
function Navigation({ TextInputComponent, ButtonComponent, SecondaryButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, UserManagementComponent, HeaderComponent, publicKey, queryEndpoint, queryHeaders, environment, withCredentials, }) {
|
|
490
|
-
const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
|
|
491
|
-
// MMTODO: Idk if this is needed
|
|
492
|
-
// useEffect(() => {
|
|
493
|
-
// setEnvironmentContext(environment);
|
|
494
|
-
// }, [environment]);
|
|
495
|
-
if (!state.client) {
|
|
496
|
-
return null;
|
|
497
|
-
}
|
|
498
|
-
const renderComponentBasedOnName = () => {
|
|
499
|
-
switch (state.activeComponent) {
|
|
500
|
-
case "Dashboards":
|
|
501
|
-
return ((0, jsx_runtime_1.jsx)(components_1.DashboardManager, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, setReportId: (id) => dispatch({ type: "SET_REPORT_ID", payload: id }), queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials }));
|
|
502
|
-
case "SQL editor":
|
|
503
|
-
return (0, jsx_runtime_1.jsx)(DashboardBuilder_1.default, {});
|
|
504
|
-
case "Report":
|
|
505
|
-
return ((0, jsx_runtime_1.jsx)(ReportWrapper, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, OrganizationSelectComponent: OrganizationSelectComponent, organizationId: state.organizationId, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials }));
|
|
506
|
-
case "SQL views":
|
|
507
|
-
return (0, jsx_runtime_1.jsx)(SQLViewManager_1.default, {});
|
|
508
|
-
default:
|
|
509
|
-
return ((0, jsx_runtime_1.jsx)(Dashboards, { TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, OrganizationSelectComponent: OrganizationSelectComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, HeaderComponent: HeaderComponent, setReportId: (id) => dispatch({ type: "SET_REPORT_ID", payload: id }), queryEndpoint: queryEndpoint, organizationId: state.organizationId, queryHeaders: queryHeaders, withCredentials: withCredentials }));
|
|
510
|
-
}
|
|
511
|
-
};
|
|
512
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
513
|
-
display: "flex",
|
|
514
|
-
flexDirection: "column",
|
|
515
|
-
height: "100vh",
|
|
516
|
-
width: "100vw",
|
|
517
|
-
}, children: [(0, jsx_runtime_1.jsxs)("nav", { style: {
|
|
518
|
-
zIndex: 2,
|
|
519
|
-
height: "70px",
|
|
520
|
-
width: "100%",
|
|
521
|
-
display: "flex",
|
|
522
|
-
flexDirection: "row",
|
|
523
|
-
justifyContent: "space-between",
|
|
524
|
-
alignItems: "center",
|
|
525
|
-
backgroundColor: "white",
|
|
526
|
-
padding: "0",
|
|
527
|
-
position: "fixed",
|
|
528
|
-
top: 0,
|
|
529
|
-
left: 0,
|
|
530
|
-
right: 0,
|
|
531
|
-
borderBottomWidth: 1,
|
|
532
|
-
borderTopWidth: 0,
|
|
533
|
-
borderLeftWidth: 0,
|
|
534
|
-
borderRightWidth: 0,
|
|
535
|
-
borderStyle: "solid",
|
|
536
|
-
borderColor: exports.theme.borderColor,
|
|
537
|
-
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
538
|
-
paddingTop: "18px",
|
|
539
|
-
paddingLeft: "14px",
|
|
540
|
-
paddingBottom: "18px",
|
|
541
|
-
width: 230,
|
|
542
|
-
}, children: (0, jsx_runtime_1.jsxs)("svg", { width: "45", height: "18", viewBox: "0 0 45 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("g", { clipPath: "url(#clip0_2489_282)", children: (0, jsx_runtime_1.jsx)("path", { d: "M18.634 17.3008H9.196C7.97867 17.3008 6.84933 17.1248 5.808 16.7728C4.78133 16.4061 3.894 15.8781 3.146 15.1888C2.398 14.4994 1.81133 13.6634 1.386 12.6808C0.960667 11.6981 0.748 10.5761 0.748 9.31478C0.748 8.14145 0.960667 7.06345 1.386 6.08078C1.826 5.09811 2.42 4.25478 3.168 3.55078C3.916 2.84678 4.796 2.30411 5.808 1.92278C6.82 1.52678 7.90533 1.32878 9.064 1.32878C10.2227 1.32878 11.308 1.52678 12.32 1.92278C13.332 2.31878 14.212 2.86878 14.96 3.57278C15.708 4.27678 16.2947 5.12011 16.72 6.10278C17.16 7.07078 17.38 8.14145 17.38 9.31478C17.38 9.87211 17.314 10.4148 17.182 10.9428C17.0647 11.4708 16.8813 11.9694 16.632 12.4388C16.3827 12.9081 16.06 13.3334 15.664 13.7148C15.268 14.0814 14.806 14.3821 14.278 14.6168V14.6608H18.634V17.3008ZM4.312 9.31478C4.312 9.98945 4.43667 10.6201 4.686 11.2068C4.93533 11.7934 5.27267 12.3068 5.698 12.7468C6.138 13.1721 6.644 13.5094 7.216 13.7588C7.788 14.0081 8.404 14.1328 9.064 14.1328C9.724 14.1328 10.34 14.0081 10.912 13.7588C11.484 13.5094 11.9827 13.1721 12.408 12.7468C12.848 12.3068 13.1927 11.7934 13.442 11.2068C13.6913 10.6201 13.816 9.98945 13.816 9.31478C13.816 8.64011 13.6913 8.00945 13.442 7.42278C13.1927 6.83611 12.848 6.33011 12.408 5.90478C11.9827 5.46478 11.484 5.12011 10.912 4.87078C10.34 4.62145 9.724 4.49678 9.064 4.49678C8.404 4.49678 7.788 4.62145 7.216 4.87078C6.644 5.12011 6.138 5.46478 5.698 5.90478C5.27267 6.33011 4.93533 6.83611 4.686 7.42278C4.43667 8.00945 4.312 8.64011 4.312 9.31478ZM29.3164 17.3008H26.1484V15.8488H26.1044C25.987 16.0541 25.833 16.2594 25.6424 16.4648C25.4664 16.6701 25.2464 16.8534 24.9824 17.0148C24.7184 17.1761 24.4177 17.3081 24.0804 17.4108C23.743 17.5134 23.3764 17.5648 22.9804 17.5648C22.1444 17.5648 21.4624 17.4401 20.9344 17.1908C20.421 16.9268 20.0177 16.5674 19.7244 16.1128C19.4457 15.6581 19.255 15.1228 19.1524 14.5068C19.0644 13.8908 19.0204 13.2234 19.0204 12.5048V6.60878H22.3204V11.8448C22.3204 12.1528 22.3277 12.4754 22.3424 12.8128C22.3717 13.1354 22.4377 13.4361 22.5404 13.7148C22.6577 13.9934 22.8264 14.2208 23.0464 14.3968C23.281 14.5728 23.611 14.6608 24.0364 14.6608C24.4617 14.6608 24.8064 14.5874 25.0704 14.4408C25.3344 14.2794 25.5324 14.0741 25.6644 13.8248C25.811 13.5608 25.9064 13.2674 25.9504 12.9448C25.9944 12.6221 26.0164 12.2848 26.0164 11.9328V6.60878H29.3164V17.3008ZM30.8172 6.60878H34.1172V17.3008H30.8172V6.60878ZM30.5532 3.24278C30.5532 2.71478 30.7365 2.26745 31.1032 1.90078C31.4845 1.51945 31.9392 1.32878 32.4672 1.32878C32.9952 1.32878 33.4425 1.51945 33.8092 1.90078C34.1905 2.26745 34.3812 2.71478 34.3812 3.24278C34.3812 3.77078 34.1905 4.22545 33.8092 4.60678C33.4425 4.97345 32.9952 5.15678 32.4672 5.15678C31.9392 5.15678 31.4845 4.97345 31.1032 4.60678C30.7365 4.22545 30.5532 3.77078 30.5532 3.24278ZM35.652 0.66878H38.952V17.3008H35.652V0.66878ZM40.4869 0.66878H43.7869V17.3008H40.4869V0.66878Z", fill: "#212121" }) }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_2489_282", children: (0, jsx_runtime_1.jsx)("rect", { width: "45", height: "18", fill: "white" }) }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "row" }, children: [(0, jsx_runtime_1.jsx)("button", { style: {
|
|
543
|
-
color: "#212121",
|
|
544
|
-
backgroundColor: state.activeComponent === "Dashboards"
|
|
545
|
-
? "#2121210A"
|
|
546
|
-
: "transparent",
|
|
547
|
-
padding: "8px 12px",
|
|
548
|
-
height: "38px",
|
|
549
|
-
marginBottom: "4px",
|
|
550
|
-
fontWeight: "bold",
|
|
551
|
-
fontSize: "0.875rem",
|
|
552
|
-
borderRadius: "4px",
|
|
553
|
-
transition: "background-color 0.3s",
|
|
554
|
-
border: "none",
|
|
555
|
-
outline: "none",
|
|
556
|
-
},
|
|
557
|
-
// onClick={() => setActiveComponent("Dashboards")}
|
|
558
|
-
onClick: () => dispatch({ type: "SET_ACTIVE_COMPONENT", payload: "Dashboards" }), children: "Dashboards" }), (0, jsx_runtime_1.jsx)("button", { style: {
|
|
559
|
-
color: "#212121",
|
|
560
|
-
backgroundColor: state.activeComponent === "SQL editor"
|
|
561
|
-
? "#2121210A"
|
|
562
|
-
: "transparent",
|
|
563
|
-
padding: "8px 12px",
|
|
564
|
-
height: "38px",
|
|
565
|
-
marginBottom: "4px",
|
|
566
|
-
fontWeight: "bold",
|
|
567
|
-
fontSize: "0.875rem",
|
|
568
|
-
borderRadius: "4px",
|
|
569
|
-
transition: "background-color 0.3s",
|
|
570
|
-
border: "none",
|
|
571
|
-
outline: "none",
|
|
572
|
-
},
|
|
573
|
-
// onClick={() => setActiveComponent("SQL editor")}
|
|
574
|
-
onClick: () => dispatch({ type: "SET_ACTIVE_COMPONENT", payload: "SQL editor" }), children: "SQL editor" }), (0, jsx_runtime_1.jsx)("button", { style: {
|
|
575
|
-
color: "#212121",
|
|
576
|
-
backgroundColor: state.activeComponent === "SQL views"
|
|
577
|
-
? "#2121210A"
|
|
578
|
-
: "transparent",
|
|
579
|
-
padding: "8px 12px",
|
|
580
|
-
height: "38px",
|
|
581
|
-
marginBottom: "4px",
|
|
582
|
-
fontWeight: "bold",
|
|
583
|
-
fontSize: "0.875rem",
|
|
584
|
-
borderRadius: "4px",
|
|
585
|
-
transition: "background-color 0.3s",
|
|
586
|
-
border: "none",
|
|
587
|
-
outline: "none",
|
|
588
|
-
},
|
|
589
|
-
// onClick={() => setActiveComponent("SQL views")}
|
|
590
|
-
onClick: () => dispatch({ type: "SET_ACTIVE_COMPONENT", payload: "SQL views" }), children: "SQL views" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
591
|
-
display: "flex",
|
|
592
|
-
flexDirection: "row",
|
|
593
|
-
minHeight: "50px",
|
|
594
|
-
justifyContent: "flex-end",
|
|
595
|
-
alignItems: "center",
|
|
596
|
-
paddingRight: "8px",
|
|
597
|
-
width: 230,
|
|
598
|
-
}, children: UserManagementComponent && (0, jsx_runtime_1.jsx)(UserManagementComponent, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
599
|
-
display: "flex",
|
|
600
|
-
flexDirection: "column",
|
|
601
|
-
height: "100%",
|
|
602
|
-
width: "100%",
|
|
603
|
-
// marginTop: activeComponent !== 'Report' ? '70px' : undefined
|
|
604
|
-
}, children: (0, jsx_runtime_1.jsx)(react_2.QuillProvider
|
|
605
|
-
// organizationId={'2'}
|
|
606
|
-
// publicKey={client?._id}
|
|
607
|
-
, {
|
|
608
|
-
// organizationId={'2'}
|
|
609
|
-
// publicKey={client?._id}
|
|
610
|
-
organizationId: state.organizationId, queryEndpoint: queryEndpoint, withCredentials: withCredentials, queryHeaders: queryHeaders, publicKey: state.client._id, environment: state.environment, theme: exports.theme, children: renderComponentBasedOnName() }) })] }));
|
|
611
|
-
}
|
|
612
|
-
exports.theme = {
|
|
613
|
-
fontFamily: "Inter; Helvetica",
|
|
614
|
-
backgroundColor: "#FFFFFF",
|
|
615
|
-
primaryTextColor: "#364153",
|
|
616
|
-
secondaryTextColor: "#6C727F",
|
|
617
|
-
chartLabelFontFamily: "Inter; Helvetica",
|
|
618
|
-
chartLabelColor: "#666666",
|
|
619
|
-
chartTickColor: "#CCCCCC",
|
|
620
|
-
// chartColors: ["#6269E9", "#E14F62"],
|
|
621
|
-
borderColor: "#E5E7EB",
|
|
622
|
-
labelFontWeight: 500,
|
|
623
|
-
fontSize: 14,
|
|
624
|
-
borderWidth: 1,
|
|
625
|
-
primaryButtonColor: "#212121",
|
|
626
|
-
primaryButtonTextColor: "#FFFFFF",
|
|
627
|
-
};
|
|
628
|
-
function convertPostgresColumn(column) {
|
|
629
|
-
let format;
|
|
630
|
-
switch (column.dataTypeID) {
|
|
631
|
-
case 20: // int8
|
|
632
|
-
case 21: // int2
|
|
633
|
-
case 23: // int4
|
|
634
|
-
format = "whole_number";
|
|
635
|
-
break;
|
|
636
|
-
case 700: // float4
|
|
637
|
-
case 701: // float8
|
|
638
|
-
case 1700: // numeric
|
|
639
|
-
format = "two_decimal_places";
|
|
640
|
-
break;
|
|
641
|
-
case 1082: // date
|
|
642
|
-
case 1083: // time
|
|
643
|
-
case 1184: // timestamptz
|
|
644
|
-
case 1114: // timestamp
|
|
645
|
-
format = "MMM_dd_yyyy";
|
|
646
|
-
break;
|
|
647
|
-
case 1043: // varchar
|
|
648
|
-
default:
|
|
649
|
-
format = "string";
|
|
650
|
-
}
|
|
651
|
-
return {
|
|
652
|
-
label: column.name,
|
|
653
|
-
field: column.name,
|
|
654
|
-
format: format,
|
|
655
|
-
};
|
|
656
|
-
}
|
|
657
|
-
exports.convertPostgresColumn = convertPostgresColumn;
|
|
658
|
-
function getPostgresBasicType(column) {
|
|
659
|
-
let format;
|
|
660
|
-
// first check if column.dataTypeID exists
|
|
661
|
-
if (column.dataTypeID) {
|
|
662
|
-
switch (column.dataTypeID) {
|
|
663
|
-
case 20: // int8
|
|
664
|
-
case 21: // int2
|
|
665
|
-
case 23: // int4
|
|
666
|
-
case 700: // float4
|
|
667
|
-
case 701: // float8
|
|
668
|
-
case 1700: // numeric
|
|
669
|
-
format = "number";
|
|
670
|
-
break;
|
|
671
|
-
case 1082: // date
|
|
672
|
-
case 1083: // time
|
|
673
|
-
case 1184: // timestamptz
|
|
674
|
-
case 1114: // timestamp
|
|
675
|
-
format = "date";
|
|
676
|
-
break;
|
|
677
|
-
case 1043: // varchar
|
|
678
|
-
default:
|
|
679
|
-
format = "string";
|
|
680
|
-
}
|
|
681
|
-
}
|
|
682
|
-
else if (column.fieldType) {
|
|
683
|
-
// if column.dataTypeID doesn't exist, check column.fieldType
|
|
684
|
-
switch (column.fieldType) {
|
|
685
|
-
case "int8":
|
|
686
|
-
case "int2":
|
|
687
|
-
case "int4":
|
|
688
|
-
case "float4":
|
|
689
|
-
case "float8":
|
|
690
|
-
case "numeric":
|
|
691
|
-
format = "number";
|
|
692
|
-
break;
|
|
693
|
-
case "date":
|
|
694
|
-
case "time":
|
|
695
|
-
case "timestamptz":
|
|
696
|
-
case "timestamp":
|
|
697
|
-
format = "date";
|
|
698
|
-
break;
|
|
699
|
-
case "varchar":
|
|
700
|
-
default:
|
|
701
|
-
format = "string";
|
|
702
|
-
}
|
|
703
|
-
}
|
|
704
|
-
return format;
|
|
705
|
-
}
|
|
706
|
-
exports.getPostgresBasicType = getPostgresBasicType;
|
|
707
|
-
function classNames(...classes) {
|
|
708
|
-
return classes.filter(Boolean).join(" ");
|
|
709
|
-
}
|
|
710
|
-
exports.classNames = classNames;
|
|
711
|
-
function AddDashboardModal({ selectedDashboard, isOpen, setIsOpen, client, ModalComponent, TextInputComponent, SelectComponent, HeaderComponent, ButtonComponent, dashNames, getDashNames, organizationId, }) {
|
|
712
|
-
const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
|
|
713
|
-
const [selectedDashboardName, setSelectedDashboardName] = (0, react_1.useState)(selectedDashboard?.name);
|
|
714
|
-
// const [tables] = useContext(TablesContext);
|
|
715
|
-
const [selectedTable, setSelectedTable] = (0, react_1.useState)(null);
|
|
716
|
-
const [name, setName] = (0, react_1.useState)("");
|
|
717
|
-
const [field, setField] = (0, react_1.useState)("");
|
|
718
|
-
const [filterType, setFilterType] = (0, react_1.useState)("string");
|
|
719
|
-
const [dateRange, setDateRange] = (0, react_1.useState)([new Date(), new Date()]);
|
|
720
|
-
const [newFilters, setNewFilters] = (0, react_1.useState)([]);
|
|
721
|
-
const [newDateFilter, setNewDateFilter] = (0, react_1.useState)(null);
|
|
722
|
-
(0, react_1.useEffect)(() => {
|
|
723
|
-
if (state.tables.length) {
|
|
724
|
-
setSelectedTable(state.tables[0]);
|
|
725
|
-
// setField(tables[0].columns.map((elem) => elem.name));
|
|
726
|
-
setField(state.tables[0].columns[0].name);
|
|
727
|
-
}
|
|
728
|
-
}, [state.tables]);
|
|
729
|
-
const handleDeleteFilter = async (filter) => {
|
|
730
|
-
setNewFilters(newFilters.filter((f) => f !== filter));
|
|
731
|
-
};
|
|
732
|
-
const handleAddDashboardSubmit = async () => {
|
|
733
|
-
if (!selectedDashboardName ||
|
|
734
|
-
newFilters.some((filter) => !filter.label) ||
|
|
735
|
-
(newDateFilter && newDateFilter.label)) {
|
|
736
|
-
alert("Empty labels");
|
|
737
|
-
return;
|
|
738
|
-
}
|
|
739
|
-
if (newFilters.some((filter) => !filter.field)) {
|
|
740
|
-
alert("Empty fields");
|
|
741
|
-
return;
|
|
742
|
-
}
|
|
743
|
-
if (!selectedTable || !field) {
|
|
744
|
-
return;
|
|
745
|
-
}
|
|
746
|
-
if (dashNames &&
|
|
747
|
-
dashNames.length > 0 &&
|
|
748
|
-
dashNames.some((dashName) => dashName.name === selectedDashboardName)) {
|
|
749
|
-
alert("Dashboard name already taken!");
|
|
750
|
-
return;
|
|
751
|
-
}
|
|
752
|
-
let updatedFilters = newFilters.map((filter) => {
|
|
753
|
-
const filterType = getPostgresBasicType(selectedTable.columns.find((col) => col.name === filter.field));
|
|
754
|
-
return {
|
|
755
|
-
table: selectedTable.name,
|
|
756
|
-
field: filter.field,
|
|
757
|
-
labelField: filter.field,
|
|
758
|
-
label: filter.label,
|
|
759
|
-
filterType,
|
|
760
|
-
};
|
|
761
|
-
});
|
|
762
|
-
const fieldsSet = new Set();
|
|
763
|
-
const hasDuplicateField = updatedFilters.some((filter) => {
|
|
764
|
-
if (fieldsSet.has(filter.field)) {
|
|
765
|
-
return true;
|
|
766
|
-
}
|
|
767
|
-
else {
|
|
768
|
-
fieldsSet.add(filter.field);
|
|
769
|
-
return false;
|
|
770
|
-
}
|
|
771
|
-
});
|
|
772
|
-
if (hasDuplicateField) {
|
|
773
|
-
alert("Maximum of one filter per field");
|
|
774
|
-
return;
|
|
775
|
-
}
|
|
776
|
-
let allValid = true;
|
|
777
|
-
updatedFilters.forEach((filter) => {
|
|
778
|
-
if (filter.filterType !== "string" && filter.filterType !== "date") {
|
|
779
|
-
allValid = false;
|
|
780
|
-
console.error(`Invalid filterType found: ${filter.filterType}`);
|
|
781
|
-
}
|
|
782
|
-
});
|
|
783
|
-
if (!allValid) {
|
|
784
|
-
alert("We only support string and filters.");
|
|
785
|
-
return;
|
|
786
|
-
}
|
|
787
|
-
if (updatedFilters.filter((filter) => filter.filterType === "date").length > 1) {
|
|
788
|
-
alert("More than one date filter");
|
|
789
|
-
return;
|
|
790
|
-
}
|
|
791
|
-
let responseData;
|
|
792
|
-
const url = `https://quill-344421.uc.r.appspot.com/newdash/${client._id}/`;
|
|
793
|
-
const body = newDateFilter && Object.keys(newDateFilter).length
|
|
794
|
-
? {
|
|
795
|
-
dateFilter: newDateFilter,
|
|
796
|
-
newDashboardName: selectedDashboardName,
|
|
797
|
-
filters: updatedFilters,
|
|
798
|
-
organizationId,
|
|
799
|
-
}
|
|
800
|
-
: {
|
|
801
|
-
newDashboardName: selectedDashboardName,
|
|
802
|
-
filters: updatedFilters,
|
|
803
|
-
organizationId,
|
|
804
|
-
};
|
|
805
|
-
const headers = {
|
|
806
|
-
"Content-Type": "application/json",
|
|
807
|
-
Authorization: `Bearer `,
|
|
808
|
-
};
|
|
809
|
-
try {
|
|
810
|
-
const response = await fetch(url, {
|
|
811
|
-
method: "POST",
|
|
812
|
-
headers: headers,
|
|
813
|
-
body: JSON.stringify(body),
|
|
814
|
-
});
|
|
815
|
-
if (!response.ok) {
|
|
816
|
-
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
817
|
-
}
|
|
818
|
-
responseData = await response.json();
|
|
819
|
-
}
|
|
820
|
-
catch (e) {
|
|
821
|
-
console.log("error");
|
|
822
|
-
}
|
|
823
|
-
if (responseData) {
|
|
824
|
-
setIsOpen(false);
|
|
825
|
-
setName("");
|
|
826
|
-
setSelectedDashboardName("");
|
|
827
|
-
setNewFilters([]);
|
|
828
|
-
setNewDateFilter(null);
|
|
829
|
-
getDashNames();
|
|
830
|
-
return;
|
|
831
|
-
}
|
|
832
|
-
};
|
|
833
|
-
if (!selectedTable) {
|
|
834
|
-
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
835
|
-
}
|
|
836
|
-
const handleAddFilter = async () => {
|
|
837
|
-
setNewFilters([...newFilters, { label: "", field }]);
|
|
838
|
-
};
|
|
839
|
-
return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { placeholder: "Enter Dashboard Name...", onChange: (e) => setSelectedDashboardName(e.target.value), value: selectedDashboardName }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
840
|
-
display: "flex",
|
|
841
|
-
flexDirection: "column",
|
|
842
|
-
alignItems: "center",
|
|
843
|
-
}, children: [newFilters.map((filter, index) => {
|
|
844
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "row" }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)("h2", { children: "Label" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: filter.label, onChange: (e) => {
|
|
845
|
-
const updatedFilters = newFilters.map((otherFilter, i) => index === i
|
|
846
|
-
? { ...otherFilter, label: e.target.value }
|
|
847
|
-
: otherFilter);
|
|
848
|
-
setNewFilters(updatedFilters);
|
|
849
|
-
} })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)("h4", { children: "Field" }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
850
|
-
display: "flex",
|
|
851
|
-
flexDirection: "column",
|
|
852
|
-
alignItems: "center",
|
|
853
|
-
}, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
854
|
-
display: "flex",
|
|
855
|
-
flexDirection: "row",
|
|
856
|
-
alignItems: "center",
|
|
857
|
-
}, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: filter && filter.field ? filter.field : "", options: selectedTable.columns.map((column) => {
|
|
858
|
-
return { label: column.name, value: column.name };
|
|
859
|
-
}), onChange: (e) => {
|
|
860
|
-
const updatedFilters = newFilters.map((otherFilter, i) => index === i
|
|
861
|
-
? { ...otherFilter, field: e }
|
|
862
|
-
: otherFilter);
|
|
863
|
-
setNewFilters(updatedFilters);
|
|
864
|
-
} }), (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteFilter(filter), style: {
|
|
865
|
-
height: 38,
|
|
866
|
-
width: 42,
|
|
867
|
-
alignItems: "center",
|
|
868
|
-
justifyContent: "center",
|
|
869
|
-
display: "flex",
|
|
870
|
-
}, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "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" }) }) })] }) })] })] }, filter.field + index));
|
|
871
|
-
}), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleAddFilter, label: "Add new filter +" }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleAddDashboardSubmit, label: "Add Dashboard +" })] })] }) }));
|
|
872
|
-
}
|
|
873
|
-
exports.AddDashboardModal = AddDashboardModal;
|
|
874
|
-
function TableCell({ table, clickTableCell }) {
|
|
875
|
-
const handleClickTableCell = () => {
|
|
876
|
-
clickTableCell(table);
|
|
877
|
-
};
|
|
878
|
-
return ((0, jsx_runtime_1.jsxs)("div", { onClick: handleClickTableCell, style: {
|
|
879
|
-
marginBottom: "54px",
|
|
880
|
-
flex: 1,
|
|
881
|
-
minWidth: "540px",
|
|
882
|
-
maxWidth: "540px",
|
|
883
|
-
cursor: "pointer",
|
|
884
|
-
}, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "row", alignItems: "center" }, children: (0, jsx_runtime_1.jsx)("h3", { style: { color: "#384151" }, children: table.displayName }) }), (0, jsx_runtime_1.jsx)(prism_react_renderer_1.default, { ...prism_react_renderer_1.defaultProps, theme: nightOwlLight_1.default, code: table.viewQuery, language: "sql", children: ({ className, style, tokens, getLineProps, getTokenProps }) => ((0, jsx_runtime_1.jsx)("pre", { className: className, style: {
|
|
885
|
-
...style,
|
|
886
|
-
textAlign: "left",
|
|
887
|
-
margin: "1em 0",
|
|
888
|
-
padding: "0.5em",
|
|
889
|
-
overflow: "scroll",
|
|
890
|
-
maxHeight: 120,
|
|
891
|
-
maxWidth: 520,
|
|
892
|
-
// lineHeight: "1.3em",
|
|
893
|
-
// height: "1.3em",
|
|
894
|
-
}, children: tokens.map((line, i) => ((0, jsx_runtime_1.jsx)("div", { ...getLineProps({ line, key: i }), children: line.map((token, key) => ((0, jsx_runtime_1.jsx)("span", { ...getTokenProps({ token, key }) }, key))) }, i))) })) })] }, table.displayName));
|
|
895
|
-
}
|
|
896
|
-
exports.TableCell = TableCell;
|
|
897
|
-
const SQLEditorComponent = ({ query, setQuery,
|
|
898
|
-
// handleRunQuery,
|
|
899
|
-
theme,
|
|
900
|
-
// defineEditorTheme,
|
|
901
|
-
// setEditorTheme,
|
|
902
|
-
}) => {
|
|
903
|
-
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
904
|
-
const [rows, setRows] = (0, react_1.useState)([]);
|
|
905
|
-
const [columns, setColumns] = (0, react_1.useState)([]);
|
|
906
|
-
const [fields, setFields] = (0, react_1.useState)([]);
|
|
907
|
-
// const [activeQuery] = useContext(ActiveQueryContext);
|
|
908
|
-
const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
|
|
909
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
910
|
-
background: theme.backgroundColor,
|
|
911
|
-
// maxHeight: 700,
|
|
912
|
-
// width: "100%",
|
|
913
|
-
minWidth: 450,
|
|
914
|
-
// overflowY: "scroll",
|
|
915
|
-
// padding: "20px 30px 20px 20px",
|
|
916
|
-
// marginLeft: 20,
|
|
917
|
-
borderRadius: 6,
|
|
918
|
-
overflow: "hidden",
|
|
919
|
-
}, children: [(0, jsx_runtime_1.jsx)(react_2.SQLEditor, { containerStyle: { height: "calc(100vh - 270px)", width: "100%" }, onChangeQuery: (query) => setQuery(query), onChangeData: (data) => setRows(data), onChangeColumns: (columns) => setColumns(columns), onChangeFields: (fields) => setFields(fields), defaultQuery: state.activeQuery ? state.activeQuery : "" }), rows.length > 0 && ((0, jsx_runtime_1.jsx)("button", { style: {
|
|
920
|
-
height: 36,
|
|
921
|
-
marginLeft: 250,
|
|
922
|
-
marginTop: 20,
|
|
923
|
-
background: theme.primaryButtonColor,
|
|
924
|
-
color: theme.backgroundColor,
|
|
925
|
-
display: "flex",
|
|
926
|
-
borderRadius: 6,
|
|
927
|
-
alignItems: "center",
|
|
928
|
-
justifyContent: "center",
|
|
929
|
-
outline: "none",
|
|
930
|
-
cursor: "pointer",
|
|
931
|
-
fontFamily: theme.fontFamily,
|
|
932
|
-
fontWeight: theme.buttonFontWeight || 600,
|
|
933
|
-
border: "none",
|
|
934
|
-
fontSize: 14,
|
|
935
|
-
paddingLeft: 20,
|
|
936
|
-
paddingRight: 20,
|
|
937
|
-
}, onClick: () => setIsOpen(true), children: "Add to dashboard" })), (0, jsx_runtime_1.jsx)(react_2.AddToDashboardModal, { isOpen: isOpen, setIsOpen: setIsOpen, rows: rows, columns: columns, query: query, showTableFormatOptions: true, showDateFieldOptions: true, showAccessControlOptions: true, fields: fields })] }));
|
|
938
|
-
};
|
|
939
|
-
exports.SQLEditorComponent = SQLEditorComponent;
|
|
940
|
-
const SchemaListComponent = ({ schema, theme }) => {
|
|
941
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
942
|
-
background: theme.backgroundColor,
|
|
943
|
-
maxHeight: 700,
|
|
944
|
-
width: 300,
|
|
945
|
-
minWidth: 300,
|
|
946
|
-
overflowY: "scroll",
|
|
947
|
-
// maxHeight: "100%",
|
|
948
|
-
paddingLeft: 20,
|
|
949
|
-
paddingRight: 20,
|
|
950
|
-
}, children: schema.map((elem, index) => ((0, jsx_runtime_1.jsx)(SchemaItem, { elem: elem, theme: theme, index: index }, elem.displayName + index))) }));
|
|
951
|
-
};
|
|
952
|
-
function SchemaItem({ elem, theme, index }) {
|
|
953
|
-
const [isOpen, setIsOpen] = (0, react_1.useState)(index === 0);
|
|
954
|
-
const schemaContainerStyle = {
|
|
955
|
-
display: "flex",
|
|
956
|
-
flexDirection: "column",
|
|
957
|
-
// WebkitTouchCallout: "none",
|
|
958
|
-
// WebkitUserSelect: "none",
|
|
959
|
-
// KhtmlUserSelect: "none",
|
|
960
|
-
// MozUserSelect: "none",
|
|
961
|
-
// msUserSelect: "none",
|
|
962
|
-
// userSelect: "none",
|
|
963
|
-
};
|
|
964
|
-
const schemaRowStyle = {
|
|
965
|
-
display: "flex",
|
|
966
|
-
flexDirection: "row",
|
|
967
|
-
alignItems: "center",
|
|
968
|
-
width: "100%",
|
|
969
|
-
justifyContent: "space-between",
|
|
970
|
-
cursor: "pointer",
|
|
971
|
-
};
|
|
972
|
-
const schemaRowHoverStyle = {
|
|
973
|
-
background: theme.selectUnderlayColor,
|
|
974
|
-
};
|
|
975
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: schemaContainerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: { ...schemaRowStyle, ...(isOpen && schemaRowHoverStyle) }, onClick: () => setIsOpen(!isOpen), children: [(0, jsx_runtime_1.jsx)("p", { style: {
|
|
976
|
-
marginLeft: theme.padding,
|
|
977
|
-
fontSize: theme.fontSize,
|
|
978
|
-
color: "#384151",
|
|
979
|
-
fontWeight: "500",
|
|
980
|
-
}, children: elem.displayName }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
981
|
-
display: "flex",
|
|
982
|
-
alignItems: "center",
|
|
983
|
-
justifyContent: "center",
|
|
984
|
-
// paddingRight: 25,
|
|
985
|
-
paddingTop: 20,
|
|
986
|
-
paddingBottom: 20,
|
|
987
|
-
paddingLeft: 0,
|
|
988
|
-
cursor: "pointer",
|
|
989
|
-
}, children: isOpen ? ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "h-5 w-5 text-gray-400", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" }) })) : ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "h-5 w-5", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })) })] }), isOpen ? ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
990
|
-
paddingBottom: theme.padding,
|
|
991
|
-
display: "flex",
|
|
992
|
-
flexDirection: "column",
|
|
993
|
-
paddingLeft: theme.padding,
|
|
994
|
-
paddingRight: theme.padding,
|
|
995
|
-
}, children: elem.columns.map((elem, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
996
|
-
paddingTop: theme.padding,
|
|
997
|
-
display: "flex",
|
|
998
|
-
flexDirection: "row",
|
|
999
|
-
alignItems: "center",
|
|
1000
|
-
justifyContent: "space-between",
|
|
1001
|
-
}, children: [(0, jsx_runtime_1.jsx)("div", { title: elem.displayName, className: "text-gray-500", style: {
|
|
1002
|
-
fontSize: 13,
|
|
1003
|
-
// color: theme.secondaryFontColor,
|
|
1004
|
-
whiteSpace: "nowrap",
|
|
1005
|
-
padding: 0,
|
|
1006
|
-
margin: 0,
|
|
1007
|
-
textOverflow: "ellipsis",
|
|
1008
|
-
overflow: "hidden",
|
|
1009
|
-
width: 200,
|
|
1010
|
-
maxWidth: 200,
|
|
1011
|
-
}, children: elem.displayName }), (0, jsx_runtime_1.jsx)("div", { className: "text-gray-500", title: elem.displayName, style: {
|
|
1012
|
-
fontSize: 13,
|
|
1013
|
-
color: theme.secondaryFontColor,
|
|
1014
|
-
padding: 0,
|
|
1015
|
-
margin: 0,
|
|
1016
|
-
}, children: elem.fieldType })] }, elem.displayName + elem.index))) })) : null] }));
|
|
1017
|
-
}
|
|
1018
|
-
function defineEditorTheme(monaco, theme) {
|
|
1019
|
-
monaco.editor.defineTheme("onedark", {
|
|
1020
|
-
base: theme.darkMode ? "vs-dark" : "vs",
|
|
1021
|
-
inherit: true,
|
|
1022
|
-
rules: [
|
|
1023
|
-
{
|
|
1024
|
-
token: "comment",
|
|
1025
|
-
foreground: "#5d7988",
|
|
1026
|
-
fontStyle: "italic",
|
|
1027
|
-
},
|
|
1028
|
-
{ token: "constant", foreground: "#e06c75" },
|
|
1029
|
-
],
|
|
1030
|
-
colors: {
|
|
1031
|
-
"editor.background": "#F9F9F9",
|
|
1032
|
-
},
|
|
1033
|
-
});
|
|
1034
|
-
}
|
|
1035
|
-
exports.defineEditorTheme = defineEditorTheme;
|
|
1036
|
-
function setEditorTheme(editor, monaco) {
|
|
1037
|
-
try {
|
|
1038
|
-
monaco.editor.setTheme("onedark");
|
|
1039
|
-
}
|
|
1040
|
-
catch (e) {
|
|
1041
|
-
console.log("ERROR: ", e);
|
|
1042
|
-
}
|
|
1043
|
-
}
|
|
1044
|
-
exports.setEditorTheme = setEditorTheme;
|
|
1045
|
-
function isValidDate(d) {
|
|
1046
|
-
return d instanceof Date && !isNaN(d);
|
|
1047
|
-
}
|
|
1048
|
-
exports.isValidDate = isValidDate;
|
|
1049
|
-
const isArrayOfValidDates = (arr, field) => arr.every((d) => new Date(d[field]) instanceof Date && !isNaN(new Date(d[field])));
|
|
1050
|
-
exports.isArrayOfValidDates = isArrayOfValidDates;
|
|
1051
|
-
function formatDateBuckets(startDate, endDate) {
|
|
1052
|
-
// Calculate the distance in hours
|
|
1053
|
-
const distanceInHours = Math.abs(differenceInHours(endDate, startDate));
|
|
1054
|
-
// Check if the distance is less than or equal to one hour
|
|
1055
|
-
if (distanceInHours <= 1) {
|
|
1056
|
-
return {
|
|
1057
|
-
unit: "hour",
|
|
1058
|
-
format: "h a",
|
|
1059
|
-
startOf: startOfHour,
|
|
1060
|
-
};
|
|
1061
|
-
}
|
|
1062
|
-
// Calculate the distance in days
|
|
1063
|
-
const distanceInDays = Math.abs(differenceInDays(endDate, startDate));
|
|
1064
|
-
// Check if the distance is less than or equal to one day
|
|
1065
|
-
if (distanceInDays <= 1) {
|
|
1066
|
-
return {
|
|
1067
|
-
unit: "day",
|
|
1068
|
-
format: "MMM d",
|
|
1069
|
-
startOf: startOfDay,
|
|
1070
|
-
};
|
|
1071
|
-
}
|
|
1072
|
-
// Calculate the distance in months
|
|
1073
|
-
const distanceInMonths = Math.abs(differenceInMonths(endDate, startDate));
|
|
1074
|
-
// Check if the distance is less than or equal to one month
|
|
1075
|
-
if (distanceInMonths <= 1) {
|
|
1076
|
-
return {
|
|
1077
|
-
unit: "month",
|
|
1078
|
-
format: "MMM yyyy",
|
|
1079
|
-
startOf: startOfMonth,
|
|
1080
|
-
};
|
|
1081
|
-
}
|
|
1082
|
-
// Calculate the distance in years
|
|
1083
|
-
const distanceInYears = Math.abs(differenceInYears(endDate, startDate));
|
|
1084
|
-
// Check if the distance is less than or equal to one year
|
|
1085
|
-
if (distanceInYears <= 1) {
|
|
1086
|
-
return {
|
|
1087
|
-
unit: "year",
|
|
1088
|
-
format: "yyyy",
|
|
1089
|
-
startOf: startOfYear,
|
|
1090
|
-
};
|
|
1091
|
-
}
|
|
1092
|
-
// Otherwise, the distance is more than one year
|
|
1093
|
-
return {
|
|
1094
|
-
unit: "year",
|
|
1095
|
-
format: "yyyy",
|
|
1096
|
-
startOf: startOfYear,
|
|
1097
|
-
};
|
|
1098
|
-
}
|
|
1099
|
-
exports.formatDateBuckets = formatDateBuckets;
|
|
1100
|
-
const POSTGRES_DATE_TYPES = [
|
|
1101
|
-
"timestamp",
|
|
1102
|
-
"date",
|
|
1103
|
-
"timestamptz",
|
|
1104
|
-
"time",
|
|
1105
|
-
"timetz",
|
|
1106
|
-
];
|
|
1107
|
-
const FORMAT_OPTIONS = [
|
|
1108
|
-
{ value: "whole_number", label: "whole number" },
|
|
1109
|
-
{ value: "one_decimal_place", label: "one decimal place" },
|
|
1110
|
-
{ value: "dollar_amount", label: "dollar amount" },
|
|
1111
|
-
{ value: "MMM_yyyy", label: "month" },
|
|
1112
|
-
{ value: "MMM_dd-MMM_dd", label: "week" },
|
|
1113
|
-
{ value: "MMM_dd_yyyy", label: "day" },
|
|
1114
|
-
{ value: "MMM_dd_hh:mm_ap_pm", label: "day and time" },
|
|
1115
|
-
{ value: "hh_ap_pm", label: "hour" },
|
|
1116
|
-
{ value: "percent", label: "percent" },
|
|
1117
|
-
{ value: "string", label: "string" },
|
|
1118
|
-
];
|
|
1119
|
-
function Report({ reportId, saveDashboardItem, isOpen, setIsOpen, isEditQueryOpen, setIsEditQueryOpen, SecondaryButtonComponent, ButtonComponent, deleteReport, updateQuery, OrganizationSelectComponent, ModalComponent, NavigateToDashboardBuilder, }) {
|
|
1120
|
-
const { data, loading, error } = (0, react_2.useQuill)(reportId);
|
|
1121
|
-
const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
|
|
1122
|
-
const downloadCSV = () => {
|
|
1123
|
-
// report.rows
|
|
1124
|
-
if (!data) {
|
|
1125
|
-
return;
|
|
1126
|
-
}
|
|
1127
|
-
const json = data.rows; // JSON data passed as a prop
|
|
1128
|
-
const fields = Object.keys(json[0]); // Assumes all objects have same keys
|
|
1129
|
-
const csvRows = [];
|
|
1130
|
-
// Header row
|
|
1131
|
-
csvRows.push(fields.join(","));
|
|
1132
|
-
// Data rows
|
|
1133
|
-
for (let row of json) {
|
|
1134
|
-
let values = fields.map((field) => JSON.stringify(row[field] || ""));
|
|
1135
|
-
csvRows.push(values.join(","));
|
|
1136
|
-
}
|
|
1137
|
-
// Create CSV string and create a 'blob' with it
|
|
1138
|
-
const csvString = csvRows.join("\r\n");
|
|
1139
|
-
const csvBlob = new Blob([csvString], { type: "text/csv" });
|
|
1140
|
-
// Create a download link and click it
|
|
1141
|
-
const downloadLink = document.createElement("a");
|
|
1142
|
-
downloadLink.download = "download.csv";
|
|
1143
|
-
downloadLink.href = URL.createObjectURL(csvBlob);
|
|
1144
|
-
downloadLink.style.display = "none";
|
|
1145
|
-
document.body.appendChild(downloadLink);
|
|
1146
|
-
downloadLink.click();
|
|
1147
|
-
document.body.removeChild(downloadLink);
|
|
1148
|
-
};
|
|
1149
|
-
const goBack = () => {
|
|
1150
|
-
// setActiveComponent("Dashboards");
|
|
1151
|
-
dispatch({ type: "SET_ACTIVE_COMPONENT", payload: "Dashboards" });
|
|
1152
|
-
};
|
|
1153
|
-
if (!data || loading) {
|
|
1154
|
-
return null;
|
|
1155
|
-
}
|
|
1156
|
-
if (error) {
|
|
1157
|
-
return (0, jsx_runtime_1.jsx)("div", { children: error });
|
|
1158
|
-
}
|
|
1159
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: { paddingLeft: 40, paddingRight: 40 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
1160
|
-
// width: 'calc(100vw - 30px)',
|
|
1161
|
-
display: "flex",
|
|
1162
|
-
position: "fixed",
|
|
1163
|
-
backgroundColor: "white",
|
|
1164
|
-
zIndex: 1,
|
|
1165
|
-
left: 0,
|
|
1166
|
-
right: 0,
|
|
1167
|
-
top: 0,
|
|
1168
|
-
flexDirection: "row",
|
|
1169
|
-
paddingTop: 85,
|
|
1170
|
-
alignItems: "center",
|
|
1171
|
-
justifyContent: "space-between",
|
|
1172
|
-
paddingLeft: "30px",
|
|
1173
|
-
paddingRight: "30px",
|
|
1174
|
-
borderBottomWidth: 1,
|
|
1175
|
-
borderTopWidth: 0,
|
|
1176
|
-
borderLeftWidth: 0,
|
|
1177
|
-
borderRightWidth: 0,
|
|
1178
|
-
borderStyle: "solid",
|
|
1179
|
-
borderColor: exports.theme.borderColor,
|
|
1180
|
-
paddingBottom: 20,
|
|
1181
|
-
boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.07)",
|
|
1182
|
-
// paddingRight: '50px',
|
|
1183
|
-
// position: 'absolute'
|
|
1184
|
-
// // zIndex: 10
|
|
1185
|
-
}, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
1186
|
-
display: "flex",
|
|
1187
|
-
flexDirection: "row",
|
|
1188
|
-
alignItems: "flex-end",
|
|
1189
|
-
justifyContent: "space-between",
|
|
1190
|
-
width: "100%",
|
|
1191
|
-
// marginLeft: '25px'
|
|
1192
|
-
}, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
|
|
1193
|
-
display: "flex",
|
|
1194
|
-
flexDirection: "row",
|
|
1195
|
-
alignItems: "center",
|
|
1196
|
-
paddingBottom: 4,
|
|
1197
|
-
}, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "\u2190 Back", onClick: goBack }), (0, jsx_runtime_1.jsx)("h1", { style: {
|
|
1198
|
-
fontSize: "36px",
|
|
1199
|
-
paddingTop: "0px",
|
|
1200
|
-
fontWeight: "600",
|
|
1201
|
-
color: "#384151",
|
|
1202
|
-
margin: 0,
|
|
1203
|
-
paddingLeft: 16,
|
|
1204
|
-
}, children: data.name })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
1205
|
-
display: "flex",
|
|
1206
|
-
flexDirection: "row",
|
|
1207
|
-
alignItems: "center",
|
|
1208
|
-
}, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: "20px" } }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "column" }, children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
1209
|
-
display: "flex",
|
|
1210
|
-
flexDirection: "row",
|
|
1211
|
-
alignItems: "flex-end",
|
|
1212
|
-
gap: 16,
|
|
1213
|
-
}, children: (0, jsx_runtime_1.jsx)(components_1.OrgSelect, { environment: state.environment, setEnvironment: (env) => dispatch({ type: "SET_ENVIRONMENT", payload: env }), organizations: state.organizations, organizationId: state.organizationId, setOrganizationId: (orgId) => dispatch({ type: "SET_ORGANIZATION_ID", payload: orgId }), theme: state.theme }) }) })] })] }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 240 } }), (0, jsx_runtime_1.jsx)(react_2.Chart, { chartId: reportId, colors: exports.theme.chartColors, containerStyle: {
|
|
1214
|
-
width: "calc(100vw - 80px)",
|
|
1215
|
-
height: data.chartType === "table" ? 600 : 400,
|
|
1216
|
-
} }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
1217
|
-
display: "flex",
|
|
1218
|
-
alignItems: "center",
|
|
1219
|
-
gap: 16,
|
|
1220
|
-
marginTop: 20,
|
|
1221
|
-
}, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Edit chart", onClick: () => setIsOpen(true) }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Edit query", onClick: () => setIsEditQueryOpen(true) }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Open query", onClick: () => {
|
|
1222
|
-
// setActiveQuery(data.queryString);
|
|
1223
|
-
dispatch({ type: "SET_ACTIVE_QUERY", payload: data.queryString });
|
|
1224
|
-
// setActiveComponent("SQL editor");
|
|
1225
|
-
if (state.navigateToDashboardBuilder) {
|
|
1226
|
-
state.navigateToDashboardBuilder();
|
|
1227
|
-
}
|
|
1228
|
-
} }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Delete", onClick: deleteReport })] }), data.chartType !== "table" && ((0, jsx_runtime_1.jsx)(react_2.Table
|
|
1229
|
-
// containerStyle={{ width: "80vw", height: 1100 }}
|
|
1230
|
-
, {
|
|
1231
|
-
// containerStyle={{ width: "80vw", height: 1100 }}
|
|
1232
|
-
containerStyle: { height: 400, width: "100%", marginTop: 24 }, chartId: reportId })), (0, jsx_runtime_1.jsx)(EditVisualizationModal, { isOpen: isOpen, setIsOpen: setIsOpen, report: data, data: data.rows, query: data.queryString, columns: data.columns, fields: data.fields }), (0, jsx_runtime_1.jsx)(EditQueryModal, { theme: exports.theme, ModalComponent: ModalComponent, query: data.queryString, report: data, isOpen: isEditQueryOpen, setIsOpen: setIsEditQueryOpen, updateQuery: updateQuery, ButtonComponent: ButtonComponent })] }));
|
|
1233
|
-
}
|
|
1234
|
-
function EditQueryModal({ query, report, isOpen, setIsOpen, updateQuery, ModalComponent, ButtonComponent, theme, }) {
|
|
1235
|
-
const [newQuery, setNewQuery] = (0, react_1.useState)(query);
|
|
1236
|
-
const hasQueryChanged = (0, react_1.useMemo)(() => {
|
|
1237
|
-
return newQuery !== query;
|
|
1238
|
-
}, [newQuery]);
|
|
1239
|
-
if (!query || !report) {
|
|
1240
|
-
return null;
|
|
1241
|
-
}
|
|
1242
|
-
return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => {
|
|
1243
|
-
setIsOpen(false);
|
|
1244
|
-
}, children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
1245
|
-
display: "flex",
|
|
1246
|
-
alignItems: "center",
|
|
1247
|
-
justifyContent: "center",
|
|
1248
|
-
}, children: (0, jsx_runtime_1.jsxs)("div", { style: { background: "white" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
1249
|
-
fontFamily: theme.fontFamily,
|
|
1250
|
-
color: theme.primaryTextColor,
|
|
1251
|
-
fontSize: 20,
|
|
1252
|
-
fontWeight: 600,
|
|
1253
|
-
}, children: "Edit query" }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
1254
|
-
background: theme.backgroundColor,
|
|
1255
|
-
height: 422,
|
|
1256
|
-
maxHeight: 422,
|
|
1257
|
-
marginTop: 24,
|
|
1258
|
-
minHeight: 422,
|
|
1259
|
-
width: 722,
|
|
1260
|
-
}, children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
1261
|
-
background: theme.editorBackgroundColor || theme.backgroundColor,
|
|
1262
|
-
marginRight: theme.padding,
|
|
1263
|
-
borderBottomRightRadius: 4,
|
|
1264
|
-
borderBottomLeftRadius: 4,
|
|
1265
|
-
borderTopRightRadius: 4,
|
|
1266
|
-
borderTopLeftRadius: 4,
|
|
1267
|
-
overflow: "hidden",
|
|
1268
|
-
}, children: (0, jsx_runtime_1.jsx)(react_3.default, { height: "400px", defaultLanguage: "pgsql", defaultValue: "", value: newQuery, loading: (0, jsx_runtime_1.jsx)("div", {}), options: {
|
|
1269
|
-
wordWrap: "on",
|
|
1270
|
-
minimap: {
|
|
1271
|
-
enabled: false,
|
|
1272
|
-
},
|
|
1273
|
-
padding: { top: 16 },
|
|
1274
|
-
}, onChange: (query) => setNewQuery(query), beforeMount: (monaco) => defineEditorTheme(monaco, theme), onMount: setEditorTheme }) }) }), (0, jsx_runtime_1.jsx)("button", {
|
|
1275
|
-
// disabled={isSubmitting}
|
|
1276
|
-
theme: theme, onClick: hasQueryChanged
|
|
1277
|
-
? () => updateQuery(report?._id, newQuery)
|
|
1278
|
-
: undefined, style: {
|
|
1279
|
-
borderRadius: 6,
|
|
1280
|
-
backgroundColor: hasQueryChanged
|
|
1281
|
-
? "#384151"
|
|
1282
|
-
: "rgba(56, 65, 81, 0.7)",
|
|
1283
|
-
// padding: "0.625rem 1rem", // combined px-4 and py-2.5
|
|
1284
|
-
fontSize: "14px",
|
|
1285
|
-
fontWeight: "600",
|
|
1286
|
-
color: "white",
|
|
1287
|
-
paddingLeft: 12,
|
|
1288
|
-
paddingRight: 12,
|
|
1289
|
-
paddingTop: 6,
|
|
1290
|
-
paddingBottom: 6,
|
|
1291
|
-
// Hover and focus styles can't be applied directly with inline styles. You'll need JavaScript or external CSS for that.
|
|
1292
|
-
}, children: "Save changes" })] }) }) }));
|
|
1293
|
-
}
|
|
1294
|
-
function EditVisualizationModal({ isOpen, setIsOpen, report, columns, data, fields, query, }) {
|
|
1295
|
-
// const [tables] = useContext(TablesContext);
|
|
1296
|
-
// const [organization] = useContext(OrganizationContext);
|
|
1297
|
-
if (!report && !data?.length) {
|
|
1298
|
-
return null;
|
|
1299
|
-
}
|
|
1300
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "fixed inset-0 overflow-y-auto relative", style: { zIndex: 120 }, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-black/30", "aria-hidden": "true", onClick: () => setIsOpen(false) }), (0, jsx_runtime_1.jsx)("div", { className: "flex min-h-full items-center justify-center p-4", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-white px-7 py-7 rounded-lg", children: (0, jsx_runtime_1.jsx)(react_2.ChartEditor, { isOpen: isOpen, setIsOpen: setIsOpen, chartId: report._id, admin: true }) }) })] })) }));
|
|
1301
|
-
}
|
|
1302
|
-
function ReportWrapper({ SecondaryButtonComponent, ButtonComponent, ModalComponent, SelectComponent, OrganizationSelectComponent, organizationId, queryEndpoint, queryHeaders, withCredentials, }) {
|
|
1303
|
-
const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
|
|
1304
|
-
// const [organization, setOrganization] = useContext(OrganizationContext);
|
|
1305
|
-
// const [client] = useContext(ClientContext);
|
|
1306
|
-
// const [environment] = useContext(EnvironmentContext);
|
|
1307
|
-
// const [reportId, setReportId] = useContext(ReportIdContext);
|
|
1308
|
-
let [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
1309
|
-
const [isEditQueryOpen, setIsEditQueryOpen] = (0, react_1.useState)(false);
|
|
1310
|
-
// const [activeComponent, setActiveComponent] = useContext(
|
|
1311
|
-
// ActiveComponentContext
|
|
1312
|
-
// );
|
|
1313
|
-
const updateQuery = async (dashboardItemId, query) => {
|
|
1314
|
-
if (!state.client || !dashboardItemId || !query) {
|
|
1315
|
-
return;
|
|
1316
|
-
}
|
|
1317
|
-
let responseData;
|
|
1318
|
-
if (queryEndpoint) {
|
|
1319
|
-
const response = await fetch(queryEndpoint, {
|
|
1320
|
-
method: "POST",
|
|
1321
|
-
headers: {
|
|
1322
|
-
...queryHeaders,
|
|
1323
|
-
"Content-Type": "application/json",
|
|
1324
|
-
},
|
|
1325
|
-
body: JSON.stringify({
|
|
1326
|
-
metadata: organizationId
|
|
1327
|
-
? {
|
|
1328
|
-
orgId: organizationId,
|
|
1329
|
-
task: "edit_query",
|
|
1330
|
-
id: state.reportId,
|
|
1331
|
-
query,
|
|
1332
|
-
}
|
|
1333
|
-
: { task: "edit_query", id: state.reportId, query },
|
|
1334
|
-
}),
|
|
1335
|
-
credentials: withCredentials ? "include" : "omit",
|
|
1336
|
-
});
|
|
1337
|
-
responseData = await response.json();
|
|
1338
|
-
}
|
|
1339
|
-
else {
|
|
1340
|
-
const url = `https://quill-344421.uc.r.appspot.com/updatequery/${state.client._id}/${organizationId}/`;
|
|
1341
|
-
// const url = `https://quill-344421.uc.r.appspot.com/updatequery/${state.client._id}/${organizationId}/`;
|
|
1342
|
-
const requestBody = {
|
|
1343
|
-
dashboardItemId,
|
|
1344
|
-
query,
|
|
1345
|
-
};
|
|
1346
|
-
const response = await fetch(url, {
|
|
1347
|
-
method: "POST",
|
|
1348
|
-
headers: {
|
|
1349
|
-
"Content-Type": "application/json",
|
|
1350
|
-
Authorization: "Bearer ",
|
|
1351
|
-
environment: state.environment || undefined,
|
|
1352
|
-
},
|
|
1353
|
-
body: JSON.stringify(requestBody),
|
|
1354
|
-
});
|
|
1355
|
-
// To get JSON data from the response:
|
|
1356
|
-
responseData = await response.json();
|
|
1357
|
-
}
|
|
1358
|
-
if (responseData) {
|
|
1359
|
-
if (responseData.error) {
|
|
1360
|
-
alert(`Failed to save query. ${typeof responseData.error === "string"
|
|
1361
|
-
? responseData.error
|
|
1362
|
-
: responseData.error?.routine === "errorMissingColumn"
|
|
1363
|
-
? "A column was referenced that doesn't exist."
|
|
1364
|
-
: responseData.error?.routine
|
|
1365
|
-
? responseData.error?.routine
|
|
1366
|
-
: "Error parsing SQL query"}`);
|
|
1367
|
-
return;
|
|
1368
|
-
}
|
|
1369
|
-
setIsEditQueryOpen(false);
|
|
1370
|
-
}
|
|
1371
|
-
};
|
|
1372
|
-
const deleteReport = async () => {
|
|
1373
|
-
if (!state.reportId) {
|
|
1374
|
-
return;
|
|
1375
|
-
}
|
|
1376
|
-
if (!state.client) {
|
|
1377
|
-
return;
|
|
1378
|
-
}
|
|
1379
|
-
let responseData;
|
|
1380
|
-
if (queryEndpoint) {
|
|
1381
|
-
const response = await fetch(queryEndpoint, {
|
|
1382
|
-
method: "POST",
|
|
1383
|
-
headers: {
|
|
1384
|
-
...queryHeaders,
|
|
1385
|
-
"Content-Type": "application/json",
|
|
1386
|
-
},
|
|
1387
|
-
body: JSON.stringify({
|
|
1388
|
-
metadata: organizationId
|
|
1389
|
-
? {
|
|
1390
|
-
orgId: organizationId,
|
|
1391
|
-
task: "delete",
|
|
1392
|
-
id: state.reportId,
|
|
1393
|
-
clientId: state.client._id,
|
|
1394
|
-
}
|
|
1395
|
-
: { task: "delete", id: state.reportId, clientId: state.client._id },
|
|
1396
|
-
}),
|
|
1397
|
-
credentials: withCredentials ? "include" : "omit", // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
|
|
1398
|
-
});
|
|
1399
|
-
responseData = await response.json(); // If the server returns JSON data
|
|
1400
|
-
}
|
|
1401
|
-
else {
|
|
1402
|
-
const url = `https://quill-344421.uc.r.appspot.com/deletedash/${state.client._id}/${organizationId}/`;
|
|
1403
|
-
const requestBody = {
|
|
1404
|
-
dashboardItemId: state.reportId,
|
|
1405
|
-
};
|
|
1406
|
-
const response = await fetch(url, {
|
|
1407
|
-
method: "POST",
|
|
1408
|
-
headers: {
|
|
1409
|
-
"Content-Type": "application/json",
|
|
1410
|
-
environment: state.environment || undefined,
|
|
1411
|
-
},
|
|
1412
|
-
body: JSON.stringify(requestBody),
|
|
1413
|
-
});
|
|
1414
|
-
// To get JSON data from the response:
|
|
1415
|
-
responseData = await response.json();
|
|
1416
|
-
}
|
|
1417
|
-
if (responseData) {
|
|
1418
|
-
dispatch({ type: "SET_ACTIVE_COMPONENT", payload: "Dashboards" });
|
|
1419
|
-
}
|
|
1420
|
-
};
|
|
1421
|
-
return ((0, jsx_runtime_1.jsx)(Report, { reportId: state.reportId, updateQuery: updateQuery, isOpen: isOpen, setIsOpen: setIsOpen, isEditQueryOpen: isEditQueryOpen, setIsEditQueryOpen: setIsEditQueryOpen, deleteReport: deleteReport, SecondaryButtonComponent: SecondaryButtonComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, SelectComponent: SelectComponent, OrganizationSelectComponent: OrganizationSelectComponent }));
|
|
1422
|
-
}
|
|
1423
|
-
exports.ReportWrapper = ReportWrapper;
|
|
1424
|
-
const measuringConfig = {
|
|
1425
|
-
droppable: {
|
|
1426
|
-
strategy: core_1.MeasuringStrategy.Always,
|
|
1427
|
-
},
|
|
1428
|
-
};
|
|
1429
|
-
function ReorderableList({ initialItems, itemMap, ButtonComponent, closeModal, }) {
|
|
1430
|
-
const [items, setItems] = (0, react_1.useState)([]);
|
|
1431
|
-
// const [client] = useContext(ClientContext);
|
|
1432
|
-
const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, {
|
|
1433
|
-
coordinateGetter: sortable_1.sortableKeyboardCoordinates,
|
|
1434
|
-
}), (0, core_1.useSensor)(core_1.TouchSensor, {
|
|
1435
|
-
activationConstraint: "",
|
|
1436
|
-
}));
|
|
1437
|
-
(0, react_1.useEffect)(() => {
|
|
1438
|
-
setItems(initialItems
|
|
1439
|
-
.sort((a, b) => {
|
|
1440
|
-
if (a.order === undefined && b.order === undefined)
|
|
1441
|
-
return 0; // both items don't have the 'order' field
|
|
1442
|
-
if (a.order === undefined)
|
|
1443
|
-
return 1; // only 'a' doesn't have the 'order' field, place 'a' last
|
|
1444
|
-
if (b.order === undefined)
|
|
1445
|
-
return -1; // only 'b' doesn't have the 'order' field, place 'b' last
|
|
1446
|
-
return a.order - b.order; // both items have the 'order' field, sort numerically
|
|
1447
|
-
})
|
|
1448
|
-
.map((elem) => elem._id));
|
|
1449
|
-
}, [initialItems]);
|
|
1450
|
-
const handleSaveChanges = async () => {
|
|
1451
|
-
if (!client) {
|
|
1452
|
-
return;
|
|
1453
|
-
}
|
|
1454
|
-
if (!items.length) {
|
|
1455
|
-
return;
|
|
1456
|
-
}
|
|
1457
|
-
try {
|
|
1458
|
-
const response = await fetch("https://quill-344421.uc.r.appspot.com/dashorder/", {
|
|
1459
|
-
method: "POST",
|
|
1460
|
-
headers: {
|
|
1461
|
-
"Content-Type": "application/json",
|
|
1462
|
-
},
|
|
1463
|
-
body: JSON.stringify({
|
|
1464
|
-
publicKey: client._id,
|
|
1465
|
-
orderArray: items,
|
|
1466
|
-
}),
|
|
1467
|
-
});
|
|
1468
|
-
if (!response.ok) {
|
|
1469
|
-
const errorData = await response.json();
|
|
1470
|
-
throw new Error(`Error: ${errorData.error || "Unknown error"}`);
|
|
1471
|
-
}
|
|
1472
|
-
const data = await response.json();
|
|
1473
|
-
closeModal();
|
|
1474
|
-
}
|
|
1475
|
-
catch (error) {
|
|
1476
|
-
console.error(error.message);
|
|
1477
|
-
}
|
|
1478
|
-
};
|
|
1479
|
-
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCenter, onDragEnd: handleDragEnd, measuring: measuringConfig, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items, strategy: sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
1480
|
-
background: "white",
|
|
1481
|
-
position: "fixed",
|
|
1482
|
-
width: "100%",
|
|
1483
|
-
height: "calc(100% - 40px)",
|
|
1484
|
-
overflowY: "scroll",
|
|
1485
|
-
overflowX: "hidden",
|
|
1486
|
-
maxWidth: 700,
|
|
1487
|
-
}, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 80 } }), items.map((id) => ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, name: itemMap?.get(id).name }, id))), (0, jsx_runtime_1.jsx)("div", { style: { height: 100, width: "100%" } })] }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
1488
|
-
height: 80,
|
|
1489
|
-
paddingTop: 20,
|
|
1490
|
-
width: "100%",
|
|
1491
|
-
background: "white",
|
|
1492
|
-
position: "absolute",
|
|
1493
|
-
bottom: -20,
|
|
1494
|
-
left: 0,
|
|
1495
|
-
right: 0,
|
|
1496
|
-
}, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleSaveChanges, label: "Save changes" }) })] }));
|
|
1497
|
-
function handleDragEnd(event) {
|
|
1498
|
-
const { active, over } = event;
|
|
1499
|
-
if (!over?.id || !active?.id) {
|
|
1500
|
-
return;
|
|
1501
|
-
}
|
|
1502
|
-
if (active.id !== over.id) {
|
|
1503
|
-
setItems((items) => {
|
|
1504
|
-
const oldIndex = items.indexOf(active.id);
|
|
1505
|
-
const newIndex = items.indexOf(over.id);
|
|
1506
|
-
return (0, sortable_1.arrayMove)(items, oldIndex, newIndex);
|
|
1507
|
-
});
|
|
1508
|
-
}
|
|
1509
|
-
}
|
|
1510
|
-
}
|
|
1511
|
-
exports.ReorderableList = ReorderableList;
|
|
1512
|
-
const animateLayoutChanges = (args) => args.isSorting || args.wasDragging ? (0, sortable_1.defaultAnimateLayoutChanges)(args) : true;
|
|
1513
|
-
function SortableItem({ id, name }) {
|
|
1514
|
-
const { attributes, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({
|
|
1515
|
-
animateLayoutChanges,
|
|
1516
|
-
id: id,
|
|
1517
|
-
});
|
|
1518
|
-
let height = 50;
|
|
1519
|
-
const style = {
|
|
1520
|
-
transform: utilities_1.CSS.Translate.toString(transform),
|
|
1521
|
-
transition,
|
|
1522
|
-
display: "flex",
|
|
1523
|
-
justifyContent: "space-between",
|
|
1524
|
-
alignItems: "center",
|
|
1525
|
-
borderRadius: "10px",
|
|
1526
|
-
border: "1px solid #E7E7E7",
|
|
1527
|
-
boxShadow: "0px 2px 8px 0px rgba(56, 65, 81, 0.08)",
|
|
1528
|
-
// padding: "20px",
|
|
1529
|
-
// height: `${height}px`,
|
|
1530
|
-
cursor: "grab",
|
|
1531
|
-
userSelect: "none",
|
|
1532
|
-
marginBottom: 20,
|
|
1533
|
-
background: "white",
|
|
1534
|
-
};
|
|
1535
|
-
return ((0, jsx_runtime_1.jsx)("div", { ref: setNodeRef, style: style, ...attributes, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
1536
|
-
// border: "1px solid grey",
|
|
1537
|
-
// background: "grey",
|
|
1538
|
-
// color: "white",
|
|
1539
|
-
// borderRadius: "10px",
|
|
1540
|
-
// padding: "15px",
|
|
1541
|
-
cursor: "pointer",
|
|
1542
|
-
// background: "red",
|
|
1543
|
-
width: "100%",
|
|
1544
|
-
display: "flex",
|
|
1545
|
-
flexDirection: "row",
|
|
1546
|
-
alignItems: "center",
|
|
1547
|
-
justifyContent: "space-between",
|
|
1548
|
-
height: 260,
|
|
1549
|
-
}, ...listeners, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
|
|
1550
|
-
display: "flex",
|
|
1551
|
-
flexDirection: "column",
|
|
1552
|
-
justifyContent: "space-between",
|
|
1553
|
-
height: 260,
|
|
1554
|
-
paddingTop: 20,
|
|
1555
|
-
paddingBottom: 20,
|
|
1556
|
-
width: "100%",
|
|
1557
|
-
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
1558
|
-
minWidth: 600,
|
|
1559
|
-
width: "100%",
|
|
1560
|
-
paddingLeft: 20,
|
|
1561
|
-
fontSize: 18,
|
|
1562
|
-
fontWeight: "500",
|
|
1563
|
-
}, children: name }), (0, jsx_runtime_1.jsx)(react_2.Chart, { chartId: id, containerStyle: {
|
|
1564
|
-
height: 180,
|
|
1565
|
-
width: "100%",
|
|
1566
|
-
} })] }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
1567
|
-
display: "flex",
|
|
1568
|
-
flexDirection: "column",
|
|
1569
|
-
paddingRight: 20,
|
|
1570
|
-
paddingLeft: 20,
|
|
1571
|
-
}, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "#6D727E", height: 24, width: 24, children: (0, jsx_runtime_1.jsx)("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" }) }) })] }) }));
|
|
1572
|
-
}
|
|
1573
|
-
//# sourceMappingURL=Admin.js.map
|