@quillsql/react 2.9.3 → 2.9.4

package/dist/cjs/AddToDashboardModal.js

@@ -0,0 +1,1438 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatDateBuckets = exports.isArrayOfValidDates = exports.isValidDate = exports.ChartForm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-nocheck
+const react_1 = __importStar(require("react"));
+const date_fns_1 = require("date-fns");
+const dataFetcher_1 = require("./utils/dataFetcher");
+const Context_1 = require("./Context");
+const date_fns_2 = require("date-fns");
+const Chart_1 = __importDefault(require("./Chart"));
+const ReportBuilder_1 = require("./ReportBuilder");
+const aggregate_1 = require("./utils/aggregate");
+const assets_1 = require("./assets");
+const merge_1 = require("./utils/merge");
+function convertPostgresColumn(column) {
+    let 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.field,
+        format: format,
+    };
+}
+function updateLabels(yAxisFields, values) {
+    return yAxisFields.map((item, index) => {
+        const updatedItem = { ...item };
+        if (values[`yAxisLabel-${index}`]) {
+            updatedItem.label = values[`yAxisLabel-${index}`];
+        }
+        if (values[`yAxisField-${index}`]) {
+            updatedItem.field = values[`yAxisField-${index}`];
+        }
+        if (values[`yAxisFormat-${index}`]) {
+            updatedItem.format = values[`yAxisFormat-${index}`];
+        }
+        return updatedItem;
+    });
+}
+const DefaultSelectComponent = function DefaultSelect({ onChange, value, options, form, field, theme, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("select", { onChange: event => onChange(event.target.value), value: value, id: 'reportbuilderdropdown', style: {
+                    width: 200,
+                    outline: 'none',
+                    textAlign: 'left',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    WebkitAppearance: 'none',
+                    borderRadius: 6,
+                    paddingLeft: 12,
+                    paddingRight: 12,
+                    height: 38,
+                    borderWidth: theme.borderWidth,
+                    borderColor: theme.borderColor,
+                    boxSizing: 'border-box',
+                    background: theme.backgroundColor,
+                    color: theme.primaryTextColor,
+                    boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+                    fontFamily: theme.fontFamily,
+                }, children: options.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label }, option.label + index))) }), (0, jsx_runtime_1.jsx)(assets_1.ArrowDownHeadIcon, { style: {
+                    height: '20px',
+                    width: '20px',
+                    flex: 'none',
+                    position: 'absolute',
+                    right: 8,
+                    top: 9,
+                    color: theme?.secondaryTextColor,
+                }, "aria-hidden": "true" })] }));
+};
+const MemoizedDefaultSelectComponent = react_1.default.memo(DefaultSelectComponent);
+const DefaultTextInputComponent = function DefaultText({ onChange, value, id, theme, placeholder, }) {
+    return ((0, jsx_runtime_1.jsx)("input", { style: {
+            outline: 'none',
+            textAlign: 'left',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            borderRadius: 6,
+            paddingLeft: 12,
+            paddingRight: 12,
+            margin: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            boxSizing: 'border-box',
+            width: 200,
+            height: 38,
+            borderWidth: theme.borderWidth,
+            borderColor: theme.borderColor,
+            borderStyle: 'solid',
+            background: theme.backgroundColor,
+            color: theme.primaryTextColor,
+            boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+            fontFamily: theme.fontFamily,
+        }, id: id, onChange: onChange, value: value, placeholder: placeholder }));
+};
+const MemoizedDefaultTextInputComponent = react_1.default.memo(DefaultTextInputComponent);
+function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, rows, columns, query, report, ModalComponent, formHeaderStyle, formLabelStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, onAddToDashboardComplete, fields, }) {
+    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);
+    // const [organization, setOrganization] = useState([]);
+    const { dispatch } = (0, react_1.useContext)(Context_1.DashboardContext);
+    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
+    // showTableFormatOptions = false;
+    // showDateFieldOptions = false;
+    // showAccessControlOptions = false;3
+    (0, react_1.useEffect)(() => {
+        let isSubscribed = true;
+        async function getSchema() {
+            if (!schema || !schema.length) {
+                const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `schema2/${client.publicKey}/`, null, 'GET');
+                if (isSubscribed) {
+                    setSchema(resp.tables);
+                }
+            }
+        }
+        if (isSubscribed) {
+            getSchema();
+        }
+        return () => {
+            isSubscribed = false;
+        };
+    }, [schema]);
+    const editChart = async ({ report, setIsSubmitting, values, yAxisFields, columns, query, buckets, showTableFormatOptions, }) => {
+        const { publicKey, customerId } = client;
+        const { xAxisLabel, chartName, chartType, xAxisField, xAxisFormat, dashboardName, dateFieldTable, dateField, template, } = 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 (!xAxisField) {
+            alert('Please enter a label for the x-axis');
+            return;
+        }
+        if (!yAxisFields.map(field => field.label).every(Boolean) &&
+            chartType !== 'pie' &&
+            chartType !== 'table') {
+            alert('Please enter a label for the y-axis');
+            return;
+        }
+        if (!columns.map((yAxisField, _) => yAxisField.label).every(Boolean) &&
+            showTableFormatOptions &&
+            chartType !== 'table') {
+            alert('Please enter a label for the table y-axis');
+            return;
+        }
+        setIsSubmitting(true);
+        if (!client) {
+            return;
+        }
+        let defaultDateField;
+        if (!showDateFieldOptions) {
+            const result = await getReferencedTables(client, query, schema);
+            defaultDateField = {
+                table: result[0].name,
+                field: result[0].columns[0].name,
+            };
+        }
+        const hostedBody = {
+            metadata: customerId
+                ? report
+                    ? {
+                        dashboardItemId: report._id,
+                        name: chartName,
+                        xAxisField,
+                        yAxisFields,
+                        xAxisLabel,
+                        xAxisFormat,
+                        chartType,
+                        dashboardName,
+                        columns: showTableFormatOptions && chartType !== 'table'
+                            ? columns
+                            : [
+                                ...yAxisFields,
+                                {
+                                    field: xAxisField,
+                                    label: xAxisLabel,
+                                    format: xAxisFormat,
+                                },
+                            ],
+                        dateField: showDateFieldOptions
+                            ? { table: dateFieldTable, field: dateField }
+                            : defaultDateField,
+                        query: query,
+                        task: 'create',
+                        orgId: customerId,
+                        template: template,
+                        buckets,
+                        clientId: publicKey,
+                    }
+                    : {
+                        name: chartName,
+                        xAxisField,
+                        yAxisFields,
+                        xAxisLabel,
+                        xAxisFormat,
+                        chartType,
+                        dashboardName,
+                        columns: showTableFormatOptions && chartType !== 'table'
+                            ? columns
+                            : [...yAxisFields],
+                        dateField: showDateFieldOptions
+                            ? { table: dateFieldTable, field: dateField }
+                            : defaultDateField,
+                        query: query,
+                        task: 'create',
+                        orgId: customerId,
+                        template: template,
+                        buckets,
+                        clientId: publicKey,
+                    }
+                : {
+                    name: chartName,
+                    xAxisField,
+                    yAxisFields,
+                    xAxisLabel,
+                    xAxisFormat,
+                    chartType,
+                    dashboardName,
+                    columns: showTableFormatOptions && chartType !== 'table'
+                        ? columns
+                        : [
+                            ...yAxisFields,
+                            {
+                                field: xAxisField,
+                                label: xAxisLabel,
+                                format: xAxisFormat,
+                            },
+                        ],
+                    dateField: showDateFieldOptions
+                        ? { table: dateFieldTable, field: dateField }
+                        : defaultDateField,
+                    query: query,
+                    task: 'create',
+                    template: template,
+                    buckets,
+                    clientId: publicKey,
+                },
+        };
+        const cloudBody = report
+            ? {
+                dashboardItemId: report._id,
+                name: chartName,
+                xAxisField,
+                yAxisFields,
+                xAxisLabel,
+                xAxisFormat,
+                chartType,
+                dashboardName,
+                columns: showTableFormatOptions
+                    ? columns
+                    : [
+                        ...yAxisFields,
+                        {
+                            field: xAxisField,
+                            label: xAxisLabel,
+                            format: xAxisFormat,
+                        },
+                    ],
+                dateField: showDateFieldOptions
+                    ? { table: dateFieldTable, field: dateField }
+                    : defaultDateField,
+                query: query,
+                template: template,
+                buckets,
+            }
+            : {
+                name: chartName,
+                xAxisField,
+                yAxisFields,
+                xAxisLabel,
+                xAxisFormat,
+                chartType,
+                dashboardName,
+                columns: showTableFormatOptions
+                    ? columns
+                    : [
+                        ...yAxisFields,
+                        {
+                            field: xAxisField,
+                            label: xAxisLabel,
+                            format: xAxisFormat,
+                        },
+                    ],
+                dateField: showDateFieldOptions
+                    ? { table: dateFieldTable, field: dateField }
+                    : defaultDateField,
+                query: query,
+                template: template,
+                buckets,
+            };
+        const searchParams = new URLSearchParams(customerId
+            ? {
+                clientId: publicKey,
+                customerId: customerId,
+            }
+            : { clientId: publicKey }).toString();
+        const resp = await (0, dataFetcher_1.getData)(client, `dashedit2?${searchParams}`, 'same-origin', hostedBody, cloudBody);
+        if (resp) {
+            if (resp.compareRows) {
+                (0, merge_1.mergeComparisonRange)(resp);
+            }
+            dispatch({
+                type: 'UPDATE_DASHBOARD_ITEM',
+                id: resp._id,
+                data: {
+                    ...resp,
+                    rows,
+                    fields,
+                    filtersApplied: dashboardFilters
+                },
+            });
+        }
+        setIsOpen(false);
+        if (onAddToDashboardComplete) {
+            onAddToDashboardComplete();
+        }
+        if (!resp) {
+            return;
+        }
+    };
+    return (
+    // <BigModal theme={theme} showModal={isOpen} setShowModal={setIsOpen}>
+    (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ModalComponent ? ((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, report: report, query: query, client: client, 
+                // organizationName={organization?.name}
+                SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, formHeaderStyle: formHeaderStyle, formLabelStyle: formLabelStyle, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, newFields: fields }) })) : ((0, jsx_runtime_1.jsx)(QuillModal, { isOpen: isOpen, onClose: () => setIsOpen(false), title: 'Add to dashboard', children: (0, jsx_runtime_1.jsx)(ChartForm, { editChart: editChart, theme: theme, schema: schema, data: rows, fields: columns, report: report, client: client, query: query, 
+                // organizationName={organization?.name}
+                SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, formHeaderStyle: formHeaderStyle, formLabelStyle: formLabelStyle, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, newFields: fields }) })) }));
+}
+exports.default = AddToDashboardModal;
+function QuillModal({ isOpen, onClose, setIsOpen, title, children }) {
+    const scrollPosition = 0;
+    // useEffect(() => {
+    //   if (isOpen) {
+    //     scrollPosition = window.scrollY;
+    //     // document.body.style.overflow = 'hidden';
+    //     // document.body.style.position = 'fixed';
+    //     // document.body.style.top = `-${scrollPosition}px`;
+    //     // document.body.style.width = '100%';
+    //   } else {
+    //     document.body.style.removeProperty('overflow');
+    //     document.body.style.removeProperty('position');
+    //     document.body.style.removeProperty('top');
+    //     document.body.style.removeProperty('width');
+    //     // Restore the scroll position
+    //     window.scrollTo(0, scrollPosition);
+    //   }
+    // }, [isOpen]);
+    if (!isOpen) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'fixed',
+                    top: '0',
+                    right: '0',
+                    bottom: '0',
+                    left: '0',
+                    zIndex: '50',
+                    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+                    backdropFilter: 'blur(5px)',
+                }, onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    // position: "absolute",
+                    position: 'fixed',
+                    left: '50%',
+                    top: '50%',
+                    zIndex: '50',
+                    // width: "100%",
+                    maxWidth: 1024,
+                    maxHeight: '90vh',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    transform: 'translateX(-50%) translateY(-50%)',
+                    background: 'white',
+                    borderRadius: 8,
+                    borderStyle: 'solid',
+                    borderWidth: 1,
+                    borderColor: '#e7e7e7',
+                    overflow: 'hidden',
+                    // zIndex: 1000,
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        // width: "80%",
+                        maxHeight: '90vh',
+                        overflowY: 'scroll',
+                        // maxWidth: "700px",
+                        backgroundColor: '#ffffff',
+                        // padding: "20px",
+                        // borderRadius: "8px",
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                    }, children: [(0, jsx_runtime_1.jsx)("h2", { style: {
+                                marginLeft: 35,
+                                marginTop: 25,
+                                fontSize: 18,
+                                fontWeight: '600',
+                                width: '100%',
+                                textAlign: 'left',
+                            }, children: title }), children] }) })] }));
+}
+function ChartForm({ data, fields, theme, saveVisualization, report, editChart, schema, query, organizationName, SelectComponent, TextInputComponent, client, ButtonComponent, SecondaryButtonComponent, formHeaderStyle, formLabelStyle, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, newFields, }) {
+    if (report) {
+        newFields = report.fields;
+    }
+    const fieldOptions = data?.length
+        ? Object.keys(data[0]).map(field => ({
+            value: field,
+            label: field,
+        }))
+        : fields.map(field => ({
+            value: field.field,
+            label: field.field,
+        }));
+    const xAxisOptions = data?.length
+        ? Object.keys(data[0])
+            .filter(option => (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option)) === 'date' ||
+            (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option)) === 'string')
+            .map(field => ({
+            value: field,
+            label: field,
+        }))
+        : fields
+            .filter(option => {
+            return ((0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option.field)) === 'date' ||
+                (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option.field)) === 'string');
+        })
+            .map(field => ({
+            value: field.field,
+            label: field.field,
+        }));
+    const yAxisOptions = data?.length
+        ? Object.keys(data[0])
+            .filter(option => (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option)) === 'number')
+            .map(field => ({
+            value: field,
+            label: field,
+        }))
+        : fields
+            .filter(option => {
+            return ((0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option.field)) === 'number');
+        })
+            .map(field => ({
+            value: field.field,
+            label: field.field,
+        }));
+    const [dateFieldOptions, setDateFieldOptions] = (0, react_1.useState)([]);
+    const [formValues, setFormValues] = (0, react_1.useState)({});
+    (0, react_1.useEffect)(() => {
+        const fetchReferencedTables = async () => {
+            if (!query) {
+                return;
+            }
+            const result = await getReferencedTables(client, query, schema);
+            setDateFieldOptions(result);
+        };
+        fetchReferencedTables();
+    }, [query, schema]);
+    return ((0, jsx_runtime_1.jsx)(FormikForm, { data: data, xAxisOptions: xAxisOptions, yAxisOptions: yAxisOptions, fieldOptions: fieldOptions, dateFieldOptions: dateFieldOptions, theme: theme, saveVisualization: saveVisualization, report: report, editChart: editChart, client: client, fields: fields, newFields: newFields, query: query, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, organizationName: organizationName, SelectComponent: SelectComponent
+            ? ({ onChange, value, options, form, field, }) => {
+                const handleChange = async (option) => {
+                    if (onChange) {
+                        onChange(option);
+                        return;
+                    }
+                    await form.setFieldValue(field.name, option);
+                    form.setFieldTouched(field.name, true);
+                };
+                return ((0, jsx_runtime_1.jsx)(SelectComponent, { onChange: event => handleChange(event.target.value), value: value, options: options }));
+            }
+            : MemoizedDefaultSelectComponent, TextInputComponent: TextInputComponent
+            ? TextInputComponent
+            : MemoizedDefaultTextInputComponent, ButtonComponent: ButtonComponent
+            ? ButtonComponent
+            : ({ onClick, label }) => {
+                return ((0, jsx_runtime_1.jsx)("div", { style: {
+                        height: 38,
+                        background: theme.primaryButtonColor,
+                        color: theme.backgroundColor,
+                        display: 'flex',
+                        borderRadius: 6,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        outline: 'none',
+                        cursor: 'pointer',
+                        fontFamily: theme.fontFamily,
+                        fontWeight: theme.buttonFontWeight || 600,
+                        border: 'none',
+                        fontSize: 14,
+                    }, onClick: onClick, children: label }));
+            }, SecondaryButtonComponent: ButtonComponent
+            ? ButtonComponent
+            : ({ onClick, label }) => {
+                return ((0, jsx_runtime_1.jsx)("div", { style: {
+                        height: 38,
+                        background: theme.backgroundColor,
+                        borderWidth: theme.borderWidth,
+                        borderColor: theme.borderColor,
+                        color: theme.primaryTextColor,
+                        display: 'flex',
+                        borderRadius: 6,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        outline: 'none',
+                        cursor: 'pointer',
+                        fontFamily: theme.fontFamily,
+                        fontWeight: theme.buttonFontWeight || 600,
+                        fontSize: 14,
+                    }, onClick: onClick, children: label }));
+            }, formHeaderStyle: formHeaderStyle, formLabelStyle: formLabelStyle }));
+}
+exports.ChartForm = ChartForm;
+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) {
+    // Calculate the distance in hours
+    const distanceInHours = Math.abs((0, date_fns_2.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_2.startOfHour,
+        };
+    }
+    // Calculate the distance in days
+    const distanceInDays = Math.abs((0, date_fns_2.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_2.startOfDay,
+        };
+    }
+    // Calculate the distance in months
+    const distanceInMonths = Math.abs((0, date_fns_2.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_2.startOfMonth,
+        };
+    }
+    // Calculate the distance in years
+    const distanceInYears = Math.abs((0, date_fns_2.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_2.startOfYear,
+        };
+    }
+    // Otherwise, the distance is more than one year
+    return {
+        unit: 'year',
+        format: 'yyyy',
+        startOf: date_fns_2.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 }));
+};
+const POSTGRES_DATE_TYPES = [
+    'timestamp',
+    'date',
+    'timestamptz',
+    'time',
+    'timetz',
+];
+async function getReferencedTables(client, sqlQuery, dbTables) {
+    //   const parser = new Parser();
+    const tables = [];
+    const withAliases = [];
+    const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `astify`, { query: sqlQuery });
+    let ast = resp.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);
+}
+const X_FORMAT_OPTIONS = [
+    { value: 'whole_number', label: 'whole number' },
+    { value: 'one_decimal_place', label: 'one decimal place' },
+    { value: 'two_decimal_places', label: 'two decimal places' },
+    { value: 'dollar_amount', label: 'dollar amount' },
+    { value: 'dollar_cents', label: 'dollar and cent 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' },
+    { value: 'dynamic', label: 'dynamic' },
+];
+const Y_FORMAT_OPTIONS = [
+    { value: 'whole_number', label: 'whole number' },
+    { value: 'one_decimal_place', label: 'one decimal place' },
+    { value: 'two_decimal_places', label: 'two decimal places' },
+    { value: 'dollar_amount', label: 'dollar amount' },
+    { value: 'dollar_cents', label: 'dollar and cent 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' },
+];
+const handleBucketData = (dashboardItem, bucketFields, dateFilter) => {
+    return (0, aggregate_1.aggregate)(dashboardItem, bucketFields, dateFilter);
+};
+function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldOptions, theme, report, editChart, fields, newFields, query, client, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, organizationName, formHeaderStyle, formLabelStyle, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, }) {
+    // fieldOptions.sort((a, b) => {
+    //   if (a.value === 'created_at') return -1;
+    //   if (b.value === 'created_at') return 1;
+    //   return 0;
+    // });
+    function postgresFormatMap(postgresType) {
+        if (postgresType === 'string')
+            return 'string';
+        if (postgresType === 'number')
+            return 'whole_number';
+        if (postgresType === 'date')
+            return 'dynamic';
+    }
+    X_FORMAT_OPTIONS.sort((a, b) => {
+        if (a.value === 'dynamic')
+            return -1;
+        if (b.value === 'dynamic')
+            return 1;
+        return 0;
+    });
+    const { dashboardFilters, dashboardFiltersDispatch } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
+    const [rows, setRows] = (0, react_1.useState)(null);
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const [xAxisField, setXAxisField] = (0, react_1.useState)(report?.xAxisField ||
+        (xAxisOptions && xAxisOptions.length && xAxisOptions[0].value) ||
+        '');
+    const [xAxisLabel, setXAxisLabel] = (0, react_1.useState)(report?.xAxisLabel || '');
+    const [xAxisFormat, setXAxisFormat] = (0, react_1.useState)(report?.xAxisFormat ||
+        (X_FORMAT_OPTIONS.length && X_FORMAT_OPTIONS[0].value) ||
+        '');
+    const [chartName, setChartName] = (0, react_1.useState)(report?.name || '');
+    const [chartType, setChartType] = (0, react_1.useState)(report?.chartType || 'column');
+    const [dateFieldTable, setDateFieldTable] = (0, react_1.useState)((dateFieldOptions.length && dateFieldOptions[0].name) || '');
+    const [dateField, setDateField] = (0, react_1.useState)((dateFieldOptions.length && dateFieldOptions[0].columns[0].name) || '');
+    const [template, setTemplate] = (0, react_1.useState)(report?.template || false);
+    const [chartConfig, setChartConfig] = (0, react_1.useState)({});
+    const { dateFilter, setDateFilter } = (0, react_1.useContext)(Context_1.DateFilterContext);
+    const [yAxisFields, setYAxisFields] = (0, react_1.useState)(report
+        ? report.yAxisFields
+        : [
+            {
+                field: yAxisOptions.length > 1
+                    ? yAxisOptions[1].value
+                    : yAxisOptions[0].value,
+                label: '',
+                format: 'whole_number',
+            },
+        ]);
+    const [bucketFields, setBucketFields] = (0, react_1.useState)((report && report.buckets) || []);
+    const [columns, setColumns] = (0, react_1.useState)(report && report.columns.length
+        ? report.columns
+        : fields?.length
+            ? fields.map(field => convertPostgresColumn(field))
+            : []);
+    function removeQuotes(str) {
+        if (str.startsWith('"') && str.endsWith('"')) {
+            return str.slice(1, -1);
+        }
+        else {
+            return str;
+        }
+    }
+    const processFilter = (filter, value = null) => {
+        //for dateObjects only, since values are arrays for dateObjects
+        const { selectedValue: _, ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
+        let selectedValue;
+        let selectedElem;
+        if (filter.filterType === 'string') {
+            selectedElem = filter.options.find(elem => elem[removeQuotes(filter.field)] === value);
+            if (selectedElem) {
+                selectedValue = selectedElem[removeQuotes(filter.field)];
+            }
+            return {
+                ...filterWithoutSelectedValue,
+                ...(selectedValue ? { selectedValue } : {}),
+            };
+        }
+        if (filter.filterType === 'date' || filter.filterType === 'date_range') {
+            if (value[2]) {
+                selectedElem = filter.options.find(elem => {
+                    return value[2] === elem[removeQuotes(filter.field)][2];
+                });
+                if (selectedElem) {
+                    selectedValue = selectedElem[removeQuotes(filter.field)];
+                }
+            }
+            return {
+                startDate: value ? value[0] : filter.startDate,
+                endDate: value ? value[1] : filter.endDate,
+                filterType: 'date_range',
+                ...(selectedValue ? { selectedValue } : {}),
+                field: 'date_range',
+                options: options,
+                label: 'Date',
+            };
+        }
+    };
+    const handleAddYAxisField = () => {
+        setYAxisFields([
+            ...yAxisFields,
+            { label: '', field: '', format: 'whole_number' },
+        ]);
+    };
+    const handleAddBucket = () => {
+        const bucketPossibilities = xAxisOptions.filter(option => (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option.value)) === 'date');
+        if (!bucketPossibilities.length) {
+            alert('No possible buckets');
+            return;
+        }
+        setBucketFields([
+            ...bucketFields,
+            {
+                field: bucketPossibilities[0].value,
+            },
+        ]);
+        setXAxisField(bucketPossibilities[0].value);
+        if (bucketPossibilities[0].value === dateField) {
+            setXAxisFormat('dynamic');
+        }
+        else {
+            setXAxisFormat(postgresFormatMap((0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === bucketPossibilities[0].value))));
+        }
+    };
+    const [dashboardOptions, setDashboardOptions] = (0, react_1.useState)([]);
+    const [dashboardName, setDashboardName] = (0, react_1.useState)(report?.dashboardName || dashboardOptions[0]);
+    (0, react_1.useEffect)(() => {
+        if (!report && dashboardOptions && dashboardOptions.length) {
+            setDashboardName(dashboardOptions[0].value);
+        }
+    }, [dashboardOptions]);
+    const values = {
+        xAxisLabel,
+        chartName,
+        chartType,
+        xAxisField,
+        xAxisFormat,
+        dashboardName,
+        dateFieldTable,
+        dateField,
+    };
+    const [selectedTabIndex, setSelectedTabIndex] = (0, react_1.useState)(report && report.template ? 1 : 0);
+    react_1.default.useEffect(() => {
+        async function getDashboards() {
+            const { publicKey, customerId, queryEndpoint } = client;
+            if (customerId || queryEndpoint) {
+                try {
+                    let responseData;
+                    // Add query parameters to the URL
+                    const searchParams = new URLSearchParams({
+                        publicKey: publicKey,
+                        orgId: customerId,
+                        name: name,
+                    }).toString();
+                    const hostedBody = {
+                        metadata: customerId
+                            ? { orgId: customerId, name, task: 'config' }
+                            : { name: dashboardName, task: 'config' },
+                    };
+                    const resp = await (0, dataFetcher_1.getData)(client, `dashconfig?${searchParams}`, 'omit', hostedBody, null, 'GET');
+                    const bigFilterObj = {};
+                    if (resp.dateFilter && Object.keys(resp.dateFilter).length) {
+                        if (resp.dateFilter.initialRange === 'LAST_90_DAYS') {
+                            const filter = {
+                                startDate: (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }),
+                                endDate: new Date(),
+                                filterType: 'date_range',
+                                selectedValue: [
+                                    (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }),
+                                    new Date(),
+                                    '90d',
+                                ],
+                                field: 'date_range',
+                                label: 'Date',
+                            };
+                            dashboardFiltersDispatch({
+                                type: 'ADD_DASHBOARD_FILTER',
+                                id: 'date_range',
+                                data: {
+                                    ...filter,
+                                },
+                            });
+                            setDateFilter(filter);
+                            bigFilterObj[filter.field] = filter;
+                        }
+                        else if (resp.dateFilter.initialRange === 'LAST_30_DAYS') {
+                            const filter = {
+                                startDate: (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 30 }),
+                                endDate: new Date(),
+                                filterType: 'date_range',
+                                selectedValue: [
+                                    (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 30 }),
+                                    new Date(),
+                                    't',
+                                ],
+                                options: options,
+                                field: 'date_range',
+                                label: 'Date',
+                            };
+                            dashboardFiltersDispatch({
+                                type: 'ADD_DASHBOARD_FILTER',
+                                id: 'date_range',
+                                data: {
+                                    ...filter,
+                                },
+                            });
+                            setDateFilter(filter);
+                            bigFilterObj[filter.field] = filter;
+                            // return;
+                        }
+                        else if (resp.dateFilter.initialRange === 'CURRENT_MONTH') {
+                            const filter = {
+                                startDate: (0, date_fns_2.startOfMonth)(new Date()),
+                                endDate: new Date(),
+                                filterType: 'date_range',
+                                selectedValue: [(0, date_fns_2.startOfMonth)(new Date()), new Date(), 'm'],
+                                options: options,
+                                field: 'date_range',
+                                label: 'Date',
+                            };
+                            dashboardFiltersDispatch({
+                                type: 'ADD_DASHBOARD_FILTER',
+                                id: 'date_range',
+                                data: {
+                                    ...filter,
+                                },
+                            });
+                            setDateFilter(filter);
+                            bigFilterObj[filter.field] = filter;
+                        }
+                        else {
+                            const filter = {
+                                startDate: (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }),
+                                endDate: new Date(),
+                                filterType: 'date_range',
+                                selectedValue: [
+                                    (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }),
+                                    new Date(),
+                                    '90d',
+                                ],
+                                options: options,
+                                field: 'date_range',
+                                label: 'Date',
+                            };
+                            dashboardFiltersDispatch({
+                                type: 'ADD_DASHBOARD_FILTER',
+                                id: 'date_range',
+                                data: {
+                                    ...filter,
+                                },
+                            });
+                            setDateFilter(filter);
+                            bigFilterObj[filter.field] = filter;
+                        }
+                    }
+                    if (resp.filters && resp.filters.length) {
+                        Object.values(resp.filters)
+                            .filter(filter => filter.filterType !== 'date')
+                            .forEach(filter => {
+                            // processFilter(filter);
+                            bigFilterObj[filter.field] = processFilter(filter);
+                        });
+                    }
+                    dashboardFiltersDispatch({
+                        type: 'ADD_DASHBOARD_FILTERS',
+                        id: 'tons',
+                        data: bigFilterObj,
+                    });
+                    if (!resp.dateFilter) {
+                        setDateFilter(null);
+                    }
+                }
+                catch (error) {
+                    console.error('Error fetching data:', error);
+                }
+            }
+        }
+        getDashboards();
+    }, [dashboardName, client]);
+    (0, react_1.useEffect)(() => {
+        async function getDashNames() {
+            const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `dashnames/${client.publicKey}/`, null, 'GET');
+            setDashboardOptions(resp.dashboardNames
+                .filter(elem => elem !== null)
+                .map(key => ({ label: key, value: key })));
+        }
+        getDashNames();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        // if (!dateField) {
+        //   return;
+        // }
+        // if (
+        //   (!bucketFields.length && chartType === 'column') ||
+        //   chartType === 'line'
+        // ) {
+        //   handleAddBucket();
+        //   return;
+        // }
+        if ((bucketFields.length && chartType === 'metric') ||
+            chartType === 'table' ||
+            chartType === 'pie') {
+            handleDeleteBucketField(0);
+            return;
+        }
+    }, [chartType, dateField]);
+    (0, react_1.useEffect)(() => {
+        if (dateFieldOptions.length) {
+            setDateFieldTable(dateFieldOptions[0].name);
+            setDateField(dateFieldOptions[0].columns[0].name);
+        }
+    }, [dateFieldOptions]);
+    const handleDeleteYAxisField = index => {
+        setYAxisFields(yAxisFields => yAxisFields.filter((_, i) => index !== i));
+    };
+    const handleDeleteBucketField = index => {
+        setBucketFields(bucketFields => bucketFields.filter((_, i) => index !== i));
+        setXAxisField(xAxisOptions[0].value);
+        setXAxisLabel('');
+    };
+    const handleBucketFieldChange = (index, value) => {
+        if (!dateField) {
+            return;
+        }
+        const newBucketFields = [...bucketFields];
+        newBucketFields[index] = { ...newBucketFields[index], field: value };
+        setBucketFields(newBucketFields);
+        setXAxisField(value);
+        if (value === dateField) {
+            setXAxisFormat('dynamic');
+        }
+        else {
+            setXAxisFormat(postgresFormatMap((0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === value))));
+        }
+    };
+    const handleXAxisFieldChange = value => {
+        if (!dateField) {
+            return;
+        }
+        // const newXAxisField = {
+        //   format: xAxisFormat,
+        //   label: xAxisLabel,
+        //   field: value,
+        // };
+        setXAxisField(value);
+        // TODO: MAKE DATE FIELD NOT HARD CODED
+        if (value === dateField) {
+            setXAxisFormat('dynamic');
+        }
+        else {
+            setXAxisFormat(postgresFormatMap((0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === value))));
+        }
+        if (bucketFields.length > 0) {
+            const newBucketFields = [...bucketFields];
+            newBucketFields[0] = { ...newBucketFields[0], field: value };
+            setBucketFields(newBucketFields);
+        }
+    };
+    const handleYAxisFieldChange = (index, value) => {
+        const newYAxisFields = [...yAxisFields];
+        newYAxisFields[index] = {
+            ...newYAxisFields[index],
+            field: value,
+            format: postgresFormatMap(newFields.find(field => field.name === value)),
+        };
+        setYAxisFields(newYAxisFields);
+    };
+    const handleYAxisFieldFormatChange = (index, value) => {
+        const newYAxisFields = [...yAxisFields];
+        newYAxisFields[index] = { ...newYAxisFields[index], format: value };
+        setYAxisFields(newYAxisFields);
+    };
+    const handleYAxisLabelChange = (index, value) => {
+        const newYAxisFields = [...yAxisFields];
+        newYAxisFields[index] = { ...newYAxisFields[index], label: value };
+        setYAxisFields(newYAxisFields);
+    };
+    const handleColumnFieldChange = (index, value) => {
+        const newColumns = [...columns];
+        newColumns[index] = { ...newColumns[index], field: value };
+        setColumns(newColumns);
+    };
+    const handleColumnFormatChange = (index, value) => {
+        const newColumns = [...columns];
+        newColumns[index] = { ...newColumns[index], format: value };
+        setColumns(newColumns);
+    };
+    const handleColumnLabelChange = (index, value) => {
+        const newColumns = [...columns];
+        newColumns[index] = { ...newColumns[index], label: value };
+        setColumns(newColumns);
+    };
+    (0, react_1.useEffect)(() => {
+        const now = new Date();
+        if (!dateFilter ||
+            (dateFilter && dateFilter.startDate && dateFilter.endDate)) {
+            setChartConfig(handleBucketData({
+                xAxisField,
+                xAxisLabel,
+                xAxisFormat,
+                chartName,
+                chartType,
+                dashboardName,
+                dateFieldTable,
+                dateField,
+                template,
+                yAxisFields: yAxisFields,
+                rows: data,
+                fields: newFields,
+                columns: columns,
+            }, bucketFields, dateFilter));
+        }
+    }, [
+        xAxisField,
+        xAxisLabel,
+        xAxisFormat,
+        chartName,
+        chartType,
+        dashboardName,
+        dateFieldTable,
+        dateField,
+        template,
+        yAxisFields,
+        bucketFields,
+        columns,
+        dateFilter,
+    ]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'inline-block' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                paddingLeft: 25,
+                paddingRight: chartConfig.chartType === 'pie' ? 25 : undefined,
+            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                marginRight: chartConfig.chartType === 'pie' ||
+                                    chartConfig.chartType === 'table'
+                                    ? undefined
+                                    : 25,
+                                marginLeft: chartConfig.chartType === 'pie' ||
+                                    chartConfig.chartType === 'table'
+                                    ? undefined
+                                    : -25,
+                            }, children: Object.keys(chartConfig).length > 0 && ((0, jsx_runtime_1.jsx)(Chart_1.default, { config: chartConfig, colors: theme.chartColors, containerStyle: {
+                                    width: chartConfig.chartType === 'table'
+                                        ? 640
+                                        : 'calc(100% - 24px)',
+                                    height: 300,
+                                } })) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 40 } }), showTableFormatOptions || showDateFieldOptions ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { style: formHeaderStyle || {
+                                    fontFamily: theme.fontFamily,
+                                    color: theme.primaryTextColor,
+                                    fontSize: theme.fontSize + 2,
+                                    fontWeight: 600,
+                                }, children: 'Chart' }) })) : null, (0, jsx_runtime_1.jsxs)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 8 }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                                                color: theme.secondaryTextColor,
+                                                fontFamily: theme?.fontFamily,
+                                                fontSize: theme?.fontSize || '14px',
+                                                fontWeight: theme.labelFontWeight || '600',
+                                            }, children: "Name" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200, marginTop: 6 }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { onChange: e => setChartName(e.target.value), value: chartName, theme: theme, placeholder: 'Enter a chart name' }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 8 }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                                                color: theme.secondaryTextColor,
+                                                fontFamily: theme?.fontFamily,
+                                                fontSize: theme?.fontSize || '14px',
+                                                fontWeight: theme.labelFontWeight || '600',
+                                            }, children: "Dashboard name" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200, marginTop: 6 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { onChange: value => setDashboardName(value), value: dashboardName, theme: theme, options: dashboardOptions }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 8 }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                                                color: theme.secondaryTextColor,
+                                                fontFamily: theme?.fontFamily,
+                                                fontSize: theme?.fontSize || '14px',
+                                                fontWeight: theme.labelFontWeight || '600',
+                                            }, children: "Chart type" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200, marginTop: 6 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { onChange: e => setChartType(e), value: chartType, options: [
+                                                    { label: 'column', value: 'column' },
+                                                    { label: 'bar', value: 'bar' },
+                                                    { label: 'line', value: 'line' },
+                                                    { label: 'pie', value: 'pie' },
+                                                    { label: 'metric', value: 'metric' },
+                                                    { label: 'table', value: 'table' },
+                                                ], theme: theme }) })] })] })] }), chartType !== 'table' &&
+                    chartType !== 'metric' &&
+                    chartType !== 'pie' && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        marginTop: 20,
+                        maxWidth: 200,
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                                color: theme.secondaryTextColor,
+                                fontFamily: theme?.fontFamily,
+                                fontSize: theme?.fontSize || '14px',
+                                fontWeight: theme.labelFontWeight || '600',
+                            }, children: "Buckets" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                maxWidth: 200,
+                                // marginTop: 6,
+                                display: 'flex',
+                                flexDirection: 'column',
+                            }, children: bucketFields.map((bucketField, index) => ((0, jsx_runtime_1.jsxs)("div", { 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)(SelectComponent, { onChange: option => handleBucketFieldChange(index, option), value: bucketField.field, 
+                                            // TODO: PROB FILTER OUT NUMBERS LMAO (SO DATE AND STRING ONLY)
+                                            options: xAxisOptions, theme: theme }) }), (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteBucketField(index), style: {
+                                            cursor: 'pointer',
+                                            paddingLeft: 6,
+                                            paddingTop: 9,
+                                            paddingBottom: 9,
+                                            paddingRight: 6,
+                                            maxHeight: 38,
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                        }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme?.secondaryTextColor, height: "20", width: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }, `bucketField-${index}`))) }), !bucketFields.length && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 12 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddBucket, label: "Add bucket +" }) }))] })), (0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        // justifyContent: 'space-between',
+                        marginTop: 20,
+                    }, children: chartType !== 'table' && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                                    color: theme.secondaryTextColor,
+                                    fontFamily: theme?.fontFamily,
+                                    fontSize: theme?.fontSize || '14px',
+                                    fontWeight: theme.labelFontWeight || '600',
+                                }, children: chartType === 'pie' ? 'Category column' : 'x-axis column' }), (0, jsx_runtime_1.jsx)("div", { style: { height: 6 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { onChange: e => handleXAxisFieldChange(e), value: xAxisField, options: xAxisOptions, 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)(TextInputComponent, { onChange: e => setXAxisLabel(e.target.value), value: xAxisLabel, theme: theme, placeholder: 'Enter a label' }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { onChange: e => setXAxisFormat(e), value: xAxisFormat, options: X_FORMAT_OPTIONS, theme: theme }) })] })] })) }), (0, jsx_runtime_1.jsxs)("div", { 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 || {
+                                        color: theme.secondaryTextColor,
+                                        fontFamily: theme?.fontFamily,
+                                        fontSize: theme?.fontSize || '14px',
+                                        fontWeight: theme.labelFontWeight || '600',
+                                    }, children: chartType === 'table'
+                                        ? 'Columns'
+                                        : chartType === 'pie'
+                                            ? 'Quantity column'
+                                            : 'y-axis columns' }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                    }, children: [yAxisFields.map((yAxisField, index) => ((0, jsx_runtime_1.jsx)("div", { 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)(SelectComponent, { onChange: option => handleYAxisFieldChange(index, option), value: yAxisField.field, options: chartType === 'table' ? fieldOptions : yAxisOptions, theme: theme }) }) }, `yAxisField-${index}`))), chartType !== 'pie' && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 12 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddYAxisField, label: "Add column +" }) })), (0, jsx_runtime_1.jsx)("div", { style: { height: 10 } })] })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                justifyContent: 'flex-start',
+                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                                        color: 'transparent',
+                                        fontFamily: theme?.fontFamily,
+                                        fontSize: theme?.fontSize || '14px',
+                                        fontWeight: theme.labelFontWeight || '600',
+                                    }, children: "y-axis label" }), chartType !== 'pie' &&
+                                    yAxisFields.map((yAxisField, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            // alignItems: 'center',
+                                            marginTop: index === 0 ? 6 : 10,
+                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { value: yAxisFields[index].label, onChange: e => {
+                                                        handleYAxisLabelChange(index, e.target.value);
+                                                    }, theme: theme, placeholder: 'Enter a label' }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { onChange: value => handleYAxisFieldFormatChange(index, value), value: yAxisField.format, options: Y_FORMAT_OPTIONS, theme: theme }) }), (0, jsx_runtime_1.jsx)("div", { onClick: () => 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: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: index > 0 ? theme?.secondaryTextColor : 'rgba(0,0,0,0)', height: "20", width: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }, `yAxisField-${index}`)))] })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), showTableFormatOptions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: formHeaderStyle || {
+                                fontFamily: theme.fontFamily,
+                                color: theme.primaryTextColor,
+                                fontSize: theme.fontSize + 2,
+                                fontWeight: 600,
+                                // marginTop: 20,
+                            }, children: 'Table' }), (0, jsx_runtime_1.jsx)("div", { style: { height: 8 } })] })), showTableFormatOptions && chartType !== 'table' && ((0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                        color: theme.secondaryTextColor,
+                        fontFamily: theme?.fontFamily,
+                        fontSize: theme?.fontSize || '14px',
+                        fontWeight: theme.labelFontWeight || '600',
+                    }, children: 'Columns' })), showTableFormatOptions && chartType !== 'table' && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'flex-start',
+                        marginTop: 6,
+                        // justifyContent: 'space-between',
+                        // marginTop: 8,
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                }, children: [columns.map((yAxisField, index) => ((0, jsx_runtime_1.jsx)("div", { 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)(SelectComponent, { value: yAxisField.field, onChange: option => {
+                                                    handleColumnFieldChange(index, option);
+                                                }, options: fieldOptions, theme: theme }) }) }, `column-${index}`))), (0, jsx_runtime_1.jsx)("div", { style: { height: 10 } })] }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                justifyContent: 'flex-start',
+                            }, children: columns.map((yAxisField, index) => ((0, jsx_runtime_1.jsxs)("div", { 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)(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)(SelectComponent, { value: yAxisField.format, onChange: option => handleColumnFormatChange(index, option), options: Y_FORMAT_OPTIONS, theme: theme }) })] }, `column-${index}`))) })] })), showDateFieldOptions && (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), showDateFieldOptions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: formHeaderStyle || {
+                                fontFamily: theme.fontFamily,
+                                color: theme.primaryTextColor,
+                                fontSize: theme.fontSize + 2,
+                                fontWeight: 600,
+                                // marginTop: 20,
+                            }, children: 'Filters' }), (0, jsx_runtime_1.jsx)("div", { style: { height: 8 } })] })), showDateFieldOptions && ((0, jsx_runtime_1.jsxs)("div", { 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 || {
+                                        color: theme.secondaryTextColor,
+                                        fontFamily: theme?.fontFamily,
+                                        fontSize: theme?.fontSize || '14px',
+                                        fontWeight: theme.labelFontWeight || '600',
+                                    }, children: "Date field table" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200, marginTop: 6 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { options: !dateFieldOptions.length
+                                            ? [{ label: '', value: '' }]
+                                            : dateFieldOptions.map(elem => {
+                                                return { label: elem.name, value: elem.name };
+                                            }), onChange: e => setDateFieldTable(e), value: dateFieldTable, theme: theme }) })] }), (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 || {
+                                        color: theme.secondaryTextColor,
+                                        fontFamily: theme?.fontFamily,
+                                        fontSize: theme?.fontSize || '14px',
+                                        fontWeight: theme.labelFontWeight || '600',
+                                    }, children: "Date field" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200, marginTop: 6 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { options: !dateFieldOptions.length
+                                            ? [{ label: '', value: '' }]
+                                            : dateFieldOptions.filter(elem => elem.name === dateFieldTable // Replace `values.dateFieldTable` with your state variable or prop
+                                            ).length
+                                                ? dateFieldOptions
+                                                    .filter(elem => elem.name === dateFieldTable)[0]
+                                                    .columns.map(elem => {
+                                                    return { label: elem.name, value: elem.name };
+                                                })
+                                                : [{ label: '', value: '' }], onChange: value => setDateField(value), value: dateField, theme: theme }) })] })] })), showAccessControlOptions && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        marginTop: 40,
+                        marginBottom: 40,
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                fontFamily: theme.fontFamily,
+                                color: theme.primaryTextColor,
+                                fontSize: theme.fontSize + 2,
+                                fontWeight: 600,
+                            }, children: 'Access Control' }), (0, jsx_runtime_1.jsx)("div", { style: { height: 12 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                padding: '1px',
+                                display: 'flex',
+                                flexDirection: 'row',
+                                fontSize: '14px',
+                                fontWeight: '500',
+                                height: '32px',
+                                width: '640px',
+                                color: '#212121',
+                                backgroundColor: 'rgba(33, 33, 33, 0.03)',
+                                borderRadius: '6px',
+                            }, children: [(0, jsx_runtime_1.jsx)("div", { onClick: () => {
+                                        setSelectedTabIndex(0);
+                                        setTemplate(false);
+                                    }, style: {
+                                        width: '100%',
+                                        borderRadius: '6px', // Equivalent to rounded-md
+                                        padding: '4px', // Equivalent to py-1
+                                        fontSize: '14px', // Equivalent to text-sm
+                                        fontWeight: '500', // Equivalent to font-medium
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        cursor: 'pointer',
+                                        borderColor: '#E7E7E7',
+                                        borderWidth: selectedTabIndex === 0 ? 1 : 0,
+                                        borderStyle: 'solid',
+                                        color: selectedTabIndex === 0
+                                            ? '#212121'
+                                            : 'rgba(33, 33, 33, 0.3)', // Color and its hover state
+                                        backgroundColor: selectedTabIndex === 0
+                                            ? 'white'
+                                            : 'rgba(255, 255, 255, 0.12)', // Background and its hover state
+                                        boxShadow: selectedTabIndex === 0
+                                            ? '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
+                                            : undefined, // Shadow when selected
+                                        outline: 'none', // focus:outline-none
+                                    }, children: `This Organization${organizationName ? ` (${organizationName})` : ``}` }), (0, jsx_runtime_1.jsx)("div", { onClick: () => {
+                                        setSelectedTabIndex(1);
+                                        setTemplate(true);
+                                    }, style: {
+                                        width: '100%',
+                                        borderRadius: '6px', // Equivalent to rounded-md
+                                        padding: '4px', // Equivalent to py-1
+                                        fontSize: '14px', // Equivalent to text-sm
+                                        fontWeight: '500', // Equivalent to font-medium
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        cursor: 'pointer',
+                                        borderColor: '#E7E7E7',
+                                        borderWidth: selectedTabIndex === 1 ? 1 : 0,
+                                        borderStyle: 'solid',
+                                        color: selectedTabIndex === 1
+                                            ? '#212121'
+                                            : 'rgba(33, 33, 33, 0.3)', // Color and its hover state
+                                        backgroundColor: selectedTabIndex === 1
+                                            ? 'white'
+                                            : 'rgba(255, 255, 255, 0.12)', // Background and its hover state
+                                        boxShadow: selectedTabIndex === 1
+                                            ? '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
+                                            : undefined, // Shadow when selected
+                                        outline: 'none', // focus:outline-none
+                                    }, children: 'Global (All Organizations)' })] })] })), (0, jsx_runtime_1.jsx)("div", { style: { paddingRight: 25 }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {
+                            const { xAxisField, xAxisLabel, xAxisFormat, chartName, chartType, dashboardName, dateFieldTable, dateField, template, } = chartConfig;
+                            if (isSubmitting === false) {
+                                editChart({
+                                    setIsSubmitting,
+                                    report,
+                                    values: {
+                                        xAxisField,
+                                        xAxisLabel,
+                                        xAxisFormat,
+                                        chartName,
+                                        chartType,
+                                        dashboardName,
+                                        dateFieldTable,
+                                        dateField,
+                                        template,
+                                    },
+                                    yAxisFields,
+                                    columns,
+                                    query,
+                                    buckets: bucketFields,
+                                    showTableFormatOptions,
+                                });
+                            }
+                        }, label: report ? 'Save changes' : 'Add to dashboard' }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } })] }) }));
+}