@quillsql/react 1.7.0 → 1.7.1

package/lib/AddToDashboardModal.js

@@ -1,81 +1,20 @@
-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;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-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 } from "react/jsx-runtime";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatDateBuckets = exports.isArrayOfValidDates = exports.isValidDate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
-import { useContext, useEffect, useState } from 'react';
-import { ClientContext, SchemaContext, ThemeContext } from './Context';
-import { Formik, Form, Field } from 'formik';
-import { differenceInDays, differenceInHours, differenceInMonths, differenceInYears, startOfDay, startOfHour, startOfMonth, startOfYear, } from 'date-fns';
-import axios from 'axios';
-import Chart from './Chart';
-import { XMarkIcon } from '@heroicons/react/20/solid';
+const react_1 = require("react");
+const Context_1 = require("./Context");
+const formik_1 = require("formik");
+const date_fns_1 = require("date-fns");
+const axios_1 = __importDefault(require("axios"));
+const Chart_1 = __importDefault(require("./Chart"));
+const solid_1 = require("@heroicons/react/20/solid");
 function convertPostgresColumn(column) {
-    var format;
+    let format;
     switch (column.dataTypeID) {
         case 20: // int8
         case 21: // int2
@@ -103,295 +42,248 @@ function convertPostgresColumn(column) {
         format: format,
     };
 }
-export default function AddToDashboardModal(_a) {
-    var _this = this;
-    var isOpen = _a.isOpen, setIsOpen = _a.setIsOpen, SelectComponent = _a.SelectComponent, TextInputComponent = _a.TextInputComponent, ButtonComponent = _a.ButtonComponent, SecondaryButtonComponent = _a.SecondaryButtonComponent, rows = _a.rows, columns = _a.columns, query = _a.query, ModalComponent = _a.ModalComponent, formHeaderStyle = _a.formHeaderStyle, formLabelStyle = _a.formLabelStyle;
-    var theme = useContext(ThemeContext)[0];
-    var client = useContext(ClientContext)[0];
-    var _b = useContext(SchemaContext), schema = _b[0], setSchema = _b[1];
-    useEffect(function () {
-        var isSubscribed = true;
-        function getSchema() {
-            return __awaiter(this, void 0, void 0, function () {
-                var publicKey, environment, response3;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            publicKey = client.publicKey, environment = client.environment;
-                            if (!!schema.length) return [3 /*break*/, 2];
-                            return [4 /*yield*/, axios.get("https://quill-344421.uc.r.appspot.com/schema2/".concat(publicKey, "/"), {
-                                    headers: {
-                                        Authorization: "Bearer ",
-                                        environment: environment || undefined,
-                                    },
-                                })];
-                        case 1:
-                            response3 = _a.sent();
-                            if (isSubscribed) {
-                                setSchema(response3.data.tables);
-                            }
-                            _a.label = 2;
-                        case 2: return [2 /*return*/];
-                    }
+function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, rows, columns, query, ModalComponent, formHeaderStyle, formLabelStyle, }) {
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    const [client] = (0, react_1.useContext)(Context_1.ClientContext);
+    const [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
+    (0, react_1.useEffect)(() => {
+        let isSubscribed = true;
+        async function getSchema() {
+            const { publicKey, environment } = client;
+            if (!schema.length) {
+                const response3 = await axios_1.default.get(`https://quill-344421.uc.r.appspot.com/schema2/${publicKey}/`, {
+                    headers: {
+                        Authorization: `Bearer `,
+                        environment: environment || undefined,
+                    },
                 });
-            });
+                if (isSubscribed) {
+                    setSchema(response3.data.tables);
+                }
+            }
         }
         if (isSubscribed) {
             getSchema();
         }
-        return function () {
+        return () => {
             isSubscribed = false;
         };
     }, [schema]);
-    var editChart = function (_a) {
-        var report = _a.report, values = _a.values, yAxisFields = _a.yAxisFields, columns = _a.columns, query = _a.query;
-        return __awaiter(_this, void 0, void 0, function () {
-            var publicKey, orgId, authToken, queryEndpoint, queryHeaders, withCredentials, xAxisLabel, yAxisLabel, chartName, chartType, xAxisField, xAxisFormat, dashboardName, dateFieldTable, dateField, i, response;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        publicKey = client.publicKey, orgId = client.orgId, authToken = client.authToken, queryEndpoint = client.queryEndpoint, queryHeaders = client.queryHeaders, withCredentials = client.withCredentials;
-                        xAxisLabel = values.xAxisLabel, yAxisLabel = values.yAxisLabel, chartName = values.chartName, chartType = values.chartType, xAxisField = values.xAxisField, xAxisFormat = values.xAxisFormat, dashboardName = values.dashboardName, dateFieldTable = values.dateFieldTable, dateField = values.dateField;
-                        if (!chartName) {
-                            alert('Please enter a chart name');
-                            return [2 /*return*/];
-                        }
-                        // if (!dashboardName) {
-                        //   alert("Please choose a dashboard name");
-                        //   return;
-                        // }
-                        // if (!xAxisLabel && chartType !== "pie" && chartType !== "table") {
-                        //   alert("Please enter a label for the x-axis");
-                        //   return;
-                        // }
-                        // if (!yAxisLabel && chartType !== "pie" && chartType !== "table") {
-                        //   alert("Please enter a label for the y-axis");
-                        //   return;
-                        // }
-                        for (i = 0; i < yAxisFields.length; i++) {
-                            if (!yAxisFields[i].label && chartType !== 'pie') {
-                                alert("Please enter a label for column '".concat(yAxisFields[i].field, "'"));
-                                return [2 /*return*/];
-                            }
-                        }
-                        if (!client || !organization) {
-                            return [2 /*return*/];
-                        }
-                        if (!queryEndpoint) return [3 /*break*/, 2];
-                        return [4 /*yield*/, axios.post(queryEndpoint, {
-                                metadata: {
-                                    name: chartName,
-                                    xAxisField: xAxisField,
-                                    yAxisFields: yAxisFields,
-                                    xAxisLabel: xAxisLabel,
-                                    xAxisFormat: xAxisFormat,
-                                    yAxisLabel: yAxisLabel,
-                                    chartType: chartType,
-                                    dashboardName: dashboardName,
-                                    columns: columns,
-                                    dateField: { table: dateFieldTable, field: dateField },
-                                    query: query,
-                                    task: 'create',
-                                },
-                            }, { headers: queryHeaders, withCredentials: withCredentials })];
-                    case 1:
-                        response = _b.sent();
-                        return [3 /*break*/, 4];
-                    case 2: return [4 /*yield*/, axios.post("https://quill-344421.uc.r.appspot.com/dashedit/".concat(publicKey, "/").concat(orgId, "/"), {
-                            name: chartName,
-                            xAxisField: xAxisField,
-                            yAxisFields: yAxisFields,
-                            xAxisLabel: xAxisLabel,
-                            xAxisFormat: xAxisFormat,
-                            yAxisLabel: yAxisLabel,
-                            chartType: chartType,
-                            dashboardName: dashboardName,
-                            columns: columns,
-                            dateField: { table: dateFieldTable, field: dateField },
-                            query: query,
-                        }, {
-                            headers: {
-                                Authorization: "Bearer ".concat(authToken),
-                                environment: environment || undefined,
-                            },
-                        })];
-                    case 3:
-                        response = _b.sent();
-                        _b.label = 4;
-                    case 4:
-                        if (!response.data) {
-                            return [2 /*return*/];
-                        }
-                        // setDashboard((dashboard) => {
-                        //   return {
-                        //     ...dashboard,
-                        //     [response.data._id]: { ...existingVisualization, ...response.data }
-                        //   }
-                        // })
-                        setIsOpen(false);
-                        return [2 /*return*/];
-                }
+    const editChart = async ({ report, values, yAxisFields, columns, query }) => {
+        const { publicKey, orgId, authToken, queryEndpoint, queryHeaders, withCredentials, } = client;
+        const { xAxisLabel, yAxisLabel, chartName, chartType, xAxisField, xAxisFormat, dashboardName, dateFieldTable, dateField, } = values;
+        if (!chartName) {
+            alert('Please enter a chart name');
+            return;
+        }
+        // if (!dashboardName) {
+        //   alert("Please choose a dashboard name");
+        //   return;
+        // }
+        // if (!xAxisLabel && chartType !== "pie" && chartType !== "table") {
+        //   alert("Please enter a label for the x-axis");
+        //   return;
+        // }
+        // if (!yAxisLabel && chartType !== "pie" && chartType !== "table") {
+        //   alert("Please enter a label for the y-axis");
+        //   return;
+        // }
+        for (let i = 0; i < yAxisFields.length; i++) {
+            if (!yAxisFields[i].label && chartType !== 'pie') {
+                alert(`Please enter a label for column '${yAxisFields[i].field}'`);
+                return;
+            }
+        }
+        if (!client || !organization) {
+            return;
+        }
+        let response;
+        if (queryEndpoint) {
+            response = await axios_1.default.post(queryEndpoint, {
+                metadata: {
+                    name: chartName,
+                    xAxisField,
+                    yAxisFields,
+                    xAxisLabel,
+                    xAxisFormat,
+                    yAxisLabel,
+                    chartType,
+                    dashboardName,
+                    columns,
+                    dateField: { table: dateFieldTable, field: dateField },
+                    query: query,
+                    task: 'create',
+                },
+            }, { headers: queryHeaders, withCredentials });
+        }
+        else {
+            response = await axios_1.default.post(`https://quill-344421.uc.r.appspot.com/dashedit/${publicKey}/${orgId}/`, {
+                name: chartName,
+                xAxisField,
+                yAxisFields,
+                xAxisLabel,
+                xAxisFormat,
+                yAxisLabel,
+                chartType,
+                dashboardName,
+                columns,
+                dateField: { table: dateFieldTable, field: dateField },
+                query: query,
+            }, {
+                headers: {
+                    Authorization: `Bearer ${authToken}`,
+                    environment: environment || undefined,
+                },
             });
-        });
+        }
+        if (!response.data) {
+            return;
+        }
+        // setDashboard((dashboard) => {
+        //   return {
+        //     ...dashboard,
+        //     [response.data._id]: { ...existingVisualization, ...response.data }
+        //   }
+        // })
+        setIsOpen(false);
+        // TODO: fire callback instead so user can customize action
+        // navigate("/dashboards");
     };
     return (
     // <BigModal theme={theme} showModal={isOpen} setShowModal={setIsOpen}>
-    _jsx(ModalComponent, __assign({ isOpen: isOpen, title: 'Add to dashboard', onClose: function () { return setIsOpen(false); } }, { children: _jsx(ChartForm, { editChart: editChart, theme: theme, schema: schema, data: rows, fields: columns, 
+    (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, title: 'Add to dashboard', onClose: () => setIsOpen(false), children: (0, jsx_runtime_1.jsx)(ChartForm, { editChart: editChart, theme: theme, schema: schema, data: rows, fields: columns, 
             // leave null for now
             report: null, query: query, 
             // organizationName={organization?.name}
-            SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, formHeaderStyle: formHeaderStyle, formLabelStyle: formLabelStyle }) }))
+            SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, formHeaderStyle: formHeaderStyle, formLabelStyle: formLabelStyle }) })
     // </BigModal>
     );
 }
-function ChartForm(_a) {
-    var _this = this;
-    var data = _a.data, fields = _a.fields, theme = _a.theme, saveVisualization = _a.saveVisualization, report = _a.report, editChart = _a.editChart, schema = _a.schema, query = _a.query, 
-    //   organizationName,
-    SelectComponent = _a.SelectComponent, TextInputComponent = _a.TextInputComponent, ButtonComponent = _a.ButtonComponent, SecondaryButtonComponent = _a.SecondaryButtonComponent, formHeaderStyle = _a.formHeaderStyle, formLabelStyle = _a.formLabelStyle;
-    var fieldOptions = Object.keys(data[0]).map(function (field) { return ({
+exports.default = AddToDashboardModal;
+function ChartForm({ data, fields, theme, saveVisualization, report, editChart, schema, query, 
+//   organizationName,
+SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, formHeaderStyle, formLabelStyle, }) {
+    const fieldOptions = Object.keys(data[0]).map(field => ({
         value: field,
         label: field,
-    }); });
-    var _b = useState([]), dateFieldOptions = _b[0], setDateFieldOptions = _b[1];
-    useEffect(function () {
-        var fetchReferencedTables = function () { return __awaiter(_this, void 0, void 0, function () {
-            var result;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, getReferencedTables(query, 'PostgresQL', schema)];
-                    case 1:
-                        result = _a.sent();
-                        setDateFieldOptions(result);
-                        return [2 /*return*/];
-                }
-            });
-        }); };
+    }));
+    const [dateFieldOptions, setDateFieldOptions] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        const fetchReferencedTables = async () => {
+            const result = await getReferencedTables(query, 'PostgresQL', schema);
+            setDateFieldOptions(result);
+        };
         fetchReferencedTables();
     }, [query, schema]);
-    return (_jsx(Formik, __assign({ initialValues: {
-            xAxisField: (report === null || report === void 0 ? void 0 : report.xAxisField) || fieldOptions[0].value,
-            xAxisLabel: (report === null || report === void 0 ? void 0 : report.xAxisLabel) || '',
-            xAxisFormat: (report === null || report === void 0 ? void 0 : report.xAxisFormat) || FORMAT_OPTIONS[0].value,
-            yAxisLabel: (report === null || report === void 0 ? void 0 : report.yAxisLabel) || '',
-            chartName: report === null || report === void 0 ? void 0 : report.name,
-            chartType: (report === null || report === void 0 ? void 0 : report.chartType) || 'bar',
+    return ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: {
+            xAxisField: report?.xAxisField || fieldOptions[0].value,
+            xAxisLabel: report?.xAxisLabel || '',
+            xAxisFormat: report?.xAxisFormat || FORMAT_OPTIONS[0].value,
+            yAxisLabel: report?.yAxisLabel || '',
+            chartName: report?.name,
+            chartType: report?.chartType || 'bar',
             xAxisFieldLabel: '',
-            dashboardName: (report === null || report === void 0 ? void 0 : report.dashboardName) || '',
+            dashboardName: report?.dashboardName || '',
             dateFieldTable: (dateFieldOptions.length && dateFieldOptions[0].name) || '',
             dateField: (dateFieldOptions.length && dateFieldOptions[0].columns[0].name) ||
                 '',
-            template: (report === null || report === void 0 ? void 0 : report.template) || false,
-        }, onSubmit: function () { } }, { children: function (_a) {
-            var values = _a.values, isSubmitting = _a.isSubmitting, setFieldValue = _a.setFieldValue;
-            return (_jsx(FormikForm, { values: values, isSubmitting: isSubmitting, data: data, fieldOptions: fieldOptions, dateFieldOptions: dateFieldOptions, theme: theme, saveVisualization: saveVisualization, report: report, editChart: editChart, fields: fields, query: query, setFieldValue: setFieldValue, 
-                //   organizationName={organizationName}
-                SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, formHeaderStyle: formHeaderStyle, formLabelStyle: formLabelStyle }));
-        } })));
+            template: report?.template || false,
+        }, onSubmit: () => { }, children: ({ values, isSubmitting, setFieldValue }) => ((0, jsx_runtime_1.jsx)(FormikForm, { values: values, isSubmitting: isSubmitting, data: data, fieldOptions: fieldOptions, dateFieldOptions: dateFieldOptions, theme: theme, saveVisualization: saveVisualization, report: report, editChart: editChart, fields: fields, query: query, setFieldValue: setFieldValue, 
+            //   organizationName={organizationName}
+            SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, formHeaderStyle: formHeaderStyle, formLabelStyle: formLabelStyle })) }));
 }
-export function isValidDate(d) {
+function isValidDate(d) {
     return d instanceof Date && !isNaN(d);
 }
-export var isArrayOfValidDates = function (arr, field) {
-    return arr.every(function (d) { return new Date(d[field]) instanceof Date && !isNaN(new Date(d[field])); });
-};
-export function formatDateBuckets(startDate, endDate) {
+exports.isValidDate = isValidDate;
+const isArrayOfValidDates = (arr, field) => arr.every(d => new Date(d[field]) instanceof Date && !isNaN(new Date(d[field])));
+exports.isArrayOfValidDates = isArrayOfValidDates;
+function formatDateBuckets(startDate, endDate) {
     // Calculate the distance in hours
-    var distanceInHours = Math.abs(differenceInHours(endDate, startDate));
+    const distanceInHours = Math.abs((0, date_fns_1.differenceInHours)(endDate, startDate));
     // Check if the distance is less than or equal to one hour
     if (distanceInHours <= 1) {
         return {
             unit: 'hour',
             format: 'h a',
-            startOf: startOfHour,
+            startOf: date_fns_1.startOfHour,
         };
     }
     // Calculate the distance in days
-    var distanceInDays = Math.abs(differenceInDays(endDate, startDate));
+    const distanceInDays = Math.abs((0, date_fns_1.differenceInDays)(endDate, startDate));
     // Check if the distance is less than or equal to one day
     if (distanceInDays <= 1) {
         return {
             unit: 'day',
             format: 'MMM d',
-            startOf: startOfDay,
+            startOf: date_fns_1.startOfDay,
         };
     }
     // Calculate the distance in months
-    var distanceInMonths = Math.abs(differenceInMonths(endDate, startDate));
+    const distanceInMonths = Math.abs((0, date_fns_1.differenceInMonths)(endDate, startDate));
     // Check if the distance is less than or equal to one month
     if (distanceInMonths <= 1) {
         return {
             unit: 'month',
             format: 'MMM yyyy',
-            startOf: startOfMonth,
+            startOf: date_fns_1.startOfMonth,
         };
     }
     // Calculate the distance in years
-    var distanceInYears = Math.abs(differenceInYears(endDate, startDate));
+    const distanceInYears = Math.abs((0, date_fns_1.differenceInYears)(endDate, startDate));
     // Check if the distance is less than or equal to one year
     if (distanceInYears <= 1) {
         return {
             unit: 'year',
             format: 'yyyy',
-            startOf: startOfYear,
+            startOf: date_fns_1.startOfYear,
         };
     }
     // Otherwise, the distance is more than one year
     return {
         unit: 'year',
         format: 'yyyy',
-        startOf: startOfYear,
+        startOf: date_fns_1.startOfYear,
     };
 }
-var FormTextInput = function (_a) {
-    var field = _a.field, form = _a.form, props = __rest(_a, ["field", "form"]);
-    var theme = props.theme, wider = props.wider;
-    return (_jsx("input", __assign({ className: "px-[12px] text-sm h-[38px] py-1.5 shadow-sm w-[245px] border-[#E7E7E7] ".concat('text-[#212121]', " border-[1px] bg-[white] rounded-md"), type: "text" }, field, props)));
+exports.formatDateBuckets = formatDateBuckets;
+const FormTextInput = ({ field, form, ...props }) => {
+    const { theme, wider } = props;
+    return ((0, jsx_runtime_1.jsx)("input", { className: `px-[12px] text-sm h-[38px] py-1.5 shadow-sm w-[245px] border-[#E7E7E7] ${'text-[#212121]'} border-[1px] bg-[white] rounded-md`, type: "text", ...field, ...props }));
 };
-var POSTGRES_DATE_TYPES = [
+const POSTGRES_DATE_TYPES = [
     'timestamp',
     'date',
     'timestamptz',
     'time',
     'timetz',
 ];
-function getReferencedTables(sqlQuery, databaseType, dbTables) {
-    return __awaiter(this, void 0, void 0, function () {
-        var tables, withAliases, response, ast, i, j, tablesInQuery;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    tables = [];
-                    withAliases = [];
-                    return [4 /*yield*/, axios.post('https://quill-344421.uc.r.appspot.com/astify', { query: sqlQuery })];
-                case 1:
-                    response = _a.sent();
-                    ast = response.data.ast;
-                    ast = ast.length ? ast[0] : ast;
-                    if (ast.with && ast.with.length) {
-                        for (i = 0; i < ast.with.length; i++) {
-                            withAliases.push(ast.with[i].name.value);
-                            for (j = 0; j < ast.with[i].stmt.from.length; j++)
-                                tables.push(ast.with[i].stmt.from[j].table);
-                        }
-                    }
-                    tablesInQuery = __spreadArray(__spreadArray([], tables, true), ast.from.map(function (elem) { return elem.table; }), true).filter(function (elem) { return !withAliases.includes(elem); });
-                    return [2 /*return*/, dbTables
-                            .filter(function (table) { return tablesInQuery.includes(table.displayName); })
-                            .map(function (table) {
-                            return {
-                                name: table.displayName,
-                                columns: table.columns.filter(function (column) {
-                                    return POSTGRES_DATE_TYPES.includes(column.fieldType);
-                                }),
-                            };
-                        })
-                            .filter(function (table) { return table.columns.length > 0; })];
-            }
-        });
-    });
+async function getReferencedTables(sqlQuery, databaseType, dbTables) {
+    //   const parser = new Parser();
+    let tables = [];
+    let withAliases = [];
+    const response = await axios_1.default.post('https://quill-344421.uc.r.appspot.com/astify', { query: sqlQuery });
+    let ast = response.data.ast;
+    ast = ast.length ? ast[0] : ast;
+    if (ast.with && ast.with.length) {
+        for (let i = 0; i < ast.with.length; i++) {
+            withAliases.push(ast.with[i].name.value);
+            for (let j = 0; j < ast.with[i].stmt.from.length; j++)
+                tables.push(ast.with[i].stmt.from[j].table);
+        }
+    }
+    const tablesInQuery = [...tables, ...ast.from.map(elem => elem.table)].filter(elem => !withAliases.includes(elem));
+    return dbTables
+        .filter(table => tablesInQuery.includes(table.displayName))
+        .map(table => {
+        return {
+            name: table.displayName,
+            columns: table.columns.filter(column => POSTGRES_DATE_TYPES.includes(column.fieldType)),
+        };
+    })
+        .filter(table => table.columns.length > 0);
 }
-var FORMAT_OPTIONS = [
+const FORMAT_OPTIONS = [
     { value: 'whole_number', label: 'whole number' },
     { value: 'one_decimal_place', label: 'one decimal place' },
     { value: 'dollar_amount', label: 'dollar amount' },
@@ -403,10 +295,9 @@ var FORMAT_OPTIONS = [
     { value: 'percent', label: 'percent' },
     { value: 'string', label: 'string' },
 ];
-function FormikForm(_a) {
-    var values = _a.values, isSubmitting = _a.isSubmitting, data = _a.data, fieldOptions = _a.fieldOptions, dateFieldOptions = _a.dateFieldOptions, theme = _a.theme, report = _a.report, editChart = _a.editChart, fields = _a.fields, query = _a.query, SelectComponent = _a.SelectComponent, TextInputComponent = _a.TextInputComponent, ButtonComponent = _a.ButtonComponent, SecondaryButtonComponent = _a.SecondaryButtonComponent, setFieldValue = _a.setFieldValue, organizationName = _a.organizationName, formHeaderStyle = _a.formHeaderStyle, formLabelStyle = _a.formLabelStyle;
-    var _b = useState({}), chartConfig = _b[0], setChartConfig = _b[1];
-    var _c = useState(report
+function FormikForm({ values, isSubmitting, data, fieldOptions, dateFieldOptions, theme, report, editChart, fields, query, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, setFieldValue, organizationName, formHeaderStyle, formLabelStyle, }) {
+    const [chartConfig, setChartConfig] = (0, react_1.useState)({});
+    const [yAxisFields, setYAxisFields] = (0, react_1.useState)(report
         ? report.yAxisFields
         : [
             {
@@ -416,162 +307,157 @@ function FormikForm(_a) {
                 label: '',
                 format: 'whole_number',
             },
-        ]), yAxisFields = _c[0], setYAxisFields = _c[1];
-    var _d = useState(report && report.columns.length
+        ]);
+    const [columns, setColumns] = (0, react_1.useState)(report && report.columns.length
         ? report.columns
-        : (fields === null || fields === void 0 ? void 0 : fields.length)
-            ? fields.map(function (field) { return convertPostgresColumn(field); })
-            : []), columns = _d[0], setColumns = _d[1];
-    var handleAddYAxisField = function () {
-        setYAxisFields(__spreadArray(__spreadArray([], yAxisFields, true), [
+        : fields?.length
+            ? fields.map(field => convertPostgresColumn(field))
+            : []);
+    const handleAddYAxisField = () => {
+        setYAxisFields([
+            ...yAxisFields,
             { label: '', field: '', format: 'whole_number' },
-        ], false));
+        ]);
     };
-    var handleDeleteYAxisField = function (index) {
-        setYAxisFields(function (yAxisFields) { return yAxisFields.filter(function (_, i) { return index !== i; }); });
+    const handleDeleteYAxisField = index => {
+        setYAxisFields(yAxisFields => yAxisFields.filter((_, i) => index !== i));
     };
-    var handleYAxisFieldChange = function (index, value) {
-        var newYAxisFields = __spreadArray([], yAxisFields, true);
-        newYAxisFields[index] = __assign(__assign({}, newYAxisFields[index]), { field: value });
+    const handleYAxisFieldChange = (index, value) => {
+        const newYAxisFields = [...yAxisFields];
+        newYAxisFields[index] = { ...newYAxisFields[index], field: value };
         setYAxisFields(newYAxisFields);
     };
-    var handleYAxisFieldFormatChange = function (index, value) {
-        var newYAxisFields = __spreadArray([], yAxisFields, true);
-        newYAxisFields[index] = __assign(__assign({}, newYAxisFields[index]), { format: value });
+    const handleYAxisFieldFormatChange = (index, value) => {
+        const newYAxisFields = [...yAxisFields];
+        newYAxisFields[index] = { ...newYAxisFields[index], format: value };
         setYAxisFields(newYAxisFields);
     };
-    var handleYAxisFieldLabelChange = function (index, value) {
-        var newYAxisFields = __spreadArray([], yAxisFields, true);
-        newYAxisFields[index] = __assign(__assign({}, newYAxisFields[index]), { label: value });
+    const handleYAxisFieldLabelChange = (index, value) => {
+        const newYAxisFields = [...yAxisFields];
+        newYAxisFields[index] = { ...newYAxisFields[index], label: value };
         setYAxisFields(newYAxisFields);
     };
-    var handleColumnFieldChange = function (index, value) {
-        var newColumns = __spreadArray([], columns, true);
-        newColumns[index] = __assign(__assign({}, newColumns[index]), { field: value });
+    const handleColumnFieldChange = (index, value) => {
+        const newColumns = [...columns];
+        newColumns[index] = { ...newColumns[index], field: value };
         setColumns(newColumns);
     };
-    var handleColumnFormatChange = function (index, value) {
-        var newColumns = __spreadArray([], columns, true);
-        newColumns[index] = __assign(__assign({}, newColumns[index]), { format: value });
+    const handleColumnFormatChange = (index, value) => {
+        const newColumns = [...columns];
+        newColumns[index] = { ...newColumns[index], format: value };
         setColumns(newColumns);
     };
-    var handleColumnLabelChange = function (index, value) {
-        var newColumns = __spreadArray([], columns, true);
-        newColumns[index] = __assign(__assign({}, newColumns[index]), { label: value });
+    const handleColumnLabelChange = (index, value) => {
+        const newColumns = [...columns];
+        newColumns[index] = { ...newColumns[index], label: value };
         setColumns(newColumns);
     };
-    useEffect(function () {
-        setChartConfig(__assign(__assign({}, values), { yAxisFields: yAxisFields, rows: data }));
+    (0, react_1.useEffect)(() => {
+        setChartConfig({ ...values, yAxisFields: yAxisFields, rows: data });
     }, [values, yAxisFields]);
     // console.log('VIBE: ', { report, values, yAxisFields, columns, query });
-    return (_jsx(Form, __assign({ style: { display: 'inline-block' } }, { children: _jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsxs("div", __assign({ style: {
+    return ((0, jsx_runtime_1.jsx)(formik_1.Form, { style: { display: 'inline-block' }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',
-                    } }, { children: [_jsx("div", { style: { height: 20 } }), _jsx("div", __assign({ style: { marginLeft: -25 } }, { children: Object.keys(chartConfig).length > 0 && (_jsx(Chart, { chartId: "646e37a660feef000be67a93", config: chartConfig, colors: theme.chartColors, containerStyle: {
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: { marginLeft: -25 }, children: Object.keys(chartConfig).length > 0 && ((0, jsx_runtime_1.jsx)(Chart_1.default, { chartId: "646e37a660feef000be67a93", config: chartConfig, colors: theme.chartColors, containerStyle: {
                                     width: '100%',
                                     height: 300,
-                                } })) })), _jsx("div", { style: { height: 20 } }), _jsx("div", __assign({ style: formHeaderStyle || {
+                                } })) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: formHeaderStyle || {
                                 fontFamily: theme.fontFamily,
                                 color: theme.primaryTextColor,
                                 fontSize: theme.fontSize + 2,
                                 fontWeight: 600,
                                 marginTop: 20,
-                            } }, { children: 'Chart' })), _jsxs("div", __assign({ style: {
+                            }, children: 'Chart' }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 alignItems: 'center',
-                            } }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: formLabelStyle || {
+                            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
                                                 fontSize: '14px',
                                                 marginBottom: '6px',
                                                 fontWeight: '600',
                                                 marginTop: 8,
                                                 color: theme.secondaryTextColor,
-                                                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                            } }, { children: "Name" })), _jsx("div", __assign({ style: { minWidth: 200 } }, { children: _jsx(Field, { name: "chartName", component: TextInputComponent, theme: theme, wider: true }) }))] })), _jsx("div", { style: { width: 20 } }), _jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: formLabelStyle || {
+                                                fontFamily: theme?.fontFamily,
+                                            }, children: "Name" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: "chartName", component: TextInputComponent, theme: theme, wider: true }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
                                                 fontFamily: theme.fontFamily,
                                                 color: theme.secondaryTextColor,
                                                 fontSize: theme.fontSize,
                                                 fontWeight: theme.labelFontWeight,
                                                 marginTop: 8,
                                                 marginBottom: 6,
-                                            } }, { children: "Dashboard name" })), _jsx("div", __assign({ style: { minWidth: 200 } }, { children: _jsx(Field, { name: "dashboardName", component: TextInputComponent, theme: theme, wider: true }) }))] })), _jsx("div", { style: { width: 20 } }), _jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: formLabelStyle || {
+                                            }, children: "Dashboard name" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: "dashboardName", component: TextInputComponent, theme: theme, wider: true }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
                                                 fontFamily: theme.fontFamily,
                                                 color: theme.secondaryTextColor,
                                                 fontSize: theme.fontSize,
                                                 fontWeight: theme.labelFontWeight,
                                                 marginTop: 8,
-                                            } }, { children: "Chart type" })), _jsx("div", __assign({ style: { minWidth: 200 } }, { children: _jsx(Field, { name: "chartType", component: SelectComponent, theme: theme, options: [
+                                            }, children: "Chart type" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: "chartType", component: SelectComponent, theme: theme, options: [
                                                     { label: 'bar', value: 'bar' },
                                                     { label: 'line', value: 'line' },
                                                     { label: 'column', value: 'column' },
                                                     { label: 'pie', value: 'pie' },
                                                     { label: 'metric', value: 'metric' },
                                                     { label: 'table', value: 'table' },
-                                                ] }) }))] }))] }))] })), _jsx("div", __assign({ style: {
+                                                ] }) })] })] })] }), (0, jsx_runtime_1.jsx)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'center',
                         // justifyContent: 'space-between',
                         marginTop: 20,
-                    } }, { children: values.chartType !== 'table' && (_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: formLabelStyle || {
+                    }, children: values.chartType !== 'table' && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
                                     fontFamily: theme.fontFamily,
                                     color: theme.secondaryTextColor,
                                     fontSize: theme.fontSize,
                                     fontWeight: theme.labelFontWeight,
-                                } }, { children: values.chartType === 'pie'
+                                }, children: values.chartType === 'pie'
                                     ? 'Category column'
-                                    : 'x-axis column' })), _jsx("div", { style: { height: 6 } }), _jsxs("div", __assign({ style: {
+                                    : 'x-axis column' }), (0, jsx_runtime_1.jsx)("div", { style: { height: 6 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
-                                } }, { children: [_jsx("div", __assign({ style: { minWidth: 200 } }, { children: _jsx(Field, { name: "xAxisField", component: SelectComponent, theme: theme, options: fieldOptions }) })), _jsx("div", { style: { width: 20 } }), _jsx("div", __assign({ style: { minWidth: 200 } }, { children: _jsx(Field, { name: "xAxisLabel", component: TextInputComponent, theme: theme }) })), _jsx("div", { style: { width: 20 } }), _jsx("div", __assign({ style: { minWidth: 200 } }, { children: _jsx(Field, { name: "xAxisFormat", component: SelectComponent, theme: theme, options: FORMAT_OPTIONS }) }))] }))] }))) })), _jsxs("div", __assign({ style: {
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: "xAxisField", component: SelectComponent, theme: theme, options: fieldOptions }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: "xAxisLabel", component: TextInputComponent, theme: theme }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: "xAxisFormat", component: SelectComponent, theme: theme, options: FORMAT_OPTIONS }) })] })] })) }), (0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'flex-start',
                         // justifyContent: 'space-between',
                         marginTop: 20,
-                    } }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: formLabelStyle || {
+                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
                                         fontFamily: theme.fontFamily,
                                         color: theme.secondaryTextColor,
                                         fontSize: theme.fontSize,
                                         fontWeight: theme.labelFontWeight,
                                         minWidth: 200,
-                                    } }, { children: values.chartType === 'table'
+                                    }, children: values.chartType === 'table'
                                         ? 'Columns'
                                         : values.chartType === 'pie'
                                             ? 'Quantity column'
-                                            : 'y-axis columns' })), _jsxs("div", __assign({ style: {
+                                            : 'y-axis columns' }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
-                                    } }, { children: [yAxisFields.map(function (yAxisField, index) { return (_jsx("div", __assign({ style: {
+                                    }, children: [yAxisFields.map((yAxisField, index) => ((0, jsx_runtime_1.jsx)("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'row',
                                                 alignItems: 'center',
                                                 marginTop: index === 0 ? 6 : 10,
-                                            } }, { children: _jsx("div", __assign({ style: { minWidth: 200 } }, { children: _jsx(Field, { name: "yAxisField-".concat(index), component: SelectComponent, theme: theme, value: yAxisField.field, onChange: function (option) { return handleYAxisFieldChange(index, option); }, options: fieldOptions }) })) }), "yAxisField-".concat(index))); }), values.chartType !== 'pie' && (_jsx("div", __assign({ style: { marginTop: 12 } }, { children: _jsx(SecondaryButtonComponent, { onClick: handleAddYAxisField, label: "Add column +" }) }))), _jsx("div", { style: { height: 10 } })] }))] })), _jsx("div", { style: { width: 20 } }), _jsxs("div", __assign({ style: {
+                                            }, children: (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: `yAxisField-${index}`, component: SelectComponent, theme: theme, value: yAxisField.field, onChange: option => handleYAxisFieldChange(index, option), options: fieldOptions }) }) }, `yAxisField-${index}`))), values.chartType !== 'pie' && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 12 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddYAxisField, label: "Add column +" }) })), (0, jsx_runtime_1.jsx)("div", { style: { height: 10 } })] })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 justifyContent: 'flex-start',
-                            } }, { children: [_jsx("div", __assign({ style: formLabelStyle || {
+                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
                                         fontFamily: theme.fontFamily,
                                         color: 'transparent',
                                         fontSize: theme.fontSize,
                                         fontWeight: theme.labelFontWeight,
                                         minWidth: 200,
                                         //   marginBottom: 10,
-                                    } }, { children: "y-axis label" })), values.chartType !== 'pie' &&
-                                    yAxisFields.map(function (yAxisField, index) { return (_jsxs("div", __assign({ style: {
+                                    }, children: "y-axis label" }), values.chartType !== 'pie' &&
+                                    yAxisFields.map((yAxisField, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'row',
                                             alignItems: 'center',
                                             marginTop: index === 0 ? 6 : 10,
-                                        } }, { children: [_jsx("div", __assign({ style: { minWidth: 200 } }, { children: _jsx(Field, { name: "yAxisField-".concat(index), component: TextInputComponent, theme: theme, placeholder: "Enter column label", value: yAxisField.label, onChange: function (event) {
-                                                        return handleYAxisFieldLabelChange(index, event.target.value);
-                                                    } }) })), _jsx("div", { style: { width: 20 } }), _jsx("div", __assign({ style: { minWidth: 200 } }, { children: _jsx(Field, { name: "yAxisFieldFormat-".concat(index), component: SelectComponent, theme: theme, value: yAxisField.format, onChange: function (option) {
-                                                        return handleYAxisFieldFormatChange(index, option);
-                                                    }, options: FORMAT_OPTIONS }) })), _jsx("div", __assign({ onClick: function () {
-                                                    return index > 0 ? handleDeleteYAxisField(index) : undefined;
-                                                }, style: {
+                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: `yAxisField-${index}`, component: TextInputComponent, theme: theme, placeholder: "Enter column label", value: yAxisField.label, onChange: event => handleYAxisFieldLabelChange(index, event.target.value) }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: `yAxisFieldFormat-${index}`, component: SelectComponent, theme: theme, value: yAxisField.format, onChange: option => handleYAxisFieldFormatChange(index, option), options: FORMAT_OPTIONS }) }), (0, jsx_runtime_1.jsx)("div", { onClick: () => index > 0 ? handleDeleteYAxisField(index) : undefined, style: {
                                                     cursor: index > 0 ? 'pointer' : undefined,
                                                     paddingLeft: 6,
                                                     paddingTop: 12,
@@ -581,58 +467,52 @@ function FormikForm(_a) {
                                                     display: 'flex',
                                                     alignItems: 'center',
                                                     justifyContent: 'center',
-                                                } }, { children: _jsx(XMarkIcon, { style: {
+                                                }, children: (0, jsx_runtime_1.jsx)(solid_1.XMarkIcon, { style: {
                                                         height: '20px',
                                                         width: '20px',
                                                         color: index > 0
-                                                            ? theme === null || theme === void 0 ? void 0 : theme.secondaryTextColor
+                                                            ? theme?.secondaryTextColor
                                                             : 'rgba(0,0,0,0)',
-                                                    }, "aria-hidden": "true" }) }))] }), "yAxisField-".concat(index))); })] }))] })), _jsx("div", { style: { height: 20 } }), _jsx("div", __assign({ style: formHeaderStyle || {
+                                                    }, "aria-hidden": "true" }) })] }, `yAxisField-${index}`)))] })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: formHeaderStyle || {
                         fontFamily: theme.fontFamily,
                         color: theme.primaryTextColor,
                         fontSize: theme.fontSize + 2,
                         fontWeight: 600,
-                    } }, { children: 'Table' })), _jsxs("div", __assign({ style: {
+                    }, children: 'Table' }), (0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'flex-start',
                         // justifyContent: 'space-between',
                         // marginTop: 8,
-                    } }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: formLabelStyle || {
+                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
                                         fontFamily: theme.fontFamily,
                                         color: theme.secondaryTextColor,
                                         fontSize: theme.fontSize,
                                         fontWeight: theme.labelFontWeight,
-                                    } }, { children: 'Columns' })), _jsxs("div", __assign({ style: {
+                                    }, children: 'Columns' }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
-                                    } }, { children: [columns.map(function (yAxisField, index) { return (_jsx("div", __assign({ style: {
+                                    }, children: [columns.map((yAxisField, index) => ((0, jsx_runtime_1.jsx)("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'row',
                                                 alignItems: 'center',
                                                 marginTop: index === 0 ? 6 : 10,
-                                            } }, { children: _jsx("div", __assign({ style: { minWidth: 200 } }, { children: _jsx(Field, { name: "column-".concat(index), component: SelectComponent, theme: theme, value: yAxisField.field, onChange: function (option) {
-                                                        return handleColumnFieldChange(index, option);
-                                                    }, options: fieldOptions }) })) }), "column-".concat(index))); }), _jsx("div", { style: { height: 10 } })] }))] })), _jsx("div", { style: { width: 20 } }), _jsxs("div", __assign({ style: {
+                                            }, children: (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: `column-${index}`, component: SelectComponent, theme: theme, value: yAxisField.field, onChange: option => handleColumnFieldChange(index, option), options: fieldOptions }) }) }, `column-${index}`))), (0, jsx_runtime_1.jsx)("div", { style: { height: 10 } })] })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 justifyContent: 'flex-start',
-                            } }, { children: [_jsx("div", __assign({ style: formLabelStyle || {
+                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
                                         fontFamily: theme.fontFamily,
                                         color: 'transparent',
                                         fontSize: theme.fontSize,
                                         fontWeight: theme.labelFontWeight,
                                         minWidth: 200,
                                         //   marginBottom: 10,
-                                    } }, { children: "label" })), columns.map(function (yAxisField, index) { return (_jsxs("div", __assign({ style: {
+                                    }, children: "label" }), columns.map((yAxisField, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         alignItems: 'center',
                                         marginTop: index === 0 ? 6 : 10,
-                                    } }, { children: [_jsx("div", __assign({ style: { minWidth: 200 } }, { children: _jsx(Field, { name: "columnlabel-".concat(index), component: TextInputComponent, theme: theme, placeholder: "Enter column label", value: yAxisField.label, onChange: function (event) {
-                                                    return handleColumnLabelChange(index, event.target.value);
-                                                } }) })), _jsx("div", { style: { width: 20 } }), _jsx("div", __assign({ style: { minWidth: 200 } }, { children: _jsx(Field, { name: "columnFormat-".concat(index), component: SelectComponent, theme: theme, value: yAxisField.format, onChange: function (option) { return handleColumnFormatChange(index, option); }, options: FORMAT_OPTIONS }) }))] }), "column-".concat(index))); })] }))] })), _jsx("div", { style: { height: 20 } }), _jsx("div", { style: { height: 20 } }), _jsx(ButtonComponent, { onClick: function () {
-                        return editChart({ report: report, values: values, yAxisFields: yAxisFields, columns: columns, query: query });
-                    }, label: report ? 'Save changes' : 'Add to dashboard' })] })) })));
+                                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: `columnlabel-${index}`, component: TextInputComponent, theme: theme, placeholder: "Enter column label", value: yAxisField.label, onChange: event => handleColumnLabelChange(index, event.target.value) }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: `columnFormat-${index}`, component: SelectComponent, theme: theme, value: yAxisField.format, onChange: option => handleColumnFormatChange(index, option), options: FORMAT_OPTIONS }) })] }, `column-${index}`)))] })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => editChart({ report, values, yAxisFields, columns, query }), label: report ? 'Save changes' : 'Add to dashboard' })] }) }));
 }
 //# sourceMappingURL=AddToDashboardModal.js.map