@quillsql/react 1.6.0 → 1.6.3

package/lib/AddToDashboardModal.js

@@ -0,0 +1,638 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "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';
+function convertPostgresColumn(column) {
+    var format;
+    switch (column.dataTypeID) {
+        case 20: // int8
+        case 21: // int2
+        case 23: // int4
+            format = 'whole_number';
+            break;
+        case 700: // float4
+        case 701: // float8
+        case 1700: // numeric
+            format = 'two_decimal_places';
+            break;
+        case 1082: // date
+        case 1083: // time
+        case 1184: // timestamptz
+        case 1114: // timestamp
+            format = 'MMM_dd_yyyy';
+            break;
+        case 1043: // varchar
+        default:
+            format = 'string';
+    }
+    return {
+        label: column.name,
+        field: column.name,
+        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*/];
+                    }
+                });
+            });
+        }
+        if (isSubscribed) {
+            getSchema();
+        }
+        return function () {
+            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, 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;
+                        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 })];
+                    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*/];
+                }
+            });
+        });
+    };
+    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, 
+            // leave null for now
+            report: null, query: query, 
+            // organizationName={organization?.name}
+            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 ({
+        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*/];
+                }
+            });
+        }); };
+        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',
+            xAxisFieldLabel: '',
+            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 === 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 }));
+        } })));
+}
+export 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) {
+    // Calculate the distance in hours
+    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: startOfHour,
+        };
+    }
+    // Calculate the distance in days
+    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: startOfDay,
+        };
+    }
+    // Calculate the distance in months
+    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: startOfMonth,
+        };
+    }
+    // Calculate the distance in years
+    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: startOfYear,
+        };
+    }
+    // Otherwise, the distance is more than one year
+    return {
+        unit: 'year',
+        format: 'yyyy',
+        startOf: 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)));
+};
+var 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; })];
+            }
+        });
+    });
+}
+var FORMAT_OPTIONS = [
+    { value: 'whole_number', label: 'whole number' },
+    { value: 'one_decimal_place', label: 'one decimal place' },
+    { value: 'dollar_amount', label: 'dollar amount' },
+    { value: 'MMM_yyyy', label: 'month' },
+    { value: 'MMM_dd-MMM_dd', label: 'week' },
+    { value: 'MMM_dd_yyyy', label: 'day' },
+    { value: 'MMM_dd_hh:mm_ap_pm', label: 'day and time' },
+    { value: 'hh_ap_pm', label: 'hour' },
+    { 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
+        ? report.yAxisFields
+        : [
+            {
+                field: fieldOptions.length > 1
+                    ? fieldOptions[1].value
+                    : fieldOptions[0].value,
+                label: '',
+                format: 'whole_number',
+            },
+        ]), yAxisFields = _c[0], setYAxisFields = _c[1];
+    var _d = 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), [
+            { label: '', field: '', format: 'whole_number' },
+        ], false));
+    };
+    var handleDeleteYAxisField = function (index) {
+        setYAxisFields(function (yAxisFields) { return yAxisFields.filter(function (_, i) { return index !== i; }); });
+    };
+    var handleYAxisFieldChange = function (index, value) {
+        var newYAxisFields = __spreadArray([], yAxisFields, true);
+        newYAxisFields[index] = __assign(__assign({}, newYAxisFields[index]), { field: value });
+        setYAxisFields(newYAxisFields);
+    };
+    var handleYAxisFieldFormatChange = function (index, value) {
+        var newYAxisFields = __spreadArray([], yAxisFields, true);
+        newYAxisFields[index] = __assign(__assign({}, newYAxisFields[index]), { format: value });
+        setYAxisFields(newYAxisFields);
+    };
+    var handleYAxisFieldLabelChange = function (index, value) {
+        var newYAxisFields = __spreadArray([], yAxisFields, true);
+        newYAxisFields[index] = __assign(__assign({}, newYAxisFields[index]), { label: value });
+        setYAxisFields(newYAxisFields);
+    };
+    var handleColumnFieldChange = function (index, value) {
+        var newColumns = __spreadArray([], columns, true);
+        newColumns[index] = __assign(__assign({}, newColumns[index]), { field: value });
+        setColumns(newColumns);
+    };
+    var handleColumnFormatChange = function (index, value) {
+        var newColumns = __spreadArray([], columns, true);
+        newColumns[index] = __assign(__assign({}, newColumns[index]), { format: value });
+        setColumns(newColumns);
+    };
+    var handleColumnLabelChange = function (index, value) {
+        var newColumns = __spreadArray([], columns, true);
+        newColumns[index] = __assign(__assign({}, newColumns[index]), { label: value });
+        setColumns(newColumns);
+    };
+    useEffect(function () {
+        setChartConfig(__assign(__assign({}, 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: {
+                        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: {
+                                    width: '100%',
+                                    height: 300,
+                                } })) })), _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' })), _jsxs("div", __assign({ style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                            } }, { 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 === 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" })), _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" })), _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' },
+                                                ] }) }))] }))] }))] })), _jsx("div", __assign({ 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 || {
+                                    fontFamily: theme.fontFamily,
+                                    color: theme.secondaryTextColor,
+                                    fontSize: theme.fontSize,
+                                    fontWeight: theme.labelFontWeight,
+                                } }, { children: values.chartType === 'pie'
+                                    ? 'Category column'
+                                    : 'x-axis column' })), _jsx("div", { style: { height: 6 } }), _jsxs("div", __assign({ 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: {
+                        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 || {
+                                        fontFamily: theme.fontFamily,
+                                        color: theme.secondaryTextColor,
+                                        fontSize: theme.fontSize,
+                                        fontWeight: theme.labelFontWeight,
+                                        minWidth: 200,
+                                    } }, { children: values.chartType === 'table'
+                                        ? 'Columns'
+                                        : values.chartType === 'pie'
+                                            ? 'Quantity column'
+                                            : 'y-axis columns' })), _jsxs("div", __assign({ style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                    } }, { children: [yAxisFields.map(function (yAxisField, index) { return (_jsx("div", __assign({ 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: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                justifyContent: 'flex-start',
+                            } }, { 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(function (yAxisField, index) { return (_jsxs("div", __assign({ 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: {
+                                                    cursor: index > 0 ? 'pointer' : undefined,
+                                                    paddingLeft: 6,
+                                                    paddingTop: 12,
+                                                    paddingBottom: 12,
+                                                    paddingRight: 6,
+                                                    maxHeight: 38,
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                } }, { children: _jsx(XMarkIcon, { style: {
+                                                        height: '20px',
+                                                        width: '20px',
+                                                        color: index > 0
+                                                            ? theme === null || theme === void 0 ? void 0 : theme.secondaryTextColor
+                                                            : 'rgba(0,0,0,0)',
+                                                    }, "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' })), _jsxs("div", __assign({ 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 || {
+                                        fontFamily: theme.fontFamily,
+                                        color: theme.secondaryTextColor,
+                                        fontSize: theme.fontSize,
+                                        fontWeight: theme.labelFontWeight,
+                                    } }, { children: 'Columns' })), _jsxs("div", __assign({ style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                    } }, { children: [columns.map(function (yAxisField, index) { return (_jsx("div", __assign({ 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: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                justifyContent: 'flex-start',
+                            } }, { 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(function (yAxisField, index) { return (_jsxs("div", __assign({ 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' })] })) })));
+}
+//# sourceMappingURL=AddToDashboardModal.js.map