@quillsql/react 1.5.2 → 1.5.4

package/lib/ReportBuilder.js

@@ -0,0 +1,710 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+import React, { useContext, useEffect, useState } from 'react';
+import axios from 'axios';
+import { ClientContext, } from './Context';
+function ReportBuilder(_a) {
+    var _this = this;
+    var schema = _a.schema, containerStyle = _a.containerStyle;
+    var _b = useState([]), data = _b[0], setData = _b[1];
+    var client = useContext(ClientContext)[0];
+    // const [organization] = useContext(OrganizationContext);
+    // const [environment] = useContext(EnvironmentContext);
+    var _c = useState([]), columns = _c[0], setColumns = _c[1];
+    var _d = useState([]), fields = _d[0], setFields = _d[1];
+    useEffect(function () {
+        function getData(schema) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _id, queryEndpoint, queryHeaders, response;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(schema.length && !data.length)) return [3 /*break*/, 2];
+                            _id = client._id, queryEndpoint = client.queryEndpoint, queryHeaders = client.queryHeaders;
+                            return [4 /*yield*/, axios.post(queryEndpoint || 'https://quill-244421.uc.appspot.com/dashquery', {
+                                    query: "select * from ".concat(schema[0].name, " limit 10;"),
+                                }, {
+                                    params: !queryEndpoint
+                                        ? {
+                                            orgId: organization && organization.id ? organization.id : '',
+                                            publicKey: _id,
+                                        }
+                                        : undefined,
+                                    headers: __assign(__assign({}, queryHeaders), { environment: environment }),
+                                })];
+                        case 1:
+                            response = _a.sent();
+                            setData(response.data.rows);
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        }
+        getData(schema);
+    }, [schema]);
+    var runQuery = function (query) { return __awaiter(_this, void 0, void 0, function () {
+        var _id, response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _id = client._id;
+                    return [4 /*yield*/, axios.post(queryEndpoint, {
+                            query: query,
+                        }, {
+                            params: {
+                                orgId: organization && organization.id ? organization.id : '',
+                                publicKey: _id,
+                            },
+                            headers: queryHeaders,
+                        })];
+                case 1:
+                    response = _a.sent();
+                    setData(response.data.rows);
+                    setColumns(response.data.fields.map(function (elem) { return convertPostgresColumn(elem); }));
+                    setFields(response.data.fields);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsx("div", __assign({ className: "flex flex-col pt-[0px] pl-[100px]" }, { children: _jsxs("div", __assign({ style: { width: 'calc(100vw - 30px)' }, className: "flex mt-[25px] flex-col pr-[50px] absolute z-10" }, { children: [_jsx("h1", __assign({ className: "text-3xl mb-[25px] ml-[25px] pt-[0px] mt-[15px] font-semibold text-[#384151]" }, { children: "Report builder" })), schema.length > 0 && (_jsx(ReportingTool, { data: data, schema: schema, runQuery: runQuery })), data.length > 0 && columns.length > 0 ? (_jsx(Chart, { colors: ['red', 'blue'], containerStyle: {
+                        width: 'calc(100% - 700px)',
+                        height: 693,
+                    }, config: {
+                        chartType: 'table',
+                        rows: Array.from(data),
+                        yAxisFields: Array.from(columns),
+                    } })) : null] })) })));
+}
+function ReportingTool(_a) {
+    var _this = this;
+    var schema = _a.schema, data = _a.data, runQuery = _a.runQuery;
+    var _b = useState(schema[0]), selectedTable = _b[0], setSelectedTable = _b[1];
+    var _c = useState(schema[0].columns[0]), selectedColumn = _c[0], setSelectedColumn = _c[1];
+    var _d = useState([]), filters = _d[0], setFilters = _d[1];
+    var _e = useState({
+        with: null,
+        type: 'select',
+        options: null,
+        distinct: { type: null },
+        columns: '*',
+        into: { position: null },
+        from: [{ db: null, table: schema[0].name, as: null }],
+        where: null,
+        groupby: null,
+        having: null,
+        orderby: null,
+        limit: { seperator: '', value: [] },
+        window: null,
+    }), AST = _e[0], setAST = _e[1];
+    var _f = useState(0), numberStart = _f[0], setNumberStart = _f[1];
+    var _g = useState(0), numberEnd = _g[0], setNumberEnd = _g[1];
+    var _h = useState(''), dateStart = _h[0], setDateStart = _h[1];
+    var _j = useState(''), dateEnd = _j[0], setDateEnd = _j[1];
+    var _k = useState({}), computedColumns = _k[0], setComputedColumns = _k[1];
+    var _l = useState([]), stringFilterValues = _l[0], setStringFilterValues = _l[1];
+    var _m = useState(getPostgresBasicType(schema[0].columns[0])), columnType = _m[0], setColumnType = _m[1];
+    // month | week | day | quarter
+    var _o = useState('month'), dateBucket = _o[0], setDateBucket = _o[1];
+    var ref = useRef();
+    var _p = useState(-1), indexBeingEdited = _p[0], setIndexBeingEdited = _p[1];
+    var _q = useState([]), groupBys = _q[0], setGroupBys = _q[1];
+    var _r = useState([]), aggregations = _r[0], setAggregations = _r[1];
+    var _s = useState(schema[0].columns[0]), selectedGroupByColumn = _s[0], setSelectedGroupByColumn = _s[1];
+    var _t = useState(getPostgresBasicType(schema[0].columns[0])), groupByColumnType = _t[0], setGroupByColumnType = _t[1];
+    var groupByRef = useRef(null);
+    var _u = useState(-1), groupByIndexBeingEdited = _u[0], setGroupByIndexBeingEdited = _u[1];
+    var addGroupBy = function () {
+        if (selectedGroupByColumn && groupByColumnType) {
+            if (groupByColumnType === 'string') {
+                setGroupBys(function (groupBys) {
+                    return __spreadArray(__spreadArray([], groupBys, true), [
+                        {
+                            column: selectedColumn.name,
+                            columnType: columnType,
+                        },
+                    ], false);
+                });
+                return;
+            }
+            else if (groupByColumnType === 'number') {
+                // is this possible lmao
+                return;
+            }
+            else if (groupByColumnType === 'date') {
+                setGroupBys(function (groupBys) {
+                    return __spreadArray(__spreadArray([], groupBys, true), [
+                        {
+                            column: selectedColumn.name,
+                            columnType: columnType,
+                            bucket: dateBucket,
+                        },
+                    ], false);
+                });
+                setDateBucket('month');
+                return;
+            }
+        }
+    };
+    var removeGroupBy = function (index) { };
+    var selectGroupBy = function (index) { };
+    var updateGroupBy = function (index) { };
+    useEffect(function () {
+        setSelectedColumn(selectedTable.columns[0]);
+        setAST(function (AST) {
+            return __assign(__assign({}, AST), { from: [{ db: null, table: selectedTable.name, as: null }] });
+        });
+    }, [selectedTable]);
+    useEffect(function () {
+        setColumnType(getPostgresBasicType(selectedColumn));
+    }, [selectedColumn]);
+    useEffect(function () {
+        setGroupByColumnType(getPostgresBasicType(selectedGroupByColumn));
+    }, [selectedGroupByColumn]);
+    var selectFilter = function (index) {
+        var filter = filters[index];
+        var matchingColumn = selectedTable.columns.find(function (column) { return column.name === filter.column; });
+        setSelectedColumn(matchingColumn);
+        if (filter.columnType === 'string') {
+            setStringFilterValues(filter.stringFilterValues);
+            setIndexBeingEdited(index);
+        }
+        else if (filter.columnType === 'number') {
+            setNumberStart(filter.numberStart);
+            setNumberEnd(filter.numberEnd);
+            setIndexBeingEdited(index);
+        }
+        else if (filter.columnType === 'date') {
+            setDateStart(filter.dateStart);
+            setDateEnd(filter.dateEnd);
+            setIndexBeingEdited(index);
+        }
+        // if (ref.current) {
+        //   ref.current["data-headless-ui-state"] = "open";
+        // }
+        var button = ref.current.children[0].children[0];
+        if (button) {
+            button.click();
+        }
+    };
+    var updateFilter = function (index) {
+        if (selectedColumn && columnType) {
+            if (columnType === 'string') {
+                setFilters(function (filters) {
+                    var newFilters = __spreadArray([], filters, true);
+                    console.log('INDEX: ', index);
+                    newFilters[index] = {
+                        column: selectedColumn.name,
+                        columnType: columnType,
+                        stringFilterValues: stringFilterValues,
+                        tag: "".concat(selectedColumn.name, " (").concat(stringFilterValues.join(', '), ")"),
+                    };
+                    return newFilters;
+                });
+            }
+            else if (columnType === 'number') {
+                setFilters(function (filters) {
+                    var newFilters = __spreadArray([], filters, true);
+                    console.log('INDEX: ', index);
+                    newFilters[index] = {
+                        column: selectedColumn.name,
+                        columnType: columnType,
+                        numberStart: numberStart,
+                        numberEnd: numberEnd,
+                        tag: "".concat(numberStart, " < ").concat(selectedColumn.name, " < ").concat(numberEnd),
+                    };
+                    return newFilters;
+                });
+            }
+            else if (columnType === 'date') {
+                setFilters(function (filters) {
+                    var newFilters = __spreadArray([], filters, true);
+                    newFilters[index] = {
+                        column: selectedColumn.name,
+                        columnType: columnType,
+                        dateStart: dateStart,
+                        dateEnd: dateEnd,
+                        tag: "".concat(selectedColumn.name, " (").concat(format(new Date(dateStart), 'MMM dd'), " - ").concat(format(new Date(dateEnd), 'MMM dd'), ")"),
+                    };
+                    return newFilters;
+                });
+            }
+            setStringFilterValues([]);
+            setNumberStart(0);
+            setNumberEnd(0);
+            setDateStart('');
+            setDateEnd('');
+            setIndexBeingEdited(-1);
+            return;
+        }
+    };
+    // ADD FILTER TO "FILTERS" ARRAY
+    var addFilter = function () {
+        if (selectedColumn && columnType) {
+            //   const type = getPostgresBasicType(selectedColumn);
+            var newCondition = void 0;
+            if (columnType === 'string') {
+                setFilters(function (filters) {
+                    return __spreadArray(__spreadArray([], filters, true), [
+                        {
+                            column: selectedColumn.name,
+                            columnType: columnType,
+                            stringFilterValues: stringFilterValues,
+                            tag: "".concat(selectedColumn.name, " (").concat(stringFilterValues.join(', '), ")"),
+                        },
+                    ], false);
+                });
+                setStringFilterValues([]);
+                setNumberStart(0);
+                setNumberEnd(0);
+                setDateStart('');
+                setDateEnd('');
+                return;
+            }
+            else if (columnType === 'number') {
+                setFilters(function (filters) {
+                    return __spreadArray(__spreadArray([], filters, true), [
+                        {
+                            column: selectedColumn.name,
+                            columnType: columnType,
+                            numberStart: numberStart,
+                            numberEnd: numberEnd,
+                            tag: "".concat(numberStart, " < ").concat(selectedColumn.name, " < ").concat(numberEnd),
+                        },
+                    ], false);
+                });
+                setStringFilterValues([]);
+                setNumberStart(0);
+                setNumberEnd(0);
+                setDateStart('');
+                setDateEnd('');
+                return;
+            }
+            else if (columnType === 'date') {
+                setFilters(function (filters) {
+                    return __spreadArray(__spreadArray([], filters, true), [
+                        {
+                            column: selectedColumn.name,
+                            columnType: columnType,
+                            dateStart: dateStart,
+                            dateEnd: dateEnd,
+                            tag: "".concat(selectedColumn.name, " (").concat(format(new Date(dateStart), 'MMM dd'), " - ").concat(format(new Date(dateEnd), 'MMM dd'), ")"),
+                        },
+                    ], false);
+                });
+                setStringFilterValues([]);
+                setNumberStart(0);
+                setNumberEnd(0);
+                setDateStart('');
+                setDateEnd('');
+            }
+        }
+    };
+    // USE EFFECT HOOK THAT TRANSFORMS "FILTERS ARRAY INTO AST"
+    useEffect(function () {
+        if (filters.length || (groupBys.length && aggregations.length)) {
+            var newAST = {
+                with: null,
+                type: 'select',
+                options: null,
+                distinct: { type: null },
+                columns: (aggregations.length && aggregations) || '*',
+                into: { position: null },
+                from: [{ db: null, table: schema[0].name, as: null }],
+                where: null,
+                groupby: null,
+                having: null,
+                orderby: null,
+                limit: { seperator: '', value: [] },
+                window: null,
+            };
+            // FILTERS
+            for (var i = 0; i < filters.length; i++) {
+                var filter = filters[i];
+                var column = filter.column, columnType_1 = filter.columnType, stringFilterValues_1 = filter.stringFilterValues, numberStart_1 = filter.numberStart, numberEnd_1 = filter.numberEnd, dateStart_1 = filter.dateStart, dateEnd_1 = filter.dateEnd;
+                var newCondition = void 0;
+                if (columnType_1 === 'string') {
+                    newCondition = {
+                        type: 'binary_expr',
+                        operator: 'IN',
+                        left: {
+                            type: 'column_ref',
+                            table: null,
+                            column: column,
+                        },
+                        right: {
+                            type: 'expr_list',
+                            value: stringFilterValues_1.map(function (value) { return ({
+                                type: 'single_quote_string',
+                                value: value,
+                            }); }),
+                        },
+                    };
+                }
+                else if (columnType_1 === 'number') {
+                    newCondition = {
+                        type: 'binary_expr',
+                        operator: 'BETWEEN',
+                        left: {
+                            type: 'column_ref',
+                            table: null,
+                            column: column,
+                        },
+                        right: {
+                            type: 'expr_list',
+                            value: [
+                                { type: 'number', value: numberStart_1 },
+                                { type: 'number', value: numberEnd_1 },
+                            ],
+                        },
+                    };
+                }
+                else if (columnType_1 === 'date') {
+                    newCondition = {
+                        type: 'binary_expr',
+                        operator: 'BETWEEN',
+                        left: {
+                            type: 'column_ref',
+                            table: null,
+                            column: column,
+                        },
+                        right: {
+                            type: 'expr_list',
+                            value: [
+                                {
+                                    type: 'single_quote_string',
+                                    value: format(new Date(dateStart_1), 'MM/dd/yyyy'),
+                                },
+                                {
+                                    type: 'single_quote_string',
+                                    value: format(new Date(dateEnd_1), 'MM/dd/yyyy'),
+                                },
+                            ],
+                        },
+                    };
+                }
+                if (!newAST.where) {
+                    newAST = __assign(__assign({}, newAST), { where: newCondition });
+                }
+                else {
+                    newAST = __assign(__assign({}, newAST), { where: {
+                            type: 'binary_expr',
+                            operator: 'AND',
+                            left: newAST.where,
+                            right: newCondition,
+                        } });
+                }
+            }
+            // GROUP BYS
+            setAST(newAST);
+        }
+    }, [filters, groupBys, aggregations]);
+    var removeFilter = function (index) {
+        setFilters(function (oldFilters) {
+            var newFilters = __spreadArray([], oldFilters, true);
+            newFilters.splice(index, 1);
+            return newFilters;
+        });
+    };
+    var computeStats = useCallback(function (column) {
+        var _a;
+        if (!computedColumns[column.name]) {
+            var basicType = getPostgresBasicType(column);
+            var result = void 0;
+            if (basicType === 'number') {
+                var min_1 = Infinity, max_1 = -Infinity;
+                data.forEach(function (row) {
+                    var value = row[column.name];
+                    min_1 = Math.min(min_1, value);
+                    max_1 = Math.max(max_1, value);
+                });
+                result = { min: min_1, max: max_1 };
+            }
+            else if (basicType === 'string') {
+                var freqMap_1 = {};
+                data.forEach(function (row) {
+                    var value = row[column.name];
+                    freqMap_1[value] = (freqMap_1[value] || 0) + 1;
+                });
+                result = Object.entries(freqMap_1)
+                    .sort(function (a, b) { return b[1] - a[1]; })
+                    .slice(0, 6)
+                    .map(function (_a) {
+                    var key = _a[0];
+                    return key;
+                });
+            }
+            else {
+                // Handle other column types if necessary
+            }
+            setComputedColumns(__assign(__assign({}, computedColumns), (_a = {}, _a[column.name] = result, _a)));
+        }
+    }, [data, computedColumns]);
+    // Call this function whenever the selected column changes
+    useEffect(function () {
+        computeStats(selectedColumn);
+    }, [selectedColumn]);
+    // Use the results directly in your component
+    var columnStats = computedColumns[selectedColumn.name];
+    // useEffect(() => {
+    //   if (AST && AST.from[0].table) {
+    //     const parser = new Parser();
+    //     const sqlQuery = parser.sqlify(AST, { database: "PostgresQL" });
+    //     if (sqlQuery) {
+    //       runQuery(sqlQuery);
+    //       return;
+    //     }
+    //   }
+    // }, [AST]);
+    useEffect(function () {
+        var getSqlQueryFromAST = function () { return __awaiter(_this, void 0, void 0, function () {
+            var response, sqlQuery, err_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        if (!(AST && AST.from[0].table)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, axios.post('https://quill-344421.uc.r.appspot.com/sqlify', { ast: AST })];
+                    case 1:
+                        response = _a.sent();
+                        sqlQuery = response.data.query;
+                        if (sqlQuery) {
+                            runQuery(sqlQuery);
+                        }
+                        _a.label = 2;
+                    case 2: return [3 /*break*/, 4];
+                    case 3:
+                        err_1 = _a.sent();
+                        console.error(err_1);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+        getSqlQueryFromAST();
+    }, [AST]);
+    return (_jsxs("div", __assign({ className: "ml-[25px]" }, { children: [_jsx("div", __assign({ className: "text-sm mb-[6px] font-semibold text-[#384151]/[0.7]" }, { children: "Table" })), _jsx(Dropdown, { value: selectedTable.name, onChange: function (e) {
+                    var table = schema.find(function (t) { return t.name === e; });
+                    setSelectedTable(table);
+                }, options: schema.map(function (elem) {
+                    return { label: elem.name, value: elem.name };
+                }) }), _jsx("div", __assign({ className: "flex flex-col", style: { marginTop: 12 } }, { children: _jsx(AddFilterModal, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, dateStart: dateStart, setDateStart: setDateStart, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, dateEnd: dateEnd, setDateEnd: setDateEnd, removeFilter: removeFilter, selectFilter: selectFilter, ref: ref, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter }) }))] })));
+}
+function FilterTag(_a) {
+    var label = _a.label, removeFilter = _a.removeFilter, index = _a.index, selectFilter = _a.selectFilter;
+    var handleRemoveFilter = function () {
+        removeFilter(index);
+    };
+    var handleSelectFilter = function () {
+        selectFilter(index);
+    };
+    return (_jsxs("div", __assign({ onClick: handleSelectFilter, className: "flex ml-[12px] cursor-pointer border-[1px] border-[#EFF0FC] rounded-md bg-[#EFF0FC] pl-4 pr-2 py-1.5 text-sm font-medium text-[#384151] focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75" }, { children: [_jsx("div", __assign({ style: { textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: label })), _jsx("div", __assign({ 
+                // onClick={handleRemoveFilter}
+                onClick: function (e) {
+                    e.stopPropagation(); // Prevents the event from bubbling up to the parent
+                    handleRemoveFilter();
+                }, className: "cursor-pointer flex items-center pl-1.5" }, { children: _jsx(XMarkIcon, { className: "h-5 w-5 text-[#384151]", "aria-hidden": "true" }) }))] })));
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+var GroupByModal = React.forwardRef(function (props, ref) {
+    var selectedGroupByColumn = props.selectedGroupByColumn, addGroupBy = props.addGroupBy, setSelectedGroupByColumn = props.setSelectedGroupByColumn, selectedTable = props.selectedTable, groupByColumnType = props.groupByColumnType, groupByIndexBeingEdited = props.groupByIndexBeingEdited, updateGroupBy = props.updateGroupBy, groupBys = props.groupBys, removeGroupBy = props.removeGroupBy, selectGroupBy = props.selectGroupBy;
+    return (_jsxs(Menu, __assign({ as: "div", ref: ref, className: "relative inline-block text-left" }, { children: [_jsxs("div", __assign({ className: "flex flex-row items-center" }, { children: [_jsx(Menu.Button, __assign({ className: "inline-flex border-[1px] shadow-sm border-[#E7E7E7] rounded-md bg-black bg-opacity-0 px-4 py-1.5 text-sm font-medium text-[#384151] hover:bg-opacity-[0.03] focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75" }, { children: "Groups" })), _jsx("div", __assign({ style: { overflowX: 'scroll' }, className: "flex flex-row items-center" }, { children: groupBys.map(function (elem, index) { return (_jsx(FilterTag, { label: elem.tag, removeFilter: removeGroupBy, selectFilter: selectGroupBy, index: index })); }) }))] })), _jsx(Transition, __assign({ as: Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95" }, { children: _jsxs(Menu.Items, __assign({ className: "absolute left-0 mt-[12px] origin-top-right p-4 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" }, { children: [_jsx("div", __assign({ className: "text-sm mb-[6px] font-semibold text-[#384151]/[0.7]" }, { children: "Column" })), _jsx(Dropdown, { value: selectedGroupByColumn.name, onChange: function (e) {
+                                var column = selectedTable.columns.find(function (c) { return c.name === e; });
+                                setSelectedGroupByColumn(column);
+                            }, options: selectedTable.columns.map(function (elem) {
+                                return { label: elem.name, value: elem.name };
+                            }) }), groupByColumnType === 'number' && (_jsx("div", { style: {
+                                width: 245,
+                                maxWidth: 245,
+                                //   height: 40,
+                                zIndex: 50,
+                                // position: "relative",
+                            } })), groupByColumnType === 'date' && (_jsx("div", { className: "flex flex-row items-center justify-between" })), groupByColumnType === 'string' && (_jsx("div", { className: "flex flex-col mt-[14px]" })), _jsx(Menu.Item, { children: function (_a) {
+                                var close = _a.close;
+                                return (_jsx("button", __assign({ className: "w-[245px] mt-[20px] py-2 px-3 bg-[#384151] hover:opacity-90 text-white font-medium rounded-md shoadow-sm", onClick: function () {
+                                        if (groupByIndexBeingEdited > -1) {
+                                            updateGroupBy(groupByIndexBeingEdited);
+                                            close();
+                                            return;
+                                        }
+                                        addGroupBy();
+                                        close();
+                                    } }, { children: groupByIndexBeingEdited > -1
+                                        ? 'Edit group by'
+                                        : 'Add group by' })));
+                            } })] })) }))] })));
+});
+var AddFilterModal = React.forwardRef(function (props, ref) {
+    var filters = props.filters, selectedColumn = props.selectedColumn, numberStart = props.numberStart, numberEnd = props.numberEnd, dateStart = props.dateStart, setDateStart = props.setDateStart, columnStats = props.columnStats, stringFilterValues = props.stringFilterValues, setStringFilterValues = props.setStringFilterValues, addFilter = props.addFilter, setSelectedColumn = props.setSelectedColumn, setNumberStart = props.setNumberStart, setNumberEnd = props.setNumberEnd, selectedTable = props.selectedTable, columnType = props.columnType, setDateEnd = props.setDateEnd, dateEnd = props.dateEnd, removeFilter = props.removeFilter, selectFilter = props.selectFilter, indexBeingEdited = props.indexBeingEdited, updateFilter = props.updateFilter;
+    return (_jsxs(Menu, __assign({ as: "div", ref: ref, className: "relative inline-block text-left" }, { children: [_jsxs("div", __assign({ className: "flex flex-row items-center" }, { children: [_jsx(Menu.Button, __assign({ className: "inline-flex border-[1px] shadow-sm border-[#E7E7E7] rounded-md bg-black bg-opacity-0 px-4 py-1.5 text-sm font-medium text-[#384151] hover:bg-opacity-[0.03] focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75" }, { children: "Filters" })), _jsx("div", __assign({ style: { overflowX: 'scroll' }, className: "flex flex-row items-center" }, { children: filters.map(function (elem, index) { return (_jsx(FilterTag, { label: elem.tag, removeFilter: removeFilter, selectFilter: selectFilter, index: index })); }) }))] })), _jsx(Transition, __assign({ as: Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95" }, { children: _jsxs(Menu.Items, __assign({ style: { zIndex: 120 }, className: "absolute left-0 mt-[12px] origin-top-right p-4 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" }, { children: [_jsx("div", __assign({ className: "text-sm mb-[6px] font-semibold text-[#384151]/[0.7]" }, { children: "Column" })), _jsx(Dropdown, { value: selectedColumn.name, onChange: function (e) {
+                                var column = selectedTable.columns.find(function (c) { return c.name === e; });
+                                setSelectedColumn(column);
+                            }, options: selectedTable.columns.map(function (elem) {
+                                return { label: elem.name, value: elem.name };
+                            }) }), columnType === 'number' && (_jsxs("div", __assign({ style: {
+                                width: 245,
+                                maxWidth: 245,
+                                //   height: 40,
+                                zIndex: 50,
+                                // position: "relative",
+                            } }, { children: [_jsx(MultiRangeSlider, { style: {
+                                        border: 'none',
+                                        boxShadow: 'none',
+                                        padding: 0,
+                                        marginTop: 28,
+                                    }, min: 0, max: 1000000, 
+                                    // step={5}
+                                    minValue: numberStart, maxValue: numberEnd, ruler: false, label: false, preventWheel: true, barLeftColor: "transparent", barRightColor: "transparent", barInnerColor: "#384151", onInput: function (e) {
+                                        setNumberStart(e.minValue);
+                                        setNumberEnd(e.maxValue);
+                                    } }), _jsxs("div", __assign({ className: "flex flex-row items-center justify-between" }, { children: [_jsxs("div", __assign({ className: "flex flex-col mt-[20px]" }, { children: [_jsx("div", __assign({ className: "text-sm font-semibold text-[#384151]/[0.7]" }, { children: "Minimum" })), _jsx("input", { 
+                                                    //   type="number"
+                                                    value: numberStart, onChange: function (e) { return setNumberStart(e.target.value); }, placeholder: "Start number", 
+                                                    // style={{ textAlign: "right" }}
+                                                    className: "w-[100px] border-[1px] text-[#384151] mt-[4px] border-[#E7E7E7] bg-white rounded-md shadow-sm px-2 py-1.5" })] })), _jsxs("div", __assign({ className: "flex flex-col mt-[20px]" }, { children: [_jsx("div", __assign({ className: "text-sm font-semibold text-[#384151]/[0.7]" }, { children: "Maximum" })), _jsx("input", { 
+                                                    //   type="number"
+                                                    value: numberEnd, onChange: function (e) { return setNumberEnd(e.target.value); }, placeholder: "End number", 
+                                                    // style={{ textAlign: "right" }}
+                                                    className: "w-[100px] border-[1px] text-[#384151] mt-[4px] border-[#E7E7E7] bg-white rounded-md shadow-sm px-2 py-1.5" })] }))] }))] }))), columnType === 'date' && (_jsxs("div", __assign({ className: "flex flex-row items-center justify-between" }, { children: [_jsxs("div", __assign({ className: "flex flex-col mt-[20px]" }, { children: [_jsx("div", __assign({ className: "text-sm font-semibold text-[#384151]/[0.7]" }, { children: "Start date" })), _jsx("input", { type: "date", value: dateStart, onChange: function (e) { return setDateStart(e.target.value); }, placeholder: "Start date", className: "w-[115px] text-sm text-[#384151] border-[1px] mt-[4px] border-[#E7E7E7] bg-white rounded-md shadow-sm px-2 py-1.5" })] })), _jsxs("div", __assign({ className: "flex flex-col mt-[20px]" }, { children: [_jsx("div", __assign({ className: "text-sm font-semibold text-[#384151]/[0.7]" }, { children: "End date" })), _jsx("input", { type: "date", value: dateEnd, onChange: function (e) { return setDateEnd(e.target.value); }, placeholder: "End date", className: "w-[115px] text-sm text-[#384151] border-[1px] mt-[4px] border-[#E7E7E7] bg-white rounded-md shadow-sm px-2 py-1.5" })] }))] }))), columnType === 'string' && columnStats && columnStats.length > 0 && (_jsx("div", __assign({ className: "flex flex-col mt-[14px]" }, { children: columnStats.map(function (value) { return (_jsxs("div", __assign({ className: "flex flex-row items-center" }, { children: [_jsx(DivCheckbox
+                                    //   type="checkbox"
+                                    //   style={{
+                                    //     border: "1px solid red",
+                                    //     borderRadius: "4px",
+                                    //   boxSizing: "border-box",
+                                    // color: "#fff",
+                                    //     height: "18px",
+                                    //     minWidth: "18px",
+                                    //     position: "relative",
+                                    //     width: "18px",
+                                    //   }}
+                                    // className="border-[#E7E7E7] border-[1px] shadow-sm rounded-sm bg-white cursor-pointer"
+                                    , { 
+                                        //   type="checkbox"
+                                        //   style={{
+                                        //     border: "1px solid red",
+                                        //     borderRadius: "4px",
+                                        //   boxSizing: "border-box",
+                                        // color: "#fff",
+                                        //     height: "18px",
+                                        //     minWidth: "18px",
+                                        //     position: "relative",
+                                        //     width: "18px",
+                                        //   }}
+                                        // className="border-[#E7E7E7] border-[1px] shadow-sm rounded-sm bg-white cursor-pointer"
+                                        checked: stringFilterValues.includes(value), onChange: function () {
+                                            setStringFilterValues(function (prev) {
+                                                return prev.includes(value)
+                                                    ? prev.filter(function (v) { return v !== value; })
+                                                    : __spreadArray(__spreadArray([], prev, true), [value], false);
+                                            });
+                                        } }), _jsx("div", __assign({ className: "ml-[6px] text-[#384151]" }, { children: value }))] }), value)); }) }))), _jsx(Menu.Item, { children: function (_a) {
+                                var close = _a.close;
+                                return (_jsx("button", __assign({ className: "w-[245px] mt-[20px] py-2 px-3 bg-[#384151] hover:opacity-90 text-white font-medium rounded-md shoadow-sm", onClick: function () {
+                                        if (indexBeingEdited > -1) {
+                                            updateFilter(indexBeingEdited);
+                                            close();
+                                            return;
+                                        }
+                                        addFilter();
+                                        close();
+                                    } }, { children: indexBeingEdited > -1 ? 'Edit filter' : 'Add filter' })));
+                            } })] })) }))] })));
+});
+var DivCheckbox = function (_a) {
+    var onChange = _a.onChange, checked = _a.checked;
+    var toggleCheckbox = function () {
+        if (onChange) {
+            onChange(!checked);
+        }
+    };
+    var style = {
+        display: 'inline-block',
+        width: '18px',
+        height: '18px',
+        background: checked ? '#384151' : '#fff',
+        border: checked ? '1px solid #384151' : '1px solid #E7E7E7',
+        borderRadius: '4px',
+        position: 'relative',
+        cursor: 'pointer',
+    };
+    return (_jsx("div", __assign({ style: style, onClick: toggleCheckbox, "aria-checked": checked, className: "shadow-sm", role: "checkbox" }, { children: checked && _jsx(CheckIcon, { className: "text-white", "aria-hidden": "true" }) })));
+};
+var Dropdown = function (_a) {
+    var _b;
+    var field = _a.field, form = _a.form, children = _a.children, props = __rest(_a, ["field", "form", "children"]);
+    var options = props.options, onChange = props.onChange, value = props.value;
+    return (_jsx(Listbox, __assign({ value: value, onChange: onChange }, { children: _jsxs("div", __assign({ className: "relative" }, { children: [_jsxs(Listbox.Button, __assign({ className: "relative w-[245px] cursor-pointer border-[1px] border-[#E7E7E7] rounded-md shadow-sm bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm" }, { children: [_jsx("span", __assign({ className: "block truncate" }, { children: (_b = options.find(function (elem) { return value === elem.value; })) === null || _b === void 0 ? void 0 : _b.label })), _jsx("span", __assign({ className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2" }, { children: _jsx(ChevronDownIcon, { className: "h-5 w-5 text-gray-400", "aria-hidden": "true" }) }))] })), _jsx(Transition, __assign({ as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0" }, { children: _jsx(Listbox.Options, __assign({ style: { zIndex: 120 }, className: "absolute mt-1 max-h-60 w-[245px] overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" }, { children: options.map(function (person, personIdx) { return (_jsx(Listbox.Option, __assign({ className: function (_a) {
+                                var active = _a.active;
+                                return "relative cursor-pointer select-none py-2 pl-4 pr-4 ".concat(active ? 'bg-[#212121]/[0.05]' : 'text-gray-900');
+                            }, value: person.value }, { children: _jsx(_Fragment, { children: _jsx("span", __assign({ className: "block truncate ".concat(value === person.value ? 'font-medium' : 'font-normal') }, { children: person.label })) }) }), personIdx)); }) })) }))] })) })));
+};
+export default Table;
+//# sourceMappingURL=ReportBuilder.js.map