@quillsql/react 1.7.1 → 1.7.2

package/lib/AddToDashboardModal.js

@@ -1,20 +1,81 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatDateBuckets = exports.isArrayOfValidDates = exports.isValidDate = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+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";
 // @ts-nocheck
-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");
+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';
 function convertPostgresColumn(column) {
-    let format;
+    var format;
     switch (column.dataTypeID) {
         case 20: // int8
         case 21: // int2
@@ -42,248 +103,295 @@ function convertPostgresColumn(column) {
         format: format,
     };
 }
-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,
-                    },
+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*/];
+                    }
                 });
-                if (isSubscribed) {
-                    setSchema(response3.data.tables);
-                }
-            }
+            });
         }
         if (isSubscribed) {
             getSchema();
         }
-        return () => {
+        return function () {
             isSubscribed = false;
         };
     }, [schema]);
-    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,
-                },
+    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*/];
+                }
             });
-        }
-        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}>
-    (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, 
+    _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, 
             // 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>
     );
 }
-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 => ({
+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 ({
         value: field,
         label: field,
-    }));
-    const [dateFieldOptions, setDateFieldOptions] = (0, react_1.useState)([]);
-    (0, react_1.useEffect)(() => {
-        const fetchReferencedTables = async () => {
-            const result = await getReferencedTables(query, 'PostgresQL', schema);
-            setDateFieldOptions(result);
-        };
+    }); });
+    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*/];
+                }
+            });
+        }); };
         fetchReferencedTables();
     }, [query, schema]);
-    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',
+    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',
             xAxisFieldLabel: '',
-            dashboardName: report?.dashboardName || '',
+            dashboardName: (report === null || report === void 0 ? void 0 : report.dashboardName) || '',
             dateFieldTable: (dateFieldOptions.length && dateFieldOptions[0].name) || '',
             dateField: (dateFieldOptions.length && dateFieldOptions[0].columns[0].name) ||
                 '',
-            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 })) }));
+            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 }));
+        } })));
 }
-function isValidDate(d) {
+export function isValidDate(d) {
     return d instanceof Date && !isNaN(d);
 }
-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) {
+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) {
     // Calculate the distance in hours
-    const distanceInHours = Math.abs((0, date_fns_1.differenceInHours)(endDate, startDate));
+    var distanceInHours = Math.abs(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: date_fns_1.startOfHour,
+            startOf: startOfHour,
         };
     }
     // Calculate the distance in days
-    const distanceInDays = Math.abs((0, date_fns_1.differenceInDays)(endDate, startDate));
+    var distanceInDays = Math.abs(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: date_fns_1.startOfDay,
+            startOf: startOfDay,
         };
     }
     // Calculate the distance in months
-    const distanceInMonths = Math.abs((0, date_fns_1.differenceInMonths)(endDate, startDate));
+    var distanceInMonths = Math.abs(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: date_fns_1.startOfMonth,
+            startOf: startOfMonth,
         };
     }
     // Calculate the distance in years
-    const distanceInYears = Math.abs((0, date_fns_1.differenceInYears)(endDate, startDate));
+    var distanceInYears = Math.abs(differenceInYears(endDate, startDate));
     // Check if the distance is less than or equal to one year
     if (distanceInYears <= 1) {
         return {
             unit: 'year',
             format: 'yyyy',
-            startOf: date_fns_1.startOfYear,
+            startOf: startOfYear,
         };
     }
     // Otherwise, the distance is more than one year
     return {
         unit: 'year',
         format: 'yyyy',
-        startOf: date_fns_1.startOfYear,
+        startOf: startOfYear,
     };
 }
-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 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)));
 };
-const POSTGRES_DATE_TYPES = [
+var POSTGRES_DATE_TYPES = [
     'timestamp',
     'date',
     'timestamptz',
     'time',
     'timetz',
 ];
-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);
+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; })];
+            }
+        });
+    });
 }
-const FORMAT_OPTIONS = [
+var FORMAT_OPTIONS = [
     { value: 'whole_number', label: 'whole number' },
     { value: 'one_decimal_place', label: 'one decimal place' },
     { value: 'dollar_amount', label: 'dollar amount' },
@@ -295,9 +403,10 @@ const FORMAT_OPTIONS = [
     { value: 'percent', label: 'percent' },
     { value: 'string', label: 'string' },
 ];
-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
+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
         ? report.yAxisFields
         : [
             {
@@ -307,157 +416,162 @@ function FormikForm({ values, isSubmitting, data, fieldOptions, dateFieldOptions
                 label: '',
                 format: 'whole_number',
             },
-        ]);
-    const [columns, setColumns] = (0, react_1.useState)(report && report.columns.length
+        ]), yAxisFields = _c[0], setYAxisFields = _c[1];
+    var _d = useState(report && report.columns.length
         ? report.columns
-        : fields?.length
-            ? fields.map(field => convertPostgresColumn(field))
-            : []);
-    const handleAddYAxisField = () => {
-        setYAxisFields([
-            ...yAxisFields,
+        : (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), [
             { label: '', field: '', format: 'whole_number' },
-        ]);
+        ], false));
     };
-    const handleDeleteYAxisField = index => {
-        setYAxisFields(yAxisFields => yAxisFields.filter((_, i) => index !== i));
+    var handleDeleteYAxisField = function (index) {
+        setYAxisFields(function (yAxisFields) { return yAxisFields.filter(function (_, i) { return index !== i; }); });
     };
-    const handleYAxisFieldChange = (index, value) => {
-        const newYAxisFields = [...yAxisFields];
-        newYAxisFields[index] = { ...newYAxisFields[index], field: value };
+    var handleYAxisFieldChange = function (index, value) {
+        var newYAxisFields = __spreadArray([], yAxisFields, true);
+        newYAxisFields[index] = __assign(__assign({}, newYAxisFields[index]), { field: value });
         setYAxisFields(newYAxisFields);
     };
-    const handleYAxisFieldFormatChange = (index, value) => {
-        const newYAxisFields = [...yAxisFields];
-        newYAxisFields[index] = { ...newYAxisFields[index], format: value };
+    var handleYAxisFieldFormatChange = function (index, value) {
+        var newYAxisFields = __spreadArray([], yAxisFields, true);
+        newYAxisFields[index] = __assign(__assign({}, newYAxisFields[index]), { format: value });
         setYAxisFields(newYAxisFields);
     };
-    const handleYAxisFieldLabelChange = (index, value) => {
-        const newYAxisFields = [...yAxisFields];
-        newYAxisFields[index] = { ...newYAxisFields[index], label: value };
+    var handleYAxisFieldLabelChange = function (index, value) {
+        var newYAxisFields = __spreadArray([], yAxisFields, true);
+        newYAxisFields[index] = __assign(__assign({}, newYAxisFields[index]), { label: value });
         setYAxisFields(newYAxisFields);
     };
-    const handleColumnFieldChange = (index, value) => {
-        const newColumns = [...columns];
-        newColumns[index] = { ...newColumns[index], field: value };
+    var handleColumnFieldChange = function (index, value) {
+        var newColumns = __spreadArray([], columns, true);
+        newColumns[index] = __assign(__assign({}, newColumns[index]), { field: value });
         setColumns(newColumns);
     };
-    const handleColumnFormatChange = (index, value) => {
-        const newColumns = [...columns];
-        newColumns[index] = { ...newColumns[index], format: value };
+    var handleColumnFormatChange = function (index, value) {
+        var newColumns = __spreadArray([], columns, true);
+        newColumns[index] = __assign(__assign({}, newColumns[index]), { format: value });
         setColumns(newColumns);
     };
-    const handleColumnLabelChange = (index, value) => {
-        const newColumns = [...columns];
-        newColumns[index] = { ...newColumns[index], label: value };
+    var handleColumnLabelChange = function (index, value) {
+        var newColumns = __spreadArray([], columns, true);
+        newColumns[index] = __assign(__assign({}, newColumns[index]), { label: value });
         setColumns(newColumns);
     };
-    (0, react_1.useEffect)(() => {
-        setChartConfig({ ...values, yAxisFields: yAxisFields, rows: data });
+    useEffect(function () {
+        setChartConfig(__assign(__assign({}, values), { yAxisFields: yAxisFields, rows: data }));
     }, [values, yAxisFields]);
     // console.log('VIBE: ', { report, values, yAxisFields, columns, query });
-    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: {
+    return (_jsx(Form, __assign({ style: { display: 'inline-block' } }, { children: _jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsxs("div", __assign({ style: {
                         display: 'flex',
                         flexDirection: 'column',
-                    }, 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: {
+                    } }, { 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: {
                                     width: '100%',
                                     height: 300,
-                                } })) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: formHeaderStyle || {
+                                } })) })), _jsx("div", { style: { height: 20 } }), _jsx("div", __assign({ style: formHeaderStyle || {
                                 fontFamily: theme.fontFamily,
                                 color: theme.primaryTextColor,
                                 fontSize: theme.fontSize + 2,
                                 fontWeight: 600,
                                 marginTop: 20,
-                            }, children: 'Chart' }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            } }, { children: 'Chart' })), _jsxs("div", __assign({ style: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 alignItems: 'center',
-                            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                            } }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: formLabelStyle || {
                                                 fontSize: '14px',
                                                 marginBottom: '6px',
                                                 fontWeight: '600',
                                                 marginTop: 8,
                                                 color: theme.secondaryTextColor,
-                                                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 === 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,
                                                 color: theme.secondaryTextColor,
                                                 fontSize: theme.fontSize,
                                                 fontWeight: theme.labelFontWeight,
                                                 marginTop: 8,
                                                 marginBottom: 6,
-                                            }, 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 || {
+                                            } }, { 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 || {
                                                 fontFamily: theme.fontFamily,
                                                 color: theme.secondaryTextColor,
                                                 fontSize: theme.fontSize,
                                                 fontWeight: theme.labelFontWeight,
                                                 marginTop: 8,
-                                            }, 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: [
+                                            } }, { children: "Chart type" })), _jsx("div", __assign({ style: { minWidth: 200 } }, { children: _jsx(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' },
-                                                ] }) })] })] })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                ] }) }))] }))] }))] })), _jsx("div", __assign({ style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'center',
                         // justifyContent: 'space-between',
                         marginTop: 20,
-                    }, children: values.chartType !== 'table' && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                    } }, { children: values.chartType !== 'table' && (_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ 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' }), (0, jsx_runtime_1.jsx)("div", { style: { height: 6 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    : 'x-axis column' })), _jsx("div", { style: { height: 6 } }), _jsxs("div", __assign({ style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
-                                }, 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: {
+                                } }, { 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: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'flex-start',
                         // justifyContent: 'space-between',
                         marginTop: 20,
-                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                    } }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ 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' }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            : 'y-axis columns' })), _jsxs("div", __assign({ style: {
                                         display: 'flex',
                                         flexDirection: 'column',
-                                    }, children: [yAxisFields.map((yAxisField, index) => ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    } }, { children: [yAxisFields.map(function (yAxisField, index) { return (_jsx("div", __assign({ style: {
                                                 display: 'flex',
                                                 flexDirection: 'row',
                                                 alignItems: 'center',
                                                 marginTop: index === 0 ? 6 : 10,
-                                            }, 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: {
+                                            } }, { 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: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 justifyContent: 'flex-start',
-                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                            } }, { children: [_jsx("div", __assign({ 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((yAxisField, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    } }, { children: "y-axis label" })), values.chartType !== 'pie' &&
+                                    yAxisFields.map(function (yAxisField, index) { return (_jsxs("div", __assign({ style: {
                                             display: 'flex',
                                             flexDirection: 'row',
                                             alignItems: 'center',
                                             marginTop: index === 0 ? 6 : 10,
-                                        }, 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: {
+                                        } }, { 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: {
                                                     cursor: index > 0 ? 'pointer' : undefined,
                                                     paddingLeft: 6,
                                                     paddingTop: 12,
@@ -467,52 +581,58 @@ function FormikForm({ values, isSubmitting, data, fieldOptions, dateFieldOptions
                                                     display: 'flex',
                                                     alignItems: 'center',
                                                     justifyContent: 'center',
-                                                }, children: (0, jsx_runtime_1.jsx)(solid_1.XMarkIcon, { style: {
+                                                } }, { children: _jsx(XMarkIcon, { style: {
                                                         height: '20px',
                                                         width: '20px',
                                                         color: index > 0
-                                                            ? theme?.secondaryTextColor
+                                                            ? theme === null || theme === void 0 ? void 0 : theme.secondaryTextColor
                                                             : 'rgba(0,0,0,0)',
-                                                    }, "aria-hidden": "true" }) })] }, `yAxisField-${index}`)))] })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: formHeaderStyle || {
+                                                    }, "aria-hidden": "true" }) }))] }), "yAxisField-".concat(index))); })] }))] })), _jsx("div", { style: { height: 20 } }), _jsx("div", __assign({ style: formHeaderStyle || {
                         fontFamily: theme.fontFamily,
                         color: theme.primaryTextColor,
                         fontSize: theme.fontSize + 2,
                         fontWeight: 600,
-                    }, children: 'Table' }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    } }, { children: 'Table' })), _jsxs("div", __assign({ style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'flex-start',
                         // justifyContent: 'space-between',
                         // marginTop: 8,
-                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                    } }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: formLabelStyle || {
                                         fontFamily: theme.fontFamily,
                                         color: theme.secondaryTextColor,
                                         fontSize: theme.fontSize,
                                         fontWeight: theme.labelFontWeight,
-                                    }, children: 'Columns' }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    } }, { children: 'Columns' })), _jsxs("div", __assign({ style: {
                                         display: 'flex',
                                         flexDirection: 'column',
-                                    }, children: [columns.map((yAxisField, index) => ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    } }, { children: [columns.map(function (yAxisField, index) { return (_jsx("div", __assign({ style: {
                                                 display: 'flex',
                                                 flexDirection: 'row',
                                                 alignItems: 'center',
                                                 marginTop: index === 0 ? 6 : 10,
-                                            }, 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: {
+                                            } }, { 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: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 justifyContent: 'flex-start',
-                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                            } }, { children: [_jsx("div", __assign({ style: formLabelStyle || {
                                         fontFamily: theme.fontFamily,
                                         color: 'transparent',
                                         fontSize: theme.fontSize,
                                         fontWeight: theme.labelFontWeight,
                                         minWidth: 200,
                                         //   marginBottom: 10,
-                                    }, children: "label" }), columns.map((yAxisField, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    } }, { children: "label" })), columns.map(function (yAxisField, index) { return (_jsxs("div", __assign({ style: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         alignItems: 'center',
                                         marginTop: index === 0 ? 6 : 10,
-                                    }, 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' })] }) }));
+                                    } }, { 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' })] })) })));
 }
 //# sourceMappingURL=AddToDashboardModal.js.map