@quillsql/react 2.10.17 → 2.10.18

package/dist/esm/AddToDashboardModal.js

@@ -1,1435 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// @ts-nocheck
-import React, { useContext, useEffect, useState } from 'react';
-import { sub, startOfToday, endOfToday } from 'date-fns';
-import { getData, getDataFromCloud } from './utils/dataFetcher';
-import { ClientContext, SchemaContext, ThemeContext, DateFilterContext, DashboardContext, DashboardFiltersContext, } from './Context';
-import { differenceInDays, differenceInHours, differenceInMonths, differenceInYears, startOfDay, startOfHour, startOfMonth, startOfYear, } from 'date-fns';
-import Chart from './Chart';
-import { getPostgresBasicType } from './ReportBuilder';
-import { aggregate } from './utils/aggregate';
-import { ArrowDownHeadIcon } from './assets';
-import { mergeComparisonRange } from './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 (_jsxs("div", { style: { position: 'relative' }, children: [_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) => (_jsx("option", { value: option.value, children: option.label }, option.label + index))) }), _jsx(ArrowDownHeadIcon, { style: {
-                    height: '20px',
-                    width: '20px',
-                    flex: 'none',
-                    position: 'absolute',
-                    right: 8,
-                    top: 9,
-                    color: theme?.secondaryTextColor,
-                }, "aria-hidden": "true" })] }));
-};
-const MemoizedDefaultSelectComponent = React.memo(DefaultSelectComponent);
-const DefaultTextInputComponent = function DefaultText({ onChange, value, id, theme, placeholder, }) {
-    return (_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.memo(DefaultTextInputComponent);
-export default 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] = useContext(ThemeContext);
-    const [client] = useContext(ClientContext);
-    const [schema, setSchema] = useContext(SchemaContext);
-    // const [organization, setOrganization] = useState([]);
-    const { dispatch } = useContext(DashboardContext);
-    const { dashboardFilters } = useContext(DashboardFiltersContext);
-    // showTableFormatOptions = false;
-    // showDateFieldOptions = false;
-    // showAccessControlOptions = false;3
-    useEffect(() => {
-        let isSubscribed = true;
-        async function getSchema() {
-            if (!schema || !schema.length) {
-                const { queryEndpoint, queryHeaders, publicKey } = client;
-                const response = await fetch(`${queryEndpoint}`, {
-                    method: 'POST',
-                    headers: {
-                        ...queryHeaders,
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        metadata: {
-                            clientId: publicKey,
-                            publicKey: publicKey,
-                            task: 'schema',
-                        },
-                    }),
-                });
-                const data = await response.json();
-                if (isSubscribed) {
-                    setSchema(data.data.tables);
-                }
-            }
-        }
-        if (isSubscribed) {
-            getSchema();
-        }
-        return () => {
-            isSubscribed = false;
-        };
-    }, [schema]);
-    const editChart = async ({ report, setIsSubmitting, values, yAxisFields, columns, query, buckets, showTableFormatOptions, }) => {
-        const { publicKey, customerId, databaseType } = 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,
-                        databaseType: databaseType,
-                    }
-                    : {
-                        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,
-                        databaseType: databaseType,
-                    }
-                : {
-                    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,
-                    databaseType: databaseType,
-                },
-        };
-        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 getData(client, `dashedit2?${searchParams}`, 'same-origin', hostedBody, cloudBody);
-        if (resp) {
-            if (resp.compareRows) {
-                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}>
-    _jsx(_Fragment, { children: ModalComponent ? (_jsx(ModalComponent, { isOpen: isOpen, title: 'Add to dashboard', onClose: () => setIsOpen(false), children: _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 }) })) : (_jsx(QuillModal, { isOpen: isOpen, onClose: () => setIsOpen(false), title: 'Add to dashboard', children: _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 }) })) }));
-}
-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 (_jsxs(_Fragment, { children: [_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 }), _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: _jsxs("div", { style: {
-                        // width: "80%",
-                        maxHeight: '90vh',
-                        overflowY: 'scroll',
-                        // maxWidth: "700px",
-                        backgroundColor: '#ffffff',
-                        // padding: "20px",
-                        // borderRadius: "8px",
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                    }, children: [_jsx("h2", { style: {
-                                marginLeft: 35,
-                                marginTop: 25,
-                                fontSize: 18,
-                                fontWeight: '600',
-                                width: '100%',
-                                textAlign: 'left',
-                            }, children: title }), children] }) })] }));
-}
-export 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) => getPostgresBasicType(newFields.find((field) => field.name === option)) === 'date' ||
-            getPostgresBasicType(newFields.find((field) => field.name === option)) === 'string')
-            .map((field) => ({
-            value: field,
-            label: field,
-        }))
-        : fields
-            .filter((option) => {
-            return (getPostgresBasicType(newFields.find((field) => field.name === option.field)) === 'date' ||
-                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) => getPostgresBasicType(newFields.find((field) => field.name === option)) === 'number')
-            .map((field) => ({
-            value: field,
-            label: field,
-        }))
-        : fields
-            .filter((option) => {
-            return (getPostgresBasicType(newFields.find((field) => field.name === option.field)) === 'number');
-        })
-            .map((field) => ({
-            value: field.field,
-            label: field.field,
-        }));
-    const [dateFieldOptions, setDateFieldOptions] = useState([]);
-    const [formValues, setFormValues] = useState({});
-    useEffect(() => {
-        const fetchReferencedTables = async () => {
-            if (!query) {
-                return;
-            }
-            const result = await getReferencedTables(client, query, schema);
-            setDateFieldOptions(result);
-        };
-        fetchReferencedTables();
-    }, [query, schema]);
-    return (_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 (_jsx(SelectComponent, { onChange: (event) => handleChange(event.target.value), value: value, options: options }));
-            }
-            : MemoizedDefaultSelectComponent, TextInputComponent: TextInputComponent
-            ? TextInputComponent
-            : MemoizedDefaultTextInputComponent, ButtonComponent: ButtonComponent
-            ? ButtonComponent
-            : ({ onClick, label }) => {
-                return (_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 (_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 }));
-}
-export function isValidDate(d) {
-    return d instanceof Date && !isNaN(d);
-}
-export const isArrayOfValidDates = (arr, field) => arr.every((d) => new Date(d[field]) instanceof Date && !isNaN(new Date(d[field])));
-export function formatDateBuckets(startDate, endDate) {
-    // Calculate the distance in hours
-    const distanceInHours = Math.abs(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
-    const 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
-    const 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
-    const 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,
-    };
-}
-const FormTextInput = ({ field, form, ...props }) => {
-    const { theme, wider } = props;
-    return (_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 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 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 } = useContext(DashboardFiltersContext);
-    const [rows, setRows] = useState(null);
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [xAxisField, setXAxisField] = useState(report?.xAxisField ||
-        (xAxisOptions && xAxisOptions.length && xAxisOptions[0].value) ||
-        '');
-    const [xAxisLabel, setXAxisLabel] = useState(report?.xAxisLabel || '');
-    const [xAxisFormat, setXAxisFormat] = useState(report?.xAxisFormat ||
-        (X_FORMAT_OPTIONS.length && X_FORMAT_OPTIONS[0].value) ||
-        '');
-    const [chartName, setChartName] = useState(report?.name || '');
-    const [chartType, setChartType] = useState(report?.chartType || 'column');
-    const [dateFieldTable, setDateFieldTable] = useState((dateFieldOptions.length && dateFieldOptions[0].name) || '');
-    const [dateField, setDateField] = useState((dateFieldOptions.length && dateFieldOptions[0].columns[0].name) || '');
-    const [template, setTemplate] = useState(report?.template || false);
-    const [chartConfig, setChartConfig] = useState({});
-    const { dateFilter, setDateFilter } = useContext(DateFilterContext);
-    const [yAxisFields, setYAxisFields] = useState(report
-        ? report.yAxisFields
-        : [
-            {
-                field: yAxisOptions.length > 1
-                    ? yAxisOptions[1].value
-                    : yAxisOptions[0].value,
-                label: '',
-                format: 'whole_number',
-            },
-        ]);
-    const [bucketFields, setBucketFields] = useState((report && report.buckets) || []);
-    const [columns, setColumns] = 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) => 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(getPostgresBasicType(newFields.find((field) => field.name === bucketPossibilities[0].value))));
-        }
-    };
-    const [dashboardOptions, setDashboardOptions] = useState([]);
-    const [dashboardName, setDashboardName] = useState(report?.dashboardName || dashboardOptions[0]);
-    useEffect(() => {
-        if (!report && dashboardOptions && dashboardOptions.length) {
-            setDashboardName(dashboardOptions[0].value);
-        }
-    }, [dashboardOptions]);
-    const values = {
-        xAxisLabel,
-        chartName,
-        chartType,
-        xAxisField,
-        xAxisFormat,
-        dashboardName,
-        dateFieldTable,
-        dateField,
-    };
-    const [selectedTabIndex, setSelectedTabIndex] = useState(report && report.template ? 1 : 0);
-    React.useEffect(() => {
-        async function getDashboards() {
-            const { publicKey, customerId, queryEndpoint, databaseType } = 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,
-                                clientId: publicKey,
-                                name,
-                                task: 'config',
-                                databaseType: databaseType,
-                            }
-                            : {
-                                name: dashboardName,
-                                clientId: publicKey,
-                                task: 'config',
-                                databaseType: databaseType,
-                            },
-                    };
-                    const resp = await 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: sub(startOfToday(), { days: 90 }),
-                                endDate: endOfToday(),
-                                filterType: 'date_range',
-                                selectedValue: [
-                                    sub(startOfToday(), { days: 90 }),
-                                    endOfToday(),
-                                    '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: sub(startOfToday(), { days: 30 }),
-                                endDate: endOfToday(),
-                                filterType: 'date_range',
-                                selectedValue: [
-                                    sub(startOfToday(), { days: 30 }),
-                                    endOfToday(),
-                                    '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: startOfMonth(new Date()),
-                                endDate: endOfToday(),
-                                filterType: 'date_range',
-                                selectedValue: [startOfMonth(new Date()), endOfToday(), '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: sub(startOfToday(), { days: 90 }),
-                                endDate: endOfToday(),
-                                filterType: 'date_range',
-                                selectedValue: [
-                                    sub(startOfToday(), { days: 90 }),
-                                    endOfToday(),
-                                    '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]);
-    useEffect(() => {
-        async function getDashNames() {
-            const resp = await getDataFromCloud(client, `dashnames/${client.publicKey}/`, null, 'GET');
-            setDashboardOptions(resp.dashboardNames
-                .filter((elem) => elem !== null)
-                .map((key) => ({ label: key, value: key })));
-        }
-        getDashNames();
-    }, []);
-    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]);
-    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(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(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);
-    };
-    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 (_jsx("div", { style: { display: 'inline-block' }, children: _jsxs("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                paddingLeft: 25,
-                paddingRight: chartConfig.chartType === 'pie' ? 25 : undefined,
-            }, children: [_jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                    }, children: [_jsx("div", { style: { height: 20 } }), _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 && (_jsx(Chart, { config: chartConfig, colors: theme.chartColors, containerStyle: {
-                                    width: chartConfig.chartType === 'table'
-                                        ? 640
-                                        : 'calc(100% - 24px)',
-                                    height: 300,
-                                } })) }), _jsx("div", { style: { height: 40 } }), showTableFormatOptions || showDateFieldOptions ? (_jsx(_Fragment, { children: _jsx("div", { style: formHeaderStyle || {
-                                    fontFamily: theme.fontFamily,
-                                    color: theme.primaryTextColor,
-                                    fontSize: theme.fontSize + 2,
-                                    fontWeight: 600,
-                                }, children: 'Chart' }) })) : null, _jsxs("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                            }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 8 }, children: [_jsx("div", { style: formLabelStyle || {
-                                                color: theme.secondaryTextColor,
-                                                fontFamily: theme?.fontFamily,
-                                                fontSize: theme?.fontSize || '14px',
-                                                fontWeight: theme.labelFontWeight || '600',
-                                            }, children: "Name" }), _jsx("div", { style: { minWidth: 200, marginTop: 6 }, children: _jsx(TextInputComponent, { onChange: (e) => setChartName(e.target.value), value: chartName, theme: theme, placeholder: 'Enter a chart name' }) })] }), _jsx("div", { style: { width: 20 } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 8 }, children: [_jsx("div", { style: formLabelStyle || {
-                                                color: theme.secondaryTextColor,
-                                                fontFamily: theme?.fontFamily,
-                                                fontSize: theme?.fontSize || '14px',
-                                                fontWeight: theme.labelFontWeight || '600',
-                                            }, children: "Dashboard name" }), _jsx("div", { style: { minWidth: 200, marginTop: 6 }, children: _jsx(SelectComponent, { onChange: (value) => setDashboardName(value), value: dashboardName, theme: theme, options: dashboardOptions }) })] }), _jsx("div", { style: { width: 20 } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 8 }, children: [_jsx("div", { style: formLabelStyle || {
-                                                color: theme.secondaryTextColor,
-                                                fontFamily: theme?.fontFamily,
-                                                fontSize: theme?.fontSize || '14px',
-                                                fontWeight: theme.labelFontWeight || '600',
-                                            }, children: "Chart type" }), _jsx("div", { style: { minWidth: 200, marginTop: 6 }, children: _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' && (_jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        marginTop: 20,
-                        maxWidth: 200,
-                    }, children: [_jsx("div", { style: formLabelStyle || {
-                                color: theme.secondaryTextColor,
-                                fontFamily: theme?.fontFamily,
-                                fontSize: theme?.fontSize || '14px',
-                                fontWeight: theme.labelFontWeight || '600',
-                            }, children: "Buckets" }), _jsx("div", { style: {
-                                maxWidth: 200,
-                                // marginTop: 6,
-                                display: 'flex',
-                                flexDirection: 'column',
-                            }, children: bucketFields.map((bucketField, index) => (_jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    marginTop: index === 0 ? 6 : 10,
-                                }, children: [_jsx("div", { style: { minWidth: 200 }, children: _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 }) }), _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: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme?.secondaryTextColor, height: "20", width: "20", children: _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 && (_jsx("div", { style: { marginTop: 12 }, children: _jsx(SecondaryButtonComponent, { onClick: handleAddBucket, label: "Add bucket +" }) }))] })), _jsx("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        // justifyContent: 'space-between',
-                        marginTop: 20,
-                    }, children: chartType !== 'table' && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_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' }), _jsx("div", { style: { height: 6 } }), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                }, children: [_jsx("div", { style: { minWidth: 200 }, children: _jsx(SelectComponent, { onChange: (e) => handleXAxisFieldChange(e), value: xAxisField, options: xAxisOptions, theme: theme }) }), _jsx("div", { style: { width: 20 } }), _jsx("div", { style: { minWidth: 200 }, children: _jsx(TextInputComponent, { onChange: (e) => setXAxisLabel(e.target.value), value: xAxisLabel, theme: theme, placeholder: 'Enter a label' }) }), _jsx("div", { style: { width: 20 } }), _jsx("div", { style: { minWidth: 200 }, children: _jsx(SelectComponent, { onChange: (e) => setXAxisFormat(e), value: xAxisFormat, options: X_FORMAT_OPTIONS, theme: theme }) })] })] })) }), _jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'flex-start',
-                        // justifyContent: 'space-between',
-                        marginTop: 20,
-                    }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_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' }), _jsxs("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                    }, children: [yAxisFields.map((yAxisField, index) => (_jsx("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'row',
-                                                alignItems: 'center',
-                                                marginTop: index === 0 ? 6 : 10,
-                                            }, children: _jsx("div", { style: { minWidth: 200 }, children: _jsx(SelectComponent, { onChange: (option) => handleYAxisFieldChange(index, option), value: yAxisField.field, options: chartType === 'table' ? fieldOptions : yAxisOptions, theme: theme }) }) }, `yAxisField-${index}`))), chartType !== 'pie' && (_jsx("div", { style: { marginTop: 12 }, children: _jsx(SecondaryButtonComponent, { onClick: handleAddYAxisField, label: "Add column +" }) })), _jsx("div", { style: { height: 10 } })] })] }), _jsx("div", { style: { width: 20 } }), _jsxs("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                justifyContent: 'flex-start',
-                            }, children: [_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) => (_jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            // alignItems: 'center',
-                                            marginTop: index === 0 ? 6 : 10,
-                                        }, children: [_jsx("div", { style: { minWidth: 200 }, children: _jsx(TextInputComponent, { value: yAxisFields[index].label, onChange: (e) => {
-                                                        handleYAxisLabelChange(index, e.target.value);
-                                                    }, theme: theme, placeholder: 'Enter a label' }) }), _jsx("div", { style: { width: 20 } }), _jsx("div", { style: { minWidth: 200 }, children: _jsx(SelectComponent, { onChange: (value) => handleYAxisFieldFormatChange(index, value), value: yAxisField.format, options: Y_FORMAT_OPTIONS, theme: theme }) }), _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: _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: _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}`)))] })] }), _jsx("div", { style: { height: 20 } }), showTableFormatOptions && (_jsxs(_Fragment, { children: [_jsx("div", { style: formHeaderStyle || {
-                                fontFamily: theme.fontFamily,
-                                color: theme.primaryTextColor,
-                                fontSize: theme.fontSize + 2,
-                                fontWeight: 600,
-                                // marginTop: 20,
-                            }, children: 'Table' }), _jsx("div", { style: { height: 8 } })] })), showTableFormatOptions && chartType !== 'table' && (_jsx("div", { style: formLabelStyle || {
-                        color: theme.secondaryTextColor,
-                        fontFamily: theme?.fontFamily,
-                        fontSize: theme?.fontSize || '14px',
-                        fontWeight: theme.labelFontWeight || '600',
-                    }, children: 'Columns' })), showTableFormatOptions && chartType !== 'table' && (_jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'flex-start',
-                        marginTop: 6,
-                        // justifyContent: 'space-between',
-                        // marginTop: 8,
-                    }, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                }, children: [columns.map((yAxisField, index) => (_jsx("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            alignItems: 'center',
-                                            marginTop: index === 0 ? 6 : 10,
-                                        }, children: _jsx("div", { style: { minWidth: 200 }, children: _jsx(SelectComponent, { value: yAxisField.field, onChange: (option) => {
-                                                    handleColumnFieldChange(index, option);
-                                                }, options: fieldOptions, theme: theme }) }) }, `column-${index}`))), _jsx("div", { style: { height: 10 } })] }) }), _jsx("div", { style: { width: 20 } }), _jsx("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                justifyContent: 'flex-start',
-                            }, children: columns.map((yAxisField, index) => (_jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    marginTop: index === 0 ? 6 : 10,
-                                }, children: [_jsx("div", { style: { minWidth: 200 }, children: _jsx(TextInputComponent, { theme: theme, placeholder: "Enter column label", value: yAxisField.label, onChange: (event) => handleColumnLabelChange(index, event.target.value) }) }), _jsx("div", { style: { width: 20 } }), _jsx("div", { style: { minWidth: 200 }, children: _jsx(SelectComponent, { value: yAxisField.format, onChange: (option) => handleColumnFormatChange(index, option), options: Y_FORMAT_OPTIONS, theme: theme }) })] }, `column-${index}`))) })] })), showDateFieldOptions && _jsx("div", { style: { height: 20 } }), showDateFieldOptions && (_jsxs(_Fragment, { children: [_jsx("div", { style: formHeaderStyle || {
-                                fontFamily: theme.fontFamily,
-                                color: theme.primaryTextColor,
-                                fontSize: theme.fontSize + 2,
-                                fontWeight: 600,
-                                // marginTop: 20,
-                            }, children: 'Filters' }), _jsx("div", { style: { height: 8 } })] })), showDateFieldOptions && (_jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                    }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: formLabelStyle || {
-                                        color: theme.secondaryTextColor,
-                                        fontFamily: theme?.fontFamily,
-                                        fontSize: theme?.fontSize || '14px',
-                                        fontWeight: theme.labelFontWeight || '600',
-                                    }, children: "Date field table" }), _jsx("div", { style: { minWidth: 200, marginTop: 6 }, children: _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 }) })] }), _jsx("div", { style: { width: 20 } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: formLabelStyle || {
-                                        color: theme.secondaryTextColor,
-                                        fontFamily: theme?.fontFamily,
-                                        fontSize: theme?.fontSize || '14px',
-                                        fontWeight: theme.labelFontWeight || '600',
-                                    }, children: "Date field" }), _jsx("div", { style: { minWidth: 200, marginTop: 6 }, children: _jsx(SelectComponent, { options: !dateFieldOptions.length
-                                            ? [{ label: '', value: '' }]
-                                            : dateFieldOptions.filter((elem) => elem.name === dateFieldTable).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 && (_jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        marginTop: 40,
-                        marginBottom: 40,
-                    }, children: [_jsx("div", { style: {
-                                fontFamily: theme.fontFamily,
-                                color: theme.primaryTextColor,
-                                fontSize: theme.fontSize + 2,
-                                fontWeight: 600,
-                            }, children: 'Access Control' }), _jsx("div", { style: { height: 12 } }), _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: [_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})` : ``}` }), _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)' })] })] })), _jsx("div", { style: { paddingRight: 25 }, children: _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' }) }), _jsx("div", { style: { height: 20 } })] }) }));
-}